@tint-ui/data-table 0.3.5 → 0.3.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/adapters/boolean.js +2 -1
  2. package/cjs/adapters/boolean.js +2 -1
  3. package/cjs/classes.js +1 -0
  4. package/cjs/context.js +1 -0
  5. package/cjs/filter-classes.js +1 -0
  6. package/cjs/pagination-classes.js +1 -0
  7. package/cjs/row-button-menu.js +2 -1
  8. package/cjs/toolbar-classes.js +1 -0
  9. package/cjs/use-data-table.js +17 -2
  10. package/cjs/use-row-menu.js +8 -2
  11. package/classes.js +2 -0
  12. package/context.js +2 -0
  13. package/filter-classes.js +2 -0
  14. package/package.json +1 -1
  15. package/pagination-classes.js +2 -0
  16. package/row-button-menu.js +2 -1
  17. package/toolbar-classes.js +2 -0
  18. package/types.d.ts +1 -1
  19. package/use-data-table.js +17 -2
  20. package/use-row-menu.d.ts +1 -1
  21. package/use-row-menu.js +8 -2
package/adapters/boolean.js CHANGED
@@ -16,7 +16,8 @@ const BooleanType = props => {
16
16
  const variant = value == null ? "iconNull" : value ? "iconTrue" : "iconFalse";
17
17
  const classes = useDataTableClasses();
18
18
  return /*#__PURE__*/React.createElement("span", {
19
- className: classes.booleanCellType
19
+ className: classes.booleanCellType,
20
+ "data-row-click": "off"
20
21
  }, /*#__PURE__*/React.createElement(SvgThemeIcon, {
21
22
  className: classes[variant],
22
23
  icon: props[variant] || typeIcon[variant]
package/cjs/adapters/boolean.js CHANGED
@@ -21,7 +21,8 @@ const BooleanType = props => {
21
21
  const variant = value == null ? "iconNull" : value ? "iconTrue" : "iconFalse";
22
22
  const classes = (0, _classes.useDataTableClasses)();
23
23
  return /*#__PURE__*/React.createElement("span", {
24
- className: classes.booleanCellType
24
+ className: classes.booleanCellType,
25
+ "data-row-click": "off"
25
26
  }, /*#__PURE__*/React.createElement(_svgIcon.SvgThemeIcon, {
26
27
  className: classes[variant],
27
28
  icon: props[variant] || typeIcon[variant]
package/cjs/classes.js CHANGED
@@ -1,4 +1,5 @@
1
1
  "use strict";
2
+ "use client";
2
3
 
3
4
  exports.__esModule = true;
4
5
  exports.useDataTableClasses = exports.classes = void 0;
package/cjs/context.js CHANGED
@@ -1,4 +1,5 @@
1
1
  "use strict";
2
+ "use client";
2
3
 
3
4
  var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
4
5
  exports.__esModule = true;
package/cjs/filter-classes.js CHANGED
@@ -1,4 +1,5 @@
1
1
  "use strict";
2
+ "use client";
2
3
 
3
4
  exports.__esModule = true;
4
5
  exports.useDataTableFilterClasses = exports.filterClasses = void 0;
package/cjs/pagination-classes.js CHANGED
@@ -1,4 +1,5 @@
1
1
  "use strict";
2
+ "use client";
2
3
 
3
4
  exports.__esModule = true;
4
5
  exports.useDataTablePaginationClasses = exports.paginationClasses = void 0;
package/cjs/row-button-menu.js CHANGED
@@ -18,7 +18,8 @@ const rowButtonMenu = (info, menu) => {
18
18
  } = (0, _context.useDataTableContext)();
19
19
  const rowHandler = (0, _useRowMenu.useRowMenu)(info);
20
20
  return /*#__PURE__*/React.createElement("div", {
21
- className: classes.menuGroup
21
+ className: classes.menuGroup,
22
+ "data-row-click": "off"
22
23
  }, menu.map(item => {
23
24
  const {
24
25
  icon,
package/cjs/toolbar-classes.js CHANGED
@@ -1,4 +1,5 @@
1
1
  "use strict";
2
+ "use client";
2
3
 
3
4
  exports.__esModule = true;
4
5
  exports.useDataTableToolbarClasses = exports.toolbarClasses = void 0;
package/cjs/use-data-table.js CHANGED
@@ -390,6 +390,10 @@ const useDataTable = function (props) {
390
390
  return prev;
391
391
  }
392
392
  const state = Object.assign({}, prev, {
393
+ pagination: {
394
+ pageSize: prev.pagination.pageSize,
395
+ pageIndex: 0
396
+ },
393
397
  columnFilters: [],
394
398
  globalFilter: ""
395
399
  });
@@ -431,6 +435,10 @@ const useDataTable = function (props) {
431
435
  value = value(globalFilter);
432
436
  }
433
437
  const state = Object.assign({}, rest, {
438
+ pagination: {
439
+ pageSize: prev.pagination.pageSize,
440
+ pageIndex: 0
441
+ },
434
442
  globalFilter: value == null ? "" : String(value)
435
443
  });
436
444
  if (force(state, true, "filter-text")) {
@@ -456,6 +464,10 @@ const useDataTable = function (props) {
456
464
  value
457
465
  }) => Array.isArray(value) ? value.length > 0 : value != null && value !== "");
458
466
  const state = Object.assign({}, rest, {
467
+ pagination: {
468
+ pageSize: prev.pagination.pageSize,
469
+ pageIndex: 0
470
+ },
459
471
  columnFilters: value
460
472
  });
461
473
  if (force(state)) {
@@ -475,6 +487,10 @@ const useDataTable = function (props) {
475
487
  } = prev,
476
488
  rest = (0, _objectWithoutPropertiesLoose2.default)(prev, _excluded3);
477
489
  const state = Object.assign({}, rest, {
490
+ pagination: {
491
+ pageSize: prev.pagination.pageSize,
492
+ pageIndex: 0
493
+ },
478
494
  error: null,
479
495
  sorting: typeof value === "function" ? value(sorting) : value,
480
496
  loading: false
@@ -681,7 +697,7 @@ const useDataTable = function (props) {
681
697
  }
682
698
  return event => {
683
699
  const target = event.target;
684
- if ("closest" in target && !target.closest("a[href],button,input,select,textarea,[role=button]")) {
700
+ if ("closest" in target && !target.closest("a[href],button,input,select,textarea,[role=button],[data-row-click=off]")) {
685
701
  onRowClick(data);
686
702
  }
687
703
  };
@@ -736,7 +752,6 @@ const useDataTable = function (props) {
736
752
  size,
737
753
  selected: state.selected.length
738
754
  });
739
- console.log("state.loadingTarget", state.loadingTarget);
740
755
  return {
741
756
  hash,
742
757
  data,
package/cjs/use-row-menu.js CHANGED
@@ -15,7 +15,7 @@ const useRowMenu = info => {
15
15
  trigger,
16
16
  triggerKey,
17
17
  confirmation,
18
- enabledKey
18
+ disabledKey
19
19
  } = item;
20
20
  const clickHandler = () => {
21
21
  if (typeof onClick === "function") {
@@ -37,8 +37,14 @@ const useRowMenu = info => {
37
37
  }));
38
38
  }
39
39
  };
40
+ let disabled = false;
41
+ if (disabledKey) {
42
+ disabled = data[disabledKey] === true;
43
+ } else if (triggerKey && !trigger && !onClick && data[triggerKey] == null) {
44
+ disabled = true;
45
+ }
40
46
  return {
41
- disabled: enabledKey ? data[enabledKey] === true : false,
47
+ disabled,
42
48
  onClick() {
43
49
  if (confirmation) {
44
50
  const message = app.replace(confirmation, data);
package/classes.js CHANGED
@@ -1,3 +1,5 @@
1
+ "use client";
2
+
1
3
  import { classGroup } from "@tint-ui/tools/class-group";
2
4
  import { useClasses } from "@tint-ui/theme";
3
5
  const {
package/context.js CHANGED
@@ -1,3 +1,5 @@
1
+ "use client";
2
+
1
3
  import * as React from "react";
2
4
  import { invariant } from "@tint-ui/tools/proof";
3
5
  const DataTableContext = /*#__PURE__*/React.createContext(null);
package/filter-classes.js CHANGED
@@ -1,3 +1,5 @@
1
+ "use client";
2
+
1
3
  import { classGroup } from "@tint-ui/tools/class-group";
2
4
  import { useClasses } from "@tint-ui/theme";
3
5
  const {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tint-ui/data-table",
3
- "version": "0.3.5",
3
+ "version": "0.3.7",
4
4
  "author": "phragon@websoftlab.com",
5
5
  "license": "MIT",
6
6
  "dependencies": {
package/pagination-classes.js CHANGED
@@ -1,3 +1,5 @@
1
+ "use client";
2
+
1
3
  import { classGroup } from "@tint-ui/tools/class-group";
2
4
  import { useClasses } from "@tint-ui/theme";
3
5
  const {
package/row-button-menu.js CHANGED
@@ -14,7 +14,8 @@ const rowButtonMenu = (info, menu) => {
14
14
  } = useDataTableContext();
15
15
  const rowHandler = useRowMenu(info);
16
16
  return /*#__PURE__*/React.createElement("div", {
17
- className: classes.menuGroup
17
+ className: classes.menuGroup,
18
+ "data-row-click": "off"
18
19
  }, menu.map(item => {
19
20
  const {
20
21
  icon,
package/toolbar-classes.js CHANGED
@@ -1,3 +1,5 @@
1
+ "use client";
2
+
1
3
  import { classGroup } from "@tint-ui/tools/class-group";
2
4
  import { useClasses } from "@tint-ui/theme";
3
5
  const {
package/types.d.ts CHANGED
@@ -17,7 +17,7 @@ interface OptionTrigger<TData> {
17
17
  id: string;
18
18
  trigger?: TriggerProp;
19
19
  label: string;
20
- enabledKey?: keyof TData | string;
20
+ disabledKey?: keyof TData | string;
21
21
  icon?: string;
22
22
  destructive?: boolean;
23
23
  confirmation?: string | null;
package/use-data-table.js CHANGED
@@ -383,6 +383,10 @@ const useDataTable = function (props) {
383
383
  }
384
384
  const state = {
385
385
  ...prev,
386
+ pagination: {
387
+ pageSize: prev.pagination.pageSize,
388
+ pageIndex: 0
389
+ },
386
390
  columnFilters: [],
387
391
  globalFilter: ""
388
392
  };
@@ -426,6 +430,10 @@ const useDataTable = function (props) {
426
430
  }
427
431
  const state = {
428
432
  ...rest,
433
+ pagination: {
434
+ pageSize: prev.pagination.pageSize,
435
+ pageIndex: 0
436
+ },
429
437
  globalFilter: value == null ? "" : String(value)
430
438
  };
431
439
  if (force(state, true, "filter-text")) {
@@ -452,6 +460,10 @@ const useDataTable = function (props) {
452
460
  }) => Array.isArray(value) ? value.length > 0 : value != null && value !== "");
453
461
  const state = {
454
462
  ...rest,
463
+ pagination: {
464
+ pageSize: prev.pagination.pageSize,
465
+ pageIndex: 0
466
+ },
455
467
  columnFilters: value
456
468
  };
457
469
  if (force(state)) {
@@ -472,6 +484,10 @@ const useDataTable = function (props) {
472
484
  } = prev;
473
485
  const state = {
474
486
  ...rest,
487
+ pagination: {
488
+ pageSize: prev.pagination.pageSize,
489
+ pageIndex: 0
490
+ },
475
491
  error: null,
476
492
  sorting: typeof value === "function" ? value(sorting) : value,
477
493
  loading: false
@@ -679,7 +695,7 @@ const useDataTable = function (props) {
679
695
  }
680
696
  return event => {
681
697
  const target = event.target;
682
- if ("closest" in target && !target.closest("a[href],button,input,select,textarea,[role=button]")) {
698
+ if ("closest" in target && !target.closest("a[href],button,input,select,textarea,[role=button],[data-row-click=off]")) {
683
699
  onRowClick(data);
684
700
  }
685
701
  };
@@ -734,7 +750,6 @@ const useDataTable = function (props) {
734
750
  size,
735
751
  selected: state.selected.length
736
752
  });
737
- console.log("state.loadingTarget", state.loadingTarget);
738
753
  return {
739
754
  hash,
740
755
  data,
package/use-row-menu.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import type { CellContext } from "@tanstack/react-table";
2
2
  import type { RowMenuOption } from "./types";
3
- declare const useRowMenu: <TData>(info: CellContext<TData, unknown>) => (item: Pick<RowMenuOption<TData>, "onClick" | "trigger" | "confirmation" | "enabledKey" | "triggerKey">) => {
3
+ declare const useRowMenu: <TData>(info: CellContext<TData, unknown>) => (item: Pick<RowMenuOption<TData>, "onClick" | "trigger" | "confirmation" | "disabledKey" | "triggerKey">) => {
4
4
  disabled: boolean;
5
5
  onClick(): void;
6
6
  };
package/use-row-menu.js CHANGED
@@ -12,7 +12,7 @@ const useRowMenu = info => {
12
12
  trigger,
13
13
  triggerKey,
14
14
  confirmation,
15
- enabledKey
15
+ disabledKey
16
16
  } = item;
17
17
  const clickHandler = () => {
18
18
  if (typeof onClick === "function") {
@@ -35,8 +35,14 @@ const useRowMenu = info => {
35
35
  });
36
36
  }
37
37
  };
38
+ let disabled = false;
39
+ if (disabledKey) {
40
+ disabled = data[disabledKey] === true;
41
+ } else if (triggerKey && !trigger && !onClick && data[triggerKey] == null) {
42
+ disabled = true;
43
+ }
38
44
  return {
39
- disabled: enabledKey ? data[enabledKey] === true : false,
45
+ disabled,
40
46
  onClick() {
41
47
  if (confirmation) {
42
48
  const message = app.replace(confirmation, data);