@quadrats/react 1.1.7 → 1.1.8

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/core/contexts/modal/ModalProvider.js

@@ -1,66 +0,0 @@
-import React, { useState, useCallback, useEffect } from 'react';
-import { EmbedModal } from './EmbedModal/EmbedModal.js';
-import { CarouselModal } from './CarouselModal/CarouselModal.js';
-import { CardModal } from './CardModal/CardModal.js';
-import { ConfirmModal } from './ConfirmModal/ConfirmModal.js';
-import { ModalContext } from './modal.js';
-
-const ModalProvider = ({ children, needConfirmModal, setNeedConfirmModal }) => {
-    var _a, _b, _c;
-    const [modalName, setModalName] = useState('');
-    const [isModalClosed, setIsModalClosed] = useState(false);
-    const [embedModalConfig, setEmbedModalConfig] = useState(null);
-    const [carouselModalConfig, setCarouselModalConfig] = useState(null);
-    const [cardModalConfig, setCardModalConfig] = useState(null);
-    const [confirmModalConfig, setConfirmModalConfig] = useState(null);
-    const close = useCallback(() => {
-        setModalName('');
-        setIsModalClosed(true);
-        if (needConfirmModal) {
-            setNeedConfirmModal === null || setNeedConfirmModal === void 0 ? void 0 : setNeedConfirmModal(null);
-        }
-    }, [needConfirmModal, setNeedConfirmModal]);
-    useEffect(() => {
-        if (needConfirmModal) {
-            setModalName('confirm-modal');
-            setConfirmModalConfig(needConfirmModal);
-        }
-    }, [needConfirmModal]);
-    return (React.createElement(ModalContext.Provider, { value: {
-            isModalClosed,
-            setIsModalClosed,
-            setEmbedModalConfig: (config) => {
-                setModalName('embed-modal');
-                setEmbedModalConfig(config);
-            },
-            setCarouselModalConfig: (config) => {
-                setModalName('carousel-modal');
-                setCarouselModalConfig(config);
-            },
-            setCardModalConfig: (config) => {
-                setModalName('card-modal');
-                setCardModalConfig(config);
-            },
-            setConfirmModalConfig: (config) => {
-                setModalName('confirm-modal');
-                setConfirmModalConfig(config);
-            },
-        } },
-        children,
-        React.createElement(EmbedModal, { isOpen: modalName === 'embed-modal', close: close, placeholder: (embedModalConfig === null || embedModalConfig === void 0 ? void 0 : embedModalConfig.placeholder) || '', confirmText: (embedModalConfig === null || embedModalConfig === void 0 ? void 0 : embedModalConfig.confirmText) || '', hint: (embedModalConfig === null || embedModalConfig === void 0 ? void 0 : embedModalConfig.hint) || '', type: (embedModalConfig === null || embedModalConfig === void 0 ? void 0 : embedModalConfig.type) || 'input', onConfirm: (value) => {
-                var _a;
-                (_a = embedModalConfig === null || embedModalConfig === void 0 ? void 0 : embedModalConfig.onConfirm) === null || _a === void 0 ? void 0 : _a.call(embedModalConfig, value);
-            } }),
-        React.createElement(CarouselModal, { isOpen: modalName === 'carousel-modal', close: close, controller: carouselModalConfig === null || carouselModalConfig === void 0 ? void 0 : carouselModalConfig.controller, initialValue: carouselModalConfig === null || carouselModalConfig === void 0 ? void 0 : carouselModalConfig.initialValue, onConfirm: carouselModalConfig === null || carouselModalConfig === void 0 ? void 0 : carouselModalConfig.onConfirm }),
-        React.createElement(CardModal, { isOpen: modalName === 'card-modal', close: close, controller: cardModalConfig === null || cardModalConfig === void 0 ? void 0 : cardModalConfig.controller, initialValue: cardModalConfig === null || cardModalConfig === void 0 ? void 0 : cardModalConfig.initialValue, onConfirm: ({ values, imageItem, haveLink }) => {
-                var _a;
-                (_a = cardModalConfig === null || cardModalConfig === void 0 ? void 0 : cardModalConfig.onConfirm) === null || _a === void 0 ? void 0 : _a.call(cardModalConfig, {
-                    values,
-                    imageItem,
-                    haveLink,
-                });
-            } }),
-        React.createElement(ConfirmModal, { isOpen: modalName === 'confirm-modal', close: close, title: (_a = confirmModalConfig === null || confirmModalConfig === void 0 ? void 0 : confirmModalConfig.title) !== null && _a !== void 0 ? _a : '', content: (_b = confirmModalConfig === null || confirmModalConfig === void 0 ? void 0 : confirmModalConfig.content) !== null && _b !== void 0 ? _b : '', confirmText: (_c = confirmModalConfig === null || confirmModalConfig === void 0 ? void 0 : confirmModalConfig.confirmText) !== null && _c !== void 0 ? _c : '', onConfirm: confirmModalConfig === null || confirmModalConfig === void 0 ? void 0 : confirmModalConfig.onConfirm, haveFooter: confirmModalConfig === null || confirmModalConfig === void 0 ? void 0 : confirmModalConfig.haveFooter, mask: confirmModalConfig === null || confirmModalConfig === void 0 ? void 0 : confirmModalConfig.mask, maskClosable: confirmModalConfig === null || confirmModalConfig === void 0 ? void 0 : confirmModalConfig.maskClosable, escToExit: confirmModalConfig === null || confirmModalConfig === void 0 ? void 0 : confirmModalConfig.escToExit })));
-};
-
-export { ModalProvider };