@quadrats/react 1.1.8 → 1.1.10

package/core/contexts/message/message.d.ts

@@ -0,0 +1,10 @@
+import { MessageSeverity } from '@quadrats/react/components';
+export interface MessageContextValue {
+    message: ({ type, content, duration }: {
+        type?: MessageSeverity;
+        content: string;
+        duration?: number;
+    }) => void;
+}
+export declare const MessageContext: import("react").Context<MessageContextValue>;
+export declare function useMessage(): MessageContextValue;

package/core/contexts/message/message.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from 'react';
+
+const MessageContext = createContext({
+    message: () => { },
+});
+function useMessage() {
+    return useContext(MessageContext);
+}
+
+export { MessageContext, useMessage };

package/core/contexts/modal/CardModal/CardModal.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Editor } from '@quadrats/core';
+import { Card, CardAlignment } from '@quadrats/common/card';
+import { ImageUploaderItem } from '@quadrats/react/components';
+export type CardModalValues = {
+    alignment: CardAlignment;
+    title: string;
+    description: string;
+    remark: string;
+    linkText: string;
+    linkUrl: string;
+};
+export interface CardModalProps {
+    isOpen: boolean;
+    close: VoidFunction;
+    controller?: Card<Editor>;
+    initialValue?: {
+        values: CardModalValues;
+        imageItem: ImageUploaderItem | null;
+        haveLink: boolean;
+    };
+    onConfirm: ({ values, imageItem, haveLink, }: {
+        values: CardModalValues;
+        imageItem: ImageUploaderItem | null;
+        haveLink: boolean;
+    }) => void;
+}
+export declare const CardModal: ({ isOpen, close, controller, initialValue, onConfirm: onConfirmProps }: CardModalProps) => React.JSX.Element;

package/core/contexts/modal/CardModal/CardModal.js

@@ -0,0 +1,111 @@
+import React, { useState, useMemo, useEffect, useCallback } from 'react';
+import { usePreviousValue } from '@quadrats/react/utils';
+import { Modal, SegmentedControl, ImageUploader, Input, Textarea, Toggle } from '@quadrats/react/components';
+import { useMessage } from '../../message/message.js';
+
+const options = [
+    {
+        value: 'leftImageRightText',
+        label: '左圖右文',
+    },
+    {
+        value: 'rightImageLeftText',
+        label: '右圖左文',
+    },
+    {
+        value: 'noImage',
+        label: '純文字顯示',
+    },
+];
+const emptyValues = {
+    alignment: 'leftImageRightText',
+    title: '',
+    description: '',
+    remark: '',
+    linkText: '',
+    linkUrl: '',
+};
+// TODO: i18n
+const CardModal = ({ isOpen, close, controller, initialValue, onConfirm: onConfirmProps }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const { message } = useMessage();
+    const [values, setValues] = useState(emptyValues);
+    const [imageUploaderItem, setImageUploaderItem] = useState(null);
+    const [haveLink, setHaveLink] = useState(true);
+    const [errors, setErrors] = useState([]);
+    const uploading = useMemo(() => imageUploaderItem && imageUploaderItem.progress !== 100, [imageUploaderItem]);
+    const prevIsOpen = usePreviousValue(isOpen);
+    useEffect(() => {
+        if (!prevIsOpen && isOpen && initialValue) {
+            setValues(Object.assign({}, initialValue.values));
+            setHaveLink(initialValue.haveLink);
+            setImageUploaderItem(initialValue.imageItem);
+        }
+    }, [initialValue, isOpen, prevIsOpen]);
+    const onConfirm = useCallback(() => {
+        const errorItems = [];
+        setErrors([]);
+        if (values.alignment !== 'noImage' && (!imageUploaderItem || (imageUploaderItem && !imageUploaderItem.url))) {
+            errorItems.push({ field: 'image', message: '必填欄位' });
+        }
+        if (!values.title) {
+            errorItems.push({ field: 'title', message: '必填欄位' });
+        }
+        if (!values.description) {
+            errorItems.push({ field: 'description', message: '必填欄位' });
+        }
+        if (haveLink) {
+            const urlValidation = /^http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w-./?%&=]*)?$/;
+            if (!values.linkText) {
+                errorItems.push({ field: 'linkText', message: '必填欄位' });
+            }
+            if (!values.linkUrl) {
+                errorItems.push({ field: 'linkUrl', message: '必填欄位' });
+            }
+            if (values.linkUrl && !urlValidation.test(values.linkUrl)) {
+                errorItems.push({ field: 'linkUrl', message: '格式錯誤' });
+            }
+        }
+        if (errorItems.length > 0) {
+            setErrors(errorItems);
+        }
+        else {
+            close();
+            setValues(emptyValues);
+            setHaveLink(true);
+            setImageUploaderItem(null);
+            onConfirmProps({ values, imageItem: values.alignment === 'noImage' ? null : imageUploaderItem, haveLink });
+        }
+    }, [imageUploaderItem, close, onConfirmProps, haveLink, values]);
+    return (React.createElement(Modal, { isOpen: isOpen, size: "medium", title: "\u5EFA\u7ACB\u5361\u7247", confirmText: "\u5EFA\u7ACB\u5361\u7247", mainAreaClassName: "qdr-card-modal__main", closable: !uploading, maskClosable: !uploading, onClose: () => {
+            close();
+            setValues(emptyValues);
+            setHaveLink(true);
+            setImageUploaderItem(null);
+        }, onConfirm: onConfirm },
+        React.createElement("div", { className: "qdr-card-modal__block" },
+            React.createElement("p", { className: "qdr-card-modal__block-title" }, "\u986F\u793A\u8A2D\u5B9A"),
+            React.createElement(SegmentedControl, { options: options, value: values.alignment, onChange: (value) => setValues((prev) => (Object.assign(Object.assign({}, prev), { alignment: value }))) })),
+        React.createElement("div", { className: "qdr-card-modal__block" },
+            React.createElement("p", { className: "qdr-card-modal__block-title" }, "\u57FA\u672C\u8A2D\u5B9A"),
+            React.createElement("div", { className: "qdr-card-modal__block-content" },
+                values.alignment !== 'noImage' && controller && (React.createElement(ImageUploader, { label: "\u5716\u7247", getBody: controller.getBody, getHeaders: controller.getHeaders, getUrl: controller.getUrl, uploader: controller.uploader, imageUploaderItem: imageUploaderItem, setImageUploaderItem: setImageUploaderItem, width: 240, accept: controller === null || controller === void 0 ? void 0 : controller.accept, ratio: controller === null || controller === void 0 ? void 0 : controller.ratio, limitSize: controller === null || controller === void 0 ? void 0 : controller.limitSize, onOverLimitSize: () => {
+                        message({ type: 'error', content: '圖片檔案過大，檔案需小於 2MB' });
+                    }, onErrorAccept: () => {
+                        message({ type: 'error', content: '圖片類型錯誤' });
+                    }, required: true, errorMessage: (_b = (_a = errors.find((e) => e.field === 'image')) === null || _a === void 0 ? void 0 : _a.message) !== null && _b !== void 0 ? _b : '' })),
+                React.createElement(Input, { value: values.title, className: "qdr-card-modal__block-field", onChange: (value) => setValues((prev) => (Object.assign(Object.assign({}, prev), { title: value }))), label: "\u6A19\u984C", placeholder: "\u8ACB\u8F38\u5165\u6A19\u984C", maxLength: 30, required: true, errorMessage: (_d = (_c = errors.find((e) => e.field === 'title')) === null || _c === void 0 ? void 0 : _c.message) !== null && _d !== void 0 ? _d : '' }),
+                React.createElement(Textarea, { value: values.description, className: "qdr-card-modal__block-field", onChange: (value) => setValues((prev) => (Object.assign(Object.assign({}, prev), { description: value }))), label: "\u7C21\u8FF0", placeholder: "\u8ACB\u8F38\u5165\u7C21\u8FF0", height: 86, maxLength: 50, required: true, errorMessage: (_f = (_e = errors.find((e) => e.field === 'description')) === null || _e === void 0 ? void 0 : _e.message) !== null && _f !== void 0 ? _f : '' }),
+                React.createElement(Input, { value: values.remark, className: "qdr-card-modal__block-field", onChange: (value) => setValues((prev) => (Object.assign(Object.assign({}, prev), { remark: value }))), label: "\u5099\u8A3B", placeholder: "\u8ACB\u8F38\u5165\u5099\u8A3B\u8CC7\u8A0A", maxLength: 30 }))),
+        React.createElement("div", { className: "qdr-card-modal__block" },
+            React.createElement("div", { className: "qdr-card-modal__block-title" },
+                React.createElement("span", null, "\u5C0E\u9023\u6309\u9215"),
+                React.createElement("div", { className: "qdr-card-modal__toggle-wrapper" },
+                    React.createElement(Toggle, { checked: haveLink, onChange: setHaveLink }),
+                    React.createElement("span", null, "\u986F\u793A\u6309\u9215"))),
+            haveLink && (React.createElement("div", { className: "qdr-card-modal__link-wrapper" },
+                React.createElement(Input, { value: values.linkText, onChange: (value) => setValues((prev) => (Object.assign(Object.assign({}, prev), { linkText: value }))), width: 180, label: "\u986F\u793A\u6587\u5B57", placeholder: "\u8ACB\u8F38\u5165\u986F\u793A\u6587\u5B57", maxLength: 6, required: true, errorMessage: (_h = (_g = errors.find((e) => e.field === 'linkText')) === null || _g === void 0 ? void 0 : _g.message) !== null && _h !== void 0 ? _h : '' }),
+                React.createElement(Input, { value: values.linkUrl, onChange: (value) => setValues((prev) => (Object.assign(Object.assign({}, prev), { linkUrl: value }))), className: "qdr-card-modal__url-field", label: "\u9023\u7D50", placeholder: "\u8CBC\u4E0A\u9023\u7D50\uFF0C\u5982 https://...", required: true, errorMessage: (_k = (_j = errors.find((e) => e.field === 'linkUrl')) === null || _j === void 0 ? void 0 : _j.message) !== null && _k !== void 0 ? _k : '' }))))));
+};
+
+export { CardModal };

package/core/contexts/modal/CarouselModal/CarouselItem.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+interface CarouselItemProps {
+    url: string;
+    preview: string;
+    progress: number;
+    caption: string;
+    index: number;
+    onChange: (value: string) => void;
+    onRemove: VoidFunction;
+    swap: (from: number, to: number) => void;
+    ratio?: [number, number];
+    isError?: boolean;
+}
+declare const CarouselItem: ({ url, preview, progress, caption, index, onChange, onRemove, swap, ratio, isError, }: CarouselItemProps) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
+export default CarouselItem;

package/core/contexts/modal/CarouselModal/CarouselItem.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import clsx from 'clsx';
+import { useDrag, useDrop } from 'react-dnd';
+import { Progress, Icon, Input } from '@quadrats/react/components';
+import { Trash, Image } from '@quadrats/icons';
+
+const CarouselItem = ({ url, preview, progress, caption, index, onChange, onRemove, swap, ratio, isError, }) => {
+    const [{ isDragging }, drag, dragPreview] = useDrag(() => ({
+        type: 'CarouselItem',
+        collect: (monitor) => ({
+            isDragging: monitor.isDragging(),
+        }),
+        item: { index },
+    }));
+    const [{ isOver }, drop] = useDrop(() => ({
+        accept: 'CarouselItem',
+        collect: (monitor) => ({
+            isOver: monitor.isOver({ shallow: true }),
+        }),
+        drop: (item) => {
+            if (item.index !== index) {
+                swap(item.index, index);
+            }
+        },
+    }));
+    // TODO: i18n
+    return drop(drag(dragPreview(React.createElement("div", { className: clsx('qdr-carousel-modal__item', {
+            'qdr-carousel-modal__item--isDragging': isDragging,
+            'qdr-carousel-modal__item--isOver': isOver,
+        }) },
+        progress !== 100 && React.createElement(Progress, { percentage: progress }),
+        React.createElement("div", { contentEditable: false, className: clsx('qdr-inline-toolbar', 'qdr-carousel-modal__inline-toolbar') },
+            React.createElement(Icon, { className: "qdr-inline-toolbar__icon", icon: Trash, width: 24, height: 24, onClick: onRemove })),
+        React.createElement("div", { className: "qdr-carousel-modal__image-wrapper" }, isError ? (React.createElement("div", { className: "qdr-carousel-modal__error-wrapper", style: {
+                aspectRatio: ratio ? `${ratio[0]} / ${ratio[1]}` : '3 /2',
+            } },
+            React.createElement(Icon, { className: "qdr-carousel-modal__error-icon", icon: Image, width: 48, height: 48 }),
+            React.createElement("p", { className: "qdr-carousel-modal__error-text" }, "\u4E0A\u50B3\u932F\u8AA4"))) : (React.createElement("img", { src: url || preview, className: "qdr-carousel-modal__image", style: {
+                objectFit: ratio ? 'cover' : 'contain',
+                aspectRatio: ratio ? `${ratio[0]} / ${ratio[1]}` : '3 /2',
+            } }))),
+        React.createElement("div", { className: "qdr-carousel-modal__input-wrapper" },
+            React.createElement(Input, { value: caption, onChange: onChange, placeholder: "\u5716\u7247\u8AAA\u660E\u6216\u66FF\u4EE3\u6587\u5B57..." }))))));
+};
+
+export { CarouselItem as default };

package/core/contexts/modal/CarouselModal/CarouselModal.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Editor } from '@quadrats/core';
+import { Carousel, CarouselFieldArrayItem } from '@quadrats/common/carousel';
+export interface CarouselModalProps {
+    isOpen: boolean;
+    close: VoidFunction;
+    controller?: Carousel<Editor>;
+    initialValue?: CarouselFieldArrayItem[];
+    onConfirm?: (items: CarouselFieldArrayItem[]) => void;
+}
+export declare const CarouselModal: ({ isOpen, close, controller, initialValue, onConfirm }: CarouselModalProps) => React.JSX.Element;

package/core/contexts/modal/CarouselModal/CarouselModal.js

@@ -0,0 +1,169 @@
+import { __awaiter } from 'tslib';
+import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import clsx from 'clsx';
+import { Plus, Upload } from '@quadrats/icons';
+import { usePreviousValue, readFileAsBase64, upload } from '@quadrats/react/utils';
+import { Modal, Hints, Button, Icon } from '@quadrats/react/components';
+import { useMessage } from '../../message/message.js';
+import FilesDropZone from './FilesDropZone.js';
+import CarouselItem from './CarouselItem.js';
+
+const CarouselModal = ({ isOpen, close, controller, initialValue = [], onConfirm }) => {
+    const [uploading, setUploading] = useState(false);
+    const [isDragging, setIsDragging] = useState(false);
+    const [items, setItems] = useState([]);
+    const { message } = useMessage();
+    const prevIsOpen = usePreviousValue(isOpen);
+    useEffect(() => {
+        if (!prevIsOpen && isOpen && initialValue.length > 0) {
+            setItems(initialValue);
+        }
+    }, [initialValue, isOpen, prevIsOpen]);
+    useEffect(() => {
+        if (items.some((i) => i.progress !== 100)) {
+            setUploading(true);
+        }
+        else {
+            setUploading(false);
+        }
+    }, [items]);
+    const acceptText = useMemo(() => {
+        if ((controller === null || controller === void 0 ? void 0 : controller.accept.find((a) => a === 'image/jpeg' || a === 'image/jpg')) &&
+            (controller === null || controller === void 0 ? void 0 : controller.accept.find((a) => a === 'image/png'))) {
+            return 'JPG 或 PNG';
+        }
+        else if (controller === null || controller === void 0 ? void 0 : controller.accept.find((a) => a === 'image/png')) {
+            return 'PNG';
+        }
+        else if (controller === null || controller === void 0 ? void 0 : controller.accept.find((a) => a === 'image/jpeg' || a === 'image/jpg')) {
+            return 'JPG';
+        }
+        return '';
+    }, [controller === null || controller === void 0 ? void 0 : controller.accept]);
+    const isOverMaxLength = useMemo(() => {
+        if (controller === null || controller === void 0 ? void 0 : controller.maxLength) {
+            return items.length >= controller.maxLength;
+        }
+        return false;
+    }, [controller === null || controller === void 0 ? void 0 : controller.maxLength, items.length]);
+    const disabledConfirm = useMemo(() => {
+        return items.length === 0;
+    }, [items.length]);
+    const uploadFiles = useCallback((files) => __awaiter(void 0, void 0, void 0, function* () {
+        if (files && controller) {
+            const currentItems = [];
+            for (const file of files) {
+                const base64 = yield readFileAsBase64(file);
+                currentItems.push({ file, url: '', caption: '', preview: base64, progress: 0 });
+            }
+            setItems((prev) => [...prev, ...currentItems]);
+            for (const item of currentItems) {
+                const onProgress = (p) => {
+                    setItems((prev) => prev.map((u) => (u.file === item.file ? Object.assign(Object.assign({}, u), { progress: p }) : u)));
+                };
+                try {
+                    const url = yield upload({
+                        file: item.file,
+                        getBody: controller === null || controller === void 0 ? void 0 : controller.getBody,
+                        getHeaders: controller === null || controller === void 0 ? void 0 : controller.getHeaders,
+                        getUrl: controller === null || controller === void 0 ? void 0 : controller.getUrl,
+                        uploader: controller === null || controller === void 0 ? void 0 : controller.uploader,
+                        onProgress,
+                    });
+                    setItems((prev) => {
+                        if (prev.filter((p) => !!p.url).length >= controller.maxLength) {
+                            message({ type: 'error', content: '超過數量上限，剩下圖片無法上傳' });
+                            return prev.filter((p) => !!p.url);
+                        }
+                        return prev.map((u) => (u.file === item.file ? Object.assign(Object.assign({}, u), { preview: url, url }) : u));
+                    });
+                }
+                catch (error) {
+                    setItems((prev) => prev.map((u) => (u.file === item.file ? Object.assign(Object.assign({}, u), { preview: '', url: '', isError: true }) : u)));
+                }
+            }
+        }
+    }), [controller, message]);
+    const change = useCallback((index, image) => {
+        setItems((prev) => {
+            const updated = [...prev];
+            updated[index] = Object.assign(Object.assign({}, updated[index]), image);
+            return updated;
+        });
+    }, []);
+    const remove = useCallback((index) => {
+        setItems((prev) => prev.filter((_, i) => i !== index));
+    }, []);
+    const swap = useCallback((from, to) => {
+        setItems((prev) => {
+            const updated = [...prev];
+            const temp = updated[from];
+            updated[from] = updated[to];
+            updated[to] = temp;
+            return updated;
+        });
+    }, []);
+    // TODO: i18n
+    return (React.createElement(Modal, { isOpen: isOpen, title: "\u5EFA\u7ACB\u8F2A\u64AD", size: "extraLarge", closable: !uploading, maskClosable: !uploading, haveCloseButton: false, confirmText: "\u5EFA\u7ACB\u8F2A\u64AD", mainAreaClassName: "qdr-carousel-modal__main", sideChildren: React.createElement("div", { className: "qdr-carousel-modal__side" },
+            React.createElement("div", { className: "qdr-carousel-modal__side__hints-wrapper" },
+                React.createElement("div", { className: "qdr-carousel-modal__side__hints-title" }, "\u4E0A\u50B3\u5EFA\u8B70"),
+                React.createElement(Hints, { hints: [
+                        {
+                            text: `數量限制：至少 1 張，至多 ${controller === null || controller === void 0 ? void 0 : controller.maxLength} 張。`,
+                        },
+                        {
+                            text: `檔案格式：限 ${acceptText}。`,
+                        },
+                        (controller === null || controller === void 0 ? void 0 : controller.ratio) && {
+                            text: `檔案尺寸：最佳比例為 ${controller.ratio[0]}:${controller.ratio[1]}。建議圖片寬度達 2000px 以上，高度不限。`,
+                        },
+                        {
+                            text: `檔案大小：不可大於 ${controller === null || controller === void 0 ? void 0 : controller.limitSize} MB。`,
+                        },
+                    ].filter((h) => !!h) })),
+            React.createElement(Button, { className: "qdr-carousel-modal__side__upload", variant: "outlined", size: "large", disabled: isOverMaxLength, prefix: React.createElement(Icon, { icon: Plus, width: 24, height: 24 }), onClick: () => __awaiter(void 0, void 0, void 0, function* () {
+                    const files = yield (controller === null || controller === void 0 ? void 0 : controller.selectFiles());
+                    if (files) {
+                        const correctFiles = files.filter((f) => (controller === null || controller === void 0 ? void 0 : controller.limitSize) && f.size <= controller.limitSize * 1024 * 1024);
+                        if (correctFiles.length !== files.length) {
+                            message({ type: 'error', content: `圖片檔案過大，檔案需小於 ${controller === null || controller === void 0 ? void 0 : controller.limitSize}MB` });
+                        }
+                        if (correctFiles.length > 0) {
+                            yield uploadFiles(correctFiles);
+                        }
+                    }
+                }) }, "\u52A0\u5165\u5716\u7247")), customizedFooterElement: React.createElement("div", { className: "qdr-carousel-modal__counter" }, `已上傳 ${items.filter((i) => i.progress === 100).length}/${controller === null || controller === void 0 ? void 0 : controller.maxLength}`), disabledConfirmButton: disabledConfirm, onClose: () => {
+            close();
+            setItems([]);
+        }, onConfirm: () => {
+            if (uploading) {
+                message({ type: 'error', content: '檔案上傳中，無法建立' });
+            }
+            else if ((controller === null || controller === void 0 ? void 0 : controller.maxLength) && items.length > controller.maxLength) {
+                message({ type: 'error', content: '超過數量上限，請刪除已存在圖片' });
+            }
+            else {
+                close();
+                setItems([]);
+                setTimeout(() => {
+                    onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(items);
+                }, 0);
+            }
+        } },
+        React.createElement(FilesDropZone, { isDragging: isDragging, setIsDragging: setIsDragging, isOverMaxLength: isOverMaxLength, controller: controller, uploadFiles: uploadFiles }, items.length > 0 ? (React.createElement("div", { className: clsx('qdr-carousel-modal__grid', {
+                'qdr-carousel-modal__grid--isDragging': isDragging,
+            }) }, items.map((item, index) => (React.createElement(CarouselItem, { key: `${item.url}-${item.preview}-${index}`, url: item.url, preview: item.preview, progress: item.progress, caption: item.caption, index: index, ratio: controller === null || controller === void 0 ? void 0 : controller.ratio, isError: item.isError, onChange: (value) => {
+                change(index, { url: item.url, caption: value });
+            }, onRemove: () => {
+                remove(index);
+            }, swap: swap }))))) : (React.createElement("div", { className: "qdr-carousel-modal__placeholder" },
+            React.createElement("div", { className: "qdr-carousel-modal__placeholder__block" },
+                React.createElement("div", { className: "qdr-carousel-modal__placeholder__icon" },
+                    React.createElement(Icon, { icon: Upload, width: 32, height: 32 })),
+                React.createElement("div", { className: "qdr-carousel-modal__placeholder__title" }, "\u62D6\u66F3\u6A94\u6848\u5230\u6B64\u4E0A\u50B3"),
+                React.createElement("div", { className: "qdr-carousel-modal__placeholder__hint" }, (controller === null || controller === void 0 ? void 0 : controller.ratio)
+                    ? `僅能上傳 ${acceptText}；建議比例為 ${controller.ratio[0]}:${controller.ratio[1]} 且寬度至少達 2000px 以上；檔案大小不可超過 ${controller === null || controller === void 0 ? void 0 : controller.limitSize}MB`
+                    : `僅能上傳 ${acceptText}；檔案大小不可超過 ${controller === null || controller === void 0 ? void 0 : controller.limitSize}MB`)))))));
+};
+
+export { CarouselModal };

package/core/contexts/modal/CarouselModal/FilesDropZone.d.ts

@@ -0,0 +1,13 @@
+import React, { Dispatch, SetStateAction, ReactNode } from 'react';
+import { Editor } from '@quadrats/core';
+import { Carousel } from '@quadrats/common/carousel';
+interface FilesDropZoneProps {
+    isDragging: boolean;
+    setIsDragging: Dispatch<SetStateAction<boolean>>;
+    children: ReactNode;
+    isOverMaxLength: boolean;
+    controller?: Carousel<Editor>;
+    uploadFiles: (files: File[]) => Promise<void>;
+}
+declare const FilesDropZone: ({ isDragging, setIsDragging, children, isOverMaxLength, controller, uploadFiles, }: FilesDropZoneProps) => React.JSX.Element;
+export default FilesDropZone;

package/core/contexts/modal/CarouselModal/FilesDropZone.js

@@ -0,0 +1,64 @@
+import { __awaiter } from 'tslib';
+import React, { useCallback } from 'react';
+import clsx from 'clsx';
+import { Upload } from '@quadrats/icons';
+import { Icon } from '@quadrats/react/components';
+import { useMessage } from '../../message/message.js';
+
+const FilesDropZone = ({ isDragging, setIsDragging, children, isOverMaxLength, controller, uploadFiles, }) => {
+    const { message } = useMessage();
+    const validateFile = useCallback((file) => {
+        if (!(controller === null || controller === void 0 ? void 0 : controller.accept.find((a) => a === file.type))) {
+            return false;
+        }
+        return true;
+    }, [controller === null || controller === void 0 ? void 0 : controller.accept]);
+    const validateFiles = useCallback((event) => {
+        const files = Array.from(event.dataTransfer.files);
+        if (!files || isOverMaxLength) {
+            if (isOverMaxLength) {
+                message({ type: 'error', content: '超過數量上限，請刪除已存在圖片' });
+            }
+            return false;
+        }
+        return true;
+    }, [isOverMaxLength, message]);
+    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')) {
+            event.preventDefault();
+            setIsDragging(false);
+            const files = Array.from(event.dataTransfer.files);
+            if (!validateFiles(event)) {
+                return;
+            }
+            const correctFiles = files.filter((f) => validateFile(f) && (controller === null || controller === void 0 ? void 0 : controller.limitSize) && f.size <= controller.limitSize * 1024 * 1024);
+            if (files.find((f) => !validateFile(f))) {
+                message({ type: 'error', content: '檔案類型錯誤。' });
+            }
+            if (files.find((f) => (controller === null || controller === void 0 ? void 0 : controller.limitSize) && f.size > controller.limitSize * 1024 * 1024)) {
+                message({ type: 'error', content: `圖片檔案過大，檔案需小於 ${controller === null || controller === void 0 ? void 0 : controller.limitSize}MB` });
+            }
+            if (correctFiles.length > 0) {
+                yield uploadFiles(correctFiles);
+            }
+        }
+    }), [setIsDragging, validateFiles, validateFile, controller === null || controller === void 0 ? void 0 : controller.limitSize, message, uploadFiles]);
+    // TODO: i18n
+    return (React.createElement("div", { className: clsx('qdr-carousel-modal__zone'), 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);
+            }
+        }, onDragLeave: () => {
+            setIsDragging(false);
+        }, onDrop: handleDrop },
+        isDragging && (React.createElement("div", { className: "qdr-carousel-modal__zone__wrapper" },
+            React.createElement("div", { className: "qdr-carousel-modal__zone__block" },
+                React.createElement(Icon, { icon: Upload, width: 24, height: 24 }),
+                "\u5C07\u6A94\u6848\u62D6\u66F3\u5230\u9019\u88E1\u5373\u53EF\u4E0A\u50B3"))),
+        children));
+};
+
+export { FilesDropZone as default };

package/core/contexts/modal/ConfirmModal/ConfirmModal.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface ConfirmModalProps {
+    isOpen: boolean;
+    close: VoidFunction;
+    title: string;
+    content: string;
+    confirmText: string;
+    onConfirm?: () => void;
+    haveFooter?: boolean;
+    mask?: boolean;
+    maskClosable?: boolean;
+    escToExit?: boolean;
+}
+export declare const ConfirmModal: ({ isOpen, title, content, confirmText, close, onConfirm, haveFooter, mask, maskClosable, escToExit, }: ConfirmModalProps) => React.JSX.Element;

package/core/contexts/modal/ConfirmModal/ConfirmModal.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { useLocale } from '@quadrats/react/configs';
+import { Modal, Icon, Button } from '@quadrats/react/components';
+import { Warning } from '@quadrats/icons';
+
+const ConfirmModal = ({ isOpen, title, content, confirmText, close, onConfirm, haveFooter = true, mask, maskClosable, escToExit, }) => {
+    const locale = useLocale();
+    return (React.createElement(Modal, { isOpen: isOpen, className: "qdr-confirm-modal", size: "small", mask: mask, maskClosable: maskClosable, escToExit: escToExit, onClose: () => {
+            close();
+        }, haveFooter: false },
+        React.createElement("div", { className: "qdr-confirm-modal__container" },
+            React.createElement(Icon, { icon: Warning, width: 28, height: 28, className: "qdr-confirm-modal__icon" }),
+            React.createElement("div", { className: "qdr-confirm-modal__body" },
+                React.createElement("div", { className: "qdr-confirm-modal__title" }, title),
+                React.createElement("div", { className: "qdr-confirm-modal__content" }, content))),
+        haveFooter && (React.createElement("div", { className: "qdr-confirm-modal__footer" },
+            React.createElement(Button, { variant: "secondary", onClick: close }, locale.editor.cancel),
+            React.createElement(Button, { variant: "primary", danger: true, onClick: () => {
+                    close();
+                    onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm();
+                } }, confirmText || locale.editor.confirm)))));
+};
+
+export { ConfirmModal };

package/core/contexts/modal/EmbedModal/EmbedModal.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface EmbedModalProps {
+    isOpen: boolean;
+    close: VoidFunction;
+    placeholder: string;
+    confirmText: string;
+    hint: string;
+    type: 'input' | 'textarea';
+    onConfirm: (value: string) => void;
+}
+export declare const EmbedModal: ({ isOpen, close, placeholder, confirmText, hint, type, onConfirm }: EmbedModalProps) => React.JSX.Element;

package/core/contexts/modal/EmbedModal/EmbedModal.js

@@ -0,0 +1,27 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Modal, Textarea, Input } from '@quadrats/react/components';
+import { useLocale } from '@quadrats/react/configs';
+
+const EmbedModal = ({ isOpen, close, placeholder, confirmText, hint, type, onConfirm }) => {
+    const [value, setValue] = useState('');
+    const locale = useLocale();
+    const textareaRef = useRef(null);
+    const inputRef = useRef(null);
+    useEffect(() => {
+        var _a, _b;
+        if (isOpen) {
+            (_a = textareaRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    }, [isOpen]);
+    return (React.createElement(Modal, { isOpen: isOpen, title: locale.editor.embedTitle, confirmText: confirmText, onClose: () => {
+            close();
+            setValue('');
+        }, onConfirm: () => {
+            close();
+            setValue('');
+            onConfirm(value);
+        } }, type === 'textarea' ? (React.createElement(Textarea, { textareaRef: textareaRef, value: value, onChange: setValue, placeholder: placeholder, hint: hint, height: 86 })) : (React.createElement(Input, { inputRef: inputRef, value: value, onChange: setValue, placeholder: placeholder, hint: hint }))));
+};
+
+export { EmbedModal };

package/core/contexts/modal/ModalProvider.d.ts

@@ -0,0 +1,8 @@
+import React, { Dispatch, SetStateAction, ReactNode } from 'react';
+import { ConfirmModalConfig } from './modal';
+export interface ModalProviderProps {
+    children: ReactNode;
+    needConfirmModal?: ConfirmModalConfig | null;
+    setNeedConfirmModal?: Dispatch<SetStateAction<ConfirmModalConfig | null>>;
+}
+export declare const ModalProvider: ({ children, needConfirmModal, setNeedConfirmModal }: ModalProviderProps) => React.JSX.Element;