@quadrats/react 1.1.7 → 1.1.8

package/components/Icon/index.js

@@ -1,21 +0,0 @@
-import { __rest } from 'tslib';
-import React, { forwardRef } from 'react';
-
-const svgBaseProps = {
-    width: '1em',
-    height: '1em',
-    'aria-hidden': true,
-    focusable: false,
-};
-const Icon = forwardRef((_a, ref) => {
-    var { children, style, icon, size = 1 } = _a, props = __rest(_a, ["children", "style", "icon", "size"]);
-    if (!icon) {
-        throw new Error('The icon definition is needed.');
-    }
-    const { definition } = icon;
-    const svgProps = Object.assign(Object.assign(Object.assign(Object.assign({}, svgBaseProps), definition.svg), props), { style: Object.assign(Object.assign({}, style), { fontSize: `${size}em` }) });
-    return (React.createElement("svg", Object.assign({}, svgProps, { ref: ref }),
-        React.createElement("path", Object.assign({}, definition.path))));
-});
-
-export { Icon as default };

package/components/ImageUploader/index.d.ts

@@ -1,25 +0,0 @@
-import React, { Dispatch, SetStateAction } from 'react';
-import { FileUploaderGetBody, FileUploaderGetHeaders, FileUploaderGetUrl, FileUploaderImplement, ImageAccept } from '@quadrats/common/file-uploader';
-import { BaseFieldProps } from '../BaseField';
-export type ImageUploaderItem = {
-    file: File;
-    progress: number;
-    preview: string;
-    url: string;
-};
-export interface ImageUploaderProps extends Omit<BaseFieldProps, 'children'> {
-    getBody: FileUploaderGetBody;
-    getHeaders?: FileUploaderGetHeaders;
-    getUrl: FileUploaderGetUrl;
-    uploader?: FileUploaderImplement;
-    imageUploaderItem: ImageUploaderItem | null;
-    setImageUploaderItem: Dispatch<SetStateAction<ImageUploaderItem | null>>;
-    accept?: ImageAccept[];
-    ratio?: [number, number];
-    limitSize?: number;
-    disabled?: boolean;
-    onOverLimitSize?: VoidFunction;
-    onErrorAccept?: VoidFunction;
-}
-declare const ImageUploader: ({ label, className, getBody, getHeaders, getUrl, uploader, imageUploaderItem, setImageUploaderItem, width, accept, ratio, limitSize, disabled, required, errorMessage, onOverLimitSize, onErrorAccept, }: ImageUploaderProps) => React.JSX.Element;
-export default ImageUploader;

package/components/ImageUploader/index.js

@@ -1,174 +0,0 @@
-import { __awaiter } from 'tslib';
-import React, { useState, useCallback, useMemo } from 'react';
-import { readFileAsBase64, upload } from '@quadrats/react/utils';
-import { Trash, Image, Plus } from '@quadrats/icons';
-import clsx from 'clsx';
-import BaseField from '../BaseField/index.js';
-import Icon from '../Icon/index.js';
-import { Hints } from '../Hint/index.js';
-import Progress from '../Progress/index.js';
-
-// TODO: i18n
-const ImageUploader = ({ label, className, getBody, getHeaders, getUrl, uploader, imageUploaderItem, setImageUploaderItem, width = 140, accept = ['image/jpeg', 'image/jpg', 'image/png'], ratio, limitSize = 5, disabled = false, required, errorMessage, onOverLimitSize, onErrorAccept, }) => {
-    const [isDragging, setIsDragging] = useState(false);
-    const [isError, setIsError] = useState(false);
-    const onProgress = useCallback((p) => {
-        setImageUploaderItem((prev) => {
-            if (prev) {
-                return Object.assign(Object.assign({}, prev), { progress: p });
-            }
-            return prev;
-        });
-    }, [setImageUploaderItem]);
-    const onUpload = useCallback((file) => __awaiter(void 0, void 0, void 0, function* () {
-        if (file) {
-            if (file.size > limitSize * 1024 * 1024) {
-                setIsError(true);
-                onOverLimitSize === null || onOverLimitSize === void 0 ? void 0 : onOverLimitSize();
-            }
-            else {
-                const base64 = yield readFileAsBase64(file);
-                setImageUploaderItem(() => ({
-                    file,
-                    preview: base64,
-                    url: '',
-                    progress: 0,
-                }));
-                try {
-                    const url = yield upload({
-                        file,
-                        getBody,
-                        getHeaders,
-                        getUrl,
-                        uploader,
-                        onProgress,
-                    });
-                    setImageUploaderItem((prev) => {
-                        if (prev) {
-                            return Object.assign(Object.assign({}, prev), { preview: url, url });
-                        }
-                        return prev;
-                    });
-                }
-                catch (error) {
-                    setIsError(true);
-                    setImageUploaderItem(() => null);
-                }
-            }
-        }
-    }), [getBody, getHeaders, getUrl, limitSize, onOverLimitSize, onProgress, setImageUploaderItem, uploader]);
-    const onSelectFile = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-        if (!disabled && !imageUploaderItem) {
-            setIsError(false);
-            return new Promise((resolve) => {
-                const inputEl = document.createElement('input');
-                if (accept) {
-                    inputEl.accept = accept.join(',');
-                }
-                inputEl.multiple = false;
-                inputEl.type = 'file';
-                inputEl.addEventListener('cancel', () => {
-                    resolve(undefined);
-                });
-                inputEl.addEventListener('change', () => {
-                    const { files: fileList } = inputEl;
-                    if (!fileList || !fileList.length) {
-                        resolve(undefined);
-                    }
-                    else {
-                        resolve(fileList[0]);
-                    }
-                });
-                inputEl.click();
-            });
-        }
-    }), [accept, disabled, imageUploaderItem]);
-    const handleDrop = useCallback((event) => __awaiter(void 0, void 0, void 0, function* () {
-        var _a, _b;
-        if (((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) === null || _b === void 0 ? void 0 : _b.includes('Files')) && !disabled && !imageUploaderItem) {
-            event.preventDefault();
-            setIsDragging(false);
-            setIsError(false);
-            const files = Array.from(event.dataTransfer.files);
-            const targetFile = files[0];
-            if (targetFile.size > limitSize * 1024 * 1024) {
-                setIsError(true);
-                onOverLimitSize === null || onOverLimitSize === void 0 ? void 0 : onOverLimitSize();
-                return;
-            }
-            if (!accept.find((a) => a === targetFile.type)) {
-                setIsError(true);
-                onErrorAccept === null || onErrorAccept === void 0 ? void 0 : onErrorAccept();
-                return;
-            }
-            yield onUpload(targetFile);
-        }
-    }), [accept, disabled, imageUploaderItem, limitSize, onErrorAccept, onOverLimitSize, onUpload]);
-    const acceptText = useMemo(() => {
-        if (accept.find((a) => a === 'image/jpeg' || a === 'image/jpg') && accept.find((a) => a === 'image/png')) {
-            return 'JPG 或 PNG';
-        }
-        else if (accept.find((a) => a === 'image/png')) {
-            return 'PNG';
-        }
-        else if (accept.find((a) => a === 'image/jpeg' || a === 'image/jpg')) {
-            return 'JPG';
-        }
-        return '';
-    }, [accept]);
-    return (React.createElement(BaseField, { className: className, label: label, required: required, width: width, errorMessage: errorMessage },
-        React.createElement("div", { className: "qdr-image-uploader__wrapper" },
-            imageUploaderItem ? (React.createElement("div", { className: "qdr-image-uploader qdr-image-uploader__previewer", style: { width, aspectRatio: ratio ? `${ratio[0]} / ${ratio[1]}` : '1 / 1' } },
-                React.createElement("div", { className: "qdr-image-uploader__image-wrapper" },
-                    imageUploaderItem.progress !== 100 && React.createElement(Progress, { percentage: imageUploaderItem.progress }),
-                    React.createElement("div", { contentEditable: false, className: clsx('qdr-inline-toolbar', 'qdr-image-uploader__inline-toolbar') },
-                        React.createElement(Icon, { className: clsx('qdr-inline-toolbar__icon', {
-                                'qdr-inline-toolbar__icon--disabled': disabled,
-                            }), icon: Trash, width: 24, height: 24, onClick: () => {
-                                if (!disabled) {
-                                    setImageUploaderItem(() => null);
-                                }
-                            } })),
-                    React.createElement("img", { src: imageUploaderItem.url || imageUploaderItem.preview, className: "qdr-image-uploader__image", style: {
-                            objectFit: ratio ? 'cover' : 'contain',
-                            aspectRatio: ratio ? `${ratio[0]} / ${ratio[1]}` : '1 / 1',
-                        } })))) : (React.createElement("div", { className: clsx('qdr-image-uploader', {
-                    'qdr-image-uploader--dragging': isDragging,
-                    'qdr-image-uploader--error': isError,
-                    'qdr-image-uploader--disabled': disabled,
-                }), style: isDragging ? undefined : { width, aspectRatio: ratio ? `${ratio[0]} / ${ratio[1]}` : '1 / 1' }, onClick: () => __awaiter(void 0, void 0, void 0, function* () {
-                    const file = yield onSelectFile();
-                    yield onUpload(file);
-                }), onDragOver: (e) => {
-                    var _a, _b;
-                    e.preventDefault();
-                    if ((_b = (_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) === null || _b === void 0 ? void 0 : _b.includes('Files')) {
-                        setIsDragging(true);
-                        setIsError(false);
-                    }
-                }, onDragLeave: () => {
-                    setIsDragging(false);
-                    setIsError(false);
-                }, onDrop: handleDrop }, isError ? (React.createElement(React.Fragment, null,
-                React.createElement(Icon, { icon: Image, width: 24, height: 24, className: "qdr-image-uploader__icon" }),
-                React.createElement("span", { className: "qdr-image-uploader__main-text" }, "\u4E0A\u50B3\u932F\u8AA4"))) : (React.createElement(React.Fragment, null,
-                React.createElement(Icon, { icon: Plus, width: 24, height: 24, className: "qdr-image-uploader__icon" }),
-                isDragging ? (React.createElement("div", { className: "qdr-image-uploader__dragging-wrapper" },
-                    React.createElement("span", { className: "qdr-image-uploader__main-text" }, "\u9EDE\u64CA\u6216\u62D6\u66F3\u6A94\u6848\u5230\u6B64\u4E0A\u50B3"),
-                    React.createElement("span", { className: "qdr-image-uploader__info-text" }, ratio
-                        ? `僅能上傳 ${acceptText}；建議比例為 ${ratio[0]}:${ratio[1]} 且寬度至少達 2000px 以上；檔案大小不可超過 ${limitSize}MB`
-                        : `僅能上傳 ${acceptText}；檔案大小不可超過 ${limitSize}MB`))) : (React.createElement("span", { className: "qdr-image-uploader__main-text" }, "\u4E0A\u50B3")))))),
-            React.createElement(Hints, { style: { width }, hints: [
-                    {
-                        text: `檔案格式：限 ${acceptText}。`,
-                    },
-                    ratio && {
-                        text: `檔案尺寸：最佳比例為 ${ratio[0]}:${ratio[1]}。建議圖片寬度達 2000px 以上，高度不限。`,
-                    },
-                    {
-                        text: `檔案大小：不可大於 ${limitSize} MB。`,
-                    },
-                ].filter((h) => !!h) }))));
-};
-
-export { ImageUploader as default };

package/components/Input/index.d.ts

@@ -1,14 +0,0 @@
-import React, { Ref } from 'react';
-import { BaseFieldProps } from '../BaseField';
-export interface InputProps extends Omit<BaseFieldProps, 'children'> {
-    value?: string;
-    onChange?: (value: string) => void;
-    inputRef?: Ref<HTMLInputElement>;
-    placeholder?: string;
-    disabled?: boolean;
-    isError?: boolean;
-    hint?: string;
-    maxLength?: number;
-}
-declare const Input: ({ label, className, width, value, onChange, inputRef, placeholder, disabled, isError, hint, maxLength, errorMessage, required, }: InputProps) => React.JSX.Element;
-export default Input;

package/components/Input/index.js

@@ -1,24 +0,0 @@
-import React, { useMemo } from 'react';
-import clsx from 'clsx';
-import BaseField from '../BaseField/index.js';
-
-const Input = ({ label, className, width, value = '', onChange, inputRef, placeholder, disabled, isError, hint, maxLength, errorMessage, required = false, }) => {
-    const isLimited = useMemo(() => maxLength && value && value.length >= maxLength, [maxLength, value]);
-    return (React.createElement(BaseField, { className: className, label: label, required: required, width: width, errorMessage: errorMessage },
-        React.createElement("div", { className: "qdr-input" },
-            React.createElement("input", { ref: inputRef, className: clsx('qdr-input__input', {
-                    'qdr-input__input--error': isError,
-                }), value: value, onChange: (e) => {
-                    onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value);
-                }, type: "text", maxLength: maxLength, placeholder: placeholder, disabled: disabled }),
-            hint && (React.createElement("div", { className: "qdr-input__hint-wrapper" },
-                React.createElement("span", { className: "qdr-input__hint" }, hint))),
-            maxLength && (React.createElement("span", { className: clsx('qdr-input__counter', {
-                    'qdr-input__counter--have-hint': hint,
-                    'qdr-input__counter--limited': isLimited,
-                    'qdr-input__counter--error': isError,
-                    'qdr-input__counter--disabled': disabled,
-                }) }, `${value ? value.length : 0}/${maxLength}`)))));
-};
-
-export { Input as default };

package/components/Message/index.d.ts

@@ -1,18 +0,0 @@
-import { FC, Key } from 'react';
-import { ThemeProps } from '@quadrats/react/configs';
-import { Notifier, NotifierData, NotifierConfig } from '../Notifier/typings';
-import { SlideFadeProps } from '../Transition/SlideFade';
-import { IconDefinition } from '@quadrats/icons';
-export interface MessageConfigProps extends Pick<NotifierConfig, 'duration'>, Pick<SlideFadeProps, 'onEnter' | 'onEntering' | 'onEntered' | 'onExit' | 'onExiting' | 'onExited' | 'easing' | 'direction'> {
-}
-export type MessageSeverity = 'success' | 'warning' | 'error' | 'info';
-export interface MessageData extends Omit<NotifierData, 'onClose'>, MessageConfigProps {
-    duration?: NotifierData['duration'];
-    icon?: IconDefinition;
-    reference?: Key;
-    severity?: MessageSeverity;
-    theme: ThemeProps;
-}
-export type MessageType = FC<MessageData> & Notifier<MessageData, MessageConfigProps> & Record<string, (message: MessageData['children'], theme: ThemeProps, props?: Omit<MessageData, 'children' | 'theme' | 'severity' | 'icon'>) => Key>;
-declare const Message: MessageType;
-export default Message;

package/components/Message/index.js

@@ -1,72 +0,0 @@
-import { __rest } from 'tslib';
-import React, { useState, useEffect } from 'react';
-import clsx from 'clsx';
-import Icon from '../Icon/index.js';
-import { createNotifier } from '../Notifier/createNotifier.js';
-import SlideFade from '../Transition/SlideFade.js';
-import { Success, Warning, Error, Info } from '@quadrats/icons';
-
-const Message = ((props) => {
-    const { children, theme, duration, icon, reference, severity, onExited: onExitedProp } = props, restTransitionProps = __rest(props, ["children", "theme", "duration", "icon", "reference", "severity", "onExited"]);
-    const [open, setOpen] = useState(true);
-    useEffect(() => {
-        if (open && duration) {
-            const timer = window.setTimeout(() => {
-                setOpen(false);
-            }, duration);
-            return () => {
-                window.clearTimeout(timer);
-            };
-        }
-    }, [open, duration]);
-    const onExited = (node) => {
-        if (onExitedProp) {
-            onExitedProp(node);
-        }
-        if (reference)
-            Message.remove(reference);
-    };
-    return (React.createElement(SlideFade, Object.assign({ in: open, appear: true, onExited: onExited }, restTransitionProps),
-        React.createElement("div", { className: clsx('qdr-message', {
-                [`qdr-message--${severity}`]: !!severity,
-            }, theme.className), style: theme.style },
-            icon ? React.createElement(Icon, { className: "qdr-message__icon", icon: icon, width: 24, height: 24 }) : null,
-            React.createElement("span", { className: "qdr-message__content" }, children))));
-});
-const { add, config, destroy, remove } = createNotifier({
-    duration: 3000,
-    render: (message) => React.createElement(Message, Object.assign({}, message, { key: undefined })),
-    setRoot: (root) => {
-        root === null || root === void 0 ? void 0 : root.setAttribute('class', 'qdr-message__root');
-    },
-});
-Message.add = add;
-Message.config = config;
-Message.destroy = destroy;
-Message.remove = remove;
-const severities = [
-    {
-        key: 'success',
-        icon: Success,
-    },
-    {
-        key: 'warning',
-        icon: Warning,
-    },
-    {
-        key: 'error',
-        icon: Error,
-    },
-    {
-        key: 'info',
-        icon: Info,
-    },
-];
-const validSeverities = ['success', 'warning', 'error', 'info'];
-severities.forEach((severity) => {
-    Message[severity.key] = (message, theme, props) => Message.add(Object.assign(Object.assign({}, props), { children: message, theme, severity: validSeverities.includes(severity.key)
-            ? severity.key
-            : undefined, icon: severity.icon }));
-});
-
-export { Message as default };

package/components/Modal/index.d.ts

@@ -1,28 +0,0 @@
-import React, { ReactNode } from 'react';
-export interface ModalProps {
-    title?: string | ReactNode;
-    className?: string;
-    closable?: boolean;
-    children: ReactNode;
-    mainAreaClassName?: string;
-    sideAreaClassName?: string;
-    mask?: boolean;
-    maskClosable?: boolean;
-    escToExit?: boolean;
-    haveFooter?: boolean;
-    sideChildren?: ReactNode;
-    size?: 'small' | 'medium' | 'large' | 'extraLarge';
-    isOpen: boolean;
-    haveCloseButton?: boolean;
-    haveConfirmButton?: boolean;
-    disabledCloseButton?: boolean;
-    disabledConfirmButton?: boolean;
-    dangerConfirmButton?: boolean;
-    closeText?: string;
-    confirmText?: string;
-    onClose: () => void;
-    onConfirm?: () => void;
-    customizedFooterElement?: ReactNode;
-}
-declare const Modal: ({ title, className, closable, children, mainAreaClassName, sideAreaClassName, mask, maskClosable, escToExit, haveFooter, sideChildren, size, isOpen, haveCloseButton, haveConfirmButton, disabledCloseButton, disabledConfirmButton, dangerConfirmButton, closeText, confirmText, onClose, onConfirm, customizedFooterElement, }: ModalProps) => React.JSX.Element;
-export default Modal;

package/components/Modal/index.js

@@ -1,61 +0,0 @@
-import React, { useRef, useContext, useEffect, useMemo } from 'react';
-import clsx from 'clsx';
-import { CSSTransition } from 'react-transition-group';
-import { useLocale, ThemeContext } from '@quadrats/react/configs';
-import { Cancel } from '@quadrats/icons';
-import Portal from '../Portal/index.js';
-import Button from '../Button/index.js';
-import Icon from '../Icon/index.js';
-
-const Modal = ({ title, className, closable = false, children, mainAreaClassName, sideAreaClassName, mask = true, maskClosable = true, escToExit = true, haveFooter = true, sideChildren, size = 'medium', isOpen, haveCloseButton = true, haveConfirmButton = true, disabledCloseButton = false, disabledConfirmButton = false, dangerConfirmButton = false, closeText, confirmText, onClose, onConfirm, customizedFooterElement = React.createElement("div", null), }) => {
-    const locale = useLocale();
-    const nodeRef = useRef(null);
-    const { props: themeProps } = useContext(ThemeContext);
-    useEffect(() => {
-        const handleKeyDown = (e) => {
-            if (e.key === 'Escape' && escToExit) {
-                onClose();
-            }
-        };
-        window.addEventListener('keydown', handleKeyDown);
-        return () => window.removeEventListener('keydown', handleKeyDown);
-    }, [onClose, escToExit]);
-    const renderFooter = useMemo(() => (React.createElement("div", { className: "qdr-modal__footer" },
-        customizedFooterElement,
-        React.createElement("div", { className: "qdr-modal__footer__actions" },
-            haveCloseButton && (React.createElement(Button, { variant: "secondary", disabled: disabledCloseButton, onClick: onClose }, closeText || locale.editor.cancel)),
-            haveConfirmButton && (React.createElement(Button, { variant: "primary", danger: dangerConfirmButton, disabled: disabledConfirmButton, onClick: onConfirm }, confirmText || locale.editor.confirm))))), [
-        customizedFooterElement,
-        haveCloseButton,
-        disabledCloseButton,
-        dangerConfirmButton,
-        onClose,
-        closeText,
-        locale.editor.cancel,
-        locale.editor.confirm,
-        haveConfirmButton,
-        disabledConfirmButton,
-        onConfirm,
-        confirmText,
-    ]);
-    return (React.createElement(Portal, null,
-        React.createElement("div", { className: clsx('qdr-modal', {
-                'qdr-modal--opened': isOpen,
-                'qdr-modal--mask': mask,
-            }, themeProps.className, className), style: themeProps.style, onClick: maskClosable ? onClose : undefined },
-            React.createElement(CSSTransition, { in: isOpen, nodeRef: nodeRef, timeout: 250, classNames: "qdr-modal__transition", unmountOnExit: true },
-                React.createElement("div", { ref: nodeRef, className: clsx('qdr-modal__container', `qdr-modal__container--${size}`), onClick: (e) => e.stopPropagation() },
-                    title && (React.createElement("div", { className: "qdr-modal__header" },
-                        title,
-                        closable && (React.createElement(Icon, { className: "qdr-modal__header__cancel", icon: Cancel, width: 24, height: 24, onClick: onClose })))),
-                    React.createElement("div", { className: clsx('qdr-modal__body', {
-                            'qdr-modal__body--have-footer-height': haveFooter && !sideChildren,
-                        }) },
-                        sideChildren && (React.createElement("div", { className: "qdr-modal__side-body" },
-                            React.createElement("div", { className: clsx('qdr-modal__side', sideAreaClassName) }, sideChildren),
-                            haveFooter && renderFooter)),
-                        React.createElement("div", { className: clsx('qdr-modal__main', mainAreaClassName) }, children)),
-                    haveFooter && !sideChildren && renderFooter)))));
-};
-
-export { Modal as default };

package/components/Notifier/NotifierManager.d.ts

@@ -1,17 +0,0 @@
-import React, { Key, RefObject } from 'react';
-import { NotifierData, NotifierConfig, RenderNotifier } from './typings';
-export interface NotifierController<N extends NotifierData> {
-    add: (notifier: N & {
-        key: Key;
-    }) => void;
-    remove: (key: Key) => void;
-}
-export interface NotifierManagerProps<N extends NotifierData> extends Pick<NotifierConfig, 'maxCount'> {
-    controllerRef: RefObject<NotifierController<N> | null>;
-    defaultNotifiers?: (N & {
-        key: Key;
-    })[];
-    render: RenderNotifier<N>;
-}
-declare function NotifierManager<N extends NotifierData>(props: NotifierManagerProps<N>): React.JSX.Element;
-export default NotifierManager;

package/components/Notifier/NotifierManager.js

@@ -1,24 +0,0 @@
-import React, { useState, useMemo, useImperativeHandle, Fragment } from 'react';
-
-function NotifierManager(props) {
-    const { controllerRef, defaultNotifiers = [], maxCount, render } = props;
-    const [notifiers, setNotifiers] = useState(defaultNotifiers);
-    const notifiersShouldRendered = typeof maxCount === 'number' && notifiers.length > maxCount ? notifiers.slice(0, maxCount) : notifiers;
-    const controller = useMemo(() => ({
-        add(notifier) {
-            setNotifiers((prev) => {
-                const notifierIndex = prev.findIndex(({ key }) => key === notifier.key);
-                return ~notifierIndex
-                    ? [...prev.slice(0, notifierIndex), notifier, ...prev.slice(notifierIndex + 1, prev.length)]
-                    : [...prev, notifier];
-            });
-        },
-        remove(key) {
-            setNotifiers((prev) => prev.filter((m) => m.key !== key));
-        },
-    }), []);
-    useImperativeHandle(controllerRef, () => controller, [controller]);
-    return (React.createElement(React.Fragment, null, notifiersShouldRendered.map((notifier) => (React.createElement(Fragment, { key: notifier.key }, render(notifier))))));
-}
-
-export { NotifierManager as default };

package/components/Notifier/createNotifier.d.ts

@@ -1,21 +0,0 @@
-import { Notifier, NotifierConfig, NotifierData, RenderNotifier } from './typings';
-export interface CreateNotifierProps<N extends NotifierData, C extends NotifierConfig> extends NotifierConfig {
-    /**
-     * Customizable config for notifier. The given values should be retrivable from your notification carrier.
-     */
-    config?: C;
-    /**
-     * The render props for notification carrier(UI component).
-     */
-    render: RenderNotifier<N>;
-    /**
-     * The method to set attributes or listeners to root.
-     */
-    setRoot?: (root: HTMLDivElement) => void;
-}
-/**
- * The utility factory for `mezzanine` to create a notifier.
- *
- * When APIs are called, Notifier will dynamically render a new react instance by `ReactDOM.render` method.
- */
-export declare function createNotifier<N extends NotifierData, C extends NotifierConfig = NotifierConfig>(props: CreateNotifierProps<N, C>): Notifier<N, C>;

package/components/Notifier/createNotifier.js

@@ -1,60 +0,0 @@
-import { __rest } from 'tslib';
-import React, { createRef } from 'react';
-import { createRoot } from 'react-dom/client';
-import NotifierManager from './NotifierManager.js';
-
-/**
- * The utility factory for `mezzanine` to create a notifier.
- *
- * When APIs are called, Notifier will dynamically render a new react instance by `ReactDOM.render` method.
- */
-function createNotifier(props) {
-    const { config: configProp, render: renderNotifier, setRoot, duration, maxCount } = props, restNotifierProps = __rest(props, ["config", "render", "setRoot", "duration", "maxCount"]);
-    const container = typeof document === 'undefined' ? null : document.createElement('div');
-    const root = container ? createRoot(container) : null;
-    const controllerRef = createRef();
-    let currentConfig = Object.assign({ duration,
-        maxCount }, configProp);
-    if (setRoot && container) {
-        setRoot(container);
-    }
-    return {
-        add(notifier) {
-            var _a, _b;
-            if (container === null)
-                return 'NOT_SET';
-            document.body.appendChild(container);
-            const key = (_a = notifier.key) !== null && _a !== void 0 ? _a : Date.now();
-            const resolvedNotifier = Object.assign(Object.assign(Object.assign(Object.assign({}, restNotifierProps), notifier), currentConfig), { duration: (_b = notifier.duration) !== null && _b !== void 0 ? _b : currentConfig.duration, key, instanceKey: key });
-            if (controllerRef.current) {
-                controllerRef.current.add(resolvedNotifier);
-            }
-            else {
-                root === null || root === void 0 ? void 0 : root.render(React.createElement(NotifierManager, { controllerRef: controllerRef, defaultNotifiers: [resolvedNotifier], maxCount: currentConfig.maxCount, render: renderNotifier }));
-            }
-            return resolvedNotifier.key;
-        },
-        remove(key) {
-            if (controllerRef.current) {
-                controllerRef.current.remove(key);
-            }
-        },
-        destroy() {
-            if (container === null)
-                return;
-            // when useEffect(() => () => { root.unmount() }, []), will be show "Rendered more hooks than during the previous render." issue.
-            root === null || root === void 0 ? void 0 : root.render(null);
-            if (container.parentNode) {
-                container.parentNode.removeChild(container);
-            }
-        },
-        config(config) {
-            currentConfig = Object.assign(Object.assign({}, currentConfig), config);
-        },
-        getConfig() {
-            return currentConfig;
-        },
-    };
-}
-
-export { createNotifier };

package/components/Notifier/typings.d.ts

@@ -1,28 +0,0 @@
-import { Key, ReactNode } from 'react';
-export interface NotifierConfig {
-    /**
-     * If passed as number, the notification will be closed after the amount of time.
-     */
-    duration?: number | false;
-    maxCount?: number;
-}
-export interface NotifierData extends Pick<NotifierConfig, 'duration'> {
-    /**
-     * The notification content.
-     */
-    children?: ReactNode;
-    /**
-     * Close Handler
-     */
-    onClose?: (key: Key) => void;
-}
-export type RenderNotifier<N extends NotifierData> = (notifier: N) => ReactNode;
-export interface Notifier<N extends NotifierData, C extends NotifierConfig = NotifierConfig> {
-    add: (notifier: N & {
-        key?: Key;
-    }) => Key;
-    config: (configs: C) => void;
-    destroy: VoidFunction;
-    remove: (key: Key) => void;
-    getConfig: () => C;
-}

package/components/Portal/index.d.ts

@@ -1,7 +0,0 @@
-import { FC } from 'react';
-export interface PortalProps {
-    getContainer?: () => HTMLElement;
-    children?: React.ReactNode;
-}
-declare const Portal: FC<PortalProps>;
-export default Portal;

package/components/Portal/index.js

@@ -1,8 +0,0 @@
-import ReactDOM from 'react-dom';
-
-const Portal = ({ getContainer, children }) => {
-    const container = getContainer ? getContainer() : document.body;
-    return ReactDOM.createPortal(children, container);
-};
-
-export { Portal as default };

package/components/Progress/index.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-export interface ProgressProps {
-    className?: string;
-    percentage?: number;
-}
-declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;
-export default Progress;

package/components/Progress/index.js

@@ -1,20 +0,0 @@
-import React, { forwardRef } from 'react';
-import clsx from 'clsx';
-
-const Progress = forwardRef(function Progress(props, ref) {
-    const { className, percentage = 0 } = props;
-    const size = 16;
-    const strokeWidth = 2;
-    const radius = (size - strokeWidth) / 2;
-    const circumference = 2 * Math.PI * radius;
-    const offset = circumference * (1 - percentage / 100);
-    return (React.createElement("div", { ref: ref, className: clsx('qdr-progress', className) },
-        React.createElement("div", { className: "qdr-progress__wrapper" },
-            React.createElement("div", { className: "qdr-progress__spinner-wrapper" },
-                React.createElement("svg", { width: size, height: size },
-                    React.createElement("circle", { className: "qdr-progress__backdrop", cx: size / 2, cy: size / 2, r: radius, strokeWidth: strokeWidth, fill: "none" }),
-                    React.createElement("circle", { className: "qdr-progress__track", cx: size / 2, cy: size / 2, r: radius, strokeWidth: strokeWidth, fill: "none", strokeDasharray: circumference, strokeDashoffset: offset }))),
-            React.createElement("p", { className: "qdr-progress__percentage" }, `${percentage}%`))));
-});
-
-export { Progress as default };