pixel-react 1.8.4 → 1.8.6

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

@@ -1,176 +1,176 @@
-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';
-import Typography from '../../../Typography';
-
-const ColumnIndicator: Types.ColumnIndicatorComponent = ({
-  column,
-  label,
-  selected,
-  onSelect,
-  setContextMenu,
-  deleteColumn,
-  addColumnLeft,
-  data,
-}) => {
-  const dispatch = useDispatch();
-
-  const columnWidth = useSelector(
-    (state) => state.columnDimensions[column]?.width || 100
-  );
-
-  const 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 = React.useCallback(
-    (event: React.MouseEvent) => {
-      onSelect(column, event.shiftKey);
-
-      const startX = event.clientX;
-      const initialWidth = columnWidth;
-
-      const onMouseMove = (moveEvent: MouseEvent) => {
-        const newWidth = Math.max(
-          100,
-          initialWidth + (moveEvent.clientX - startX)
-        );
-        dispatch(Actions.setColumnPosition(column, newWidth));
-      };
-
-      const onMouseUp = () => {
-        document.removeEventListener('mousemove', onMouseMove);
-        document.removeEventListener('mouseup', onMouseUp);
-        dispatch(Actions.dragEnd());
-      };
-
-      document.addEventListener('mousemove', onMouseMove);
-      document.addEventListener('mouseup', onMouseUp);
-
-      dispatch(Actions.dragStart());
-    },
-    [column, columnWidth, dispatch]
-  );
-
-  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.pageX - 50,
-          y: event.pageY - 260,
-        },
-        options: options,
-      });
-    },
-    [onSelect, column, setContextMenu]
-  );
-
-  return (
-    <th
-      className={classNames('ff-spreadsheet-header', {
-        'ff-spreadsheet-header--selected': selected,
-      })}
-      style={{ minWidth: `${columnWidth}px` }} //Dynamic value, Inline Styling required
-      onClick={handleClick}
-      onContextMenu={contextClick}
-      tabIndex={0}
-    >
-      <div
-        onClick={handleClick}
-        onContextMenu={contextClick}
-        tabIndex={0}
-      ></div>
-      <Typography fontWeight="medium">
-        {label !== undefined ? label : columnIndexToLabel(column)}
-      </Typography>
-      <div
-        onMouseDown={onMouseDown}
-        onClick={() => activate({ row: -1, column })}
-        style={{
-          zIndex: 'inherit',
-          width: '2px',
-          position: 'absolute',
-          right: 0,
-          top: 0,
-          height: '100%',
-          cursor: 'ew-resize',
-        }}
-      />
-    </th>
-  );
-};
-
-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}
-      />
-    );
-  };
-};
-
-const EnhancedColumnIndicator = enhance(ColumnIndicator);
-
-export default EnhancedColumnIndicator;
-
-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';
+import Typography from '../../../Typography';
+
+const ColumnIndicator: Types.ColumnIndicatorComponent = ({
+  column,
+  label,
+  selected,
+  onSelect,
+  setContextMenu,
+  deleteColumn,
+  addColumnLeft,
+  data,
+}) => {
+  const dispatch = useDispatch();
+
+  const columnWidth = useSelector(
+    (state) => state.columnDimensions[column]?.width || 100
+  );
+
+  const 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 = React.useCallback(
+    (event: React.MouseEvent) => {
+      onSelect(column, event.shiftKey);
+
+      const startX = event.clientX;
+      const initialWidth = columnWidth;
+
+      const onMouseMove = (moveEvent: MouseEvent) => {
+        const newWidth = Math.max(
+          100,
+          initialWidth + (moveEvent.clientX - startX)
+        );
+        dispatch(Actions.setColumnPosition(column, newWidth));
+      };
+
+      const onMouseUp = () => {
+        document.removeEventListener('mousemove', onMouseMove);
+        document.removeEventListener('mouseup', onMouseUp);
+        dispatch(Actions.dragEnd());
+      };
+
+      document.addEventListener('mousemove', onMouseMove);
+      document.addEventListener('mouseup', onMouseUp);
+
+      dispatch(Actions.dragStart());
+    },
+    [column, columnWidth, dispatch]
+  );
+
+  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.pageX,
+          y: event.pageY,
+        },
+        options: options,
+      });
+    },
+    [onSelect, column, setContextMenu]
+  );
+
+  return (
+    <th
+      className={classNames('ff-spreadsheet-header', {
+        'ff-spreadsheet-header--selected': selected,
+      })}
+      style={{ minWidth: `${columnWidth}px` }} //Dynamic value, Inline Styling required
+      onClick={handleClick}
+      onContextMenu={contextClick}
+      tabIndex={0}
+    >
+      <div
+        onClick={handleClick}
+        onContextMenu={contextClick}
+        tabIndex={0}
+      ></div>
+      <Typography fontWeight="medium">
+        {label !== undefined ? label : columnIndexToLabel(column)}
+      </Typography>
+      <div
+        onMouseDown={onMouseDown}
+        onClick={() => activate({ row: -1, column })}
+        style={{
+          zIndex: 'inherit',
+          width: '2px',
+          position: 'absolute',
+          right: 0,
+          top: 0,
+          height: '100%',
+          cursor: 'ew-resize',
+        }}
+      />
+    </th>
+  );
+};
+
+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}
+      />
+    );
+  };
+};
+
+const EnhancedColumnIndicator = enhance(ColumnIndicator);
+
+export default EnhancedColumnIndicator;
+
+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={'ff-spreadsheet-corner-header'}
-      onClick={handleClick}
-      tabIndex={0}
-    >
-      <div
-        className={classNames('corner-header', {
-          'ff-spreadsheet-header--selected': selected,
-        })}
-      >
-        <Icon variant={selected ? 'dark' : 'light'} name="excel_corner_menu" />
-      </div>
-    </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={'ff-spreadsheet-corner-header'}
+      onClick={handleClick}
+      tabIndex={0}
+    >
+      <div
+        className={classNames('corner-header', {
+          'ff-spreadsheet-header--selected': selected,
+        })}
+      >
+        <Icon variant={selected ? 'dark' : 'light'} name="excel_corner_menu" />
+      </div>
+    </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,40 +1,40 @@
-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"
-      style={{ ...cell?.style, border: 'none' }} //Inline Styling needed for border:none
-    >
-      <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"
+      style={{ ...cell?.style, border: 'none' }} //Inline Styling needed for border:none
+    >
+      <input
+        ref={inputRef}
+        type="text"
+        onChange={handleChange}
+        value={value}
+        autoFocus
+      />
+    </div>
+  );
+};
+
+export default DataEditor;