@tint-ui/data-table 0.3.5

package/cjs/use-lexicon.js

@@ -0,0 +1,155 @@
+"use strict";
+"use client";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+exports.__esModule = true;
+exports.useLexicon = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _app = require("@tint-ui/app");
+const defaultLexicon = {
+  filterClear: "Clear filter",
+  filterSelected: "{{ selected }} selected",
+  filterNotFound: "Filter options not found",
+  filterReset: "Reset filter",
+  view: "View",
+  viewOptions: "Options",
+  viewColumn: "Toggle columns",
+  viewSortBy: "Sort By",
+  viewFilter: "Filters",
+  viewFilterText: "Search...",
+  pageFirst: "Go to first page",
+  pageLast: "Go to last page",
+  pagePrevious: "Go to previous page",
+  pageNext: "Go to next page",
+  pageOf: "{{ pageNumber }} page of {{ pageCount }}",
+  search: "Search...",
+  notFound: "Empty data",
+  notFoundFiltered: "Records not found",
+  title: "{{ size }} row(s) out of {{ total }}",
+  onePageTitle: "{{ size }} row(s)",
+  selected: "{{ selected }} of {{ size }} row(s) selected"
+};
+const plainKeyList = ["search", "notFound", "notFoundFiltered", "filterClear", "filterReset", "filterNotFound", "view", "viewOptions", "viewFilterText", "viewFilter", "viewSortBy", "viewColumn", "pageFirst", "pageLast", "pagePrevious", "pageNext"];
+const useLexicon = (customLexicon, replacement) => {
+  const app = (0, _app.useApp)();
+  const ref = React.useRef(customLexicon);
+  const refReplacement = React.useRef(replacement);
+  ref.current = customLexicon;
+  refReplacement.current = replacement;
+  const lexicon = React.useMemo(() => {
+    const defaultText = key => {
+      const line = app.line(`dataTable.${key}`);
+      if (typeof line === "string") {
+        return line;
+      }
+      return defaultLexicon[key];
+    };
+    const plain = key => {
+      const value = ref.current[key];
+      if (!value) {
+        return defaultText(key);
+      }
+      return typeof value === "function" ? value() : value;
+    };
+    const createPlainFn = key => () => {
+      return plain(key);
+    };
+    const replaceFn = (key, replacement) => {
+      const value = ref.current[key] || defaultText(key);
+      return typeof value === "function" ? value(replacement) : app.replace(value, replacement);
+    };
+    const lexicon = {
+      filterSearch(label) {
+        const value = ref.current.filterSearch;
+        if (!value) {
+          const line = app.line(`dataTable.filterSearch`);
+          if (typeof line === "string") {
+            return app.replace(line, {
+              label
+            });
+          }
+          return label;
+        }
+        return typeof value === "function" ? value({
+          label
+        }) : value;
+      },
+      filterSelected(selected) {
+        return replaceFn("filterSelected", {
+          selected
+        });
+      },
+      get pageOf() {
+        const {
+          pageNumber,
+          pageCount
+        } = refReplacement.current;
+        return replaceFn("pageOf", {
+          pageNumber,
+          pageCount
+        });
+      },
+      get selected() {
+        const {
+          size,
+          selected
+        } = refReplacement.current;
+        return replaceFn("selected", {
+          size,
+          selected
+        });
+      },
+      get onePageTitle() {
+        const {
+          size
+        } = refReplacement.current;
+        return replaceFn("onePageTitle", {
+          size
+        });
+      },
+      get title() {
+        const curr = ref.current;
+        const {
+          size,
+          offset,
+          pageCount,
+          pageNumber,
+          total,
+          limit
+        } = refReplacement.current;
+        if (size === total) {
+          let value = curr.onePageTitle;
+          if (!value && !curr.title) {
+            value = defaultText("onePageTitle");
+          }
+          if (value) {
+            const replacement = {
+              size
+            };
+            return typeof value === "function" ? value(replacement) : app.replace(value, replacement);
+          }
+        }
+        const replacement = {
+          size,
+          offset,
+          total,
+          limit,
+          pageCount,
+          pageNumber
+        };
+        const value = curr.title || defaultText("title");
+        return typeof value === "function" ? value(replacement) : app.replace(value, replacement);
+      }
+    };
+
+    // define plain getters
+    plainKeyList.forEach(key => {
+      Object.defineProperty(lexicon, key, {
+        get: createPlainFn(key)
+      });
+    });
+    return lexicon;
+  }, [app]);
+  return lexicon;
+};
+exports.useLexicon = useLexicon;

package/cjs/use-row-menu.js

@@ -0,0 +1,60 @@
+"use strict";
+"use client";
+
+exports.__esModule = true;
+exports.useRowMenu = void 0;
+var _trigger = require("@tint-ui/trigger");
+var _app = require("@tint-ui/app");
+const useRowMenu = info => {
+  const app = (0, _app.useApp)();
+  const triggerService = (0, _trigger.useTrigger)();
+  const data = info.row.original;
+  return item => {
+    const {
+      onClick,
+      trigger,
+      triggerKey,
+      confirmation,
+      enabledKey
+    } = item;
+    const clickHandler = () => {
+      if (typeof onClick === "function") {
+        onClick(data);
+      }
+      if (triggerKey) {
+        const triggerProp = data[triggerKey];
+        if (triggerProp != null) {
+          triggerService.emitProp((0, _trigger.createTriggerProp)(triggerProp));
+        }
+      }
+      if (trigger) {
+        const {
+          name,
+          props
+        } = (0, _trigger.createTriggerProp)(trigger);
+        triggerService.emit(name, "data" in props ? props : Object.assign({}, props, {
+          data
+        }));
+      }
+    };
+    return {
+      disabled: enabledKey ? data[enabledKey] === true : false,
+      onClick() {
+        if (confirmation) {
+          const message = app.replace(confirmation, data);
+          if (triggerService.registered("dialog:confirm")) {
+            triggerService.emit("dialog:confirm", {
+              message,
+              confirmHandler: clickHandler
+            });
+          } else if (window.confirm(message)) {
+            clickHandler();
+          }
+        } else {
+          clickHandler();
+        }
+      }
+    };
+  };
+};
+exports.useRowMenu = useRowMenu;

package/cjs/use-visibility-column.js

@@ -0,0 +1,105 @@
+"use strict";
+"use client";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+exports.__esModule = true;
+exports.useVisibilityColumn = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _utils = require("./utils");
+var _browserSupport = require("@tint-ui/tools/browser-support");
+const readState = function (name, storage, readStore, cells) {
+  let initialData = {};
+  if (readStore) {
+    const data = (0, _utils.onStore)(name, storage, "visibility", (local, name) => {
+      const text = local.getItem(name);
+      return text && text.startsWith("{") ? JSON.parse(text) : null;
+    });
+    if (data != null) {
+      initialData = data;
+    }
+  }
+  const data = {};
+  cells.forEach(item => {
+    if (item.invisible) {
+      return;
+    }
+    if (item.required) {
+      data[item.name] = true;
+    } else {
+      const value = initialData[item.name];
+      if (value != null) {
+        data[item.name] = value;
+      } else {
+        data[item.name] = !item.hidden;
+      }
+    }
+  });
+  return data;
+};
+const useVisibilityColumn = function (name, cells, options) {
+  const {
+    storage,
+    ssr
+  } = options;
+  const [columnVisibility, setColumnVisibility] = React.useState(() => readState(name, storage, !ssr, cells));
+  const ref = React.useRef({
+    name,
+    storage,
+    update(data, fn) {
+      const {
+        name,
+        storage
+      } = ref.current;
+      (0, _utils.onStore)(name, storage, "visibility", (local, name) => {
+        if (fn) {
+          fn(name);
+        }
+        local.setItem(name, JSON.stringify(data));
+      });
+    }
+  });
+  ref.current.name = name;
+  ref.current.storage = storage;
+  React.useEffect(() => {
+    let origin = columnVisibility;
+    const data = readState(name, storage, true, cells);
+    for (const key in data) {
+      if (columnVisibility[key] !== data[key]) {
+        origin = data;
+        setColumnVisibility(origin);
+        break;
+      }
+    }
+    if (!storage || !(0, _browserSupport.isLocalStorage)()) {
+      return;
+    }
+    let storeKey = "";
+    ref.current.update(origin, name => {
+      storeKey = name;
+    });
+    if (storeKey.length) {
+      const fn = event => {
+        if (event.key === storeKey && event.newValue != null) {
+          const data = JSON.parse(event.newValue);
+          setColumnVisibility(data);
+          ref.current.update(data);
+        }
+      };
+      window.addEventListener("storage", fn);
+      return () => {
+        window.removeEventListener("storage", fn);
+      };
+    }
+  }, [name, storage, ssr, cells]);
+  const columnVisibilityHandler = React.useCallback(data => {
+    setColumnVisibility(prevState => {
+      if (typeof data === "function") {
+        data = data(prevState);
+      }
+      ref.current.update(data);
+      return data;
+    });
+  }, [setColumnVisibility]);
+  return [columnVisibility, columnVisibilityHandler];
+};
+exports.useVisibilityColumn = useVisibilityColumn;

package/cjs/use-visibility-filter.js

@@ -0,0 +1,149 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+exports.__esModule = true;
+exports.useVisibilityFilter = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _utils = require("./utils");
+var _browserSupport = require("@tint-ui/tools/browser-support");
+const readState = function (name, storage, readStore, filters, filterText, requiredFilterText) {
+  const data = {
+    filterText,
+    filters: {}
+  };
+  filters.forEach(filter => {
+    data.filters[filter.name] = filter.required || !filter.hidden;
+  });
+  if (readStore) {
+    const localData = (0, _utils.onStore)(name, storage, "filtering", (local, name) => {
+      const text = local.getItem(name);
+      return text && text.startsWith("{") ? JSON.parse(text) : null;
+    });
+    if (localData != null) {
+      data.filterText = filterText && localData.filterText;
+      const latest = localData.filters || {};
+      filters.forEach(({
+        required,
+        name
+      }) => {
+        const value = latest[name];
+        if (!required && typeof value === "boolean") {
+          data.filters[name] = value;
+        }
+      });
+    }
+  }
+  if (filterText && requiredFilterText) {
+    data.filterText = true;
+  }
+  return data;
+};
+const useVisibilityFilter = function (name, filters, filterText, options) {
+  const {
+    storage,
+    ssr,
+    requiredFilterText = false
+  } = options;
+  const [filteringState, setFilteringState] = React.useState(() => readState(name, storage, !ssr, filters, filterText, requiredFilterText));
+  const ref = React.useRef(filteringState);
+  ref.current = filteringState;
+  const refUpdate = React.useRef((data, fn) => {
+    (0, _utils.onStore)(name, storage, "filtering", (local, name) => {
+      if (fn) {
+        fn(name);
+      }
+      local.setItem(name, JSON.stringify(data));
+    });
+  });
+  React.useEffect(() => {
+    const data = readState(name, storage, true, filters, filterText, requiredFilterText);
+    const compare = () => {
+      for (const name in data.filters) {
+        if (data.filters[name] !== filteringState.filters[name]) {
+          return false;
+        }
+      }
+      return true;
+    };
+    if (filteringState.filterText !== data.filterText || !compare()) {
+      setFilteringState(data);
+    }
+    if (!storage || !(0, _browserSupport.isLocalStorage)()) {
+      return;
+    }
+    let storeKey = "";
+    refUpdate.current(data, name => {
+      storeKey = name;
+    });
+    if (storeKey.length) {
+      const fn = event => {
+        if (event.key === storeKey && event.newValue != null) {
+          const data = JSON.parse(event.newValue);
+          setFilteringState(data);
+          refUpdate.current(data);
+        }
+      };
+      window.addEventListener("storage", fn);
+      return () => {
+        window.removeEventListener("storage", fn);
+      };
+    }
+  }, [name, storage, ssr]);
+  const {
+    getFilters,
+    getVisibleFilters,
+    hasFilterVisible,
+    onFilterVisibleChange,
+    onFilterTextVisibleChange
+  } = React.useMemo(() => {
+    return {
+      getFilters() {
+        return filters;
+      },
+      getVisibleFilters() {
+        return filters.filter(item => ref.current.filters[item.name] === true);
+      },
+      hasFilterVisible(name) {
+        return ref.current.filters[name] === true;
+      },
+      onFilterVisibleChange: (name, visible) => {
+        const filter = filters.find(item => item.name === name);
+        if (!filter || filter.required || ref.current.filters[name] === visible) {
+          return;
+        }
+        setFilteringState(prev => {
+          const state = {
+            filterText: prev.filterText,
+            filters: Object.assign({}, prev.filters, {
+              [name]: visible
+            })
+          };
+          refUpdate.current(state);
+          return state;
+        });
+      },
+      onFilterTextVisibleChange: visible => {
+        if (!filterText || requiredFilterText || ref.current.filterText === visible) {
+          return;
+        }
+        setFilteringState(prev => {
+          const state = {
+            filterText: !prev.filterText,
+            filters: prev.filters
+          };
+          refUpdate.current(state);
+          return state;
+        });
+      }
+    };
+  }, [filters, filterText, requiredFilterText]);
+  return {
+    filterText: filteringState.filterText,
+    getVisibleFilters,
+    getFilters,
+    hasFilterVisible,
+    onFilterVisibleChange,
+    onFilterTextVisibleChange
+  };
+};
+exports.useVisibilityFilter = useVisibilityFilter;

package/cjs/utils.js

@@ -0,0 +1,136 @@
+"use strict";
+
+exports.__esModule = true;
+exports.onStore = exports.getToolbarConfig = exports.getPaginationNumber = exports.getNavbarConfig = exports.diffFilterId = void 0;
+var _browserSupport = require("@tint-ui/tools/browser-support");
+const onStore = (name, storage, type, fn) => {
+  if (!storage || !(0, _browserSupport.isLocalStorage)()) {
+    return null;
+  }
+  let key = `table:${name}:${type}`;
+  if (typeof storage === "string") {
+    key += `-${storage}`;
+  }
+  try {
+    return fn(window.localStorage, key);
+  } catch (err) {
+    console.error("Window storage failure", err);
+  }
+  return null;
+};
+exports.onStore = onStore;
+const defaultSize = "md";
+const getToolbarConfig = config => {
+  const {
+    size = defaultSize,
+    viewIconOnly = false,
+    resetIconOnly = false
+  } = config || {};
+  return {
+    size,
+    viewIconOnly,
+    resetIconOnly
+  };
+};
+exports.getToolbarConfig = getToolbarConfig;
+const getNavbarConfig = (config, defaultPageSize) => {
+  const {
+    size = defaultSize,
+    numberSize = 2,
+    pageSize = defaultPageSize,
+    pageSizeOptions,
+    mode = "arrow"
+  } = config || {};
+  return {
+    size,
+    mode,
+    pageSize,
+    numberSize,
+    pageSizeOptions: Array.isArray(pageSizeOptions) && pageSizeOptions.length > 0 ? pageSizeOptions : [pageSize]
+  };
+};
+exports.getNavbarConfig = getNavbarConfig;
+const getPaginationNumber = (pageNumber, pageCount, left) => {
+  if (pageCount < 2) {
+    return [];
+  }
+  const items = [];
+  const dots = left * 2 + 1 < pageCount;
+  const push = pg => {
+    if (pg === 0) {
+      items.push({
+        divider: true
+      });
+    } else {
+      items.push({
+        divider: false,
+        page: pg,
+        selected: pg === pageNumber
+      });
+    }
+  };
+  let start = pageNumber - left;
+  let end = pageNumber + left;
+  if (start < 1) {
+    start = 1;
+    end = left * 2 + 1;
+  }
+  if (end > pageCount) {
+    end = pageCount;
+    start = end - left * 2;
+    if (start < 1) {
+      start = 1;
+    }
+  }
+  if (start > 1) {
+    push(1);
+    dots && start > 2 && push(0);
+  }
+  for (let i = start; i <= end; i++) {
+    push(i);
+  }
+  if (end < pageCount) {
+    dots && end + 1 < pageCount && push(0);
+    push(pageCount);
+  }
+  return items;
+};
+exports.getPaginationNumber = getPaginationNumber;
+const diffCompare = (a, b) => {
+  if (Array.isArray(a)) {
+    a = a.join(",");
+  }
+  if (Array.isArray(b)) {
+    b = b.join(",");
+  }
+  return a === b;
+};
+const diffFilterId = (left, right) => {
+  const rightData = {};
+  for (const {
+    id,
+    value
+  } of right) {
+    rightData[id] = value;
+  }
+  const leftData = {};
+  for (const {
+    id,
+    value
+  } of left) {
+    if (leftData[id] == null) {
+      return id;
+    }
+    leftData[id] = value;
+  }
+  for (const {
+    id,
+    value
+  } of right) {
+    if (leftData[id] == null || !diffCompare(leftData[id], value)) {
+      return id;
+    }
+  }
+  return "*";
+};
+exports.diffFilterId = diffFilterId;

package/classes.d.ts

@@ -0,0 +1,34 @@
+declare const classes: {
+    dataTable: string;
+    table: string;
+    cellNotFound: string;
+    loader: string;
+    error: string;
+    booleanCellType: string;
+    numberCellType: string;
+    iconTrue: string;
+    iconFalse: string;
+    iconNull: string;
+    isNaN: string;
+    menuGroup: string;
+    menuItemDestructive: string;
+};
+declare const useDataTableClasses: () => {
+    dataTable: string;
+    table: string;
+    cellNotFound: string;
+    loader: string;
+    error: string;
+    booleanCellType: string;
+    numberCellType: string;
+    iconTrue: string;
+    iconFalse: string;
+    iconNull: string;
+    isNaN: string;
+    menuGroup: string;
+    menuItemDestructive: string;
+};
+type DataTableClassesType = keyof typeof classes;
+type DataTableClasses = Record<DataTableClassesType, string>;
+export { classes, useDataTableClasses };
+export type { DataTableClassesType, DataTableClasses };

package/classes.js

@@ -0,0 +1,23 @@
+import { classGroup } from "@tint-ui/tools/class-group";
+import { useClasses } from "@tint-ui/theme";
+const {
+  base,
+  b
+} = classGroup("data-table");
+const classes = {
+  dataTable: base,
+  table: b("table"),
+  cellNotFound: b("cell", "not-found"),
+  loader: b("loader"),
+  error: b("error"),
+  booleanCellType: b("cell-type", "boolean"),
+  numberCellType: b("cell-type", "number"),
+  iconTrue: b("icon", "true"),
+  iconFalse: b("icon", "false"),
+  iconNull: b("icon", "null"),
+  isNaN: b("isNaN"),
+  menuGroup: b("menu-group"),
+  menuItemDestructive: b("menu-item-destructive")
+};
+const useDataTableClasses = () => useClasses("data-table", classes);
+export { classes, useDataTableClasses };

package/context.d.ts

@@ -0,0 +1,5 @@
+import type { DataTableContextType } from "./types";
+import * as React from "react";
+declare const DataTableContext: React.Context<DataTableContextType<any> | null>;
+declare const useDataTableContext: <TData>() => DataTableContextType<TData>;
+export { DataTableContext, useDataTableContext };

package/context.js

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { invariant } from "@tint-ui/tools/proof";
+const DataTableContext = /*#__PURE__*/React.createContext(null);
+const useDataTableContext = function () {
+  const ctx = React.useContext(DataTableContext);
+  invariant(ctx, "DataTableContextType is not defined");
+  return ctx;
+};
+export { DataTableContext, useDataTableContext };

package/data-table-content.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+declare const DataTableContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & {
+    wrapperProps?: React.HTMLAttributes<HTMLDivElement> | undefined;
+    themePropsType?: string | undefined;
+    compact?: boolean | undefined;
+} & React.RefAttributes<HTMLTableElement>>;
+type DataTableContentProps = React.ComponentProps<typeof DataTableContent>;
+export { DataTableContent };
+export type { DataTableContentProps };