@xanui/ui 1.1.44 → 1.1.46
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/Datatable/index.cjs +16 -19
- package/Datatable/index.cjs.map +1 -1
- package/Datatable/index.d.ts +2 -1
- package/Datatable/index.js +17 -20
- package/Datatable/index.js.map +1 -1
- package/Datatable/types.d.ts +10 -10
- package/package.json +1 -1
package/Datatable/index.cjs
CHANGED
|
@@ -48,29 +48,26 @@ const DataTable = React.forwardRef((props, ref) => {
|
|
|
48
48
|
}
|
|
49
49
|
return np;
|
|
50
50
|
}, [p.skeleton, props.columns, props.rowAction, p.hideCheckbox, p.rows]);
|
|
51
|
-
let { rows, tabs, pagination: { perpages = [30, 50, 100], total = 0 } = {},
|
|
51
|
+
let { rows, tabs, pagination: { perpages = [30, 50, 100], total = 0 } = {}, state: userState = {}, onChange, fixedHeader, hidePagination, slotProps,
|
|
52
52
|
// skip props for ViewBox
|
|
53
|
-
skeleton, rowAction, disableRow, renderRow, filters, hideCheckbox, hideSearch, columns, compact } = _props, viewBoxProps = tslib.__rest(_props, ["rows", "tabs", "pagination", "
|
|
54
|
-
const
|
|
55
|
-
selected: (
|
|
56
|
-
selectAll: (
|
|
53
|
+
skeleton, rowAction, disableRow, renderRow, filters, hideCheckbox, hideSearch, columns, compact } = _props, viewBoxProps = tslib.__rest(_props, ["rows", "tabs", "pagination", "state", "onChange", "fixedHeader", "hidePagination", "slotProps", "skeleton", "rowAction", "disableRow", "renderRow", "filters", "hideCheckbox", "hideSearch", "columns", "compact"]);
|
|
54
|
+
const state = {
|
|
55
|
+
selected: (userState === null || userState === void 0 ? void 0 : userState.selected) || [],
|
|
56
|
+
selectAll: (userState === null || userState === void 0 ? void 0 : userState.selectAll) || false,
|
|
57
57
|
pagination: {
|
|
58
|
-
page: (
|
|
58
|
+
page: (userState === null || userState === void 0 ? void 0 : userState.page) || 1,
|
|
59
59
|
perpage: perpages && perpages.length > 0 ? perpages[0] : 10,
|
|
60
|
-
from: (
|
|
61
|
-
to: (
|
|
60
|
+
from: (userState === null || userState === void 0 ? void 0 : userState.from) || 1,
|
|
61
|
+
to: (userState === null || userState === void 0 ? void 0 : userState.to) || (perpages && perpages.length > 0 ? perpages[0] : 10),
|
|
62
62
|
},
|
|
63
|
-
tab: tabs ? ((
|
|
64
|
-
search: (
|
|
65
|
-
sortable: (
|
|
66
|
-
filters: (
|
|
67
|
-
}
|
|
68
|
-
const update = (s) =>
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
onStateChange(state);
|
|
72
|
-
}
|
|
73
|
-
}, [state]);
|
|
63
|
+
tab: tabs ? ((userState === null || userState === void 0 ? void 0 : userState.tab) || tabs[0].value || tabs[0].label.toLowerCase()) : "",
|
|
64
|
+
search: (userState === null || userState === void 0 ? void 0 : userState.search) || "",
|
|
65
|
+
sortable: (userState === null || userState === void 0 ? void 0 : userState.sortable) || {},
|
|
66
|
+
filters: (userState === null || userState === void 0 ? void 0 : userState.filter) || {}
|
|
67
|
+
};
|
|
68
|
+
const update = (s) => {
|
|
69
|
+
onChange(Object.assign(Object.assign({}, state), s));
|
|
70
|
+
};
|
|
74
71
|
return (jsxRuntime.jsxs(index$1, Object.assign({ height: "100%" }, viewBoxProps, { baseClass: 'datatable', ref: ref, sx: Object.assign(Object.assign({}, viewBoxProps === null || viewBoxProps === void 0 ? void 0 : viewBoxProps.sx), { '& thead': fixedHeader ? {
|
|
75
72
|
position: "sticky",
|
|
76
73
|
top: 0,
|
package/Datatable/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../src/Datatable/index.tsx"],"sourcesContent":["\"use client\";\nimport React, {
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/Datatable/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useMemo } from 'react'\nimport ViewBox from '../ViewBox'\nimport { Tag, useInterface } from '@xanui/core';\nimport SelectedBox from './SelectedBox'\nimport TableArea from './Table'\nimport FilterBox from './FilterBox'\nimport TablePagination, { TablePaginationState } from '../TablePagination'\nimport Stack from '../Stack'\nimport { DatatableProps, DatatableState } from './types';\nimport Skeleton from '../Skeleton';\n\nexport type * from './types';\n\nconst DataTable = React.forwardRef((props: DatatableProps, ref: React.Ref<HTMLDivElement>) => {\n let [p] = useInterface<any>(\"Datatable\", props, {})\n\n let _props = useMemo(() => {\n let np = { ...p }\n\n if (typeof np.skeleton === 'number' || np.skeleton === true) {\n const limit = np.perpages && np.perpages.length > 0 ? np.perpages[0] : 10\n let length = np.skeleton === true ? limit : np.skeleton\n\n if (!np.hideCheckbox) {\n np.columns = [{\n label: '', field: \"__checkbox\", width: 34\n }, ...np.columns]\n }\n\n if (np.rowAction) {\n np.columns = [...np.columns, { label: \"\", field: \"__actions\", width: 34 }]\n }\n\n let columns = np.columns || []\n\n np.rows = []\n for (let i = 0; i < length; i++) {\n let r: any = { id: i }\n for (let col of columns) {\n r[col.field] = \"\"\n }\n np.rows.push(r)\n }\n\n np.renderRow = (r: any) => {\n for (let col of columns) {\n r[col.field] = <Skeleton\n animation={\"wave\"}\n height={16}\n radius={.5}\n width={\"100%\"}\n />\n }\n return r\n }\n np.hideCheckbox = true\n np.rowAction = undefined\n }\n return np\n }, [p.skeleton, props.columns, props.rowAction, p.hideCheckbox, p.rows])\n\n let {\n rows,\n tabs,\n\n pagination: { perpages = [30, 50, 100], total = 0 } = {},\n state: userState = {},\n onChange,\n\n fixedHeader,\n hidePagination,\n slotProps,\n\n\n // skip props for ViewBox\n skeleton,\n rowAction,\n disableRow,\n renderRow,\n filters,\n hideCheckbox,\n hideSearch,\n columns,\n compact,\n\n ...viewBoxProps\n } = _props\n\n const state = {\n selected: userState?.selected || [],\n selectAll: userState?.selectAll || false,\n pagination: {\n page: userState?.page || 1,\n perpage: perpages && perpages.length > 0 ? perpages[0] : 10,\n from: userState?.from || 1,\n to: userState?.to || (perpages && perpages.length > 0 ? perpages[0] : 10),\n },\n tab: tabs ? (userState?.tab || tabs[0].value || tabs[0].label.toLowerCase()) : \"\",\n search: userState?.search || \"\",\n sortable: userState?.sortable || {},\n filters: userState?.filter || {}\n }\n\n const update = (s: Partial<DatatableState>) => {\n onChange({ ...state, ...s })\n }\n\n return (\n <ViewBox\n height=\"100%\"\n {...viewBoxProps}\n baseClass='datatable'\n ref={ref as any}\n sx={{\n ...viewBoxProps?.sx,\n '& thead': fixedHeader ? {\n position: \"sticky\",\n top: 0,\n bgcolor: \"background.primary\",\n zIndex: 1\n } : {},\n }}\n startContent={(\n <Tag\n baseClass='datatable-header'\n sxr={{\n display: \"flex\",\n flexDirection: \"row\",\n justifyContent: \"space-between\"\n }}\n >\n <SelectedBox {..._props} update={update} state={state} />\n <FilterBox {..._props} update={update} state={state} />\n </Tag>\n )}\n >\n <TableArea\n {..._props}\n update={update}\n state={state}\n />\n <Stack\n p={1}\n alignItems=\"flex-end\"\n >\n {!hidePagination && <TablePagination\n disabled={_props.skeleton ? true : false}\n {...slotProps?.pagination}\n total={total || rows.length}\n page={state.pagination.page}\n perpage={state.pagination.perpage}\n perpages={perpages}\n slotProps={{\n select: {\n size: \"small\",\n }\n }}\n onChange={(state: TablePaginationState) => {\n update({ pagination: state })\n }}\n />}\n </Stack>\n </ViewBox>\n )\n})\n\nexport default DataTable"],"names":[],"mappings":";;;;;;;;;;;;;;;AAcA;AACI;AAEA;AACI;AAEA;;AAEI;AAEA;;;AAGK;;AAGL;;;AAIA;AAEA;AACA;AACI;AACA;AACI;;AAEJ;;AAGJ;AACI;;;AAQA;AACJ;AACA;AACA;;AAEJ;;AAGJ;;;AA2BA;;;AAGI;;AAEI;;AAEA;AACH;AACD;;;;;AAMJ;AACI;AACJ;AAEA;AASgB;AACA;AACA;AACA;AACH;AAMO;AACA;AACA;;AAyBA;AACI;AACH;AACJ;AAEG;AACJ;AAKpB;;"}
|
package/Datatable/index.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { DatatableProps } from './types.js';
|
|
3
|
+
export { DataTableDefaultRow, DatatableColumnType, DatatableRowActionType, DatatableState, DatatableStatePartial, DatatableTabsProps } from './types.js';
|
|
3
4
|
|
|
4
5
|
declare const DataTable: React.ForwardRefExoticComponent<Omit<DatatableProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
5
6
|
|
|
6
|
-
export { DataTable as default };
|
|
7
|
+
export { DatatableProps, DataTable as default };
|
package/Datatable/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { __rest } from 'tslib';
|
|
3
3
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
4
|
-
import React, { useMemo
|
|
4
|
+
import React, { useMemo } from 'react';
|
|
5
5
|
import ViewBox from '../ViewBox/index.js';
|
|
6
6
|
import { useInterface, Tag } from '@xanui/core';
|
|
7
7
|
import SelectedBox from './SelectedBox.js';
|
|
@@ -46,29 +46,26 @@ const DataTable = React.forwardRef((props, ref) => {
|
|
|
46
46
|
}
|
|
47
47
|
return np;
|
|
48
48
|
}, [p.skeleton, props.columns, props.rowAction, p.hideCheckbox, p.rows]);
|
|
49
|
-
let { rows, tabs, pagination: { perpages = [30, 50, 100], total = 0 } = {},
|
|
49
|
+
let { rows, tabs, pagination: { perpages = [30, 50, 100], total = 0 } = {}, state: userState = {}, onChange, fixedHeader, hidePagination, slotProps,
|
|
50
50
|
// skip props for ViewBox
|
|
51
|
-
skeleton, rowAction, disableRow, renderRow, filters, hideCheckbox, hideSearch, columns, compact } = _props, viewBoxProps = __rest(_props, ["rows", "tabs", "pagination", "
|
|
52
|
-
const
|
|
53
|
-
selected: (
|
|
54
|
-
selectAll: (
|
|
51
|
+
skeleton, rowAction, disableRow, renderRow, filters, hideCheckbox, hideSearch, columns, compact } = _props, viewBoxProps = __rest(_props, ["rows", "tabs", "pagination", "state", "onChange", "fixedHeader", "hidePagination", "slotProps", "skeleton", "rowAction", "disableRow", "renderRow", "filters", "hideCheckbox", "hideSearch", "columns", "compact"]);
|
|
52
|
+
const state = {
|
|
53
|
+
selected: (userState === null || userState === void 0 ? void 0 : userState.selected) || [],
|
|
54
|
+
selectAll: (userState === null || userState === void 0 ? void 0 : userState.selectAll) || false,
|
|
55
55
|
pagination: {
|
|
56
|
-
page: (
|
|
56
|
+
page: (userState === null || userState === void 0 ? void 0 : userState.page) || 1,
|
|
57
57
|
perpage: perpages && perpages.length > 0 ? perpages[0] : 10,
|
|
58
|
-
from: (
|
|
59
|
-
to: (
|
|
58
|
+
from: (userState === null || userState === void 0 ? void 0 : userState.from) || 1,
|
|
59
|
+
to: (userState === null || userState === void 0 ? void 0 : userState.to) || (perpages && perpages.length > 0 ? perpages[0] : 10),
|
|
60
60
|
},
|
|
61
|
-
tab: tabs ? ((
|
|
62
|
-
search: (
|
|
63
|
-
sortable: (
|
|
64
|
-
filters: (
|
|
65
|
-
}
|
|
66
|
-
const update = (s) =>
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
onStateChange(state);
|
|
70
|
-
}
|
|
71
|
-
}, [state]);
|
|
61
|
+
tab: tabs ? ((userState === null || userState === void 0 ? void 0 : userState.tab) || tabs[0].value || tabs[0].label.toLowerCase()) : "",
|
|
62
|
+
search: (userState === null || userState === void 0 ? void 0 : userState.search) || "",
|
|
63
|
+
sortable: (userState === null || userState === void 0 ? void 0 : userState.sortable) || {},
|
|
64
|
+
filters: (userState === null || userState === void 0 ? void 0 : userState.filter) || {}
|
|
65
|
+
};
|
|
66
|
+
const update = (s) => {
|
|
67
|
+
onChange(Object.assign(Object.assign({}, state), s));
|
|
68
|
+
};
|
|
72
69
|
return (jsxs(ViewBox, Object.assign({ height: "100%" }, viewBoxProps, { baseClass: 'datatable', ref: ref, sx: Object.assign(Object.assign({}, viewBoxProps === null || viewBoxProps === void 0 ? void 0 : viewBoxProps.sx), { '& thead': fixedHeader ? {
|
|
73
70
|
position: "sticky",
|
|
74
71
|
top: 0,
|
package/Datatable/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/Datatable/index.tsx"],"sourcesContent":["\"use client\";\nimport React, {
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/Datatable/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useMemo } from 'react'\nimport ViewBox from '../ViewBox'\nimport { Tag, useInterface } from '@xanui/core';\nimport SelectedBox from './SelectedBox'\nimport TableArea from './Table'\nimport FilterBox from './FilterBox'\nimport TablePagination, { TablePaginationState } from '../TablePagination'\nimport Stack from '../Stack'\nimport { DatatableProps, DatatableState } from './types';\nimport Skeleton from '../Skeleton';\n\nexport type * from './types';\n\nconst DataTable = React.forwardRef((props: DatatableProps, ref: React.Ref<HTMLDivElement>) => {\n let [p] = useInterface<any>(\"Datatable\", props, {})\n\n let _props = useMemo(() => {\n let np = { ...p }\n\n if (typeof np.skeleton === 'number' || np.skeleton === true) {\n const limit = np.perpages && np.perpages.length > 0 ? np.perpages[0] : 10\n let length = np.skeleton === true ? limit : np.skeleton\n\n if (!np.hideCheckbox) {\n np.columns = [{\n label: '', field: \"__checkbox\", width: 34\n }, ...np.columns]\n }\n\n if (np.rowAction) {\n np.columns = [...np.columns, { label: \"\", field: \"__actions\", width: 34 }]\n }\n\n let columns = np.columns || []\n\n np.rows = []\n for (let i = 0; i < length; i++) {\n let r: any = { id: i }\n for (let col of columns) {\n r[col.field] = \"\"\n }\n np.rows.push(r)\n }\n\n np.renderRow = (r: any) => {\n for (let col of columns) {\n r[col.field] = <Skeleton\n animation={\"wave\"}\n height={16}\n radius={.5}\n width={\"100%\"}\n />\n }\n return r\n }\n np.hideCheckbox = true\n np.rowAction = undefined\n }\n return np\n }, [p.skeleton, props.columns, props.rowAction, p.hideCheckbox, p.rows])\n\n let {\n rows,\n tabs,\n\n pagination: { perpages = [30, 50, 100], total = 0 } = {},\n state: userState = {},\n onChange,\n\n fixedHeader,\n hidePagination,\n slotProps,\n\n\n // skip props for ViewBox\n skeleton,\n rowAction,\n disableRow,\n renderRow,\n filters,\n hideCheckbox,\n hideSearch,\n columns,\n compact,\n\n ...viewBoxProps\n } = _props\n\n const state = {\n selected: userState?.selected || [],\n selectAll: userState?.selectAll || false,\n pagination: {\n page: userState?.page || 1,\n perpage: perpages && perpages.length > 0 ? perpages[0] : 10,\n from: userState?.from || 1,\n to: userState?.to || (perpages && perpages.length > 0 ? perpages[0] : 10),\n },\n tab: tabs ? (userState?.tab || tabs[0].value || tabs[0].label.toLowerCase()) : \"\",\n search: userState?.search || \"\",\n sortable: userState?.sortable || {},\n filters: userState?.filter || {}\n }\n\n const update = (s: Partial<DatatableState>) => {\n onChange({ ...state, ...s })\n }\n\n return (\n <ViewBox\n height=\"100%\"\n {...viewBoxProps}\n baseClass='datatable'\n ref={ref as any}\n sx={{\n ...viewBoxProps?.sx,\n '& thead': fixedHeader ? {\n position: \"sticky\",\n top: 0,\n bgcolor: \"background.primary\",\n zIndex: 1\n } : {},\n }}\n startContent={(\n <Tag\n baseClass='datatable-header'\n sxr={{\n display: \"flex\",\n flexDirection: \"row\",\n justifyContent: \"space-between\"\n }}\n >\n <SelectedBox {..._props} update={update} state={state} />\n <FilterBox {..._props} update={update} state={state} />\n </Tag>\n )}\n >\n <TableArea\n {..._props}\n update={update}\n state={state}\n />\n <Stack\n p={1}\n alignItems=\"flex-end\"\n >\n {!hidePagination && <TablePagination\n disabled={_props.skeleton ? true : false}\n {...slotProps?.pagination}\n total={total || rows.length}\n page={state.pagination.page}\n perpage={state.pagination.perpage}\n perpages={perpages}\n slotProps={{\n select: {\n size: \"small\",\n }\n }}\n onChange={(state: TablePaginationState) => {\n update({ pagination: state })\n }}\n />}\n </Stack>\n </ViewBox>\n )\n})\n\nexport default DataTable"],"names":[],"mappings":";;;;;;;;;;;;;AAcA;AACI;AAEA;AACI;AAEA;;AAEI;AAEA;;;AAGK;;AAGL;;;AAIA;AAEA;AACA;AACI;AACA;AACI;;AAEJ;;AAGJ;AACI;;;AAQA;AACJ;AACA;AACA;;AAEJ;;AAGJ;;;AA2BA;;;AAGI;;AAEI;;AAEA;AACH;AACD;;;;;AAMJ;AACI;AACJ;AAEA;AASgB;AACA;AACA;AACA;AACH;AAMO;AACA;AACA;;AAyBA;AACI;AACH;AACJ;AAEG;AACJ;AAKpB;;"}
|
package/Datatable/types.d.ts
CHANGED
|
@@ -7,7 +7,7 @@ import { TablePaginationState, TablePaginationProps } from '../TablePagination/i
|
|
|
7
7
|
import { ViewBoxProps } from '../ViewBox/index.js';
|
|
8
8
|
import { DataFilterProps } from '../DataFilter/types.js';
|
|
9
9
|
|
|
10
|
-
type
|
|
10
|
+
type DatatableColumnType = (Omit<TableColumnProps, "children"> & {
|
|
11
11
|
label: string;
|
|
12
12
|
field?: string;
|
|
13
13
|
sortable?: boolean;
|
|
@@ -16,30 +16,30 @@ type DataTableDefaultRow = {
|
|
|
16
16
|
id?: number;
|
|
17
17
|
[key: string | number]: any;
|
|
18
18
|
};
|
|
19
|
-
type
|
|
19
|
+
type DatatableRowActionType = Omit<IconButtonProps, "children"> & {
|
|
20
20
|
label: string;
|
|
21
21
|
icon: ReactElement;
|
|
22
22
|
};
|
|
23
|
-
type
|
|
23
|
+
type DatatableTabsProps = {
|
|
24
24
|
label: string;
|
|
25
25
|
value?: string;
|
|
26
26
|
};
|
|
27
|
-
type DatatableProps = Omit<ViewBoxProps, "children" | "rows"> & {
|
|
27
|
+
type DatatableProps = Omit<ViewBoxProps, "children" | "rows" | "onChange"> & {
|
|
28
28
|
rows: DataTableDefaultRow[];
|
|
29
|
-
columns:
|
|
30
|
-
tabs?:
|
|
29
|
+
columns: DatatableColumnType[];
|
|
30
|
+
tabs?: DatatableTabsProps[];
|
|
31
31
|
rowAction?: (props: {
|
|
32
32
|
row: DataTableDefaultRow | null;
|
|
33
33
|
state: DatatableState;
|
|
34
|
-
}) =>
|
|
34
|
+
}) => DatatableRowActionType[];
|
|
35
35
|
renderRow?: (row: DataTableDefaultRow, state: DatatableState) => DataTableDefaultRow;
|
|
36
36
|
disableRow?: (row: DataTableDefaultRow, state: DatatableState) => boolean | void;
|
|
37
37
|
pagination?: {
|
|
38
38
|
total?: number;
|
|
39
39
|
perpages?: number[];
|
|
40
40
|
};
|
|
41
|
-
|
|
42
|
-
|
|
41
|
+
state?: DatatableStatePartial;
|
|
42
|
+
onChange?: (state: DatatableState) => void;
|
|
43
43
|
filters?: DataFilterProps['options'];
|
|
44
44
|
fixedHeader?: boolean;
|
|
45
45
|
hidePagination?: boolean;
|
|
@@ -80,4 +80,4 @@ type DatatableStatePartial = {
|
|
|
80
80
|
};
|
|
81
81
|
};
|
|
82
82
|
|
|
83
|
-
export type {
|
|
83
|
+
export type { DataTableDefaultRow, DatatableColumnType, DatatableProps, DatatableRowActionType, DatatableState, DatatableStatePartial, DatatableTabsProps };
|