@prt-ts/fluent-react-table-v2 9.40.0-build.11.0 → 9.40.0-build.13.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/index.js +12 -12
- package/package.json +1 -1
package/index.js
CHANGED
|
@@ -3,7 +3,7 @@ import * as React from 'react';
|
|
|
3
3
|
import { useMemo } from 'react';
|
|
4
4
|
import { useDrop, useDrag, DndProvider } from 'react-dnd';
|
|
5
5
|
import { HTML5Backend } from 'react-dnd-html5-backend';
|
|
6
|
-
import { makeStaticStyles, makeStyles, shorthands, tokens, useId, Dropdown, Option, Input, Button, Divider, Popover, PopoverTrigger, PopoverSurface, MenuGroupHeader, Checkbox, RadioGroup, Radio, Field, InlineDrawer, DrawerHeader, DrawerHeaderTitle, DrawerBody, Caption1Stronger, Menu, MenuTrigger, MenuButton, MenuPopover, MenuList, MenuGroup, MenuItem, MenuDivider, mergeClasses, Skeleton, SkeletonItem, Subtitle2Stronger, MenuItemRadio, DrawerFooter } from '@fluentui/react-components';
|
|
6
|
+
import { makeStaticStyles, makeStyles, shorthands, tokens, useId, Dropdown, Option, Input, Button, Divider, Popover, PopoverTrigger, Tooltip, PopoverSurface, MenuGroupHeader, Checkbox, RadioGroup, Radio, Field, InlineDrawer, DrawerHeader, DrawerHeaderTitle, DrawerBody, Caption1Stronger, Menu, MenuTrigger, MenuButton, MenuPopover, MenuList, MenuGroup, MenuItem, MenuDivider, mergeClasses, Skeleton, SkeletonItem, Subtitle2Stronger, MenuItemRadio, DrawerFooter } from '@fluentui/react-components';
|
|
7
7
|
import { PreviousRegular, ArrowPreviousFilled, ArrowNextFilled, NextRegular, bundleIcon, SaveFilled, SaveRegular, TableSimpleCheckmarkFilled, TableSimpleCheckmarkRegular, SearchFilled, SearchRegular, FilterFilled, FilterRegular, CodeTextOff16Filled, CodeTextOff16Regular, ColumnEditFilled, ColumnEditRegular, GroupFilled, GroupRegular, ChevronRightFilled, ChevronRightRegular, ChevronDownRegular, ChevronDownFilled, DragFilled, DragRegular, Album24Regular, Search24Regular, FilterDismissFilled, Dismiss24Regular, ArrowSortDown20Filled, ArrowSortDown20Regular, ArrowSortUp20Filled, ArrowSortUp20Regular, GroupListRegular, PinRegular, TextSortAscendingFilled, TextSortDescendingFilled, GroupDismissFilled, ArrowStepInLeftRegular, ArrowStepInRightRegular, PinOffRegular, DocumentSearch24Regular, Save20Filled, ViewDesktop20Filled, ViewDesktop20Regular } from '@fluentui/react-icons';
|
|
8
8
|
import { useReactTable, getCoreRowModel, getPaginationRowModel, getSortedRowModel, getFilteredRowModel, getGroupedRowModel, getExpandedRowModel, getFacetedUniqueValues, getFacetedMinMaxValues, flexRender } from '@tanstack/react-table';
|
|
9
9
|
export { createColumnHelper } from '@tanstack/react-table';
|
|
@@ -163,21 +163,21 @@ const useGridHeaderStyles = makeStyles({
|
|
|
163
163
|
const GridHeader = (props) => {
|
|
164
164
|
const { table, gridTitle, globalFilter, setGlobalFilter } = props;
|
|
165
165
|
const styles = useGridHeaderStyles();
|
|
166
|
-
return (jsxs("div", Object.assign({ className: styles.tableTopHeaderContainer }, { children: [jsx("div", Object.assign({ className: styles.tableTopHeaderLeft }, { children: gridTitle })), jsxs("div", Object.assign({ className: styles.tableTopHeaderRight }, { children: [props.headerMenu, props.headerMenu && jsx(Divider, { vertical: true }), jsxs(Popover, Object.assign({ withArrow: true }, { children: [jsx(PopoverTrigger, Object.assign({ disableButtonEnhancement: true }, { children: jsx(Button, { icon: jsx(ToggleGroupColumnIcon, {}), "aria-label": "Toggle Group Column" }) })), jsx(PopoverSurface, { children: jsxs("div", Object.assign({ className: styles.tableTopHeaderColumnTogglePopover }, { children: [jsx(MenuGroupHeader, { children: "Group Columns" }), table.getAllLeafColumns().map((column) => {
|
|
166
|
+
return (jsxs("div", Object.assign({ className: styles.tableTopHeaderContainer }, { children: [jsx("div", Object.assign({ className: styles.tableTopHeaderLeft }, { children: gridTitle })), jsxs("div", Object.assign({ className: styles.tableTopHeaderRight }, { children: [props.headerMenu, props.headerMenu && jsx(Divider, { vertical: true }), jsxs(Popover, Object.assign({ withArrow: true }, { children: [jsx(PopoverTrigger, Object.assign({ disableButtonEnhancement: true }, { children: jsx(Tooltip, Object.assign({ content: 'Toggle Group Column', relationship: "label" }, { children: jsx(Button, { icon: jsx(ToggleGroupColumnIcon, {}), "aria-label": "Toggle Group Column" }) })) })), jsx(PopoverSurface, { children: jsxs("div", Object.assign({ className: styles.tableTopHeaderColumnTogglePopover }, { children: [jsx(MenuGroupHeader, { children: "Group Columns" }), table.getAllLeafColumns().map((column) => {
|
|
167
167
|
if (column.id === 'select')
|
|
168
168
|
return null;
|
|
169
169
|
if (column.id === 'id')
|
|
170
170
|
return null;
|
|
171
171
|
return (jsx(Checkbox, { checked: column.getIsGrouped(), onChange: column.getToggleGroupingHandler(), disabled: !column.getCanGroup() || !column.getIsVisible(), label: jsx("span", { children: column.columnDef.id }) }, column.id));
|
|
172
|
-
})] })) })] })), jsxs(Popover, Object.assign({ withArrow: true }, { children: [jsx(PopoverTrigger, Object.assign({ disableButtonEnhancement: true }, { children: jsx(Button, { icon: jsx(ToggleSelectColumnIcon, {}), "aria-label": "Toggle Column Visibility" }) })), jsx(PopoverSurface, { children: jsxs("div", Object.assign({ className: styles.tableTopHeaderColumnTogglePopover }, { children: [jsx(MenuGroupHeader, { children: "Toggle Columns" }), jsx(Checkbox, { checked: table.getIsAllColumnsVisible(), onChange: table.getToggleAllColumnsVisibilityHandler(), label: 'Toggle All' }), jsx(Divider, {}), table.getAllLeafColumns().map((column) => {
|
|
172
|
+
})] })) })] })), jsxs(Popover, Object.assign({ withArrow: true }, { children: [jsx(PopoverTrigger, Object.assign({ disableButtonEnhancement: true }, { children: jsx(Tooltip, Object.assign({ content: 'Toggle Column Visibility', relationship: "label" }, { children: jsx(Button, { icon: jsx(ToggleSelectColumnIcon, {}), "aria-label": "Toggle Column Visibility" }) })) })), jsx(PopoverSurface, { children: jsxs("div", Object.assign({ className: styles.tableTopHeaderColumnTogglePopover }, { children: [jsx(MenuGroupHeader, { children: "Toggle Columns" }), jsx(Checkbox, { checked: table.getIsAllColumnsVisible(), onChange: table.getToggleAllColumnsVisibilityHandler(), label: 'Toggle All' }), jsx(Divider, {}), table.getAllLeafColumns().map((column) => {
|
|
173
173
|
if (column.id === 'select')
|
|
174
174
|
return null;
|
|
175
175
|
return (jsx(Checkbox, { checked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler(), label: column.id, disabled: !column.getCanHide() }, column.id));
|
|
176
|
-
})] })) })] })), jsx(Button
|
|
177
|
-
// appearance="subtle"
|
|
178
|
-
, {
|
|
176
|
+
})] })) })] })), jsx(Tooltip, Object.assign({ content: 'Table Views Management', relationship: "label" }, { children: jsx(Button
|
|
179
177
|
// appearance="subtle"
|
|
180
|
-
|
|
178
|
+
, {
|
|
179
|
+
// appearance="subtle"
|
|
180
|
+
onClick: () => props.setViewsDrawerOpen((value) => !value), icon: jsx(Album24Regular, {}), "aria-label": "View Menu" }) })), jsx(DebouncedInput, { value: globalFilter !== null && globalFilter !== void 0 ? globalFilter : '', onChange: (value) => setGlobalFilter(String(value)), className: "p-2 font-lg shadow border border-block", placeholder: "Search all columns...", openFilterDrawer: props.openFilterDrawer, setFilterDrawerOpen: props.setFilterDrawerOpen })] }))] })));
|
|
181
181
|
};
|
|
182
182
|
// A debounced input react component
|
|
183
183
|
function DebouncedInput({ value: initialValue, onChange, debounce = 500, openFilterDrawer, setFilterDrawerOpen, }) {
|
|
@@ -191,9 +191,9 @@ function DebouncedInput({ value: initialValue, onChange, debounce = 500, openFil
|
|
|
191
191
|
}, debounce);
|
|
192
192
|
return () => clearTimeout(timeout);
|
|
193
193
|
}, [value, onChange, debounce]);
|
|
194
|
-
return (jsx(Input, { placeholder: "Search Keyword", value: value, onChange: (_, data) => setValue(data.value), type: "search", autoComplete: "off", contentBefore: jsx(Search24Regular, {}), style: { width: '300px' }, contentAfter: jsx(Button, { appearance: "subtle", title:
|
|
195
|
-
|
|
196
|
-
|
|
194
|
+
return (jsx(Input, { placeholder: "Search Keyword", value: value, onChange: (_, data) => setValue(data.value), type: "search", autoComplete: "off", contentBefore: jsx(Search24Regular, {}), style: { width: '300px' }, contentAfter: jsx(Tooltip, Object.assign({ content: openFilterDrawer ? 'Close Filter Window' : 'Open Advance Filter', relationship: "label" }, { children: jsx(Button, { appearance: "subtle", title: "Ad", icon: openFilterDrawer ? jsx(FilterDismissFilled, {}) : jsx(FilterFilled, {}), "aria-label": "View Menu", onClick: () => {
|
|
195
|
+
setFilterDrawerOpen((open) => !open);
|
|
196
|
+
} }) })) }));
|
|
197
197
|
}
|
|
198
198
|
|
|
199
199
|
const arrIncludesSome = (row, columnId, value) => {
|
|
@@ -1077,7 +1077,7 @@ const useFilterDrawerStyles = makeStyles({
|
|
|
1077
1077
|
} }),
|
|
1078
1078
|
});
|
|
1079
1079
|
const ViewsDrawer = (props) => {
|
|
1080
|
-
const { open, setOpen, table, tableViews, applyTableState, resetToGridDefaultView, getTableState, onTableViewSave
|
|
1080
|
+
const { open, setOpen, table, tableViews, applyTableState, resetToGridDefaultView, getTableState, onTableViewSave } = props;
|
|
1081
1081
|
const styles = useFilterDrawerStyles();
|
|
1082
1082
|
const [checkedValues, setCheckedValues] = React.useState({ font: ["calibri"] });
|
|
1083
1083
|
const onChange = (e, { name, checkedItems }) => {
|
|
@@ -1099,7 +1099,7 @@ const ViewsDrawer = (props) => {
|
|
|
1099
1099
|
justifyContent: 'space-between',
|
|
1100
1100
|
alignItems: 'center',
|
|
1101
1101
|
width: '100%',
|
|
1102
|
-
} }, { children: [jsx(MenuItemRadio, Object.assign({ name: "table-views", value: view.viewName, onClick: () => applyTableState(view.tableState), icon: jsx(ViewDesktop20Regular, {}) }, { children: view.viewName }),
|
|
1102
|
+
} }, { children: [jsx(MenuItemRadio, Object.assign({ name: "table-views", value: view.viewName, onClick: () => applyTableState(view.tableState), icon: jsx(ViewDesktop20Regular, {}) }, { children: view.viewName })), props.onTableViewDelete && (view === null || view === void 0 ? void 0 : view.isViewOwner) && (jsx(Button, { appearance: "subtle", "aria-label": "Close", icon: jsx(Dismiss24Regular, {}), onClick: () => { var _a; return (_a = props.onTableViewDelete) === null || _a === void 0 ? void 0 : _a.call(props, view); } }))] }), view.id + view.viewName));
|
|
1103
1103
|
})] }))] })), jsx(DrawerFooter, { children: jsxs(MenuList, { children: [jsx(MenuDivider, {}), jsx(MenuItem, Object.assign({ icon: jsx(ClearFilterIcon, {}), onClick: resetAllFilters }, { children: "Clear All Filters" })), jsx(MenuItem, Object.assign({ icon: jsx(ClearFilterIcon, {}), onClick: resetAllGrouping }, { children: "Clear All Grouping" })), jsx(MenuItem, Object.assign({ icon: jsx(ClearFilterIcon, {}), onClick: clearAllSelection }, { children: "Clear All Selection" }))] }) })] })));
|
|
1104
1104
|
};
|
|
1105
1105
|
|