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/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

@@ -1,10 +1,16 @@
 import * as React from "react";
+import * as Actions from "./actions";
 import { getSelectedDimensions } from "./util";
 import FloatingRect from "./FloatingRect";
 import useSelector from "./use-selector";
+import useDispatch from "./use-dispatch";
+import classNames from "classnames";
 
 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,17 +22,59 @@ 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>
   );
 };
 
 export default Selected;
+
+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}
+    />
+  );
+};

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/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;

src/auto-fill.ts

@@ -0,0 +1,2 @@
+// Re-export from the new auto-fill module structure
+export { autoFillRange } from "./auto-fill/auto-fill-range";