feat: optimize data grid rendering and secure WebView

src/components/common/DataGridRow.tsx

@@ -0,0 +1,166 @@
+import React, { memo, useCallback, useReducer } from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { ColumnDef, GridRow, validateCellValue } from '../../utils/gridUtils';
+import { InlineEditing } from '../grid/InlineEditing';
+
+interface DataGridRowProps {
+  row: GridRow;
+  rowIndex: number;
+  columns: ColumnDef<GridRow>[];
+  columnWidths: number[];
+  onRowUpdate?: (rowId: string | number, columnKey: string, value: string) => void;
+}
+
+type RowAction =
+  | { type: 'START_EDIT'; columnKey: string; draft: string }
+  | { type: 'UPDATE_DRAFT'; draft: string }
+  | { type: 'SET_ERROR'; error: string | null }
+  | { type: 'COMMIT' }
+  | { type: 'CANCEL' };
+
+interface DataGridRowState {
+  editingColumnKey: string | null;
+  draft: string;
+  error: string | null;
+}
+
+function reducer(state: DataGridRowState, action: RowAction): DataGridRowState {
+  switch (action.type) {
+    case 'START_EDIT':
+      return {
+        editingColumnKey: action.columnKey,
+        draft: action.draft,
+        error: null,
+      };
+
+    case 'UPDATE_DRAFT':
+      return {
+        ...state,
+        draft: action.draft,
+        error: null,
+      };
+
+    case 'SET_ERROR':
+      return {
+        ...state,
+        error: action.error,
+      };
+
+    case 'COMMIT':
+    case 'CANCEL':
+      return {
+        editingColumnKey: null,
+        draft: '',
+        error: null,
+      };
+
+    default:
+      return state;
+  }
+}
+
+const DataGridRowComponent = ({
+  row,
+  rowIndex,
+  columns,
+  columnWidths,
+  onRowUpdate,
+}: DataGridRowProps) => {
+  const [state, dispatch] = useReducer(reducer, {
+    editingColumnKey: null,
+    draft: '',
+    error: null,
+  });
+
+  const handleStartEdit = useCallback((columnKey: string, currentValue: unknown) => {
+    dispatch({
+      type: 'START_EDIT',
+      columnKey,
+      draft: currentValue == null ? '' : String(currentValue),
+    });
+  }, []);
+
+  const handleChangeDraft = useCallback((draft: string) => {
+    dispatch({ type: 'UPDATE_DRAFT', draft });
+  }, []);
+
+  const handleCommit = useCallback(
+    (columnKey: string) => {
+      if (!state.editingColumnKey || state.editingColumnKey !== columnKey) {
+        return;
+      }
+
+      const column = columns.find(c => c.key === columnKey);
+      if (!column) {
+        return;
+      }
+
+      const validationError = validateCellValue(state.draft, column as ColumnDef);
+      if (validationError) {
+        dispatch({ type: 'SET_ERROR', error: validationError });
+        return;
+      }
+
+      onRowUpdate?.(row.id, columnKey, state.draft);
+      dispatch({ type: 'COMMIT' });
+    },
+    [columns, onRowUpdate, row.id, state.draft, state.editingColumnKey]
+  );
+
+  const handleCancel = useCallback(() => dispatch({ type: 'CANCEL' }), []);
+
+  const isEvenRow = rowIndex % 2 === 0;
+
+  return (
+    <View style={[styles.dataRow, isEvenRow && styles.dataRowEven]}>
+      {columns.map((col, idx) => {
+        const cellIsEditing = state.editingColumnKey === col.key;
+
+        return (
+          <View key={col.key} style={[styles.dataCell, { width: columnWidths[idx] }]}>
+            <InlineEditing
+              value={row[col.key]}
+              isEditing={cellIsEditing}
+              draft={cellIsEditing ? state.draft : ''}
+              error={cellIsEditing ? state.error : null}
+              column={col as ColumnDef}
+              onStartEdit={() => handleStartEdit(col.key, row[col.key])}
+              onChangeDraft={handleChangeDraft}
+              onCommit={() => handleCommit(col.key)}
+              onCancel={handleCancel}
+            />
+          </View>
+        );
+      })}
+    </View>
+  );
+};
+
+function areEqual(prevProps: Readonly<DataGridRowProps>, nextProps: Readonly<DataGridRowProps>) {
+  return (
+    prevProps.row === nextProps.row &&
+    prevProps.rowIndex === nextProps.rowIndex &&
+    prevProps.columns === nextProps.columns &&
+    prevProps.columnWidths === nextProps.columnWidths &&
+    prevProps.onRowUpdate === nextProps.onRowUpdate
+  );
+}
+
+export const DataGridRow = memo(DataGridRowComponent, areEqual);
+
+const styles = StyleSheet.create({
+  dataRow: {
+    flexDirection: 'row',
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: '#F3F4F6',
+  },
+  dataRowEven: {
+    backgroundColor: '#FAFAFA',
+  },
+  dataCell: {
+    borderRightWidth: StyleSheet.hairlineWidth,
+    borderRightColor: '#E5E7EB',
+    justifyContent: 'center',
+  },
+});

src/components/common/SecureWebView.tsx

@@ -1,6 +1,16 @@
-import React from 'react';
+/**
+ * SecureWebView wraps the native WebView implementation and enforces
+ * a restrictive default Content Security Policy for embedded content.
+ *
+ * Documented usage:
+ * - No current app screens import WebView directly.
+ * - SecureWebView is the safe wrapper to use for any future screen that
+ *   loads external or embedded HTML content.
+ */
+import React from 'react';
 import { View, StyleSheet } from 'react-native';
 import { WebView, WebViewProps } from 'react-native-webview';
+
 import { CSP_TRUST_TIERS, TrustTier } from '../../config/security';
 
 interface SecureWebViewProps extends Omit<WebViewProps, 'source'> {
@@ -9,30 +19,43 @@ interface SecureWebViewProps extends Omit<WebViewProps, 'source'> {
   platformDomain?: string;
 }
 
-export function SecureWebView({
+export const SecureWebView = ({
   source,
   trustLevel = 'restricted',
   platformDomain = 'platform.com',
   style,
+  originWhitelist,
+  javaScriptEnabled,
+  domStorageEnabled,
+  allowsInlineMediaPlayback,
+  mediaPlaybackRequiresUserAction,
+  injectedJavaScriptBeforeContentLoaded,
+  startInLoadingState,
   ...props
-}: SecureWebViewProps) {
+}: SecureWebViewProps) => {
   const csp = CSP_TRUST_TIERS[trustLevel];
-  const injectedJs = "(function(){var m=document.createElement('meta');m.httpEquiv='Content-Security-Policy';m.content='" + csp + "';document.head.insertBefore(m,document.head.firstChild);})();true;";
-  const originWhitelist = trustLevel === 'restricted' ? undefined : ['https://*.' + platformDomain, 'https://' + platformDomain];
+  const finalOriginWhitelist = originWhitelist ?? ['https://*'];
+  const injectedJs =
+    injectedJavaScriptBeforeContentLoaded ??
+    "(function(){var m=document.createElement('meta');m.httpEquiv='Content-Security-Policy';m.content='" +
+      csp +
+      "';document.head.insertBefore(m,document.head.firstChild);})();true;";
 
   return (
     <View style={[styles.container, style]}>
       <WebView
         source={source}
         injectedJavaScriptBeforeContentLoaded={injectedJs}
-        originWhitelist={originWhitelist}
-        javaScriptEnabled={trustLevel !== 'restricted'}
-        domStorageEnabled={trustLevel !== 'restricted'}
-        allowsInlineMediaPlayback={trustLevel === 'trusted'}
+        originWhitelist={finalOriginWhitelist}
+        javaScriptEnabled={javaScriptEnabled ?? false}
+        domStorageEnabled={domStorageEnabled ?? false}
+        allowsInlineMediaPlayback={allowsInlineMediaPlayback ?? false}
+        mediaPlaybackRequiresUserAction={mediaPlaybackRequiresUserAction ?? true}
+        startInLoadingState={startInLoadingState ?? true}
         {...props}
       />
     </View>
   );
-}
+};
 
 const styles = StyleSheet.create({ container: { flex: 1 } });