@multiplatform.one/table 6.0.0

package/dist/esm/components/DataTableColumnPinning/index.mjs

@@ -0,0 +1,203 @@
+import { PushPinIcon, PushPinSlashIcon } from "@phosphor-icons/react";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useCallback, useMemo, useState } from "react";
+import { Button } from "@multiplatform.one/forms";
+import { Text, View, styled } from "tamagui";
+import { useDataTableState } from "../DataTable/DataTableStateContext.mjs";
+import { jsx } from "react/jsx-runtime";
+const StickyColumn = styled(View, {
+  name: "DataTableStickyColumnFrame",
+  backgroundColor: "$background",
+  zIndex: 1,
+  variants: {
+    position: {
+      left: {
+        left: 0
+      },
+      right: {
+        right: 0,
+        borderLeftWidth: 1,
+        borderRightWidth: 0
+      }
+    }
+  }
+});
+const PinnedIndicator = styled(View, {
+  name: "DataTablePinnedIndicatorFrame",
+  position: "absolute",
+  top: 0,
+  bottom: 0,
+  width: 3,
+  backgroundColor: "$accentBackground",
+  variants: {
+    position: {
+      left: {
+        left: 0
+      },
+      right: {
+        right: 0
+      }
+    }
+  }
+});
+function DataTableColumnPinning(props) {
+  const ctx = useDataTableState();
+  const table = props.table ?? ctx?.table;
+  if (!table) {
+    throw new Error("DataTableColumnPinning requires a `table` prop or must be used inside a DataTable compound component.");
+  }
+  const {
+    onPinChange,
+    maxPinnedColumns = 3,
+    allowPinning = true
+  } = props;
+  const {
+    knobProps
+  } = useResolvedKnobs();
+  const pinnedColumns = table.getState().columnPinning || {
+    left: [],
+    right: []
+  };
+  const togglePin = useCallback((columnId, position) => {
+    const currentPinning = table.getState().columnPinning || {
+      left: [],
+      right: []
+    };
+    const isCurrentlyPinnedLeft = (currentPinning.left || []).includes(columnId);
+    const isCurrentlyPinnedRight = (currentPinning.right || []).includes(columnId);
+    const newPinned = {
+      ...currentPinning
+    };
+    if (isCurrentlyPinnedLeft) {
+      newPinned.left = (currentPinning.left || []).filter(id => id !== columnId);
+      onPinChange?.(columnId, void 0);
+    } else if (isCurrentlyPinnedRight) {
+      newPinned.right = (currentPinning.right || []).filter(id => id !== columnId);
+      onPinChange?.(columnId, void 0);
+    } else {
+      if (position === "left") {
+        if ((currentPinning.left || []).length < maxPinnedColumns) {
+          newPinned.left = [...(currentPinning.left || []), columnId];
+          onPinChange?.(columnId, "left");
+        } else {
+          return;
+        }
+      } else if (position === "right") {
+        if ((currentPinning.right || []).length < maxPinnedColumns) {
+          newPinned.right = [...(currentPinning.right || []), columnId];
+          onPinChange?.(columnId, "right");
+        } else {
+          return;
+        }
+      }
+    }
+    table.setColumnPinning(newPinned);
+  }, [maxPinnedColumns, onPinChange, table]);
+  const isPinned = useCallback(columnId => {
+    return (pinnedColumns.left || []).includes(columnId) || (pinnedColumns.right || []).includes(columnId);
+  }, [pinnedColumns]);
+  const getPinPosition = useCallback(columnId => {
+    if ((pinnedColumns.left || []).includes(columnId)) return "left";
+    if ((pinnedColumns.right || []).includes(columnId)) return "right";
+    return void 0;
+  }, [pinnedColumns]);
+  const canPin = useCallback(position => {
+    return position === "left" ? (pinnedColumns.left || []).length < maxPinnedColumns : (pinnedColumns.right || []).length < maxPinnedColumns;
+  }, [pinnedColumns, maxPinnedColumns]);
+  const PinButton = useCallback(({
+    columnId,
+    position
+  }) => {
+    const pinned = isPinned(columnId);
+    const currentPosition = getPinPosition(columnId);
+    if (!allowPinning) return null;
+    return /* @__PURE__ */jsx(Button, {
+      size: knobProps.sizeToken,
+      icon: pinned ? PushPinSlashIcon : PushPinIcon,
+      onPress: () => togglePin(columnId, position || "left"),
+      disabled: !pinned && !canPin(position || "left"),
+      variant: pinned ? "outlined" : void 0,
+      circular: true,
+      "aria-label": pinned ? `Unpin column ${columnId}` : `Pin column ${columnId} ${position || "left"}`,
+      ...knobProps.borderRadius,
+      children: pinned && currentPosition && /* @__PURE__ */jsx(Text, {
+        fontSize: "$1",
+        children: currentPosition
+      })
+    });
+  }, [isPinned, getPinPosition, allowPinning, togglePin, canPin, knobProps.sizeToken, knobProps.borderRadius]);
+  const pinnedLeftColumns = useMemo(() => {
+    return table.getAllColumns().filter(column => (pinnedColumns.left || []).includes(column.id));
+  }, [table, pinnedColumns.left]);
+  const pinnedRightColumns = useMemo(() => {
+    return table.getAllColumns().filter(column => (pinnedColumns.right || []).includes(column.id));
+  }, [table, pinnedColumns.right]);
+  const scrollableColumns = useMemo(() => {
+    return table.getAllColumns().filter(column => !(pinnedColumns.left || []).includes(column.id) && !(pinnedColumns.right || []).includes(column.id));
+  }, [table, pinnedColumns]);
+  const ThemedStickyColumn = useCallback(props2 => /* @__PURE__ */jsx(StickyColumn, {
+    ...knobProps.borderRadius,
+    ...props2
+  }), [knobProps.borderRadius]);
+  return {
+    pinnedColumns,
+    pinnedLeftColumns,
+    pinnedRightColumns,
+    scrollableColumns,
+    togglePin,
+    isPinned,
+    getPinPosition,
+    canPin,
+    PinButton,
+    StickyColumn: ThemedStickyColumn,
+    PinnedIndicator
+  };
+}
+function useColumnPinning(table, options) {
+  const [pinnedState, setPinnedState] = useState({
+    left: options?.initialPinnedColumns?.left || [],
+    right: options?.initialPinnedColumns?.right || []
+  });
+  const pinColumn = useCallback((columnId, position) => {
+    setPinnedState(prev => {
+      const newState = {
+        ...prev
+      };
+      newState.left = prev.left.filter(id => id !== columnId);
+      newState.right = prev.right.filter(id => id !== columnId);
+      if (position === "left") {
+        newState.left = [...newState.left, columnId];
+      } else {
+        newState.right = [...newState.right, columnId];
+      }
+      table.setColumnPinning(newState);
+      return newState;
+    });
+  }, [table]);
+  const unpinColumn = useCallback(columnId => {
+    setPinnedState(prev => {
+      const newState = {
+        left: prev.left.filter(id => id !== columnId),
+        right: prev.right.filter(id => id !== columnId)
+      };
+      table.setColumnPinning(newState);
+      return newState;
+    });
+  }, [table]);
+  const resetPinning = useCallback(() => {
+    const emptyState = {
+      left: [],
+      right: []
+    };
+    setPinnedState(emptyState);
+    table.setColumnPinning(emptyState);
+  }, [table]);
+  return {
+    pinnedState,
+    pinColumn,
+    unpinColumn,
+    resetPinning
+  };
+}
+export { DataTableColumnPinning, useColumnPinning };
+//# sourceMappingURL=index.mjs.map

package/dist/esm/components/DataTableColumnPinning/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["PushPinIcon","PushPinSlashIcon","useResolvedKnobs","useCallback","useMemo","useState","Button","Text","View","styled","useDataTableState","jsx","StickyColumn","name","backgroundColor","zIndex","variants","position","left","right","borderLeftWidth","borderRightWidth","PinnedIndicator","top","bottom","width","DataTableColumnPinning","props","ctx","table","Error","onPinChange","maxPinnedColumns","allowPinning","knobProps","pinnedColumns","getState","columnPinning","togglePin","columnId","currentPinning","isCurrentlyPinnedLeft","includes","isCurrentlyPinnedRight","newPinned","filter","id","length","setColumnPinning","isPinned","getPinPosition","canPin","PinButton","pinned","currentPosition","size","sizeToken","icon","onPress","disabled","variant","circular","borderRadius","children","fontSize","pinnedLeftColumns","getAllColumns","column","pinnedRightColumns","scrollableColumns","ThemedStickyColumn","props2","useColumnPinning","options","pinnedState","setPinnedState","initialPinnedColumns","pinColumn","prev","newState","unpinColumn","resetPinning","emptyState"],"sources":["../../../../src/components/DataTableColumnPinning/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/components/DataTableColumnPinning/index.native.js

@@ -0,0 +1,228 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PushPinIcon, PushPinSlashIcon } from "@phosphor-icons/react";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useCallback, useMemo, useState } from "react";
+import { Button } from "@multiplatform.one/forms";
+import { Text, View, styled } from "tamagui";
+import { useDataTableState } from "../DataTable/DataTableStateContext.native.js";
+var StickyColumn = styled(View, {
+  name: "DataTableStickyColumnFrame",
+  backgroundColor: "$background",
+  zIndex: 1,
+  variants: {
+    position: {
+      left: {
+        left: 0
+      },
+      right: {
+        right: 0,
+        borderLeftWidth: 1,
+        borderRightWidth: 0
+      }
+    }
+  }
+});
+var PinnedIndicator = styled(View, {
+  name: "DataTablePinnedIndicatorFrame",
+  position: "absolute",
+  top: 0,
+  bottom: 0,
+  width: 3,
+  backgroundColor: "$accentBackground",
+  variants: {
+    position: {
+      left: {
+        left: 0
+      },
+      right: {
+        right: 0
+      }
+    }
+  }
+});
+function DataTableColumnPinning(props) {
+  var _props_table;
+  var ctx = useDataTableState();
+  var table = (_props_table = props.table) !== null && _props_table !== void 0 ? _props_table : ctx === null || ctx === void 0 ? void 0 : ctx.table;
+  if (!table) {
+    throw new Error("DataTableColumnPinning requires a `table` prop or must be used inside a DataTable compound component.");
+  }
+  var {
+    onPinChange,
+    maxPinnedColumns = 3,
+    allowPinning = true
+  } = props;
+  var {
+    knobProps
+  } = useResolvedKnobs();
+  var pinnedColumns = table.getState().columnPinning || {
+    left: [],
+    right: []
+  };
+  var togglePin = useCallback(function (columnId, position) {
+    var currentPinning = table.getState().columnPinning || {
+      left: [],
+      right: []
+    };
+    var isCurrentlyPinnedLeft = (currentPinning.left || []).includes(columnId);
+    var isCurrentlyPinnedRight = (currentPinning.right || []).includes(columnId);
+    var newPinned = {
+      ...currentPinning
+    };
+    if (isCurrentlyPinnedLeft) {
+      newPinned.left = (currentPinning.left || []).filter(function (id) {
+        return id !== columnId;
+      });
+      onPinChange === null || onPinChange === void 0 ? void 0 : onPinChange(columnId, void 0);
+    } else if (isCurrentlyPinnedRight) {
+      newPinned.right = (currentPinning.right || []).filter(function (id) {
+        return id !== columnId;
+      });
+      onPinChange === null || onPinChange === void 0 ? void 0 : onPinChange(columnId, void 0);
+    } else {
+      if (position === "left") {
+        if ((currentPinning.left || []).length < maxPinnedColumns) {
+          newPinned.left = [...(currentPinning.left || []), columnId];
+          onPinChange === null || onPinChange === void 0 ? void 0 : onPinChange(columnId, "left");
+        } else {
+          return;
+        }
+      } else if (position === "right") {
+        if ((currentPinning.right || []).length < maxPinnedColumns) {
+          newPinned.right = [...(currentPinning.right || []), columnId];
+          onPinChange === null || onPinChange === void 0 ? void 0 : onPinChange(columnId, "right");
+        } else {
+          return;
+        }
+      }
+    }
+    table.setColumnPinning(newPinned);
+  }, [maxPinnedColumns, onPinChange, table]);
+  var isPinned = useCallback(function (columnId) {
+    return (pinnedColumns.left || []).includes(columnId) || (pinnedColumns.right || []).includes(columnId);
+  }, [pinnedColumns]);
+  var getPinPosition = useCallback(function (columnId) {
+    if ((pinnedColumns.left || []).includes(columnId)) return "left";
+    if ((pinnedColumns.right || []).includes(columnId)) return "right";
+    return void 0;
+  }, [pinnedColumns]);
+  var canPin = useCallback(function (position) {
+    return position === "left" ? (pinnedColumns.left || []).length < maxPinnedColumns : (pinnedColumns.right || []).length < maxPinnedColumns;
+  }, [pinnedColumns, maxPinnedColumns]);
+  var PinButton = useCallback(function (param) {
+    var {
+      columnId,
+      position
+    } = param;
+    var pinned = isPinned(columnId);
+    var currentPosition = getPinPosition(columnId);
+    if (!allowPinning) return null;
+    return /* @__PURE__ */_jsx(Button, {
+      size: knobProps.sizeToken,
+      icon: pinned ? PushPinSlashIcon : PushPinIcon,
+      onPress: function onPress() {
+        return togglePin(columnId, position || "left");
+      },
+      disabled: !pinned && !canPin(position || "left"),
+      variant: pinned ? "outlined" : void 0,
+      circular: true,
+      "aria-label": pinned ? `Unpin column ${columnId}` : `Pin column ${columnId} ${position || "left"}`,
+      ...knobProps.borderRadius,
+      children: pinned && currentPosition && /* @__PURE__ */_jsx(Text, {
+        fontSize: "$1",
+        children: currentPosition
+      })
+    });
+  }, [isPinned, getPinPosition, allowPinning, togglePin, canPin, knobProps.sizeToken, knobProps.borderRadius]);
+  var pinnedLeftColumns = useMemo(function () {
+    return table.getAllColumns().filter(function (column) {
+      return (pinnedColumns.left || []).includes(column.id);
+    });
+  }, [table, pinnedColumns.left]);
+  var pinnedRightColumns = useMemo(function () {
+    return table.getAllColumns().filter(function (column) {
+      return (pinnedColumns.right || []).includes(column.id);
+    });
+  }, [table, pinnedColumns.right]);
+  var scrollableColumns = useMemo(function () {
+    return table.getAllColumns().filter(function (column) {
+      return !(pinnedColumns.left || []).includes(column.id) && !(pinnedColumns.right || []).includes(column.id);
+    });
+  }, [table, pinnedColumns]);
+  var ThemedStickyColumn = useCallback(function (props2) {
+    return /* @__PURE__ */_jsx(StickyColumn, {
+      ...knobProps.borderRadius,
+      ...props2
+    });
+  }, [knobProps.borderRadius]);
+  return {
+    pinnedColumns,
+    pinnedLeftColumns,
+    pinnedRightColumns,
+    scrollableColumns,
+    togglePin,
+    isPinned,
+    getPinPosition,
+    canPin,
+    PinButton,
+    StickyColumn: ThemedStickyColumn,
+    PinnedIndicator
+  };
+}
+function useColumnPinning(table, options) {
+  var _options_initialPinnedColumns, _options_initialPinnedColumns1;
+  var [pinnedState, setPinnedState] = useState({
+    left: (options === null || options === void 0 ? void 0 : (_options_initialPinnedColumns = options.initialPinnedColumns) === null || _options_initialPinnedColumns === void 0 ? void 0 : _options_initialPinnedColumns.left) || [],
+    right: (options === null || options === void 0 ? void 0 : (_options_initialPinnedColumns1 = options.initialPinnedColumns) === null || _options_initialPinnedColumns1 === void 0 ? void 0 : _options_initialPinnedColumns1.right) || []
+  });
+  var pinColumn = useCallback(function (columnId, position) {
+    setPinnedState(function (prev) {
+      var newState = {
+        ...prev
+      };
+      newState.left = prev.left.filter(function (id) {
+        return id !== columnId;
+      });
+      newState.right = prev.right.filter(function (id) {
+        return id !== columnId;
+      });
+      if (position === "left") {
+        newState.left = [...newState.left, columnId];
+      } else {
+        newState.right = [...newState.right, columnId];
+      }
+      table.setColumnPinning(newState);
+      return newState;
+    });
+  }, [table]);
+  var unpinColumn = useCallback(function (columnId) {
+    setPinnedState(function (prev) {
+      var newState = {
+        left: prev.left.filter(function (id) {
+          return id !== columnId;
+        }),
+        right: prev.right.filter(function (id) {
+          return id !== columnId;
+        })
+      };
+      table.setColumnPinning(newState);
+      return newState;
+    });
+  }, [table]);
+  var resetPinning = useCallback(function () {
+    var emptyState = {
+      left: [],
+      right: []
+    };
+    setPinnedState(emptyState);
+    table.setColumnPinning(emptyState);
+  }, [table]);
+  return {
+    pinnedState,
+    pinColumn,
+    unpinColumn,
+    resetPinning
+  };
+}
+export { DataTableColumnPinning, useColumnPinning };
+//# sourceMappingURL=index.native.js.map

package/dist/esm/components/DataTableColumnPinning/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","PushPinIcon","PushPinSlashIcon","useResolvedKnobs","useCallback","useMemo","useState","Button","Text","View","styled","useDataTableState","StickyColumn","name","backgroundColor","zIndex","variants","position","left","right","borderLeftWidth","borderRightWidth","PinnedIndicator","top","bottom","width","DataTableColumnPinning","props","_props_table","ctx","table","Error","onPinChange","maxPinnedColumns","allowPinning","knobProps","pinnedColumns","getState","columnPinning","togglePin","columnId","currentPinning","isCurrentlyPinnedLeft","includes","isCurrentlyPinnedRight","newPinned","filter","id","length","setColumnPinning","isPinned","getPinPosition","canPin","PinButton","param","pinned","currentPosition","size","sizeToken","icon","onPress","disabled","variant","circular","borderRadius","children","fontSize","pinnedLeftColumns","getAllColumns","column","pinnedRightColumns","scrollableColumns","ThemedStickyColumn","props2","useColumnPinning","options","_options_initialPinnedColumns","_options_initialPinnedColumns1","pinnedState","setPinnedState","initialPinnedColumns","pinColumn","prev","newState"],"sources":["../../../../src/components/DataTableColumnPinning/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}