@canlooks/can-ui 0.0.163 → 0.0.164
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/curd/curd.js +6 -2
- package/dist/cjs/components/dataGrid/dataGrid.d.ts +1 -0
- package/dist/cjs/components/dataGrid/dataGrid.js +6 -1
- package/dist/esm/components/curd/curd.js +7 -3
- package/dist/esm/components/dataGrid/dataGrid.d.ts +1 -0
- package/dist/esm/components/dataGrid/dataGrid.js +6 -1
- package/package.json +1 -1
|
@@ -134,6 +134,7 @@ exports.Curd = (0, react_1.memo)((props) => {
|
|
|
134
134
|
* -------------------------------------------------------------
|
|
135
135
|
* 行数据
|
|
136
136
|
*/
|
|
137
|
+
const containerRef = (0, react_1.useRef)(null);
|
|
137
138
|
const { setOptions } = (0, selectionContext_1.useSelectionContext)();
|
|
138
139
|
const [innerRows, _setInnerRows] = (0, utils_1.useDerivedState)(props.rows);
|
|
139
140
|
(0, react_1.useEffect)(() => {
|
|
@@ -142,6 +143,7 @@ exports.Curd = (0, react_1.memo)((props) => {
|
|
|
142
143
|
const setInnerRows = (data) => {
|
|
143
144
|
setOptions?.(data);
|
|
144
145
|
_setInnerRows(data);
|
|
146
|
+
containerRef.current.scrollTop = 0;
|
|
145
147
|
};
|
|
146
148
|
const [innerTotal, setInnerTotal] = (0, utils_1.useDerivedState)(props.paginationProps?.total || 0);
|
|
147
149
|
const suppressReload = (0, react_1.useRef)(false);
|
|
@@ -245,10 +247,12 @@ exports.Curd = (0, react_1.memo)((props) => {
|
|
|
245
247
|
(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 &&
|
|
246
248
|
(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)(icon_1.Icon, { icon: faRotateRight_1.faRotateRight }), loading: innerLoading.current, onClick: reloadHandler }) }), resizable &&
|
|
247
249
|
(0, jsx_runtime_1.jsx)(curdResizable_1.CurdResizable, { innerSize: innerSize.current, setInnerSize: setInnerSize }), columnConfigurable &&
|
|
248
|
-
(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,
|
|
250
|
+
(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, slotProps: {
|
|
251
|
+
container: { ref: (0, utils_1.cloneRef)(containerRef, dataGridProps?.slotProps?.container?.ref) }
|
|
252
|
+
}, tableProps: {
|
|
249
253
|
...props.tableProps,
|
|
250
254
|
...resizable && { size: innerSize.current }
|
|
251
|
-
}, loading: innerLoading.current, rows: innerRows.current, paginatable: !loadRows && props.paginatable, renderPagination: loadRows && props.paginatable !== false
|
|
255
|
+
}, columns: actualColumns, loading: innerLoading.current, rows: innerRows.current, paginatable: !loadRows && props.paginatable, renderPagination: loadRows && props.paginatable !== false
|
|
252
256
|
? () => (0, jsx_runtime_1.jsx)(pagination_1.Pagination, { ...props.paginationProps, total: innerTotal.current, page: innerPage.current, onPageChange: setInnerPage, pageSize: innerPageSize.current, onPageSizeChange: setInnerPageSize })
|
|
253
257
|
: props.renderPagination, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler, _noRenderFormTag: true }) })] }), (creatable || updatable) &&
|
|
254
258
|
(0, jsx_runtime_1.jsx)(curdDialog_1.CurdDialog, { ...dialogProps, ref: curdDialogRef, onFinish: finishHandler, curdProps: props })] }));
|
|
@@ -53,6 +53,7 @@ export interface ColumnType<R extends RowType = RowType> extends Omit<ComponentP
|
|
|
53
53
|
_negativeRowSpan?: number;
|
|
54
54
|
}
|
|
55
55
|
interface DataGridSharedProps<R extends RowType = RowType> extends SlotsAndProps<{
|
|
56
|
+
container: ComponentProps<'div'>;
|
|
56
57
|
tr: ComponentProps<'tr'>;
|
|
57
58
|
}> {
|
|
58
59
|
rowProps?(row: R, index: number, rows: R[]): ComponentProps<'tr'>;
|
|
@@ -130,7 +130,12 @@ exports.DataGrid = (0, react_1.memo)(({ slots, slotProps, columns, rows, rowProp
|
|
|
130
130
|
const { page, pageSize } = _paginationProps;
|
|
131
131
|
return orderedRows?.slice((page - 1) * pageSize, page * pageSize);
|
|
132
132
|
}, [orderedRows, _paginationProps.page, _paginationProps.pageSize, paginatable]);
|
|
133
|
-
const
|
|
133
|
+
const { container: Container = table_1.TableContainer } = slots || {};
|
|
134
|
+
const { container: containerProps } = slotProps || {};
|
|
135
|
+
const renderedContent = ((0, jsx_runtime_1.jsx)(columnResize_1.ColumnResizeContext, { columnResizable: columnResizable, children: ({ scrollerRef, tableRef }) => (0, jsx_runtime_1.jsxs)(Container, { ...(0, utils_1.mergeComponentProps)(containerProps, {
|
|
136
|
+
ref: scrollerRef,
|
|
137
|
+
className: dataGrid_style_1.classes.container
|
|
138
|
+
}), 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, { rows: rows, flattedColumns: flattedColumns, completedColumns: completedColumns, primaryKey: primaryKey, allowSelectAll: allowSelectAll, columnResizable: columnResizable, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler, filterBubbleProps: filterBubbleProps, onFilterClick: onFilterClick }), (0, jsx_runtime_1.jsx)("tbody", { children: (0, jsx_runtime_1.jsx)(DataGridContext, { value: (0, react_1.useMemo)(() => ({
|
|
134
139
|
slots, slotProps,
|
|
135
140
|
rowProps, primaryKey, childrenKey, clickRowToSelect, indent, renderExpandIcon,
|
|
136
141
|
expandedSet, flattedColumns, toggleExpanded
|
|
@@ -4,7 +4,7 @@ import { DataGrid } from '../dataGrid/index.js';
|
|
|
4
4
|
import { Form } from '../form/index.js';
|
|
5
5
|
import { CurdFilterable } from './curdFilterable.js';
|
|
6
6
|
import { classes, style } from './curd.style.js';
|
|
7
|
-
import { clsx, useControlled, useCurdColumns, useDerivedState, useLoading, useSync, mergeComponentProps, CONTROL_COLUMN_KEY, useStrictEffect } from '../../utils/index.js';
|
|
7
|
+
import { clsx, useControlled, useCurdColumns, useDerivedState, useLoading, useSync, mergeComponentProps, CONTROL_COLUMN_KEY, useStrictEffect, cloneRef } from '../../utils/index.js';
|
|
8
8
|
import { Button } from '../button/index.js';
|
|
9
9
|
import { Tooltip } from '../tooltip/index.js';
|
|
10
10
|
import { CurdColumnConfig } from './curdColumnConfig.js';
|
|
@@ -131,6 +131,7 @@ export const Curd = memo((props) => {
|
|
|
131
131
|
* -------------------------------------------------------------
|
|
132
132
|
* 行数据
|
|
133
133
|
*/
|
|
134
|
+
const containerRef = useRef(null);
|
|
134
135
|
const { setOptions } = useSelectionContext();
|
|
135
136
|
const [innerRows, _setInnerRows] = useDerivedState(props.rows);
|
|
136
137
|
useEffect(() => {
|
|
@@ -139,6 +140,7 @@ export const Curd = memo((props) => {
|
|
|
139
140
|
const setInnerRows = (data) => {
|
|
140
141
|
setOptions?.(data);
|
|
141
142
|
_setInnerRows(data);
|
|
143
|
+
containerRef.current.scrollTop = 0;
|
|
142
144
|
};
|
|
143
145
|
const [innerTotal, setInnerTotal] = useDerivedState(props.paginationProps?.total || 0);
|
|
144
146
|
const suppressReload = useRef(false);
|
|
@@ -242,10 +244,12 @@ export const Curd = memo((props) => {
|
|
|
242
244
|
_jsxs(_Fragment, { children: [toolbarRight, _jsx(Divider, { className: classes.divider, orientation: "vertical" })] }), reloadable &&
|
|
243
245
|
_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 &&
|
|
244
246
|
_jsx(CurdResizable, { innerSize: innerSize.current, setInnerSize: setInnerSize }), columnConfigurable &&
|
|
245
|
-
_jsx(CurdColumnConfig, { columns: orderedColumns, innerVisible: innerVisible.current, setInnerVisible: setInnerVisible, setInnerOrder: setInnerOrder })] })] }), _jsx("div", { className: classes.card, children: _jsx(DataGrid, { ...dataGridProps,
|
|
247
|
+
_jsx(CurdColumnConfig, { columns: orderedColumns, innerVisible: innerVisible.current, setInnerVisible: setInnerVisible, setInnerOrder: setInnerOrder })] })] }), _jsx("div", { className: classes.card, children: _jsx(DataGrid, { ...dataGridProps, slotProps: {
|
|
248
|
+
container: { ref: cloneRef(containerRef, dataGridProps?.slotProps?.container?.ref) }
|
|
249
|
+
}, tableProps: {
|
|
246
250
|
...props.tableProps,
|
|
247
251
|
...resizable && { size: innerSize.current }
|
|
248
|
-
}, loading: innerLoading.current, rows: innerRows.current, paginatable: !loadRows && props.paginatable, renderPagination: loadRows && props.paginatable !== false
|
|
252
|
+
}, columns: actualColumns, loading: innerLoading.current, rows: innerRows.current, paginatable: !loadRows && props.paginatable, renderPagination: loadRows && props.paginatable !== false
|
|
249
253
|
? () => _jsx(Pagination, { ...props.paginationProps, total: innerTotal.current, page: innerPage.current, onPageChange: setInnerPage, pageSize: innerPageSize.current, onPageSizeChange: setInnerPageSize })
|
|
250
254
|
: props.renderPagination, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler, _noRenderFormTag: true }) })] }), (creatable || updatable) &&
|
|
251
255
|
_jsx(CurdDialog, { ...dialogProps, ref: curdDialogRef, onFinish: finishHandler, curdProps: props })] }));
|
|
@@ -53,6 +53,7 @@ export interface ColumnType<R extends RowType = RowType> extends Omit<ComponentP
|
|
|
53
53
|
_negativeRowSpan?: number;
|
|
54
54
|
}
|
|
55
55
|
interface DataGridSharedProps<R extends RowType = RowType> extends SlotsAndProps<{
|
|
56
|
+
container: ComponentProps<'div'>;
|
|
56
57
|
tr: ComponentProps<'tr'>;
|
|
57
58
|
}> {
|
|
58
59
|
rowProps?(row: R, index: number, rows: R[]): ComponentProps<'tr'>;
|
|
@@ -126,7 +126,12 @@ export const DataGrid = memo(({ slots, slotProps, columns, rows, rowProps, prima
|
|
|
126
126
|
const { page, pageSize } = _paginationProps;
|
|
127
127
|
return orderedRows?.slice((page - 1) * pageSize, page * pageSize);
|
|
128
128
|
}, [orderedRows, _paginationProps.page, _paginationProps.pageSize, paginatable]);
|
|
129
|
-
const
|
|
129
|
+
const { container: Container = TableContainer } = slots || {};
|
|
130
|
+
const { container: containerProps } = slotProps || {};
|
|
131
|
+
const renderedContent = (_jsx(ColumnResizeContext, { columnResizable: columnResizable, children: ({ scrollerRef, tableRef }) => _jsxs(Container, { ...mergeComponentProps(containerProps, {
|
|
132
|
+
ref: scrollerRef,
|
|
133
|
+
className: classes.container
|
|
134
|
+
}), 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, { rows: rows, flattedColumns: flattedColumns, completedColumns: completedColumns, primaryKey: primaryKey, allowSelectAll: allowSelectAll, columnResizable: columnResizable, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler, filterBubbleProps: filterBubbleProps, onFilterClick: onFilterClick }), _jsx("tbody", { children: _jsx(DataGridContext, { value: useMemo(() => ({
|
|
130
135
|
slots, slotProps,
|
|
131
136
|
rowProps, primaryKey, childrenKey, clickRowToSelect, indent, renderExpandIcon,
|
|
132
137
|
expandedSet, flattedColumns, toggleExpanded
|