@react-fabric/data 1.0.0-beta.1 → 1.0.0-beta.12
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.
- package/dist/cjs/checklist/CheckList.js +143 -0
- package/dist/cjs/histogram/Histogram.js +14 -5
- package/dist/cjs/hooks/useSelectableList.js +54 -0
- package/dist/cjs/index.js +2 -0
- package/dist/cjs/table/BodyCell.js +35 -3
- package/dist/cjs/table/BodyRow.js +107 -0
- package/dist/cjs/table/HeaderCell.js +4 -3
- package/dist/cjs/table/Table.js +84 -49
- package/dist/cjs/table/useVirtualTable.js +16 -2
- package/dist/cjs/tree/TreePanel.js +14 -2
- package/dist/cjs/tree/useTree.js +7 -0
- package/dist/cjs/virtual/Gallery.js +11 -4
- package/dist/cjs/virtual/List.js +11 -4
- package/dist/esm/checklist/CheckList.js +143 -0
- package/dist/esm/histogram/Histogram.js +14 -5
- package/dist/esm/hooks/useSelectableList.js +54 -0
- package/dist/esm/index.js +1 -0
- package/dist/esm/table/BodyCell.js +35 -3
- package/dist/esm/table/BodyRow.js +107 -0
- package/dist/esm/table/HeaderCell.js +4 -3
- package/dist/esm/table/Table.js +85 -50
- package/dist/esm/table/useVirtualTable.js +16 -2
- package/dist/esm/tree/TreePanel.js +15 -3
- package/dist/esm/tree/useTree.js +7 -0
- package/dist/esm/virtual/Gallery.js +11 -4
- package/dist/esm/virtual/List.js +11 -4
- package/dist/types/checklist/CheckList.d.ts +30 -0
- package/dist/types/histogram/Histogram.d.ts +3 -3
- package/dist/types/hooks/useSelectableList.d.ts +28 -0
- package/dist/types/index.d.ts +3 -0
- package/dist/types/table/AddColumn.d.ts +2 -2
- package/dist/types/table/BodyCell.d.ts +4 -3
- package/dist/types/table/BodyRow.d.ts +20 -0
- package/dist/types/table/EmptyCell.d.ts +2 -2
- package/dist/types/table/HeaderCell.d.ts +2 -2
- package/dist/types/table/Table.d.ts +1 -1
- package/dist/types/table/types.d.ts +19 -7
- package/dist/types/table/useTableColumns.d.ts +6 -6
- package/dist/types/table/useVirtualTable.d.ts +5 -1
- package/dist/types/tree/TreePanel.d.ts +1 -1
- package/dist/types/tree/types.d.ts +6 -2
- package/dist/types/tree/useTree.d.ts +1 -0
- package/dist/types/virtual/Gallery.d.ts +3 -2
- package/dist/types/virtual/List.d.ts +3 -2
- package/package.json +6 -5
- package/src/checklist/CheckList.tsx +222 -0
- package/src/histogram/Histogram.tsx +7 -2
- package/src/hooks/useSelectableList.ts +94 -0
- package/src/index.ts +3 -0
- package/src/table/AddColumn.tsx +2 -2
- package/src/table/BodyCell.tsx +30 -3
- package/src/table/BodyRow.tsx +142 -0
- package/src/table/EmptyCell.tsx +2 -2
- package/src/table/HeaderCell.tsx +4 -3
- package/src/table/Table.tsx +103 -56
- package/src/table/types.ts +23 -6
- package/src/table/useTableColumns.ts +7 -7
- package/src/table/useVirtualTable.ts +19 -5
- package/src/tree/TreePanel.tsx +12 -1
- package/src/tree/types.ts +8 -1
- package/src/tree/useTree.ts +5 -0
- package/src/virtual/Gallery.tsx +4 -1
- package/src/virtual/List.tsx +4 -1
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
|
|
4
|
+
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
|
|
5
|
+
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
6
|
+
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
7
|
+
var core = require('@react-fabric/core');
|
|
8
|
+
var utilities = require('@react-fabric/utilities');
|
|
9
|
+
var react = require('react');
|
|
10
|
+
var reactI18next = require('react-i18next');
|
|
11
|
+
var useSelectableList = require('../hooks/useSelectableList.js');
|
|
12
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
13
|
+
|
|
14
|
+
var _excluded = ["id", "allowNegative", "selected", "icon", "label", "isDisabled", "onClick", "badge"],
|
|
15
|
+
_excluded2 = ["items", "maxCount", "allowNegative", "emptyMessage", "sortItems", "selected", "nonselected", "onChange", "onClick"];
|
|
16
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
17
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
18
|
+
var CheckItem = function CheckItem(_ref) {
|
|
19
|
+
var id = _ref.id,
|
|
20
|
+
allowNegative = _ref.allowNegative,
|
|
21
|
+
selected = _ref.selected,
|
|
22
|
+
icon = _ref.icon,
|
|
23
|
+
label = _ref.label,
|
|
24
|
+
isDisabled = _ref.isDisabled,
|
|
25
|
+
_onClick = _ref.onClick,
|
|
26
|
+
badge = _ref.badge,
|
|
27
|
+
aria = _objectWithoutProperties(_ref, _excluded);
|
|
28
|
+
return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
|
|
29
|
+
role: "none",
|
|
30
|
+
className: "ax-checkList__item",
|
|
31
|
+
"data-disabled": isDisabled,
|
|
32
|
+
onClick: function onClick() {
|
|
33
|
+
return _onClick(id, false);
|
|
34
|
+
},
|
|
35
|
+
onContextMenu: function onContextMenu(e) {
|
|
36
|
+
return [allowNegative && _onClick(id, true), e.preventDefault()];
|
|
37
|
+
}
|
|
38
|
+
}, aria), {}, {
|
|
39
|
+
children: [!allowNegative && /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
|
|
40
|
+
"data-type": "checkbox",
|
|
41
|
+
className: "ax-checkList__checkbox",
|
|
42
|
+
"data-selected": selected === 1,
|
|
43
|
+
icon: selected ? core.CoreIcons.checkboxInt : core.CoreIcons.checkboxOff
|
|
44
|
+
}), allowNegative && /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
|
|
45
|
+
children: [/*#__PURE__*/jsxRuntime.jsx(core.Icon, {
|
|
46
|
+
"data-type": "multiple",
|
|
47
|
+
className: "ax-checkList__checkbox",
|
|
48
|
+
icon: selected === 1 ? core.CoreIcons.expand : selected === -1 ? core.CoreIcons.collapse : core.CoreIcons.checkboxOff,
|
|
49
|
+
"data-selected": selected
|
|
50
|
+
}), /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
51
|
+
className: "ax-checkList__checkbox",
|
|
52
|
+
children: [/*#__PURE__*/jsxRuntime.jsx(core.Icon, {
|
|
53
|
+
"data-type": "positive",
|
|
54
|
+
onClick: function onClick(e) {
|
|
55
|
+
return [(_onClick(id, false), e.stopPropagation())];
|
|
56
|
+
},
|
|
57
|
+
icon: selected === 1 ? core.CoreIcons.expandActive : core.CoreIcons.expand,
|
|
58
|
+
"data-selected": selected === 1
|
|
59
|
+
}), /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
|
|
60
|
+
"data-type": "negative",
|
|
61
|
+
onClick: function onClick(e) {
|
|
62
|
+
return [(_onClick(id, true), e.stopPropagation())];
|
|
63
|
+
},
|
|
64
|
+
icon: selected === -1 ? core.CoreIcons.collapseActive : core.CoreIcons.collapse,
|
|
65
|
+
"data-selected": selected === -1
|
|
66
|
+
})]
|
|
67
|
+
})]
|
|
68
|
+
}), /*#__PURE__*/react.isValidElement(icon) && icon, utilities.isString(icon) && /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
|
|
69
|
+
icon: icon
|
|
70
|
+
}), /*#__PURE__*/jsxRuntime.jsx("label", {
|
|
71
|
+
children: label
|
|
72
|
+
}), /*#__PURE__*/jsxRuntime.jsx(core.Badge, _objectSpread({}, badge))]
|
|
73
|
+
}));
|
|
74
|
+
};
|
|
75
|
+
var CheckList = function CheckList(_ref2) {
|
|
76
|
+
var _ref2$items = _ref2.items,
|
|
77
|
+
items = _ref2$items === void 0 ? [] : _ref2$items,
|
|
78
|
+
_ref2$maxCount = _ref2.maxCount,
|
|
79
|
+
maxCount = _ref2$maxCount === void 0 ? 0 : _ref2$maxCount,
|
|
80
|
+
allowNegative = _ref2.allowNegative,
|
|
81
|
+
emptyMessage = _ref2.emptyMessage,
|
|
82
|
+
_ref2$sortItems = _ref2.sortItems,
|
|
83
|
+
sortItems = _ref2$sortItems === void 0 ? true : _ref2$sortItems,
|
|
84
|
+
selected = _ref2.selected,
|
|
85
|
+
nonselected = _ref2.nonselected,
|
|
86
|
+
onChange = _ref2.onChange,
|
|
87
|
+
onClick = _ref2.onClick,
|
|
88
|
+
aria = _objectWithoutProperties(_ref2, _excluded2);
|
|
89
|
+
var _useTranslation = reactI18next.useTranslation("data"),
|
|
90
|
+
t = _useTranslation.t;
|
|
91
|
+
var _useSelectableList = useSelectableList.useSelectableList({
|
|
92
|
+
items: items,
|
|
93
|
+
selected: selected,
|
|
94
|
+
nonselected: nonselected,
|
|
95
|
+
onChange: onChange,
|
|
96
|
+
onClick: onClick
|
|
97
|
+
}),
|
|
98
|
+
selection = _useSelectableList.selection,
|
|
99
|
+
toggleSelection = _useSelectableList.toggleSelection;
|
|
100
|
+
var _useState = react.useState(false),
|
|
101
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
102
|
+
showMore = _useState2[0],
|
|
103
|
+
setShowMore = _useState2[1];
|
|
104
|
+
react.useEffect(function () {
|
|
105
|
+
setShowMore(false);
|
|
106
|
+
}, [items]);
|
|
107
|
+
var listItems = react.useMemo(function () {
|
|
108
|
+
return _toConsumableArray(items).sort(function (a, b) {
|
|
109
|
+
if (sortItems && selection[a.id] !== selection[b.id]) {
|
|
110
|
+
if (selection[a.id] === 1) return -1;
|
|
111
|
+
if (selection[b.id] === 1) return 1;
|
|
112
|
+
if (selection[a.id] === -1) return -1;
|
|
113
|
+
if (selection[b.id] === -1) return 1;
|
|
114
|
+
}
|
|
115
|
+
return 0;
|
|
116
|
+
}).slice(0, !showMore && maxCount > 0 ? maxCount : undefined);
|
|
117
|
+
}, [items, selection, maxCount, showMore, sortItems]);
|
|
118
|
+
return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({}, aria), {}, {
|
|
119
|
+
children: [listItems.map(function (item, index) {
|
|
120
|
+
return /*#__PURE__*/react.createElement(CheckItem, _objectSpread(_objectSpread({}, item), {}, {
|
|
121
|
+
key: index,
|
|
122
|
+
onClick: toggleSelection,
|
|
123
|
+
allowNegative: allowNegative,
|
|
124
|
+
selected: selection[item.id]
|
|
125
|
+
}));
|
|
126
|
+
}), maxCount > 0 && items.length > maxCount && /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
127
|
+
className: "ax-moreLink",
|
|
128
|
+
children: /*#__PURE__*/jsxRuntime.jsxs("span", {
|
|
129
|
+
role: "none",
|
|
130
|
+
className: "link",
|
|
131
|
+
onClick: function onClick() {
|
|
132
|
+
return setShowMore(!showMore);
|
|
133
|
+
},
|
|
134
|
+
children: ["...", t("core:action.".concat(showMore ? "less" : "more"))]
|
|
135
|
+
})
|
|
136
|
+
}), listItems.length === 0 && /*#__PURE__*/jsxRuntime.jsx(core.EmptyContent, {
|
|
137
|
+
className: "text-sm",
|
|
138
|
+
message: emptyMessage !== null && emptyMessage !== void 0 ? emptyMessage : t("checkList.empty")
|
|
139
|
+
})]
|
|
140
|
+
}));
|
|
141
|
+
};
|
|
142
|
+
|
|
143
|
+
exports.CheckList = CheckList;
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
3
4
|
var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
|
|
5
|
+
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
4
6
|
var core = require('@react-fabric/core');
|
|
5
7
|
var utilities = require('@react-fabric/utilities');
|
|
6
8
|
var classNames = require('classnames');
|
|
@@ -9,6 +11,9 @@ var reactI18next = require('react-i18next');
|
|
|
9
11
|
var Histogram_module = require('./Histogram.module.css');
|
|
10
12
|
var jsxRuntime = require('react/jsx-runtime');
|
|
11
13
|
|
|
14
|
+
var _excluded = ["items", "total", "color", "sortBy", "emptyTitle", "emptyMessage", "onClick"];
|
|
15
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
16
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
12
17
|
var emptyIcon = "M20.84 22.73L11.11 13H3V11H9.11L6.11 8H3V6H4.11L1.11 3L2.39 1.73L22.11 21.46L20.84 22.73M15 11H14.2L15 11.8V11M21 8V6H9.2L11.2 8H21M3 18H9V16H3V18Z";
|
|
13
18
|
var Histogram = function Histogram(_ref) {
|
|
14
19
|
var _ref$items = _ref.items,
|
|
@@ -20,7 +25,8 @@ var Histogram = function Histogram(_ref) {
|
|
|
20
25
|
sortBy = _ref$sortBy === void 0 ? "count" : _ref$sortBy,
|
|
21
26
|
emptyTitle = _ref.emptyTitle,
|
|
22
27
|
emptyMessage = _ref.emptyMessage,
|
|
23
|
-
_onClick = _ref.onClick
|
|
28
|
+
_onClick = _ref.onClick,
|
|
29
|
+
aria = _objectWithoutProperties(_ref, _excluded);
|
|
24
30
|
var _useTranslation = reactI18next.useTranslation("data"),
|
|
25
31
|
t = _useTranslation.t;
|
|
26
32
|
var maxTotal = react.useMemo(function () {
|
|
@@ -32,8 +38,9 @@ var Histogram = function Histogram(_ref) {
|
|
|
32
38
|
var sorted = react.useMemo(function () {
|
|
33
39
|
return items.sort(utilities.compareValues(sortBy === "label" ? "asc" : "desc", sortBy));
|
|
34
40
|
}, [items, sortBy]);
|
|
35
|
-
return /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
36
|
-
className: Histogram_module.histogram
|
|
41
|
+
return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
|
|
42
|
+
className: Histogram_module.histogram
|
|
43
|
+
}, aria), {}, {
|
|
37
44
|
style: {
|
|
38
45
|
"--color": "var(--".concat(color, ")")
|
|
39
46
|
},
|
|
@@ -45,10 +52,12 @@ var Histogram = function Histogram(_ref) {
|
|
|
45
52
|
title: emptyTitle,
|
|
46
53
|
message: emptyMessage !== null && emptyMessage !== void 0 ? emptyMessage : t("histogram.empty")
|
|
47
54
|
}), sorted === null || sorted === void 0 ? void 0 : sorted.map(function (item) {
|
|
55
|
+
var _item$total;
|
|
48
56
|
return /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
49
57
|
role: "none",
|
|
50
58
|
"data-disabled": item.count === 0 || item.disabled,
|
|
51
|
-
className: classNames("relative cursor-pointer flex flex-nowrap items-center select-none overflow-hidden min-h-6 my-px", Histogram_module.histoLabel, (item.count === 0 || item.disabled) && "pointer-events-none"),
|
|
59
|
+
className: classNames("relative cursor-pointer flex flex-nowrap items-center select-none overflow-hidden min-h-6 my-px", Histogram_module.histoLabel, (((_item$total = item.total) !== null && _item$total !== void 0 ? _item$total : item.count) === 0 || item.disabled) && "pointer-events-none"),
|
|
60
|
+
"data-testid": item.id,
|
|
52
61
|
onClick: function onClick(e) {
|
|
53
62
|
return [_onClick === null || _onClick === void 0 ? void 0 : _onClick(item.id), e.stopPropagation()];
|
|
54
63
|
},
|
|
@@ -83,7 +92,7 @@ var Histogram = function Histogram(_ref) {
|
|
|
83
92
|
})]
|
|
84
93
|
}, item.id);
|
|
85
94
|
})]
|
|
86
|
-
});
|
|
95
|
+
}));
|
|
87
96
|
};
|
|
88
97
|
|
|
89
98
|
exports.Histogram = Histogram;
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
4
|
+
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
|
|
5
|
+
var react = require('react');
|
|
6
|
+
|
|
7
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
8
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
9
|
+
var useSelectableList = function useSelectableList(_ref) {
|
|
10
|
+
var items = _ref.items,
|
|
11
|
+
selected = _ref.selected,
|
|
12
|
+
nonselected = _ref.nonselected,
|
|
13
|
+
onChange = _ref.onChange,
|
|
14
|
+
onClick = _ref.onClick;
|
|
15
|
+
var selectionRef = react.useRef({});
|
|
16
|
+
var _useState = react.useState({}),
|
|
17
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
18
|
+
selection = _useState2[0],
|
|
19
|
+
setSelection = _useState2[1];
|
|
20
|
+
var _useTransition = react.useTransition(),
|
|
21
|
+
_useTransition2 = _slicedToArray(_useTransition, 2),
|
|
22
|
+
startTransition = _useTransition2[1];
|
|
23
|
+
react.useEffect(function () {
|
|
24
|
+
selectionRef.current = items.reduce(function (ret, _ref2) {
|
|
25
|
+
var _selected$includes, _nonselected$includes;
|
|
26
|
+
var id = _ref2.id;
|
|
27
|
+
return _objectSpread(_objectSpread({}, ret), {}, _defineProperty({}, id, selected !== null && selected !== void 0 && (_selected$includes = selected.includes) !== null && _selected$includes !== void 0 && _selected$includes.call(selected, id) ? 1 : nonselected !== null && nonselected !== void 0 && (_nonselected$includes = nonselected.includes) !== null && _nonselected$includes !== void 0 && _nonselected$includes.call(nonselected, id) ? -1 : 0));
|
|
28
|
+
}, {});
|
|
29
|
+
setSelection(_objectSpread({}, selectionRef.current));
|
|
30
|
+
}, [items, selected, nonselected]);
|
|
31
|
+
var toggleSelection = react.useCallback(function (id) {
|
|
32
|
+
var isNegative = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
33
|
+
var check = isNegative ? -1 : 1;
|
|
34
|
+
if (selectionRef.current[id] !== check) selectionRef.current[id] = check;else if (selectionRef.current[id] === check) selectionRef.current[id] = 0;
|
|
35
|
+
var change = [[], []];
|
|
36
|
+
Object.entries(selectionRef.current).forEach(function (_ref3) {
|
|
37
|
+
var _ref4 = _slicedToArray(_ref3, 2),
|
|
38
|
+
id = _ref4[0],
|
|
39
|
+
select = _ref4[1];
|
|
40
|
+
return select === 1 ? change[0].push(id) : select === -1 ? change[1].push(id) : undefined;
|
|
41
|
+
});
|
|
42
|
+
setSelection(_objectSpread({}, selectionRef.current));
|
|
43
|
+
startTransition(function () {
|
|
44
|
+
onClick === null || onClick === void 0 || onClick(id, isNegative);
|
|
45
|
+
onChange === null || onChange === void 0 || onChange(change[0], change[1]);
|
|
46
|
+
});
|
|
47
|
+
}, []);
|
|
48
|
+
return {
|
|
49
|
+
selection: selection,
|
|
50
|
+
toggleSelection: toggleSelection
|
|
51
|
+
};
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
exports.useSelectableList = useSelectableList;
|
package/dist/cjs/index.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
require('./i18n/index.js');
|
|
4
|
+
var CheckList = require('./checklist/CheckList.js');
|
|
4
5
|
var Histogram = require('./histogram/Histogram.js');
|
|
5
6
|
var JsonViewer = require('./json/JsonViewer.js');
|
|
6
7
|
var Pagination = require('./pagination/Pagination.js');
|
|
@@ -13,6 +14,7 @@ var usePagination = require('./hooks/usePagination.js');
|
|
|
13
14
|
|
|
14
15
|
|
|
15
16
|
|
|
17
|
+
exports.CheckList = CheckList.CheckList;
|
|
16
18
|
exports.Histogram = Histogram.Histogram;
|
|
17
19
|
exports.JsonViewer = JsonViewer.JsonViewer;
|
|
18
20
|
exports.Pagination = Pagination.Pagination;
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
var date = require('@react-fabric/date');
|
|
4
|
+
var utilities = require('@react-fabric/utilities');
|
|
3
5
|
var classNames = require('classnames');
|
|
4
6
|
var react = require('react');
|
|
5
7
|
var Context = require('./Context.js');
|
|
@@ -30,15 +32,45 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
30
32
|
*/
|
|
31
33
|
|
|
32
34
|
var BodyCell = function BodyCell(_ref) {
|
|
33
|
-
var _column$minWidth, _column$maxWidth
|
|
35
|
+
var _column$minWidth, _column$maxWidth;
|
|
34
36
|
var column = _ref.column,
|
|
35
|
-
item = _ref.item
|
|
37
|
+
item = _ref.item,
|
|
38
|
+
index = _ref.index;
|
|
36
39
|
var _useTableContext = Context.useTableContext(),
|
|
37
40
|
widths = _useTableContext.widths;
|
|
38
41
|
var width = react.useMemo(function () {
|
|
39
42
|
var _widths$get;
|
|
40
43
|
return (_widths$get = widths.get(column.id.toString())) !== null && _widths$get !== void 0 ? _widths$get : column.width;
|
|
41
44
|
}, [widths, column]);
|
|
45
|
+
var content = react.useMemo(function () {
|
|
46
|
+
var value = utilities.getByPath(item, column.id.toString());
|
|
47
|
+
if (column.renderer != null) {
|
|
48
|
+
return column.renderer(item[column.id], item, index);
|
|
49
|
+
}
|
|
50
|
+
if (column.dataType === "boolean") {
|
|
51
|
+
var _column$valueMap;
|
|
52
|
+
var map = (_column$valueMap = column.valueMap) !== null && _column$valueMap !== void 0 ? _column$valueMap : {
|
|
53
|
+
"true": "Yes",
|
|
54
|
+
"false": "no"
|
|
55
|
+
};
|
|
56
|
+
return map["".concat(utilities.isTrue(value) ? "true" : "false")];
|
|
57
|
+
}
|
|
58
|
+
if (column.valueMap != null) {
|
|
59
|
+
if (column.dataType === "string" && value in column.valueMap) {
|
|
60
|
+
return column.valueMap[value];
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
if (column.dataType === "date") {
|
|
64
|
+
return /*#__PURE__*/jsxRuntime.jsx(date.DateDisplay, {
|
|
65
|
+
date: value,
|
|
66
|
+
format: column.format
|
|
67
|
+
});
|
|
68
|
+
}
|
|
69
|
+
if (column.dataType === "number") {
|
|
70
|
+
return utilities.Format.number(value, column.format);
|
|
71
|
+
}
|
|
72
|
+
return value !== null && value !== void 0 ? value : "";
|
|
73
|
+
}, [item, column]);
|
|
42
74
|
return /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
43
75
|
className: "overflow-hidden bg-inherit start-0",
|
|
44
76
|
style: {
|
|
@@ -48,7 +80,7 @@ var BodyCell = function BodyCell(_ref) {
|
|
|
48
80
|
},
|
|
49
81
|
children: /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
50
82
|
className: classNames("px-2 py-1 border-e truncate", column.align === "center" && "text-center", column.align === "end" && "text-end"),
|
|
51
|
-
children:
|
|
83
|
+
children: content
|
|
52
84
|
})
|
|
53
85
|
});
|
|
54
86
|
};
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var classNames = require('classnames');
|
|
4
|
+
var BodyCell = require('./BodyCell.js');
|
|
5
|
+
var CheckboxCell = require('./CheckboxCell.js');
|
|
6
|
+
var core = require('@react-fabric/core');
|
|
7
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
8
|
+
|
|
9
|
+
/*
|
|
10
|
+
* React Fabric
|
|
11
|
+
* @version: 1.0.0
|
|
12
|
+
*
|
|
13
|
+
*
|
|
14
|
+
* The MIT License (MIT)
|
|
15
|
+
* Copyright (c) 2024 Adarsh Pastakia
|
|
16
|
+
*
|
|
17
|
+
* Permission is hereby granted, free of charge, to any person obtaining a copy of this software
|
|
18
|
+
* and associated documentation files (the "Software"), to deal in the Software without restriction,
|
|
19
|
+
* including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
|
|
20
|
+
* and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
|
|
21
|
+
* subject to the following conditions:
|
|
22
|
+
*
|
|
23
|
+
* The above copyright notice and this permission notice shall be included in all copies or substantial
|
|
24
|
+
* portions of the Software.
|
|
25
|
+
*
|
|
26
|
+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
|
|
27
|
+
* TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
|
|
28
|
+
* THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
|
|
29
|
+
* TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
|
30
|
+
*/
|
|
31
|
+
|
|
32
|
+
var BodyRow = function BodyRow(_ref) {
|
|
33
|
+
var _state$start, _state$cols, _state$end;
|
|
34
|
+
var rowKey = _ref.rowKey,
|
|
35
|
+
index = _ref.index,
|
|
36
|
+
data = _ref.data,
|
|
37
|
+
keyProperty = _ref.keyProperty,
|
|
38
|
+
measureElement = _ref.measureElement,
|
|
39
|
+
state = _ref.state,
|
|
40
|
+
hideableColumns = _ref.hideableColumns,
|
|
41
|
+
wrapperStart = _ref.wrapperStart,
|
|
42
|
+
wrapperEnd = _ref.wrapperEnd,
|
|
43
|
+
onRowClick = _ref.onRowClick,
|
|
44
|
+
checkableRows = _ref.checkableRows,
|
|
45
|
+
checked = _ref.checked,
|
|
46
|
+
toggleChecked = _ref.toggleChecked,
|
|
47
|
+
canExpand = _ref.canExpand,
|
|
48
|
+
expanded = _ref.expanded,
|
|
49
|
+
toggleExpand = _ref.toggleExpand,
|
|
50
|
+
expandRow = _ref.expandRow;
|
|
51
|
+
return /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
52
|
+
ref: measureElement,
|
|
53
|
+
"data-index": index,
|
|
54
|
+
className: index % 2 ? "bg-even" : "bg-odd",
|
|
55
|
+
children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
56
|
+
role: "none",
|
|
57
|
+
"data-row": index,
|
|
58
|
+
className: classNames("flex flex-nowrap datatable-row data-[hilight]:outline-1 -outline-offset-1 outline-primary-500", onRowClick && "hover:bg-primary-50 active:bg-primary-100"),
|
|
59
|
+
onClick: function onClick() {
|
|
60
|
+
return checkableRows && keyProperty && !onRowClick ? toggleChecked(data[keyProperty]) : onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(data);
|
|
61
|
+
},
|
|
62
|
+
children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
63
|
+
className: wrapperStart,
|
|
64
|
+
children: [!!canExpand && /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
65
|
+
className: classNames("group font-medium w-6 flex flex-nowrap text-start items-center", !canExpand(data) && "pointer-events-none opacity-35"),
|
|
66
|
+
children: /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
|
|
67
|
+
className: "p-1 text-tint-700 hover:text-primary-600",
|
|
68
|
+
icon: expanded ? core.CoreIcons.collapse : core.CoreIcons.expand,
|
|
69
|
+
onClick: function onClick(e) {
|
|
70
|
+
return [keyProperty && toggleExpand(data[keyProperty]), e.stopPropagation()];
|
|
71
|
+
}
|
|
72
|
+
})
|
|
73
|
+
}), checkableRows && keyProperty && /*#__PURE__*/jsxRuntime.jsx(CheckboxCell.CheckboxCell, {
|
|
74
|
+
onClick: function onClick() {
|
|
75
|
+
return toggleChecked(data[keyProperty]);
|
|
76
|
+
},
|
|
77
|
+
state: checked
|
|
78
|
+
}), (_state$start = state.start) === null || _state$start === void 0 ? void 0 : _state$start.map(function (col, ids) {
|
|
79
|
+
return /*#__PURE__*/jsxRuntime.jsx(BodyCell.BodyCell, {
|
|
80
|
+
column: col,
|
|
81
|
+
item: data,
|
|
82
|
+
index: ids
|
|
83
|
+
}, "".concat(String(rowKey), ":").concat(ids));
|
|
84
|
+
})]
|
|
85
|
+
}), (_state$cols = state.cols) === null || _state$cols === void 0 ? void 0 : _state$cols.map(function (col, idc) {
|
|
86
|
+
return /*#__PURE__*/jsxRuntime.jsx(BodyCell.BodyCell, {
|
|
87
|
+
column: col,
|
|
88
|
+
item: data,
|
|
89
|
+
index: idc
|
|
90
|
+
}, "".concat(String(rowKey), ":").concat(idc));
|
|
91
|
+
}), /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
92
|
+
className: wrapperEnd,
|
|
93
|
+
children: [(_state$end = state.end) === null || _state$end === void 0 ? void 0 : _state$end.map(function (col, ide) {
|
|
94
|
+
return /*#__PURE__*/jsxRuntime.jsx(BodyCell.BodyCell, {
|
|
95
|
+
column: col,
|
|
96
|
+
item: data,
|
|
97
|
+
index: ide
|
|
98
|
+
}, "".concat(String(rowKey), ":").concat(ide));
|
|
99
|
+
}), hideableColumns && /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
100
|
+
className: "w-6"
|
|
101
|
+
})]
|
|
102
|
+
})]
|
|
103
|
+
}), expanded && expandRow(data)]
|
|
104
|
+
});
|
|
105
|
+
};
|
|
106
|
+
|
|
107
|
+
exports.BodyRow = BodyRow;
|
|
@@ -38,7 +38,8 @@ var HeaderCell = function HeaderCell(_ref) {
|
|
|
38
38
|
rtlFlip = _ref.rtlFlip;
|
|
39
39
|
_ref.actions;
|
|
40
40
|
_ref.locked;
|
|
41
|
-
var
|
|
41
|
+
var tooltip = _ref.tooltip,
|
|
42
|
+
sortable = _ref.sortable,
|
|
42
43
|
resizable = _ref.resizable,
|
|
43
44
|
_width = _ref.width,
|
|
44
45
|
maxWidth = _ref.maxWidth,
|
|
@@ -82,8 +83,8 @@ var HeaderCell = function HeaderCell(_ref) {
|
|
|
82
83
|
maxWidth: maxWidth !== null && maxWidth !== void 0 ? maxWidth : types.COL_MAX_WIDTH
|
|
83
84
|
},
|
|
84
85
|
children: [/*#__PURE__*/jsxRuntime.jsx(core.Tooltip, {
|
|
85
|
-
content: label,
|
|
86
|
-
disabled: !label,
|
|
86
|
+
content: tooltip !== null && tooltip !== void 0 ? tooltip : label,
|
|
87
|
+
disabled: !(tooltip !== null && tooltip !== void 0 ? tooltip : label),
|
|
87
88
|
children: /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
88
89
|
className: "flex-initial px-2 py-1 text-sm truncate sticky start-0",
|
|
89
90
|
children: [icon && /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
|