@multiplatform.one/table 6.0.0

package/dist/jsx/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/jsx/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/jsx/components/DataTableColumnPinning/index.native.js

@@ -0,0 +1,257 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var DataTableColumnPinning_exports = {};
+__export(DataTableColumnPinning_exports, {
+  DataTableColumnPinning: () => DataTableColumnPinning,
+  useColumnPinning: () => useColumnPinning
+});
+module.exports = __toCommonJS(DataTableColumnPinning_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("@phosphor-icons/react");
+var import_theme = require("@multiplatform.one/theme");
+var import_react2 = require("react");
+var import_forms = require("@multiplatform.one/forms");
+var import_tamagui = require("tamagui");
+var import_DataTableStateContext = require("../DataTable/DataTableStateContext.native.js");
+var StickyColumn = (0, import_tamagui.styled)(import_tamagui.View, {
+  name: "DataTableStickyColumnFrame",
+  backgroundColor: "$background",
+  zIndex: 1,
+  variants: {
+    position: {
+      left: {
+        left: 0
+      },
+      right: {
+        right: 0,
+        borderLeftWidth: 1,
+        borderRightWidth: 0
+      }
+    }
+  }
+});
+var PinnedIndicator = (0, import_tamagui.styled)(import_tamagui.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 = (0, import_DataTableStateContext.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
+  } = (0, import_theme.useResolvedKnobs)();
+  var pinnedColumns = table.getState().columnPinning || {
+    left: [],
+    right: []
+  };
+  var togglePin = (0, import_react2.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 = (0, import_react2.useCallback)(function (columnId) {
+    return (pinnedColumns.left || []).includes(columnId) || (pinnedColumns.right || []).includes(columnId);
+  }, [pinnedColumns]);
+  var getPinPosition = (0, import_react2.useCallback)(function (columnId) {
+    if ((pinnedColumns.left || []).includes(columnId)) return "left";
+    if ((pinnedColumns.right || []).includes(columnId)) return "right";
+    return void 0;
+  }, [pinnedColumns]);
+  var canPin = (0, import_react2.useCallback)(function (position) {
+    return position === "left" ? (pinnedColumns.left || []).length < maxPinnedColumns : (pinnedColumns.right || []).length < maxPinnedColumns;
+  }, [pinnedColumns, maxPinnedColumns]);
+  var PinButton = (0, import_react2.useCallback)(function (param) {
+    var {
+      columnId,
+      position
+    } = param;
+    var pinned = isPinned(columnId);
+    var currentPosition = getPinPosition(columnId);
+    if (!allowPinning) return null;
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+      size: knobProps.sizeToken,
+      icon: pinned ? import_react.PushPinSlashIcon : import_react.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__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        fontSize: "$1",
+        children: currentPosition
+      })
+    });
+  }, [isPinned, getPinPosition, allowPinning, togglePin, canPin, knobProps.sizeToken, knobProps.borderRadius]);
+  var pinnedLeftColumns = (0, import_react2.useMemo)(function () {
+    return table.getAllColumns().filter(function (column) {
+      return (pinnedColumns.left || []).includes(column.id);
+    });
+  }, [table, pinnedColumns.left]);
+  var pinnedRightColumns = (0, import_react2.useMemo)(function () {
+    return table.getAllColumns().filter(function (column) {
+      return (pinnedColumns.right || []).includes(column.id);
+    });
+  }, [table, pinnedColumns.right]);
+  var scrollableColumns = (0, import_react2.useMemo)(function () {
+    return table.getAllColumns().filter(function (column) {
+      return !(pinnedColumns.left || []).includes(column.id) && !(pinnedColumns.right || []).includes(column.id);
+    });
+  }, [table, pinnedColumns]);
+  var ThemedStickyColumn = (0, import_react2.useCallback)(function (props2) {
+    return /* @__PURE__ */(0, import_jsx_runtime.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] = (0, import_react2.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 = (0, import_react2.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 = (0, import_react2.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 = (0, import_react2.useCallback)(function () {
+    var emptyState = {
+      left: [],
+      right: []
+    };
+    setPinnedState(emptyState);
+    table.setColumnPinning(emptyState);
+  }, [table]);
+  return {
+    pinnedState,
+    pinColumn,
+    unpinColumn,
+    resetPinning
+  };
+}
+//# sourceMappingURL=index.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toCommonJS","mod","value","DataTableColumnPinning_exports","DataTableColumnPinning","useColumnPinning","module","exports","import_jsx_runtime","require","import_react","import_theme","import_react2","import_forms","import_tamagui","import_DataTableStateContext","StickyColumn","styled","View","backgroundColor","zIndex","variants","position","left","right","borderLeftWidth","borderRightWidth","PinnedIndicator","top","bottom","width","props","_props_table","ctx","useDataTableState","table","Error","onPinChange","maxPinnedColumns","allowPinning","knobProps","useResolvedKnobs","pinnedColumns","getState","columnPinning","togglePin","useCallback","columnId","currentPinning","isCurrentlyPinnedLeft","includes","isCurrentlyPinnedRight","newPinned","filter","id","length","setColumnPinning","isPinned","getPinPosition","canPin","PinButton","param","pinned","currentPosition","jsx","Button","size","sizeToken","icon","PushPinSlashIcon","PushPinIcon","onPress","disabled","variant","circular","borderRadius","children","Text","fontSize","pinnedLeftColumns","useMemo","getAllColumns","column","pinnedRightColumns","scrollableColumns","ThemedStickyColumn","props2"],"sources":["../../../../src/components/DataTableColumnPinning/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}