pixel-priya 0.0.1

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

@@ -0,0 +1,170 @@
+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

@@ -0,0 +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,
+          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

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

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

@@ -0,0 +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}
+      />
+    );
+  };
+};

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

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

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

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

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

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import classnames from 'classnames';
+import * as Types from './types';
+import useSelector from './use-selector';
+import { getCellDimensions } from './util';
+
+export type Props = {
+  variant?: string;
+  dimensions?: Types.Dimensions | null | undefined;
+  hidden?: boolean;
+  dragging?: boolean;
+};
+
+const FloatingRect: React.FC<Props> = ({
+  dimensions,
+  dragging,
+  hidden,
+  variant,
+}) => {
+  const active = useSelector((state) => state.active);
+  const autoFill = useSelector((state) => state.autoFill);
+  const FixedVal = useSelector((state) =>
+    active
+      ? getCellDimensions(active, state.rowDimensions, state.columnDimensions)
+      : undefined
+  );
+
+  const { width, height, top, left } = dimensions || {};
+
+  let sampleHeight = FixedVal?.height ?? 0;
+  let sampleWidth = FixedVal?.width ?? 0;
+  let adjustedWidth = width;
+  let adjustedHeight = height;
+  if (autoFill.open && width && height && FixedVal) {
+    if (width - sampleWidth > height - sampleHeight) {
+      adjustedWidth = width;
+      adjustedHeight = FixedVal.height;
+    } else {
+      adjustedHeight = height;
+      adjustedWidth = FixedVal.width;
+    }
+  }
+
+  return (
+    <div
+      className={classnames('ff-spreadsheet-floating-rect', {
+        [`ff-spreadsheet-floating-rect--${variant}`]: variant,
+        'ff-spreadsheet-floating-rect--dragging': dragging,
+        'ff-spreadsheet-floating-rect--hidden': hidden,
+      })}
+      style={{
+        width: (adjustedWidth ?? 0) + 1,
+        height: (adjustedHeight ?? 0) + 1,
+        top,
+        left,
+      }}
+    />
+  );
+};
+
+export default FloatingRect;

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

@@ -0,0 +1,7 @@
+import * as Types from './types';
+
+const HeaderRow: Types.HeaderRowComponent = (props) => (
+  <tr className="ff-spreadsheet-row-header" {...props} />
+);
+
+export default HeaderRow;

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

@@ -0,0 +1,5 @@
+import * as Types from './types';
+
+const Row: Types.RowComponent = (props) => <tr {...props} />;
+
+export default Row;