pixel-react 1.6.8 → 1.6.9

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

@@ -1,85 +1,85 @@
-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,
-  setContextMenu,//Todo
-}: Types.DataViewerProps<Cell>): React.ReactElement => {
-
-  const value = getValue(cell, evaluatedCell);
-
-  const options = [
-    {
-      label: 'Dynamic Cell One',
-      value: 'Dynamic Cell One',
-      iconName: 'plus_icon',
-      action: () => {
-      },
-      disable: false,
-    },
-    {
-      label: 'Dynamic Cell Two',
-      value: 'Dynamic Cell Two',
-      iconName: 'plus_icon',
-      action: () => {
-      },
-      disable: false,
-    },
-  ];
-  
-  const contextClick = React.useCallback(
-    (event: React.MouseEvent) => {
-      event.preventDefault();
-
-      setContextMenu({
-        open: true,
-        position: {
-          x: event.pageX - 50,
-          y: event.pageY - 260,
-        },
-        options: options,
-      });
-    },
-    [ setContextMenu]
-  );
-
-  return typeof value === 'boolean' ? (
-    <span
-      className="ff-spreadsheet-data-viewer ff-spreadsheet-data-viewer--boolean">
-      {convertBooleanToText(value)}
-    </span>
-  ) : (
-    <span
-    onContextMenu={contextClick}
-      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,
+  setContextMenu,//Todo
+}: Types.DataViewerProps<Cell>): React.ReactElement => {
+
+  const value = getValue(cell, evaluatedCell);
+
+  const options = [
+    {
+      label: 'Dynamic Cell One',
+      value: 'Dynamic Cell One',
+      iconName: 'plus_icon',
+      action: () => {
+      },
+      disable: false,
+    },
+    {
+      label: 'Dynamic Cell Two',
+      value: 'Dynamic Cell Two',
+      iconName: 'plus_icon',
+      action: () => {
+      },
+      disable: false,
+    },
+  ];
+  
+  const contextClick = React.useCallback(
+    (event: React.MouseEvent) => {
+      event.preventDefault();
+
+      setContextMenu({
+        open: true,
+        position: {
+          x: event.pageX - 50,
+          y: event.pageY - 260,
+        },
+        options: options,
+      });
+    },
+    [ setContextMenu]
+  );
+
+  return typeof value === 'boolean' ? (
+    <span
+      className="ff-spreadsheet-data-viewer ff-spreadsheet-data-viewer--boolean">
+      {convertBooleanToText(value)}
+    </span>
+  ) : (
+    <span
+    onContextMenu={contextClick}
+      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

@@ -1,31 +1,31 @@
-import * as React from 'react';
-import classnames from 'classnames';
-import * as Types from './types';
-
-export type Props = {
-  variant?: string;
-  dimensions?: Types.Dimensions | null | undefined;
-  hidden?: boolean;
-  dragging?: boolean;
-};
-
-const FloatingRect: React.FC<Props> = ({
-  dimensions,
-  dragging,
-  hidden,
-  variant,
-}) => {
-  const { width, height, top, left } = dimensions || {};
-  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, height, top, left }}
-    />
-  );
-};
-
-export default FloatingRect;
+import * as React from 'react';
+import classnames from 'classnames';
+import * as Types from './types';
+
+export type Props = {
+  variant?: string;
+  dimensions?: Types.Dimensions | null | undefined;
+  hidden?: boolean;
+  dragging?: boolean;
+};
+
+const FloatingRect: React.FC<Props> = ({
+  dimensions,
+  dragging,
+  hidden,
+  variant,
+}) => {
+  const { width, height, top, left } = dimensions || {};
+  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, height, top, left }}
+    />
+  );
+};
+
+export default FloatingRect;

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

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

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

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

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

@@ -1,154 +1,154 @@
-import * as React from 'react';
-import classNames from 'classnames';
-import * as Actions from './actions';
-import * as Point from './point';
-import * as Types from './types';
-import useDispatch from './use-dispatch';
-import useSelector from './use-selector';
-
-const RowIndicator: Types.RowIndicatorComponent = ({
-  row,
-  label,
-  selected,
-  onSelect,
-  setContextMenu,
-  addRowTop,
-  deleteRow,
-  data,
-}) => {
-  const dispatch = useDispatch();
-  const rowHeight = useSelector(
-    (state) => state.rowDimensions[row]?.height || 28
-  );
-
-  const options = [
-    {
-      label: 'Add Row',
-      value: 'Add Row',
-      iconName: 'plus_icon',
-      action: () => {
-        addRowTop(data);
-      },
-      disable: false,
-    },
-    {
-      label: 'Delete Row',
-      value: 'Delete Row',
-      iconName: 'delete',
-      action: () => {
-        deleteRow(data);
-      },
-      disable: false,
-    },
-  ];
-
-  const onMouseDown = React.useCallback(
-    (event: React.MouseEvent) => {
-      onSelect(row, event.shiftKey);
-
-      const startY = event.clientY;
-      const initialHeight = rowHeight;
-
-      const onMouseMove = (moveEvent: MouseEvent) => {
-        const newHeight = Math.max(
-          28,
-          initialHeight + (moveEvent.clientY - startY)
-        );
-        dispatch(Actions.setRowHeight(row, newHeight));
-      };
-
-      const onMouseUp = () => {
-        document.removeEventListener('mousemove', onMouseMove);
-        document.removeEventListener('mouseup', onMouseUp);
-        dispatch(Actions.dragEnd());
-      };
-
-      document.addEventListener('mousemove', onMouseMove);
-      document.addEventListener('mouseup', onMouseUp);
-      dispatch(Actions.dragEnd());
-    },
-    [onSelect, rowHeight, row]
-  );
-
-  const activate = React.useCallback(
-    (point: Point.Point) => dispatch(Actions.activate(point)),
-    [dispatch]
-  );
-
-  const handleClick = React.useCallback(
-    (event: React.MouseEvent) => {
-      onSelect(row, event.shiftKey);
-    },
-    [onSelect, row]
-  );
-
-  const contextClick = React.useCallback(
-    (event: React.MouseEvent) => {
-      event.preventDefault();
-
-      onSelect(row, event.shiftKey);
-
-      setContextMenu({
-        open: true,
-        position: {
-          x: event.pageX - 50,
-          y: event.pageY - 260,
-        },
-        options: options,
-      });
-    },
-    [onSelect, row, setContextMenu]
-  );
-
-  return (
-    <th
-      style={{ height: `${rowHeight}px`, position: 'relative' }} //Dynamic value, Inline Styling required
-      className={classNames('ff-spreadsheet-header', {
-        'ff-spreadsheet-header--selected': selected,
-      })}
-      onClick={handleClick}
-      onContextMenu={contextClick}
-      tabIndex={0}
-    >
-      {label !== undefined ? label : row + 1}
-      <div
-        onMouseDown={onMouseDown}
-        onClick={() => activate({ row, column: -1 })}
-        style={{
-          zIndex: 'inherit',
-          height: '2px',
-          position: 'absolute',
-          right: 0,
-          bottom: 0,
-          width: '100%',
-          cursor: 'ns-resize',
-        }}
-      />
-    </th>
-  );
-};
-
-export default RowIndicator;
-
-export const enhance = (
-  RowIndicatorComponent: Types.RowIndicatorComponent
-): React.FC<Omit<Types.RowIndicatorProps, 'selected' | 'onSelect'>> => {
-  return function RowIndicatorWrapper(props) {
-    const dispatch = useDispatch();
-    const selected = useSelector((state) =>
-      state.selected.hasEntireRow(props.row)
-    );
-    const selectEntireRow = React.useCallback(
-      (row: number, extend: boolean) =>
-        dispatch(Actions.selectEntireRow(row, extend)),
-      [dispatch]
-    );
-    return (
-      <RowIndicatorComponent
-        {...props}
-        selected={selected}
-        onSelect={selectEntireRow}
-      />
-    );
-  };
-};
+import * as React from 'react';
+import classNames from 'classnames';
+import * as Actions from './actions';
+import * as Point from './point';
+import * as Types from './types';
+import useDispatch from './use-dispatch';
+import useSelector from './use-selector';
+
+const RowIndicator: Types.RowIndicatorComponent = ({
+  row,
+  label,
+  selected,
+  onSelect,
+  setContextMenu,
+  addRowTop,
+  deleteRow,
+  data,
+}) => {
+  const dispatch = useDispatch();
+  const rowHeight = useSelector(
+    (state) => state.rowDimensions[row]?.height || 28
+  );
+
+  const options = [
+    {
+      label: 'Add Row',
+      value: 'Add Row',
+      iconName: 'plus_icon',
+      action: () => {
+        addRowTop(data);
+      },
+      disable: false,
+    },
+    {
+      label: 'Delete Row',
+      value: 'Delete Row',
+      iconName: 'delete',
+      action: () => {
+        deleteRow(data);
+      },
+      disable: false,
+    },
+  ];
+
+  const onMouseDown = React.useCallback(
+    (event: React.MouseEvent) => {
+      onSelect(row, event.shiftKey);
+
+      const startY = event.clientY;
+      const initialHeight = rowHeight;
+
+      const onMouseMove = (moveEvent: MouseEvent) => {
+        const newHeight = Math.max(
+          28,
+          initialHeight + (moveEvent.clientY - startY)
+        );
+        dispatch(Actions.setRowHeight(row, newHeight));
+      };
+
+      const onMouseUp = () => {
+        document.removeEventListener('mousemove', onMouseMove);
+        document.removeEventListener('mouseup', onMouseUp);
+        dispatch(Actions.dragEnd());
+      };
+
+      document.addEventListener('mousemove', onMouseMove);
+      document.addEventListener('mouseup', onMouseUp);
+      dispatch(Actions.dragEnd());
+    },
+    [onSelect, rowHeight, row]
+  );
+
+  const activate = React.useCallback(
+    (point: Point.Point) => dispatch(Actions.activate(point)),
+    [dispatch]
+  );
+
+  const handleClick = React.useCallback(
+    (event: React.MouseEvent) => {
+      onSelect(row, event.shiftKey);
+    },
+    [onSelect, row]
+  );
+
+  const contextClick = React.useCallback(
+    (event: React.MouseEvent) => {
+      event.preventDefault();
+
+      onSelect(row, event.shiftKey);
+
+      setContextMenu({
+        open: true,
+        position: {
+          x: event.pageX - 50,
+          y: event.pageY - 260,
+        },
+        options: options,
+      });
+    },
+    [onSelect, row, setContextMenu]
+  );
+
+  return (
+    <th
+      style={{ height: `${rowHeight}px`, position: 'relative' }} //Dynamic value, Inline Styling required
+      className={classNames('ff-spreadsheet-header', {
+        'ff-spreadsheet-header--selected': selected,
+      })}
+      onClick={handleClick}
+      onContextMenu={contextClick}
+      tabIndex={0}
+    >
+      {label !== undefined ? label : row + 1}
+      <div
+        onMouseDown={onMouseDown}
+        onClick={() => activate({ row, column: -1 })}
+        style={{
+          zIndex: 'inherit',
+          height: '2px',
+          position: 'absolute',
+          right: 0,
+          bottom: 0,
+          width: '100%',
+          cursor: 'ns-resize',
+        }}
+      />
+    </th>
+  );
+};
+
+export default RowIndicator;
+
+export const enhance = (
+  RowIndicatorComponent: Types.RowIndicatorComponent
+): React.FC<Omit<Types.RowIndicatorProps, 'selected' | 'onSelect'>> => {
+  return function RowIndicatorWrapper(props) {
+    const dispatch = useDispatch();
+    const selected = useSelector((state) =>
+      state.selected.hasEntireRow(props.row)
+    );
+    const selectEntireRow = React.useCallback(
+      (row: number, extend: boolean) =>
+        dispatch(Actions.selectEntireRow(row, extend)),
+      [dispatch]
+    );
+    return (
+      <RowIndicatorComponent
+        {...props}
+        selected={selected}
+        onSelect={selectEntireRow}
+      />
+    );
+  };
+};

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

@@ -1,32 +1,32 @@
-import * as React from 'react';
-import { getSelectedDimensions } from './util';
-import FloatingRect from './FloatingRect';
-import useSelector from './use-selector';
-
-const Selected: React.FC = () => {
-  const selected = useSelector((state) => state.selected);
-  const dimensions = useSelector(
-    (state) =>
-      selected &&
-      getSelectedDimensions(
-        state.rowDimensions,
-        state.columnDimensions,
-        state.model.data,
-        state.selected
-      )
-  );
-  const dragging = useSelector((state) => state.dragging);
-  const hidden = useSelector(
-    (state) => state.selected.size(state.model.data) < 2
-  );
-  return (
-    <FloatingRect
-      variant="selected"
-      dimensions={dimensions}
-      dragging={dragging}
-      hidden={hidden}
-    />
-  );
-};
-
-export default Selected;
+import * as React from 'react';
+import { getSelectedDimensions } from './util';
+import FloatingRect from './FloatingRect';
+import useSelector from './use-selector';
+
+const Selected: React.FC = () => {
+  const selected = useSelector((state) => state.selected);
+  const dimensions = useSelector(
+    (state) =>
+      selected &&
+      getSelectedDimensions(
+        state.rowDimensions,
+        state.columnDimensions,
+        state.model.data,
+        state.selected
+      )
+  );
+  const dragging = useSelector((state) => state.dragging);
+  const hidden = useSelector(
+    (state) => state.selected.size(state.model.data) < 2
+  );
+  return (
+    <FloatingRect
+      variant="selected"
+      dimensions={dimensions}
+      dragging={dragging}
+      hidden={hidden}
+    />
+  );
+};
+
+export default Selected;