@canlooks/can-ui 0.0.24 → 0.0.26

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

@@ -10,10 +10,9 @@ export const classes = defineClasses('drawer', [
     'bodyWrap'
 ]);
 export function useStyle({ size }) {
-    return useCss(theme => {
-        const { spacing, background, boxShadow, borderRadius, divider } = theme;
+    return useCss(({ breakpoints, spacing, background, boxShadow, borderRadius, divider }) => {
         return css `
-            ${responsiveVariables(theme, k => {
+            ${responsiveVariables(breakpoints, k => {
             let _size = size[k];
             if (typeof _size === 'undefined') {
                 return '';
@@ -93,7 +92,7 @@ export function useStyle({ size }) {
             }
 
             &[data-placement=right] {
-                \.${classes.title}:has(+ .${classes.close}) {
+                .${classes.title}:has(+ .${classes.close}) {
                     padding-left: 0;
                 }
             }

package/dist/esm/components/dropdown/dropdown.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { Popper } from '../popper';
 import { classes, style } from './dropdown.style';
-import { classnames } from '../../utils';
+import { clsx } from '../../utils';
 import { useTheme } from '../theme';
 export function Dropdown({ showArrow, ...props }) {
     const { spacing } = useTheme();
@@ -9,5 +9,5 @@ export function Dropdown({ showArrow, ...props }) {
     props.trigger ??= 'click';
     props.placement ??= 'bottom';
     props.offset ??= showArrow ? spacing[3] : spacing[2];
-    return (_jsx(Popper, { ...props, css: style, className: classnames(classes.root, props.className), content: _jsx("div", { className: classes.content, "data-show-arrow": showArrow, children: props.content }) }));
+    return (_jsx(Popper, { ...props, css: style, className: clsx(classes.root, props.className), content: _jsx("div", { className: classes.content, "data-show-arrow": showArrow, children: props.content }) }));
 }

package/dist/esm/components/flex/flex.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { Children, cloneElement, isValidElement } from 'react';
 import { classes } from './flex.style';
-import { classnames, filterProperties } from '../../utils';
+import { clsx, filterProperties } from '../../utils';
 import { TransportStyle } from '../transportStyle';
 export function Flex({ inline, direction = 'row', wrap, gap = 0, columnGap, rowGap, compact, ...props }) {
     const renderChildren = () => {
@@ -20,7 +20,7 @@ export function Flex({ inline, direction = 'row', wrap, gap = 0, columnGap, rowG
             });
         });
     };
-    return (_jsx(TransportStyle, { ...props, className: classnames(classes.root, props.className), style: filterProperties({
+    return (_jsx(TransportStyle, { ...props, className: clsx(classes.root, props.className), style: filterProperties({
             display: inline ? 'inline-flex' : 'flex',
             flexDirection: direction,
             flexWrap: wrap, columnGap, rowGap, gap,

package/dist/esm/components/form/form.d.ts

@@ -1,27 +1,26 @@
-import React, { Dispatch, ReactElement, ReactNode, Ref, RefObject, SetStateAction } from 'react';
-import { Obj, ResponsiveProp } from '../../types';
+import React, { Dispatch, ReactElement, ReactNode, Ref, RefObject, SetStateAction, ElementType } from 'react';
+import { MergeProps, Obj } from '../../types';
 import { FieldPath } from '../../utils';
 import { FieldError, FormItem, FormItemProps, FormItemRef } from './formItem';
 import { FormRelatable } from './formRelatable';
-import { DescriptionsBaseProps, DescriptionsProps } from '../descriptions';
+import { DescriptionsProps } from '../descriptions';
 export type FormValue = Obj;
 export type FormSharedProps = {
-    /** 最外层元素的ref，默认ref属性已经被{@link FormRef}取代 */
-    wrapperRef?: Ref<HTMLDivElement>;
     requiredMark?: ReactNode;
+    /** variant为"grid"或"table"时会渲染Descriptions组件，并传递variant属性，默认为`grid` */
+    variant?: 'plain' | 'grid' | 'table';
 };
-export interface FormProps<V extends FormValue> extends FormSharedProps, Omit<DescriptionsBaseProps, 'items' | 'onChange'>, Omit<React.JSX.IntrinsicElements['form'], 'ref' | 'onChange'> {
+export interface FormOwnProps<V extends FormValue = FormValue> extends FormSharedProps {
     ref?: Ref<FormRef<V> | null>;
-    component?: any;
+    /** 最外层元素的ref，默认{@link ref}属性已经被{@link FormRef}取代 */
+    wrapperRef?: Ref<HTMLFormElement>;
     initialValue?: V;
     onChange?(field: FieldPath, value: any, formValue: V): void;
     onFinish?(value: V): void;
-    items?: (FormItemProps<any> & Obj)[];
-    /** variant为"grid"或"table"时会渲染Descriptions组件，并传递variant属性，默认为`grid` */
-    variant?: 'plain' | 'grid' | 'table';
-    columnCount?: ResponsiveProp;
+    items?: (FormItemProps & Obj)[];
     descriptionsProps?: DescriptionsProps;
 }
+export type FormProps<V extends FormValue = FormValue, C extends ElementType = 'form'> = MergeProps<FormOwnProps<V>, DescriptionsProps<C>>;
 interface FormContext<V extends FormValue> extends FormSharedProps {
     requiredMark?: ReactNode;
     formValue?: V;
@@ -48,8 +47,8 @@ export type FormRef<V extends FormValue = FormValue> = {
     isFieldTouched(field: FieldPath): boolean;
 };
 export declare const Form: {
-    <V extends Obj>(props: FormProps<V>): ReactElement;
+    <V extends FormValue, C extends ElementType>(props: FormProps<V, C>): ReactElement;
     Item: typeof FormItem;
-    FormRelatable: typeof FormRelatable;
+    Relatable: typeof FormRelatable;
 };
 export {};

package/dist/esm/components/form/form.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { createContext, useContext, useImperativeHandle, useMemo, useRef } from 'react';
-import { classnames, cloneDeep, mergeDeep, queryDeep, stringifyField, useSync, useSyncState } from '../../utils';
+import { clsx, cloneDeep, mergeDeep, queryDeep, stringifyField, useSync, useSyncState } from '../../utils';
 import { classes, style } from './form.style';
 import { FormItem } from './formItem';
 import { FormRelatable } from './formRelatable';
@@ -41,10 +41,9 @@ labelWidth, labelPlacement = 'left', colon = ':', size, disableMargin, disablePa
     const submitHandler = async (e) => {
         e?.preventDefault();
         try {
-            await Promise.all([...itemsContainer.current].map(([, item]) => {
-                return item.validate().then(isValid => {
-                    return isValid ? void 0 : Promise.reject();
-                });
+            await Promise.all([...itemsContainer.current].map(async ([, item]) => {
+                const isValid = await item.validate();
+                return isValid ? void 0 : Promise.reject();
             }));
             onFinish?.(formValue.current);
             return formValue.current;
@@ -88,13 +87,13 @@ labelWidth, labelPlacement = 'left', colon = ':', size, disableMargin, disablePa
         isFieldTouched: field => !!itemsContainer.current.get(stringifyField(field))?.isTouched
     };
     useImperativeHandle(ref, () => formRef.current);
-    return (_jsx(Component, { ...props, ref: wrapperRef, css: style, className: classnames(classes.root, props.className), onSubmit: submitHandler, children: _jsx(FormContext, { value: useMemo(() => ({
-                requiredMark,
+    return (_jsx(Component, { ...props, ref: wrapperRef, css: style, className: clsx(classes.root, props.className), onSubmit: submitHandler, children: _jsx(FormContext, { value: useMemo(() => ({
+                requiredMark, variant,
                 formValue: formValue.current, setFieldValue,
                 itemsContainer: itemsContainer.current, formRef
-            }), [requiredMark, formValue.current]), children: variant === 'plain'
+            }), [requiredMark, variant, formValue.current]), children: variant === 'plain'
                 ? props.children
                 : _jsx(Descriptions, { ...descriptionsProps, size: size, labelWidth: labelWidth, colon: colon, labelPlacement: labelPlacement, disableMargin: disableMargin, disablePadding: disablePadding, columnCount: columnCount, items: items, variant: variant, itemComponent: FormItem, children: props.children }) }) }));
 });
 Form.Item = FormItem;
-Form.FormRelatable = FormRelatable;
+Form.Relatable = FormRelatable;

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

@@ -15,4 +15,32 @@ export const style = defineCss(({ colors, spacing }) => css `
         font-size: ${13 / 14}em;
         color: ${colors.error.main};
     }
+
+    .${classes.item} {
+        &:not(:last-of-type):not([data-disable-margin=true]) {
+            &[data-label-placement=left], &[data-label-placement=right] {
+                margin-bottom: ${spacing[6]}px;
+
+                &[data-size=small] {
+                    margin-bottom: ${spacing[4]}px;
+                }
+
+                &[data-size=large] {
+                    margin-bottom: ${spacing[8]}px;
+                }
+            }
+
+            &[data-label-placement=top], &[data-label-placement=bottom] {
+                margin-bottom: ${spacing[7]}px;
+
+                &[data-size=small] {
+                    margin-bottom: ${spacing[5]}px;
+                }
+
+                &[data-size=large] {
+                    margin-bottom: ${spacing[9]}px;
+                }
+            }
+        }
+    }
 `);

package/dist/esm/components/form/formItem.d.ts

@@ -1,15 +1,15 @@
-import React, { ReactElement, ReactNode } from 'react';
+import React, { ReactNode, ElementType, Ref } from 'react';
 import { FormRef, FormSharedProps, FormValue } from './form';
-import { ColorPropsValue, Size } from '../../types';
+import { ColorPropsValue, MergeProps, Size } from '../../types';
 import { FieldPath } from '../../utils';
-import { DescriptionItemProps, DescriptionsSharedProps } from '../descriptions';
-export type FormItemRules<I> = {
+import { DescriptionItemProps } from '../descriptions';
+export type FormItemRules<I = any> = {
     message?: ReactNode;
     required?: boolean;
     pattern?: RegExp;
-    validator?(fieldValue: I | undefined, formValue: any, formInstance: FormRef | null): any;
+    validator?(fieldValue: I | undefined, formValue: any, formRef: FormRef | null): any;
 };
-export type FieldProps<I> = {
+export type FieldProps<I = any> = {
     checked?: boolean;
     value?: I;
     onChange?(e: React.ChangeEvent): void;
@@ -18,7 +18,9 @@ export type StyleProps = {
     size?: Size;
     color?: ColorPropsValue;
 };
-export interface FormItemBaseProps<I> extends FormSharedProps, DescriptionsSharedProps {
+export interface FormItemOwnProps<I = any> extends FormSharedProps {
+    ref?: Ref<FormItemRef>;
+    wrapperRef?: Ref<HTMLDivElement>;
     field?: FieldPath;
     initialValue?: I;
     rules?: FormItemRules<I> | FormItemRules<I>[];
@@ -29,7 +31,7 @@ export interface FormItemBaseProps<I> extends FormSharedProps, DescriptionsShare
     children?: ReactNode | ((fieldProps: FieldProps<I>, styleProps: StyleProps) => ReactNode);
     noStyle?: boolean;
 }
-export type FormItemProps<I> = FormItemBaseProps<I> & DescriptionItemProps;
+export type FormItemProps<I = any, C extends ElementType = 'div'> = MergeProps<FormItemOwnProps<I>, DescriptionItemProps<C>>;
 export type FieldError = null | {
     message: ReactNode;
 };
@@ -39,4 +41,4 @@ export type FormItemRef = {
     reset(initialValues?: FormValue): void;
     isTouched: boolean;
 };
-export declare const FormItem: <I>(props: FormItemProps<I>) => ReactElement;
+export declare const FormItem: <I = any, C extends ElementType = 'div'>(props: FormItemProps<I, C>) => ReactNode;

package/dist/esm/components/form/formItem.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { cloneElement, isValidElement, useDeferredValue, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
 import { useFormContext } from './form';
-import { classnames, getValueOnChange, queryDeep, stringifyField, useDerivedState } from '../../utils';
+import { clsx, getValueOnChange, queryDeep, stringifyField, useDerivedState } from '../../utils';
 import { DescriptionItem } from '../descriptions';
 import { classes } from './form.style';
 import { Collapse } from '../transitionBase';
-export const FormItem = (({ wrapperRef, field, initialValue, label = '', rules, required, error, helperText, dependencies, children, noStyle, requiredMark, ...props }, ref) => {
-    const { formValue, setFieldValue, itemsContainer, formRef, ...context } = useFormContext();
+export const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rules, required, error, helperText, dependencies, children, noStyle, requiredMark, ...props }) => {
+    const { variant, formValue, setFieldValue, itemsContainer, formRef, ...context } = useFormContext();
     requiredMark ??= context.requiredMark ?? '*';
     /**
      * --------------------------------------------------------------------
@@ -68,7 +68,6 @@ export const FormItem = (({ wrapperRef, field, initialValue, label = '', rules,
                     try {
                         await r.validator(deferredValue, formValue, formRef?.current || null);
                         setInnerError(false);
-                        setInnerHelperText(void 0);
                     }
                     catch (e) {
                         setInnerError(invalid = true);
@@ -83,7 +82,6 @@ export const FormItem = (({ wrapperRef, field, initialValue, label = '', rules,
         await Promise.all(promises);
         if (!invalid) {
             setInnerError(false);
-            setInnerHelperText(void 0);
         }
         return !invalid;
     };
@@ -136,7 +134,7 @@ export const FormItem = (({ wrapperRef, field, initialValue, label = '', rules,
                         : { value: innerValue.current },
                     onChange(e) {
                         isTouched.current = isActiveChanging.current = true;
-                        setInnerValue(o => getValueOnChange(e, o));
+                        setInnerValue((o) => getValueOnChange(e, o));
                     }
                 }
                 : {}, {
@@ -154,7 +152,7 @@ export const FormItem = (({ wrapperRef, field, initialValue, label = '', rules,
                     onChange(e) {
                         props.onChange?.(e);
                         isTouched.current = isActiveChanging.current = true;
-                        setInnerValue(o => getValueOnChange(e, o));
+                        setInnerValue((o) => getValueOnChange(e, o));
                     }
                 },
                 size: props.size ?? props.size,
@@ -163,9 +161,9 @@ export const FormItem = (({ wrapperRef, field, initialValue, label = '', rules,
         }
         return children;
     }, [children, innerValue.current, innerError.current, field, props.size]);
-    if (noStyle) {
+    if (noStyle || variant === 'plain') {
         return renderedChildren;
     }
-    return (_jsxs(DescriptionItem, { ...props, ref: wrapperRef, className: classnames(classes.item, props.className), label: _jsxs(_Fragment, { children: [isRequired && !!requiredMark &&
-                    _jsx("span", { className: classes.requiredMark, children: requiredMark }), label] }), children: [renderedChildren, _jsx(Collapse, { in: innerError.current || !!innerHelperText.current, children: _jsx("div", { className: classes.helperText, children: innerHelperText.current }) })] }));
-});
+    return (_jsxs(DescriptionItem, { ...props, ref: wrapperRef, className: clsx(classes.item, props.className), label: _jsxs(_Fragment, { children: [isRequired && !!requiredMark &&
+                    _jsx("span", { className: classes.requiredMark, children: requiredMark }), label] }), children: [renderedChildren, _jsx(Collapse, { in: innerError.current || !!helperText, children: _jsx("div", { className: classes.helperText, children: innerHelperText.current }) })] }));
+};

package/dist/esm/components/formDialog/formDialog.js

@@ -7,19 +7,17 @@ import { Form, FormItem } from '../form';
 export const FormDialog = (({ ref, title, formProps, formRef, items, onFinish, ...props }) => {
     const dialogRef = useRef(null);
     const innerFormRef = useRef(null);
-    const resolveFn = useRef(void 0);
-    const rejectFn = useRef(void 0);
+    const resolvers = useRef(void 0);
     const [innerOpen, setInnerOpen] = useControlled(props.defaultOpen, props.open);
     const onCloseHandler = (reason) => {
         if (reason === 'confirmed') {
             return;
         }
         props.onClose?.(reason);
-        rejectFn.current?.({
+        resolvers.current?.reject({
             type: 'canceled',
             value: innerFormRef.current.getFormValue()
         });
-        resolveFn.current = rejectFn.current = void 0;
         setInnerOpen(false);
     };
     useImperativeHandle(ref, () => {
@@ -30,10 +28,8 @@ export const FormDialog = (({ ref, title, formProps, formRef, items, onFinish, .
                     : innerFormRef.current?.resetForm();
                 setInnerOpen(true);
                 setValue(value);
-                return new Promise((resolve, reject) => {
-                    resolveFn.current = resolve;
-                    rejectFn.current = reject;
-                });
+                const { promise } = resolvers.current = Promise.withResolvers();
+                return promise;
             };
         }
         return dialogRef.current;
@@ -44,7 +40,7 @@ export const FormDialog = (({ ref, title, formProps, formRef, items, onFinish, .
     };
     const [innerLoading, finishHandler] = useLoading(async (value) => {
         formProps?.onFinish?.(value);
-        resolveFn.current?.(value);
+        resolvers.current?.resolve(value);
         await onFinish?.(value);
         setInnerOpen(false);
     }, props.confirmLoading);
@@ -52,7 +48,7 @@ export const FormDialog = (({ ref, title, formProps, formRef, items, onFinish, .
         if (items?.length) {
             return items.map((item, i) => {
                 const itemProps = typeof item === 'function' ? item(value) : item;
-                return (_createElement(FormItem, { ...itemProps, key: setDefaultColumnKey(itemProps) ?? i }));
+                return (_createElement(FormItem, { ...itemProps, key: setDefaultColumnKey(itemProps, i) }));
             });
         }
         return props.children;

package/dist/esm/components/grid/grid.d.ts

@@ -1,16 +1,17 @@
-import { ReactElement } from 'react';
-import { ResponsiveProp } from '../../types';
+import { ElementType, ReactElement } from 'react';
+import { MergeProps, ResponsiveProp } from '../../types';
 import { GridItem } from './gridItem';
 import { TransportStyleProps } from '../transportStyle';
-export interface GridProps extends TransportStyleProps {
+export type GridOwnProps = {
     inline?: boolean;
     /** 网格列数，默认为`{xs: 12}` */
     columnCount?: ResponsiveProp;
     gap?: ResponsiveProp;
     columnGap?: ResponsiveProp;
     rowGap?: ResponsiveProp;
-}
+};
+export type GridProps<C extends ElementType = 'div'> = MergeProps<GridOwnProps, TransportStyleProps<C>>;
 export declare const Grid: {
-    (props: GridProps): ReactElement;
+    <C extends ElementType = "div">(props: GridProps<C>): ReactElement;
     Item: typeof GridItem;
 };

package/dist/esm/components/grid/grid.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { classes, useContainerStyle } from './grid.style';
 import { GridItem } from './gridItem';
-import { classnames, toResponsiveValue } from '../../utils';
+import { clsx, toResponsiveValue } from '../../utils';
 import { TransportStyle } from '../transportStyle';
 export const Grid = (({ inline, columnCount = { xs: 12 }, gap = { xs: 0 }, columnGap, rowGap, ...props }) => {
     columnCount = toResponsiveValue(columnCount);
     gap = toResponsiveValue(gap);
     columnGap = toResponsiveValue(columnGap) ?? gap;
     rowGap = toResponsiveValue(rowGap) ?? gap;
-    return (_jsx(TransportStyle, { ...props, css: useContainerStyle({ columnCount, columnGap, rowGap }), className: classnames(classes.root, props.className), style: {
+    return (_jsx(TransportStyle, { ...props, css: useContainerStyle({ columnCount, columnGap, rowGap }), className: clsx(classes.root, props.className), style: {
             display: inline ? 'inline-flex' : 'flex',
             ...props.style
         } }));

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

@@ -5,7 +5,7 @@ export const classes = defineClasses('grid', [
 ]);
 export function useContainerStyle({ columnCount, columnGap, rowGap }) {
     return useCss(theme => css `
-        ${responsiveVariables(theme, k => `
+        ${responsiveVariables(theme.breakpoints, k => `
             ${k in columnCount ? `--grid-columnCount: ${columnCount[k]}` : ''};
             ${k in columnGap ? `--grid-column-gap: ${columnGap[k]}px` : ''};
             ${k in rowGap ? `--grid-row-gap: ${rowGap[k]}px` : ''};
@@ -17,7 +17,7 @@ export function useContainerStyle({ columnCount, columnGap, rowGap }) {
 }
 export function useItemStyle({ span, offset }) {
     return useCss(theme => css `
-        ${responsiveVariables(theme, k => `
+        ${responsiveVariables(theme.breakpoints, k => `
             ${k in span ? `--grid-item-span: ${span[k]}` : ''};
             ${k in offset ? `--grid-item-offset: ${offset[k]}` : ''};
         `)}

package/dist/esm/components/grid/gridItem.d.ts

@@ -1,7 +1,9 @@
-import { ResponsiveProp } from '../../types';
+import { MergeProps, ResponsiveProp } from '../../types';
 import { TransportStyleProps } from '../transportStyle';
-export interface GridItemProps extends TransportStyleProps {
+import { ElementType, ReactElement } from 'react';
+export type GridItemOwnProps = {
     span?: ResponsiveProp;
     offset?: ResponsiveProp;
-}
-export declare function GridItem({ span, offset, ...props }: GridItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
+};
+export type GridItemProps<C extends ElementType = 'div'> = MergeProps<GridItemOwnProps, TransportStyleProps<C>>;
+export declare const GridItem: <C extends ElementType = 'div'>(props: GridItemProps<C>) => ReactElement;

package/dist/esm/components/grid/gridItem.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { classnames, toResponsiveValue } from '../../utils';
+import { clsx, toResponsiveValue } from '../../utils';
 import { classes, useItemStyle } from './grid.style';
 import { TransportStyle } from '../transportStyle';
-export function GridItem({ span = { xs: 1 }, offset = { xs: 0 }, ...props }) {
+export const GridItem = ({ span = { xs: 1 }, offset = { xs: 0 }, ...props }) => {
     span = toResponsiveValue(span);
     offset = toResponsiveValue(offset);
-    return (_jsx(TransportStyle, { ...props, css: useItemStyle({ span, offset }), className: classnames(classes.item, props.className) }));
-}
+    return (_jsx(TransportStyle, { ...props, css: useItemStyle({ span, offset }), className: clsx(classes.item, props.className) }));
+};

package/dist/esm/components/highlight/highlight.d.ts

@@ -5,5 +5,7 @@ export type HighlightProps = {
     highlightStyle?: CSSProperties;
     renderHighlight?: (text: string) => ReactNode;
     children?: string;
+    /** @alias {@link children} */
+    content?: string;
 };
-export declare const Highlight: import("react").MemoExoticComponent<({ keywords, highlightClassName, highlightStyle, renderHighlight, children }: HighlightProps) => string | ReactNode[] | undefined>;
+export declare const Highlight: import("react").MemoExoticComponent<({ keywords, highlightClassName, highlightStyle, renderHighlight, content, children, }: HighlightProps) => string | ReactNode[] | undefined>;

package/dist/esm/components/highlight/highlight.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { Fragment, memo } from 'react';
 import { Typography } from '../typography';
 import { useTheme } from '../theme';
-export const Highlight = memo(({ keywords, highlightClassName, highlightStyle, renderHighlight, children }) => {
+export const Highlight = memo(({ keywords, highlightClassName, highlightStyle, renderHighlight, content, children = content, }) => {
     const { colors } = useTheme();
     if (!children) {
         return children;

package/dist/esm/components/image/image.d.ts

@@ -1,19 +1,24 @@
-import React, { CSSProperties, ReactNode } from 'react';
-import { DIVProps } from '../../types';
-import { ImagePreviewProps } from './imagePreview';
-export interface ImageProps extends DIVProps {
+import React, { CSSProperties, ReactNode, JSX, ReactElement } from 'react';
+import { DivProps } from '../../types';
+import { ImagePreview, ImagePreviewProps } from './imagePreview';
+export interface ImageProps extends DivProps {
     src?: string;
     fallback?: string;
-    onError?: React.ReactEventHandler;
+    onLoad?: JSX.IntrinsicElements['img']['onLoad'];
+    onError?: JSX.IntrinsicElements['img']['onError'];
+    renderLoading?: ReactNode;
     alt?: string;
     width?: string | number;
     height?: string | number;
     objectFit?: CSSProperties['objectFit'];
     objectPosition?: CSSProperties['objectPosition'];
-    imgProps?: React.JSX.IntrinsicElements['img'];
+    imgProps?: JSX.IntrinsicElements['img'];
     actions?: ReactNode;
     previewable?: boolean;
     previewProps?: ImagePreviewProps;
     onPreview?(e: React.MouseEvent<HTMLDivElement>): void;
 }
-export declare const Image: React.MemoExoticComponent<({ src, fallback, onError, alt, width, height, objectFit, objectPosition, imgProps, actions, previewable, previewProps, onPreview, ...props }: ImageProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const Image: {
+    (props: ImageProps): ReactElement;
+    Preview: typeof ImagePreview;
+};

package/dist/esm/components/image/image.js

@@ -1,14 +1,29 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
-import { memo } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { memo, useRef, useEffect } from 'react';
 import { classes, style } from './image.style';
-import { classnames, useControlled, useDerivedState } from '../../utils';
-import { EyeOutlined } from '@ant-design/icons';
+import { clsx, cloneRef, useControlled, useDerivedState } from '../../utils';
 import { ImagePreview } from './imagePreview';
-export const Image = memo(({ src, fallback, onError, alt = '', width, height, objectFit = 'cover', objectPosition = 'center', imgProps, actions, previewable = true, previewProps, onPreview, ...props }) => {
+import { Icon, Skeleton } from '../..';
+import { faEye } from '@fortawesome/free-regular-svg-icons/faEye';
+export const Image = memo(({ src, fallback, onLoad, onError, renderLoading, alt = '', width, height, objectFit = 'cover', objectPosition = 'center', imgProps, actions, previewable = true, previewProps, onPreview, ...props }) => {
+    const imgRef = useRef(null);
+    const [loading, setLoading] = useDerivedState(() => {
+        return renderLoading !== false && renderLoading !== null;
+    }, [src]);
+    const loadHandler = (e) => {
+        imgProps?.onError?.(e);
+        onLoad?.(e);
+        setLoading(false);
+    };
+    useEffect(() => {
+        console.log(52, imgRef.current.complete);
+    }, []);
     const [failed, setFailed] = useDerivedState(() => !src, [src]);
     const errorHandler = (e) => {
+        imgProps?.onError?.(e);
         onError?.(e);
-        !failed.current && setFailed(true);
+        setFailed(true);
+        setLoading(false);
     };
     const [previewOpen, setPreviewOpen] = useControlled(!!previewProps?.defaultOpen, previewProps?.open, previewProps?.onOpenChange);
     const previewHandler = (e) => {
@@ -20,15 +35,17 @@ export const Image = memo(({ src, fallback, onError, alt = '', width, height, ob
     };
     const renderedActions = (() => {
         if (typeof actions === 'undefined' && previewable) {
-            return (_jsxs("div", { className: classes.previewButton, onClick: previewHandler, children: [_jsx(EyeOutlined, {}), _jsx("div", { children: "\u9884\u89C8" })] }));
+            return (_jsxs("div", { className: classes.previewButton, onClick: previewHandler, children: [_jsx(Icon, { icon: faEye }), _jsx("div", { children: "\u9884\u89C8" })] }));
         }
         return actions;
     })();
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { ...props, css: style, className: classnames(classes.root, props.className), "data-error": failed.current, children: [props.children, _jsx("img", { className: classes.img, src: failed.current ? fallback : src, alt: alt, width: width, height: height, ...imgProps, style: {
-                            objectFit,
-                            objectPosition,
-                            ...imgProps?.style
-                        }, onError: errorHandler }), !!renderedActions && !failed.current &&
-                        _jsx("div", { className: classes.mask, children: renderedActions })] }), previewable && src &&
+    return (_jsxs("div", { ...props, css: style, className: clsx(classes.root, props.className), "data-error": failed.current, children: [props.children, _jsx("img", { alt: alt, width: width, height: height, ...imgProps, ref: cloneRef(imgRef, imgProps?.ref), className: clsx(classes.img, imgProps?.className), src: failed.current ? fallback : src, style: {
+                    objectFit,
+                    objectPosition,
+                    ...imgProps?.style
+                }, onLoad: loadHandler, onError: errorHandler }), loading.current &&
+                (renderLoading ?? _jsx(Skeleton, { className: classes.skeleton })), !!renderedActions && !failed.current &&
+                _jsx("div", { className: classes.mask, children: renderedActions }), previewable && src &&
                 _jsx(ImagePreview, { src: [src], ...previewProps, open: previewOpen.current, onOpenChange: setPreviewOpen })] }));
 });
+Image.Preview = ImagePreview;

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

@@ -1,6 +1,7 @@
 export declare const classes: {
     img: string;
     mask: string;
+    skeleton: string;
     previewButton: string;
 } & {
     root: string;

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

@@ -3,6 +3,7 @@ import { defineClasses, defineCss } from '../../utils';
 import Color from 'color';
 export const classes = defineClasses('image', [
     'img',
+    'skeleton',
     'mask',
     'previewButton'
 ]);
@@ -23,6 +24,12 @@ export const style = defineCss(({ background, easing, spacing }) => {
                 opacity: 0;
             }
         }
+
+        .${classes.skeleton} {
+            height: 100%;
+            position: absolute;
+            inset: 0;
+        }
         
         .${classes.mask} {
             background-color: ${maskBg};
@@ -32,7 +39,7 @@ export const style = defineCss(({ background, easing, spacing }) => {
             align-items: center;
             justify-content: center;
             opacity: 0;
-            transition: opacity .2s ${easing.easeOut};
+            transition: opacity .25s ${easing.easeOut};
 
             .${classes.previewButton} {
                 position: absolute;

package/dist/esm/components/image/imagePreview.d.ts

@@ -1,6 +1,6 @@
-import { Ref, ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { ModalProps } from '../modal';
-import { ReactZoomPanPinchContentRef, ReactZoomPanPinchProps } from 'react-zoom-pan-pinch';
+import { ReactZoomPanPinchProps } from 'react-zoom-pan-pinch';
 export interface ImagePreviewProps extends ModalProps {
     src?: string | string[];
     defaultIndex?: number;
@@ -8,15 +8,14 @@ export interface ImagePreviewProps extends ModalProps {
     onIndexChange?(index: number): void;
     defaultOpen?: boolean;
     onOpenChange?(open: boolean): void;
-    /** 是否渲染旋转按钮默认为`true` */
-    showRotate?: boolean;
-    /** 是否渲染放大缩小按钮默认为`true` */
+    /** 是否渲染旋转按钮，默认为`true` */
+    showRotation?: boolean;
+    /** 是否渲染放大缩小按钮，默认为`true` */
     showZoom?: boolean;
-    /** 是否渲染关闭按钮默认为`true`*/
+    /** 是否渲染关闭按钮，默认为`true`*/
     showClose?: boolean;
-    /** 自定义右上角控制按钮 */
+    /** 自定义渲染控制按钮 */
     renderControl?: ReactNode;
     transformWrapperProps?: ReactZoomPanPinchProps;
-    transformWrapperRef?: Ref<ReactZoomPanPinchContentRef>;
 }
-export declare const ImagePreview: import("react").MemoExoticComponent<({ src, defaultIndex, index, onIndexChange, defaultOpen, open, onOpenChange, showRotate, showZoom, showClose, renderControl, transformWrapperProps, transformWrapperRef, ...props }: ImagePreviewProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const ImagePreview: import("react").MemoExoticComponent<({ src, defaultIndex, index, onIndexChange, defaultOpen, open, onOpenChange, showRotation, showZoom, showClose, renderControl, transformWrapperProps, ...props }: ImagePreviewProps) => import("@emotion/react/jsx-runtime").JSX.Element>;