@economic/taco 1.19.1 → 1.20.0
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/components/AlertDialog/components/Content.d.ts +1 -1
- package/dist/components/Calendar/Calendar.d.ts +1 -1
- package/dist/components/Calendar/Calendar.stories.d.ts +1 -1
- package/dist/components/Datepicker/Datepicker.d.ts +1 -1
- package/dist/components/Datepicker/Datepicker.stories.d.ts +1 -1
- package/dist/components/Dialog/components/Content.d.ts +1 -1
- package/dist/components/Dialog/components/Drawer.d.ts +1 -1
- package/dist/components/IconButton/IconButton.d.ts +2 -2
- package/dist/components/Input/Input.d.ts +1 -1
- package/dist/components/Listbox/Listbox.d.ts +2 -2
- package/dist/components/Listbox/Listbox.stories.d.ts +1 -1
- package/dist/components/Listbox/ScrollableList.d.ts +1 -1
- package/dist/components/Menu/components/Checkbox.d.ts +1 -1
- package/dist/components/Menu/components/Content.d.ts +1 -1
- package/dist/components/Menu/components/Item.d.ts +1 -1
- package/dist/components/Menu/components/Link.d.ts +1 -1
- package/dist/components/Menu/components/Trigger.d.ts +1 -1
- package/dist/components/Provider/Localization.d.ts +10 -0
- package/dist/components/SearchInput/SearchInput.d.ts +1 -1
- package/dist/components/SearchInput/SearchInput.stories.d.ts +1 -1
- package/dist/components/Select/Select.d.ts +1 -1
- package/dist/components/Select/Select.stories.d.ts +1 -1
- package/dist/components/Select2/components/Option.d.ts +1 -1
- package/dist/components/Select2/components/Search.d.ts +1 -1
- package/dist/components/Select2/components/Trigger.d.ts +1 -1
- package/dist/components/Shortcut/Shortcut.d.ts +5 -0
- package/dist/components/Table2/Table2.d.ts +17 -0
- package/dist/components/Table2/Table2.stories.d.ts +50 -0
- package/dist/components/Table2/components/BatchActionsMenu.d.ts +10 -0
- package/dist/components/Table2/components/ColumnSettingsButton.d.ts +7 -0
- package/dist/components/Table2/components/EditModeButton.d.ts +7 -0
- package/dist/components/Table2/components/RowDensityButton.d.ts +7 -0
- package/dist/components/Table2/components/Search.d.ts +3 -0
- package/dist/components/Table2/components/ShortcutsGuideButton.d.ts +7 -0
- package/dist/components/Table2/components/column/Base.d.ts +12 -0
- package/dist/components/Table2/components/column/Cell.d.ts +15 -0
- package/dist/components/Table2/components/column/Footer.d.ts +9 -0
- package/dist/components/Table2/components/column/Header.d.ts +11 -0
- package/dist/components/Table2/components/column/Indicator.d.ts +16 -0
- package/dist/components/Table2/components/column/ValidationError.d.ts +5 -0
- package/dist/components/Table2/components/column/utils.d.ts +2 -0
- package/dist/components/Table2/components/filters/FiltersButton.d.ts +7 -0
- package/dist/components/Table2/components/filters/components/Column.d.ts +11 -0
- package/dist/components/Table2/components/filters/components/ColumnFilter.d.ts +9 -0
- package/dist/components/Table2/components/filters/components/Comparator.d.ts +11 -0
- package/dist/components/Table2/components/filters/components/InferredControl.d.ts +10 -0
- package/dist/components/Table2/components/row/Context.d.ts +15 -0
- package/dist/components/Table2/components/row/ExpandedRow.d.ts +6 -0
- package/dist/components/Table2/components/row/Row.d.ts +7 -0
- package/dist/components/Table2/hooks/listeners/useActiveCellStateListener.d.ts +3 -0
- package/dist/components/Table2/hooks/listeners/useActiveRowStateListener.d.ts +3 -0
- package/dist/components/Table2/hooks/listeners/useColumnOffsetStateListener.d.ts +4 -0
- package/dist/components/Table2/hooks/listeners/useRowSelectionListener.d.ts +3 -0
- package/dist/components/Table2/hooks/listeners/useSettingsStateListener.d.ts +3 -0
- package/dist/components/Table2/hooks/useActiveCell.d.ts +26 -0
- package/dist/components/Table2/hooks/useActiveRow.d.ts +10 -0
- package/dist/components/Table2/hooks/useColumnDefinitions.d.ts +36 -0
- package/dist/components/Table2/hooks/useEditMode.d.ts +28 -0
- package/dist/components/Table2/hooks/useGridTemplate.d.ts +2 -0
- package/dist/components/Table2/hooks/useSeparatedChildren.d.ts +1 -0
- package/dist/components/Table2/hooks/useTable.d.ts +40 -0
- package/dist/components/Table2/hooks/useVirtualiser.d.ts +23 -0
- package/dist/components/Table2/types.d.ts +138 -0
- package/dist/components/Table2/utilities/cell.d.ts +13 -0
- package/dist/components/Table2/utilities/columns.d.ts +13 -0
- package/dist/components/Table2/utilities/filterFn.d.ts +3 -0
- package/dist/components/Tag/Tag.d.ts +1 -1
- package/dist/components/Tooltip/Tooltip.d.ts +1 -1
- package/dist/components/Tooltip/Tooltip.stories.d.ts +1 -1
- package/dist/esm/index.css +1 -1
- package/dist/esm/node_modules/babel-plugin-transform-async-to-promises/helpers.mjs.js +14 -1
- package/dist/esm/node_modules/babel-plugin-transform-async-to-promises/helpers.mjs.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Checkbox/Checkbox.js +13 -5
- package/dist/esm/packages/taco/src/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Provider/Localization.js +7 -0
- package/dist/esm/packages/taco/src/components/Provider/Localization.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Shortcut/Shortcut.js +18 -0
- package/dist/esm/packages/taco/src/components/Shortcut/Shortcut.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Table2/Table2.js +374 -0
- package/dist/esm/packages/taco/src/components/Table2/Table2.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Table2/components/BatchActionsMenu.js +83 -0
- package/dist/esm/packages/taco/src/components/Table2/components/BatchActionsMenu.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Table2/components/ColumnSettingsButton.js +238 -0
- package/dist/esm/packages/taco/src/components/Table2/components/ColumnSettingsButton.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Table2/components/EditModeButton.js +58 -0
- package/dist/esm/packages/taco/src/components/Table2/components/EditModeButton.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Table2/components/RowDensityButton.js +31 -0
- package/dist/esm/packages/taco/src/components/Table2/components/RowDensityButton.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Table2/components/Search.js +55 -0
- package/dist/esm/packages/taco/src/components/Table2/components/Search.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Table2/components/ShortcutsGuideButton.js +88 -0
- package/dist/esm/packages/taco/src/components/Table2/components/ShortcutsGuideButton.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Table2/components/column/Base.js +32 -0
- package/dist/esm/packages/taco/src/components/Table2/components/column/Base.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Table2/components/column/Cell.js +498 -0
- package/dist/esm/packages/taco/src/components/Table2/components/column/Cell.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Table2/components/column/Footer.js +27 -0
- package/dist/esm/packages/taco/src/components/Table2/components/column/Footer.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Table2/components/column/Header.js +159 -0
- package/dist/esm/packages/taco/src/components/Table2/components/column/Header.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Table2/components/column/Indicator.js +78 -0
- package/dist/esm/packages/taco/src/components/Table2/components/column/Indicator.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Table2/components/column/ValidationError.js +30 -0
- package/dist/esm/packages/taco/src/components/Table2/components/column/ValidationError.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Table2/components/column/utils.js +38 -0
- package/dist/esm/packages/taco/src/components/Table2/components/column/utils.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Table2/components/filters/FiltersButton.js +89 -0
- package/dist/esm/packages/taco/src/components/Table2/components/filters/FiltersButton.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Table2/components/filters/components/Column.js +31 -0
- package/dist/esm/packages/taco/src/components/Table2/components/filters/components/Column.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Table2/components/filters/components/ColumnFilter.js +121 -0
- package/dist/esm/packages/taco/src/components/Table2/components/filters/components/ColumnFilter.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Table2/components/filters/components/Comparator.js +60 -0
- package/dist/esm/packages/taco/src/components/Table2/components/filters/components/Comparator.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Table2/components/filters/components/InferredControl.js +96 -0
- package/dist/esm/packages/taco/src/components/Table2/components/filters/components/InferredControl.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Table2/components/row/Context.js +26 -0
- package/dist/esm/packages/taco/src/components/Table2/components/row/Context.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Table2/components/row/ExpandedRow.js +33 -0
- package/dist/esm/packages/taco/src/components/Table2/components/row/ExpandedRow.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Table2/components/row/Row.js +58 -0
- package/dist/esm/packages/taco/src/components/Table2/components/row/Row.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Table2/hooks/listeners/useActiveRowStateListener.js +19 -0
- package/dist/esm/packages/taco/src/components/Table2/hooks/listeners/useActiveRowStateListener.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Table2/hooks/listeners/useColumnOffsetStateListener.js +44 -0
- package/dist/esm/packages/taco/src/components/Table2/hooks/listeners/useColumnOffsetStateListener.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Table2/hooks/listeners/useRowSelectionListener.js +17 -0
- package/dist/esm/packages/taco/src/components/Table2/hooks/listeners/useRowSelectionListener.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Table2/hooks/listeners/useSettingsStateListener.js +25 -0
- package/dist/esm/packages/taco/src/components/Table2/hooks/listeners/useSettingsStateListener.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Table2/hooks/useActiveRow.js +33 -0
- package/dist/esm/packages/taco/src/components/Table2/hooks/useActiveRow.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Table2/hooks/useColumnDefinitions.js +106 -0
- package/dist/esm/packages/taco/src/components/Table2/hooks/useColumnDefinitions.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Table2/hooks/useEditMode.js +112 -0
- package/dist/esm/packages/taco/src/components/Table2/hooks/useEditMode.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Table2/hooks/useGridTemplate.js +32 -0
- package/dist/esm/packages/taco/src/components/Table2/hooks/useGridTemplate.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Table2/hooks/useSeparatedChildren.js +20 -0
- package/dist/esm/packages/taco/src/components/Table2/hooks/useSeparatedChildren.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Table2/hooks/useTable.js +200 -0
- package/dist/esm/packages/taco/src/components/Table2/hooks/useTable.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Table2/hooks/useVirtualiser.js +49 -0
- package/dist/esm/packages/taco/src/components/Table2/hooks/useVirtualiser.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Table2/types.js +16 -0
- package/dist/esm/packages/taco/src/components/Table2/types.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Table2/utilities/cell.js +41 -0
- package/dist/esm/packages/taco/src/components/Table2/utilities/cell.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Table2/utilities/columns.js +309 -0
- package/dist/esm/packages/taco/src/components/Table2/utilities/columns.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Table2/utilities/filterFn.js +96 -0
- package/dist/esm/packages/taco/src/components/Table2/utilities/filterFn.js.map +1 -0
- package/dist/esm/packages/taco/src/hooks/useBoundaryOverflowDetection.js +16 -0
- package/dist/esm/packages/taco/src/hooks/useBoundaryOverflowDetection.js.map +1 -0
- package/dist/esm/packages/taco/src/hooks/useGlobalKeyboardShortcut.js +13 -0
- package/dist/esm/packages/taco/src/hooks/useGlobalKeyboardShortcut.js.map +1 -0
- package/dist/esm/packages/taco/src/index.js +4 -2
- package/dist/esm/packages/taco/src/index.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Sortable/components/Container.js +59 -0
- package/dist/esm/packages/taco/src/primitives/Sortable/components/Container.js.map +1 -0
- package/dist/esm/packages/taco/src/primitives/Sortable/components/Item.js +47 -0
- package/dist/esm/packages/taco/src/primitives/Sortable/components/Item.js.map +1 -0
- package/dist/esm/packages/taco/src/primitives/Sortable/components/List.js +28 -0
- package/dist/esm/packages/taco/src/primitives/Sortable/components/List.js.map +1 -0
- package/dist/esm/packages/taco/src/utils/date.js +4 -1
- package/dist/esm/packages/taco/src/utils/date.js.map +1 -1
- package/dist/esm/packages/taco/src/utils/dom.js +2 -1
- package/dist/esm/packages/taco/src/utils/dom.js.map +1 -1
- package/dist/esm/packages/taco/src/utils/hooks/useTruncated.js +20 -0
- package/dist/esm/packages/taco/src/utils/hooks/useTruncated.js.map +1 -0
- package/dist/hooks/useGlobalKeyboardShortcut.d.ts +1 -0
- package/dist/index.css +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/primitives/Sortable/Sortable.d.ts +2 -2
- package/dist/taco.cjs.development.js +3438 -90
- package/dist/taco.cjs.development.js.map +1 -1
- package/dist/taco.cjs.production.min.js +1 -1
- package/dist/taco.cjs.production.min.js.map +1 -1
- package/dist/utils/date.d.ts +1 -0
- package/dist/utils/hooks/useTruncated.d.ts +3 -0
- package/package.json +4 -2
- package/tailwind.config.js +11 -1
- package/types.json +1291 -2
@@ -0,0 +1,238 @@
|
|
1
|
+
import React__default from 'react';
|
2
|
+
import { Icon } from '../../Icon/Icon.js';
|
3
|
+
import { IconButton } from '../../IconButton/IconButton.js';
|
4
|
+
import { Checkbox } from '../../Checkbox/Checkbox.js';
|
5
|
+
import { Input } from '../../Input/Input.js';
|
6
|
+
import { Popover } from '../../Popover/Popover.js';
|
7
|
+
import { isInternalColumn, COLUMN_ID_FOR_SELECTION, COLUMN_ID_FOR_EXPANSION } from '../utilities/columns.js';
|
8
|
+
import { Container } from '../../../primitives/Sortable/components/Container.js';
|
9
|
+
import '@dnd-kit/sortable';
|
10
|
+
import { Item } from '../../../primitives/Sortable/components/Item.js';
|
11
|
+
import { List } from '../../../primitives/Sortable/components/List.js';
|
12
|
+
|
13
|
+
const OrderableColumn = /*#__PURE__*/React__default.forwardRef((props, ref) => {
|
14
|
+
var _column$columnDef$hea;
|
15
|
+
const {
|
16
|
+
canBeReordered,
|
17
|
+
column,
|
18
|
+
isReorderingAllowed,
|
19
|
+
...attributes
|
20
|
+
} = props;
|
21
|
+
let icon;
|
22
|
+
if (canBeReordered) {
|
23
|
+
icon = /*#__PURE__*/React__default.createElement(Icon, {
|
24
|
+
name: "drag",
|
25
|
+
className: "text-grey-500 hover:text-grey-700 mr-0.5 -ml-2 -mt-px cursor-move"
|
26
|
+
});
|
27
|
+
} else if (isReorderingAllowed) {
|
28
|
+
icon = /*#__PURE__*/React__default.createElement("span", {
|
29
|
+
className: "mr-0.5 inline-flex w-4"
|
30
|
+
});
|
31
|
+
}
|
32
|
+
return /*#__PURE__*/React__default.createElement("div", Object.assign({}, attributes, {
|
33
|
+
className: "hover:bg-grey-100 aria-pressed:bg-grey-200 flex w-full items-center justify-between gap-x-2 rounded py-1 px-2 aria-pressed:z-10",
|
34
|
+
ref: ref
|
35
|
+
}), /*#__PURE__*/React__default.createElement("span", {
|
36
|
+
className: "pointer-events-none"
|
37
|
+
}, icon, (_column$columnDef$hea = column.columnDef.header) !== null && _column$columnDef$hea !== void 0 ? _column$columnDef$hea : column.columnDef.id), column.getCanHide() ? /*#__PURE__*/React__default.createElement(Checkbox, {
|
38
|
+
checked: column.getIsVisible(),
|
39
|
+
onChange: column.toggleVisibility
|
40
|
+
}) : null);
|
41
|
+
});
|
42
|
+
const isOrderingAllowed = (table, column) => {
|
43
|
+
var _column$columnDef$met;
|
44
|
+
const meta = table.options.meta;
|
45
|
+
if (table.options.enablePinning) {
|
46
|
+
return true;
|
47
|
+
}
|
48
|
+
return meta.enableColumnReordering ? !((_column$columnDef$met = column.columnDef.meta) !== null && _column$columnDef$met !== void 0 && _column$columnDef$met.disableReordering) : false;
|
49
|
+
};
|
50
|
+
const SortableColumnContainer = ({
|
51
|
+
state,
|
52
|
+
moveColumn,
|
53
|
+
reorderColumn,
|
54
|
+
table
|
55
|
+
}) => {
|
56
|
+
var _ref;
|
57
|
+
const meta = table.options.meta;
|
58
|
+
const reorder = (activeId, overId, listId) => {
|
59
|
+
const draggedColumn = state[listId].find(c => c.id === activeId);
|
60
|
+
const targetColumn = state[listId].find(c => c.id === overId);
|
61
|
+
if (draggedColumn && targetColumn) {
|
62
|
+
reorderColumn(draggedColumn.id, targetColumn.id, listId === 'pinned');
|
63
|
+
}
|
64
|
+
};
|
65
|
+
const move = (activeId, oldListId) => {
|
66
|
+
const column = state[oldListId].find(c => c.id === activeId);
|
67
|
+
if (column) {
|
68
|
+
moveColumn(column);
|
69
|
+
}
|
70
|
+
};
|
71
|
+
const isReorderingAllowed = (_ref = meta.enableColumnReordering || table.options.enablePinning) !== null && _ref !== void 0 ? _ref : false;
|
72
|
+
if (!table.options.enablePinning) {
|
73
|
+
return /*#__PURE__*/React__default.createElement(Container, {
|
74
|
+
reorder: reorder,
|
75
|
+
move: move
|
76
|
+
}, /*#__PURE__*/React__default.createElement(List, {
|
77
|
+
id: "other",
|
78
|
+
className: "flex min-h-[theme(spacing.8)] flex-col gap-y-px px-2"
|
79
|
+
}, state.other.map(column => {
|
80
|
+
var _column$columnDef$met2;
|
81
|
+
const canBeReordered = isOrderingAllowed(table, column);
|
82
|
+
return /*#__PURE__*/React__default.createElement(Item, {
|
83
|
+
key: column.id,
|
84
|
+
disabled: (_column$columnDef$met2 = column.columnDef.meta) === null || _column$columnDef$met2 === void 0 ? void 0 : _column$columnDef$met2.disableReordering,
|
85
|
+
id: column.id,
|
86
|
+
asChild: true
|
87
|
+
}, /*#__PURE__*/React__default.createElement(OrderableColumn, {
|
88
|
+
canBeReordered: canBeReordered,
|
89
|
+
column: column,
|
90
|
+
isReorderingAllowed: isReorderingAllowed,
|
91
|
+
onDoubleClick: event => {
|
92
|
+
event.stopPropagation();
|
93
|
+
move(column.id, 'other');
|
94
|
+
}
|
95
|
+
}));
|
96
|
+
})));
|
97
|
+
}
|
98
|
+
return /*#__PURE__*/React__default.createElement(Container, {
|
99
|
+
reorder: reorder,
|
100
|
+
move: move
|
101
|
+
}, /*#__PURE__*/React__default.createElement("h5", {
|
102
|
+
className: "mx-4"
|
103
|
+
}, "Pinned columns"), /*#__PURE__*/React__default.createElement(List, {
|
104
|
+
id: "pinned",
|
105
|
+
className: "flex min-h-[theme(spacing.8)] flex-col gap-y-px px-2"
|
106
|
+
}, state.pinned.length ? state.pinned.map(column => {
|
107
|
+
var _column$columnDef$met3;
|
108
|
+
const canBeReordered = isOrderingAllowed(table, column);
|
109
|
+
return /*#__PURE__*/React__default.createElement(Item, {
|
110
|
+
key: column.id,
|
111
|
+
disabled: (_column$columnDef$met3 = column.columnDef.meta) === null || _column$columnDef$met3 === void 0 ? void 0 : _column$columnDef$met3.disableReordering,
|
112
|
+
id: column.id,
|
113
|
+
asChild: true
|
114
|
+
}, /*#__PURE__*/React__default.createElement(OrderableColumn, {
|
115
|
+
canBeReordered: canBeReordered,
|
116
|
+
column: column,
|
117
|
+
isReorderingAllowed: isReorderingAllowed,
|
118
|
+
onDoubleClick: event => {
|
119
|
+
event.stopPropagation();
|
120
|
+
move(column.id, 'pinned');
|
121
|
+
}
|
122
|
+
}));
|
123
|
+
}) : /*#__PURE__*/React__default.createElement("p", {
|
124
|
+
className: "text-grey-500 mb-0 flex h-8 items-center px-2"
|
125
|
+
}, "Drop column here to pin")), /*#__PURE__*/React__default.createElement("h5", {
|
126
|
+
className: "mx-4"
|
127
|
+
}, "Other columns"), /*#__PURE__*/React__default.createElement(List, {
|
128
|
+
id: "other",
|
129
|
+
className: "flex min-h-[theme(spacing.8)] flex-col gap-y-px px-2"
|
130
|
+
}, state.other.length ? state.other.map(column => {
|
131
|
+
var _column$columnDef$met4;
|
132
|
+
const canBeReordered = isOrderingAllowed(table, column);
|
133
|
+
return /*#__PURE__*/React__default.createElement(Item, {
|
134
|
+
key: column.id,
|
135
|
+
disabled: (_column$columnDef$met4 = column.columnDef.meta) === null || _column$columnDef$met4 === void 0 ? void 0 : _column$columnDef$met4.disableReordering,
|
136
|
+
id: column.id,
|
137
|
+
asChild: true
|
138
|
+
}, /*#__PURE__*/React__default.createElement(OrderableColumn, {
|
139
|
+
canBeReordered: canBeReordered,
|
140
|
+
column: column,
|
141
|
+
isReorderingAllowed: isReorderingAllowed,
|
142
|
+
onDoubleClick: event => {
|
143
|
+
event.stopPropagation();
|
144
|
+
move(column.id, 'other');
|
145
|
+
}
|
146
|
+
}));
|
147
|
+
}) : /*#__PURE__*/React__default.createElement("p", {
|
148
|
+
className: "text-grey-500 mb-0 flex h-8 items-center px-2"
|
149
|
+
}, "Drop column here to unpin")));
|
150
|
+
};
|
151
|
+
const reorder = (draggedColumnId, targetColumnId, list = []) => {
|
152
|
+
const nextColumnOrder = [...list];
|
153
|
+
nextColumnOrder.splice(nextColumnOrder.findIndex(c => c.id === targetColumnId), 0, nextColumnOrder.splice(nextColumnOrder.findIndex(c => c.id === draggedColumnId), 1)[0]);
|
154
|
+
return nextColumnOrder;
|
155
|
+
};
|
156
|
+
const ColumnSettingsButton = ({
|
157
|
+
table
|
158
|
+
}) => {
|
159
|
+
const [query, setQuery] = React__default.useState('');
|
160
|
+
const columns = table.getAllLeafColumns().filter(column => !isInternalColumn(column.id));
|
161
|
+
const [state, setState] = React__default.useState({
|
162
|
+
pinned: columns.filter(column => column.getIsPinned()),
|
163
|
+
other: columns.filter(column => !column.getIsPinned())
|
164
|
+
});
|
165
|
+
const pinColumn = column => {
|
166
|
+
if (state.pinned.find(c => c.id === column.id)) {
|
167
|
+
setState(currentState => ({
|
168
|
+
pinned: currentState.pinned.filter(c => c.id !== column.id),
|
169
|
+
other: [column].concat(...currentState.other)
|
170
|
+
}));
|
171
|
+
} else {
|
172
|
+
setState(currentState => ({
|
173
|
+
pinned: currentState.pinned.concat(column),
|
174
|
+
other: currentState.other.filter(c => c.id !== column.id)
|
175
|
+
}));
|
176
|
+
}
|
177
|
+
};
|
178
|
+
const reorderColumn = (draggedColumnId, targetColumnId, pinned) => {
|
179
|
+
if (pinned) {
|
180
|
+
setState(currentState => ({
|
181
|
+
...currentState,
|
182
|
+
pinned: reorder(draggedColumnId, targetColumnId, currentState.pinned)
|
183
|
+
}));
|
184
|
+
} else {
|
185
|
+
setState(currentState => ({
|
186
|
+
...currentState,
|
187
|
+
other: reorder(draggedColumnId, targetColumnId, currentState.other)
|
188
|
+
}));
|
189
|
+
}
|
190
|
+
};
|
191
|
+
// probably a more elegant way to do this without local state but had
|
192
|
+
// a range of issues using the native apis directly
|
193
|
+
React__default.useEffect(() => {
|
194
|
+
const internals = [];
|
195
|
+
if (table.options.enableRowSelection) {
|
196
|
+
internals.push(COLUMN_ID_FOR_SELECTION);
|
197
|
+
}
|
198
|
+
if (table.options.enableExpanding) {
|
199
|
+
internals.push(COLUMN_ID_FOR_EXPANSION);
|
200
|
+
}
|
201
|
+
table.setColumnPinning({
|
202
|
+
left: internals.concat(...state.pinned.map(c => c.id))
|
203
|
+
});
|
204
|
+
table.setColumnOrder(internals.concat([...state.pinned, ...state.other].map(c => c.id)));
|
205
|
+
}, [state]);
|
206
|
+
return /*#__PURE__*/React__default.createElement(IconButton, {
|
207
|
+
"aria-label": "Change column settings",
|
208
|
+
icon: "columns",
|
209
|
+
popover: popoverProps => /*#__PURE__*/React__default.createElement(Popover, Object.assign({}, popoverProps), /*#__PURE__*/React__default.createElement(Popover.Content, {
|
210
|
+
align: "end"
|
211
|
+
}, /*#__PURE__*/React__default.createElement("div", {
|
212
|
+
className: "flex w-60 flex-col gap-2"
|
213
|
+
}, /*#__PURE__*/React__default.createElement(Input, {
|
214
|
+
onChange: event => setQuery(event.target.value),
|
215
|
+
placeholder: "Search column...",
|
216
|
+
value: query
|
217
|
+
}), /*#__PURE__*/React__default.createElement("div", {
|
218
|
+
className: "-ml-4 -mb-2 max-h-64 w-[calc(100%_+_theme(spacing.8))] overflow-auto"
|
219
|
+
}, query ? columns.filter(column => {
|
220
|
+
var _column$columnDef$hea2;
|
221
|
+
return (_column$columnDef$hea2 = column.columnDef.header) === null || _column$columnDef$hea2 === void 0 ? void 0 : _column$columnDef$hea2.toString().includes(query);
|
222
|
+
}).map(column => /*#__PURE__*/React__default.createElement(OrderableColumn, {
|
223
|
+
key: column.id,
|
224
|
+
canBeReordered: false,
|
225
|
+
column: column,
|
226
|
+
isReorderingAllowed: false
|
227
|
+
})) : /*#__PURE__*/React__default.createElement(SortableColumnContainer, {
|
228
|
+
state: state,
|
229
|
+
moveColumn: pinColumn,
|
230
|
+
reorderColumn: reorderColumn,
|
231
|
+
table: table
|
232
|
+
}))))),
|
233
|
+
tooltip: "Column settings"
|
234
|
+
});
|
235
|
+
};
|
236
|
+
|
237
|
+
export { ColumnSettingsButton };
|
238
|
+
//# sourceMappingURL=ColumnSettingsButton.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"ColumnSettingsButton.js","sources":["../../../../../../../../src/components/Table2/components/ColumnSettingsButton.tsx"],"sourcesContent":["import React from 'react';\nimport { Column as RTColumn, Table as RTTable, TableMeta } from '@tanstack/react-table';\nimport { Checkbox } from '../../Checkbox/Checkbox';\nimport { Icon } from '../../Icon/Icon';\nimport { Input } from '../../Input/Input';\nimport { IconButton } from '../../IconButton/IconButton';\nimport { Popover } from '../../Popover/Popover';\nimport * as Sortable from '../../../primitives/Sortable/Sortable';\nimport { COLUMN_ID_FOR_EXPANSION, COLUMN_ID_FOR_SELECTION, isInternalColumn } from '../utilities/columns';\nimport { SortableItemId } from '../../../primitives/Sortable/Sortable';\n\ntype OrderableColumnProps = React.HTMLAttributes<HTMLDivElement> & {\n canBeReordered: boolean;\n column: RTColumn<any, any>;\n isReorderingAllowed: boolean;\n};\n\nconst OrderableColumn = React.forwardRef<HTMLDivElement, OrderableColumnProps>((props, ref) => {\n const { canBeReordered, column, isReorderingAllowed, ...attributes } = props;\n\n let icon;\n\n if (canBeReordered) {\n icon = <Icon name=\"drag\" className=\"text-grey-500 hover:text-grey-700 mr-0.5 -ml-2 -mt-px cursor-move\" />;\n } else if (isReorderingAllowed) {\n icon = <span className=\"mr-0.5 inline-flex w-4\" />;\n }\n\n return (\n <div\n {...attributes}\n className=\"hover:bg-grey-100 aria-pressed:bg-grey-200 flex w-full items-center justify-between gap-x-2 rounded py-1 px-2 aria-pressed:z-10\"\n ref={ref}>\n <span className=\"pointer-events-none\">\n {icon}\n {column.columnDef.header ?? column.columnDef.id}\n </span>\n {column.getCanHide() ? <Checkbox checked={column.getIsVisible()} onChange={column.toggleVisibility} /> : null}\n </div>\n );\n});\n\nconst isOrderingAllowed = (table, column) => {\n const meta = table.options.meta as TableMeta<any>;\n\n if (table.options.enablePinning) {\n return true;\n }\n\n return meta.enableColumnReordering ? !column.columnDef.meta?.disableReordering : false;\n};\n\ntype SortableColumnContainerProps = {\n state: PinnedState;\n moveColumn: (column: RTColumn<any, any>) => void;\n reorderColumn: (draggedColumnId: string, targetColumnId: string, pinned: boolean) => void;\n table: RTTable<any>;\n};\n\nconst SortableColumnContainer = ({ state, moveColumn, reorderColumn, table }: SortableColumnContainerProps) => {\n const meta = table.options.meta as TableMeta<any>;\n\n const reorder = (activeId: SortableItemId, overId: SortableItemId, listId: string) => {\n const draggedColumn: RTColumn<any, any> = state[listId].find(c => c.id === activeId);\n const targetColumn: RTColumn<any, any> = state[listId].find(c => c.id === overId);\n\n if (draggedColumn && targetColumn) {\n reorderColumn(draggedColumn.id, targetColumn.id, listId === 'pinned');\n }\n };\n\n const move = (activeId: SortableItemId, oldListId: string) => {\n const column = state[oldListId].find(c => c.id === activeId);\n\n if (column) {\n moveColumn(column);\n }\n };\n\n const isReorderingAllowed = (meta.enableColumnReordering || table.options.enablePinning) ?? false;\n\n if (!table.options.enablePinning) {\n return (\n <Sortable.Container reorder={reorder} move={move}>\n <Sortable.List id=\"other\" className=\"flex min-h-[theme(spacing.8)] flex-col gap-y-px px-2\">\n {state.other.map((column: RTColumn<any, any>) => {\n const canBeReordered = isOrderingAllowed(table, column);\n\n return (\n <Sortable.Item\n key={column.id}\n disabled={column.columnDef.meta?.disableReordering}\n id={column.id}\n asChild>\n <OrderableColumn\n canBeReordered={canBeReordered}\n column={column}\n isReorderingAllowed={isReorderingAllowed}\n onDoubleClick={event => {\n event.stopPropagation();\n move(column.id, 'other');\n }}\n />\n </Sortable.Item>\n );\n })}\n </Sortable.List>\n </Sortable.Container>\n );\n }\n\n return (\n <Sortable.Container reorder={reorder} move={move}>\n <h5 className=\"mx-4\">Pinned columns</h5>\n <Sortable.List id=\"pinned\" className=\"flex min-h-[theme(spacing.8)] flex-col gap-y-px px-2\">\n {state.pinned.length ? (\n state.pinned.map(column => {\n const canBeReordered = isOrderingAllowed(table, column);\n\n return (\n <Sortable.Item\n key={column.id}\n disabled={column.columnDef.meta?.disableReordering}\n id={column.id}\n asChild>\n <OrderableColumn\n canBeReordered={canBeReordered}\n column={column}\n isReorderingAllowed={isReorderingAllowed}\n onDoubleClick={event => {\n event.stopPropagation();\n move(column.id, 'pinned');\n }}\n />\n </Sortable.Item>\n );\n })\n ) : (\n <p className=\"text-grey-500 mb-0 flex h-8 items-center px-2\">Drop column here to pin</p>\n )}\n </Sortable.List>\n <h5 className=\"mx-4\">Other columns</h5>\n\n <Sortable.List id=\"other\" className=\"flex min-h-[theme(spacing.8)] flex-col gap-y-px px-2\">\n {state.other.length ? (\n state.other.map((column: RTColumn<any, any>) => {\n const canBeReordered = isOrderingAllowed(table, column);\n\n return (\n <Sortable.Item\n key={column.id}\n disabled={column.columnDef.meta?.disableReordering}\n id={column.id}\n asChild>\n <OrderableColumn\n canBeReordered={canBeReordered}\n column={column}\n isReorderingAllowed={isReorderingAllowed}\n onDoubleClick={event => {\n event.stopPropagation();\n move(column.id, 'other');\n }}\n />\n </Sortable.Item>\n );\n })\n ) : (\n <p className=\"text-grey-500 mb-0 flex h-8 items-center px-2\">Drop column here to unpin</p>\n )}\n </Sortable.List>\n </Sortable.Container>\n );\n};\n\nconst reorder = (draggedColumnId: string, targetColumnId: string, list: RTColumn<any>[] = []): RTColumn<any>[] => {\n const nextColumnOrder = [...list];\n nextColumnOrder.splice(\n nextColumnOrder.findIndex(c => c.id === targetColumnId),\n 0,\n nextColumnOrder.splice(\n nextColumnOrder.findIndex(c => c.id === draggedColumnId),\n 1\n )[0]\n );\n return nextColumnOrder;\n};\n\ntype PinnedState = {\n pinned: RTColumn<any>[];\n other: RTColumn<any>[];\n};\ntype ColumnSettingsButtonProps = {\n table: RTTable<any>;\n};\n\nexport const ColumnSettingsButton = ({ table }: ColumnSettingsButtonProps) => {\n const [query, setQuery] = React.useState('');\n const columns = table.getAllLeafColumns().filter(column => !isInternalColumn(column.id));\n\n const [state, setState] = React.useState<PinnedState>({\n pinned: columns.filter(column => column.getIsPinned()),\n other: columns.filter(column => !column.getIsPinned()),\n });\n\n const pinColumn = (column: RTColumn<any, any>) => {\n if (state.pinned.find(c => c.id === column.id)) {\n setState(currentState => ({\n pinned: currentState.pinned.filter(c => c.id !== column.id),\n other: [column].concat(...currentState.other),\n }));\n } else {\n setState(currentState => ({\n pinned: currentState.pinned.concat(column),\n other: currentState.other.filter(c => c.id !== column.id),\n }));\n }\n };\n\n const reorderColumn = (draggedColumnId: string, targetColumnId: string, pinned: boolean) => {\n if (pinned) {\n setState(currentState => ({\n ...currentState,\n pinned: reorder(draggedColumnId, targetColumnId, currentState.pinned),\n }));\n } else {\n setState(currentState => ({\n ...currentState,\n other: reorder(draggedColumnId, targetColumnId, currentState.other),\n }));\n }\n };\n\n // probably a more elegant way to do this without local state but had\n // a range of issues using the native apis directly\n React.useEffect(() => {\n const internals: string[] = [];\n\n if (table.options.enableRowSelection) {\n internals.push(COLUMN_ID_FOR_SELECTION);\n }\n\n if (table.options.enableExpanding) {\n internals.push(COLUMN_ID_FOR_EXPANSION);\n }\n\n table.setColumnPinning({ left: internals.concat(...state.pinned.map(c => c.id)) });\n table.setColumnOrder(internals.concat([...state.pinned, ...state.other].map(c => c.id)));\n }, [state]);\n\n return (\n <IconButton\n aria-label=\"Change column settings\"\n icon=\"columns\"\n popover={popoverProps => (\n <Popover {...popoverProps}>\n <Popover.Content align=\"end\">\n <div className=\"flex w-60 flex-col gap-2\">\n <Input\n onChange={event => setQuery(event.target.value)}\n placeholder=\"Search column...\"\n value={query}\n />\n <div className=\"-ml-4 -mb-2 max-h-64 w-[calc(100%_+_theme(spacing.8))] overflow-auto\">\n {query ? (\n columns\n .filter(column => column.columnDef.header?.toString().includes(query))\n .map(column => (\n <OrderableColumn\n key={column.id}\n canBeReordered={false}\n column={column}\n isReorderingAllowed={false}\n />\n ))\n ) : (\n <SortableColumnContainer\n state={state}\n moveColumn={pinColumn}\n reorderColumn={reorderColumn}\n table={table}\n />\n )}\n </div>\n </div>\n </Popover.Content>\n </Popover>\n )}\n tooltip=\"Column settings\"\n />\n );\n};\n"],"names":["OrderableColumn","React","forwardRef","props","ref","canBeReordered","column","isReorderingAllowed","attributes","icon","Icon","name","className","columnDef","header","id","getCanHide","Checkbox","checked","getIsVisible","onChange","toggleVisibility","isOrderingAllowed","table","meta","options","enablePinning","enableColumnReordering","disableReordering","SortableColumnContainer","state","moveColumn","reorderColumn","reorder","activeId","overId","listId","draggedColumn","find","c","targetColumn","move","oldListId","Sortable","other","map","key","disabled","asChild","onDoubleClick","event","stopPropagation","pinned","length","draggedColumnId","targetColumnId","list","nextColumnOrder","splice","findIndex","ColumnSettingsButton","query","setQuery","useState","columns","getAllLeafColumns","filter","isInternalColumn","setState","getIsPinned","pinColumn","currentState","concat","useEffect","internals","enableRowSelection","push","COLUMN_ID_FOR_SELECTION","enableExpanding","COLUMN_ID_FOR_EXPANSION","setColumnPinning","left","setColumnOrder","IconButton","popover","popoverProps","Popover","Content","align","Input","target","value","placeholder","toString","includes","tooltip"],"mappings":"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"}
|
@@ -0,0 +1,58 @@
|
|
1
|
+
import React__default from 'react';
|
2
|
+
import cn from 'classnames';
|
3
|
+
import { Icon } from '../../Icon/Icon.js';
|
4
|
+
import { Button } from '../../Button/Button.js';
|
5
|
+
import { useMergedRef } from '../../../hooks/useMergedRef.js';
|
6
|
+
import { Shortcut } from '../../Shortcut/Shortcut.js';
|
7
|
+
import { useGlobalKeyboardShortcut } from '../../../hooks/useGlobalKeyboardShortcut.js';
|
8
|
+
|
9
|
+
const EditModeButton = /*#__PURE__*/React__default.forwardRef(function EditModeButton(props, ref) {
|
10
|
+
const {
|
11
|
+
table,
|
12
|
+
tableRef
|
13
|
+
} = props;
|
14
|
+
const internalRef = useMergedRef(ref);
|
15
|
+
const meta = table.options.meta;
|
16
|
+
const {
|
17
|
+
isEditing
|
18
|
+
} = meta.editMode;
|
19
|
+
const showWarning = React__default.useCallback(event => {
|
20
|
+
if (isEditing) {
|
21
|
+
event.returnValue = true;
|
22
|
+
return true;
|
23
|
+
}
|
24
|
+
return false;
|
25
|
+
}, [isEditing]);
|
26
|
+
useGlobalKeyboardShortcut(event => {
|
27
|
+
if (event.key === 'e' && (event.ctrlKey || event.metaKey)) {
|
28
|
+
var _internalRef$current;
|
29
|
+
event.preventDefault();
|
30
|
+
(_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 ? void 0 : _internalRef$current.click();
|
31
|
+
}
|
32
|
+
});
|
33
|
+
React__default.useEffect(() => {
|
34
|
+
window.addEventListener('beforeunload', showWarning);
|
35
|
+
return () => window.removeEventListener('beforeunload', showWarning);
|
36
|
+
}, [showWarning]);
|
37
|
+
const handleClick = () => {
|
38
|
+
var _tableRef$current;
|
39
|
+
meta.editMode.toggleEditing();
|
40
|
+
(_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.focus();
|
41
|
+
};
|
42
|
+
return /*#__PURE__*/React__default.createElement(Button, {
|
43
|
+
onClick: handleClick,
|
44
|
+
className: cn({
|
45
|
+
'!wcag-blue-100': meta.editMode.isEditing
|
46
|
+
}),
|
47
|
+
ref: internalRef,
|
48
|
+
tooltip: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, "Edit", /*#__PURE__*/React__default.createElement(Shortcut, {
|
49
|
+
className: "ml-2",
|
50
|
+
keys: ['Ctrl', 'E']
|
51
|
+
}))
|
52
|
+
}, /*#__PURE__*/React__default.createElement(Icon, {
|
53
|
+
name: "edit"
|
54
|
+
}), "Edit");
|
55
|
+
});
|
56
|
+
|
57
|
+
export { EditModeButton };
|
58
|
+
//# sourceMappingURL=EditModeButton.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"EditModeButton.js","sources":["../../../../../../../../src/components/Table2/components/EditModeButton.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Table as RTTable, TableMeta } from '@tanstack/react-table';\nimport { Button } from '../../Button/Button';\nimport { Icon } from '../../Icon/Icon';\nimport { Shortcut } from '../../Shortcut/Shortcut';\nimport { useMergedRef } from '../../../hooks/useMergedRef';\nimport { useGlobalKeyboardShortcut } from '../../../hooks/useGlobalKeyboardShortcut';\n\nexport type EditModeButtonProps = {\n table: RTTable<any>;\n tableRef: React.RefObject<HTMLDivElement>;\n};\n\nexport const EditModeButton = React.forwardRef<HTMLButtonElement, EditModeButtonProps>(function EditModeButton(props, ref) {\n const { table, tableRef } = props;\n const internalRef = useMergedRef<HTMLButtonElement>(ref);\n const meta = table.options.meta as TableMeta<any>;\n const { isEditing } = meta.editMode;\n\n const showWarning = React.useCallback(\n event => {\n if (isEditing) {\n event.returnValue = true;\n return true;\n }\n\n return false;\n },\n [isEditing]\n );\n\n useGlobalKeyboardShortcut((event: KeyboardEvent) => {\n if (event.key === 'e' && (event.ctrlKey || event.metaKey)) {\n event.preventDefault();\n internalRef.current?.click();\n }\n });\n\n React.useEffect(() => {\n window.addEventListener('beforeunload', showWarning);\n\n return () => window.removeEventListener('beforeunload', showWarning);\n }, [showWarning]);\n\n const handleClick = () => {\n meta.editMode.toggleEditing();\n tableRef.current?.focus();\n };\n\n return (\n <Button\n onClick={handleClick}\n className={cn({\n '!wcag-blue-100': meta.editMode.isEditing,\n })}\n ref={internalRef}\n tooltip={\n <>\n Edit\n <Shortcut className=\"ml-2\" keys={['Ctrl', 'E']} />\n </>\n }>\n <Icon name=\"edit\" />\n Edit\n </Button>\n );\n});\n"],"names":["EditModeButton","React","forwardRef","props","ref","table","tableRef","internalRef","useMergedRef","meta","options","isEditing","editMode","showWarning","useCallback","event","returnValue","useGlobalKeyboardShortcut","key","ctrlKey","metaKey","preventDefault","current","click","useEffect","window","addEventListener","removeEventListener","handleClick","toggleEditing","focus","Button","onClick","className","cn","tooltip","Shortcut","keys","Icon","name"],"mappings":";;;;;;;;MAcaA,cAAc,gBAAGC,cAAK,CAACC,UAAU,CAAyC,SAASF,cAAc,CAACG,KAAK,EAAEC,GAAG;EACrH,MAAM;IAAEC,KAAK;IAAEC;GAAU,GAAGH,KAAK;EACjC,MAAMI,WAAW,GAAGC,YAAY,CAAoBJ,GAAG,CAAC;EACxD,MAAMK,IAAI,GAAGJ,KAAK,CAACK,OAAO,CAACD,IAAsB;EACjD,MAAM;IAAEE;GAAW,GAAGF,IAAI,CAACG,QAAQ;EAEnC,MAAMC,WAAW,GAAGZ,cAAK,CAACa,WAAW,CACjCC,KAAK;IACD,IAAIJ,SAAS,EAAE;MACXI,KAAK,CAACC,WAAW,GAAG,IAAI;MACxB,OAAO,IAAI;;IAGf,OAAO,KAAK;GACf,EACD,CAACL,SAAS,CAAC,CACd;EAEDM,yBAAyB,CAAEF,KAAoB;IAC3C,IAAIA,KAAK,CAACG,GAAG,KAAK,GAAG,KAAKH,KAAK,CAACI,OAAO,IAAIJ,KAAK,CAACK,OAAO,CAAC,EAAE;MAAA;MACvDL,KAAK,CAACM,cAAc,EAAE;MACtB,wBAAAd,WAAW,CAACe,OAAO,yDAAnB,qBAAqBC,KAAK,EAAE;;GAEnC,CAAC;EAEFtB,cAAK,CAACuB,SAAS,CAAC;IACZC,MAAM,CAACC,gBAAgB,CAAC,cAAc,EAAEb,WAAW,CAAC;IAEpD,OAAO,MAAMY,MAAM,CAACE,mBAAmB,CAAC,cAAc,EAAEd,WAAW,CAAC;GACvE,EAAE,CAACA,WAAW,CAAC,CAAC;EAEjB,MAAMe,WAAW,GAAG;;IAChBnB,IAAI,CAACG,QAAQ,CAACiB,aAAa,EAAE;IAC7B,qBAAAvB,QAAQ,CAACgB,OAAO,sDAAhB,kBAAkBQ,KAAK,EAAE;GAC5B;EAED,oBACI7B,6BAAC8B,MAAM;IACHC,OAAO,EAAEJ,WAAW;IACpBK,SAAS,EAAEC,EAAE,CAAC;MACV,gBAAgB,EAAEzB,IAAI,CAACG,QAAQ,CAACD;KACnC,CAAC;IACFP,GAAG,EAAEG,WAAW;IAChB4B,OAAO,eACHlC,iFAEIA,6BAACmC,QAAQ;MAACH,SAAS,EAAC,MAAM;MAACI,IAAI,EAAE,CAAC,MAAM,EAAE,GAAG;MAAK;kBAG1DpC,6BAACqC,IAAI;IAACC,IAAI,EAAC;IAAS,SAEf;AAEjB,CAAC;;;;"}
|
@@ -0,0 +1,31 @@
|
|
1
|
+
import React__default from 'react';
|
2
|
+
import { IconButton } from '../../IconButton/IconButton.js';
|
3
|
+
import { Menu } from '../../Menu/Menu.js';
|
4
|
+
|
5
|
+
const RowDensityButton = ({
|
6
|
+
table
|
7
|
+
}) => {
|
8
|
+
const meta = table.options.meta;
|
9
|
+
return /*#__PURE__*/React__default.createElement(IconButton, {
|
10
|
+
"aria-label": "Change row density",
|
11
|
+
icon: `density-${meta.rowDensity}`,
|
12
|
+
menu: menuProps => /*#__PURE__*/React__default.createElement(Menu, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu.Content, {
|
13
|
+
align: "end"
|
14
|
+
}, /*#__PURE__*/React__default.createElement(Menu.RadioGroup, {
|
15
|
+
onChange: rowDensity => meta.setRowDensity(rowDensity),
|
16
|
+
value: meta.rowDensity
|
17
|
+
}, /*#__PURE__*/React__default.createElement(Menu.RadioGroup.Item, {
|
18
|
+
value: "compact"
|
19
|
+
}, "Compact"), /*#__PURE__*/React__default.createElement(Menu.RadioGroup.Item, {
|
20
|
+
value: "normal"
|
21
|
+
}, "Normal"), /*#__PURE__*/React__default.createElement(Menu.RadioGroup.Item, {
|
22
|
+
value: "comfortable"
|
23
|
+
}, "Comfortable"), /*#__PURE__*/React__default.createElement(Menu.RadioGroup.Item, {
|
24
|
+
value: "spacious"
|
25
|
+
}, "Spacious")))),
|
26
|
+
tooltip: "Row density"
|
27
|
+
});
|
28
|
+
};
|
29
|
+
|
30
|
+
export { RowDensityButton };
|
31
|
+
//# sourceMappingURL=RowDensityButton.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"RowDensityButton.js","sources":["../../../../../../../../src/components/Table2/components/RowDensityButton.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as RTTable, TableMeta } from '@tanstack/react-table';\nimport { IconName } from '../../Icon/Icon';\nimport { IconButton } from '../../IconButton/IconButton';\nimport { Menu } from '../../Menu/Menu';\nimport { RowDensity } from '../types';\n\ntype RowDensityButtonProps = {\n table: RTTable<any>;\n};\n\nexport const RowDensityButton = ({ table }: RowDensityButtonProps) => {\n const meta = table.options.meta as TableMeta<any>;\n return (\n <IconButton\n aria-label=\"Change row density\"\n icon={`density-${meta.rowDensity}` as IconName}\n menu={menuProps => (\n <Menu {...menuProps}>\n <Menu.Content align=\"end\">\n <Menu.RadioGroup\n onChange={rowDensity => meta.setRowDensity(rowDensity as RowDensity)}\n value={meta.rowDensity}>\n <Menu.RadioGroup.Item value=\"compact\">Compact</Menu.RadioGroup.Item>\n <Menu.RadioGroup.Item value=\"normal\">Normal</Menu.RadioGroup.Item>\n <Menu.RadioGroup.Item value=\"comfortable\">Comfortable</Menu.RadioGroup.Item>\n <Menu.RadioGroup.Item value=\"spacious\">Spacious</Menu.RadioGroup.Item>\n </Menu.RadioGroup>\n </Menu.Content>\n </Menu>\n )}\n tooltip=\"Row density\"\n />\n );\n};\n"],"names":["RowDensityButton","table","meta","options","React","IconButton","icon","rowDensity","menu","menuProps","Menu","Content","align","RadioGroup","onChange","setRowDensity","value","Item","tooltip"],"mappings":";;;;MAWaA,gBAAgB,GAAG,CAAC;EAAEC;CAA8B;EAC7D,MAAMC,IAAI,GAAGD,KAAK,CAACE,OAAO,CAACD,IAAsB;EACjD,oBACIE,6BAACC,UAAU;kBACI,oBAAoB;IAC/BC,IAAI,aAAaJ,IAAI,CAACK,YAAwB;IAC9CC,IAAI,EAAEC,SAAS,iBACXL,6BAACM,IAAI,oBAAKD,SAAS,gBACfL,6BAACM,IAAI,CAACC,OAAO;MAACC,KAAK,EAAC;oBAChBR,6BAACM,IAAI,CAACG,UAAU;MACZC,QAAQ,EAAEP,UAAU,IAAIL,IAAI,CAACa,aAAa,CAACR,UAAwB,CAAC;MACpES,KAAK,EAAEd,IAAI,CAACK;oBACZH,6BAACM,IAAI,CAACG,UAAU,CAACI,IAAI;MAACD,KAAK,EAAC;iBAAwC,eACpEZ,6BAACM,IAAI,CAACG,UAAU,CAACI,IAAI;MAACD,KAAK,EAAC;gBAAsC,eAClEZ,6BAACM,IAAI,CAACG,UAAU,CAACI,IAAI;MAACD,KAAK,EAAC;qBAAgD,eAC5EZ,6BAACM,IAAI,CAACG,UAAU,CAACI,IAAI;MAACD,KAAK,EAAC;kBAA0C,CACxD,CACP,CAEtB;IACDE,OAAO,EAAC;IACV;AAEV;;;;"}
|
@@ -0,0 +1,55 @@
|
|
1
|
+
import React__default from 'react';
|
2
|
+
import cn from 'classnames';
|
3
|
+
import { SearchInput } from '../../SearchInput/SearchInput.js';
|
4
|
+
import { useGlobalKeyboardShortcut } from '../../../hooks/useGlobalKeyboardShortcut.js';
|
5
|
+
|
6
|
+
const Search = props => {
|
7
|
+
const {
|
8
|
+
value,
|
9
|
+
...attributes
|
10
|
+
} = props;
|
11
|
+
const ref = React__default.useRef(null);
|
12
|
+
const handleKeyDown = event => {
|
13
|
+
if (event.key === 'Escape') {
|
14
|
+
var _props$onSearch;
|
15
|
+
(_props$onSearch = props.onSearch) === null || _props$onSearch === void 0 ? void 0 : _props$onSearch.call(props, '');
|
16
|
+
}
|
17
|
+
};
|
18
|
+
// gets called when the "clear" button is clicked
|
19
|
+
const handleInput = event => {
|
20
|
+
if (props.onInput) {
|
21
|
+
props.onInput(event);
|
22
|
+
}
|
23
|
+
if (!event.isDefaultPrevented() && !event.currentTarget.value) {
|
24
|
+
var _props$onSearch2;
|
25
|
+
(_props$onSearch2 = props.onSearch) === null || _props$onSearch2 === void 0 ? void 0 : _props$onSearch2.call(props, '');
|
26
|
+
}
|
27
|
+
};
|
28
|
+
const handleBlur = event => {
|
29
|
+
var _props$onSearch3;
|
30
|
+
const value = event.target.value;
|
31
|
+
(_props$onSearch3 = props.onSearch) === null || _props$onSearch3 === void 0 ? void 0 : _props$onSearch3.call(props, value);
|
32
|
+
};
|
33
|
+
useGlobalKeyboardShortcut(event => {
|
34
|
+
if (event.key === 'f' && (event.ctrlKey || event.metaKey)) {
|
35
|
+
if (document.activeElement !== ref.current) {
|
36
|
+
var _ref$current;
|
37
|
+
event.preventDefault();
|
38
|
+
(_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
|
39
|
+
}
|
40
|
+
}
|
41
|
+
});
|
42
|
+
const className = cn('w-48', {
|
43
|
+
'!wcag-blue-100': !!value
|
44
|
+
});
|
45
|
+
return /*#__PURE__*/React__default.createElement(SearchInput, Object.assign({}, attributes, {
|
46
|
+
className: className,
|
47
|
+
onBlur: handleBlur,
|
48
|
+
onInput: handleInput,
|
49
|
+
onKeyDown: handleKeyDown,
|
50
|
+
ref: ref
|
51
|
+
}));
|
52
|
+
};
|
53
|
+
|
54
|
+
export { Search };
|
55
|
+
//# sourceMappingURL=Search.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"Search.js","sources":["../../../../../../../../src/components/Table2/components/Search.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { SearchInput, SearchInputProps } from '../../SearchInput/SearchInput';\nimport { useGlobalKeyboardShortcut } from '../../../hooks/useGlobalKeyboardShortcut';\n\nexport const Search = (props: SearchInputProps) => {\n const { value, ...attributes } = props;\n const ref = React.useRef<HTMLInputElement>(null);\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (event.key === 'Escape') {\n props.onSearch?.('');\n }\n };\n\n // gets called when the \"clear\" button is clicked\n const handleInput = (event: React.FormEvent<HTMLInputElement>) => {\n if (props.onInput) {\n props.onInput(event);\n }\n\n if (!event.isDefaultPrevented() && !event.currentTarget.value) {\n props.onSearch?.('');\n }\n };\n\n const handleBlur = event => {\n const value = event.target.value;\n props.onSearch?.(value);\n };\n\n useGlobalKeyboardShortcut((event: KeyboardEvent) => {\n if (event.key === 'f' && (event.ctrlKey || event.metaKey)) {\n if (document.activeElement !== ref.current) {\n event.preventDefault();\n ref.current?.focus();\n }\n }\n });\n\n const className = cn('w-48', {\n '!wcag-blue-100': !!value,\n });\n\n return (\n <SearchInput\n {...attributes}\n className={className}\n onBlur={handleBlur}\n onInput={handleInput}\n onKeyDown={handleKeyDown}\n ref={ref}\n />\n );\n};\n"],"names":["Search","props","value","attributes","ref","React","useRef","handleKeyDown","event","key","onSearch","handleInput","onInput","isDefaultPrevented","currentTarget","handleBlur","target","useGlobalKeyboardShortcut","ctrlKey","metaKey","document","activeElement","current","preventDefault","focus","className","cn","SearchInput","onBlur","onKeyDown"],"mappings":";;;;;MAKaA,MAAM,GAAIC,KAAuB;EAC1C,MAAM;IAAEC,KAAK;IAAE,GAAGC;GAAY,GAAGF,KAAK;EACtC,MAAMG,GAAG,GAAGC,cAAK,CAACC,MAAM,CAAmB,IAAI,CAAC;EAEhD,MAAMC,aAAa,GAAIC,KAA4C;IAC/D,IAAIA,KAAK,CAACC,GAAG,KAAK,QAAQ,EAAE;MAAA;MACxB,mBAAAR,KAAK,CAACS,QAAQ,oDAAd,qBAAAT,KAAK,EAAY,EAAE,CAAC;;GAE3B;;EAGD,MAAMU,WAAW,GAAIH,KAAwC;IACzD,IAAIP,KAAK,CAACW,OAAO,EAAE;MACfX,KAAK,CAACW,OAAO,CAACJ,KAAK,CAAC;;IAGxB,IAAI,CAACA,KAAK,CAACK,kBAAkB,EAAE,IAAI,CAACL,KAAK,CAACM,aAAa,CAACZ,KAAK,EAAE;MAAA;MAC3D,oBAAAD,KAAK,CAACS,QAAQ,qDAAd,sBAAAT,KAAK,EAAY,EAAE,CAAC;;GAE3B;EAED,MAAMc,UAAU,GAAGP,KAAK;;IACpB,MAAMN,KAAK,GAAGM,KAAK,CAACQ,MAAM,CAACd,KAAK;IAChC,oBAAAD,KAAK,CAACS,QAAQ,qDAAd,sBAAAT,KAAK,EAAYC,KAAK,CAAC;GAC1B;EAEDe,yBAAyB,CAAET,KAAoB;IAC3C,IAAIA,KAAK,CAACC,GAAG,KAAK,GAAG,KAAKD,KAAK,CAACU,OAAO,IAAIV,KAAK,CAACW,OAAO,CAAC,EAAE;MACvD,IAAIC,QAAQ,CAACC,aAAa,KAAKjB,GAAG,CAACkB,OAAO,EAAE;QAAA;QACxCd,KAAK,CAACe,cAAc,EAAE;QACtB,gBAAAnB,GAAG,CAACkB,OAAO,iDAAX,aAAaE,KAAK,EAAE;;;GAG/B,CAAC;EAEF,MAAMC,SAAS,GAAGC,EAAE,CAAC,MAAM,EAAE;IACzB,gBAAgB,EAAE,CAAC,CAACxB;GACvB,CAAC;EAEF,oBACIG,6BAACsB,WAAW,oBACJxB,UAAU;IACdsB,SAAS,EAAEA,SAAS;IACpBG,MAAM,EAAEb,UAAU;IAClBH,OAAO,EAAED,WAAW;IACpBkB,SAAS,EAAEtB,aAAa;IACxBH,GAAG,EAAEA;KACP;AAEV;;;;"}
|
@@ -0,0 +1,88 @@
|
|
1
|
+
import React__default from 'react';
|
2
|
+
import { IconButton } from '../../IconButton/IconButton.js';
|
3
|
+
import { Popover } from '../../Popover/Popover.js';
|
4
|
+
import { Shortcut } from '../../Shortcut/Shortcut.js';
|
5
|
+
|
6
|
+
const ShortcutsGuideButton = ({
|
7
|
+
table
|
8
|
+
}) => {
|
9
|
+
const meta = table.options.meta;
|
10
|
+
const shortcuts = [];
|
11
|
+
if (table.options.enableGlobalFilter) {
|
12
|
+
shortcuts.push({
|
13
|
+
feature: 'Search',
|
14
|
+
keys: ['Ctrl', 'F']
|
15
|
+
});
|
16
|
+
}
|
17
|
+
if (table.options.enableColumnFilters) {
|
18
|
+
shortcuts.push({
|
19
|
+
feature: 'Filter',
|
20
|
+
keys: ['Ctrl', 'Shift', 'F']
|
21
|
+
});
|
22
|
+
}
|
23
|
+
shortcuts.push({
|
24
|
+
feature: 'Previous row',
|
25
|
+
keys: ['Up']
|
26
|
+
});
|
27
|
+
shortcuts.push({
|
28
|
+
feature: 'Next row',
|
29
|
+
keys: ['Down']
|
30
|
+
});
|
31
|
+
if (meta.editMode.enableEditMode) {
|
32
|
+
shortcuts.push({
|
33
|
+
feature: 'Edit cell',
|
34
|
+
keys: ['Enter']
|
35
|
+
});
|
36
|
+
shortcuts.push({
|
37
|
+
feature: 'Previous column',
|
38
|
+
keys: ['Left']
|
39
|
+
});
|
40
|
+
shortcuts.push({
|
41
|
+
feature: 'Next column',
|
42
|
+
keys: ['Right']
|
43
|
+
});
|
44
|
+
} else if (meta.onRowClick) {
|
45
|
+
shortcuts.push({
|
46
|
+
feature: 'Activate current row',
|
47
|
+
keys: ['Enter']
|
48
|
+
});
|
49
|
+
}
|
50
|
+
if (table.options.enableRowSelection) {
|
51
|
+
shortcuts.push({
|
52
|
+
feature: 'Select current row',
|
53
|
+
keys: ['Space']
|
54
|
+
});
|
55
|
+
shortcuts.push({
|
56
|
+
feature: 'Select all rows',
|
57
|
+
keys: ['Ctrl', 'A']
|
58
|
+
});
|
59
|
+
}
|
60
|
+
if (table.options.enableExpanding) {
|
61
|
+
shortcuts.push({
|
62
|
+
feature: 'Expand current row',
|
63
|
+
keys: ['Ctrl', 'Right']
|
64
|
+
});
|
65
|
+
shortcuts.push({
|
66
|
+
feature: 'Collapse current row',
|
67
|
+
keys: ['Ctrl', 'Left']
|
68
|
+
});
|
69
|
+
}
|
70
|
+
return /*#__PURE__*/React__default.createElement(IconButton, {
|
71
|
+
"aria-label": "View keyboard shortcuts",
|
72
|
+
icon: "shortcuts",
|
73
|
+
popover: popoverProps => /*#__PURE__*/React__default.createElement(Popover, Object.assign({}, popoverProps), /*#__PURE__*/React__default.createElement(Popover.Content, {
|
74
|
+
align: "end"
|
75
|
+
}, /*#__PURE__*/React__default.createElement("div", {
|
76
|
+
className: "flex flex-col gap-y-1"
|
77
|
+
}, shortcuts.map(shortcut => /*#__PURE__*/React__default.createElement("span", {
|
78
|
+
className: "flex items-center justify-between gap-x-8",
|
79
|
+
key: shortcut.feature
|
80
|
+
}, /*#__PURE__*/React__default.createElement("span", null, shortcut.feature), /*#__PURE__*/React__default.createElement(Shortcut, {
|
81
|
+
keys: shortcut.keys
|
82
|
+
})))))),
|
83
|
+
rounded: true
|
84
|
+
});
|
85
|
+
};
|
86
|
+
|
87
|
+
export { ShortcutsGuideButton };
|
88
|
+
//# sourceMappingURL=ShortcutsGuideButton.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"ShortcutsGuideButton.js","sources":["../../../../../../../../src/components/Table2/components/ShortcutsGuideButton.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as RTTable, TableMeta } from '@tanstack/react-table';\nimport { IconButton } from '../../IconButton/IconButton';\nimport { Popover } from '../../Popover/Popover';\nimport { Shortcut } from '../../Shortcut/Shortcut';\n\ntype ShortcutGuideShortcut = {\n feature: string;\n keys: string[];\n};\n\ntype ShortcutsGuideButtonProps = {\n table: RTTable<any>;\n};\n\nexport const ShortcutsGuideButton = ({ table }: ShortcutsGuideButtonProps) => {\n const meta = table.options.meta as TableMeta<any>;\n\n const shortcuts: ShortcutGuideShortcut[] = [];\n\n if (table.options.enableGlobalFilter) {\n shortcuts.push({\n feature: 'Search',\n keys: ['Ctrl', 'F'],\n });\n }\n\n if (table.options.enableColumnFilters) {\n shortcuts.push({\n feature: 'Filter',\n keys: ['Ctrl', 'Shift', 'F'],\n });\n }\n\n shortcuts.push({\n feature: 'Previous row',\n keys: ['Up'],\n });\n shortcuts.push({\n feature: 'Next row',\n keys: ['Down'],\n });\n\n if (meta.editMode.enableEditMode) {\n shortcuts.push({\n feature: 'Edit cell',\n keys: ['Enter'],\n });\n shortcuts.push({\n feature: 'Previous column',\n keys: ['Left'],\n });\n shortcuts.push({\n feature: 'Next column',\n keys: ['Right'],\n });\n } else if (meta.onRowClick) {\n shortcuts.push({\n feature: 'Activate current row',\n keys: ['Enter'],\n });\n }\n\n if (table.options.enableRowSelection) {\n shortcuts.push({\n feature: 'Select current row',\n keys: ['Space'],\n });\n shortcuts.push({\n feature: 'Select all rows',\n keys: ['Ctrl', 'A'],\n });\n }\n\n if (table.options.enableExpanding) {\n shortcuts.push({\n feature: 'Expand current row',\n keys: ['Ctrl', 'Right'],\n });\n shortcuts.push({\n feature: 'Collapse current row',\n keys: ['Ctrl', 'Left'],\n });\n }\n\n return (\n <IconButton\n aria-label=\"View keyboard shortcuts\"\n icon=\"shortcuts\"\n popover={popoverProps => (\n <Popover {...popoverProps}>\n <Popover.Content align=\"end\">\n <div className=\"flex flex-col gap-y-1\">\n {shortcuts.map(shortcut => (\n <span className=\"flex items-center justify-between gap-x-8\" key={shortcut.feature}>\n <span>{shortcut.feature}</span>\n <Shortcut keys={shortcut.keys} />\n </span>\n ))}\n </div>\n </Popover.Content>\n </Popover>\n )}\n rounded\n />\n );\n};\n"],"names":["ShortcutsGuideButton","table","meta","options","shortcuts","enableGlobalFilter","push","feature","keys","enableColumnFilters","editMode","enableEditMode","onRowClick","enableRowSelection","enableExpanding","React","IconButton","icon","popover","popoverProps","Popover","Content","align","className","map","shortcut","key","Shortcut","rounded"],"mappings":";;;;;MAeaA,oBAAoB,GAAG,CAAC;EAAEC;CAAkC;EACrE,MAAMC,IAAI,GAAGD,KAAK,CAACE,OAAO,CAACD,IAAsB;EAEjD,MAAME,SAAS,GAA4B,EAAE;EAE7C,IAAIH,KAAK,CAACE,OAAO,CAACE,kBAAkB,EAAE;IAClCD,SAAS,CAACE,IAAI,CAAC;MACXC,OAAO,EAAE,QAAQ;MACjBC,IAAI,EAAE,CAAC,MAAM,EAAE,GAAG;KACrB,CAAC;;EAGN,IAAIP,KAAK,CAACE,OAAO,CAACM,mBAAmB,EAAE;IACnCL,SAAS,CAACE,IAAI,CAAC;MACXC,OAAO,EAAE,QAAQ;MACjBC,IAAI,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,GAAG;KAC9B,CAAC;;EAGNJ,SAAS,CAACE,IAAI,CAAC;IACXC,OAAO,EAAE,cAAc;IACvBC,IAAI,EAAE,CAAC,IAAI;GACd,CAAC;EACFJ,SAAS,CAACE,IAAI,CAAC;IACXC,OAAO,EAAE,UAAU;IACnBC,IAAI,EAAE,CAAC,MAAM;GAChB,CAAC;EAEF,IAAIN,IAAI,CAACQ,QAAQ,CAACC,cAAc,EAAE;IAC9BP,SAAS,CAACE,IAAI,CAAC;MACXC,OAAO,EAAE,WAAW;MACpBC,IAAI,EAAE,CAAC,OAAO;KACjB,CAAC;IACFJ,SAAS,CAACE,IAAI,CAAC;MACXC,OAAO,EAAE,iBAAiB;MAC1BC,IAAI,EAAE,CAAC,MAAM;KAChB,CAAC;IACFJ,SAAS,CAACE,IAAI,CAAC;MACXC,OAAO,EAAE,aAAa;MACtBC,IAAI,EAAE,CAAC,OAAO;KACjB,CAAC;GACL,MAAM,IAAIN,IAAI,CAACU,UAAU,EAAE;IACxBR,SAAS,CAACE,IAAI,CAAC;MACXC,OAAO,EAAE,sBAAsB;MAC/BC,IAAI,EAAE,CAAC,OAAO;KACjB,CAAC;;EAGN,IAAIP,KAAK,CAACE,OAAO,CAACU,kBAAkB,EAAE;IAClCT,SAAS,CAACE,IAAI,CAAC;MACXC,OAAO,EAAE,oBAAoB;MAC7BC,IAAI,EAAE,CAAC,OAAO;KACjB,CAAC;IACFJ,SAAS,CAACE,IAAI,CAAC;MACXC,OAAO,EAAE,iBAAiB;MAC1BC,IAAI,EAAE,CAAC,MAAM,EAAE,GAAG;KACrB,CAAC;;EAGN,IAAIP,KAAK,CAACE,OAAO,CAACW,eAAe,EAAE;IAC/BV,SAAS,CAACE,IAAI,CAAC;MACXC,OAAO,EAAE,oBAAoB;MAC7BC,IAAI,EAAE,CAAC,MAAM,EAAE,OAAO;KACzB,CAAC;IACFJ,SAAS,CAACE,IAAI,CAAC;MACXC,OAAO,EAAE,sBAAsB;MAC/BC,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM;KACxB,CAAC;;EAGN,oBACIO,6BAACC,UAAU;kBACI,yBAAyB;IACpCC,IAAI,EAAC,WAAW;IAChBC,OAAO,EAAEC,YAAY,iBACjBJ,6BAACK,OAAO,oBAAKD,YAAY,gBACrBJ,6BAACK,OAAO,CAACC,OAAO;MAACC,KAAK,EAAC;oBACnBP;MAAKQ,SAAS,EAAC;OACVnB,SAAS,CAACoB,GAAG,CAACC,QAAQ,iBACnBV;MAAMQ,SAAS,EAAC,2CAA2C;MAACG,GAAG,EAAED,QAAQ,CAAClB;oBACtEQ,2CAAOU,QAAQ,CAAClB,OAAO,CAAQ,eAC/BQ,6BAACY,QAAQ;MAACnB,IAAI,EAAEiB,QAAQ,CAACjB;MAAQ,CAExC,CAAC,CACA,CACQ,CAEzB;IACDoB,OAAO;IACT;AAEV;;;;"}
|
@@ -0,0 +1,32 @@
|
|
1
|
+
import React__default from 'react';
|
2
|
+
import cn from 'classnames';
|
3
|
+
import { getPinnedShadowClasses, getCellAlignmentClasses } from '../../utilities/cell.js';
|
4
|
+
|
5
|
+
const ColumnBase = /*#__PURE__*/React__default.forwardRef(function Table2ColumnBase(props, ref) {
|
6
|
+
var _column$columnDef$met;
|
7
|
+
const {
|
8
|
+
column,
|
9
|
+
scrolled,
|
10
|
+
style,
|
11
|
+
table,
|
12
|
+
...attributes
|
13
|
+
} = props;
|
14
|
+
const pinned = !!column.getIsPinned();
|
15
|
+
const meta = table.options.meta;
|
16
|
+
const left = meta.columnOffsets[column.id];
|
17
|
+
const columnPinning = table.getLeftVisibleLeafColumns().map(c => c.id);
|
18
|
+
const className = cn('border-grey-300', getPinnedShadowClasses(column, columnPinning, scrolled), getCellAlignmentClasses((_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.align), {
|
19
|
+
'cursor-pointer': !!attributes.onClick
|
20
|
+
}, attributes.className);
|
21
|
+
return /*#__PURE__*/React__default.createElement("div", Object.assign({}, attributes, {
|
22
|
+
className: className,
|
23
|
+
style: {
|
24
|
+
...style,
|
25
|
+
left: pinned && Number.isInteger(left) ? left : undefined
|
26
|
+
},
|
27
|
+
ref: ref
|
28
|
+
}));
|
29
|
+
});
|
30
|
+
|
31
|
+
export { ColumnBase };
|
32
|
+
//# sourceMappingURL=Base.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"Base.js","sources":["../../../../../../../../../src/components/Table2/components/column/Base.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Column as RTColumn, Table as RTTable, TableMeta } from '@tanstack/react-table';\nimport { getCellAlignmentClasses, getPinnedShadowClasses } from '../../utilities/cell';\n\nexport type ColumnBaseProps<TType = any> = React.HTMLAttributes<HTMLDivElement> & {\n column: RTColumn<TType, any>;\n scrolled: boolean;\n table: RTTable<TType>;\n};\n\nexport const ColumnBase = React.forwardRef<HTMLDivElement, ColumnBaseProps>(function Table2ColumnBase(props, ref) {\n const { column, scrolled, style, table, ...attributes } = props;\n const pinned = !!column.getIsPinned();\n const meta = table.options.meta as TableMeta<any>;\n const left = meta.columnOffsets[column.id];\n\n const columnPinning = table.getLeftVisibleLeafColumns().map(c => c.id);\n\n const className = cn(\n 'border-grey-300',\n getPinnedShadowClasses(column, columnPinning, scrolled),\n getCellAlignmentClasses(column.columnDef.meta?.align),\n {\n 'cursor-pointer': !!attributes.onClick,\n },\n attributes.className\n );\n\n return (\n <div\n {...attributes}\n className={className}\n style={{ ...style, left: pinned && Number.isInteger(left) ? left : undefined }}\n ref={ref}\n />\n );\n});\n"],"names":["ColumnBase","React","forwardRef","Table2ColumnBase","props","ref","column","scrolled","style","table","attributes","pinned","getIsPinned","meta","options","left","columnOffsets","id","columnPinning","getLeftVisibleLeafColumns","map","c","className","cn","getPinnedShadowClasses","getCellAlignmentClasses","columnDef","align","onClick","Number","isInteger","undefined"],"mappings":";;;;MAWaA,UAAU,gBAAGC,cAAK,CAACC,UAAU,CAAkC,SAASC,gBAAgB,CAACC,KAAK,EAAEC,GAAG;;EAC5G,MAAM;IAAEC,MAAM;IAAEC,QAAQ;IAAEC,KAAK;IAAEC,KAAK;IAAE,GAAGC;GAAY,GAAGN,KAAK;EAC/D,MAAMO,MAAM,GAAG,CAAC,CAACL,MAAM,CAACM,WAAW,EAAE;EACrC,MAAMC,IAAI,GAAGJ,KAAK,CAACK,OAAO,CAACD,IAAsB;EACjD,MAAME,IAAI,GAAGF,IAAI,CAACG,aAAa,CAACV,MAAM,CAACW,EAAE,CAAC;EAE1C,MAAMC,aAAa,GAAGT,KAAK,CAACU,yBAAyB,EAAE,CAACC,GAAG,CAACC,CAAC,IAAIA,CAAC,CAACJ,EAAE,CAAC;EAEtE,MAAMK,SAAS,GAAGC,EAAE,CAChB,iBAAiB,EACjBC,sBAAsB,CAAClB,MAAM,EAAEY,aAAa,EAAEX,QAAQ,CAAC,EACvDkB,uBAAuB,0BAACnB,MAAM,CAACoB,SAAS,CAACb,IAAI,0DAArB,sBAAuBc,KAAK,CAAC,EACrD;IACI,gBAAgB,EAAE,CAAC,CAACjB,UAAU,CAACkB;GAClC,EACDlB,UAAU,CAACY,SAAS,CACvB;EAED,oBACIrB,sDACQS,UAAU;IACdY,SAAS,EAAEA,SAAS;IACpBd,KAAK,EAAE;MAAE,GAAGA,KAAK;MAAEO,IAAI,EAAEJ,MAAM,IAAIkB,MAAM,CAACC,SAAS,CAACf,IAAI,CAAC,GAAGA,IAAI,GAAGgB;KAAW;IAC9E1B,GAAG,EAAEA;KACP;AAEV,CAAC;;;;"}
|