@canlooks/can-ui 0.0.67 → 0.0.68

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

@@ -1,42 +1,40 @@
-import { css, keyframes } from '@emotion/react';
 import { defineInnerClasses, useColor, useCss } from '../../utils';
+import { css, keyframes } from '@emotion/react';
+import { zIndex } from '../theme';
 import Color from 'color';
-export const classes = defineInnerClasses('touch-ripple', [
+export const classes = defineInnerClasses('touch-ripple-overlay', [
     'ripple'
 ]);
 export function useStyle({ color }) {
     const colorValue = useColor(color);
-    return useCss(({ easing }) => {
-        const bg = Color(colorValue).alpha(.1).string();
-        return css `
-            overflow: hidden;
-            pointer-events: none;
-            border-radius: inherit;
+    return useCss(({ easing }) => css `
+        position: absolute;
+        inset: 0;
+        z-index: ${zIndex.touchRipple};
+        overflow: hidden;
+        pointer-events: none;
+        
+        .${classes.ripple} {
+            aspect-ratio: 1;
+            border-radius: 50%;
+            background-color: ${Color(colorValue).alpha(.1).string()};
             position: absolute;
-            inset: 0;
-            z-index: 0;
-
-            .${classes.ripple} {
-                aspect-ratio: 1;
-                border-radius: 50%;
-                position: absolute;
-                translate: -50% -50%;
-                background-color: ${bg};
-                animation: ${showRippleAnim} .4s ${easing.easeIn} forwards;
-                transition: opacity .4s ${easing.easeIn};
-
-                &[data-leaving=true] {
-                    opacity: 0;
-                }
+            scale: 0;
+            translate: -50% -50%;
+            animation: ${rippleAnim} .4s ${easing.easeOut} forwards;
+            transition: opacity .4s ${easing.easeIn};
+            
+            &[data-leaving=true] {
+                opacity: 0;
             }
-        `;
-    }, [colorValue]);
+        }
+    `, [colorValue]);
 }
-const showRippleAnim = keyframes `
+const rippleAnim = keyframes `
     0% {
         scale: 0;
     }
-
+    
     100% {
         scale: 1;
     }

package/dist/esm/components/transfer/transfer.js

@@ -12,8 +12,8 @@ export function useTransferContext() {
     const { options = [], primaryKey = 'value', value = [], allowSelectAll = true, showHeader = true } = useContext(TransferContext);
     return { options, primaryKey, value, allowSelectAll, showHeader };
 }
-export const Transfer = memo(({ options = [], primaryKey = 'value', fullWidth, allowSelectAll = true, showHeader = true, leftTitle = '选项', rightTitle = '已选', renderButtons, defaultValue = [], value, onChange, ...props }) => {
-    const [innerValue, setInnerValue] = useControlled(defaultValue, value, onChange);
+export const Transfer = memo(({ options, primaryKey = 'value', fullWidth, allowSelectAll = true, showHeader = true, leftTitle = '选项', rightTitle = '已选', renderButtons, defaultValue, value, onChange, ...props }) => {
+    const [innerValue, setInnerValue] = useControlled(defaultValue || [], value, onChange);
     const [leftSelected, setLeftSelected] = useState([]);
     const [rightSelected, setRightSelected] = useState([]);
     const toRight = () => {

package/dist/esm/components/transfer/transferPanel.js

@@ -4,7 +4,8 @@ import { classes } from './transfer.style';
 import { Checkbox } from '../checkbox';
 import { useTransferContext } from './transfer';
 import { OptionsBase } from '../optionsBase';
-export const TransferPanel = memo(({ title, type = 'left', selectedValue = [], onChange, renderList, renderItem, ...props }) => {
+export const TransferPanel = memo(({ title, type = 'left', selectedValue, onChange, renderList, renderItem, ...props }) => {
+    selectedValue ||= [];
     const { options, primaryKey, value, allowSelectAll, showHeader } = useTransferContext();
     const selfOptions = useMemo(() => {
         const valueSet = new Set(value);

package/dist/esm/components/upload/upload.js

@@ -21,7 +21,7 @@ const markFileId = (files) => {
         }
     }
 };
-export const Upload = memo(({ inputProps, type = 'file', accept = type === 'image' ? 'image/*' : void 0, max = Infinity, showButton = true, buttonProps, buttonText = '选择文件', variant = 'square', sortable, droppable, defaultValue = [], value, onChange, onUpload, ...props }) => {
+export const Upload = memo(({ inputProps, type = 'file', accept = type === 'image' ? 'image/*' : void 0, max = Infinity, showButton = true, buttonProps, buttonText = '选择文件', variant = 'square', sortable, droppable, defaultValue, value, onChange, onUpload, ...props }) => {
     const wrapperRef = useRef(null);
     const itemRefs = useRef(new Map());
     useImperativeHandle(props.ref, () => {
@@ -51,7 +51,7 @@ export const Upload = memo(({ inputProps, type = 'file', accept = type === 'imag
         };
         return wrapperRef.current;
     });
-    const [innerValue, setInnerValue] = useControlled(defaultValue, value, value => {
+    const [innerValue, setInnerValue] = useControlled(defaultValue || [], value, value => {
         markFileId(value);
         onChange?.(value);
     });

package/dist/esm/components/waterfall/waterfallItem.js

@@ -1,9 +1,9 @@
-import { cloneElement, useCallback, useLayoutEffect, useRef } from 'react';
+import { cloneElement, useCallback, useEffect, useRef } from 'react';
 import { classes } from './waterfall.style';
 import { cloneRef, clsx } from '../../utils';
 export const WaterfallItem = ({ ref, onLoad, child }) => {
     const innerRef = useRef(null);
-    useLayoutEffect(() => {
+    useEffect(() => {
         const el = innerRef.current;
         if (!el) {
             throw Error(`Children of <Waterfall> must expose 'ref' prop`);

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

@@ -1,4 +1,5 @@
 import { RefObject, Dispatch, SetStateAction } from 'react';
+import { DefineElement } from '../types';
 /**
  * 获取渲染前的值
  * @param value
@@ -48,3 +49,10 @@ export declare function useLoading<A extends any[], R>(fn: (...args: A) => R | P
     (...args: A) => Promise<R>,
     Dispatch<SetStateAction<boolean>>
 ];
+/**
+ * 获取容器元素，通常用于`container`或`effectContainer`属性
+ * @param container
+ * @param effectContainer
+ * @param defaultContainer 默认为`document.body`
+ */
+export declare function useContainer<T extends HTMLElement | null>(container?: DefineElement<T>, effectContainer?: DefineElement<T>, defaultContainer?: T): RefObject<T>;

package/dist/esm/utils/hooks.js

@@ -113,3 +113,24 @@ export function useLoading(fn, referredLoading = false) {
         setLoading
     ];
 }
+/**
+ * 获取容器元素，通常用于`container`或`effectContainer`属性
+ * @param container
+ * @param effectContainer
+ * @param defaultContainer 默认为`document.body`
+ */
+export function useContainer(container, effectContainer, defaultContainer = document.body) {
+    const [containerEl, setContainerEl] = useDerivedState(prev => {
+        if (container) {
+            return typeof container === 'function' ? container() : container;
+        }
+        return prev || defaultContainer;
+    }, [container, defaultContainer]);
+    useEffect(() => {
+        if (effectContainer) {
+            const el = typeof effectContainer === 'function' ? effectContainer() : effectContainer;
+            setContainerEl(el);
+        }
+    }, []);
+    return containerEl;
+}

package/package.json

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