pixel-react 1.10.15 → 1.10.16

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

@@ -1,183 +0,0 @@
-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;
-  setContextMenu:React.Dispatch<React.SetStateAction<ContextMenuState>>; 
-  contextOption?: {
-    open: boolean;
-    options: {
-      label: string;
-      value: string;
-      iconName: string;
-      action: () => void;
-    }[];
-  };
-
-};
-
-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]);
-
-  const contextClick = React.useCallback(
-    (event: React.MouseEvent) => {
-      event.preventDefault();
-      
-      props.setContextMenu({
-        open:  props.contextOption?.open ?? false,
-        position: {
-          x: event.pageX - 450,
-          y: event.pageY - 260,
-        },
-        options: props.contextOption?.options || [], 
-      });
-    },
-    [props]
-  );
-  
-  return hidden ? null : (
-    <div
-      ref={rootRef}
-      className={classnames(
-        'ff-spreadsheet-active-cell',
-        `ff-spreadsheet-active-cell--${mode}`
-      )}
-      style={dimensions}
-      onContextMenu={contextClick}
-      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;

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

@@ -1,170 +0,0 @@
-import * as React from 'react';
-import classnames from 'classnames';
-import * as Matrix from './matrix';
-import * as Types from './types';
-import * as Point from './point';
-import * as Actions from './actions';
-import { isActive, getOffsetRect } from './util';
-import useDispatch from './use-dispatch';
-import useSelector from './use-selector';
-
-export const Cell: React.FC<Types.CellComponentProps> = ({
-  row,
-  column,
-  DataViewer,
-  selected,
-  active,
-  dragging,
-  mode,
-  data,
-  evaluatedData,
-  select,
-  activate,
-  setCellDimensions,
-  setCellData,
-}): React.ReactElement => {
-  const rootRef = React.useRef<HTMLTableCellElement | null>(null);
-  const point = React.useMemo(
-    (): Point.Point => ({
-      row,
-      column,
-    }),
-    [row, column]
-  );
-
-  const handleMouseDown = React.useCallback(
-    (event: React.MouseEvent<HTMLTableCellElement>) => {
-      if (mode === 'view') {
-        setCellDimensions(point, getOffsetRect(event.currentTarget));
-
-        if (event.shiftKey) {
-          select(point);
-        } else {
-          activate(point);
-        }
-      }
-    },
-    [mode, setCellDimensions, point, select, activate]
-  );
-
-  const handleMouseOver = React.useCallback(
-    (event: React.MouseEvent<HTMLTableCellElement>) => {
-      if (dragging) {
-        setCellDimensions(point, getOffsetRect(event.currentTarget));
-        select(point);
-      }
-    },
-    [setCellDimensions, select, dragging, point]
-  );
-
-  React.useEffect(() => {
-    const root = rootRef.current;
-    if (selected && root) {
-      setCellDimensions(point, getOffsetRect(root));
-    }
-    if (root && active && mode === 'view') {
-      root.focus();
-    }
-  }, [setCellDimensions, selected, active, mode, point, data]);
-
-  if (data && data.DataViewer) {
-    // @ts-ignore
-    DataViewer = data.DataViewer;
-  }
-
-  return (
-    <td
-      ref={rootRef}
-      style={data?.style}
-      className={classnames('ff-spreadsheet-cell', data?.className, {
-        'ff-spreadsheet-active-cell': active || dragging,
-      })}
-      onMouseEnter={handleMouseOver}
-      onMouseDown={handleMouseDown}
-      tabIndex={0}
-    >
-      <DataViewer
-        row={row}
-        column={column}
-        cell={data}
-        evaluatedCell={evaluatedData}
-        setCellData={setCellData}
-      />
-    </td>
-  );
-};
-
-export const enhance = (
-  CellComponent: React.ComponentType<Types.CellComponentProps>
-): React.FC<
-  Omit<
-    Types.CellComponentProps,
-    | 'selected'
-    | 'active'
-    | 'copied'
-    | 'dragging'
-    | 'mode'
-    | 'data'
-    | 'select'
-    | 'activate'
-    | 'setCellDimensions'
-  >
-> => {
-  return function CellWrapper(props) {
-    const { row, column } = props;
-    const dispatch = useDispatch();
-    const point = React.useMemo(
-      (): Point.Point => ({
-        row,
-        column,
-      }),
-      [row, column]
-    );
-    const setCellData = React.useCallback(
-      (data: Types.CellBase) => dispatch(Actions.setCellData(point, data)),
-      [dispatch, point]
-    );
-    const select = React.useCallback(
-      (point: Point.Point) => dispatch(Actions.select(point)),
-      [dispatch]
-    );
-    const activate = React.useCallback(
-      (point: Point.Point) => dispatch(Actions.activate(point)),
-      [dispatch]
-    );
-    const setCellDimensions = React.useCallback(
-      (point: Point.Point, dimensions: Types.Dimensions) =>
-        dispatch(Actions.setCellDimensions(point, dimensions)),
-      [dispatch]
-    );
-    const active = useSelector((state) => isActive(state.active, point));
-    const mode = useSelector((state) => (active ? state.mode : 'view'));
-    const data = useSelector((state) => Matrix.get(point, state.model.data));
-    const evaluatedData = useSelector((state) =>
-      Matrix.get(point, state.model.evaluatedData)
-    );
-
-    const selected = useSelector((state) =>
-      state.selected.has(state.model.data, point)
-    );
-    const dragging = useSelector((state) => state.dragging);
-    const copied = useSelector((state) => state.copied?.has(point) || false);
-
-    return (
-      <CellComponent
-        {...props}
-        selected={selected}
-        active={active}
-        copied={copied}
-        dragging={dragging}
-        mode={mode}
-        evaluatedData={evaluatedData}
-        data={data}
-        select={select}
-        activate={activate}
-        setCellDimensions={setCellDimensions}
-        setCellData={setCellData}
-      />
-    );
-  };
-};

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

@@ -1,187 +0,0 @@
-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,
-  addColumnRight,
-  columnContextEnable,
-  data,
-}) => {
-  const dispatch = useDispatch();
-
-  const columnWidth = useSelector(
-    (state) => state.columnDimensions[column]?.width || 100
-  );
-
-  const options = [
-    {
-      label: 'Add Column Left',
-      value: 'Add Column Left',
-      iconName: 'plus_icon',
-      action: () => {
-        addColumnLeft(data);
-      },
-      disable: false,
-    },
-    {
-      label: 'Add Column Right',
-      value: 'Add Column Right',
-      iconName: 'plus_icon',
-      action: () => {
-        addColumnRight(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: columnContextEnable,
-        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 +0,0 @@
-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 +0,0 @@
-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,41 +0,0 @@
-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
-        disabled={cell?.isDisable}
-      />
-    </div>
-  );
-};
-
-export default DataEditor;

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

@@ -1,46 +0,0 @@
-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;
-}