@quadrats/react 0.7.8 → 1.1.0

package/components/Button/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import clsx from 'clsx';
+
+const Button = ({ onClick, className, type = 'button', variant = 'primary', size = 'small', prefix, danger = false, disabled, children, }) => {
+    return (React.createElement("button", { className: clsx('qdr-button', `qdr-button--${variant}`, `qdr-button--${size}`, {
+            'qdr-button--danger': danger,
+        }, className), type: type, disabled: disabled, onClick: onClick },
+        prefix,
+        children));
+};
+
+export { Button as default };

package/components/Hint/index.d.ts

@@ -0,0 +1,15 @@
+import React, { CSSProperties } from 'react';
+export interface HintProps {
+    children: string;
+    variant?: 'info' | 'success' | 'warning' | 'error';
+}
+declare const Hint: ({ children, variant }: HintProps) => React.JSX.Element;
+export interface HintsProps {
+    hints: {
+        text: string;
+        variant?: 'info' | 'success' | 'warning' | 'error';
+    }[];
+    style?: CSSProperties;
+}
+export declare const Hints: ({ hints, style }: HintsProps) => React.JSX.Element;
+export default Hint;

package/components/Hint/index.js

@@ -0,0 +1,30 @@
+import React, { useMemo } from 'react';
+import clsx from 'clsx';
+import { Info, Error, Warning, Success } from '@quadrats/icons';
+import Icon from '../Icon/index.js';
+
+const Hint = ({ children, variant = 'info' }) => {
+    const icon = useMemo(() => {
+        switch (variant) {
+            case 'info':
+                return Info;
+            case 'success':
+                return Success;
+            case 'warning':
+                return Warning;
+            case 'error':
+                return Error;
+            default:
+                return Info;
+        }
+    }, [variant]);
+    return (React.createElement("div", { className: "qdr-hint" },
+        React.createElement("div", { className: clsx('qdr-hint__icon', `qdr-hint__icon--${variant}`) },
+            React.createElement(Icon, { icon: icon, width: 16, height: 16 })),
+        React.createElement("div", { className: clsx('qdr-hint__children', `qdr-hint__children--${variant}`) }, children)));
+};
+const Hints = ({ hints, style }) => {
+    return (React.createElement("div", { className: "qdr-hints", style: style }, hints.map((hint, index) => (React.createElement(Hint, { key: index, variant: hint.variant }, hint.text)))));
+};
+
+export { Hints, Hint as default };

package/components/ImageUploader/index.d.ts

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,174 @@
+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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,72 @@
+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

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,61 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,60 @@
+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

@@ -0,0 +1,28 @@
+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/Progress/index.d.ts

@@ -3,5 +3,5 @@ export interface ProgressProps {
     className?: string;
     percentage?: number;
 }
-declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLSpanElement>>;
+declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;
 export default Progress;