pixel-react-excel-sheet 1.2.0

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

@@ -0,0 +1,123 @@
+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,
+}) => {
+  const dispatch = useDispatch();
+  const [width, setWidth] = React.useState(100);
+  
+  // Function to handle the start of the resize (mouse down)
+  const onMouseDown = (e: React.MouseEvent) => {
+    const startX = e.clientX;
+
+    // Function to handle mouse movement (resize)
+    const onMouseMove = (moveEvent: MouseEvent) => {
+      const newWidth = width + (moveEvent.clientX - startX);
+      setWidth(newWidth);
+      
+      // const selectedAllRow = document.querySelector(".Spreadsheet__floating-rect--selected");
+      // const selectedSingleRow = document.querySelector(".Spreadsheet__active-cell");
+
+      // // If the element exists, update its height
+      // if (selectedAllRow instanceof HTMLElement&&selectedSingleRow instanceof HTMLElement) {
+      //   selectedAllRow.style.width = `${newWidth}px`; // Set the width
+      //   selectedSingleRow.style.width = `${newWidth}px`; // Set the width
+      // }
+    };
+
+    // Function to stop the resizing (mouse up)
+    const onMouseUp = () => {
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+    };
+
+    // Add event listeners for mouse move and mouse up
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onMouseUp);
+  };
+
+  const activate = React.useCallback(
+    (point: Point.Point) => dispatch(Actions.activate(point)),
+    [dispatch]
+  );
+
+  // Handle column header click
+  const handleClick = React.useCallback(
+    (event: React.MouseEvent) => {
+      onSelect(column, event.shiftKey);
+    },
+    [onSelect, column]
+  );
+
+
+  return (
+    <th
+      style={{ minWidth: `${width}px`, position: "relative" }} // Use dynamic width
+      className={classNames("Spreadsheet__header", {
+        "Spreadsheet__header--selected": selected,
+      })}
+      onClick={handleClick}
+      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/ExcelFile/ExcelFile/Excel/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/ExcelFile/ExcelFile/Excel/CornerIndicator.tsx

@@ -0,0 +1,49 @@
+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";
+
+const CornerIndicator: Types.CornerIndicatorComponent = ({
+  selected,
+  onSelect,
+}) => {
+  const handleClick = React.useCallback(() => {
+    onSelect();
+  }, [onSelect]);
+  return (
+    <th
+      className={classNames("Spreadsheet__header", {
+        "Spreadsheet__header--selected": selected,
+      })}
+      onClick={handleClick}
+      tabIndex={0}
+    />
+  );
+};
+
+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/ExcelFile/ExcelFile/Excel/DataEditor.tsx

@@ -0,0 +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="Spreadsheet__data-editor">
+      <input
+        ref={inputRef}
+        type="text"
+        onChange={handleChange}
+        value={value}
+        autoFocus
+      />
+    </div>
+  );
+};
+
+export default DataEditor;

package/src/components/ExcelFile/ExcelFile/Excel/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="Spreadsheet__data-viewer Spreadsheet__data-viewer--boolean">
+      {convertBooleanToText(value)}
+    </span>
+  ) : (
+    <span
+      className={classNames("Spreadsheet__data-viewer", {
+        "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/ExcelFile/ExcelFile/Excel/FloatingRect.tsx

@@ -0,0 +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("Spreadsheet__floating-rect", {
+        [`Spreadsheet__floating-rect--${variant}`]: variant,
+        "Spreadsheet__floating-rect--dragging": dragging,
+        "Spreadsheet__floating-rect--hidden": hidden,
+      })}
+      style={{ width, height, top, left }}
+    />
+  );
+};
+
+export default FloatingRect;

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

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

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

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

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

@@ -0,0 +1,102 @@
+import * as React from "react";
+import classNames from "classnames";
+import * as Actions from "./actions";
+import * as Types from "./types";
+import useDispatch from "./use-dispatch";
+import useSelector from "./use-selector";
+
+const RowIndicator: Types.RowIndicatorComponent = ({
+  row,
+  label,
+  selected,
+  onSelect,
+}) => {
+  const [height, setHeight] = React.useState(0);
+  
+  // Function to handle the start of the resize (mouse down)
+  const onMouseDown = (e: React.MouseEvent) => {
+    const startY = e.clientY;
+
+    // Function to handle mouse movement (resize)
+    const onMouseMove = (moveEvent: MouseEvent) => {
+      const newHeight = height + (moveEvent.clientY - startY);
+      setHeight(newHeight);
+      // Fetch the floating rectangle element from the DOM
+      // const selectedAllRow = document.querySelector(".Spreadsheet__floating-rect--selected");
+      // const selectedSingleRow = document.querySelector(".Spreadsheet__active-cell");
+
+      // // If the element exists, update its height
+      // if (selectedAllRow instanceof HTMLElement&&selectedSingleRow instanceof HTMLElement) {
+      //   selectedAllRow.style.height = `${newHeight}px`; // Set the height
+      //   selectedSingleRow.style.height = `${newHeight}px`; // Set the height
+      // }
+    };
+
+    // Function to stop the resizing (mouse up)
+    const onMouseUp = () => {
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+    };
+
+    // Add event listeners for mouse move and mouse up
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onMouseUp);
+  };
+
+  const handleClick = React.useCallback(
+    (event: React.MouseEvent) => {
+      onSelect(row, event.shiftKey);
+    },
+    [onSelect, row]
+  );
+
+  return (
+    <th
+    style={{ height: `${height}px`,minWidth:'60px', position: "relative" }}
+      className={classNames("Spreadsheet__header", {
+        "Spreadsheet__header--selected": selected,
+      })}
+      onClick={handleClick}
+      tabIndex={0}
+    >
+      {label !== undefined ? label : row + 1}
+      <div
+        onMouseDown={onMouseDown}
+        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/ExcelFile/ExcelFile/Excel/Selected.tsx

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

package/src/components/ExcelFile/ExcelFile/Excel/Spreadsheet.css

@@ -0,0 +1,144 @@
+.Spreadsheet {
+  --background-color: white;
+  --text-color: black;
+  --readonly-text-color: rgba(0, 0, 0, 0.4);
+  --outline-color: #4285f4;
+  --outline-background-color: rgba(160, 195, 255, 0.2);
+  --border-color: hsl(2deg, 0%, 91%);
+  --header-background-color: rgba(0, 0, 0, 0.04);
+  --elevation: 0 2px 5px rgba(0, 0, 0, 0.4);
+
+  position: relative;
+  overflow: visible;
+  background: var(--background-color);
+  color: var(--text-color);
+  display: inline-block;
+}
+
+.Spreadsheet--dark-mode {
+  --background-color: black;
+  --text-color: white;
+  --readonly-text-color: rgba(255, 255, 255, 0.4);
+  --header-background-color: rgba(255, 255, 255, 0.04);
+  --border-color: hsl(2deg, 0%, 19%);
+}
+
+.Spreadsheet__active-cell {
+  position: absolute;
+  border: 2px solid var(--outline-color);
+  box-sizing: border-box;
+}
+
+.Spreadsheet__active-cell--edit {
+  background: var(--background-color);
+  box-shadow: var(--elevation);
+}
+
+.Spreadsheet__table {
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+
+.Spreadsheet__cell,
+.Spreadsheet__active-cell {
+  cursor: cell;
+}
+
+.Spreadsheet__cell {
+  outline: none;
+  position: relative;
+
+}
+
+/* .Spreadsheet__active-cell .Selection_dot{
+  background-color:red;
+  height:7px;
+  width:7px;
+  border-radius:50%;
+  position:absolute;
+  right:-3px;
+  z-index: 10;
+  bottom:-3px;
+  cursor: crosshair;
+} */
+
+/* .Spreadsheet__cell--readonly {
+  color: var(--readonly-text-color);
+} */
+
+.Spreadsheet__cell,
+.Spreadsheet__header {
+  border: 0.1px solid var(--border-color);
+  overflow: hidden;
+  word-break: keep-all;
+  white-space: nowrap;
+  text-align: left;
+  box-sizing: border-box;
+  user-select: none;
+  
+}
+
+.Spreadsheet__header {
+  background: var(--header-background-color);
+  color: var(--readonly-text-color);
+  text-align: center;
+  font: inherit;
+}
+
+.Spreadsheet__header--selected {
+  background: #5f6268;
+  color: #fff;
+}
+
+.Spreadsheet__header,
+.Spreadsheet__data-viewer,
+.Spreadsheet__data-editor input {
+  padding: 4px;
+  box-sizing: border-box;
+}
+
+.Spreadsheet__data-viewer--preserve-breaks {
+  white-space: pre-wrap;
+}
+
+.Spreadsheet__data-editor,
+.Spreadsheet__data-editor input {
+  width: 100%;
+  height: 100%;
+}
+
+.Spreadsheet__data-editor input {
+  font: inherit;
+  color: inherit;
+  background: none;
+  border: none;
+  outline: none;
+  margin: 0;
+}
+
+.Spreadsheet__data-viewer--boolean {
+  text-align: center;
+}
+
+.Spreadsheet__floating-rect {
+  position: absolute;
+  pointer-events: none;
+  box-sizing: border-box;
+}
+
+.Spreadsheet__floating-rect--hidden {
+  display: none;
+}
+
+.Spreadsheet__floating-rect--selected {
+  background: var(--outline-background-color);
+  border: 2px var(--outline-color) solid;
+}
+
+.Spreadsheet__floating-rect--dragging {
+  border: none;
+}
+
+.Spreadsheet__floating-rect--copied {
+  border: 2px var(--outline-color) dashed;
+}