pixel-react 1.5.3 → 1.5.4

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

@@ -1,168 +1,168 @@
-import * as React from 'react';
-import classNames from 'classnames';
-import * as Types from './types';
-import * as Point from './point';
-import * as Actions from './actions';
-import useDispatch from './use-dispatch';
-import useSelector from './use-selector';
-
-const ColumnIndicator: Types.ColumnIndicatorComponent = ({
-  column,
-  label,
-  selected,
-  onSelect,
-  setContextMenu,
-  deleteColumn,
-  addColumnLeft,
-  data,
-}) => {
-  const dispatch = useDispatch();
-  const [width, setWidth] = React.useState(100);
-  let options = [
-    {
-      label: 'Add Column',
-      value: 'Add Column',
-      iconName: 'plus_icon',
-      action: () => {
-        addColumnLeft(data);
-      },
-      disable: false,
-    },
-    {
-      label: 'Delete Column',
-      value: 'Delete Column',
-      iconName: 'delete',
-      action: () => {
-        deleteColumn(data);
-      },
-      disable: false,
-    },
-  ];
-
-  const onMouseDown = (e: React.MouseEvent) => {
-    const startX = e.clientX;
-
-    const onMouseMove = (moveEvent: MouseEvent) => {
-      const newWidth = width + (moveEvent.clientX - startX);
-      setWidth(newWidth);
-
-      const selectedAllRow = document.querySelector(
-        'ff-spreadsheet-floating-rect--selected'
-      );
-      const selectedSingleRow = document.querySelector(
-        'ff-spreadsheet-active-cell'
-      );
-
-      if (
-        selectedAllRow instanceof HTMLElement &&
-        selectedSingleRow instanceof HTMLElement
-      ) {
-        selectedAllRow.style.width = `${newWidth}px`;
-        selectedSingleRow.style.width = `${newWidth}px`;
-      }
-    };
-
-    const onMouseUp = () => {
-      document.removeEventListener('mousemove', onMouseMove);
-      document.removeEventListener('mouseup', onMouseUp);
-    };
-
-    document.addEventListener('mousemove', onMouseMove);
-    document.addEventListener('mouseup', onMouseUp);
-  };
-
-  const activate = React.useCallback(
-    (point: Point.Point) => dispatch(Actions.activate(point)),
-    [dispatch]
-  );
-
-  const handleClick = React.useCallback(
-    (event: React.MouseEvent) => {
-      onSelect(column, event.shiftKey);
-    },
-    [onSelect, column]
-  );
-
-  const contextClick = React.useCallback(
-    (event: React.MouseEvent) => {
-      event.preventDefault();
-
-      onSelect(column, event.shiftKey);
-
-      setContextMenu({
-        open: true,
-        position: {
-          x: event.clientX,
-          y: event.clientY - 50,
-        },
-        options: options,
-      });
-    },
-    [onSelect, column, setContextMenu]
-  );
-
-  return (
-    <th
-      style={{ minWidth: `${width}px`, position: 'relative' }}
-      className={classNames('ff-spreadsheet-header', {
-        'ff-spreadsheet-header--selected': selected,
-      })}
-      onClick={handleClick}
-      onContextMenu={contextClick}
-      tabIndex={0}
-    >
-      {label !== undefined ? label : columnIndexToLabel(column)}
-      <div
-        onMouseDown={onMouseDown}
-        onClick={() => {
-          activate;
-        }}
-        style={{
-          zIndex: 'inherit',
-          width: '2px',
-          position: 'absolute',
-          right: 0,
-          top: 0,
-          height: '100%',
-          cursor: 'ew-resize',
-        }}
-      />
-    </th>
-  );
-};
-
-export default ColumnIndicator;
-
-export const enhance = (
-  ColumnIndicatorComponent: Types.ColumnIndicatorComponent
-): React.FC<Omit<Types.ColumnIndicatorProps, 'selected' | 'onSelect'>> => {
-  return function ColumnIndicatorWrapper(props) {
-    const dispatch = useDispatch();
-    const selectEntireColumn = React.useCallback(
-      (column: number, extend: boolean) =>
-        dispatch(Actions.selectEntireColumn(column, extend)),
-      [dispatch]
-    );
-    const selected = useSelector((state) =>
-      state.selected.hasEntireColumn(props.column)
-    );
-    return (
-      <ColumnIndicatorComponent
-        {...props}
-        selected={selected}
-        onSelect={selectEntireColumn}
-      />
-    );
-  };
-};
-
-// Utility function to convert column index to label (e.g., 0 -> A, 1 -> B, etc.)
-function columnIndexToLabel(column: number): string {
-  let label = '';
-  let index = column;
-  while (index >= 0) {
-    label = String.fromCharCode(65 + (index % 26)) + label;
-    index = Math.floor(index / 26) - 1;
-  }
-  return label;
-}
+import * as React from 'react';
+import classNames from 'classnames';
+import * as Types from './types';
+import * as Point from './point';
+import * as Actions from './actions';
+import useDispatch from './use-dispatch';
+import useSelector from './use-selector';
+
+const ColumnIndicator: Types.ColumnIndicatorComponent = ({
+  column,
+  label,
+  selected,
+  onSelect,
+  setContextMenu,
+  deleteColumn,
+  addColumnLeft,
+  data,
+}) => {
+  const dispatch = useDispatch();
+  const [width, setWidth] = React.useState(100);
+  let options = [
+    {
+      label: 'Add Column',
+      value: 'Add Column',
+      iconName: 'plus_icon',
+      action: () => {
+        addColumnLeft(data);
+      },
+      disable: false,
+    },
+    {
+      label: 'Delete Column',
+      value: 'Delete Column',
+      iconName: 'delete',
+      action: () => {
+        deleteColumn(data);
+      },
+      disable: false,
+    },
+  ];
+
+  const onMouseDown = (e: React.MouseEvent) => {
+    const startX = e.clientX;
+
+    const onMouseMove = (moveEvent: MouseEvent) => {
+      const newWidth = width + (moveEvent.clientX - startX);
+      setWidth(newWidth);
+
+      const selectedAllRow = document.querySelector(
+        'ff-spreadsheet-floating-rect--selected'
+      );
+      const selectedSingleRow = document.querySelector(
+        'ff-spreadsheet-active-cell'
+      );
+
+      if (
+        selectedAllRow instanceof HTMLElement &&
+        selectedSingleRow instanceof HTMLElement
+      ) {
+        selectedAllRow.style.width = `${newWidth}px`;
+        selectedSingleRow.style.width = `${newWidth}px`;
+      }
+    };
+
+    const onMouseUp = () => {
+      document.removeEventListener('mousemove', onMouseMove);
+      document.removeEventListener('mouseup', onMouseUp);
+    };
+
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
+  };
+
+  const activate = React.useCallback(
+    (point: Point.Point) => dispatch(Actions.activate(point)),
+    [dispatch]
+  );
+
+  const handleClick = React.useCallback(
+    (event: React.MouseEvent) => {
+      onSelect(column, event.shiftKey);
+    },
+    [onSelect, column]
+  );
+
+  const contextClick = React.useCallback(
+    (event: React.MouseEvent) => {
+      event.preventDefault();
+
+      onSelect(column, event.shiftKey);
+
+      setContextMenu({
+        open: true,
+        position: {
+          x: event.clientX,
+          y: event.clientY - 50,
+        },
+        options: options,
+      });
+    },
+    [onSelect, column, setContextMenu]
+  );
+
+  return (
+    <th
+      style={{ minWidth: `${width}px`, position: 'relative' }}
+      className={classNames('ff-spreadsheet-header', {
+        'ff-spreadsheet-header--selected': selected,
+      })}
+      onClick={handleClick}
+      onContextMenu={contextClick}
+      tabIndex={0}
+    >
+      {label !== undefined ? label : columnIndexToLabel(column)}
+      <div
+        onMouseDown={onMouseDown}
+        onClick={() => {
+          activate;
+        }}
+        style={{
+          zIndex: 'inherit',
+          width: '2px',
+          position: 'absolute',
+          right: 0,
+          top: 0,
+          height: '100%',
+          cursor: 'ew-resize',
+        }}
+      />
+    </th>
+  );
+};
+
+export default ColumnIndicator;
+
+export const enhance = (
+  ColumnIndicatorComponent: Types.ColumnIndicatorComponent
+): React.FC<Omit<Types.ColumnIndicatorProps, 'selected' | 'onSelect'>> => {
+  return function ColumnIndicatorWrapper(props) {
+    const dispatch = useDispatch();
+    const selectEntireColumn = React.useCallback(
+      (column: number, extend: boolean) =>
+        dispatch(Actions.selectEntireColumn(column, extend)),
+      [dispatch]
+    );
+    const selected = useSelector((state) =>
+      state.selected.hasEntireColumn(props.column)
+    );
+    return (
+      <ColumnIndicatorComponent
+        {...props}
+        selected={selected}
+        onSelect={selectEntireColumn}
+      />
+    );
+  };
+};
+
+// Utility function to convert column index to label (e.g., 0 -> A, 1 -> B, etc.)
+function columnIndexToLabel(column: number): string {
+  let label = '';
+  let index = column;
+  while (index >= 0) {
+    label = String.fromCharCode(65 + (index % 26)) + label;
+    index = Math.floor(index / 26) - 1;
+  }
+  return label;
+}

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

@@ -1,25 +1,25 @@
-import * as React from 'react';
-import FloatingRect from './FloatingRect';
-import { getRangeDimensions } from './util';
-import useSelector from './use-selector';
-
-const Copied: React.FC = () => {
-  const range = useSelector((state) => state.copied);
-  const dimensions = useSelector(
-    (state) =>
-      range &&
-      getRangeDimensions(state.rowDimensions, state.columnDimensions, range)
-  );
-  const hidden = range === null;
-
-  return (
-    <FloatingRect
-      variant="copied"
-      dimensions={dimensions}
-      hidden={hidden}
-      dragging={false}
-    />
-  );
-};
-
-export default Copied;
+import * as React from 'react';
+import FloatingRect from './FloatingRect';
+import { getRangeDimensions } from './util';
+import useSelector from './use-selector';
+
+const Copied: React.FC = () => {
+  const range = useSelector((state) => state.copied);
+  const dimensions = useSelector(
+    (state) =>
+      range &&
+      getRangeDimensions(state.rowDimensions, state.columnDimensions, range)
+  );
+  const hidden = range === null;
+
+  return (
+    <FloatingRect
+      variant="copied"
+      dimensions={dimensions}
+      hidden={hidden}
+      dragging={false}
+    />
+  );
+};
+
+export default Copied;

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

@@ -1,56 +1,56 @@
-import * as React from 'react';
-import classNames from 'classnames';
-import * as Actions from './actions';
-import { EntireWorksheetSelection } from './selection';
-import * as Types from './types';
-import useDispatch from './use-dispatch';
-import useSelector from './use-selector';
-import Icon from '../../../Icon';
-
-const CornerIndicator: Types.CornerIndicatorComponent = ({
-  selected,
-  onSelect,
-}) => {
-  const handleClick = React.useCallback(() => {
-    onSelect();
-  }, [onSelect]);
-  return (
-    <th
-      className={classNames('ff-spreadsheet-header', {
-        'ff-spreadsheet-header--selected': selected,
-      })}
-      onClick={handleClick}
-      tabIndex={0}
-    >
-      <Icon
-        variant={selected ? 'dark' : 'light'}
-        className="corner_indicator"
-        name="excel_corner_menu"
-      />
-    </th>
-  );
-};
-
-export default CornerIndicator;
-
-export const enhance = (
-  CornerIndicatorComponent: Types.CornerIndicatorComponent
-): React.FC<Omit<Types.CornerIndicatorProps, 'selected' | 'onSelect'>> => {
-  return function CornerIndicatorWrapper(props) {
-    const dispatch = useDispatch();
-    const selectEntireWorksheet = React.useCallback(
-      () => dispatch(Actions.selectEntireWorksheet()),
-      [dispatch]
-    );
-    const selected = useSelector(
-      (state) => state.selected instanceof EntireWorksheetSelection
-    );
-    return (
-      <CornerIndicatorComponent
-        {...props}
-        selected={selected}
-        onSelect={selectEntireWorksheet}
-      />
-    );
-  };
-};
+import * as React from 'react';
+import classNames from 'classnames';
+import * as Actions from './actions';
+import { EntireWorksheetSelection } from './selection';
+import * as Types from './types';
+import useDispatch from './use-dispatch';
+import useSelector from './use-selector';
+import Icon from '../../../Icon';
+
+const CornerIndicator: Types.CornerIndicatorComponent = ({
+  selected,
+  onSelect,
+}) => {
+  const handleClick = React.useCallback(() => {
+    onSelect();
+  }, [onSelect]);
+  return (
+    <th
+      className={classNames('ff-spreadsheet-header', {
+        'ff-spreadsheet-header--selected': selected,
+      })}
+      onClick={handleClick}
+      tabIndex={0}
+    >
+      <Icon
+        variant={selected ? 'dark' : 'light'}
+        className="corner_indicator"
+        name="excel_corner_menu"
+      />
+    </th>
+  );
+};
+
+export default CornerIndicator;
+
+export const enhance = (
+  CornerIndicatorComponent: Types.CornerIndicatorComponent
+): React.FC<Omit<Types.CornerIndicatorProps, 'selected' | 'onSelect'>> => {
+  return function CornerIndicatorWrapper(props) {
+    const dispatch = useDispatch();
+    const selectEntireWorksheet = React.useCallback(
+      () => dispatch(Actions.selectEntireWorksheet()),
+      [dispatch]
+    );
+    const selected = useSelector(
+      (state) => state.selected instanceof EntireWorksheetSelection
+    );
+    return (
+      <CornerIndicatorComponent
+        {...props}
+        selected={selected}
+        onSelect={selectEntireWorksheet}
+      />
+    );
+  };
+};

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

@@ -1,37 +1,37 @@
-import * as React from 'react';
-import * as Types from './types';
-import { moveCursorToEnd } from './util';
-
-/** The default Spreadsheet DataEditor component */
-const DataEditor: React.FC<Types.DataEditorProps> = ({ onChange, cell }) => {
-  const inputRef = React.useRef<HTMLInputElement>(null);
-
-  const handleChange = React.useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>) => {
-      onChange({ ...cell, value: event.target.value, style: cell?.style });
-    },
-    [onChange, cell]
-  );
-
-  React.useEffect(() => {
-    if (inputRef.current) {
-      moveCursorToEnd(inputRef.current);
-    }
-  }, [inputRef]);
-
-  const value = cell?.value ?? '';
-
-  return (
-    <div className="ff-spreadsheet-data-editor">
-      <input
-        ref={inputRef}
-        type="text"
-        onChange={handleChange}
-        value={value}
-        autoFocus
-      />
-    </div>
-  );
-};
-
-export default DataEditor;
+import * as React from 'react';
+import * as Types from './types';
+import { moveCursorToEnd } from './util';
+
+/** The default Spreadsheet DataEditor component */
+const DataEditor: React.FC<Types.DataEditorProps> = ({ onChange, cell }) => {
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  const handleChange = React.useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      onChange({ ...cell, value: event.target.value, style: cell?.style });
+    },
+    [onChange, cell]
+  );
+
+  React.useEffect(() => {
+    if (inputRef.current) {
+      moveCursorToEnd(inputRef.current);
+    }
+  }, [inputRef]);
+
+  const value = cell?.value ?? '';
+
+  return (
+    <div className="ff-spreadsheet-data-editor">
+      <input
+        ref={inputRef}
+        type="text"
+        onChange={handleChange}
+        value={value}
+        autoFocus
+      />
+    </div>
+  );
+};
+
+export default DataEditor;

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

@@ -1,46 +1,46 @@
-import * as React from 'react';
-import classNames from 'classnames';
-import * as Types from './types';
-import { hasLineBreaker } from './util';
-
-export const TRUE_TEXT = 'TRUE';
-export const FALSE_TEXT = 'FALSE';
-
-/** The default Spreadsheet DataViewer component */
-const DataViewer = <Cell extends Types.CellBase<Value>, Value>({
-  cell,
-  evaluatedCell,
-}: Types.DataViewerProps<Cell>): React.ReactElement => {
-  const value = getValue(cell, evaluatedCell);
-
-  return typeof value === 'boolean' ? (
-    <span className="ff-spreadsheet-data-viewer ff-spreadsheet-data-viewer--boolean">
-      {convertBooleanToText(value)}
-    </span>
-  ) : (
-    <span
-      className={classNames('ff-spreadsheet-data-viewer', {
-        'ff-spreadsheet-data-viewer--preserve-breaks': hasLineBreaker(value),
-      })}
-    >
-      {value}
-    </span>
-  );
-};
-
-export default DataViewer;
-
-function getValue(
-  cell: Types.CellBase | undefined,
-  evaluatedCell: Types.CellBase | undefined
-) {
-  const baseValue = evaluatedCell?.value ?? cell?.value;
-  if (baseValue && typeof baseValue === 'object') {
-    return baseValue.toString();
-  }
-  return baseValue;
-}
-
-export function convertBooleanToText(value: boolean): string {
-  return value ? TRUE_TEXT : FALSE_TEXT;
-}
+import * as React from 'react';
+import classNames from 'classnames';
+import * as Types from './types';
+import { hasLineBreaker } from './util';
+
+export const TRUE_TEXT = 'TRUE';
+export const FALSE_TEXT = 'FALSE';
+
+/** The default Spreadsheet DataViewer component */
+const DataViewer = <Cell extends Types.CellBase<Value>, Value>({
+  cell,
+  evaluatedCell,
+}: Types.DataViewerProps<Cell>): React.ReactElement => {
+  const value = getValue(cell, evaluatedCell);
+
+  return typeof value === 'boolean' ? (
+    <span className="ff-spreadsheet-data-viewer ff-spreadsheet-data-viewer--boolean">
+      {convertBooleanToText(value)}
+    </span>
+  ) : (
+    <span
+      className={classNames('ff-spreadsheet-data-viewer', {
+        'ff-spreadsheet-data-viewer--preserve-breaks': hasLineBreaker(value),
+      })}
+    >
+      {value}
+    </span>
+  );
+};
+
+export default DataViewer;
+
+function getValue(
+  cell: Types.CellBase | undefined,
+  evaluatedCell: Types.CellBase | undefined
+) {
+  const baseValue = evaluatedCell?.value ?? cell?.value;
+  if (baseValue && typeof baseValue === 'object') {
+    return baseValue.toString();
+  }
+  return baseValue;
+}
+
+export function convertBooleanToText(value: boolean): string {
+  return value ? TRUE_TEXT : FALSE_TEXT;
+}