AutoFill Handle

Add auto-fill handle to autofill values

Author: iddan

src/ActiveCell.tsx

@@ -16,20 +16,25 @@ 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 edit = React.useCallback(() => dispatch(Actions.edit()), [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) =>

src/AutoFillHandle.tsx

@@ -0,0 +1,42 @@
+import * as React from "react";
+import * as Actions from "./actions";
+import useDispatch from "./use-dispatch";
+
+const AutoFillHandle: React.FC = () => {
+  const dispatch = useDispatch();
+
+  const autoFillStart = React.useCallback(() => {
+    dispatch(Actions.autoFillStart());
+  }, [dispatch]);
+
+  const autoFillEnd = React.useCallback(() => {
+    dispatch(Actions.autoFillEnd());
+  }, [dispatch]);
+
+  const handleMouseDown = React.useCallback(
+    (event: React.MouseEvent) => {
+      event.stopPropagation();
+      event.preventDefault();
+
+      autoFillStart();
+
+      const handleMouseUp = () => {
+        autoFillEnd();
+        window.removeEventListener("mouseup", handleMouseUp);
+      };
+
+      window.addEventListener("mouseup", handleMouseUp);
+    },
+    [autoFillStart, autoFillEnd]
+  );
+
+  return (
+    <div
+      className="Spreadsheet__auto-fill-handle"
+      onMouseDown={handleMouseDown}
+    />
+  );
+};
+
+export default AutoFillHandle;
+

src/Copied.test.tsx

@@ -15,10 +15,10 @@ describe("<Copied />", () => {
         <Copied />
       </context.Provider>
     );
+    expect(
+      document.querySelector(
+        ".Spreadsheet__floating-rect.Spreadsheet__floating-rect--copied"
+      )
+    ).not.toBeNull();
   });
-  expect(
-    document.querySelector(
-      ".Spreadsheet__floating-rect.Spreadsheet__floating-rect--copied"
-    )
-  );
 });

src/FloatingRect.tsx

@@ -7,24 +7,37 @@ export type Props = {
   dimensions?: Types.Dimensions | null | undefined;
   hidden?: boolean;
   dragging?: boolean;
+  autoFilling?: boolean;
+  className?: string;
+  children?: React.ReactNode;
 };
 
 const FloatingRect: React.FC<Props> = ({
   dimensions,
   dragging,
+  autoFilling,
   hidden,
   variant,
+  className,
+  children,
 }) => {
   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,
-      })}
+      className={classnames(
+        "Spreadsheet__floating-rect",
+        {
+          [`Spreadsheet__floating-rect--${variant}`]: variant,
+          "Spreadsheet__floating-rect--dragging": dragging,
+          "Spreadsheet__floating-rect--auto-filling": autoFilling,
+          "Spreadsheet__floating-rect--hidden": hidden,
+        },
+        className
+      )}
       style={{ width, height, top, left }}
-    />
+    >
+      {children}
+    </div>
   );
 };
 

src/Selected.tsx

@@ -2,9 +2,14 @@ import * as React from "react";
 import { getSelectedDimensions } from "./util";
 import FloatingRect from "./FloatingRect";
 import useSelector from "./use-selector";
+import classNames from "classnames";
+import AutoFillHandle from "./AutoFillHandle";
 
 const Selected: React.FC = () => {
   const selected = useSelector((state) => state.selected);
+  const selectedSize = useSelector((state) =>
+    state.selected.size(state.model.data)
+  );
   const dimensions = useSelector(
     (state) =>
       selected &&
@@ -16,16 +21,22 @@ const Selected: React.FC = () => {
       )
   );
   const dragging = useSelector((state) => state.dragging);
-  const hidden = useSelector(
-    (state) => state.selected.size(state.model.data) < 2
-  );
+  const autoFilling = useSelector((state) => state.autoFilling);
+  const hidden = selectedSize === 0;
+
   return (
     <FloatingRect
       variant="selected"
       dimensions={dimensions}
       dragging={dragging}
       hidden={hidden}
-    />
+      className={classNames({
+        "Spreadsheet__selected-single": selectedSize === 1,
+      })}
+      autoFilling={autoFilling}
+    >
+      {!hidden && <AutoFillHandle />}
+    </FloatingRect>
   );
 };
 

src/Spreadsheet.css

@@ -124,10 +124,31 @@
   border: 2px var(--outline-color) solid;
 }
 
-.Spreadsheet__floating-rect--dragging {
+.Spreadsheet__floating-rect--selected.Spreadsheet__selected-single {
+  background: none;
   border: none;
 }
 
+.Spreadsheet__floating-rect--selected.Spreadsheet__floating-rect--auto-filling {
+  background: none;
+  border: 2px var(--readonly-text-color) dashed;
+}
+
 .Spreadsheet__floating-rect--copied {
   border: 2px var(--outline-color) dashed;
 }
+
+.Spreadsheet__auto-fill-handle {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  transform: translate(50%, 50%);
+  width: 8px;
+  height: 8px;
+  background: var(--outline-color);
+  border-radius: 50%;
+  box-shadow: var(--elevation);
+  cursor: pointer;
+  z-index: 10;
+  pointer-events: auto;
+}

src/Spreadsheet.test.tsx

@@ -165,7 +165,7 @@ describe("<Spreadsheet />", () => {
       activeCell?.getBoundingClientRect()
     );
     // Check selected is not hidden
-    expect(selected).toHaveClass("Spreadsheet__floating-rect--hidden");
+    expect(selected).not.toHaveClass("Spreadsheet__floating-rect--hidden");
     // Check onActivate is called
     expect(onActivate).toHaveBeenCalledTimes(1);
     expect(onActivate).toHaveBeenCalledWith(Point.ORIGIN);
@@ -476,6 +476,123 @@ describe("<Spreadsheet />", () => {
     );
     expect(selected).not.toHaveClass("Spreadsheet__floating-rect--hidden");
   });
+  test("auto fill handle is not rendered when no cell is selected", () => {
+    render(<Spreadsheet {...EXAMPLE_PROPS} />);
+    const element = getSpreadsheetElement();
+    const autoFillHandle = element.querySelector(
+      ".Spreadsheet__auto-fill-handle"
+    );
+    expect(autoFillHandle).toBeNull();
+  });
+  test("auto fill handle is rendered when a cell is selected", () => {
+    render(<Spreadsheet {...EXAMPLE_PROPS} />);
+    const element = getSpreadsheetElement();
+    const cell = safeQuerySelector(element, "td");
+    // Select a cell
+    fireEvent.mouseDown(cell);
+    // Check auto fill handle is rendered
+    const autoFillHandle = safeQuerySelector(
+      element,
+      ".Spreadsheet__auto-fill-handle"
+    );
+    expect(autoFillHandle).toBeInTheDocument();
+  });
+  test("auto fill handle is rendered when a range is selected", () => {
+    render(<Spreadsheet {...EXAMPLE_PROPS} />);
+    const element = getSpreadsheetElement();
+    const firstCell = safeQuerySelector(
+      element,
+      "tr:nth-of-type(2) td:nth-of-type(1)"
+    );
+    const thirdCell = safeQuerySelector(
+      element,
+      "tr:nth-of-type(3) td:nth-of-type(2)"
+    );
+    // Select first cell
+    fireEvent.mouseDown(firstCell);
+    // Extend selection to create a range
+    fireEvent.mouseDown(thirdCell, { shiftKey: true });
+    // Check auto fill handle is rendered
+    const autoFillHandle = safeQuerySelector(
+      element,
+      ".Spreadsheet__auto-fill-handle"
+    );
+    expect(autoFillHandle).toBeInTheDocument();
+  });
+  test("mousedown on auto fill handle initiates auto fill mode", () => {
+    render(<Spreadsheet {...EXAMPLE_PROPS} />);
+    const element = getSpreadsheetElement();
+    const cell = safeQuerySelector(element, "td");
+    // Select a cell
+    fireEvent.mouseDown(cell);
+    // Get auto fill handle
+    const autoFillHandle = safeQuerySelector(
+      element,
+      ".Spreadsheet__auto-fill-handle"
+    );
+    // Get selected floating rect
+    const selected = safeQuerySelector(
+      element,
+      ".Spreadsheet__floating-rect--selected"
+    );
+    // Check auto filling class is not present initially
+    expect(selected).not.toHaveClass(
+      "Spreadsheet__floating-rect--auto-filling"
+    );
+    // Trigger auto fill
+    fireEvent.mouseDown(autoFillHandle);
+    // Check auto filling class is present
+    expect(selected).toHaveClass("Spreadsheet__floating-rect--auto-filling");
+  });
+  test("auto fill continues numeric sequence 1, 2, 3", () => {
+    const onChange = jest.fn();
+    const data = createEmptyMatrix<CellType>(ROWS, COLUMNS);
+    // Set up a numeric sequence: 1, 2
+    const dataWithSequence = Matrix.set(
+      { row: 0, column: 0 },
+      { value: "1" },
+      Matrix.set({ row: 1, column: 0 }, { value: "2" }, data)
+    );
+    render(<Spreadsheet data={dataWithSequence} onChange={onChange} />);
+    const element = getSpreadsheetElement();
+    // Select first cell (1)
+    const firstCell = safeQuerySelector(
+      element,
+      "tr:nth-of-type(2) td:nth-of-type(1)"
+    );
+    fireEvent.mouseDown(firstCell);
+    // Extend selection to second cell (2) to establish pattern
+    const secondCell = safeQuerySelector(
+      element,
+      "tr:nth-of-type(3) td:nth-of-type(1)"
+    );
+    fireEvent.mouseDown(secondCell, { shiftKey: true });
+    // Get auto fill handle
+    const autoFillHandle = safeQuerySelector(
+      element,
+      ".Spreadsheet__auto-fill-handle"
+    );
+    // Start auto fill
+    fireEvent.mouseDown(autoFillHandle);
+    // Extend selection to include two more cells (simulating dragging down)
+    const fourthCell = safeQuerySelector(
+      element,
+      "tr:nth-of-type(5) td:nth-of-type(1)"
+    );
+    fireEvent.mouseDown(fourthCell, { shiftKey: true });
+    // End auto fill (trigger mouseup on window)
+    fireEvent.mouseUp(window);
+    // Check onChange was called with auto-filled data
+    expect(onChange).toHaveBeenCalled();
+    const resultData = onChange.mock.calls[
+      onChange.mock.calls.length - 1
+    ][0] as Matrix.Matrix<CellType>;
+    // Verify the sequence: 1, 2, 3, 4
+    expect(Matrix.get({ row: 0, column: 0 }, resultData)?.value).toBe("1");
+    expect(Matrix.get({ row: 1, column: 0 }, resultData)?.value).toBe("2");
+    expect(Matrix.get({ row: 2, column: 0 }, resultData)?.value).toBe(3);
+    expect(Matrix.get({ row: 3, column: 0 }, resultData)?.value).toBe(4);
+  });
 });
 
 describe("Spreadsheet Ref Methods", () => {

src/actions.ts

@@ -30,6 +30,8 @@ export const KEY_DOWN = "KEY_DOWN";
 export const DRAG_START = "DRAG_START";
 export const DRAG_END = "DRAG_END";
 export const COMMIT = "COMMIT";
+export const AUTO_FILL_START = "AUTO_FILL_START";
+export const AUTO_FILL_END = "AUTO_FILL_END";
 
 export type BaseAction<T extends string> = {
   type: T;
@@ -276,6 +278,18 @@ export function blur(): BlurAction {
   return { type: BLUR };
 }
 
+export type AutoFillStartAction = BaseAction<typeof AUTO_FILL_START>;
+
+export function autoFillStart(): AutoFillStartAction {
+  return { type: AUTO_FILL_START };
+}
+
+export type AutoFillEndAction = BaseAction<typeof AUTO_FILL_END>;
+
+export function autoFillEnd(): AutoFillEndAction {
+  return { type: AUTO_FILL_END };
+}
+
 export type Action =
   | SetDataAction
   | SetCreateFormulaParserAction
@@ -298,4 +312,6 @@ export type Action =
   | EditAction
   | ViewAction
   | ClearAction
-  | BlurAction;
+  | BlurAction
+  | AutoFillStartAction
+  | AutoFillEndAction;