@quadrats/react 1.0.0 → 1.1.1

package/card/components/Card.js

@@ -3,93 +3,101 @@ import clsx from 'clsx';
 import { Transforms } from '@quadrats/core';
 import { useModal, useSlateStatic, ReactEditor } from '@quadrats/react';
 import { InlineToolbar } from '@quadrats/react/toolbar';
-import { Edit, Trash, BlockLeft, BlockRight } from '@quadrats/icons';
+import { BlockLeft, BlockRight, Edit, Trash } from '@quadrats/icons';
 
 function Card({ attributes, children, element, controller, }) {
     const { setCardModalConfig, setConfirmModalConfig } = useModal();
     const editor = useSlateStatic();
     const path = ReactEditor.findPath(editor, element);
     return (React.createElement("div", Object.assign({}, attributes, { contentEditable: false, className: clsx('qdr-card', `qdr-card--${element.alignment}`) }),
-        React.createElement(InlineToolbar, { className: "qdr-card__inline-toolbar", leftIcons: element.alignment === 'noImage'
-                ? []
-                : [
-                    {
-                        icon: BlockLeft,
-                        onClick: () => {
-                            controller.updateCardAlignment({
-                                editor,
-                                alignment: 'leftImageRightText',
-                                path,
-                            });
-                        },
-                        active: element.alignment === 'leftImageRightText',
-                    },
-                    {
-                        icon: BlockRight,
-                        onClick: () => {
-                            controller.updateCardAlignment({
-                                editor,
-                                alignment: 'rightImageLeftText',
-                                path,
-                            });
-                        },
-                        active: element.alignment === 'rightImageLeftText',
-                    },
-                ], rightIcons: [
-                {
-                    icon: Edit,
-                    onClick: () => {
-                        setCardModalConfig({
-                            controller,
-                            initialValue: {
-                                values: {
-                                    alignment: element.alignment,
-                                    title: element.title,
-                                    description: element.description,
-                                    remark: element.remark,
-                                    linkText: element.linkText,
-                                    linkUrl: element.linkUrl,
+        React.createElement(InlineToolbar, { className: "qdr-card__inline-toolbar", iconGroups: [
+                element.alignment === 'noImage'
+                    ? { icons: [] }
+                    : {
+                        enabledBgColor: true,
+                        icons: [
+                            {
+                                icon: BlockLeft,
+                                onClick: () => {
+                                    controller.updateCardAlignment({
+                                        editor,
+                                        alignment: 'leftImageRightText',
+                                        path,
+                                    });
                                 },
-                                imageItem: element.imageItem,
-                                haveLink: element.haveLink,
+                                active: element.alignment === 'leftImageRightText',
                             },
-                            onConfirm: ({ values, imageItem, haveLink }) => {
-                                controller.updateCardElement({
-                                    editor,
-                                    cardValues: {
-                                        alignment: values.alignment,
-                                        imageItem,
-                                        title: values.title,
-                                        description: values.description,
-                                        remark: values.remark,
-                                        haveLink,
-                                        linkText: values.linkText,
-                                        linkUrl: values.linkUrl,
-                                    },
-                                    path,
-                                });
+                            {
+                                icon: BlockRight,
+                                onClick: () => {
+                                    controller.updateCardAlignment({
+                                        editor,
+                                        alignment: 'rightImageLeftText',
+                                        path,
+                                    });
+                                },
+                                active: element.alignment === 'rightImageLeftText',
                             },
-                        });
+                        ],
                     },
-                },
                 {
-                    icon: Trash,
-                    onClick: () => {
-                        if (controller.confirmModal) {
-                            // TODO: i18n
-                            setConfirmModalConfig({
-                                title: '刪除卡片',
-                                content: '是否確認刪除此卡片？刪除後將立即移除，且此操作無法復原。',
-                                confirmText: '刪除卡片',
-                                onConfirm: () => {
+                    icons: [
+                        {
+                            icon: Edit,
+                            onClick: () => {
+                                setCardModalConfig({
+                                    controller,
+                                    initialValue: {
+                                        values: {
+                                            alignment: element.alignment,
+                                            title: element.title,
+                                            description: element.description,
+                                            remark: element.remark,
+                                            linkText: element.linkText,
+                                            linkUrl: element.linkUrl,
+                                        },
+                                        imageItem: element.imageItem,
+                                        haveLink: element.haveLink,
+                                    },
+                                    onConfirm: ({ values, imageItem, haveLink }) => {
+                                        controller.updateCardElement({
+                                            editor,
+                                            cardValues: {
+                                                alignment: values.alignment,
+                                                imageItem,
+                                                title: values.title,
+                                                description: values.description,
+                                                remark: values.remark,
+                                                haveLink,
+                                                linkText: values.linkText,
+                                                linkUrl: values.linkUrl,
+                                            },
+                                            path,
+                                        });
+                                    },
+                                });
+                            },
+                        },
+                        {
+                            icon: Trash,
+                            onClick: () => {
+                                if (controller.confirmModal) {
+                                    // TODO: i18n
+                                    setConfirmModalConfig({
+                                        title: '刪除卡片',
+                                        content: '是否確認刪除此卡片？刪除後將立即移除，且此操作無法復原。',
+                                        confirmText: '刪除卡片',
+                                        onConfirm: () => {
+                                            Transforms.removeNodes(editor, { at: path });
+                                        },
+                                    });
+                                }
+                                else {
                                     Transforms.removeNodes(editor, { at: path });
-                                },
-                            });
-                        }
-                        else {
-                            Transforms.removeNodes(editor, { at: path });
-                        }
-                    },
+                                }
+                            },
+                        },
+                    ],
                 },
             ] }),
         children));

package/card/index.cjs.js

@@ -15,86 +15,94 @@ function Card({ attributes, children, element, controller, }) {
     const editor = react.useSlateStatic();
     const path = react.ReactEditor.findPath(editor, element);
     return (React.createElement("div", Object.assign({}, attributes, { contentEditable: false, className: clsx('qdr-card', `qdr-card--${element.alignment}`) }),
-        React.createElement(toolbar.InlineToolbar, { className: "qdr-card__inline-toolbar", leftIcons: element.alignment === 'noImage'
-                ? []
-                : [
-                    {
-                        icon: icons.BlockLeft,
-                        onClick: () => {
-                            controller.updateCardAlignment({
-                                editor,
-                                alignment: 'leftImageRightText',
-                                path,
-                            });
-                        },
-                        active: element.alignment === 'leftImageRightText',
-                    },
-                    {
-                        icon: icons.BlockRight,
-                        onClick: () => {
-                            controller.updateCardAlignment({
-                                editor,
-                                alignment: 'rightImageLeftText',
-                                path,
-                            });
-                        },
-                        active: element.alignment === 'rightImageLeftText',
-                    },
-                ], rightIcons: [
-                {
-                    icon: icons.Edit,
-                    onClick: () => {
-                        setCardModalConfig({
-                            controller,
-                            initialValue: {
-                                values: {
-                                    alignment: element.alignment,
-                                    title: element.title,
-                                    description: element.description,
-                                    remark: element.remark,
-                                    linkText: element.linkText,
-                                    linkUrl: element.linkUrl,
+        React.createElement(toolbar.InlineToolbar, { className: "qdr-card__inline-toolbar", iconGroups: [
+                element.alignment === 'noImage'
+                    ? { icons: [] }
+                    : {
+                        enabledBgColor: true,
+                        icons: [
+                            {
+                                icon: icons.BlockLeft,
+                                onClick: () => {
+                                    controller.updateCardAlignment({
+                                        editor,
+                                        alignment: 'leftImageRightText',
+                                        path,
+                                    });
                                 },
-                                imageItem: element.imageItem,
-                                haveLink: element.haveLink,
+                                active: element.alignment === 'leftImageRightText',
                             },
-                            onConfirm: ({ values, imageItem, haveLink }) => {
-                                controller.updateCardElement({
-                                    editor,
-                                    cardValues: {
-                                        alignment: values.alignment,
-                                        imageItem,
-                                        title: values.title,
-                                        description: values.description,
-                                        remark: values.remark,
-                                        haveLink,
-                                        linkText: values.linkText,
-                                        linkUrl: values.linkUrl,
-                                    },
-                                    path,
-                                });
+                            {
+                                icon: icons.BlockRight,
+                                onClick: () => {
+                                    controller.updateCardAlignment({
+                                        editor,
+                                        alignment: 'rightImageLeftText',
+                                        path,
+                                    });
+                                },
+                                active: element.alignment === 'rightImageLeftText',
                             },
-                        });
+                        ],
                     },
-                },
                 {
-                    icon: icons.Trash,
-                    onClick: () => {
-                        if (controller.confirmModal) {
-                            // TODO: i18n
-                            setConfirmModalConfig({
-                                title: '刪除卡片',
-                                content: '是否確認刪除此卡片？刪除後將立即移除，且此操作無法復原。',
-                                confirmText: '刪除卡片',
-                                onConfirm: () => {
+                    icons: [
+                        {
+                            icon: icons.Edit,
+                            onClick: () => {
+                                setCardModalConfig({
+                                    controller,
+                                    initialValue: {
+                                        values: {
+                                            alignment: element.alignment,
+                                            title: element.title,
+                                            description: element.description,
+                                            remark: element.remark,
+                                            linkText: element.linkText,
+                                            linkUrl: element.linkUrl,
+                                        },
+                                        imageItem: element.imageItem,
+                                        haveLink: element.haveLink,
+                                    },
+                                    onConfirm: ({ values, imageItem, haveLink }) => {
+                                        controller.updateCardElement({
+                                            editor,
+                                            cardValues: {
+                                                alignment: values.alignment,
+                                                imageItem,
+                                                title: values.title,
+                                                description: values.description,
+                                                remark: values.remark,
+                                                haveLink,
+                                                linkText: values.linkText,
+                                                linkUrl: values.linkUrl,
+                                            },
+                                            path,
+                                        });
+                                    },
+                                });
+                            },
+                        },
+                        {
+                            icon: icons.Trash,
+                            onClick: () => {
+                                if (controller.confirmModal) {
+                                    // TODO: i18n
+                                    setConfirmModalConfig({
+                                        title: '刪除卡片',
+                                        content: '是否確認刪除此卡片？刪除後將立即移除，且此操作無法復原。',
+                                        confirmText: '刪除卡片',
+                                        onConfirm: () => {
+                                            core.Transforms.removeNodes(editor, { at: path });
+                                        },
+                                    });
+                                }
+                                else {
                                     core.Transforms.removeNodes(editor, { at: path });
-                                },
-                            });
-                        }
-                        else {
-                            core.Transforms.removeNodes(editor, { at: path });
-                        }
-                    },
+                                }
+                            },
+                        },
+                    ],
                 },
             ] }),
         children));

package/carousel/components/Carousel.js

@@ -15,37 +15,41 @@ function Carousel({ attributes, children, element, controller, }) {
             setActiveIndex,
         } },
         React.createElement("div", Object.assign({}, attributes, { contentEditable: false, className: "qdr-carousel qdr-carousel--with-inline-toolbar" }),
-            React.createElement(InlineToolbar, { className: "qdr-carousel__inline-toolbar", leftIcons: [], rightIcons: [
+            React.createElement(InlineToolbar, { className: "qdr-carousel__inline-toolbar", iconGroups: [
                     {
-                        icon: Edit,
-                        onClick: () => {
-                            setCarouselModalConfig({
-                                controller,
-                                initialValue: element.items,
-                                onConfirm: (items) => {
-                                    controller.updateCarouselElement({ editor, items, path });
+                        icons: [
+                            {
+                                icon: Edit,
+                                onClick: () => {
+                                    setCarouselModalConfig({
+                                        controller,
+                                        initialValue: element.items,
+                                        onConfirm: (items) => {
+                                            controller.updateCarouselElement({ editor, items, path });
+                                        },
+                                    });
                                 },
-                            });
-                        },
-                    },
-                    {
-                        icon: Trash,
-                        onClick: () => {
-                            if (controller.confirmModal) {
-                                // TODO: i18n
-                                setConfirmModalConfig({
-                                    title: '刪除輪播',
-                                    content: '是否確認刪除此輪播？刪除後將立即移除，且此操作無法復原。',
-                                    confirmText: '刪除輪播',
-                                    onConfirm: () => {
+                            },
+                            {
+                                icon: Trash,
+                                onClick: () => {
+                                    if (controller.confirmModal) {
+                                        // TODO: i18n
+                                        setConfirmModalConfig({
+                                            title: '刪除輪播',
+                                            content: '是否確認刪除此輪播？刪除後將立即移除，且此操作無法復原。',
+                                            confirmText: '刪除輪播',
+                                            onConfirm: () => {
+                                                Transforms.removeNodes(editor, { at: path });
+                                            },
+                                        });
+                                    }
+                                    else {
                                         Transforms.removeNodes(editor, { at: path });
-                                    },
-                                });
-                            }
-                            else {
-                                Transforms.removeNodes(editor, { at: path });
-                            }
-                        },
+                                    }
+                                },
+                            },
+                        ],
                     },
                 ] }),
             children)));

package/carousel/index.cjs.js

@@ -26,37 +26,41 @@ function Carousel({ attributes, children, element, controller, }) {
             setActiveIndex,
         } },
         React.createElement("div", Object.assign({}, attributes, { contentEditable: false, className: "qdr-carousel qdr-carousel--with-inline-toolbar" }),
-            React.createElement(toolbar.InlineToolbar, { className: "qdr-carousel__inline-toolbar", leftIcons: [], rightIcons: [
+            React.createElement(toolbar.InlineToolbar, { className: "qdr-carousel__inline-toolbar", iconGroups: [
                     {
-                        icon: icons.Edit,
-                        onClick: () => {
-                            setCarouselModalConfig({
-                                controller,
-                                initialValue: element.items,
-                                onConfirm: (items) => {
-                                    controller.updateCarouselElement({ editor, items, path });
+                        icons: [
+                            {
+                                icon: icons.Edit,
+                                onClick: () => {
+                                    setCarouselModalConfig({
+                                        controller,
+                                        initialValue: element.items,
+                                        onConfirm: (items) => {
+                                            controller.updateCarouselElement({ editor, items, path });
+                                        },
+                                    });
                                 },
-                            });
-                        },
-                    },
-                    {
-                        icon: icons.Trash,
-                        onClick: () => {
-                            if (controller.confirmModal) {
-                                // TODO: i18n
-                                setConfirmModalConfig({
-                                    title: '刪除輪播',
-                                    content: '是否確認刪除此輪播？刪除後將立即移除，且此操作無法復原。',
-                                    confirmText: '刪除輪播',
-                                    onConfirm: () => {
+                            },
+                            {
+                                icon: icons.Trash,
+                                onClick: () => {
+                                    if (controller.confirmModal) {
+                                        // TODO: i18n
+                                        setConfirmModalConfig({
+                                            title: '刪除輪播',
+                                            content: '是否確認刪除此輪播？刪除後將立即移除，且此操作無法復原。',
+                                            confirmText: '刪除輪播',
+                                            onConfirm: () => {
+                                                core.Transforms.removeNodes(editor, { at: path });
+                                            },
+                                        });
+                                    }
+                                    else {
                                         core.Transforms.removeNodes(editor, { at: path });
-                                    },
-                                });
-                            }
-                            else {
-                                core.Transforms.removeNodes(editor, { at: path });
-                            }
-                        },
+                                    }
+                                },
+                            },
+                        ],
                     },
                 ] }),
             children)));

package/components/Tooltip/index.js

@@ -52,7 +52,7 @@ function Tooltip({ children, triggers = defaultTriggers, popup, getContainer = d
     if (triggers.includes('click')) {
         triggerProps.onClick = (event) => {
             var _a, _b;
-            delaySetVisible(prevVisible => !prevVisible, 0);
+            delaySetVisible((prevVisible) => !prevVisible, 0);
             (_b = (_a = child.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event);
         };
     }
@@ -83,7 +83,10 @@ function Tooltip({ children, triggers = defaultTriggers, popup, getContainer = d
             return;
         }
         const { top, left } = calculatePosition({
-            placement, getContainer, horizontalOffset, verticalOffset,
+            placement,
+            getContainer,
+            horizontalOffset,
+            verticalOffset,
         }, triggerEl, popupEl);
         popupEl.style.top = `${top}px`;
         popupEl.style.left = `${left}px`;

package/components/index.cjs.js

@@ -780,7 +780,7 @@ function Tooltip({ children, triggers = defaultTriggers, popup, getContainer = d
     if (triggers.includes('click')) {
         triggerProps.onClick = (event) => {
             var _a, _b;
-            delaySetVisible(prevVisible => !prevVisible, 0);
+            delaySetVisible((prevVisible) => !prevVisible, 0);
             (_b = (_a = child.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event);
         };
     }
@@ -811,7 +811,10 @@ function Tooltip({ children, triggers = defaultTriggers, popup, getContainer = d
             return;
         }
         const { top, left } = calculatePosition({
-            placement, getContainer, horizontalOffset, verticalOffset,
+            placement,
+            getContainer,
+            horizontalOffset,
+            verticalOffset,
         }, triggerEl, popupEl);
         popupEl.style.top = `${top}px`;
         popupEl.style.left = `${left}px`;

package/core/components/Quadrats.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import { Slate } from 'slate-react';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
 import { ConfigsProvider } from '@quadrats/react/configs';
 import { ModalProvider } from '../contexts/modal/ModalProvider.js';
 import { MessageProvider } from '../contexts/message/MessageProvider.js';
@@ -11,8 +13,9 @@ function Quadrats(props) {
     const { children, editor, locale, onChange, theme, value, needConfirmModal, setNeedConfirmModal } = props;
     return (React.createElement(ConfigsProvider, { theme: theme, locale: locale },
         React.createElement(Slate, { editor: editor, onChange: onChange, initialValue: value },
-            React.createElement(MessageProvider, null,
-                React.createElement(ModalProvider, { needConfirmModal: needConfirmModal, setNeedConfirmModal: setNeedConfirmModal }, children)))));
+            React.createElement(DndProvider, { backend: HTML5Backend },
+                React.createElement(MessageProvider, null,
+                    React.createElement(ModalProvider, { needConfirmModal: needConfirmModal, setNeedConfirmModal: setNeedConfirmModal }, children))))));
 }
 
 export { Quadrats as default };

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

@@ -1,8 +1,6 @@
 import { __awaiter } from 'tslib';
 import React, { useState, useEffect, useMemo, useCallback } from 'react';
 import clsx from 'clsx';
-import { HTML5Backend } from 'react-dnd-html5-backend';
-import { DndProvider } from 'react-dnd';
 import { Plus, Upload } from '@quadrats/icons';
 import { usePreviousValue, readFileAsBase64, upload } from '@quadrats/react/utils';
 import { useSlateStatic } from 'slate-react';
@@ -154,21 +152,20 @@ const CarouselModal = ({ isOpen, close, controller, initialValue = [], onConfirm
                 }, 0);
             }
         } },
-        React.createElement(DndProvider, { backend: HTML5Backend },
-            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.caption || ''}-${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`))))))));
+        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.caption || ''}-${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 };