@tint-ui/data-table 0.3.5

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2014-2017, Jon Schlinkert.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,9 @@
+# @tint-ui/data-table
+
+The project is under construction, the description will be later
+
+## ❯ Install
+
+```
+$ npm install --save @tint-ui/data-table
+```

package/adapters/boolean.d.ts

@@ -0,0 +1,10 @@
+import type { DataTableCellAdapter, DataTableCellAdapterOptions } from "../types";
+type TableDataCellBooleanConfig = {
+    iconTrue?: string;
+    iconFalse?: string;
+    iconNull?: string;
+};
+declare const booleanAdapter: DataTableCellAdapter<TableDataCellBooleanConfig>;
+declare const booleanAdapterOptions: DataTableCellAdapterOptions<TableDataCellBooleanConfig>;
+export { booleanAdapter, booleanAdapterOptions };
+export type { TableDataCellBooleanConfig };

package/adapters/boolean.js

@@ -0,0 +1,38 @@
+"use client";
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from "react";
+import { SvgThemeIcon } from "@tint-ui/svg-icon";
+import { useDataTableClasses } from "../classes.js";
+const typeIcon = {
+  iconTrue: "data-table-boolean-true",
+  iconFalse: "data-table-boolean-false",
+  iconNull: "data-table-boolean-null"
+};
+const BooleanType = props => {
+  const {
+    value
+  } = props;
+  const variant = value == null ? "iconNull" : value ? "iconTrue" : "iconFalse";
+  const classes = useDataTableClasses();
+  return /*#__PURE__*/React.createElement("span", {
+    className: classes.booleanCellType
+  }, /*#__PURE__*/React.createElement(SvgThemeIcon, {
+    className: classes[variant],
+    icon: props[variant] || typeIcon[variant]
+  }));
+};
+BooleanType.displayName = "BooleanType";
+const booleanAdapter = (value, cell) => {
+  return /*#__PURE__*/React.createElement(BooleanType, _extends({
+    value: value
+  }, cell.config));
+};
+const booleanAdapterOptions = {
+  nullable(cell) {
+    const config = cell.config || {};
+    return /*#__PURE__*/React.createElement(BooleanType, config);
+  },
+  align: "center"
+};
+export { booleanAdapter, booleanAdapterOptions };

package/adapters/index.d.ts

@@ -0,0 +1,6 @@
+import type { DataTableCellAdapter, DataTableCellAdapterOptions } from "../types";
+declare const adapters: Record<string, {
+    adapter: DataTableCellAdapter<any>;
+    options: DataTableCellAdapterOptions<any>;
+}>;
+export { adapters };

package/adapters/index.js

@@ -0,0 +1,18 @@
+import { textAdapter, textAdapterOptions } from "./text.js";
+import { numberAdapter, numberAdapterOptions } from "./number.js";
+import { booleanAdapter, booleanAdapterOptions } from "./boolean.js";
+const adapters = {
+  text: {
+    adapter: textAdapter,
+    options: textAdapterOptions
+  },
+  number: {
+    adapter: numberAdapter,
+    options: numberAdapterOptions
+  },
+  boolean: {
+    adapter: booleanAdapter,
+    options: booleanAdapterOptions
+  }
+};
+export { adapters };

package/adapters/number-format.d.ts

@@ -0,0 +1 @@
+export declare function numberFormat(value: number, decimal?: number, decimalRequired?: boolean): string;

package/adapters/number-format.js

@@ -0,0 +1,42 @@
+const nobrSpace = "\xa0";
+const ditSign = ".";
+export function numberFormat(value, decimal = 2, decimalRequired = false) {
+  let number = String(value);
+  const ended = number.indexOf(".");
+  let end = "";
+  if (ended !== -1) {
+    end = number.substring(ended + 1);
+    if (end.length > decimal) {
+      if (decimal > 0) {
+        const endNum = parseInt(end.substring(0, decimal));
+        end = endNum === 0 ? "" : String(endNum);
+      } else {
+        end = "";
+      }
+    }
+    if (end.length) {
+      end = ditSign + end;
+    }
+    number = number.substring(0, ended);
+  }
+  if (decimalRequired && decimal > 0) {
+    if (!end) {
+      end = ".";
+    }
+    const delta = end.length - 1;
+    if (delta > 0 && delta < decimal) {
+      end += "0".repeat(delta);
+    }
+  }
+  let len = number.length;
+  if (len < 4) {
+    return number + end;
+  }
+  let ceil = "";
+  while (len > 3) {
+    len -= 3;
+    ceil = nobrSpace + number.substring(len) + ceil;
+    number = number.substring(0, len);
+  }
+  return number + ceil + end;
+}

package/adapters/number.d.ts

@@ -0,0 +1,12 @@
+import type { DataTableCellAdapter, DataTableCellAdapterOptions } from "../types";
+type TableDataCellNumberConfig = {
+    prefix?: string;
+    suffix?: string;
+    format?: boolean;
+    decimal?: number;
+    decimalRequired?: boolean;
+};
+declare const numberAdapter: DataTableCellAdapter<TableDataCellNumberConfig>;
+declare const numberAdapterOptions: DataTableCellAdapterOptions<TableDataCellNumberConfig>;
+export { numberAdapter, numberAdapterOptions };
+export type { TableDataCellNumberConfig };

package/adapters/number.js

@@ -0,0 +1,51 @@
+"use client";
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from "react";
+import { numberFormat } from "./number-format.js";
+import { useDataTableClasses } from "../classes.js";
+const NumberType = props => {
+  const {
+    value,
+    format,
+    prefix,
+    suffix,
+    decimal = 2,
+    decimalRequired = false
+  } = props;
+  const numberValue = typeof value === "number" ? value : parseFloat(String(value));
+  const numberIsNaN = !Number.isFinite(numberValue);
+  let node;
+  if (numberIsNaN) {
+    node = Number.isNaN(numberValue) ? "NaN" : "Infinite";
+  } else {
+    if (format) {
+      node = numberFormat(numberValue, decimal, decimalRequired);
+    } else {
+      node = String(numberValue);
+    }
+    if (prefix) {
+      node = prefix + node;
+    }
+    if (suffix) {
+      node += suffix;
+    }
+  }
+  const classes = useDataTableClasses();
+  return /*#__PURE__*/React.createElement("span", {
+    className: classes.numberCellType + (numberIsNaN ? ` ${classes.isNaN}` : "")
+  }, node);
+};
+NumberType.displayName = "NumberType";
+const numberAdapter = (value, cell) => {
+  return /*#__PURE__*/React.createElement(NumberType, _extends({
+    value: value
+  }, cell.config));
+};
+const numberAdapterOptions = {
+  nullable() {
+    return "";
+  },
+  align: "end"
+};
+export { numberAdapter, numberAdapterOptions };

package/adapters/text.d.ts

@@ -0,0 +1,4 @@
+import type { DataTableCellAdapter, DataTableCellAdapterOptions } from "../types";
+declare const textAdapter: DataTableCellAdapter<{}>;
+declare const textAdapterOptions: DataTableCellAdapterOptions<{}>;
+export { textAdapter, textAdapterOptions };

package/adapters/text.js

@@ -0,0 +1,9 @@
+const textAdapter = value => {
+  return String(value);
+};
+const textAdapterOptions = {
+  nullable() {
+    return "";
+  }
+};
+export { textAdapter, textAdapterOptions };

package/cell-adapter-type.d.ts

@@ -0,0 +1,43 @@
+import type { Header, Cell } from "@tanstack/react-table";
+import type { DataTableCellAdapter, DataTableCellAdapterOptions, DataTableDisplayCell } from "./types";
+import * as React from "react";
+declare const hasCellAdapter: (type: string) => boolean;
+declare const addCellAdapter: <TConfig extends object>(name: string, adapter: DataTableCellAdapter<TConfig, string, any>, options?: DataTableCellAdapterOptions<any>) => void;
+declare const addCellAdapterAsync: <TConfig extends object>(name: string, handler: () => Promise<{
+    default: DataTableCellAdapter<TConfig, string, any>;
+}>, options?: DataTableCellAdapterOptions<any>) => void;
+declare const renderDataTableCell: <TData = object>(value: unknown, cell: DataTableDisplayCell<keyof TData, any>, data: TData) => React.ReactNode;
+type DataTableCellNoRef<TData = object> = Omit<React.TdHTMLAttributes<HTMLTableCellElement>, "align"> & {
+    cell: Cell<TData, unknown>;
+    themePropsType?: string;
+    withWidth?: boolean;
+};
+declare const DataTableCell: (<TData>(props: Omit<React.TdHTMLAttributes<HTMLTableCellElement>, "align"> & {
+    cell: Cell<TData, unknown>;
+    themePropsType?: string | undefined;
+    withWidth?: boolean | undefined;
+} & {
+    ref?: React.Ref<HTMLTableCellElement> | undefined;
+}) => React.ReactElement) & {
+    readonly $$typeof: symbol;
+    displayName?: string | undefined;
+};
+type DataTableHeadPropsNoRef<TData> = Omit<React.TdHTMLAttributes<HTMLTableCellElement>, "align"> & {
+    header: Header<TData, unknown>;
+    themePropsType?: string;
+    withWidth?: boolean;
+};
+declare const DataTableHead: (<TData>(props: Omit<React.TdHTMLAttributes<HTMLTableCellElement>, "align"> & {
+    header: Header<TData, unknown>;
+    themePropsType?: string | undefined;
+    withWidth?: boolean | undefined;
+} & {
+    ref?: React.Ref<HTMLTableCellElement> | undefined;
+}) => React.ReactElement) & {
+    readonly $$typeof: symbol;
+    displayName?: string | undefined;
+};
+type DataTableCellProps = React.ComponentProps<typeof DataTableCell>;
+type DataTableHeadProps = React.ComponentProps<typeof DataTableHead>;
+export { hasCellAdapter, addCellAdapter, addCellAdapterAsync, renderDataTableCell, DataTableCell, DataTableHead };
+export type { DataTableCellProps, DataTableHeadProps };

package/cell-adapter-type.js

@@ -0,0 +1,306 @@
+"use client";
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from "react";
+import { flexRender } from "@tanstack/react-table";
+import { TableCell, TableHead, TableButtonSort } from "@tint-ui/table";
+import { invariant, warningOnce } from "@tint-ui/tools/proof";
+import { errorMessage } from "@tint-ui/tools/error-message";
+import { adapters as coreAdapters } from "./adapters/index.js";
+import { useDataTableClasses } from "./classes.js";
+import { useDataTableContext } from "./context.js";
+const adapters = new Map();
+const defaultAdapters = new Map();
+Object.entries(coreAdapters).forEach(([name, {
+  adapter,
+  options
+}]) => {
+  defaultAdapters.set(name, {
+    adapter,
+    options
+  });
+});
+const getAdapt = type => {
+  const adapter = adapters.get(type) || defaultAdapters.get(type);
+  if (!adapter) {
+    return null;
+  }
+  return adapter;
+};
+const privateTypes = [];
+const checkAdapt = type => {
+  if (!type) {
+    throw new Error(`Adapter type is empty`);
+  }
+  if (privateTypes.includes(type)) {
+    throw new Error(`The ${type} type is private`);
+  }
+  if (adapters.has(type)) {
+    throw new Error(`The ${type} form adapter already exists`);
+  }
+};
+const hasCellAdapter = type => adapters.has(type);
+const addCellAdapter = function (name, adapter, options = {}) {
+  checkAdapt(name);
+  adapters.set(name, {
+    adapter,
+    options
+  });
+};
+const addCellAdapterAsync = function (name, handler, options = {}) {
+  checkAdapt(name);
+  adapters.set(name, {
+    adapter: createAsyncAdapterCallback(name, handler, options),
+    options
+  });
+};
+const getAsyncAdapter = function (type, result) {
+  const adapter = result?.default;
+  invariant(typeof adapter === "function", `Async ${type} adapter failure: default is not function`);
+  return adapter;
+};
+const createAsyncAdapterCallback = function (type, handler, options) {
+  const adapt = {
+    waiters: new Set(),
+    handler,
+    error: null,
+    options
+  };
+  const adapter = (value, cell, data) => {
+    return /*#__PURE__*/React.createElement(DataTableCellAdapterAsync, {
+      adapt: adapt,
+      type: type,
+      value: value,
+      cell: cell,
+      data: data
+    });
+  };
+  adapt.adapter = adapter;
+  return adapter;
+};
+const createAsyncPromise = async (type, adapt) => {
+  try {
+    const result = await adapt.handler();
+    const adapter = getAsyncAdapter(type, result);
+    adapt.error = null;
+    adapt.adapter = adapter;
+    adapters.set(type, {
+      adapter,
+      options: adapt.options
+    });
+  } catch (err) {
+    adapt.error = errorMessage(err).message;
+  }
+  let event;
+  if (adapt.error != null) {
+    event = {
+      error: adapt.error
+    };
+  } else if (adapt.adapter) {
+    event = {
+      adapter: adapt.adapter
+    };
+  } else {
+    return;
+  }
+  const handlers = Array.from(adapt.waiters.values());
+  adapt.waiters.clear();
+  handlers.forEach(handler => {
+    handler(event);
+  });
+};
+const DataTableCellAdapterAsync = props => {
+  const classes = useDataTableClasses();
+  const {
+    adapt,
+    cell,
+    value,
+    data,
+    type
+  } = props;
+  const [state, setState] = React.useState(() => {
+    return adapt.adapter ? {
+      adapter: adapt.adapter
+    } : adapt.error != null ? {
+      error: adapt.error
+    } : null;
+  });
+  React.useEffect(() => {
+    const {
+      adapter,
+      error,
+      promise
+    } = adapt;
+    if (error != null || adapter != null) {
+      return;
+    }
+    if (promise == null) {
+      adapt.promise = createAsyncPromise(type, adapt);
+    }
+    adapt.waiters.add(setState);
+    return () => {
+      adapt.waiters.delete(setState);
+    };
+  }, [type, adapt]);
+  if (state == null) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: classes.loader
+    });
+  }
+  if ("error" in state) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: classes.error
+    }, state.error);
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, state.adapter(value, cell, data));
+};
+DataTableCellAdapterAsync.displayName = "DataTableCellAdapterAsync";
+const renderDataTableCell = function (value, cell, data) {
+  const {
+    type = "text"
+  } = cell;
+  const adapt = getAdapt(type);
+  if (!adapt) {
+    warningOnce(`table-cell:${type}`, false, `The ${type} cell type not found`);
+    switch (typeof value) {
+      case "string":
+      case "number":
+      case "boolean":
+        return String(value);
+    }
+    return null;
+  }
+  const {
+    adapter
+  } = adapt;
+  if (value != null) {
+    return adapter(value, cell, data);
+  }
+  const {
+    options: {
+      nullable
+    }
+  } = adapt;
+  if (nullable) {
+    return nullable(cell, data);
+  }
+  return null;
+};
+const DataTableCell = /*#__PURE__*/React.forwardRef(({
+  cell: tableCell,
+  withWidth,
+  style,
+  ...props
+}, ref) => {
+  const colDef = tableCell.column.columnDef;
+  const cell = colDef.meta?._cell;
+  const minProps = {
+    ...props,
+    style,
+    ref,
+    "data-cell-id": tableCell.id
+  };
+  if (!cell) {
+    if (withWidth && String(tableCell.column.id).startsWith("__#")) {
+      minProps.style = {
+        ...style,
+        width: "1%"
+      };
+    }
+    return /*#__PURE__*/React.createElement(TableCell, minProps);
+  }
+  const {
+    name,
+    type = "text"
+  } = cell;
+  const adapt = getAdapt(type);
+  if (!adapt) {
+    return /*#__PURE__*/React.createElement(TableCell, _extends({}, minProps, {
+      "data-cell-name": name
+    }));
+  }
+  let align = "start";
+  const {
+    options
+  } = adapt;
+  if (options.align) {
+    align = options.align;
+  }
+  if (withWidth && options.width) {
+    style = {
+      ...style,
+      width: options.width
+    };
+  }
+  return /*#__PURE__*/React.createElement(TableCell, _extends({}, minProps, {
+    style: style,
+    align: align,
+    "data-cell-name": name,
+    "data-cell-type": type
+  }));
+});
+DataTableCell.displayName = "DataTableCell";
+const DataTableHead = /*#__PURE__*/React.forwardRef(({
+  header,
+  withWidth,
+  children,
+  style,
+  ...props
+}, ref) => {
+  const table = useDataTableContext();
+  const colDef = header.column.columnDef;
+  const cell = colDef.meta?._cell;
+  const body = header.isPlaceholder ? null : flexRender(colDef.header, header.getContext());
+  const minProps = {
+    ...props,
+    ref,
+    style,
+    "data-cell-id": header.id
+  };
+  if (!cell || body == null) {
+    if (withWidth && String(header.column.id).startsWith("__#")) {
+      minProps.style = {
+        ...style,
+        width: "1%"
+      };
+    }
+    return /*#__PURE__*/React.createElement(TableHead, minProps, body);
+  }
+  const {
+    name,
+    type = "text"
+  } = cell;
+  let node = body;
+  let align = "start";
+  const adapt = getAdapt(type);
+  if (adapt) {
+    const {
+      options
+    } = adapt;
+    if (options.align) {
+      align = options.align;
+    }
+    if (withWidth && options.width) {
+      style = {
+        ...style,
+        width: options.width
+      };
+    }
+  }
+  if (header.column.getCanSort()) {
+    const sorted = header.column.getIsSorted();
+    node = /*#__PURE__*/React.createElement(TableButtonSort, {
+      disabled: table.loading,
+      direction: sorted ? sorted : "none",
+      onClick: header.column.getToggleSortingHandler()
+    }, node);
+  }
+  return /*#__PURE__*/React.createElement(TableHead, _extends({}, minProps, {
+    style: style,
+    align: align,
+    "data-cell-name": name,
+    "data-cell-type": type
+  }), node);
+});
+DataTableHead.displayName = "DataTableHead";
+export { hasCellAdapter, addCellAdapter, addCellAdapterAsync, renderDataTableCell, DataTableCell, DataTableHead };

package/cjs/adapters/boolean.js

@@ -0,0 +1,43 @@
+"use strict";
+"use client";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+exports.__esModule = true;
+exports.booleanAdapterOptions = exports.booleanAdapter = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _svgIcon = require("@tint-ui/svg-icon");
+var _classes = require("../classes");
+const typeIcon = {
+  iconTrue: "data-table-boolean-true",
+  iconFalse: "data-table-boolean-false",
+  iconNull: "data-table-boolean-null"
+};
+const BooleanType = props => {
+  const {
+    value
+  } = props;
+  const variant = value == null ? "iconNull" : value ? "iconTrue" : "iconFalse";
+  const classes = (0, _classes.useDataTableClasses)();
+  return /*#__PURE__*/React.createElement("span", {
+    className: classes.booleanCellType
+  }, /*#__PURE__*/React.createElement(_svgIcon.SvgThemeIcon, {
+    className: classes[variant],
+    icon: props[variant] || typeIcon[variant]
+  }));
+};
+BooleanType.displayName = "BooleanType";
+const booleanAdapter = (value, cell) => {
+  return /*#__PURE__*/React.createElement(BooleanType, (0, _extends2.default)({
+    value: value
+  }, cell.config));
+};
+exports.booleanAdapter = booleanAdapter;
+const booleanAdapterOptions = exports.booleanAdapterOptions = {
+  nullable(cell) {
+    const config = cell.config || {};
+    return /*#__PURE__*/React.createElement(BooleanType, config);
+  },
+  align: "center"
+};

package/cjs/adapters/index.js

@@ -0,0 +1,21 @@
+"use strict";
+
+exports.__esModule = true;
+exports.adapters = void 0;
+var _text = require("./text");
+var _number = require("./number");
+var _boolean = require("./boolean");
+const adapters = exports.adapters = {
+  text: {
+    adapter: _text.textAdapter,
+    options: _text.textAdapterOptions
+  },
+  number: {
+    adapter: _number.numberAdapter,
+    options: _number.numberAdapterOptions
+  },
+  boolean: {
+    adapter: _boolean.booleanAdapter,
+    options: _boolean.booleanAdapterOptions
+  }
+};