@tint-ui/data-table 0.3.5

package/use-lexicon.d.ts

@@ -0,0 +1,12 @@
+import { DataTableLexicon, LexiconType } from "./types";
+type LexiconReplacementProps = {
+    selected: number;
+    size: number;
+    total: number;
+    limit: number;
+    offset: number;
+    pageNumber: number;
+    pageCount: number;
+};
+declare const useLexicon: (customLexicon: Partial<DataTableLexicon>, replacement: LexiconReplacementProps) => LexiconType;
+export { useLexicon };

package/use-lexicon.js

@@ -0,0 +1,151 @@
+"use client";
+
+import * as React from "react";
+import { useApp } from "@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 = 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;
+};
+export { useLexicon };

package/use-row-menu.d.ts

@@ -0,0 +1,7 @@
+import type { CellContext } from "@tanstack/react-table";
+import type { RowMenuOption } from "./types";
+declare const useRowMenu: <TData>(info: CellContext<TData, unknown>) => (item: Pick<RowMenuOption<TData>, "onClick" | "trigger" | "confirmation" | "enabledKey" | "triggerKey">) => {
+    disabled: boolean;
+    onClick(): void;
+};
+export { useRowMenu };

package/use-row-menu.js

@@ -0,0 +1,58 @@
+"use client";
+
+import { useTrigger, createTriggerProp } from "@tint-ui/trigger";
+import { useApp } from "@tint-ui/app";
+const useRowMenu = info => {
+  const app = useApp();
+  const triggerService = 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(createTriggerProp(triggerProp));
+        }
+      }
+      if (trigger) {
+        const {
+          name,
+          props
+        } = createTriggerProp(trigger);
+        triggerService.emit(name, "data" in props ? props : {
+          ...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();
+        }
+      }
+    };
+  };
+};
+export { useRowMenu };

package/use-visibility-column.d.ts

@@ -0,0 +1,7 @@
+import type { DataTableDisplayCell } from "./types";
+import type { VisibilityState, OnChangeFn } from "@tanstack/react-table";
+declare const useVisibilityColumn: (name: string, cells: DataTableDisplayCell[], options: {
+    storage: string | boolean;
+    ssr: boolean;
+}) => [VisibilityState, OnChangeFn<VisibilityState>];
+export { useVisibilityColumn };

package/use-visibility-column.js

@@ -0,0 +1,101 @@
+"use client";
+
+import * as React from "react";
+import { onStore } from "./utils.js";
+import { isLocalStorage } from "@tint-ui/tools/browser-support";
+const readState = function (name, storage, readStore, cells) {
+  let initialData = {};
+  if (readStore) {
+    const data = 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;
+      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 || !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];
+};
+export { useVisibilityColumn };

package/use-visibility-filter.d.ts

@@ -0,0 +1,7 @@
+import type { DataTableDisplayFilter, FilterVisibility } from "./types";
+declare const useVisibilityFilter: <TData extends object>(name: string, filters: DataTableDisplayFilter<keyof TData, any>[], filterText: boolean, options: {
+    storage: boolean | string;
+    ssr: boolean;
+    requiredFilterText?: boolean;
+}) => FilterVisibility<TData>;
+export { useVisibilityFilter };

package/use-visibility-filter.js

@@ -0,0 +1,145 @@
+import * as React from "react";
+import { onStore } from "./utils.js";
+import { isLocalStorage } from "@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 = 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) => {
+    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 || !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: {
+              ...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
+  };
+};
+export { useVisibilityFilter };

package/utils.d.ts

@@ -0,0 +1,14 @@
+import type { NavbarConfig, ToolbarConfig } from "./types";
+import type { ColumnFilter } from "@tanstack/react-table";
+declare const onStore: <T = unknown>(name: string, storage: string | boolean, type: string, fn: (storage: Storage, name: string) => T) => T | null;
+declare const getToolbarConfig: (config: null | undefined | Partial<Omit<ToolbarConfig, "onFilterReset">>) => Omit<ToolbarConfig, "onFilterReset">;
+declare const getNavbarConfig: (config: null | undefined | Partial<Omit<NavbarConfig, "onPageSizeChange">>, defaultPageSize: number) => Omit<NavbarConfig, "onPageSizeChange">;
+declare const getPaginationNumber: (pageNumber: number, pageCount: number, left: number) => ({
+    divider: true;
+} | {
+    divider: false;
+    page: number;
+    selected: boolean;
+})[];
+declare const diffFilterId: (left: ColumnFilter[], right: ColumnFilter[]) => string;
+export { onStore, getToolbarConfig, getNavbarConfig, getPaginationNumber, diffFilterId };

package/utils.js

@@ -0,0 +1,128 @@
+import { isLocalStorage } from "@tint-ui/tools/browser-support";
+const onStore = (name, storage, type, fn) => {
+  if (!storage || !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;
+};
+const defaultSize = "md";
+const getToolbarConfig = config => {
+  const {
+    size = defaultSize,
+    viewIconOnly = false,
+    resetIconOnly = false
+  } = config || {};
+  return {
+    size,
+    viewIconOnly,
+    resetIconOnly
+  };
+};
+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]
+  };
+};
+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;
+};
+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 "*";
+};
+export { onStore, getToolbarConfig, getNavbarConfig, getPaginationNumber, diffFilterId };