pixel-react 1.8.2 → 1.8.4

package/src/components/Excel/ExcelFile/ExcelFileComponents/ActiveCell.tsx

@@ -1,148 +1,155 @@
-import * as React from 'react';
-import classnames from 'classnames';
-import * as Actions from './actions';
-import * as Types from './types';
-import * as Point from './point';
-import useSelector from './use-selector';
-import useDispatch from './use-dispatch';
-import { getCellDimensions } from './util';
-import * as Matrix from './matrix';
-
-type Props = {
-  DataEditor: Types.DataEditorComponent;
-};
-
-const ActiveCell: React.FC<Props> = (props) => {
-  const rootRef = React.useRef<HTMLDivElement>(null);
-  const dispatch = useDispatch();
-  const setCellData = React.useCallback(
-    (active: Point.Point, data: Types.CellBase) =>
-      dispatch(Actions.setCellData(active, data)),
-    [dispatch]
-  );
-  const edit = React.useCallback(() => dispatch(Actions.edit()), [dispatch]);
-  const autoFill = React.useCallback(
-    (value: boolean) => dispatch(Actions.autoFill(value)),
-    [dispatch]
-  );
-  const commit = React.useCallback(
-    (changes: Types.CommitChanges<Types.CellBase>) =>
-      dispatch(Actions.commit(changes)),
-    [dispatch]
-  );
-  const view = React.useCallback(() => {
-    dispatch(Actions.view());
-  }, [dispatch]);
-  const active = useSelector((state) => state.active);
-  const mode = useSelector((state) => state.mode);
-  const cell = useSelector((state) =>
-    state.active ? Matrix.get(state.active, state.model.data) : undefined
-  );
-  const dimensions = useSelector((state) => {
-    let dimensionValue = active
-      ? getCellDimensions(active, state.rowDimensions, state.columnDimensions)
-      : undefined;
-    dimensionValue = {
-      top: dimensionValue?.top ?? 0,
-      height: (dimensionValue?.height ?? 0) + 1,
-      left: dimensionValue?.left ?? 0,
-      width: (dimensionValue?.width ?? 0) + 1,
-    };
-    return dimensionValue;
-  });
-
-  const hidden = React.useMemo(
-    () => !active || !dimensions,
-    [active, dimensions]
-  );
-
-  const initialCellRef = React.useRef<Types.CellBase | undefined>(undefined);
-  const prevActiveRef = React.useRef<Point.Point | null>(null);
-  const prevCellRef = React.useRef<Types.CellBase | undefined>(undefined);
-
-  const handleChange = React.useCallback(
-    (cell: Types.CellBase) => {
-      if (!active) {
-        return;
-      }
-      setCellData(active, cell);
-    },
-    [setCellData, active]
-  );
-
-  React.useEffect(() => {
-    const root = rootRef.current;
-    if (!hidden && root) {
-      root.focus();
-    }
-  }, [rootRef, hidden]);
-
-  React.useEffect(() => {
-    const prevActive = prevActiveRef.current;
-    const prevCell = prevCellRef.current;
-    prevActiveRef.current = active;
-    prevCellRef.current = cell;
-
-    if (!prevActive || !prevCell) {
-      return;
-    }
-
-    const coordsChanged =
-      active?.row !== prevActive.row || active?.column !== prevActive.column;
-    const exitedEditMode = mode !== 'edit';
-
-    if (coordsChanged || exitedEditMode) {
-      const initialCell = initialCellRef.current;
-      if (prevCell !== initialCell) {
-        commit([
-          {
-            prevCell: initialCell || null,
-            nextCell: prevCell,
-          },
-        ]);
-      } else if (!coordsChanged && cell !== prevCell) {
-        commit([
-          {
-            prevCell,
-            nextCell: cell || null,
-          },
-        ]);
-      }
-      initialCellRef.current = cell;
-    }
-  });
-
-  const DataEditor = (cell && cell.DataEditor) || props.DataEditor;
-  const readOnly = cell && cell.readOnly;
-
-  const handleMouseDown = React.useCallback(() => {
-    mode === 'view' ? autoFill(true) : autoFill(false);
-  }, [mode, autoFill]);
-
-  return hidden ? null : (
-    <div
-      ref={rootRef}
-      className={classnames(
-        'ff-spreadsheet-active-cell',
-        `ff-spreadsheet-active-cell--${mode}`
-      )}
-      style={dimensions}
-      onClick={mode === 'view' && !readOnly ? edit : undefined}
-      tabIndex={0}
-    >
-      {mode === 'edit' && active && (
-        <DataEditor
-          row={active.row}
-          column={active.column}
-          cell={cell}
-          // @ts-ignore
-          onChange={handleChange}
-          exitEditMode={view}
-        />
-      )}
-      <div onMouseDown={handleMouseDown} className="select_dot"></div>
-    </div>
-  );
-};
-
-export default ActiveCell;
+import * as React from 'react';
+import classnames from 'classnames';
+import * as Actions from './actions';
+import * as Types from './types';
+import * as Point from './point';
+import useSelector from './use-selector';
+import useDispatch from './use-dispatch';
+import { getCellDimensions } from './util';
+import * as Matrix from './matrix';
+
+type Props = {
+  DataEditor: Types.DataEditorComponent;
+};
+
+const ActiveCell: React.FC<Props> = (props) => {
+  const rootRef = React.useRef<HTMLDivElement>(null);
+  const dispatch = useDispatch();
+  const setCellData = React.useCallback(
+    (active: Point.Point, data: Types.CellBase) =>
+      dispatch(Actions.setCellData(active, data)),
+    [dispatch]
+  );
+  const activate = React.useCallback(
+    (point: Point.Point) => dispatch(Actions.activate(point)),
+    [dispatch]
+  );
+  const edit = React.useCallback(() => dispatch(Actions.edit()), [dispatch]);
+  const autoFill = React.useCallback(
+    (value: boolean) => dispatch(Actions.autoFill(value)),
+    [dispatch]
+  );
+  const commit = React.useCallback(
+    (changes: Types.CommitChanges<Types.CellBase>) =>
+      dispatch(Actions.commit(changes)),
+    [dispatch]
+  );
+  const view = React.useCallback(() => {
+    dispatch(Actions.view());
+  }, [dispatch]);
+  const active = useSelector((state) => state.active);
+  const mode = useSelector((state) => state.mode);
+  const cell = useSelector((state) =>
+    state.active ? Matrix.get(state.active, state.model.data) : undefined
+  );
+  const dimensions = useSelector((state) => {
+    let dimensionValue = active
+      ? getCellDimensions(active, state.rowDimensions, state.columnDimensions)
+      : undefined;
+    dimensionValue = {
+      top: dimensionValue?.top ?? 0,
+      height: (dimensionValue?.height ?? 0) + 1,
+      left: dimensionValue?.left ?? 0,
+      width: (dimensionValue?.width ?? 0) + 1,
+    };
+    return dimensionValue;
+  });
+
+  const hidden = React.useMemo(
+    () => !active || !dimensions,
+    [active, dimensions]
+  );
+
+  const initialCellRef = React.useRef<Types.CellBase | undefined>(undefined);
+  const prevActiveRef = React.useRef<Point.Point | null>(null);
+  const prevCellRef = React.useRef<Types.CellBase | undefined>(undefined);
+
+  const handleChange = React.useCallback(
+    (cell: Types.CellBase) => {
+      if (!active) {
+        return;
+      }
+      setCellData(active, cell);
+    },
+    [setCellData, active]
+  );
+
+  React.useEffect(() => {
+    const root = rootRef.current;
+    if (!hidden && root) {
+      root.focus();
+    }
+  }, [rootRef, hidden]);
+
+  React.useEffect(() => {
+    const prevActive = prevActiveRef.current;
+    const prevCell = prevCellRef.current;
+    prevActiveRef.current = active;
+    prevCellRef.current = cell;
+
+    if (!prevActive || !prevCell) {
+      return;
+    }
+
+    const coordsChanged =
+      active?.row !== prevActive.row || active?.column !== prevActive.column;
+    const exitedEditMode = mode !== 'edit';
+
+    if (coordsChanged || exitedEditMode) {
+      const initialCell = initialCellRef.current;
+      if (prevCell !== initialCell) {
+        commit([
+          {
+            prevCell: initialCell || null,
+            nextCell: prevCell,
+          },
+        ]);
+      } else if (!coordsChanged && cell !== prevCell) {
+        commit([
+          {
+            prevCell,
+            nextCell: cell || null,
+          },
+        ]);
+      }
+      initialCellRef.current = cell;
+    }
+  });
+
+  const DataEditor = (cell && cell.DataEditor) || props.DataEditor;
+  const readOnly = cell && cell.readOnly;
+
+  const handleMouseDown = React.useCallback(() => {
+    if (active) {
+      autoFill(true);
+      activate(active);
+    }
+  }, [activate, autoFill, active]);
+
+  return hidden ? null : (
+    <div
+      ref={rootRef}
+      className={classnames(
+        'ff-spreadsheet-active-cell',
+        `ff-spreadsheet-active-cell--${mode}`
+      )}
+      style={dimensions}
+      onClick={mode === 'view' && !readOnly ? edit : undefined}
+      tabIndex={0}
+    >
+      {mode === 'edit' && active && (
+        <DataEditor
+          row={active.row}
+          column={active.column}
+          cell={cell}
+          // @ts-ignore
+          onChange={handleChange}
+          exitEditMode={view}
+        />
+      )}
+      <div onMouseDown={handleMouseDown} className="select_dot"></div>
+    </div>
+  );
+};
+
+export default ActiveCell;