@clickhouse/click-ui 0.8.0 → 0.10.0-rc1

package/dist/cjs/components/Grid/useSelectionActions.cjs

@@ -9,20 +9,10 @@ const orderedRect = (x1, y1, x2, y2) => {
   const right = Math.max(x1, x2);
   const top = Math.min(y1, y2);
   const bottom = Math.max(y1, y2);
-  return {
-    left,
-    right,
-    top,
-    bottom
-  };
+  return { left, right, top, bottom };
 };
 const cellRectSelected = (selection, x1, y1, x2, y2) => {
-  const {
-    left,
-    right,
-    top,
-    bottom
-  } = orderedRect(x1, y1, x2, y2);
+  const { left, right, top, bottom } = orderedRect(x1, y1, x2, y2);
   switch (selection.type) {
     case "columns":
       for (let i = left; i <= right; ++i) {
@@ -61,15 +51,10 @@ const rectangleSelection = (anchorColumn, anchorRow, focusColumn, focusRow) => {
   return {
     type: "rectangle",
     bounds: orderedRect(anchorColumn, anchorRow, focusColumn, focusRow),
-    anchor: {
-      column: anchorColumn,
-      row: anchorRow
-    }
+    anchor: { column: anchorColumn, row: anchorRow }
   };
 };
-const emptySelection = () => ({
-  type: "empty"
-});
+const emptySelection = () => ({ type: "empty" });
 const rowAnySelected = (selection, row) => selection.type === "columns" || selection.type === "rows" && selection.rows.has(row) || selection.type === "rectangle" && selection.bounds.top <= row && selection.bounds.bottom >= row;
 const columnAnySelected = (selection, column) => selection.type === "rows" || selection.type === "columns" && selection.columns.has(column) || selection.type === "rectangle" && selection.bounds.left <= column && selection.bounds.right >= column;
 const rangeIndices = (a, b) => {
@@ -91,265 +76,282 @@ const useSelectionActions = ({
   selection,
   rowStart
 }) => {
-  const allSelect = react.useCallback((action) => {
-    const newSelection = {
-      type: "rows",
-      rows: new Set(rangeIndices(rowStart, rowCount + rowStart - 1)),
-      anchorRow: 0
-    };
-    scrollGridTo({
-      row: rowStart,
-      column: 0
-    });
-    onFocusChange(rowStart, 0);
-    onCellSelect(action, newSelection, {
-      row: rowStart,
-      column: 0
-    });
-  }, [onCellSelect, onFocusChange, rowCount, rowStart, scrollGridTo]);
-  const cellSelect = react.useCallback((action) => {
-    const {
-      row,
-      column
-    } = action;
-    scrollGridTo({
-      row,
-      column
-    });
-    onFocusChange(row, column);
-    const newSelection = emptySelection();
-    onCellSelect(action, newSelection, focus);
-  }, [focus, onCellSelect, onFocusChange, scrollGridTo]);
-  const shiftSelect = react.useCallback((action) => {
-    const {
-      row: rowIndex,
-      column: columnIndex
-    } = action;
-    const newSelection = rectangleSelection(columnIndex, rowIndex, focus.column, focus.row);
-    scrollGridTo({
-      row: rowIndex,
-      column: columnIndex
-    });
-    onCellSelect(action, newSelection, focus);
-  }, [focus, onCellSelect, scrollGridTo]);
-  const rowSelect = react.useCallback((action) => {
-    const rowIndex = action.row;
-    const newSelection = rowSelection([rowIndex], rowIndex);
-    scrollGridTo({
-      row: rowIndex
-    });
-    onCellSelect(action, newSelection, focus);
-  }, [focus, onCellSelect, scrollGridTo]);
-  const shiftRowSelect = react.useCallback((action) => {
-    const rowIndex = action.row;
-    const newSelection = rowSelection(rangeIndices(focus.row, rowIndex), rowIndex);
-    scrollGridTo({
-      row: rowIndex
-    });
-    onCellSelect(action, newSelection, focus);
-  }, [focus, onCellSelect, scrollGridTo]);
-  const columnSelect = react.useCallback((action) => {
-    const columnIndex = action.column;
-    const newSelection = columnSelection([columnIndex], columnIndex);
-    scrollGridTo({
-      column: columnIndex
-    });
-    onCellSelect(action, newSelection, focus);
-  }, [focus, onCellSelect, scrollGridTo]);
-  const shiftColumnSelect = react.useCallback((action) => {
-    const columnIndex = action.column;
-    const newSelection = columnSelection(rangeIndices(focus.column, columnIndex), columnIndex);
-    onCellSelect(action, newSelection, focus);
-    scrollGridTo({
-      column: columnIndex
-    });
-  }, [focus, onCellSelect, scrollGridTo]);
-  const onSelection = react.useCallback((action) => {
-    switch (action.type) {
-      case "all":
-        allSelect(action);
-        break;
-      case "normal":
-        cellSelect(action);
-        break;
-      case "shiftSelection":
-        shiftSelect(action);
-        break;
-      case "columnSelection":
-        columnSelect(action);
-        break;
-      case "shiftColumnSelection":
-        shiftColumnSelect(action);
-        break;
-      case "rowSelection":
-        rowSelect(action);
-        break;
-      case "shiftRowSelection":
-        shiftRowSelect(action);
-        break;
-      default:
-        throw new Error(`Value should not occur ${action}`);
-    }
-  }, [allSelect, cellSelect, shiftSelect, columnSelect, shiftColumnSelect, rowSelect, shiftRowSelect]);
-  const moveSelection = react.useCallback((columnDiff, rowDiff, moveAnchor, event) => {
-    const clamp = (n, low, high) => {
-      return Math.max(low, Math.min(high, n));
-    };
-    let action = null;
-    if (moveAnchor) {
-      if (selection.type === "rows") {
-        const row = clamp(selection.anchorRow + rowDiff, 0, rowCount + rowStart - 1);
-        action = {
-          type: "shiftRowSelection",
-          row,
-          event
-        };
-      } else if (selection.type === "columns") {
-        const column = clamp(selection.anchorColumn + columnDiff, 0, columnCount - 1);
-        action = {
-          type: "shiftColumnSelection",
-          column,
-          event
-        };
-      } else if (selection.type === "rectangle") {
-        const row = clamp(selection.anchor.row + rowDiff, 0, rowCount + rowStart - 1);
-        const column = clamp(selection.anchor.column + columnDiff, 0, columnCount - 1);
-        action = {
-          type: "shiftSelection",
-          row,
-          column,
-          event
-        };
+  const allSelect = react.useCallback(
+    (action) => {
+      const newSelection = {
+        type: "rows",
+        rows: new Set(rangeIndices(rowStart, rowCount + rowStart - 1)),
+        anchorRow: 0
+      };
+      scrollGridTo({ row: rowStart, column: 0 });
+      onFocusChange(rowStart, 0);
+      onCellSelect(action, newSelection, {
+        row: rowStart,
+        column: 0
+      });
+    },
+    [onCellSelect, onFocusChange, rowCount, rowStart, scrollGridTo]
+  );
+  const cellSelect = react.useCallback(
+    (action) => {
+      const { row, column } = action;
+      scrollGridTo({ row, column });
+      onFocusChange(row, column);
+      const newSelection = emptySelection();
+      onCellSelect(action, newSelection, focus);
+    },
+    [focus, onCellSelect, onFocusChange, scrollGridTo]
+  );
+  const shiftSelect = react.useCallback(
+    (action) => {
+      const { row: rowIndex, column: columnIndex } = action;
+      const newSelection = rectangleSelection(
+        columnIndex,
+        rowIndex,
+        focus.column,
+        focus.row
+      );
+      scrollGridTo({ row: rowIndex, column: columnIndex });
+      onCellSelect(action, newSelection, focus);
+    },
+    [focus, onCellSelect, scrollGridTo]
+  );
+  const rowSelect = react.useCallback(
+    (action) => {
+      const rowIndex = action.row;
+      const newSelection = rowSelection([rowIndex], rowIndex);
+      scrollGridTo({ row: rowIndex });
+      onCellSelect(action, newSelection, focus);
+    },
+    [focus, onCellSelect, scrollGridTo]
+  );
+  const shiftRowSelect = react.useCallback(
+    (action) => {
+      const rowIndex = action.row;
+      const newSelection = rowSelection(rangeIndices(focus.row, rowIndex), rowIndex);
+      scrollGridTo({ row: rowIndex });
+      onCellSelect(action, newSelection, focus);
+    },
+    [focus, onCellSelect, scrollGridTo]
+  );
+  const columnSelect = react.useCallback(
+    (action) => {
+      const columnIndex = action.column;
+      const newSelection = columnSelection([columnIndex], columnIndex);
+      scrollGridTo({ column: columnIndex });
+      onCellSelect(action, newSelection, focus);
+    },
+    [focus, onCellSelect, scrollGridTo]
+  );
+  const shiftColumnSelect = react.useCallback(
+    (action) => {
+      const columnIndex = action.column;
+      const newSelection = columnSelection(
+        rangeIndices(focus.column, columnIndex),
+        columnIndex
+      );
+      onCellSelect(action, newSelection, focus);
+      scrollGridTo({ column: columnIndex });
+    },
+    [focus, onCellSelect, scrollGridTo]
+  );
+  const onSelection = react.useCallback(
+    (action) => {
+      switch (action.type) {
+        case "all":
+          allSelect(action);
+          break;
+        case "normal":
+          cellSelect(action);
+          break;
+        case "shiftSelection":
+          shiftSelect(action);
+          break;
+        case "columnSelection":
+          columnSelect(action);
+          break;
+        case "shiftColumnSelection":
+          shiftColumnSelect(action);
+          break;
+        case "rowSelection":
+          rowSelect(action);
+          break;
+        case "shiftRowSelection":
+          shiftRowSelect(action);
+          break;
+        default:
+          throw new Error(`Value should not occur ${action}`);
       }
-    } else {
-      const row = clamp(focus.row + rowDiff, 0, rowCount + rowStart - 1);
-      const column = clamp(focus.column + columnDiff, 0, columnCount - 1);
-      action = {
-        type: "normal",
-        row,
-        column,
-        event
+    },
+    [
+      allSelect,
+      cellSelect,
+      shiftSelect,
+      columnSelect,
+      shiftColumnSelect,
+      rowSelect,
+      shiftRowSelect
+    ]
+  );
+  const moveSelection = react.useCallback(
+    (columnDiff, rowDiff, moveAnchor, event) => {
+      const clamp = (n, low, high) => {
+        return Math.max(low, Math.min(high, n));
       };
-    }
-    if (action) {
-      onSelection(action);
-    }
-    return action;
-  }, [onSelection, columnCount, rowCount, selection, focus, rowStart]);
-  const getSelectionType = react.useCallback((args) => {
-    if (args.type === "all") {
-      const isSelected = cellRectSelected(selection, 0, rowStart, columnCount - 1, rowCount + rowStart - 1);
-      return isSelected ? "selectDirect" : "default";
-    }
-    if (args.type === "column") {
-      if (cellRectSelected(selection, args.column, rowStart, args.column, rowCount + rowStart)) {
-        return "selectDirect";
+      let action = null;
+      if (moveAnchor) {
+        if (selection.type === "rows") {
+          const row = clamp(selection.anchorRow + rowDiff, 0, rowCount + rowStart - 1);
+          action = { type: "shiftRowSelection", row, event };
+        } else if (selection.type === "columns") {
+          const column = clamp(selection.anchorColumn + columnDiff, 0, columnCount - 1);
+          action = { type: "shiftColumnSelection", column, event };
+        } else if (selection.type === "rectangle") {
+          const row = clamp(selection.anchor.row + rowDiff, 0, rowCount + rowStart - 1);
+          const column = clamp(selection.anchor.column + columnDiff, 0, columnCount - 1);
+          action = { type: "shiftSelection", row, column, event };
+        }
+      } else {
+        const row = clamp(focus.row + rowDiff, 0, rowCount + rowStart - 1);
+        const column = clamp(focus.column + columnDiff, 0, columnCount - 1);
+        action = { type: "normal", row, column, event };
       }
-      return columnAnySelected(selection, args.column) ? "selectIndirect" : "default";
-    }
-    const isRowSelected = cellRectSelected(selection, 0, args.row, columnCount, args.row);
-    const isRowAnySelected = focus.row === args.row || rowAnySelected(selection, args.row);
-    if (args.type === "cell" && args.column == -1) {
-      return "default";
-    }
-    if (isRowSelected) {
-      return "selectDirect";
-    }
-    if (!isRowAnySelected) {
-      return "default";
-    }
-    if (args.type === "cell") {
-      const {
-        row,
-        column
-      } = args;
-      if (row >= rowCount + rowStart || column >= columnCount || row < rowStart || column < 0) {
+      if (action) {
+        onSelection(action);
+      }
+      return action;
+    },
+    [onSelection, columnCount, rowCount, selection, focus, rowStart]
+  );
+  const getSelectionType = react.useCallback(
+    (args) => {
+      if (args.type === "all") {
+        const isSelected = cellRectSelected(
+          selection,
+          0,
+          rowStart,
+          columnCount - 1,
+          rowCount + rowStart - 1
+        );
+        return isSelected ? "selectDirect" : "default";
+      }
+      if (args.type === "column") {
+        if (cellRectSelected(
+          selection,
+          args.column,
+          rowStart,
+          args.column,
+          rowCount + rowStart
+        )) {
+          return "selectDirect";
+        }
+        return columnAnySelected(selection, args.column) ? "selectIndirect" : "default";
+      }
+      const isRowSelected = cellRectSelected(
+        selection,
+        0,
+        args.row,
+        columnCount,
+        args.row
+      );
+      const isRowAnySelected = focus.row === args.row || rowAnySelected(selection, args.row);
+      if (args.type === "cell" && args.column == -1) {
         return "default";
       }
-      if (cellRectSelected(selection, column, row, column, row)) {
+      if (isRowSelected) {
         return "selectDirect";
       }
-    }
-    if (selection.type === "columns") {
-      return "default";
-    }
-    return "selectIndirect";
-  }, [columnCount, focus.row, rowCount, rowStart, selection]);
-  const mouseMoveCellSelect = react.useCallback((row, column) => {
-    const selectionType = selection.type;
-    const event = "click";
-    if (row === -1 && column == -1) {
-      return;
-    }
-    if (selectionType === "columns") {
-      onSelection({
-        type: "shiftColumnSelection",
-        column,
-        event
-      });
-      return;
-    }
-    if (selectionType === "rows") {
-      onSelection({
-        type: "shiftRowSelection",
-        row,
-        event
-      });
-      return;
-    }
-    if (row === -1) {
-      let row2 = focus.row;
-      if (selection.type !== "empty") {
-        const {
-          bounds: {
-            top,
-            bottom
+      if (!isRowAnySelected) {
+        return "default";
+      }
+      if (args.type === "cell") {
+        const { row, column } = args;
+        if (row >= rowCount + rowStart || column >= columnCount || row < rowStart || column < 0) {
+          return "default";
+        }
+        if (cellRectSelected(selection, column, row, column, row)) {
+          return "selectDirect";
+        }
+      }
+      if (selection.type === "columns") {
+        return "default";
+      }
+      return "selectIndirect";
+    },
+    [columnCount, focus.row, rowCount, rowStart, selection]
+  );
+  const mouseMoveCellSelect = react.useCallback(
+    (row, column) => {
+      const selectionType = selection.type;
+      const event = "click";
+      if (row === -1 && column == -1) {
+        return;
+      }
+      if (selectionType === "columns") {
+        onSelection({
+          type: "shiftColumnSelection",
+          column,
+          event
+        });
+        return;
+      }
+      if (selectionType === "rows") {
+        onSelection({
+          type: "shiftRowSelection",
+          row,
+          event
+        });
+        return;
+      }
+      if (row === -1) {
+        let row2 = focus.row;
+        if (selection.type !== "empty") {
+          const {
+            bounds: { top, bottom }
+          } = selection;
+          if (top <= row2) {
+            row2 = top;
+          } else {
+            row2 = bottom;
           }
-        } = selection;
-        if (top <= row2) {
-          row2 = top;
-        } else {
-          row2 = bottom;
         }
+        onSelection({
+          type: "shiftSelection",
+          row: row2,
+          column,
+          event
+        });
+        return;
       }
-      onSelection({
-        type: "shiftSelection",
-        row: row2,
-        column,
-        event
-      });
-      return;
-    }
-    if (column === -1) {
-      let column2 = focus.column;
-      if (selection.type !== "empty") {
-        const {
-          bounds: {
-            left,
-            right
+      if (column === -1) {
+        let column2 = focus.column;
+        if (selection.type !== "empty") {
+          const {
+            bounds: { left, right }
+          } = selection;
+          if (left <= column2) {
+            column2 = left;
+          } else {
+            column2 = right;
           }
-        } = selection;
-        if (left <= column2) {
-          column2 = left;
-        } else {
-          column2 = right;
         }
+        onSelection({
+          type: "shiftSelection",
+          row,
+          column: column2,
+          event
+        });
+        return;
       }
       onSelection({
         type: "shiftSelection",
         row,
-        column: column2,
+        column,
         event
       });
-      return;
-    }
-    onSelection({
-      type: "shiftSelection",
-      row,
-      column,
-      event
-    });
-  }, [focus.column, focus.row, onSelection, selection]);
+    },
+    [focus.column, focus.row, onSelection, selection]
+  );
   return {
     getSelectionType,
     onSelection,