@canlooks/can-ui 0.0.1

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

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { memo } from 'react';
+import { classes, style } from './timer.style';
+import { MenuItem } from '../menuItem';
+import { useDateTimePickerContext } from './dateTimePicker';
+import { useScrollToSelected } from '../popper';
+export const Timer = memo(({ showHours, showMinutes, showSeconds, value, onChange }) => {
+    return (_jsxs("div", { css: style, className: classes.root, children: [showHours && _jsx(TimerItem, { type: "hour", value: value, onChange: onChange }), showMinutes && _jsx(TimerItem, { type: "minute", value: value, onChange: onChange }), showSeconds && _jsx(TimerItem, { type: "second", value: value, onChange: onChange })] }));
+});
+function TimerItem({ type, value, onChange }) {
+    const { min, max, disabledHours, disabledMinutes, disabledSeconds } = useDateTimePickerContext();
+    const currentNum = type === 'hour' ? value.hour()
+        : type === 'minute' ? value.minute()
+            : value.second();
+    const isDisabled = (num) => {
+        if (type === 'hour') {
+            if (disabledHours && !disabledHours(value, num)) {
+                return true;
+            }
+        }
+        else if (type === 'minute') {
+            if (disabledMinutes && !disabledMinutes(value, num)) {
+                return true;
+            }
+        }
+        else {
+            if (disabledSeconds && !disabledSeconds(value, num)) {
+                return true;
+            }
+        }
+        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;
+    };
+    const selectedItemRef = useScrollToSelected();
+    const renderItems = (count) => {
+        const ret = [];
+        for (let i = 0; i < count; i++) {
+            ret.push(_jsx(MenuItem, { ref: i === currentNum ? selectedItemRef : void 0, className: classes.timerItem, label: i.toString().padStart(2, '0'), selected: i === currentNum, onClick: () => i !== currentNum && onChange(value.set(type, i)), disabled: isDisabled(i) }, i));
+        }
+        return ret;
+    };
+    return (_jsxs("div", { className: classes.selectItem, children: [_jsx("div", { className: classes.selectItemTitle, children: type === 'hour' ? '时'
+                    : type === 'minute' ? '分'
+                        : '秒' }), _jsx("div", { className: classes.selectItemBody, children: renderItems(type === 'hour' ? 24 : 60) })] }));
+}

package/dist/esm/components/dateTimePicker/timer.style.d.ts

@@ -0,0 +1,9 @@
+export declare const classes: {
+    selectItem: string;
+    selectItemTitle: string;
+    selectItemBody: string;
+    timerItem: string;
+} & {
+    root: string;
+};
+export declare const style: () => import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,45 @@
+import { css } from '@emotion/react';
+import { defineClasses, defineCss } from '../../utils';
+import { menuListPadding } from '../menuItem/menuItem.style';
+export const classes = defineClasses('timer', [
+    'selectItem',
+    'selectItemTitle',
+    'selectItemBody',
+    'timerItem'
+]);
+export const style = defineCss(({ divider }) => css `
+    display: flex;
+    padding-left: ${menuListPadding}px;
+    
+    .${classes.selectItem} {
+        width: 56px;
+        height: 351px;
+        display: flex;
+        flex-direction: column;
+        margin-right: ${menuListPadding}px;
+    
+        .${classes.selectItemTitle} {
+            line-height: 40px;
+            padding-left: 12px;
+            border-bottom: 1px solid ${divider};
+        }
+    
+        .${classes.selectItemBody} {
+            flex: 1;
+            overflow: hidden;
+            font-size: ${13 / 14}em;
+    
+            &:hover {
+                overflow-y: auto;
+            }
+    
+            .${classes.timerItem} {
+                width: 56px;
+
+                &[data-disabled=true] {
+                    border-radius: 0;
+                }
+            }
+        }
+    }
+`);

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

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+import { ColorPropsValue, DIVProps, Size } from '../../../types';
+import { DatePickerSharedProps, DateTimePickerProps } from '../dateTimePicker';
+import { Dayjs } from 'dayjs';
+type DateValueType = [Dayjs | null, Dayjs | null] | null;
+export interface DateTimeRangePickerProps extends DatePickerSharedProps, Omit<DIVProps, 'defaultValue' | 'onChange'> {
+    startPickerProps?: DateTimePickerProps;
+    endPickerProps?: DateTimePickerProps;
+    format?: string;
+    defaultValue?: DateValueType;
+    value?: DateValueType;
+    onChange?(value: DateValueType): void;
+    defaultOpenPicker?: 'start' | 'end' | 'closed';
+    openPicker?: 'start' | 'end' | 'closed';
+    onOpenPickerChange?(openPicker?: 'start' | 'end' | 'closed'): void;
+    autoClose?: boolean;
+    separator?: ReactNode;
+    variant?: 'outlined' | 'underlined' | 'plain';
+    size?: Size;
+    color?: ColorPropsValue;
+    disabled?: boolean;
+    readOnly?: boolean;
+    autoFocus?: boolean;
+}
+export declare const DateTimeRangePicker: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<DateTimeRangePickerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;
+export {};

package/dist/esm/components/dateTimeRangePicker/dateTimeRangePicker.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { forwardRef, memo, useRef } from 'react';
+import { classes, style } from './dateTimeRangePicker.style';
+import { classnames, cloneRef, useControlled } from '../../utils';
+import { DateTimePicker } from '../dateTimePicker';
+export const DateTimeRangePicker = memo(forwardRef(({ startPickerProps, endPickerProps, format = 'YYYY-MM-DD', defaultValue, value, onChange, defaultOpenPicker = 'closed', openPicker, onOpenPickerChange, autoClose = !/[Hms]/.test(format), separator, min, max, disabledDates, disabledHours, disabledMinutes, disabledSeconds, 
+// 以下属性除autoFocus外，原样转发，autoFocus只对开始选择器生效
+variant, size, color, disabled, readOnly, autoFocus, ...props }, ref) => {
+    const [innerOpen, setInnerOpen] = useControlled(defaultOpenPicker, openPicker, onOpenPickerChange);
+    const [innerValue, setInnerValue] = useControlled(defaultValue, value, onChange);
+    const endPickerInputRef = useRef(null);
+    const commonProps = {
+        format, disabledDates, disabledHours, disabledMinutes, disabledSeconds,
+        variant, size, color, disabled, readOnly
+    };
+    const showTimer = /[Hms]/.test(format);
+    return (_jsxs("div", { ...props, ref: ref, css: style, className: classnames(classes.root, props.className), children: [_jsx(DateTimePicker, { ...commonProps, autoFocus: autoFocus, autoClose: false, placeholder: showTimer ? '开始时间' : '开始日期', max: innerValue.current?.[1] || void 0, open: innerOpen.current === 'start', ...startPickerProps, onOpenChange: open => {
+                    startPickerProps?.onOpenChange?.(open);
+                    setInnerOpen(open ? 'start' : 'closed');
+                }, onChange: startValue => {
+                    startPickerProps?.onChange?.(startValue);
+                    setInnerValue(o => [startValue, o?.[1] || null]);
+                    if (startValue && !showTimer) {
+                        endPickerInputRef.current.focus();
+                        innerOpen.current === 'start' && setInnerOpen('end');
+                    }
+                } }), separator ?? _jsx("span", { children: "-" }), _jsx(DateTimePicker, { ...commonProps, autoClose: autoClose, placeholder: showTimer ? '结束时间' : '结束日期', min: innerValue.current?.[0] || void 0, open: innerOpen.current === 'end', ...endPickerProps, inputRef: cloneRef(endPickerInputRef, endPickerProps?.inputRef), onOpenChange: open => {
+                    startPickerProps?.onOpenChange?.(open);
+                    setInnerOpen(open ? 'end' : 'closed');
+                }, onChange: endValue => {
+                    endPickerProps?.onChange?.(endValue);
+                    setInnerValue(o => [o?.[0] || null, endValue]);
+                }, popperProps: {
+                    ...endPickerProps?.popperProps,
+                    placement: 'bottomRight'
+                } })] }));
+}));

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

@@ -0,0 +1,4 @@
+export declare const classes: {
+    root: string;
+};
+export declare const style: () => import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,13 @@
+import { css } from '@emotion/react';
+import { defineClasses, defineCss } from '../../utils';
+import { classes as dateTimePickerClasses } from '../dateTimePicker/dateTimePicker.style';
+export const classes = defineClasses('date-time-rage-picker');
+export const style = defineCss(({ spacing }) => css `
+    display: flex;
+    align-items: center;
+    gap: ${spacing[1]}px;
+
+    .${dateTimePickerClasses.root} {
+        flex: 1;
+    }
+`);

package/dist/esm/components/dateTimeRangePicker/index.d.ts

@@ -0,0 +1 @@
+export * from './dateTimeRangePicker';

package/dist/esm/components/dateTimeRangePicker/index.js

@@ -0,0 +1 @@
+export * from './dateTimeRangePicker';

package/dist/esm/components/descriptions/descriptionItem.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { DescriptionsSharedProps } from './descriptions';
+import { GridItemProps } from '../grid';
+import { ResponsiveProp } from '../../../types';
+interface DescriptionItemBaseProps extends DescriptionsSharedProps {
+    label?: ReactNode;
+}
+interface DescriptionGridItemProps extends DescriptionItemBaseProps, GridItemProps {
+}
+interface DescriptionTableItemProps extends DescriptionItemBaseProps {
+    span?: ResponsiveProp;
+    className?: string;
+    children?: ReactNode;
+}
+export type DescriptionItemProps = DescriptionGridItemProps | DescriptionTableItemProps;
+export declare const DescriptionItem: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<(DescriptionTableItemProps | Omit<DescriptionGridItemProps, "ref">) & import("react").RefAttributes<HTMLDivElement>>>;
+export {};

package/dist/esm/components/descriptions/descriptionItem.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+import { forwardRef, memo } from 'react';
+import { useDescriptionsContext } from './descriptions';
+import { useTheme } from '../app';
+import { GridItem } from '../grid';
+import { classnames, useResponsiveValue } from '../../utils';
+import { classes, gridItemStyle } from './descriptions.style';
+export const DescriptionItem = memo(forwardRef(({ label, 
+// 以下属性从DescriptionsSharedProps继承
+size, labelWidth, colon, labelPlacement, disableMargin, disablePadding, span = { xs: 1 }, ...props }, ref) => {
+    const theme = useTheme();
+    const { variant = 'grid', ...context } = useDescriptionsContext();
+    size ??= context.size ?? theme.size;
+    labelWidth ??= context.labelWidth;
+    colon ??= context.colon ?? ':';
+    labelPlacement ??= context.labelPlacement ?? 'left';
+    disableMargin ??= context.disableMargin;
+    disablePadding ??= context.disablePadding;
+    const spanNum = useResponsiveValue(span);
+    return variant === 'grid'
+        ? _jsxs(GridItem, { ...props, ref: ref, css: gridItemStyle, className: classnames(classes.item, props.className), span: span, "data-size": size, "data-label-placement": labelPlacement, "data-disable-margin": disableMargin, children: [!!label &&
+                    _jsxs("div", { className: classes.label, style: { width: labelWidth }, children: [label, !!colon && (labelPlacement === 'left' || labelPlacement === 'right') &&
+                                _jsx("div", { className: classes.colon, children: colon })] }), _jsx("div", { className: classes.content, children: props.children })] })
+        : labelPlacement === 'top'
+            ? _jsx("td", { className: classes.vertical, colSpan: spanNum, children: _jsxs("div", { className: classes.verticalColWrap, children: [_jsx("div", { className: `${classes.col} ${classes.labelCol}`, "data-size": size, children: label }), _jsx("div", { className: `${classes.col} ${classes.contentCol}`, "data-size": size, "data-disable-padding": disablePadding, children: props.children })] }) })
+            : _jsxs(_Fragment, { children: [!!label &&
+                        _jsx("td", { className: `${classes.col} ${classes.labelCol}`, "data-size": size, children: label }), _jsx("td", { className: `${classes.col} ${classes.contentCol}`, colSpan: spanNum * 2 - 1, "data-size": size, "data-disable-padding": disablePadding, children: props.children })] });
+}));

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

@@ -0,0 +1,41 @@
+import { ReactElement, ReactNode } from 'react';
+import { Obj, ResponsiveProp, Size } from '../../../types';
+import { GridProps } from '../grid';
+import { DescriptionItem, DescriptionItemProps } from './descriptionItem';
+export type DescriptionsSharedProps = {
+    size?: Size;
+    /** 标签的宽度,grid模式有效 */
+    labelWidth?: string | number;
+    colon?: ReactNode;
+    /** 标签的位置，table模式下仅支持'left'与'top', @default 'left' */
+    labelPlacement?: 'top' | 'bottom' | 'left' | 'right';
+    /** 是否禁用margin,{@link DescriptionsGridProps.variant}为grid有效  */
+    disableMargin?: boolean;
+    /** 是否禁用padding,{@link DescriptionsTableProps.variant}为table有效 */
+    disablePadding?: boolean;
+};
+export interface DescriptionsBaseProps extends DescriptionsSharedProps {
+    items?: (DescriptionItemProps & Obj)[];
+    /**
+     * @private 用于渲染item的组件，通常为内部使用
+     * @default DescriptionItem {@link DescriptionItem}
+     */
+    itemComponent?: any;
+}
+export interface DescriptionsGridProps extends DescriptionsBaseProps, GridProps {
+    variant?: 'grid';
+}
+export interface DescriptionsTableProps extends DescriptionsBaseProps, Partial<JSX.IntrinsicElements['table']> {
+    variant: 'table';
+    columnCount?: ResponsiveProp;
+}
+export type DescriptionsProps = DescriptionsGridProps | DescriptionsTableProps;
+interface DescriptionsContext extends DescriptionsSharedProps {
+    variant?: 'grid' | 'table';
+}
+export declare function useDescriptionsContext(): DescriptionsContext;
+export declare const Descriptions: {
+    (props: DescriptionsProps): ReactElement;
+    Item: typeof DescriptionItem;
+};
+export {};

package/dist/esm/components/descriptions/descriptions.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { Children, createContext, forwardRef, isValidElement, memo, useContext, useMemo } from 'react';
+import { Grid } from '../grid';
+import { DescriptionItem } from './descriptionItem';
+import { classnames, useResponsiveValue } from '../../utils';
+import { classes, tableStyle } from './descriptions.style';
+import { useTheme } from '../app';
+export function useDescriptionsContext() {
+    return useContext(descriptionsContext);
+}
+const descriptionsContext = createContext({});
+export const Descriptions = memo(forwardRef(({ size, labelWidth, colon = ':', labelPlacement = 'left', disableMargin, disablePadding, items, itemComponent: ItemComponent = DescriptionItem, variant = 'grid', columnCount = 3, ...props }, ref) => {
+    const contextValue = useMemo(() => ({
+        size, labelWidth, colon, labelPlacement, disableMargin, disablePadding, variant
+    }), [
+        size, labelWidth, colon, labelPlacement, disableMargin, disablePadding, variant
+    ]);
+    const renderGridItems = () => {
+        return items?.map((itemProps, i) => _jsx(ItemComponent, { 
+            // 最后一项沾满剩余行空间
+            flex: i === items.length - 1 ? 1 : void 0, ...itemProps }, i)) || props.children;
+    };
+    const columnCountNum = useResponsiveValue(columnCount);
+    const renderTableItems = () => {
+        const actualItems = items || Children.map(props.children, c => isValidElement(c) ? c.props : c);
+        if (actualItems?.length) {
+            const rows = [];
+            for (let i = 0, { length } = actualItems; i < length; i++) {
+                const cols = rows[Math.floor(i / columnCountNum)] ||= [];
+                const itemProps = actualItems[i];
+                cols.push(_jsx(ItemComponent, { ...itemProps, span: i === actualItems.length - 1 ? columnCountNum - i % columnCountNum : itemProps.span, className: classnames(classes.col, itemProps) }, i));
+            }
+            return rows.map((r, i) => _jsx("tr", { children: r }, i));
+        }
+        return null;
+    };
+    const { spacing } = useTheme();
+    const style = tableStyle();
+    return variant === 'grid'
+        ? _jsx(Grid, { columnGap: spacing[6], ...props, ref: ref, className: classnames(classes.root, props.className), columnCount: columnCount, "data-variant": variant, children: _jsx(descriptionsContext.Provider, { value: contextValue, children: renderGridItems() }) })
+        : _jsx("table", { ...props, ref: ref, css: style, className: classnames(classes.root, props.className), "data-size": size, "data-variant": variant, children: _jsx("tbody", { children: _jsx(descriptionsContext.Provider, { value: contextValue, children: renderTableItems() }) }) });
+}));
+Descriptions.Item = DescriptionItem;

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

@@ -0,0 +1,15 @@
+export declare const classes: {
+    vertical: string;
+    content: string;
+    col: string;
+    label: string;
+    item: string;
+    colon: string;
+    labelCol: string;
+    contentCol: string;
+    verticalColWrap: string;
+} & {
+    root: string;
+};
+export declare const tableStyle: () => import("@emotion/react").SerializedStyles;
+export declare const gridItemStyle: () => import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,118 @@
+import { css } from '@emotion/react';
+import { defineClasses, defineCss } from '../../utils';
+export const classes = defineClasses('descriptions', [
+    'item',
+    'label',
+    'colon',
+    'content',
+    'col',
+    'labelCol',
+    'contentCol',
+    'vertical',
+    'verticalColWrap'
+]);
+export const tableStyle = defineCss(({ divider, spacing, background }) => css `
+    width: 100%;
+    border-collapse: collapse;
+
+    td {
+        padding: 0;
+        border: 1px solid ${divider};
+    }
+
+    .${classes.col} {
+        &:not([data-disable-padding=true]) {
+            padding: 12px ${spacing[5]}px;
+
+            &[data-size=small] {
+                padding: 7px ${spacing[4]}px;
+            }
+            
+            &[data-size=large] {
+                padding: 17px ${spacing[6]}px;
+            }
+        }
+    }
+
+    .${classes.labelCol} {
+        background-color: ${background.fixed};
+    }
+
+    .${classes.vertical} {
+        vertical-align: top;
+    }
+
+    .${classes.verticalColWrap} {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+
+        .${classes.labelCol} {
+            flex: 1;
+            border-bottom: 1px solid ${divider};
+        }
+    }
+`);
+export const gridItemStyle = defineCss(({ spacing, text }) => css `
+    display: flex;
+    gap: 4px 0;
+
+    &[data-label-placement=top] {
+        flex-direction: column;
+    }
+
+    &[data-label-placement=bottom] {
+        flex-direction: column-reverse;
+    }
+
+    &[data-label-placement=right] {
+        flex-direction: row-reverse;
+    }
+
+    &:not([data-label-placement=top]):not([data-label-placement=bottom]) {
+        align-items: baseline;
+    }
+
+    &:not([data-disable-margin=true]) {
+        margin-bottom: ${spacing[4]}px;
+
+        &[data-size=small] {
+            margin-bottom: ${spacing[2]}px;
+        }
+
+        &[data-size=large] {
+            margin-bottom: ${spacing[6]}px;
+        }
+    }
+
+    .${classes.label} {
+        display: flex;
+        color: ${text.secondary};
+
+        .${classes.colon} {
+            margin-left: 1px;
+        }
+    }
+
+    .${classes.content} {
+        flex: 1;
+    }
+
+    &[data-label-placement=left] {
+        .${classes.label} {
+            justify-content: flex-end;
+        }
+
+        .${classes.content} {
+            margin-left: ${spacing[2]}px;
+        }
+    }
+
+    &[data-label-placement=right] {
+        .${classes.content} {
+            text-align: right;
+            margin-right: ${spacing[2]}px;
+            justify-content: flex-end;
+        }
+    }
+`);

package/dist/esm/components/descriptions/index.d.ts

@@ -0,0 +1,2 @@
+export * from './descriptions';
+export * from './descriptionItem';

package/dist/esm/components/descriptions/index.js

@@ -0,0 +1,2 @@
+export * from './descriptions';
+export * from './descriptionItem';

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

@@ -0,0 +1,36 @@
+import React, { ReactNode, Ref } from 'react';
+import { ModalProps } from '../modal';
+import { ButtonProps } from '../button';
+import { DrawerCloseReason } from '../drawer';
+export type DialogCloseReason = DrawerCloseReason | 'canceled' | 'confirmed';
+export interface DialogProps extends Omit<ModalProps, 'title' | 'prefix'> {
+    icon?: ReactNode;
+    title?: ReactNode;
+    footer?: ReactNode;
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+    width?: string | number;
+    minWidth?: string | number;
+    maxWidth?: string | number;
+    showClose?: ReactNode;
+    closeProps?: ButtonProps;
+    showConfirm?: boolean;
+    confirmText?: ReactNode;
+    confirmProps?: ButtonProps;
+    confirmRef?: Ref<HTMLButtonElement>;
+    onConfirm?(e: React.MouseEvent<HTMLButtonElement>): any;
+    confirmLoading?: boolean;
+    showCancel?: boolean;
+    cancelText?: ReactNode;
+    cancelProps?: ButtonProps;
+    cancelRef?: Ref<HTMLButtonElement>;
+    onCancel?(e: React.MouseEvent<HTMLButtonElement | HTMLDivElement> | KeyboardEvent): void;
+    draggable?: boolean;
+    /** 是否可通过点击遮罩层关闭对话框，@default true */
+    maskClosable?: boolean;
+    /** 是否可通过键盘的【ESC】键关闭对话框，@default true */
+    escapeClosable?: boolean;
+    defaultOpen?: boolean;
+    onClose?(closeReason: DialogCloseReason): void;
+}
+export declare const Dialog: React.ForwardRefExoticComponent<Omit<DialogProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,87 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { forwardRef, useEffect, useRef } from 'react';
+import { Modal } from '../modal';
+import { classes, style } from './dialog.style';
+import { classnames, cloneRef, useControlled, useEscapeClosable, useLoading } from '../../utils';
+import { Button } from '../button';
+import { CloseOutlined } from '@ant-design/icons';
+import { Draggable } from '../draggable';
+export const Dialog = forwardRef(({ icon, title, footer, prefix, suffix, width = 420, minWidth, maxWidth = '100%', showClose = true, closeProps, showConfirm = true, confirmText = '确 定', confirmProps, confirmRef, onConfirm, confirmLoading = false, showCancel = true, cancelText = '取 消', cancelProps, cancelRef, onCancel, draggable = true, maskClosable = true, escapeClosable = true, defaultOpen = false, open, onClose, ...props }, ref) => {
+    const [innerOpen, _setInnerOpen] = useControlled(defaultOpen, open);
+    const close = (closeReason) => {
+        if (!innerLoading.current || closeReason === 'confirmed') {
+            onClose?.(closeReason);
+            _setInnerOpen(false);
+        }
+    };
+    // 绑定ESC键
+    const overlayRef = useEscapeClosable({ escapeClosable, close }, onCancel);
+    // 点击遮罩层
+    const onMaskClick = (e) => {
+        props.onMaskClick?.(e);
+        if (maskClosable) {
+            onCancel?.(e);
+            close('maskClicked');
+        }
+    };
+    // 点击取消按钮
+    const cancelHandler = (e) => {
+        cancelProps?.onClick?.(e);
+        onCancel?.(e);
+        close('canceled');
+    };
+    // 点击关闭按钮
+    const closeHandler = (e) => {
+        closeProps?.onClick?.(e);
+        onCancel?.(e);
+        close('closed');
+    };
+    // 点击确定
+    const [innerLoading, confirmHandler] = useLoading(async (e) => {
+        confirmProps?.onClick?.(e);
+        await onConfirm?.(e);
+        close('confirmed');
+    }, confirmLoading);
+    /**
+     * ---------------------------------------------------------------------
+     * 长内容滚动
+     */
+    const bodyRef = useRef(null);
+    const bodyWrapRef = useRef(null);
+    const onScroll = () => {
+        const el = bodyRef.current;
+        if (el.scrollHeight > el.clientHeight) {
+            el.dataset.borderTop = (el.scrollTop > 0).toString();
+            el.dataset.borderBottom = (el.scrollHeight - el.clientHeight > el.scrollTop).toString();
+        }
+    };
+    useEffect(() => {
+        if (innerOpen.current) {
+            const resizeObserver = new ResizeObserver(onScroll);
+            resizeObserver.observe(bodyWrapRef.current);
+            return () => {
+                resizeObserver.disconnect();
+            };
+        }
+        return;
+    }, [innerOpen.current]);
+    /**
+     * ---------------------------------------------------------------------
+     * 渲染
+     */
+    const renderFooter = () => {
+        if (typeof footer === 'undefined' || footer === true) {
+            return (_jsxs(_Fragment, { children: [showCancel &&
+                        _jsx(Button, { variant: "outlined", ...cancelProps, ref: cancelRef, onClick: cancelHandler, children: cancelText }), showConfirm &&
+                        _jsx(Button, { loading: innerLoading.current, ...confirmProps, ref: confirmRef, onClick: confirmHandler, children: confirmText })] }));
+        }
+        return footer;
+    };
+    return (_jsx(Modal, { ...props, ref: cloneRef(ref, overlayRef), css: style, className: classnames(classes.root, props.className), open: innerOpen.current, onMaskClick: onMaskClick, "data-draggable": draggable, children: _jsx(Draggable, { container: () => overlayRef.current, children: (targetProps, handleProps) => _jsxs("div", { className: classes.card, ...targetProps, style: { width, minWidth, maxWidth, ...targetProps.style }, children: [!!icon &&
+                        _jsx("div", { className: classes.icon, children: icon }), _jsxs("div", { className: classes.content, children: [!!(title || showClose) &&
+                                _jsxs("div", { className: classes.titleRow, ...handleProps, children: [_jsx("div", { className: classes.title, children: title }), showClose &&
+                                            _jsx(Button, { shape: "circular", variant: "text", color: "text", ...closeProps, className: classnames(classes.close, closeProps?.className), onClick: closeHandler, children: _jsx(CloseOutlined, {}) })] }), _jsxs("div", { ref: bodyRef, className: classes.body, onScroll: onScroll, children: [!!prefix &&
+                                        _jsx("div", { className: classes.prefix, children: prefix }), _jsx("div", { ref: bodyWrapRef, className: classes.bodyWrap, children: props.children }), !!suffix &&
+                                        _jsx("div", { className: classes.suffix, children: suffix })] }), (typeof footer === 'undefined' || !!footer) &&
+                                _jsx("div", { className: classes.footer, children: renderFooter() })] })] }) }) }));
+});

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

@@ -0,0 +1,16 @@
+export declare const classes: {
+    body: string;
+    card: string;
+    title: string;
+    content: string;
+    prefix: string;
+    footer: string;
+    icon: string;
+    titleRow: string;
+    close: string;
+    bodyWrap: string;
+    suffix: string;
+} & {
+    root: string;
+};
+export declare const style: () => import("@emotion/react").SerializedStyles;