@canlooks/can-ui 0.0.47 → 0.0.49
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/boundary/errorBoundary.js +1 -1
- package/dist/cjs/components/button/button.js +1 -1
- package/dist/cjs/components/calendar/panelYear.js +1 -1
- package/dist/cjs/components/clickAway/clickAway.d.ts +1 -3
- package/dist/cjs/components/curd/curd.js +2 -2
- package/dist/cjs/components/curd/curdColumnConfig.js +1 -1
- package/dist/cjs/components/curd/curdFilter.js +5 -3
- package/dist/cjs/components/curd/curdResizable.js +1 -1
- package/dist/cjs/components/dataGrid/dataGrid.d.ts +1 -1
- package/dist/cjs/components/dataGrid/dataGrid.js +15 -9
- package/dist/cjs/components/descriptions/descriptionItem.js +1 -1
- package/dist/cjs/components/descriptions/descriptions.style.js +8 -5
- package/dist/cjs/components/dialog/dialog.js +1 -1
- package/dist/cjs/components/drawer/drawer.js +1 -1
- package/dist/cjs/components/form/formItem.js +3 -2
- package/dist/cjs/components/inputBase/inputBase.js +2 -2
- package/dist/cjs/components/pagination/pager.js +1 -1
- package/dist/cjs/components/palette/palette.js +1 -1
- package/dist/cjs/components/pickerDialog/pickerDialog.js +1 -1
- package/dist/cjs/components/transitionBase/collapse.js +1 -1
- package/dist/cjs/components/tree/treeNode.js +1 -1
- package/dist/cjs/components/upload/imageItem.js +1 -1
- package/dist/cjs/utils/curd.d.ts +1 -0
- package/dist/cjs/utils/curd.js +3 -2
- package/dist/esm/components/boundary/errorBoundary.js +1 -1
- package/dist/esm/components/button/button.js +1 -1
- package/dist/esm/components/calendar/panelYear.js +1 -1
- package/dist/esm/components/clickAway/clickAway.d.ts +1 -3
- package/dist/esm/components/curd/curd.js +2 -2
- package/dist/esm/components/curd/curdColumnConfig.js +1 -1
- package/dist/esm/components/curd/curdFilter.js +5 -3
- package/dist/esm/components/curd/curdResizable.js +1 -1
- package/dist/esm/components/dataGrid/dataGrid.d.ts +1 -1
- package/dist/esm/components/dataGrid/dataGrid.js +15 -9
- package/dist/esm/components/descriptions/descriptionItem.js +1 -1
- package/dist/esm/components/descriptions/descriptions.style.js +8 -5
- package/dist/esm/components/dialog/dialog.js +1 -1
- package/dist/esm/components/drawer/drawer.js +1 -1
- package/dist/esm/components/form/formItem.js +3 -2
- package/dist/esm/components/inputBase/inputBase.js +2 -2
- package/dist/esm/components/pagination/pager.js +1 -1
- package/dist/esm/components/palette/palette.js +1 -1
- package/dist/esm/components/pickerDialog/pickerDialog.js +1 -1
- package/dist/esm/components/transitionBase/collapse.js +1 -1
- package/dist/esm/components/tree/treeNode.js +1 -1
- package/dist/esm/components/upload/imageItem.js +1 -1
- package/dist/esm/utils/curd.d.ts +1 -0
- package/dist/esm/utils/curd.js +3 -2
- package/documentation/dist/assets/{index-DpTyMkMP.js → index-G5dn8x9O.js} +2861 -2858
- package/documentation/dist/index.html +1 -1
- package/documentation/vite.config.mjs +18 -0
- package/package.json +6 -6
|
@@ -25,5 +25,5 @@ exports.ErrorBoundary = (0, react_1.memo)(({ error, reload, reloadable, ...props
|
|
|
25
25
|
}
|
|
26
26
|
};
|
|
27
27
|
return ((0, jsx_runtime_1.jsx)(placeholder_1.Placeholder, { status: "error", description: renderDescriptions(), slots: placeholderSlots, extra: reloadable &&
|
|
28
|
-
(0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outlined", color: "text", prefix: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faRotateRight_1.faRotateRight }), onClick: reload, children: "\u91CD\u65B0\u52A0\u8F7D" }), ...props, css: errorBoundary_style_1.style, className: (0, utils_1.clsx)(errorBoundary_style_1.classes.root, props.className) }));
|
|
28
|
+
(0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outlined", color: "text.secondary", prefix: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faRotateRight_1.faRotateRight }), onClick: reload, children: "\u91CD\u65B0\u52A0\u8F7D" }), ...props, css: errorBoundary_style_1.style, className: (0, utils_1.clsx)(errorBoundary_style_1.classes.root, props.className) }));
|
|
29
29
|
});
|
|
@@ -27,7 +27,7 @@ const Button = ({ component: Component = 'button', color = 'primary', shape = 's
|
|
|
27
27
|
const actualPrefix = prefix ?? icon;
|
|
28
28
|
const actualChildren = label ?? props.children;
|
|
29
29
|
const reverseTextColor = variant === 'filled' || variant === 'flatted' ? '#ffffff' : color;
|
|
30
|
-
return ((0, jsx_runtime_1.jsxs)(Component, { ...props, css: (0, button_style_1.useStyle)({ color: color || 'primary' }), className: (0, utils_2.clsx)(button_style_1.classes.root, props.className), onPointerUp: onPointerUp, onClick: onClick, "data-variant": variant, "data-orientation": orientation, "data-shape": shape, "data-size": size, "data-loading": loading, "data-read-only": readOnly, children: [loading
|
|
30
|
+
return ((0, jsx_runtime_1.jsxs)(Component, { type: "button", ...props, css: (0, button_style_1.useStyle)({ color: color || 'primary' }), className: (0, utils_2.clsx)(button_style_1.classes.root, props.className), onPointerUp: onPointerUp, onClick: onClick, "data-variant": variant, "data-orientation": orientation, "data-shape": shape, "data-size": size, "data-loading": loading, "data-read-only": readOnly, children: [loading
|
|
31
31
|
? actualPrefix
|
|
32
32
|
? (0, jsx_runtime_1.jsx)(loadingIndicator_1.LoadingIndicator, { color: reverseTextColor })
|
|
33
33
|
: (0, jsx_runtime_1.jsx)(transitionBase_1.Collapse, { orientation: "horizontal", in: true, children: (0, jsx_runtime_1.jsx)(loadingIndicator_1.LoadingIndicator, { color: reverseTextColor }) })
|
|
@@ -16,7 +16,7 @@ exports.PanelYear = (0, react_1.memo)(({ innerD, setInnerD, onSelected, min, max
|
|
|
16
16
|
onSelected(d);
|
|
17
17
|
};
|
|
18
18
|
const [page, setPage] = (0, react_1.useState)(() => Math.floor(currentYear / 12));
|
|
19
|
-
const renderHeadControl = (icon, title, onClick) => ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: title, children: (0, jsx_runtime_1.jsx)(button_1.Button, { className: calendar_style_1.classes.headControl, variant: "text", size: "small", color: "text", onClick: onClick, children: icon }) }));
|
|
19
|
+
const renderHeadControl = (icon, title, onClick) => ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: title, children: (0, jsx_runtime_1.jsx)(button_1.Button, { className: calendar_style_1.classes.headControl, variant: "text", size: "small", color: "text.secondary", onClick: onClick, children: icon }) }));
|
|
20
20
|
const isDisabled = (d) => {
|
|
21
21
|
if (min && min.isAfter(d)) {
|
|
22
22
|
return true;
|
|
@@ -142,7 +142,7 @@ export declare function ClickAway({ ref, container, eventType, onClickAway, disa
|
|
|
142
142
|
onBlurCapture: import("react").FocusEventHandler<HTMLDivElement>;
|
|
143
143
|
onChange: import("react").FormEventHandler<HTMLDivElement>;
|
|
144
144
|
onChangeCapture: import("react").FormEventHandler<HTMLDivElement>;
|
|
145
|
-
onBeforeInput: import("react").
|
|
145
|
+
onBeforeInput: import("react").InputEventHandler<HTMLDivElement>;
|
|
146
146
|
onBeforeInputCapture: import("react").FormEventHandler<HTMLDivElement>;
|
|
147
147
|
onInput: import("react").FormEventHandler<HTMLDivElement>;
|
|
148
148
|
onInputCapture: import("react").FormEventHandler<HTMLDivElement>;
|
|
@@ -192,8 +192,6 @@ export declare function ClickAway({ ref, container, eventType, onClickAway, disa
|
|
|
192
192
|
onProgressCapture: import("react").ReactEventHandler<HTMLDivElement>;
|
|
193
193
|
onRateChange: import("react").ReactEventHandler<HTMLDivElement>;
|
|
194
194
|
onRateChangeCapture: import("react").ReactEventHandler<HTMLDivElement>;
|
|
195
|
-
onResize: import("react").ReactEventHandler<HTMLDivElement>;
|
|
196
|
-
onResizeCapture: import("react").ReactEventHandler<HTMLDivElement>;
|
|
197
195
|
onSeeked: import("react").ReactEventHandler<HTMLDivElement>;
|
|
198
196
|
onSeekedCapture: import("react").ReactEventHandler<HTMLDivElement>;
|
|
199
197
|
onSeeking: import("react").ReactEventHandler<HTMLDivElement>;
|
|
@@ -71,7 +71,7 @@ exports.Curd = (0, react_1.memo)((props) => {
|
|
|
71
71
|
}
|
|
72
72
|
};
|
|
73
73
|
return [...columns || [], controlColumn];
|
|
74
|
-
}, [columns, updatable, deletable]);
|
|
74
|
+
}, [columns, updatable, deletable, renderExtraControl, controlColumnTitle, updateButtonProps, deleteButtonProps, dataName, deleteConfirmProps]);
|
|
75
75
|
const { orderedColumns, actualColumns, innerVisible, setInnerVisible, setInnerOrder } = (0, utils_1.useCurdColumns)({
|
|
76
76
|
columns: completedColumns,
|
|
77
77
|
columnConfigurable
|
|
@@ -177,7 +177,7 @@ exports.Curd = (0, react_1.memo)((props) => {
|
|
|
177
177
|
(0, jsx_runtime_1.jsxs)("div", { className: curd_style_1.classes.toolbar, children: [(0, jsx_runtime_1.jsxs)("div", { className: curd_style_1.classes.toolbarLeft, children: [creatable &&
|
|
178
178
|
(0, jsx_runtime_1.jsxs)(button_1.Button, { prefix: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faPlus_1.faPlus }), ...createButtonProps, onClick: createHandler, children: [createName, dataName] }), toolbarLeft] }), (0, jsx_runtime_1.jsxs)("div", { className: curd_style_1.classes.toolbarRight, children: [!!toolbarRight &&
|
|
179
179
|
(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [toolbarRight, (0, jsx_runtime_1.jsx)(divider_1.Divider, { className: curd_style_1.classes.divider, orientation: "vertical" })] }), reloadable &&
|
|
180
|
-
(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u5237\u65B0", children: (0, jsx_runtime_1.jsx)(button_1.Button, { shape: "circular", variant: "text", color: "text", prefix: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faRotateRight_1.faRotateRight }), loading: innerLoading.current, onClick: reloadHandler }) }), resizable &&
|
|
180
|
+
(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u5237\u65B0", children: (0, jsx_runtime_1.jsx)(button_1.Button, { shape: "circular", variant: "text", color: "text.secondary", prefix: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faRotateRight_1.faRotateRight }), loading: innerLoading.current, onClick: reloadHandler }) }), resizable &&
|
|
181
181
|
(0, jsx_runtime_1.jsx)(curdResizable_1.CurdResizable, { innerSize: innerSize.current, setInnerSize: setInnerSize }), columnConfigurable &&
|
|
182
182
|
(0, jsx_runtime_1.jsx)(curdColumnConfig_1.CurdColumnConfig, { columns: orderedColumns, innerVisible: innerVisible.current, setInnerVisible: setInnerVisible, setInnerOrder: setInnerOrder })] })] }), (0, jsx_runtime_1.jsx)("div", { className: curd_style_1.classes.card, children: (0, jsx_runtime_1.jsx)(dataGrid_1.DataGrid, { ...dataGridProps, columns: actualColumns, tableProps: {
|
|
183
183
|
...props.tableProps,
|
|
@@ -27,5 +27,5 @@ exports.CurdColumnConfig = (0, react_1.memo)(({ columns = [], innerVisible, setI
|
|
|
27
27
|
? [...o, key]
|
|
28
28
|
: o.filter(k => k !== key));
|
|
29
29
|
};
|
|
30
|
-
return ((0, jsx_runtime_1.jsx)(bubble_1.Bubble, { css: curdColumnConfig_style_1.style, placement: "bottomRight", content: (0, jsx_runtime_1.jsx)(core_1.DndContext, { sensors: (0, utils_1.useDndSensors)(), onDragEnd: dragEndHandler, children: (0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: columns?.map((col, i) => col._key ?? i), children: (0, jsx_runtime_1.jsxs)("div", { className: curdColumnConfig_style_1.classes.content, children: [(0, jsx_runtime_1.jsx)("div", { className: curdColumnConfig_style_1.classes.title, children: "\u5217\u8BBE\u7F6E" }), columns?.map((col, i) => (0, jsx_runtime_1.jsx)(sortableItem_1.SortableItem, { id: col._key ?? i, component: menuItem_1.MenuItem, className: curdColumnConfig_style_1.classes.item, prefix: (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { className: curdColumnConfig_style_1.classes.checkbox, checked: !(0, utils_1.isUnset)(col._key) && visibleSet.has(col._key), onChange: e => !(0, utils_1.isUnset)(col._key) && toggleVisible(col._key, e.target.checked) }), label: col.title }, col._key ?? i))] }) }) }), children: (0, jsx_runtime_1.jsx)(button_1.Button, { shape: "circular", variant: "text", color: "text", children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faGear_1.faGear }) }) }));
|
|
30
|
+
return ((0, jsx_runtime_1.jsx)(bubble_1.Bubble, { css: curdColumnConfig_style_1.style, placement: "bottomRight", content: (0, jsx_runtime_1.jsx)(core_1.DndContext, { sensors: (0, utils_1.useDndSensors)(), onDragEnd: dragEndHandler, children: (0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: columns?.map((col, i) => col._key ?? i), children: (0, jsx_runtime_1.jsxs)("div", { className: curdColumnConfig_style_1.classes.content, children: [(0, jsx_runtime_1.jsx)("div", { className: curdColumnConfig_style_1.classes.title, children: "\u5217\u8BBE\u7F6E" }), columns?.map((col, i) => (0, jsx_runtime_1.jsx)(sortableItem_1.SortableItem, { id: col._key ?? i, component: menuItem_1.MenuItem, className: curdColumnConfig_style_1.classes.item, prefix: (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { className: curdColumnConfig_style_1.classes.checkbox, checked: !(0, utils_1.isUnset)(col._key) && visibleSet.has(col._key), onChange: e => !(0, utils_1.isUnset)(col._key) && toggleVisible(col._key, e.target.checked) }), label: col.title }, col._key ?? i))] }) }) }), autoClose: false, children: (0, jsx_runtime_1.jsx)(button_1.Button, { shape: "circular", variant: "text", color: "text.secondary", children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faGear_1.faGear }) }) }));
|
|
31
31
|
});
|
|
@@ -25,9 +25,11 @@ exports.CurdFilter = (0, react_2.memo)(({ ref, columns, expandable, showButton,
|
|
|
25
25
|
*/
|
|
26
26
|
const firstItemRef = (0, react_2.useRef)(null);
|
|
27
27
|
const [expanded, setExpanded] = (0, react_2.useState)(false);
|
|
28
|
-
const renderedGrid = ((0, jsx_runtime_1.jsx)(grid_1.Grid, { className: curd_style_1.classes.filterGrid, columnGap: spacing[8], children: items?.map((item, i) =>
|
|
29
|
-
|
|
30
|
-
|
|
28
|
+
const renderedGrid = ((0, jsx_runtime_1.jsx)(grid_1.Grid, { className: curd_style_1.classes.filterGrid, columnGap: spacing[8], children: items?.map((item, i) => {
|
|
29
|
+
return (0, react_2.isValidElement)(item)
|
|
30
|
+
? item
|
|
31
|
+
: (0, react_1.createElement)(form_1.FormItem, { span: { xs: 12, md: 6, lg: 4 }, variant: "grid", ...item, key: item.key ?? i, wrapperRef: !i ? firstItemRef : void 0 });
|
|
32
|
+
}) }));
|
|
31
33
|
/**
|
|
32
34
|
* --------------------------------------------------------------
|
|
33
35
|
* 触发筛选
|
|
@@ -10,5 +10,5 @@ const button_1 = require("../button");
|
|
|
10
10
|
const __1 = require("../..");
|
|
11
11
|
const faArrowsUpDown_1 = require("@fortawesome/free-solid-svg-icons/faArrowsUpDown");
|
|
12
12
|
exports.CurdResizable = (0, react_1.memo)(({ innerSize, setInnerSize }) => {
|
|
13
|
-
return ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u8868\u683C\u5C3A\u5BF8", children: (0, jsx_runtime_1.jsx)(bubble_1.Bubble, { placement: "bottom", content: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(menuItem_1.MenuItem, { value: "small", label: "\u5C0F", selected: innerSize === 'small', onClick: () => setInnerSize('small') }), (0, jsx_runtime_1.jsx)(menuItem_1.MenuItem, { value: "medium", label: "\u4E2D", selected: innerSize === 'medium', onClick: () => setInnerSize('medium') }), (0, jsx_runtime_1.jsx)(menuItem_1.MenuItem, { value: "large", label: "\u5927", selected: innerSize === 'large', onClick: () => setInnerSize('large') })] }), children: (0, jsx_runtime_1.jsx)(button_1.Button, { shape: "circular", variant: "text", color: "text", children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faArrowsUpDown_1.faArrowsUpDown }) }) }) }));
|
|
13
|
+
return ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u8868\u683C\u5C3A\u5BF8", children: (0, jsx_runtime_1.jsx)(bubble_1.Bubble, { placement: "bottom", content: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(menuItem_1.MenuItem, { value: "small", label: "\u5C0F", selected: innerSize === 'small', onClick: () => setInnerSize('small') }), (0, jsx_runtime_1.jsx)(menuItem_1.MenuItem, { value: "medium", label: "\u4E2D", selected: innerSize === 'medium', onClick: () => setInnerSize('medium') }), (0, jsx_runtime_1.jsx)(menuItem_1.MenuItem, { value: "large", label: "\u5927", selected: innerSize === 'large', onClick: () => setInnerSize('large') })] }), children: (0, jsx_runtime_1.jsx)(button_1.Button, { shape: "circular", variant: "text", color: "text.secondary", children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faArrowsUpDown_1.faArrowsUpDown }) }) }) }));
|
|
14
14
|
});
|
|
@@ -30,7 +30,7 @@ type DataGridSharedProps<R extends RowType> = {
|
|
|
30
30
|
/** 数据的主键名,默认为`id` */
|
|
31
31
|
primaryKey?: keyof R;
|
|
32
32
|
/**
|
|
33
|
-
* 当数据中存在该字段,则会渲染可展开的子行,默认为`null
|
|
33
|
+
* 当数据中存在该字段,则会渲染可展开的子行,默认为`null`,表示不使用子行功能,
|
|
34
34
|
* children允许的值类型:
|
|
35
35
|
* @types {R[] | ReactNode | ((parent: R, expanded: boolean) => ReactNode)}
|
|
36
36
|
*/
|
|
@@ -6,6 +6,7 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
|
|
|
6
6
|
const react_1 = require("react");
|
|
7
7
|
const dataGrid_style_1 = require("./dataGrid.style");
|
|
8
8
|
const selectionContext_1 = require("../selectionContext");
|
|
9
|
+
const pagination_1 = require("../pagination");
|
|
9
10
|
const table_1 = require("../table");
|
|
10
11
|
const utils_1 = require("../../utils");
|
|
11
12
|
const loading_1 = require("../loading");
|
|
@@ -96,21 +97,26 @@ exports.DataGrid = (0, react_1.memo)(({ columns, rows, rowProps, primaryKey = 'i
|
|
|
96
97
|
pageSize: innerPageSize.current,
|
|
97
98
|
onChange: pageChangeHandler
|
|
98
99
|
};
|
|
100
|
+
const renderPaginationFn = () => {
|
|
101
|
+
return renderPagination
|
|
102
|
+
? renderPagination(_paginationProps)
|
|
103
|
+
: (0, jsx_runtime_1.jsx)(pagination_1.Pagination, { ..._paginationProps });
|
|
104
|
+
};
|
|
99
105
|
const paginatedRows = (0, react_1.useMemo)(() => {
|
|
100
106
|
if (!paginatable) {
|
|
101
107
|
return orderedRows;
|
|
102
108
|
}
|
|
103
109
|
const { page, pageSize } = _paginationProps;
|
|
104
110
|
return orderedRows?.slice((page - 1) * pageSize, page * pageSize);
|
|
105
|
-
}, [orderedRows, _paginationProps.page, _paginationProps.pageSize]);
|
|
106
|
-
return ((0, jsx_runtime_1.
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
111
|
+
}, [orderedRows, _paginationProps.page, _paginationProps.pageSize, paginatable]);
|
|
112
|
+
return ((0, jsx_runtime_1.jsxs)(loading_1.Loading, { ...props, css: dataGrid_style_1.style, className: (0, utils_1.clsx)(dataGrid_style_1.classes.root, props.className), open: loading, "data-column-resizable": columnResizable, children: [(0, jsx_runtime_1.jsx)(columnResize_1.ColumnResizeContext, { columnResizable: columnResizable, children: ({ scrollerRef, tableRef }) => (0, jsx_runtime_1.jsxs)(table_1.TableContainer, { ref: scrollerRef, className: dataGrid_style_1.classes.container, children: [(0, jsx_runtime_1.jsx)(table_1.Table, { size: size, bordered: bordered, striped: striped, ...tableProps, ref: (0, utils_1.cloneRef)(tableProps?.ref, tableRef), children: (0, jsx_runtime_1.jsxs)(selectionContext_1.SelectionContext, { options: rows, primaryKey: primaryKey, childrenKey: childrenKey !== null ? childrenKey : void 0, relation: relation, integration: integration, disabled: !selectable, multiple: multiple, defaultValue: defaultValue, value: value, onChange: onChange, children: [(0, jsx_runtime_1.jsx)(dataGridHead_1.DataGridHead, { flattedColumns: flattedColumns, completedColumns: completedColumns, rows: rows, primaryKey: primaryKey, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler, allowSelectAll: allowSelectAll, columnResizable: columnResizable }), (0, jsx_runtime_1.jsx)("tbody", { children: (0, jsx_runtime_1.jsx)(DataGridContext, { value: (0, react_1.useMemo)(() => ({
|
|
113
|
+
rowProps, primaryKey, childrenKey, clickRowToSelect, indent, renderExpandIcon,
|
|
114
|
+
expandedSet, flattedColumns, toggleExpanded
|
|
115
|
+
}), [
|
|
116
|
+
rowProps, primaryKey, childrenKey, clickRowToSelect, indent, renderExpandIcon,
|
|
117
|
+
expandedSet, flattedColumns
|
|
118
|
+
]), children: !!paginatedRows?.length &&
|
|
119
|
+
(0, jsx_runtime_1.jsx)(dataGridRows_1.DataGridRows, { rows: paginatedRows }) }) })] }) }), !paginatedRows?.length && (emptyPlaceholder ?? (0, jsx_runtime_1.jsx)(placeholder_1.Placeholder, { className: dataGrid_style_1.classes.empty }))] }) }), renderPaginationFn()] }));
|
|
114
120
|
});
|
|
115
121
|
exports.DataGrid.EXPAND_COLUMN = Symbol('expand-column');
|
|
116
122
|
exports.DataGrid.SELECT_COLUMN = Symbol('select-column');
|
|
@@ -22,7 +22,7 @@ size, labelWidth, colon, labelPlacement, disableMargin, disablePadding, span = {
|
|
|
22
22
|
const spanNum = (0, utils_1.useResponsiveValue)(span, variant === 'grid');
|
|
23
23
|
return variant === 'grid'
|
|
24
24
|
? (0, jsx_runtime_1.jsxs)(grid_1.GridItem, { ...props, css: descriptions_style_1.gridItemStyle, className: (0, utils_1.clsx)(descriptions_style_1.classes.item, props.className), span: span, "data-size": size, "data-label-placement": labelPlacement, "data-disable-margin": disableMargin, children: [!!label &&
|
|
25
|
-
(0, jsx_runtime_1.jsxs)("div", { className: descriptions_style_1.classes.label, style: { width: labelWidth }, children: [label, !!colon &&
|
|
25
|
+
(0, jsx_runtime_1.jsxs)("div", { className: descriptions_style_1.classes.label, style: { width: labelWidth }, children: [label, !!colon && labelPlacement === 'left' &&
|
|
26
26
|
(0, jsx_runtime_1.jsx)("div", { className: descriptions_style_1.classes.colon, children: colon })] }), (0, jsx_runtime_1.jsx)("div", { className: descriptions_style_1.classes.content, children: content ?? props.children })] })
|
|
27
27
|
: labelPlacement === 'top'
|
|
28
28
|
? (0, jsx_runtime_1.jsx)("td", { className: descriptions_style_1.classes.vertical, colSpan: spanNum.current, children: (0, jsx_runtime_1.jsxs)("div", { className: descriptions_style_1.classes.verticalColWrap, children: [(0, jsx_runtime_1.jsx)("div", { className: `${descriptions_style_1.classes.col} ${descriptions_style_1.classes.labelCol}`, "data-size": size, children: label }), (0, jsx_runtime_1.jsx)("div", { className: `${descriptions_style_1.classes.col} ${descriptions_style_1.classes.contentCol}`, "data-size": size, "data-disable-padding": disablePadding, children: content ?? props.children })] }) })
|
|
@@ -136,18 +136,21 @@ exports.gridItemStyle = (0, utils_1.defineCss)(({ spacing, text }) => (0, react_
|
|
|
136
136
|
.${exports.classes.label} {
|
|
137
137
|
text-align: right;
|
|
138
138
|
justify-content: flex-end;
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
139
|
+
|
|
140
|
+
+ .${exports.classes.content} {
|
|
141
|
+
margin-left: ${spacing[3]}px;
|
|
142
|
+
}
|
|
143
143
|
}
|
|
144
144
|
}
|
|
145
145
|
|
|
146
146
|
&[data-label-placement=right] {
|
|
147
147
|
.${exports.classes.content} {
|
|
148
148
|
text-align: right;
|
|
149
|
-
margin-right: ${spacing[2]}px;
|
|
150
149
|
justify-content: flex-end;
|
|
151
150
|
}
|
|
151
|
+
|
|
152
|
+
.${exports.classes.label} + .${exports.classes.content} {
|
|
153
|
+
margin-right: ${spacing[3]}px;
|
|
154
|
+
}
|
|
152
155
|
}
|
|
153
156
|
`);
|
|
@@ -84,7 +84,7 @@ function Dialog({ ref, icon, title, footer, prefix, suffix, width = 420, minWidt
|
|
|
84
84
|
return ((0, jsx_runtime_1.jsx)(modal_1.Modal, { ...props, ref: (0, utils_1.cloneRef)(ref, overlayRef), css: dialog_style_1.style, className: (0, utils_1.clsx)(dialog_style_1.classes.root, props.className), open: innerOpen.current, onMaskClick: onMaskClick, "data-draggable": draggable, children: (0, jsx_runtime_1.jsx)(draggable_1.Draggable, { container: () => overlayRef.current, children: (targetProps, handleProps) => (0, jsx_runtime_1.jsxs)("div", { className: dialog_style_1.classes.card, ...targetProps, style: { width, minWidth, maxWidth, ...targetProps.style }, children: [!!icon &&
|
|
85
85
|
(0, jsx_runtime_1.jsx)("div", { className: dialog_style_1.classes.icon, children: icon }), (0, jsx_runtime_1.jsxs)("div", { className: dialog_style_1.classes.content, children: [!!(title || showClose) &&
|
|
86
86
|
(0, jsx_runtime_1.jsxs)("div", { className: dialog_style_1.classes.titleRow, ...handleProps, children: [(0, jsx_runtime_1.jsx)("div", { className: dialog_style_1.classes.title, children: title }), showClose &&
|
|
87
|
-
(0, jsx_runtime_1.jsx)(button_1.Button, { shape: "circular", variant: "text", color: "text", ...closeProps, className: (0, utils_1.clsx)(dialog_style_1.classes.close, closeProps?.className), onClick: closeHandler, children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faXmark_1.faXmark }) })] }), (0, jsx_runtime_1.jsxs)("div", { ref: bodyRef, className: dialog_style_1.classes.body, onScroll: onScroll, children: [!!prefix &&
|
|
87
|
+
(0, jsx_runtime_1.jsx)(button_1.Button, { shape: "circular", variant: "text", color: "text.secondary", ...closeProps, className: (0, utils_1.clsx)(dialog_style_1.classes.close, closeProps?.className), onClick: closeHandler, children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faXmark_1.faXmark }) })] }), (0, jsx_runtime_1.jsxs)("div", { ref: bodyRef, className: dialog_style_1.classes.body, onScroll: onScroll, children: [!!prefix &&
|
|
88
88
|
(0, jsx_runtime_1.jsx)("div", { className: dialog_style_1.classes.prefix, children: prefix }), (0, jsx_runtime_1.jsx)("div", { ref: bodyWrapRef, className: dialog_style_1.classes.bodyWrap, children: props.children }), !!suffix &&
|
|
89
89
|
(0, jsx_runtime_1.jsx)("div", { className: dialog_style_1.classes.suffix, children: suffix })] }), (typeof footer === 'undefined' || !!footer) &&
|
|
90
90
|
(0, jsx_runtime_1.jsx)("div", { className: dialog_style_1.classes.footer, children: renderFooter() })] })] }) }) }));
|
|
@@ -51,7 +51,7 @@ function Drawer({ title, footer, showClose = true, size = { xs: '100%', sm: '75%
|
|
|
51
51
|
}, [innerOpen.current]);
|
|
52
52
|
return ((0, jsx_runtime_1.jsx)(overlayBase_1.OverlayBase, { ...props, css: (0, drawer_style_1.useStyle)({ size: typeof size === 'object' ? size : { xs: size } }), className: (0, utils_1.clsx)(drawer_style_1.classes.root, props.className), open: innerOpen.current, onMaskClick: onMaskClick, "data-placement": placement, children: (0, jsx_runtime_1.jsx)(transitionBase_1.Slide, { direction: placementToDirection[placement], ...slideProps, in: innerOpen.current, className: (0, utils_1.clsx)(drawer_style_1.classes.drawer, slideProps?.className), children: (0, jsx_runtime_1.jsxs)("div", { className: drawer_style_1.classes.drawerWrap, children: [!!(title || showClose) &&
|
|
53
53
|
(0, jsx_runtime_1.jsxs)("div", { className: drawer_style_1.classes.titleRow, children: [(0, jsx_runtime_1.jsx)("div", { className: drawer_style_1.classes.title, children: title }), showClose &&
|
|
54
|
-
(0, jsx_runtime_1.jsx)(button_1.Button, { className: drawer_style_1.classes.close, shape: "circular", variant: "text", color: "text", onClick: closeHandler, children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faAnglesRight_1.faAnglesRight, style: {
|
|
54
|
+
(0, jsx_runtime_1.jsx)(button_1.Button, { className: drawer_style_1.classes.close, shape: "circular", variant: "text", color: "text.secondary", onClick: closeHandler, children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faAnglesRight_1.faAnglesRight, style: {
|
|
55
55
|
rotate: {
|
|
56
56
|
left: '180deg',
|
|
57
57
|
right: '0',
|
|
@@ -159,7 +159,8 @@ const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rules, req
|
|
|
159
159
|
if (noStyle || variant === 'plain') {
|
|
160
160
|
return renderedChildren;
|
|
161
161
|
}
|
|
162
|
-
return ((0, jsx_runtime_1.jsxs)(descriptions_1.DescriptionItem, { flex: void 0, ...props, ref: wrapperRef, className: (0, utils_1.clsx)(form_style_1.classes.item, props.className), label:
|
|
163
|
-
|
|
162
|
+
return ((0, jsx_runtime_1.jsxs)(descriptions_1.DescriptionItem, { flex: void 0, ...props, ref: wrapperRef, className: (0, utils_1.clsx)(form_style_1.classes.item, props.className), label: !!label &&
|
|
163
|
+
(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isRequired && !!requiredMark &&
|
|
164
|
+
(0, jsx_runtime_1.jsx)("span", { className: form_style_1.classes.requiredMark, children: requiredMark }), label] }), children: [renderedChildren, (0, jsx_runtime_1.jsx)(transitionBase_1.Collapse, { in: innerError.current || !!helperText, children: (0, jsx_runtime_1.jsx)("div", { className: form_style_1.classes.helperText, children: innerHelperText.current }) })] }));
|
|
164
165
|
};
|
|
165
166
|
exports.FormItem = FormItem;
|
|
@@ -12,7 +12,7 @@ const __1 = require("../..");
|
|
|
12
12
|
const faCircleXmark_1 = require("@fortawesome/free-solid-svg-icons/faCircleXmark");
|
|
13
13
|
exports.InputBase = (({ variant = 'outlined', size, shape, color = 'primary', children, prefix, suffix, onClear, loading, type, clearable = type !== 'number',
|
|
14
14
|
// 以下属性传递给<input/>
|
|
15
|
-
min
|
|
15
|
+
min, max, step, precision, placeholder, disabled, readOnly, autoFocus, defaultValue, value, onChange, ...props }) => {
|
|
16
16
|
const theme = (0, theme_1.useTheme)();
|
|
17
17
|
size ??= theme.size;
|
|
18
18
|
const innerInputRef = (0, react_1.useRef)(null);
|
|
@@ -76,6 +76,6 @@ min = -Infinity, max = Infinity, step, precision, placeholder, disabled, readOnl
|
|
|
76
76
|
onKeyDown: (e) => e.key === 'Enter' && blurHandler(e)
|
|
77
77
|
}) }), loading &&
|
|
78
78
|
(0, jsx_runtime_1.jsx)(loadingIndicator_1.LoadingIndicator, {}), clearable && !disabled && !readOnly && (Array.isArray(innerValue.current) ? !!innerValue.current.length : !!innerValue.current) &&
|
|
79
|
-
(0, jsx_runtime_1.jsx)(button_1.Button, { className: inputBase_style_1.classes.clear, variant: "plain", color: "text.disabled", onClick: clear, children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faCircleXmark_1.faCircleXmark }) }), !!suffix &&
|
|
79
|
+
(0, jsx_runtime_1.jsx)(button_1.Button, { className: inputBase_style_1.classes.clear, variant: "plain", color: "text.disabled", onClick: clear, tabIndex: -1, children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faCircleXmark_1.faCircleXmark }) }), !!suffix &&
|
|
80
80
|
(0, jsx_runtime_1.jsx)("div", { className: inputBase_style_1.classes.suffix, children: suffix })] }));
|
|
81
81
|
});
|
|
@@ -52,5 +52,5 @@ exports.PaginationPager = (0, react_1.memo)((props) => {
|
|
|
52
52
|
: renderPageButton(page + i - 5, i === 1 || i === 7);
|
|
53
53
|
});
|
|
54
54
|
};
|
|
55
|
-
return ((0, jsx_runtime_1.jsxs)("div", { ...props, className: (0, utils_1.clsx)(pagination_style_1.classes.pager, props.className), children: [(0, jsx_runtime_1.jsx)(button_1.Button, { className: pagination_style_1.classes.button, variant: "text", size: size, color: "text", disabled: page === 1, onClick: () => onPageChange(page - 1), children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faAngleLeft_1.faAngleLeft }) }), renderPageList(), (0, jsx_runtime_1.jsx)(button_1.Button, { className: pagination_style_1.classes.button, variant: "text", size: size, color: "text", disabled: page === pageCount, onClick: () => onPageChange(page + 1), children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faAngleRight_1.faAngleRight }) })] }));
|
|
55
|
+
return ((0, jsx_runtime_1.jsxs)("div", { ...props, className: (0, utils_1.clsx)(pagination_style_1.classes.pager, props.className), children: [(0, jsx_runtime_1.jsx)(button_1.Button, { className: pagination_style_1.classes.button, variant: "text", size: size, color: "text.secondary", disabled: page === 1, onClick: () => onPageChange(page - 1), children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faAngleLeft_1.faAngleLeft }) }), renderPageList(), (0, jsx_runtime_1.jsx)(button_1.Button, { className: pagination_style_1.classes.button, variant: "text", size: size, color: "text.secondary", disabled: page === pageCount, onClick: () => onPageChange(page + 1), children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faAngleRight_1.faAngleRight }) })] }));
|
|
56
56
|
});
|
|
@@ -114,5 +114,5 @@ exports.Palette = (0, react_1.memo)(({ defaultValue, value, onChange, gestureOpt
|
|
|
114
114
|
}, ...draggableHandles })] }), (0, jsx_runtime_1.jsxs)("div", { className: palette_style_1.classes.slidersRow, children: [(0, jsx_runtime_1.jsxs)("div", { className: palette_style_1.classes.sliders, children: [(0, jsx_runtime_1.jsx)(slider_1.Slider, { ...sliderProps, className: palette_style_1.classes.hue, value: colorObject.hue / 359 * 100, onChange: hueChangeHandler }), (0, jsx_runtime_1.jsx)(slider_1.Slider, { ...sliderProps, className: palette_style_1.classes.alpha, renderRail: (_, railProps) => (0, jsx_runtime_1.jsxs)("div", { ...railProps, children: [railProps.children, (0, jsx_runtime_1.jsx)("div", { className: palette_style_1.classes.alphaMask, style: { backgroundImage: `linear-gradient(90deg, transparent, ${colorObject.saturated})` } })] }), value: colorObject.alpha * 100, onChange: alphaChangeHandler })] }), (0, jsx_runtime_1.jsx)("div", { className: palette_style_1.classes.preview, children: (0, jsx_runtime_1.jsx)("div", { className: palette_style_1.classes.previewColor, style: {
|
|
115
115
|
backgroundColor: colorObject.hex,
|
|
116
116
|
opacity: colorObject.alpha
|
|
117
|
-
} }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: palette_style_1.classes.inputRow, children: [(0, jsx_runtime_1.jsx)(button_1.Button, { variant: "plain", color: "text", suffix: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faChevronDown_1.faChevronDown }), onClick: formatChangeHandler, children: availableFormat[activeFormat] }), renderInputs()] })] }));
|
|
117
|
+
} }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: palette_style_1.classes.inputRow, children: [(0, jsx_runtime_1.jsx)(button_1.Button, { variant: "plain", color: "text.secondary", suffix: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faChevronDown_1.faChevronDown }), onClick: formatChangeHandler, children: availableFormat[activeFormat] }), renderInputs()] })] }));
|
|
118
118
|
});
|
|
@@ -70,6 +70,6 @@ options = rows ?? nodes, primaryKey = 'id', childrenKey = 'children', relation =
|
|
|
70
70
|
...props.modalProps
|
|
71
71
|
}, ...showSelectedList && {
|
|
72
72
|
[selectedListPlacement === 'left' ? 'prefix' : 'suffix']: ((0, jsx_runtime_1.jsxs)("div", { className: pickerDialog_style_1.classes.selectedArea, children: [(0, jsx_runtime_1.jsxs)(divider_1.Divider, { className: pickerDialog_style_1.classes.count, textAlign: "start", children: [(0, jsx_runtime_1.jsxs)("div", { children: ["\u5DF2\u9009\u62E9", (0, jsx_runtime_1.jsx)("b", { children: selectedCount }), "\u9879"] }), clearable &&
|
|
73
|
-
(0, jsx_runtime_1.jsx)(button_1.Button, { prefix: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faTrashCan_1.faTrashCan }), variant: "plain", color: "text", onClick: () => setInnerValue(multiple ? [] : null), children: "\u6E05\u7A7A" })] }), (0, jsx_runtime_1.jsx)(selectedList_1.SelectedList, { itemProps: selectedItemProps, ...selectedListProps, className: (0, utils_1.clsx)(pickerDialog_style_1.classes.list, selectedListProps?.className) }), (0, jsx_runtime_1.jsx)(button_1.Button, { className: pickerDialog_style_1.classes.confirm, disabled: selectedCount === 0, onClick: () => confirmHandler(), children: "\u786E\u5B9A" })] }))
|
|
73
|
+
(0, jsx_runtime_1.jsx)(button_1.Button, { prefix: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faTrashCan_1.faTrashCan }), variant: "plain", color: "text.secondary", onClick: () => setInnerValue(multiple ? [] : null), children: "\u6E05\u7A7A" })] }), (0, jsx_runtime_1.jsx)(selectedList_1.SelectedList, { itemProps: selectedItemProps, ...selectedListProps, className: (0, utils_1.clsx)(pickerDialog_style_1.classes.list, selectedListProps?.className) }), (0, jsx_runtime_1.jsx)(button_1.Button, { className: pickerDialog_style_1.classes.confirm, disabled: selectedCount === 0, onClick: () => confirmHandler(), children: "\u786E\u5B9A" })] }))
|
|
74
74
|
}, children: renderChildren() }) }));
|
|
75
75
|
});
|
|
@@ -22,7 +22,7 @@ const Sweeping = ({ ref, in: _in = false, appear = true, orientation = 'vertical
|
|
|
22
22
|
(0, react_1.useEffect)(() => {
|
|
23
23
|
if (_in && size.current !== 'auto') {
|
|
24
24
|
requestAnimationFrame(() => {
|
|
25
|
-
setSize(innerRef.current[orientation === 'vertical' ? 'scrollHeight' : 'scrollWidth']);
|
|
25
|
+
innerRef.current && setSize(innerRef.current[orientation === 'vertical' ? 'scrollHeight' : 'scrollWidth']);
|
|
26
26
|
});
|
|
27
27
|
}
|
|
28
28
|
}, [_in]);
|
|
@@ -23,7 +23,7 @@ exports.TreeNode = (0, react_1.memo)(({ value, label, prefix, suffix, disabled,
|
|
|
23
23
|
clickLabelToExpand && toggleExpanded?.(value);
|
|
24
24
|
};
|
|
25
25
|
const hasChildren = !!props.children && (!Array.isArray(props.children) || props.children.length > 0);
|
|
26
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { ...props, className: (0, utils_1.clsx)(tree_style_1.classes.node, props.className), "data-selected": status === 2, "data-read-only": readOnly, "data-disabled": disabled, onClick: clickHandler, children: [Array(_level).fill(void 0).map((_, i) => (0, jsx_runtime_1.jsx)("div", { className: tree_style_1.classes.indent, style: { width: indent } }, i)), (0, jsx_runtime_1.jsx)(button_1.Button, { className: tree_style_1.classes.expand, variant: "plain", color: "text", onClick: e => {
|
|
26
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { ...props, className: (0, utils_1.clsx)(tree_style_1.classes.node, props.className), "data-selected": status === 2, "data-read-only": readOnly, "data-disabled": disabled, onClick: clickHandler, children: [Array(_level).fill(void 0).map((_, i) => (0, jsx_runtime_1.jsx)("div", { className: tree_style_1.classes.indent, style: { width: indent } }, i)), (0, jsx_runtime_1.jsx)(button_1.Button, { className: tree_style_1.classes.expand, variant: "plain", color: "text.secondary", onClick: e => {
|
|
27
27
|
e.stopPropagation();
|
|
28
28
|
toggleExpanded?.(value);
|
|
29
29
|
}, children: renderExpandIcon
|
|
@@ -19,7 +19,7 @@ exports.ImageItem = (0, react_1.memo)((props) => {
|
|
|
19
19
|
open: previewOpen,
|
|
20
20
|
onOpenChange: setPreviewOpen
|
|
21
21
|
}, actions: [
|
|
22
|
-
(0, jsx_runtime_1.jsx)(button_1.Button, { size: "small", variant: "text", shape: "circular", color: "text", onClick: () => setPreviewOpen(true), children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faEye_1.faEye }) }, "preview"),
|
|
22
|
+
(0, jsx_runtime_1.jsx)(button_1.Button, { size: "small", variant: "text", shape: "circular", color: "text.secondary", onClick: () => setPreviewOpen(true), children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faEye_1.faEye }) }, "preview"),
|
|
23
23
|
(0, jsx_runtime_1.jsx)(button_1.Button, { size: "small", variant: "text", shape: "circular", color: "error", onClick: props.onRemove, children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faTrashCan_1.faTrashCan }) }, "delete")
|
|
24
24
|
], children: status !== 'default' &&
|
|
25
25
|
(0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.clsx)(upload_style_1.classes.progress), children: (0, jsx_runtime_1.jsx)(progress_1.Progress, { variant: "circular", showInfo: status !== 'uploading', value: progress, status: status === 'uploading' ? 'processing' : status }) }) }) }));
|
package/dist/cjs/utils/curd.d.ts
CHANGED
|
@@ -10,6 +10,7 @@ export declare function columnsToFilterItem(columns?: (CurdColumn<any> | symbol)
|
|
|
10
10
|
/**
|
|
11
11
|
* 将Curd的Columns转换为FormItem
|
|
12
12
|
* @param columns
|
|
13
|
+
* @param row
|
|
13
14
|
*/
|
|
14
15
|
export declare function columnsToFormItem(columns?: (CurdColumn<any> | symbol)[], row?: Obj): CurdFormItemProps[] | undefined;
|
|
15
16
|
/**
|
package/dist/cjs/utils/curd.js
CHANGED
|
@@ -17,6 +17,7 @@ function columnsToFilterItem(columns) {
|
|
|
17
17
|
/**
|
|
18
18
|
* 将Curd的Columns转换为FormItem
|
|
19
19
|
* @param columns
|
|
20
|
+
* @param row
|
|
20
21
|
*/
|
|
21
22
|
function columnsToFormItem(columns, row) {
|
|
22
23
|
return columnsTransfer(columns, 'form', row);
|
|
@@ -36,7 +37,7 @@ function columnsTransfer(columns, type = 'filter', row) {
|
|
|
36
37
|
return item.key ? item : (0, react_1.cloneElement)(item, { key });
|
|
37
38
|
}
|
|
38
39
|
if (item === true) {
|
|
39
|
-
//
|
|
40
|
+
// item为true当作空对象处理
|
|
40
41
|
item = {};
|
|
41
42
|
}
|
|
42
43
|
if (typeof item === 'object') {
|
|
@@ -67,7 +68,7 @@ function useCurdColumns({ columns, columnConfigurable }) {
|
|
|
67
68
|
}
|
|
68
69
|
let { defaultVisible, visible, onVisibleChange, defaultOrder, order, onOrderChange } = columnConfigurable;
|
|
69
70
|
if (!defaultVisible || !defaultOrder) {
|
|
70
|
-
const defaultKeys = columns?.flatMap((col) => col._key ?? []) || [];
|
|
71
|
+
const defaultKeys = columns?.flatMap((col) => col.hideInTable ? [] : (col._key ?? [])) || [];
|
|
71
72
|
defaultVisible ||= defaultKeys;
|
|
72
73
|
defaultOrder ||= defaultKeys;
|
|
73
74
|
}
|
|
@@ -22,5 +22,5 @@ export const ErrorBoundary = memo(({ error, reload, reloadable, ...props }) => {
|
|
|
22
22
|
}
|
|
23
23
|
};
|
|
24
24
|
return (_jsx(Placeholder, { status: "error", description: renderDescriptions(), slots: placeholderSlots, extra: reloadable &&
|
|
25
|
-
_jsx(Button, { variant: "outlined", color: "text", prefix: _jsx(Icon, { icon: faRotateRight }), onClick: reload, children: "\u91CD\u65B0\u52A0\u8F7D" }), ...props, css: style, className: clsx(classes.root, props.className) }));
|
|
25
|
+
_jsx(Button, { variant: "outlined", color: "text.secondary", prefix: _jsx(Icon, { icon: faRotateRight }), onClick: reload, children: "\u91CD\u65B0\u52A0\u8F7D" }), ...props, css: style, className: clsx(classes.root, props.className) }));
|
|
26
26
|
});
|
|
@@ -24,7 +24,7 @@ export const Button = ({ component: Component = 'button', color = 'primary', sha
|
|
|
24
24
|
const actualPrefix = prefix ?? icon;
|
|
25
25
|
const actualChildren = label ?? props.children;
|
|
26
26
|
const reverseTextColor = variant === 'filled' || variant === 'flatted' ? '#ffffff' : color;
|
|
27
|
-
return (_jsxs(Component, { ...props, css: useStyle({ color: color || 'primary' }), className: clsx(classes.root, props.className), onPointerUp: onPointerUp, onClick: onClick, "data-variant": variant, "data-orientation": orientation, "data-shape": shape, "data-size": size, "data-loading": loading, "data-read-only": readOnly, children: [loading
|
|
27
|
+
return (_jsxs(Component, { type: "button", ...props, css: useStyle({ color: color || 'primary' }), className: clsx(classes.root, props.className), onPointerUp: onPointerUp, onClick: onClick, "data-variant": variant, "data-orientation": orientation, "data-shape": shape, "data-size": size, "data-loading": loading, "data-read-only": readOnly, children: [loading
|
|
28
28
|
? actualPrefix
|
|
29
29
|
? _jsx(LoadingIndicator, { color: reverseTextColor })
|
|
30
30
|
: _jsx(Collapse, { orientation: "horizontal", in: true, children: _jsx(LoadingIndicator, { color: reverseTextColor }) })
|
|
@@ -13,7 +13,7 @@ export const PanelYear = memo(({ innerD, setInnerD, onSelected, min, max }) => {
|
|
|
13
13
|
onSelected(d);
|
|
14
14
|
};
|
|
15
15
|
const [page, setPage] = useState(() => Math.floor(currentYear / 12));
|
|
16
|
-
const renderHeadControl = (icon, title, onClick) => (_jsx(Tooltip, { title: title, children: _jsx(Button, { className: classes.headControl, variant: "text", size: "small", color: "text", onClick: onClick, children: icon }) }));
|
|
16
|
+
const renderHeadControl = (icon, title, onClick) => (_jsx(Tooltip, { title: title, children: _jsx(Button, { className: classes.headControl, variant: "text", size: "small", color: "text.secondary", onClick: onClick, children: icon }) }));
|
|
17
17
|
const isDisabled = (d) => {
|
|
18
18
|
if (min && min.isAfter(d)) {
|
|
19
19
|
return true;
|
|
@@ -142,7 +142,7 @@ export declare function ClickAway({ ref, container, eventType, onClickAway, disa
|
|
|
142
142
|
onBlurCapture: import("react").FocusEventHandler<HTMLDivElement>;
|
|
143
143
|
onChange: import("react").FormEventHandler<HTMLDivElement>;
|
|
144
144
|
onChangeCapture: import("react").FormEventHandler<HTMLDivElement>;
|
|
145
|
-
onBeforeInput: import("react").
|
|
145
|
+
onBeforeInput: import("react").InputEventHandler<HTMLDivElement>;
|
|
146
146
|
onBeforeInputCapture: import("react").FormEventHandler<HTMLDivElement>;
|
|
147
147
|
onInput: import("react").FormEventHandler<HTMLDivElement>;
|
|
148
148
|
onInputCapture: import("react").FormEventHandler<HTMLDivElement>;
|
|
@@ -192,8 +192,6 @@ export declare function ClickAway({ ref, container, eventType, onClickAway, disa
|
|
|
192
192
|
onProgressCapture: import("react").ReactEventHandler<HTMLDivElement>;
|
|
193
193
|
onRateChange: import("react").ReactEventHandler<HTMLDivElement>;
|
|
194
194
|
onRateChangeCapture: import("react").ReactEventHandler<HTMLDivElement>;
|
|
195
|
-
onResize: import("react").ReactEventHandler<HTMLDivElement>;
|
|
196
|
-
onResizeCapture: import("react").ReactEventHandler<HTMLDivElement>;
|
|
197
195
|
onSeeked: import("react").ReactEventHandler<HTMLDivElement>;
|
|
198
196
|
onSeekedCapture: import("react").ReactEventHandler<HTMLDivElement>;
|
|
199
197
|
onSeeking: import("react").ReactEventHandler<HTMLDivElement>;
|
|
@@ -68,7 +68,7 @@ export const Curd = memo((props) => {
|
|
|
68
68
|
}
|
|
69
69
|
};
|
|
70
70
|
return [...columns || [], controlColumn];
|
|
71
|
-
}, [columns, updatable, deletable]);
|
|
71
|
+
}, [columns, updatable, deletable, renderExtraControl, controlColumnTitle, updateButtonProps, deleteButtonProps, dataName, deleteConfirmProps]);
|
|
72
72
|
const { orderedColumns, actualColumns, innerVisible, setInnerVisible, setInnerOrder } = useCurdColumns({
|
|
73
73
|
columns: completedColumns,
|
|
74
74
|
columnConfigurable
|
|
@@ -174,7 +174,7 @@ export const Curd = memo((props) => {
|
|
|
174
174
|
_jsxs("div", { className: classes.toolbar, children: [_jsxs("div", { className: classes.toolbarLeft, children: [creatable &&
|
|
175
175
|
_jsxs(Button, { prefix: _jsx(Icon, { icon: faPlus }), ...createButtonProps, onClick: createHandler, children: [createName, dataName] }), toolbarLeft] }), _jsxs("div", { className: classes.toolbarRight, children: [!!toolbarRight &&
|
|
176
176
|
_jsxs(_Fragment, { children: [toolbarRight, _jsx(Divider, { className: classes.divider, orientation: "vertical" })] }), reloadable &&
|
|
177
|
-
_jsx(Tooltip, { title: "\u5237\u65B0", children: _jsx(Button, { shape: "circular", variant: "text", color: "text", prefix: _jsx(Icon, { icon: faRotateRight }), loading: innerLoading.current, onClick: reloadHandler }) }), resizable &&
|
|
177
|
+
_jsx(Tooltip, { title: "\u5237\u65B0", children: _jsx(Button, { shape: "circular", variant: "text", color: "text.secondary", prefix: _jsx(Icon, { icon: faRotateRight }), loading: innerLoading.current, onClick: reloadHandler }) }), resizable &&
|
|
178
178
|
_jsx(CurdResizable, { innerSize: innerSize.current, setInnerSize: setInnerSize }), columnConfigurable &&
|
|
179
179
|
_jsx(CurdColumnConfig, { columns: orderedColumns, innerVisible: innerVisible.current, setInnerVisible: setInnerVisible, setInnerOrder: setInnerOrder })] })] }), _jsx("div", { className: classes.card, children: _jsx(DataGrid, { ...dataGridProps, columns: actualColumns, tableProps: {
|
|
180
180
|
...props.tableProps,
|
|
@@ -24,5 +24,5 @@ export const CurdColumnConfig = memo(({ columns = [], innerVisible, setInnerVisi
|
|
|
24
24
|
? [...o, key]
|
|
25
25
|
: o.filter(k => k !== key));
|
|
26
26
|
};
|
|
27
|
-
return (_jsx(Bubble, { css: style, placement: "bottomRight", content: _jsx(DndContext, { sensors: useDndSensors(), onDragEnd: dragEndHandler, children: _jsx(SortableContext, { items: columns?.map((col, i) => col._key ?? i), children: _jsxs("div", { className: classes.content, children: [_jsx("div", { className: classes.title, children: "\u5217\u8BBE\u7F6E" }), columns?.map((col, i) => _jsx(SortableItem, { id: col._key ?? i, component: MenuItem, className: classes.item, prefix: _jsx(Checkbox, { className: classes.checkbox, checked: !isUnset(col._key) && visibleSet.has(col._key), onChange: e => !isUnset(col._key) && toggleVisible(col._key, e.target.checked) }), label: col.title }, col._key ?? i))] }) }) }), children: _jsx(Button, { shape: "circular", variant: "text", color: "text", children: _jsx(Icon, { icon: faGear }) }) }));
|
|
27
|
+
return (_jsx(Bubble, { css: style, placement: "bottomRight", content: _jsx(DndContext, { sensors: useDndSensors(), onDragEnd: dragEndHandler, children: _jsx(SortableContext, { items: columns?.map((col, i) => col._key ?? i), children: _jsxs("div", { className: classes.content, children: [_jsx("div", { className: classes.title, children: "\u5217\u8BBE\u7F6E" }), columns?.map((col, i) => _jsx(SortableItem, { id: col._key ?? i, component: MenuItem, className: classes.item, prefix: _jsx(Checkbox, { className: classes.checkbox, checked: !isUnset(col._key) && visibleSet.has(col._key), onChange: e => !isUnset(col._key) && toggleVisible(col._key, e.target.checked) }), label: col.title }, col._key ?? i))] }) }) }), autoClose: false, children: _jsx(Button, { shape: "circular", variant: "text", color: "text.secondary", children: _jsx(Icon, { icon: faGear }) }) }));
|
|
28
28
|
});
|
|
@@ -22,9 +22,11 @@ export const CurdFilter = memo(({ ref, columns, expandable, showButton, renderCo
|
|
|
22
22
|
*/
|
|
23
23
|
const firstItemRef = useRef(null);
|
|
24
24
|
const [expanded, setExpanded] = useState(false);
|
|
25
|
-
const renderedGrid = (_jsx(Grid, { className: classes.filterGrid, columnGap: spacing[8], children: items?.map((item, i) =>
|
|
26
|
-
|
|
27
|
-
|
|
25
|
+
const renderedGrid = (_jsx(Grid, { className: classes.filterGrid, columnGap: spacing[8], children: items?.map((item, i) => {
|
|
26
|
+
return isValidElement(item)
|
|
27
|
+
? item
|
|
28
|
+
: _createElement(FormItem, { span: { xs: 12, md: 6, lg: 4 }, variant: "grid", ...item, key: item.key ?? i, wrapperRef: !i ? firstItemRef : void 0 });
|
|
29
|
+
}) }));
|
|
28
30
|
/**
|
|
29
31
|
* --------------------------------------------------------------
|
|
30
32
|
* 触发筛选
|
|
@@ -7,5 +7,5 @@ import { Button } from '../button';
|
|
|
7
7
|
import { Icon } from '../..';
|
|
8
8
|
import { faArrowsUpDown } from '@fortawesome/free-solid-svg-icons/faArrowsUpDown';
|
|
9
9
|
export const CurdResizable = memo(({ innerSize, setInnerSize }) => {
|
|
10
|
-
return (_jsx(Tooltip, { title: "\u8868\u683C\u5C3A\u5BF8", children: _jsx(Bubble, { placement: "bottom", content: _jsxs(_Fragment, { children: [_jsx(MenuItem, { value: "small", label: "\u5C0F", selected: innerSize === 'small', onClick: () => setInnerSize('small') }), _jsx(MenuItem, { value: "medium", label: "\u4E2D", selected: innerSize === 'medium', onClick: () => setInnerSize('medium') }), _jsx(MenuItem, { value: "large", label: "\u5927", selected: innerSize === 'large', onClick: () => setInnerSize('large') })] }), children: _jsx(Button, { shape: "circular", variant: "text", color: "text", children: _jsx(Icon, { icon: faArrowsUpDown }) }) }) }));
|
|
10
|
+
return (_jsx(Tooltip, { title: "\u8868\u683C\u5C3A\u5BF8", children: _jsx(Bubble, { placement: "bottom", content: _jsxs(_Fragment, { children: [_jsx(MenuItem, { value: "small", label: "\u5C0F", selected: innerSize === 'small', onClick: () => setInnerSize('small') }), _jsx(MenuItem, { value: "medium", label: "\u4E2D", selected: innerSize === 'medium', onClick: () => setInnerSize('medium') }), _jsx(MenuItem, { value: "large", label: "\u5927", selected: innerSize === 'large', onClick: () => setInnerSize('large') })] }), children: _jsx(Button, { shape: "circular", variant: "text", color: "text.secondary", children: _jsx(Icon, { icon: faArrowsUpDown }) }) }) }));
|
|
11
11
|
});
|
|
@@ -30,7 +30,7 @@ type DataGridSharedProps<R extends RowType> = {
|
|
|
30
30
|
/** 数据的主键名,默认为`id` */
|
|
31
31
|
primaryKey?: keyof R;
|
|
32
32
|
/**
|
|
33
|
-
* 当数据中存在该字段,则会渲染可展开的子行,默认为`null
|
|
33
|
+
* 当数据中存在该字段,则会渲染可展开的子行,默认为`null`,表示不使用子行功能,
|
|
34
34
|
* children允许的值类型:
|
|
35
35
|
* @types {R[] | ReactNode | ((parent: R, expanded: boolean) => ReactNode)}
|
|
36
36
|
*/
|
|
@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
|
|
|
2
2
|
import { createContext, memo, useContext, useMemo } from 'react';
|
|
3
3
|
import { classes, style } from './dataGrid.style';
|
|
4
4
|
import { SelectionContext, useSelectionContext } from '../selectionContext';
|
|
5
|
+
import { Pagination } from '../pagination';
|
|
5
6
|
import { Table, TableContainer } from '../table';
|
|
6
7
|
import { clsx, cloneRef, useControlled, useDataGridColumns } from '../../utils';
|
|
7
8
|
import { Loading } from '../loading';
|
|
@@ -92,21 +93,26 @@ export const DataGrid = memo(({ columns, rows, rowProps, primaryKey = 'id', chil
|
|
|
92
93
|
pageSize: innerPageSize.current,
|
|
93
94
|
onChange: pageChangeHandler
|
|
94
95
|
};
|
|
96
|
+
const renderPaginationFn = () => {
|
|
97
|
+
return renderPagination
|
|
98
|
+
? renderPagination(_paginationProps)
|
|
99
|
+
: _jsx(Pagination, { ..._paginationProps });
|
|
100
|
+
};
|
|
95
101
|
const paginatedRows = useMemo(() => {
|
|
96
102
|
if (!paginatable) {
|
|
97
103
|
return orderedRows;
|
|
98
104
|
}
|
|
99
105
|
const { page, pageSize } = _paginationProps;
|
|
100
106
|
return orderedRows?.slice((page - 1) * pageSize, page * pageSize);
|
|
101
|
-
}, [orderedRows, _paginationProps.page, _paginationProps.pageSize]);
|
|
102
|
-
return (
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
107
|
+
}, [orderedRows, _paginationProps.page, _paginationProps.pageSize, paginatable]);
|
|
108
|
+
return (_jsxs(Loading, { ...props, css: style, className: clsx(classes.root, props.className), open: loading, "data-column-resizable": columnResizable, children: [_jsx(ColumnResizeContext, { columnResizable: columnResizable, children: ({ scrollerRef, tableRef }) => _jsxs(TableContainer, { ref: scrollerRef, className: classes.container, children: [_jsx(Table, { size: size, bordered: bordered, striped: striped, ...tableProps, ref: cloneRef(tableProps?.ref, tableRef), children: _jsxs(SelectionContext, { options: rows, primaryKey: primaryKey, childrenKey: childrenKey !== null ? childrenKey : void 0, relation: relation, integration: integration, disabled: !selectable, multiple: multiple, defaultValue: defaultValue, value: value, onChange: onChange, children: [_jsx(DataGridHead, { flattedColumns: flattedColumns, completedColumns: completedColumns, rows: rows, primaryKey: primaryKey, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler, allowSelectAll: allowSelectAll, columnResizable: columnResizable }), _jsx("tbody", { children: _jsx(DataGridContext, { value: useMemo(() => ({
|
|
109
|
+
rowProps, primaryKey, childrenKey, clickRowToSelect, indent, renderExpandIcon,
|
|
110
|
+
expandedSet, flattedColumns, toggleExpanded
|
|
111
|
+
}), [
|
|
112
|
+
rowProps, primaryKey, childrenKey, clickRowToSelect, indent, renderExpandIcon,
|
|
113
|
+
expandedSet, flattedColumns
|
|
114
|
+
]), children: !!paginatedRows?.length &&
|
|
115
|
+
_jsx(DataGridRows, { rows: paginatedRows }) }) })] }) }), !paginatedRows?.length && (emptyPlaceholder ?? _jsx(Placeholder, { className: classes.empty }))] }) }), renderPaginationFn()] }));
|
|
110
116
|
});
|
|
111
117
|
DataGrid.EXPAND_COLUMN = Symbol('expand-column');
|
|
112
118
|
DataGrid.SELECT_COLUMN = Symbol('select-column');
|
|
@@ -19,7 +19,7 @@ size, labelWidth, colon, labelPlacement, disableMargin, disablePadding, span = {
|
|
|
19
19
|
const spanNum = useResponsiveValue(span, variant === 'grid');
|
|
20
20
|
return variant === 'grid'
|
|
21
21
|
? _jsxs(GridItem, { ...props, css: gridItemStyle, className: clsx(classes.item, props.className), span: span, "data-size": size, "data-label-placement": labelPlacement, "data-disable-margin": disableMargin, children: [!!label &&
|
|
22
|
-
_jsxs("div", { className: classes.label, style: { width: labelWidth }, children: [label, !!colon &&
|
|
22
|
+
_jsxs("div", { className: classes.label, style: { width: labelWidth }, children: [label, !!colon && labelPlacement === 'left' &&
|
|
23
23
|
_jsx("div", { className: classes.colon, children: colon })] }), _jsx("div", { className: classes.content, children: content ?? props.children })] })
|
|
24
24
|
: labelPlacement === 'top'
|
|
25
25
|
? _jsx("td", { className: classes.vertical, colSpan: spanNum.current, children: _jsxs("div", { className: classes.verticalColWrap, children: [_jsx("div", { className: `${classes.col} ${classes.labelCol}`, "data-size": size, children: label }), _jsx("div", { className: `${classes.col} ${classes.contentCol}`, "data-size": size, "data-disable-padding": disablePadding, children: content ?? props.children })] }) })
|
|
@@ -133,18 +133,21 @@ export const gridItemStyle = defineCss(({ spacing, text }) => css `
|
|
|
133
133
|
.${classes.label} {
|
|
134
134
|
text-align: right;
|
|
135
135
|
justify-content: flex-end;
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
136
|
+
|
|
137
|
+
+ .${classes.content} {
|
|
138
|
+
margin-left: ${spacing[3]}px;
|
|
139
|
+
}
|
|
140
140
|
}
|
|
141
141
|
}
|
|
142
142
|
|
|
143
143
|
&[data-label-placement=right] {
|
|
144
144
|
.${classes.content} {
|
|
145
145
|
text-align: right;
|
|
146
|
-
margin-right: ${spacing[2]}px;
|
|
147
146
|
justify-content: flex-end;
|
|
148
147
|
}
|
|
148
|
+
|
|
149
|
+
.${classes.label} + .${classes.content} {
|
|
150
|
+
margin-right: ${spacing[3]}px;
|
|
151
|
+
}
|
|
149
152
|
}
|
|
150
153
|
`);
|