@canlooks/can-ui 0.0.87 → 0.0.89

package/dist/cjs/components/curd/curd.js

@@ -123,7 +123,7 @@ exports.Curd = (0, react_1.memo)((props) => {
             const res = await loadRows(props.paginatable !== false
                 ? {
                     page: innerPage.current,
-                    pageSize: innerPageSize.current,
+                    pageSize: innerPageSize.current
                 }
                 : void 0, innerFilterRef.current.getFormValue(), innerOrderColumn.current
                 ? {
@@ -187,24 +187,24 @@ exports.Curd = (0, react_1.memo)((props) => {
         innerLoadRows().then();
         message.success(deleteName + '成功').then();
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { ...wrapperProps, css: curd_style_1.style, className: (0, utils_1.clsx)(curd_style_1.classes.root, wrapperProps?.className), "data-variant": variant, children: [(0, jsx_runtime_1.jsxs)(form_1.Form, { ...(0, utils_1.mergeComponentProps)({
+    return ((0, jsx_runtime_1.jsxs)("div", { ...wrapperProps, css: curd_style_1.style, className: (0, utils_1.clsx)(curd_style_1.classes.root, wrapperProps?.className), "data-variant": variant, children: [(0, jsx_runtime_1.jsx)(form_1.Form, { ...(0, utils_1.mergeComponentProps)({
                     variant: 'plain',
                     initialValue: initialFilterValue
                 }, filterProps, {
                     ref: innerFilterRef,
                     onFinish: filterHandler
-                }), children: [renderFilterableFn(), (creatable || toolbarLeft || toolbarRight || reloadable || resizable || columnConfigurable) &&
-                        (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 &&
-                                            (0, jsx_runtime_1.jsxs)(button_1.Button, { prefix: (0, jsx_runtime_1.jsx)(icon_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 &&
-                                            (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 &&
-                                            (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 &&
-                                            (0, jsx_runtime_1.jsx)(curdResizable_1.CurdResizable, { innerSize: innerSize.current, setInnerSize: setInnerSize }), columnConfigurable &&
-                                            (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: {
-                                ...props.tableProps,
-                                ...resizable && { size: innerSize.current }
-                            }, loading: innerLoading.current, rows: innerRows.current, paginatable: !loadRows && props.paginatable, renderPagination: loadRows && props.paginatable !== false
-                                ? () => (0, jsx_runtime_1.jsx)(pagination_1.Pagination, { ...props.paginationProps, total: innerTotal.current, page: innerPage.current, onPageChange: setInnerPage, pageSize: innerPageSize.current, onPageSizeChange: setInnerPageSize })
-                                : props.renderPagination, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler }) })] }), (creatable || updatable) &&
+                }), children: renderFilterableFn() }), (creatable || toolbarLeft || toolbarRight || reloadable || resizable || columnConfigurable) &&
+                (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 &&
+                                    (0, jsx_runtime_1.jsxs)(button_1.Button, { prefix: (0, jsx_runtime_1.jsx)(icon_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 &&
+                                    (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 &&
+                                    (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 &&
+                                    (0, jsx_runtime_1.jsx)(curdResizable_1.CurdResizable, { innerSize: innerSize.current, setInnerSize: setInnerSize }), columnConfigurable &&
+                                    (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: {
+                        ...props.tableProps,
+                        ...resizable && { size: innerSize.current }
+                    }, loading: innerLoading.current, rows: innerRows.current, paginatable: !loadRows && props.paginatable, renderPagination: loadRows && props.paginatable !== false
+                        ? () => (0, jsx_runtime_1.jsx)(pagination_1.Pagination, { ...props.paginationProps, total: innerTotal.current, page: innerPage.current, onPageChange: setInnerPage, pageSize: innerPageSize.current, onPageSizeChange: setInnerPageSize })
+                        : props.renderPagination, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler }) }), (creatable || updatable) &&
                 (0, jsx_runtime_1.jsx)(curdDialog_1.CurdDialog, { ...dialogProps, ref: curdDialogRef, onFinish: finishHandler, curdProps: props })] }));
 });
 exports.Curd.Filter = curdFilterable_1.CurdFilterable;

package/dist/cjs/components/curd/curd.style.js

@@ -88,7 +88,7 @@ exports.style = (0, utils_1.defineCss)(({ spacing, text, background, borderRadiu
         min-height: 0;
         border-radius: ${borderRadius}px;
 
-        .${loading_style_1.classes.container} {
+        .${loading_style_1.classes.root} {
             height: 100%;
         }
     }

package/dist/cjs/components/dataGrid/dataGrid.style.js

@@ -139,6 +139,7 @@ exports.style = (0, utils_1.defineCss)(({ spacing, mode, gray, text, colors, eas
     }
 
     .${exports.classes.empty} {
+        height: auto;
         position: sticky;
         left: 0;
     }

package/dist/cjs/components/dateTimePicker/timer.js

@@ -34,10 +34,7 @@ function TimerItem({ type, value, onChange }) {
         if (min && min.isSame(value, 'date') && min.get(type) > num) {
             return true;
         }
-        if (max && max.isSame(value, 'date') && max.get(type) < num) {
-            return true;
-        }
-        return false;
+        return !!(max && max.isSame(value, 'date') && max.get(type) < num);
     };
     const scrollerRef = (0, react_1.useRef)(null);
     const selectedItemRef = (0, popper_1.useScrollToTarget)(scrollerRef);

package/dist/cjs/components/dialog/dialog.js

@@ -63,14 +63,6 @@ function Dialog({ icon, title, footer, prefix, suffix, width = 420, minWidth, ma
             el.dataset.borderBottom = (el.scrollHeight - el.clientHeight > el.scrollTop).toString();
         }
     };
-    (0, react_1.useEffect)(() => {
-        if (scrollBehavior === 'card') {
-            bodyRef.current.addEventListener('scroll', onScroll);
-            return () => {
-                bodyRef.current.removeEventListener('scroll', onScroll);
-            };
-        }
-    }, [scrollBehavior]);
     (0, react_1.useEffect)(() => {
         if (scrollBehavior !== 'card') {
             return;

package/dist/cjs/components/popper/popper.js

@@ -500,6 +500,7 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, effe
      */
     const beforeOpenCallbacks = (0, react_1.useRef)(new Set());
     const triggerBeforeOpen = () => {
+        console.log('trigger', beforeOpenCallbacks.current);
         for (const cb of beforeOpenCallbacks.current) {
             cb();
         }

package/dist/cjs/components/popper/popperContext.d.ts

@@ -17,4 +17,4 @@ export declare function usePopperContext(): {
  * 当弹框打开时，滚动至已选项
  * @returns {RefObject} ref
  */
-export declare function useScrollToTarget<T extends HTMLElement>(scrollerRef: RefObject<Element | null>): RefObject<T | null>;
+export declare function useScrollToTarget<T extends HTMLElement>(scrollerRef: RefObject<HTMLElement | null>): RefObject<T | null>;

package/dist/cjs/components/popper/popperContext.js

@@ -23,16 +23,18 @@ function usePopperContext() {
 function useScrollToTarget(scrollerRef) {
     const ref = (0, react_1.useRef)(null);
     const { beforeOpenCallbacks } = usePopperContext();
-    (0, react_1.useEffect)(() => {
-        const beforeOpen = () => {
-            if (ref.current && scrollerRef.current && scrollerRef.current.scrollHeight > scrollerRef.current.clientHeight) {
-                scrollerRef.current.scrollTop = ref.current.offsetTop + ref.current.clientHeight / 2 - scrollerRef.current.clientHeight / 2;
-            }
-        };
+    const beforeOpen = (0, react_1.useCallback)(() => {
+        const targetEl = ref.current;
+        const scrollerEl = scrollerRef.current;
+        if (targetEl && scrollerEl && scrollerEl.scrollHeight > scrollerEl.clientHeight) {
+            scrollerEl.scrollTop = targetEl.offsetTop + targetEl.clientHeight / 2 - scrollerEl.clientHeight / 2;
+        }
+    }, []);
+    (0, react_1.useMemo)(() => {
         beforeOpenCallbacks.add(beforeOpen);
-        return () => {
-            beforeOpenCallbacks.delete(beforeOpen);
-        };
+    }, []);
+    (0, react_1.useEffect)(() => () => {
+        beforeOpenCallbacks.delete(beforeOpen);
     }, []);
     return ref;
 }

package/dist/esm/components/curd/curd.js

@@ -120,7 +120,7 @@ export const Curd = memo((props) => {
             const res = await loadRows(props.paginatable !== false
                 ? {
                     page: innerPage.current,
-                    pageSize: innerPageSize.current,
+                    pageSize: innerPageSize.current
                 }
                 : void 0, innerFilterRef.current.getFormValue(), innerOrderColumn.current
                 ? {
@@ -184,24 +184,24 @@ export const Curd = memo((props) => {
         innerLoadRows().then();
         message.success(deleteName + '成功').then();
     };
-    return (_jsxs("div", { ...wrapperProps, css: style, className: clsx(classes.root, wrapperProps?.className), "data-variant": variant, children: [_jsxs(Form, { ...mergeComponentProps({
+    return (_jsxs("div", { ...wrapperProps, css: style, className: clsx(classes.root, wrapperProps?.className), "data-variant": variant, children: [_jsx(Form, { ...mergeComponentProps({
                     variant: 'plain',
                     initialValue: initialFilterValue
                 }, filterProps, {
                     ref: innerFilterRef,
                     onFinish: filterHandler
-                }), children: [renderFilterableFn(), (creatable || toolbarLeft || toolbarRight || reloadable || resizable || columnConfigurable) &&
-                        _jsxs("div", { className: classes.toolbar, children: [_jsxs("div", { className: classes.toolbarLeft, children: [creatable &&
-                                            _jsxs(Button, { prefix: _jsx(Icon, { icon: faPlus }), ...createButtonProps, onClick: createHandler, children: [createName, dataName] }), toolbarLeft] }), _jsxs("div", { className: classes.toolbarRight, children: [!!toolbarRight &&
-                                            _jsxs(_Fragment, { children: [toolbarRight, _jsx(Divider, { className: classes.divider, orientation: "vertical" })] }), reloadable &&
-                                            _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 &&
-                                            _jsx(CurdResizable, { innerSize: innerSize.current, setInnerSize: setInnerSize }), columnConfigurable &&
-                                            _jsx(CurdColumnConfig, { columns: orderedColumns, innerVisible: innerVisible.current, setInnerVisible: setInnerVisible, setInnerOrder: setInnerOrder })] })] }), _jsx("div", { className: classes.card, children: _jsx(DataGrid, { ...dataGridProps, columns: actualColumns, tableProps: {
-                                ...props.tableProps,
-                                ...resizable && { size: innerSize.current }
-                            }, loading: innerLoading.current, rows: innerRows.current, paginatable: !loadRows && props.paginatable, renderPagination: loadRows && props.paginatable !== false
-                                ? () => _jsx(Pagination, { ...props.paginationProps, total: innerTotal.current, page: innerPage.current, onPageChange: setInnerPage, pageSize: innerPageSize.current, onPageSizeChange: setInnerPageSize })
-                                : props.renderPagination, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler }) })] }), (creatable || updatable) &&
+                }), children: renderFilterableFn() }), (creatable || toolbarLeft || toolbarRight || reloadable || resizable || columnConfigurable) &&
+                _jsxs("div", { className: classes.toolbar, children: [_jsxs("div", { className: classes.toolbarLeft, children: [creatable &&
+                                    _jsxs(Button, { prefix: _jsx(Icon, { icon: faPlus }), ...createButtonProps, onClick: createHandler, children: [createName, dataName] }), toolbarLeft] }), _jsxs("div", { className: classes.toolbarRight, children: [!!toolbarRight &&
+                                    _jsxs(_Fragment, { children: [toolbarRight, _jsx(Divider, { className: classes.divider, orientation: "vertical" })] }), reloadable &&
+                                    _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 &&
+                                    _jsx(CurdResizable, { innerSize: innerSize.current, setInnerSize: setInnerSize }), columnConfigurable &&
+                                    _jsx(CurdColumnConfig, { columns: orderedColumns, innerVisible: innerVisible.current, setInnerVisible: setInnerVisible, setInnerOrder: setInnerOrder })] })] }), _jsx("div", { className: classes.card, children: _jsx(DataGrid, { ...dataGridProps, columns: actualColumns, tableProps: {
+                        ...props.tableProps,
+                        ...resizable && { size: innerSize.current }
+                    }, loading: innerLoading.current, rows: innerRows.current, paginatable: !loadRows && props.paginatable, renderPagination: loadRows && props.paginatable !== false
+                        ? () => _jsx(Pagination, { ...props.paginationProps, total: innerTotal.current, page: innerPage.current, onPageChange: setInnerPage, pageSize: innerPageSize.current, onPageSizeChange: setInnerPageSize })
+                        : props.renderPagination, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler }) }), (creatable || updatable) &&
                 _jsx(CurdDialog, { ...dialogProps, ref: curdDialogRef, onFinish: finishHandler, curdProps: props })] }));
 });
 Curd.Filter = CurdFilterable;

package/dist/esm/components/curd/curd.style.js

@@ -85,7 +85,7 @@ export const style = defineCss(({ spacing, text, background, borderRadius }) =>
         min-height: 0;
         border-radius: ${borderRadius}px;
 
-        .${loadingClasses.container} {
+        .${loadingClasses.root} {
             height: 100%;
         }
     }

package/dist/esm/components/dataGrid/dataGrid.style.js

@@ -136,6 +136,7 @@ export const style = defineCss(({ spacing, mode, gray, text, colors, easing }) =
     }
 
     .${classes.empty} {
+        height: auto;
         position: sticky;
         left: 0;
     }

package/dist/esm/components/dateTimePicker/timer.js

@@ -31,10 +31,7 @@ function TimerItem({ type, value, onChange }) {
         if (min && min.isSame(value, 'date') && min.get(type) > num) {
             return true;
         }
-        if (max && max.isSame(value, 'date') && max.get(type) < num) {
-            return true;
-        }
-        return false;
+        return !!(max && max.isSame(value, 'date') && max.get(type) < num);
     };
     const scrollerRef = useRef(null);
     const selectedItemRef = useScrollToTarget(scrollerRef);

package/dist/esm/components/dialog/dialog.js

@@ -60,14 +60,6 @@ export function Dialog({ icon, title, footer, prefix, suffix, width = 420, minWi
             el.dataset.borderBottom = (el.scrollHeight - el.clientHeight > el.scrollTop).toString();
         }
     };
-    useEffect(() => {
-        if (scrollBehavior === 'card') {
-            bodyRef.current.addEventListener('scroll', onScroll);
-            return () => {
-                bodyRef.current.removeEventListener('scroll', onScroll);
-            };
-        }
-    }, [scrollBehavior]);
     useEffect(() => {
         if (scrollBehavior !== 'card') {
             return;

package/dist/esm/components/popper/popper.js

@@ -497,6 +497,7 @@ export function Popper({ ref, popperRef, anchorElement, container = document.bod
      */
     const beforeOpenCallbacks = useRef(new Set());
     const triggerBeforeOpen = () => {
+        console.log('trigger', beforeOpenCallbacks.current);
         for (const cb of beforeOpenCallbacks.current) {
             cb();
         }

package/dist/esm/components/popper/popperContext.d.ts

@@ -17,4 +17,4 @@ export declare function usePopperContext(): {
  * 当弹框打开时，滚动至已选项
  * @returns {RefObject} ref
  */
-export declare function useScrollToTarget<T extends HTMLElement>(scrollerRef: RefObject<Element | null>): RefObject<T | null>;
+export declare function useScrollToTarget<T extends HTMLElement>(scrollerRef: RefObject<HTMLElement | null>): RefObject<T | null>;

package/dist/esm/components/popper/popperContext.js

@@ -1,4 +1,4 @@
-import { createContext, useContext, useRef, useEffect } from 'react';
+import { createContext, useContext, useRef, useEffect, useMemo, useCallback } from 'react';
 export const PopperContext = createContext({
     autoClose: false,
     open: false,
@@ -18,16 +18,18 @@ export function usePopperContext() {
 export function useScrollToTarget(scrollerRef) {
     const ref = useRef(null);
     const { beforeOpenCallbacks } = usePopperContext();
-    useEffect(() => {
-        const beforeOpen = () => {
-            if (ref.current && scrollerRef.current && scrollerRef.current.scrollHeight > scrollerRef.current.clientHeight) {
-                scrollerRef.current.scrollTop = ref.current.offsetTop + ref.current.clientHeight / 2 - scrollerRef.current.clientHeight / 2;
-            }
-        };
+    const beforeOpen = useCallback(() => {
+        const targetEl = ref.current;
+        const scrollerEl = scrollerRef.current;
+        if (targetEl && scrollerEl && scrollerEl.scrollHeight > scrollerEl.clientHeight) {
+            scrollerEl.scrollTop = targetEl.offsetTop + targetEl.clientHeight / 2 - scrollerEl.clientHeight / 2;
+        }
+    }, []);
+    useMemo(() => {
         beforeOpenCallbacks.add(beforeOpen);
-        return () => {
-            beforeOpenCallbacks.delete(beforeOpen);
-        };
+    }, []);
+    useEffect(() => () => {
+        beforeOpenCallbacks.delete(beforeOpen);
     }, []);
     return ref;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canlooks/can-ui",
-  "version": "0.0.87",
+  "version": "0.0.89",
   "author": "C.CanLiang <canlooks@gmail.com>",
   "description": "My ui framework",
   "license": "MIT",