@cube-dev/ui-kit 0.76.2 → 0.77.0

package/es/components/organisms/Modal/Modal.js

@@ -1,248 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.76.2
- * Released under the MIT license.
- */
-
-import { createElement as _createElement } from "react";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { createRoot } from 'react-dom/client';
-import { CSSTransition } from 'react-transition-group';
-import { CloseIcon } from '../../../icons';
-import { tasty } from '../../../tasty';
-import { Button } from '../../actions';
-import { Action } from '../../actions/Action/Action';
-import { Block } from '../../Block';
-import { Card } from '../../content/Card/Card';
-import { Title } from '../../content/Title';
-import { Flex } from '../../layout/Flex';
-import { Flow } from '../../layout/Flow';
-import { Space } from '../../layout/Space';
-const Overlay = tasty({
-    as: 'div',
-    styles: {
-        position: 'fixed',
-        top: 0,
-        right: 0,
-        bottom: 0,
-        left: 0,
-        '$enter-transition-time': '250ms',
-        '$leave-transition-time': '160ms',
-        fill: '#black.40',
-        place: 'center',
-        zIndex: 1000,
-        display: 'none',
-        whiteSpace: 'normal',
-        '& > .cube-modal': {
-            '$base-translate': 'calc((50vh - 50%) / -3)',
-            transform: 'translate(0, calc(var(--base-translate)))',
-        },
-        '&.cube-modal-transition-enter': {
-            opacity: 0,
-            display: 'flex',
-        },
-        '&.cube-modal-transition-enter > .cube-modal': {
-            transform: 'translate(0, calc(-32px + var(--base-translate))) scale(0.5)',
-        },
-        '&.cube-modal-transition-enter-active': {
-            opacity: 1,
-            transition: 'all var(--enter-transition-time) cubic-bezier(0, 0.5, 0, 1)',
-        },
-        '&.cube-modal-transition-enter-active > .cube-modal': {
-            transform: 'translate(0, calc(var(--base-translate))) scale(1)',
-            transition: 'all var(--enter-transition-time) cubic-bezier(0.5, 0.5, 0, 1)',
-        },
-        '&.cube-modal-transition-enter-done': {
-            display: 'flex',
-        },
-        '&.cube-modal-transition-exit': {
-            opacity: 1,
-            display: 'flex',
-        },
-        '&.cube-modal-transition-exit > .cube-modal': {
-            transform: 'translate(0, calc(var(--base-translate))) scale(1)',
-        },
-        '&.cube-modal-transition-exit-active': {
-            opacity: 0,
-            transition: 'all var(--leave-transition-time) ease-in',
-        },
-        '&.cube-modal-transition-exit-active > .cube-modal': {
-            transform: 'translate(0, calc(-32px + var(--base-translate))) scale(0.5)',
-            transition: 'all var(--leave-transition-time) ease-in',
-        },
-        '&.cube-modal-transition-exit-done': {
-            display: 'none',
-        },
-    },
-});
-/**
- * @deprecated Prefer using Dialog instead
- *
- * DEPRECATED Modal component
- * Designed after AntD Modal component and almost duplicate its API.
- * Use Dialog component instead
- */
-export function Modal(allProps) {
-    let { title, isVisible, type, okType, isClosable, isLoading, children, okText, cancelText, width, onOk, onCancel, onClose, qa, isDisabled, ...props } = allProps;
-    isClosable = !!isClosable;
-    const nodeRef = useRef(null);
-    const [inProp, setInProp] = useState(false);
-    const [localLoading, setLocalLoading] = useState(false);
-    useEffect(() => {
-        setInProp(isVisible || false);
-    }, [isVisible]);
-    function cancel() {
-        if (onCancel) {
-            onCancel();
-        }
-        else if (onClose) {
-            onClose();
-        }
-    }
-    function close() {
-        if (!isVisible)
-            return;
-        if (onClose || onCancel) {
-            if (isClosable) {
-                // @ts-ignore
-                (onClose || onCancel)();
-            }
-            else if (onCancel) {
-                onCancel();
-            }
-        }
-    }
-    const onOverlayClick = (evt) => {
-        if (!evt || !evt.target)
-            return;
-        if (evt.target.classList.contains('cube-modal-overlay') && !isLoading) {
-            close();
-        }
-    };
-    useEffect(() => {
-        function handleKeyDown(evt) {
-            if (evt.key === 'Escape' && !isLoading) {
-                close();
-            }
-        }
-        window.addEventListener('keydown', handleKeyDown);
-        return () => {
-            window.removeEventListener('keydown', handleKeyDown);
-        };
-    }, []);
-    const handleOk = useCallback((arg) => {
-        setLocalLoading(true);
-        (async () => {
-            if (onOk) {
-                try {
-                    if ((await onOk(arg)) === false && (onClose || onCancel)) {
-                        // @ts-ignore
-                        (onClose || onCancel)();
-                    }
-                }
-                catch (e) {
-                    // do nothing
-                }
-                finally {
-                    setLocalLoading(false);
-                }
-            }
-        })();
-    }, [onOk]);
-    return (_jsx(CSSTransition, { nodeRef: nodeRef, in: inProp, timeout: 250, classNames: "cube-modal-transition", children: _jsx(Overlay, { ref: nodeRef, className: "cube-modal-overlay", onClick: onOverlayClick, children: _jsxs(Card, { "data-qa": qa || 'Modal', className: "cube-modal", display: "flex", role: "region", color: "#dark.85", padding: "0", shadow: true, border: false, radius: "1x", width: `@min-dialog-size (100% - 32px) ${typeof width === 'number' ? `${width}px` : width || '360px'}`, style: { textAlign: 'left' }, ...props, children: [_jsxs(Flex, { placeContent: "space-between", padding: "2x 3x", border: "bottom", children: [typeof title === 'object' ? (title) : (_jsx(Title, { ellipsis: true, level: 4, flexGrow: 1, children: title })), isClosable ? (_jsx(Action, { qa: "ModalCloseButton", width: "3x", height: "3x", color: { '': '#dark-02', hovered: '#purple' }, outline: {
-                                    '': '#purple-03.0',
-                                    'focused & focus-visible': '#purple-03',
-                                }, label: "Close", onPress: onClose || onCancel, children: _jsx(CloseIcon, { size: 16 }) })) : null] }), _jsxs(Flow, { padding: "3x", gap: "3x", height: "max (100vh - 90px)", style: { overflow: 'auto' }, children: [typeof children === 'string' ? (_jsx(Block, { children: children })) : (children), type !== 'info' && (onOk || onCancel) ? (_jsxs(Space, { gap: "1.5x", children: [_jsx(Button, { "data-qa": 'ConfirmButton', isDisabled: isDisabled, type: "primary", theme: okType === 'danger' ? 'danger' : undefined, isLoading: isLoading || localLoading, onPress: handleOk, children: okText || 'OK' }), _jsx(Button, { "data-qa": 'CancelButton', isDisabled: isLoading, onPress: cancel, children: cancelText || (okText === 'Yes' ? 'No' : 'Cancel') })] })) : null, type === 'info' ? (_jsx(Space, { children: _jsx(Button, { "data-qa": 'OkButton', isDisabled: isDisabled, type: okType === 'danger' ? 'danger' : 'primary', onPress: close, children: okText || 'OK' }) })) : null] })] }) }) }));
-}
-let ID = 0;
-const modal = {
-    root: null,
-    items: [],
-    init() {
-        if (this.root)
-            return;
-        this.root = document.createElement('div');
-        // @ts-ignore
-        this.root.classList.add('cube-modal-container');
-        document.body.appendChild(this.root);
-        this._render([]);
-    },
-    render() {
-        this.init();
-        this._render();
-    },
-    _render(items) {
-        if (!items) {
-            items = this.items;
-        }
-        if (!this.root)
-            return;
-        const root = createRoot(this.root);
-        root.render(items.map((item) => {
-            const { id, onOk, onCancel, onClose, content, ...options } = item;
-            const wrapOnOk = async (arg) => {
-                onOk && (await onOk(arg));
-                this.resolve(item, arg);
-            };
-            const wrapOnCancel = () => {
-                onCancel && onCancel();
-                if (item.type === 'info') {
-                    this.resolve(item);
-                }
-                else {
-                    this.reject(item);
-                }
-            };
-            const wrapOnClose = () => {
-                onClose && onClose();
-                if (item.type === 'info') {
-                    this.resolve(item);
-                }
-                else {
-                    this.reject(item);
-                }
-            };
-            return (_createElement(Modal, { ...options, key: id, onOk: wrapOnOk, onCancel: wrapOnCancel, onClose: wrapOnClose }, content));
-        }));
-    },
-    open(item) {
-        item.isVisible = false;
-        item.id = ++ID;
-        this.items.push(item);
-        this.render();
-        setTimeout(() => {
-            item.isVisible = true;
-            this.render();
-        });
-        return new Promise((resolve, reject) => {
-            item.resolve = resolve;
-            item.reject = reject;
-        });
-    },
-    close(item) {
-        item.isVisible = false;
-        this.render();
-        setTimeout(() => {
-            this.items = this.items.filter((modal) => item.id !== modal.id);
-            this.render();
-        }, 1000);
-    },
-    resolve(item, arg) {
-        item.resolve(arg);
-        this.close(item);
-    },
-    reject(item, arg) {
-        item.reject(arg);
-        this.close(item);
-    },
-};
-Modal.confirm = (options) => {
-    return modal.open({ type: 'confirm', ...options });
-};
-Modal.info = (options) => {
-    return modal.open({ type: 'info', ...options });
-};
-
-        

package/types/components/organisms/Modal/Modal.d.ts

@@ -1,27 +0,0 @@
-import { CubeCardProps } from '../../content/Card/Card';
-export interface CubeModalProps extends CubeCardProps {
-    title?: string;
-    isVisible?: boolean;
-    type?: 'default' | 'primary' | 'info' | 'danger';
-    isClosable?: boolean;
-    isLoading?: boolean;
-    okType?: 'default' | 'primary' | 'danger';
-    okText?: string;
-    cancelText?: string;
-    onOk?: (any: any) => Promise<any> | void | false;
-    onCancel?: () => Promise<any> | void;
-    onClose?: () => Promise<any> | void;
-    isDisabled?: boolean;
-}
-/**
- * @deprecated Prefer using Dialog instead
- *
- * DEPRECATED Modal component
- * Designed after AntD Modal component and almost duplicate its API.
- * Use Dialog component instead
- */
-export declare function Modal(allProps: CubeModalProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace Modal {
-    var confirm: (options: any) => void;
-    var info: (options: any) => void;
-}