@canlooks/can-ui 0.0.1

package/dist/cjs/components/bottomNavigation/bottomNavigation.d.ts

@@ -0,0 +1,17 @@
+import { ReactElement } from 'react';
+import { DIVProps, Id, Obj } from '../../../types';
+import { BottomNavigationItemProps } from './bottomNavigationItem';
+type BottomNavigationItemType = BottomNavigationItemProps & Obj;
+export interface BottomNavigationProps<I extends BottomNavigationItemType> extends Omit<DIVProps, 'defaultValue' | 'onChange'> {
+    items?: I[];
+    /** 未激活状态下是否显示label，items数量小于等于3时默认为true，否则为false */
+    showLabelInactive?: boolean;
+    /** @default "value" */
+    primaryKey?: keyof I;
+    labelKey?: keyof I;
+    defaultValue?: Id;
+    value?: Id;
+    onChange?(value: Id): void;
+}
+export declare const BottomNavigation: <I extends BottomNavigationItemType>(props: BottomNavigationProps<I>) => ReactElement;
+export {};

package/dist/cjs/components/bottomNavigation/bottomNavigation.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BottomNavigation = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const bottomNavigation_style_1 = require("./bottomNavigation.style");
+const utils_1 = require("../../utils");
+const bottomNavigationItem_1 = require("./bottomNavigationItem");
+exports.BottomNavigation = (0, react_1.memo)((0, react_1.forwardRef)(({ items, showLabelInactive, primaryKey = 'value', labelKey = 'label', defaultValue = 'children', value, onChange, ...props }, ref) => {
+    const [innerValue, setInnerValue] = (0, utils_1.useControlled)(defaultValue, value, onChange);
+    const renderItems = () => {
+        if (items) {
+            return items.map((p, i) => {
+                const itemValue = p[primaryKey];
+                return ((0, jsx_runtime_1.jsx)(bottomNavigationItem_1.BottomNavigationItem, { value: itemValue, icon: p.icon, label: p[labelKey], showLabelInactive: p.showLabelInactive ?? showLabelInactive ?? items.length <= 3, active: !(0, utils_1.isUnset)(itemValue) && innerValue.current === itemValue, onClick: e => {
+                        p.onClick?.(e);
+                        setInnerValue(itemValue);
+                    } }, p.key ?? itemValue ?? i));
+            });
+        }
+        showLabelInactive ??= react_1.Children.count(props.children) <= 3;
+        return react_1.Children.map(props.children, c => {
+            return (0, react_1.isValidElement)(c)
+                ? (0, react_1.cloneElement)(c, {
+                    showLabelInactive: c.props.showLabelInactive ?? showLabelInactive,
+                    active: !(0, utils_1.isUnset)(c.props.value) && innerValue.current === c.props.value,
+                    onClick: e => {
+                        c.props.onClick?.(e);
+                        setInnerValue(c.props.value);
+                    },
+                })
+                : c;
+        });
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, ref: ref, css: bottomNavigation_style_1.style, className: (0, utils_1.classnames)(bottomNavigation_style_1.classes.root, props.className), children: renderItems() }));
+}));

package/dist/cjs/components/bottomNavigation/bottomNavigation.style.d.ts

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

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

@@ -0,0 +1,93 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.style = exports.classes = void 0;
+const tslib_1 = require("tslib");
+const react_1 = require("@emotion/react");
+const utils_1 = require("../../utils");
+const color_1 = tslib_1.__importDefault(require("color"));
+exports.classes = (0, utils_1.defineClasses)('botton-navigation', [
+    'item',
+    'icon',
+    'label'
+]);
+exports.style = (0, utils_1.defineCss)(({ mode, background, text, easing, colors }) => {
+    const primaryColor = (0, color_1.default)(colors.primary);
+    return (0, react_1.css) `
+        height: 56px;
+        background-color: ${background.card};
+        display: flex;
+        position: absolute;
+        inset: auto 0 0;
+
+        .${exports.classes.item} {
+            line-height: 1;
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            color: ${text.secondary};
+            transition: background-color .2s ${easing.easeOut};
+            
+            &:hover {
+                &:not([data-active=true]) {
+                    background-color: ${(0, color_1.default)(text.primary).alpha(.03).string()};
+                }
+
+                &[data-active=true] {
+                    background-color: ${primaryColor.alpha(.03).string()};
+                }
+            }
+
+            &:active {
+                transition: background-color 0s;
+
+                &:not([data-active=true]) {
+                    background-color: rgba(0, 0, 0, .06);
+                }
+
+                &[data-active=true] {
+                    background-color: ${primaryColor.alpha(.06).string()};
+                }
+            }
+            
+            &[data-active=true] {
+                color: ${colors.primary};
+            }
+
+            .${exports.classes.icon} {
+                display: flex;
+                font-size: ${18 / 14}em;
+            }
+
+            .${exports.classes.label} {
+                transition-property: font-size, transform, height;
+                transition-duration: .2s;
+                transition-timing-function: ${easing.easeOut};
+            }
+
+            &[data-show-label-inactive=true]:not([data-active=true]) {
+                .${exports.classes.label} {
+                    font-size: ${12 / 14}em;
+                }
+            }
+
+            &:not([data-show-label-inactive=true]):not([data-active=true]) {
+                .${exports.classes.label} {
+                    height: 0;
+                    transform: scale(0);
+                }
+            }
+
+            &[data-active=true] {
+                .${exports.classes.label} {
+                    height: 1em;
+                    font-size: 1em;
+                    transform: scale(1);
+                    transition-timing-function: ${easing.bounce};
+                }
+            }
+        }
+    `;
+});

package/dist/cjs/components/bottomNavigation/bottomNavigationItem.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { DIVProps, Id } from '../../../types';
+export interface BottomNavigationItemProps extends DIVProps {
+    value?: Id;
+    icon?: ReactNode;
+    label?: ReactNode;
+    showLabelInactive?: boolean;
+    active?: boolean;
+}
+export declare const BottomNavigationItem: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<BottomNavigationItemProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;

package/dist/cjs/components/bottomNavigation/bottomNavigationItem.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BottomNavigationItem = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const utils_1 = require("../../utils");
+const bottomNavigation_style_1 = require("./bottomNavigation.style");
+exports.BottomNavigationItem = (0, react_1.memo)((0, react_1.forwardRef)(({ value, icon, label, showLabelInactive = true, active, ...props }, ref) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, ref: ref, className: (0, utils_1.classnames)(bottomNavigation_style_1.classes.item, props.className), "data-active": active, "data-show-label-inactive": showLabelInactive, children: [!!icon &&
+                (0, jsx_runtime_1.jsx)("div", { className: bottomNavigation_style_1.classes.icon, children: icon }), !!label &&
+                (0, jsx_runtime_1.jsx)("div", { className: bottomNavigation_style_1.classes.label, children: label })] }));
+}));

package/dist/cjs/components/bottomNavigation/index.d.ts

@@ -0,0 +1,2 @@
+export * from './bottomNavigation';
+export * from './bottomNavigationItem';

package/dist/cjs/components/bottomNavigation/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./bottomNavigation"), exports);
+tslib_1.__exportStar(require("./bottomNavigationItem"), exports);

package/dist/cjs/components/boundary/boundary.d.ts

@@ -0,0 +1,40 @@
+import { Component, ErrorInfo, ReactNode } from 'react';
+export type BoundaryProps<Data = any, Params = any, Args = any> = {
+    children?: ReactNode | ((data: Data | null, reload: (...params: Params[]) => void) => ReactNode);
+    onError?(error: Error, errorInfo: ErrorInfo): void;
+    renderError?: ReactNode | ((errorProps: {
+        error: any;
+        reload?(...params: Params[]): void;
+    }) => ReactNode);
+    renderLoading?: ReactNode | ((...args: Args[]) => ReactNode);
+    loadData?(passLoadingArgs: (...args: Args[]) => void, ...params: Params[]): Data | Promise<Data>;
+};
+type BoundaryContext<Data = any, Params = any> = {
+    data?: Data | null;
+    reload?(...params: Params[]): void;
+};
+export declare function useBoundaryContext<Data = any, Params = any>(): BoundaryContext<Data, Params>;
+type BoundaryState<Data = any> = {
+    error: any | null;
+    loading: boolean;
+    loadingComponent: ReactNode;
+    progress: number;
+    data: Data | null;
+};
+export declare class Boundary<Data = any, Params = any, Args = any> extends Component<BoundaryProps<Data, Params, Args>, BoundaryState<Data>> {
+    static ErrorBoundary: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<import("./errorBoundary").ErrorBoundaryProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;
+    static getDerivedStateFromError(error: any): {
+        error: any;
+    };
+    state: BoundaryState<Data>;
+    private passLoadingArgs;
+    private reload;
+    componentDidMount(): Promise<void>;
+    private isUnmounted;
+    componentWillUnmount(): void;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    private renderError;
+    private renderChildren;
+    render(): string | number | boolean | Iterable<ReactNode> | import("@emotion/react/jsx-runtime").JSX.Element | null | undefined;
+}
+export {};

package/dist/cjs/components/boundary/boundary.js

@@ -0,0 +1,102 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Boundary = void 0;
+exports.useBoundaryContext = useBoundaryContext;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const errorBoundary_1 = require("./errorBoundary");
+const boundaryContext = (0, react_1.createContext)({});
+function useBoundaryContext() {
+    return (0, react_1.useContext)(boundaryContext);
+}
+class Boundary extends react_1.Component {
+    static ErrorBoundary = errorBoundary_1.ErrorBoundary;
+    static getDerivedStateFromError(error) {
+        return { error };
+    }
+    state = {
+        error: null,
+        progress: 0,
+        data: null,
+        ...this.props.loadData
+            ? {
+                loading: true,
+                loadingComponent: typeof this.props.renderLoading === 'function'
+                    ? this.props.renderLoading()
+                    : this.props.renderLoading
+            }
+            : {
+                loading: false,
+                loadingComponent: null
+            }
+    };
+    passLoadingArgs = (...args) => {
+        typeof this.props.renderLoading === 'function' && this.setState({
+            loadingComponent: this.props.renderLoading(...args)
+        });
+    };
+    reload = async (...params) => {
+        const { loadData } = this.props;
+        if (loadData) {
+            this.setState({ loading: true });
+            try {
+                const data = await loadData(this.passLoadingArgs, ...params);
+                !this.isUnmounted && this.setState({
+                    loading: false,
+                    data,
+                    error: null
+                });
+            }
+            catch (error) {
+                !this.isUnmounted && this.setState({
+                    loading: false,
+                    data: null,
+                    error
+                });
+                throw error;
+            }
+        }
+        else {
+            this.setState({ error: null });
+        }
+    };
+    async componentDidMount() {
+        await this.reload();
+    }
+    isUnmounted = false;
+    componentWillUnmount() {
+        this.isUnmounted = true;
+    }
+    componentDidCatch(error, errorInfo) {
+        this.props.onError?.(error, errorInfo);
+    }
+    renderError = () => {
+        const errorProps = {
+            error: this.state.error,
+            reload: this.reload
+        };
+        const { renderError } = this.props;
+        return typeof renderError === 'function'
+            ? renderError(errorProps)
+            : (0, react_1.isValidElement)(renderError)
+                ? (0, react_1.cloneElement)(renderError, errorProps)
+                : renderError;
+    };
+    renderChildren = () => {
+        return typeof this.props.children === 'function'
+            ? this.props.children(this.state.data, this.reload)
+            : this.props.children;
+    };
+    render() {
+        const { loading, loadingComponent, error } = this.state;
+        return loading
+            ? loadingComponent
+            : error
+                ? this.renderError()
+                : (0, jsx_runtime_1.jsx)(boundaryContext.Provider, { value: {
+                        data: this.state.data,
+                        reload: this.reload
+                    }, children: this.renderChildren() });
+    }
+}
+exports.Boundary = Boundary;

package/dist/cjs/components/boundary/errorBoundary.d.ts

@@ -0,0 +1,6 @@
+import { PlaceholderProps } from '../placeholder';
+export interface ErrorBoundaryProps extends PlaceholderProps {
+    error?: any | null;
+    reload?(): void;
+}
+export declare const ErrorBoundary: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<ErrorBoundaryProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;

package/dist/cjs/components/boundary/errorBoundary.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorBoundary = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const utils_1 = require("../../utils");
+const errorBoundary_style_1 = require("./errorBoundary.style");
+const placeholder_1 = require("../placeholder");
+const button_1 = require("../button");
+const icons_1 = require("@ant-design/icons");
+exports.ErrorBoundary = (0, react_1.memo)((0, react_1.forwardRef)(({ error, reload, ...props }, ref) => {
+    const renderDescriptions = () => {
+        if (error instanceof Error) {
+            return error.stack;
+        }
+        const errorType = typeof error;
+        if (errorType === 'string'
+            || errorType === 'number'
+            || errorType === 'boolean') {
+            return error.toString();
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(placeholder_1.Placeholder, { status: "error", description: renderDescriptions(), descriptionComponent: "pre", extra: (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outlined", color: "text", prefix: (0, jsx_runtime_1.jsx)(icons_1.ReloadOutlined, {}), onClick: reload, children: "\u91CD\u65B0\u52A0\u8F7D" }), ...props, ref: ref, css: errorBoundary_style_1.style, className: (0, utils_1.classnames)(errorBoundary_style_1.classes.root, props.className) }));
+}));

package/dist/cjs/components/boundary/errorBoundary.style.d.ts

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

package/dist/cjs/components/boundary/errorBoundary.style.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.style = exports.classes = void 0;
+const react_1 = require("@emotion/react");
+const utils_1 = require("../../utils");
+const placeholder_style_1 = require("../placeholder/placeholder.style");
+exports.classes = (0, utils_1.defineClasses)('error-boundary');
+exports.style = (0, utils_1.defineCss)(({ spacing, background, borderRadius }) => (0, react_1.css) `
+    justify-content: flex-start;
+    padding: ${spacing[8]}px;
+
+    .${placeholder_style_1.classes.description} {
+        width: 100%;
+        background-color: ${background.card};
+        border-radius: ${borderRadius}px;
+        padding: ${spacing[8]}px;
+        margin-top: ${spacing[8]}px;
+        overflow: auto;
+    }
+`);

package/dist/cjs/components/boundary/index.d.ts

@@ -0,0 +1,2 @@
+export * from './errorBoundary';
+export * from './boundary';

package/dist/cjs/components/boundary/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./errorBoundary"), exports);
+tslib_1.__exportStar(require("./boundary"), exports);

package/dist/cjs/components/breadcrumb/breadcrumb.d.ts

@@ -0,0 +1,17 @@
+import { ReactElement, ReactNode } from 'react';
+import { Button, ButtonProps } from '../button';
+import { DIVProps, Obj } from '../../../types';
+export interface BreadcrumbItemProps extends ButtonProps, Obj {
+    /** 对应button的prefix */
+    icon?: ReactNode;
+    label?: ReactNode;
+}
+export interface BreadcrumbProps extends DIVProps {
+    separator?: ReactNode;
+    readOnly?: boolean;
+    items?: BreadcrumbItemProps[];
+}
+export declare const Breadcrumb: {
+    (props: BreadcrumbProps): ReactElement;
+    Item: typeof Button;
+};

package/dist/cjs/components/breadcrumb/breadcrumb.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Breadcrumb = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const utils_1 = require("../../utils");
+const breadcrumb_style_1 = require("./breadcrumb.style");
+const button_1 = require("../button");
+const app_1 = require("../app");
+exports.Breadcrumb = (0, react_1.memo)((0, react_1.forwardRef)(({ separator = '/', readOnly, items, ...props }, ref) => {
+    const { text } = (0, app_1.useTheme)();
+    const renderItems = () => {
+        if (items) {
+            return items.flatMap(({ icon, label, ...p }, i) => {
+                const isLast = i === items.length - 1;
+                return [
+                    (0, jsx_runtime_1.jsx)(button_1.Button, { ref: p.ref, shape: p.shape, size: p.size, suffix: p.suffix, loading: p.loading, label: p.label, variant: p.variant ?? 'plain', color: p.color ?? (isLast ? text.primary : text.disabled), readOnly: p.readOnly ?? (isLast || readOnly), prefix: p.prefix ?? icon, children: p.children }, p.key ?? i),
+                    ...isLast ? [] : [
+                        (0, jsx_runtime_1.jsx)("span", { className: breadcrumb_style_1.classes.separator, children: separator }, `${breadcrumb_style_1.classes.separator}_${i}`)
+                    ]
+                ];
+            });
+        }
+        const childrenArr = react_1.Children.toArray(props.children);
+        return childrenArr.flatMap((c, i) => {
+            const isLast = i === childrenArr.length - 1;
+            return [
+                (0, react_1.isValidElement)(c)
+                    ? (0, react_1.cloneElement)(c, {
+                        variant: c.props.variant ?? 'plain',
+                        color: c.props.color ?? (isLast ? text.primary : text.disabled),
+                        readOnly: c.props.readOnly ?? (isLast || readOnly),
+                        prefix: c.props.prefix ?? c.props.icon,
+                    })
+                    : c,
+                ...isLast ? [] : [
+                    (0, jsx_runtime_1.jsx)("span", { className: breadcrumb_style_1.classes.separator, children: separator }, `${breadcrumb_style_1.classes.separator}_${i}`)
+                ]
+            ];
+        });
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, ref: ref, css: breadcrumb_style_1.style, className: (0, utils_1.classnames)(breadcrumb_style_1.classes.root, props.className), children: renderItems() }));
+}));
+exports.Breadcrumb.Item = button_1.Button;

package/dist/cjs/components/breadcrumb/breadcrumb.style.d.ts

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

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.style = exports.classes = void 0;
+const react_1 = require("@emotion/react");
+const utils_1 = require("../../utils");
+exports.classes = (0, utils_1.defineClasses)('breadcrumb', [
+    'separator'
+]);
+exports.style = (0, utils_1.defineCss)(({ spacing, text }) => (0, react_1.css) `
+    display: flex;
+    align-items: center;
+    gap: ${spacing[3]}px;
+    
+    .${exports.classes.separator} {
+        color: ${text.disabled};
+    }
+`);

package/dist/cjs/components/breadcrumb/index.d.ts

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

package/dist/cjs/components/breadcrumb/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./breadcrumb"), exports);

package/dist/cjs/components/bubble/bubble.d.ts

@@ -0,0 +1,5 @@
+import { PopperProps } from '../popper';
+export interface BubbleProps extends PopperProps {
+    showArrow?: boolean;
+}
+export declare const Bubble: import("react").ForwardRefExoticComponent<Omit<BubbleProps, "ref"> & import("react").RefAttributes<unknown>>;

package/dist/cjs/components/bubble/bubble.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Bubble = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const popper_1 = require("../popper");
+const bubble_style_1 = require("./bubble.style");
+const utils_1 = require("../../utils");
+const app_1 = require("../app");
+exports.Bubble = (0, react_1.forwardRef)(({ showArrow = true, ...props }, ref) => {
+    const { spacing } = (0, app_1.useTheme)();
+    props.autoClose ??= true;
+    props.offset ??= showArrow ? spacing[3] : spacing[2];
+    return ((0, jsx_runtime_1.jsx)(popper_1.Popper, { ...props, ref: ref, css: bubble_style_1.style, className: (0, utils_1.classnames)(bubble_style_1.classes.root, props.className), content: (0, jsx_runtime_1.jsx)("div", { className: bubble_style_1.classes.content, "data-show-arrow": showArrow, children: props.content }) }));
+});

package/dist/cjs/components/bubble/bubble.style.d.ts

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

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

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.style = exports.classes = void 0;
+const react_1 = require("@emotion/react");
+const utils_1 = require("../../utils");
+const app_1 = require("../app");
+const popper_style_1 = require("../popper/popper.style");
+exports.classes = (0, utils_1.defineClasses)('bubble', [
+    'content'
+]);
+exports.style = (0, utils_1.defineCss)(({ background, boxShadow, borderRadius }) => (0, react_1.css) `
+    z-index: ${app_1.zIndex.dropdown};
+
+    .${exports.classes.content} {
+        background-color: ${background.card};
+        box-shadow: ${boxShadow[0]};
+        border-radius: ${borderRadius}px;
+        padding: 4px;
+    }
+
+    ${(0, popper_style_1.popperArrowStyle)(background.card)}
+`);

package/dist/cjs/components/bubble/index.d.ts

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

package/dist/cjs/components/bubble/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./bubble"), exports);

package/dist/cjs/components/bubbleConfirm/bubbleConfirm.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { PopperProps } from '../popper';
+export interface BubbleConfirmProps extends Omit<PopperProps, 'title'> {
+    icon?: ReactNode;
+    title?: ReactNode;
+    footer?: ReactNode;
+    showArrow?: boolean;
+    loading?: boolean;
+    onConfirm?(e: React.MouseEvent<HTMLButtonElement>): any;
+}
+export declare const BubbleConfirm: import("react").ForwardRefExoticComponent<Omit<BubbleConfirmProps, "ref"> & import("react").RefAttributes<unknown>>;

package/dist/cjs/components/bubbleConfirm/bubbleConfirm.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BubbleConfirm = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const popper_1 = require("../popper");
+const bubbleConfirm_style_1 = require("./bubbleConfirm.style");
+const utils_1 = require("../../utils");
+const icons_1 = require("@ant-design/icons");
+const button_1 = require("../button");
+const app_1 = require("../app");
+exports.BubbleConfirm = (0, react_1.forwardRef)(({ icon = (0, jsx_runtime_1.jsx)(icons_1.QuestionCircleFilled, {}), title, footer, showArrow = true, offset, loading = false, onConfirm, defaultOpen = false, open, onOpenChange, ...props }, ref) => {
+    const { spacing } = (0, app_1.useTheme)();
+    offset ??= showArrow ? spacing[3] : spacing[2];
+    const [innerOpen, _setInnerOpen] = (0, utils_1.useControlled)(defaultOpen, open, onOpenChange);
+    const setInnerOpen = (open) => {
+        // loading过程中不能开关弹框
+        !innerLoading.current && _setInnerOpen(open);
+    };
+    const [innerLoading, confirmHandler] = (0, utils_1.useLoading)(async (e) => {
+        await onConfirm?.(e);
+        _setInnerOpen(false);
+    }, loading);
+    return ((0, jsx_runtime_1.jsx)(popper_1.Popper, { trigger: "click", ...props, ref: ref, css: bubbleConfirm_style_1.style, className: (0, utils_1.classnames)(bubbleConfirm_style_1.classes.root, props.className), offset: offset, open: innerOpen.current, onOpenChange: setInnerOpen, content: (0, jsx_runtime_1.jsxs)("div", { className: bubbleConfirm_style_1.classes.bubble, "data-show-arrow": showArrow, children: [(0, jsx_runtime_1.jsx)("div", { className: bubbleConfirm_style_1.classes.icon, children: icon }), (0, jsx_runtime_1.jsxs)("div", { className: bubbleConfirm_style_1.classes.info, children: [(0, jsx_runtime_1.jsx)("div", { className: bubbleConfirm_style_1.classes.title, children: title }), (0, jsx_runtime_1.jsx)("div", { className: bubbleConfirm_style_1.classes.content, children: props.content }), (0, jsx_runtime_1.jsx)("div", { className: bubbleConfirm_style_1.classes.footer, children: footer ??
+                                (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outlined", size: "small", onClick: () => setInnerOpen(false), children: "\u53D6\u6D88" }), (0, jsx_runtime_1.jsx)(button_1.Button, { size: "small", loading: innerLoading.current, onClick: confirmHandler, children: "\u786E\u5B9A" })] }) })] })] }) }));
+});

package/dist/cjs/components/bubbleConfirm/bubbleConfirm.style.d.ts

@@ -0,0 +1,11 @@
+export declare const classes: {
+    info: string;
+    title: string;
+    content: string;
+    footer: string;
+    icon: string;
+    bubble: string;
+} & {
+    root: string;
+};
+export declare const style: () => import("@emotion/react").SerializedStyles;