@canlooks/can-ui 0.0.167 → 0.0.169

package/dist/esm/components/transitionBase/collapse.js

@@ -1,60 +1,71 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { useRef, useState } from 'react';
+import { useLayoutEffect, useRef, useState } from 'react';
 import { TransitionBase } from './transitionBase.js';
-import { cloneRef, useStrictEffect } from '../../utils/index.js';
+import { cloneRef, useUpdateEffect } from '../../utils/index.js';
 export const Collapse = ({ transitionType = 'sweeping', ...props }) => {
     const Component = transitionType === 'sweeping' ? Sweeping : TransitionBase;
     return (_jsx(Component, { ...props, _mode: transitionType === 'sweeping' ? '_sweeping' : 'collapse' }));
 };
-const Sweeping = ({ ref, in: _in = false, appear = true, orientation = 'vertical', collapsedSize = 0, ...props }) => {
+const Sweeping = ({ ref, in: _in = false, orientation = 'vertical', collapsedSize = 0, appear = true, ...props }) => {
     const innerRef = useRef(null);
+    const styleProperty = orientation === 'vertical' ? 'height' : 'width';
     const getCollapsedSize = () => {
         return typeof collapsedSize === 'function' ? collapsedSize() : collapsedSize;
     };
-    const [size, setSize] = useState(() => {
-        if (_in && !appear) {
-            return 'auto';
-        }
-        return getCollapsedSize();
-    });
-    const [isEntered, setIsEntered] = useState(_in && !appear);
-    const styleProperty = orientation === 'vertical' ? 'height' : 'width';
-    const expand = () => {
+    const [size, setSize] = useState(() => !_in ? getCollapsedSize() : 'auto');
+    const getFullSize = () => {
         const el = innerRef.current;
+        let size;
         if (el) {
             el.style.transition = 'none';
+            const originalSize = el.style[styleProperty];
             el.style[styleProperty] = 'auto';
-            const newSize = el[orientation === 'vertical' ? 'offsetHeight' : 'offsetWidth'];
-            el.style[styleProperty] = size + 'px';
+            size = el[orientation === 'vertical' ? 'offsetHeight' : 'offsetWidth'];
+            el.style[styleProperty] = originalSize;
             el.style.transition = '';
+        }
+        return size;
+    };
+    const expand = (fromSize) => {
+        const fullSize = getFullSize();
+        if (typeof fullSize !== 'undefined') {
+            if (typeof fromSize !== 'undefined') {
+                const el = innerRef.current;
+                el.style[styleProperty] = fromSize + 'px';
+            }
             requestAnimationFrame(() => {
-                setSize(newSize);
+                setSize(fullSize);
             });
         }
     };
+    const getCurrentSize = () => {
+        const el = innerRef.current;
+        if (el) {
+            return el[orientation === 'vertical' ? 'offsetHeight' : 'offsetWidth'];
+        }
+    };
     const collapse = () => {
-        setIsEntered(false);
-        requestAnimationFrame(() => {
-            setSize(getCollapsedSize());
-        });
+        const currentSize = getCurrentSize();
+        if (typeof currentSize !== 'undefined') {
+            const el = innerRef.current;
+            el.style[styleProperty] = currentSize + 'px';
+            requestAnimationFrame(() => {
+                setSize(getCollapsedSize());
+            });
+        }
     };
-    const mounted = useRef(false);
-    useStrictEffect(() => {
-        if (!mounted.current) {
-            // 首次渲染
-            mounted.current = true;
-            if (!appear) {
-                // 若appear为false，则跳过首次动画
-                return;
-            }
+    useLayoutEffect(() => {
+        if (_in && appear) {
+            expand(getCollapsedSize());
         }
+    }, []);
+    useUpdateEffect(() => {
         _in
             ? expand()
             : collapse();
     }, [_in]);
-    return (_jsx(TransitionBase, { ...props, appear: appear, orientation: orientation, in: _in, ref: cloneRef(ref, innerRef), style: {
-            [styleProperty]: isEntered ? 'auto' : size,
-            ...!isEntered && { overflow: 'hidden' },
+    return (_jsx(TransitionBase, { ...props, ref: cloneRef(ref, innerRef), in: _in, orientation: orientation, appear: appear, style: {
+            [styleProperty]: size,
             ...props.style
-        }, onEntered: () => setIsEntered(true) }));
+        } }));
 };

package/dist/esm/components/transitionBase/transitionBase.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { CSSTransition } from 'react-transition-group';
-import { classes, fadeStyle, sweepingStyle, useGrowAndCollapseStyle, useSlideStyle, useTransitionBaseStyle } from './transitionBase.style.js';
+import { classes, fadeStyle, useGrowAndCollapseStyle, useSlideStyle, useSweepingStyle, useTransitionBaseStyle } from './transitionBase.style.js';
 import { clsx, cloneRef } from '../../utils/index.js';
 export const TransitionBase = (({ ref, component: Component = 'div', orientation = 'vertical', direction = 'down', offset = '100%', timeout = 300, appear = true, _mode, ...props }) => {
     const cssArr = [
@@ -11,7 +11,7 @@ export const TransitionBase = (({ ref, component: Component = 'div', orientation
         cssArr.push(fadeStyle);
         switch (_mode) {
             case '_sweeping':
-                cssArr.push(sweepingStyle);
+                cssArr.push(useSweepingStyle({ orientation }));
                 break;
             case 'collapse':
             case 'grow':
@@ -22,5 +22,10 @@ export const TransitionBase = (({ ref, component: Component = 'div', orientation
         }
     }
     const innerRef = useRef(null);
-    return (_jsx(CSSTransition, { ...props, css: cssArr, nodeRef: innerRef, className: clsx(classes.root, props.className), timeout: timeout, appear: appear, children: _jsx(Component, { ref: cloneRef(ref, innerRef), children: props.children }) }));
+    const initialized = useRef(false);
+    useEffect(() => {
+        initialized.current = true;
+    }, [props.in]);
+    const unInitClass = !initialized.current && !props.in && 'exit-done';
+    return (_jsx(CSSTransition, { ...props, css: cssArr, nodeRef: innerRef, className: clsx(classes.root, props.className, unInitClass), timeout: timeout, appear: appear, children: _jsx(Component, { ref: cloneRef(ref, innerRef), children: props.children }) }));
 });

package/dist/esm/components/transitionBase/transitionBase.style.d.ts

@@ -4,6 +4,6 @@ export declare const classes: {
 };
 export declare function useTransitionBaseStyle({ timeout }: Required<Pick<TransitionBaseProps<any>, 'timeout'>>): import("@emotion/utils").SerializedStyles;
 export declare const fadeStyle: () => import("@emotion/utils").SerializedStyles;
-export declare const sweepingStyle: () => import("@emotion/utils").SerializedStyles;
-export declare function useGrowAndCollapseStyle({ orientation, _mode }: Required<Pick<TransitionBaseProps<any>, 'orientation' | '_mode'>>): import("@emotion/utils").SerializedStyles;
-export declare function useSlideStyle({ direction, offset }: Required<Pick<TransitionBaseProps<any>, 'direction' | 'offset'>>): import("@emotion/utils").SerializedStyles;
+export declare function useSweepingStyle({ orientation }: Required<Pick<TransitionBaseProps, 'orientation'>>): import("@emotion/utils").SerializedStyles;
+export declare function useGrowAndCollapseStyle({ orientation, _mode }: Required<Pick<TransitionBaseProps, 'orientation' | '_mode'>>): import("@emotion/utils").SerializedStyles;
+export declare function useSlideStyle({ direction, offset }: Required<Pick<TransitionBaseProps, 'direction' | 'offset'>>): import("@emotion/utils").SerializedStyles;

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

@@ -6,6 +6,7 @@ export function useTransitionBaseStyle({ timeout }) {
     return useCss(() => css `
         @layer reset {
             ${timeoutIsNumber ? `transition-duration: ${timeout}ms;` : ''}
+            
             &.appear-active {
                 ${!timeoutIsNumber ? `transition-duration: ${timeout.appear}ms;` : ''}
             }
@@ -22,126 +23,107 @@ export function useTransitionBaseStyle({ timeout }) {
 }
 export const fadeStyle = defineCss(({ easing }) => css `
     @layer reset {
-        transition-property: opacity;
-        transition-timing-function: ${easing.easeOut};
-
-        &,
         &.appear,
-        &.enter {
+        &.exit,
+        &.exit-done {
             opacity: 0;
         }
-
+        
         &.appear-active,
-        &.enter-active,
-        &.enter-done,
-        &.exit {
+        &.enter,
+        &.enter-done {
             opacity: 1;
         }
 
-        &.exit-active,
-        &.exit-done {
-            opacity: 0;
-        }
-    }
-`);
-export const sweepingStyle = defineCss(({ easing }) => css `
-    @layer reset {
-        transition-property: opacity, width, height;
-
         &.appear-active,
         &.enter-active,
-        &.enter-done {
-            transition-timing-function: ${easing.easeOut}, ${easing.bounce}, ${easing.bounce};
-        }
-
-        &.exit-active,
-        &.exit-done {
+        &.exit-active {
+            transition-property: opacity;
             transition-timing-function: ${easing.easeOut};
         }
     }
 `);
+export function useSweepingStyle({ orientation }) {
+    return useCss(() => css `
+        @layer reset {
+            &.appear,
+            &.appear-active,
+            &.enter-active,
+            &.exit,
+            &.exit-active,
+            &.exit-done {
+                overflow: hidden;
+            }
+            
+            &.appear-active,
+            &.enter-active,
+            &.exit-active {
+                transition-property: opacity, width, height;
+            }
+        }
+    `, [orientation]);
+}
 export function useGrowAndCollapseStyle({ orientation, _mode }) {
-    return useCss(({ easing }) => {
-        let transformMethod = _mode === 'grow'
-            ? 'scale'
-            : orientation === 'vertical'
-                ? 'scaleY'
-                : 'scaleX';
-        return css `
-            @layer reset {
-                transition-property: opacity, transform;
-                ${_mode === 'collapse' ? `transform-origin: ${orientation === 'vertical' ? 'top' : 'left'};` : ''}
-                &,
-                &.appear,
-                &.enter {
-                    transform: ${transformMethod}(0);
-                }
-
-                &.appear-active,
-                &.enter-active,
-                &.enter-done,
-                &.exit {
-                    transform: scale(1);
-                }
+    let transformMethod = _mode === 'grow'
+        ? 'scale'
+        : orientation === 'vertical'
+            ? 'scaleY'
+            : 'scaleX';
+    return useCss(() => css `
+        @layer reset {
+            ${_mode === 'collapse' ? `transform-origin: ${orientation === 'vertical' ? 'top' : 'left'};` : ''}
 
-                &.exit-active,
-                &.exit-done {
-                    transform: ${transformMethod}(0);
-                }
+            transition-property: opacity, transform;
 
-                &.appear-active,
-                &.enter-active {
-                    transition-timing-function: ${easing.easeOut}, ${easing.bounce};
-                }
+            &.appear,
+            &.exit,
+            &.exit-done {
+                transform: ${transformMethod}(0);
+            }
 
-                &.exit-active {
-                    transition-timing-function: ${easing.easeOut};
-                }
+            &.appear-active,
+            &.enter,
+            &.enter-done {
+                transform: scale(1);
             }
-        `;
-    }, [orientation, _mode]);
+            
+            &.appear-active,
+            &.enter-active,
+            &.exit-active {
+                transition-property: opacity, transform;
+            }
+        }
+    `, [orientation, _mode]);
 }
 export function useSlideStyle({ direction, offset }) {
-    return useCss(({ easing }) => {
-        const transformMethod = direction === 'up' || direction === 'down' ? 'translateY' : 'translateX';
-        let offsetValue = typeof offset === 'number' ? `${offset}px` : offset;
-        if (direction === 'down' || direction === 'right') {
-            offsetValue = '-' + offsetValue;
-        }
-        return css `
-            @layer reset {
-                transition-property: opacity, transform;
-
-                &,
-                &.appear,
-                &.enter {
-                    pointer-events: none;
-                    transform: ${transformMethod}(${offsetValue});
-                }
-
-                &.appear-active,
-                &.enter-active,
-                &.enter-done,
-                &.exit {
-                    pointer-events: inherit;
-                    transform: translate(0);
-                }
+    const transformMethod = direction === 'up' || direction === 'down' ? 'translateY' : 'translateX';
+    let offsetValue = typeof offset === 'number' ? `${offset}px` : offset;
+    if (direction === 'down' || direction === 'right') {
+        offsetValue = '-' + offsetValue;
+    }
+    return useCss(() => css `
+        @layer reset {
+            transition-property: opacity, transform;
 
-                &.exit-active,
-                &.exit-done {
-                    pointer-events: none;
-                    transform: ${transformMethod}(${offsetValue});
-                }
+            &.appear,
+            &.exit,
+            &.exit-done {
+                pointer-events: none;
+                transform: ${transformMethod}(${offsetValue});
+            }
 
-                &.appear-active,
-                &.enter-active {
-                    transition-timing-function: ${easing.easeOut}, ${easing.bounce};
-                }
+            &.appear-active,
+            &.enter,
+            &.enter-done {
+                pointer-events: inherit;
+                transform: translate(0);
+            }
 
-                &.exit-active {
-                    transition-timing-function: ${easing.easeOut};
-                }
+            &.appear-active,
+            &.enter-active,
+            &.exit-active {
+                transition-property: opacity, transform;
             }
-        `;
-    }, [direction, offset]);
+        }
+    `, [direction, offset]);
 }

package/dist/esm/utils/curd.d.ts

@@ -21,7 +21,7 @@ export declare const CONTROL_COLUMN_KEY = "$control";
 export declare function useCurdColumns<R extends RowType, V extends Id = Id>({ columns, columnConfigurable }: Pick<CurdProps<R, FormValue, V>, 'columns' | 'columnConfigurable'>): {
     orderedColumns: any[];
     actualColumns: (symbol | ColumnType<R>)[];
-    innerVisible: import("react").RefObject<Id[]>;
-    setInnerVisible: import("react").Dispatch<import("react").SetStateAction<Id[]>>;
-    setInnerOrder: import("react").Dispatch<import("react").SetStateAction<Id[]>>;
+    innerVisible: import("react").RefObject<Id[] | undefined>;
+    setInnerVisible: import("react").Dispatch<import("react").SetStateAction<Id[] | undefined>>;
+    setInnerOrder: import("react").Dispatch<import("react").SetStateAction<Id[] | undefined>>;
 };

package/dist/esm/utils/curd.js

@@ -63,24 +63,6 @@ export function useCurdColumns({ columns, columnConfigurable }) {
         columnConfigurable = {};
     }
     let { defaultVisible, visible, onVisibleChange, defaultOrder, order, onOrderChange } = columnConfigurable;
-    if (!defaultVisible || !defaultOrder) {
-        let hasControlColumn = false;
-        const defaultKeys = columns?.flatMap((col) => {
-            if (col.hideInTable) {
-                return [];
-            }
-            if (col._key) {
-                if (col._key === CONTROL_COLUMN_KEY) {
-                    hasControlColumn = true;
-                }
-                return col._key;
-            }
-            return [];
-        }) || [];
-        !hasControlColumn && defaultKeys.push(CONTROL_COLUMN_KEY);
-        defaultVisible ||= defaultKeys;
-        defaultOrder ||= defaultKeys;
-    }
     const [innerOrder, setInnerOrder] = useControlled(defaultOrder, order, onOrderChange);
     const [innerVisible, setInnerVisible] = useControlled(defaultVisible, visible, onVisibleChange);
     const symbolBoundToNext = useRef(new WeakMap());
@@ -106,7 +88,7 @@ export function useCurdColumns({ columns, columnConfigurable }) {
     }, [columns]);
     // 只排序不筛选，用于设置项
     const orderedColumns = useMemo(() => {
-        if (!innerOrder.current.length) {
+        if (!innerOrder.current?.length) {
             return pureColumns;
         }
         const set = new Set(pureColumns);
@@ -123,12 +105,12 @@ export function useCurdColumns({ columns, columnConfigurable }) {
         ];
     }, [innerOrder.current, pureColumns]);
     const visibleSet = useMemo(() => {
-        return new Set(innerVisible.current);
+        return innerVisible.current && new Set(innerVisible.current);
     }, [innerVisible.current]);
     // 筛选表格上可见的列，并将symbol回填
     const actualColumns = useMemo(() => {
         return orderedColumns.flatMap(col => {
-            if (!isUnset(col._key) && visibleSet.has(col._key)) {
+            if (!isUnset(col._key) && (!visibleSet || visibleSet.has(col._key))) {
                 const symbolArr = symbolBoundToNext.current.get(col) || [];
                 // 移除DataGrid不需要的属性
                 const { filterInline, filter, form, ...c } = col;

package/package.json

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