@quadrats/react 0.7.7 → 1.0.0

package/components/toggle.scss

@@ -0,0 +1,55 @@
+.qdr-toggle {
+  display: inline-block;
+  position: relative;
+  width: 48px;
+  height: 24px;
+  background-color: var(--qdr-text-disabled);
+  border-radius: 999px;
+  transition: background-color var(--qdr-duration-short) var(--qdr-easing-standard);
+  will-change: background-color;
+  box-sizing: border-box;
+
+  &__input {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    opacity: 0;
+    cursor: pointer;
+  }
+
+  &__control {
+    position: absolute;
+    content: '';
+    top: 2px;
+    left: 2px;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background-color: var(--qdr-on-primary);
+    transition: left var(--qdr-duration-short) var(--qdr-easing-standard);
+    will-change: left;
+  }
+
+  &--checked {
+    background-color: var(--qdr-primary);
+
+    &.qdr-toggle--disabled {
+      background-color: var(--qdr-primary-light);
+      cursor: not-allowed;
+    }
+
+    .qdr-toggle__control {
+      left: calc(100% - 22px);
+    }
+  }
+
+  &--disabled {
+    background-color: var(--qdr-action-disabled-bg);
+    cursor: not-allowed;
+
+    .qdr-toggle__input {
+      cursor: default;
+      pointer-events: none;
+    }
+  }
+}

package/components/tooltip.css

@@ -1 +1 @@
-.qdr-tooltip__mask{position:absolute;width:100%;top:0;left:0;z-index:20}.qdr-tooltip__popup{position:absolute;max-width:250px;overflow:hidden;overflow-wrap:break-word;box-sizing:border-box}.qdr-tooltip__popup--top{padding-bottom:10px}.qdr-tooltip__popup--right{padding-left:10px}.qdr-tooltip__popup--bottom{padding-top:10px}.qdr-tooltip__popup--left{padding-right:10px}.qdr-tooltip__content{background-color:var(--qdr-surface);border:1px solid var(--qdr-border);color:var(--qdr-text);border-radius:4px;padding:16px;font-size:13px;white-space:pre-wrap}.qdr-tooltip__arrow{position:absolute;content:"";width:10px;height:10px;background-color:var(--qdr-surface);border:1px solid var(--qdr-border);transform:translateX(-50%) translateY(-50%) rotate(45deg)}.qdr-tooltip__arrow--top{top:calc(100% - 10px);left:50%;border-top:none;border-left:none}.qdr-tooltip__arrow--bottom{left:50%;top:10px;border-bottom:none;border-right:none}.qdr-tooltip__arrow--right{left:10px;top:50%;border-top:none;border-right:none}.qdr-tooltip__arrow--left{left:calc(100% - 10px);top:50%;border-bottom:none;border-left:none}.qdr-tooltip__arrow--top-left,.qdr-tooltip__arrow--bottom-left{left:20px}.qdr-tooltip__arrow--top-right,.qdr-tooltip__arrow--bottom-right{left:calc(100% - 20px)}.qdr-tooltip__fade--enter{opacity:.01}.qdr-tooltip__fade--enter-active{opacity:1;transition:all 200ms ease-out}.qdr-tooltip__fade--exit{opacity:1}.qdr-tooltip__fade--exit-active{opacity:0;transition:all 200ms ease-in}
+.qdr-tooltip__mask{position:absolute;width:100%;top:0;left:0;z-index:20}.qdr-tooltip__popup{position:absolute;max-width:250px;overflow:hidden;overflow-wrap:break-word;box-sizing:border-box}.qdr-tooltip__popup--top{padding-bottom:10px}.qdr-tooltip__popup--right{padding-left:10px}.qdr-tooltip__popup--bottom{padding-top:10px}.qdr-tooltip__popup--left{padding-right:10px}.qdr-tooltip__content{background-color:var(--qdr-surface);border:1px solid var(--qdr-border);color:var(--qdr-text-primary);border-radius:4px;padding:16px;font-size:13px;white-space:pre-wrap}.qdr-tooltip__arrow{position:absolute;content:"";width:10px;height:10px;background-color:var(--qdr-surface);border:1px solid var(--qdr-border);transform:translateX(-50%) translateY(-50%) rotate(45deg)}.qdr-tooltip__arrow--top{top:calc(100% - 10px);left:50%;border-top:none;border-left:none}.qdr-tooltip__arrow--bottom{left:50%;top:10px;border-bottom:none;border-right:none}.qdr-tooltip__arrow--right{left:10px;top:50%;border-top:none;border-right:none}.qdr-tooltip__arrow--left{left:calc(100% - 10px);top:50%;border-bottom:none;border-left:none}.qdr-tooltip__arrow--top-left,.qdr-tooltip__arrow--bottom-left{left:20px}.qdr-tooltip__arrow--top-right,.qdr-tooltip__arrow--bottom-right{left:calc(100% - 20px)}.qdr-tooltip__fade--enter{opacity:.01}.qdr-tooltip__fade--enter-active{opacity:1;transition:all 200ms ease-out}.qdr-tooltip__fade--exit{opacity:1}.qdr-tooltip__fade--exit-active{opacity:0;transition:all 200ms ease-in}

package/components/tooltip.scss

@@ -33,7 +33,7 @@ $qdr-tooltip-placement-inverse-map: (
   &__content {
     background-color: var(--qdr-surface);
     border: 1px solid var(--qdr-border);
-    color: var(--qdr-text);
+    color: var(--qdr-text-primary);
     border-radius: 4px;
     padding: 16px;
     font-size: 13px;

package/core/components/Editable.js

@@ -1,11 +1,13 @@
 import { __rest } from 'tslib';
 import React, { useState, useCallback } from 'react';
 import { useSlate, Editable as Editable$1 } from 'slate-react';
+import { Element } from 'slate';
 import clsx from 'clsx';
 import { isAncestorEmpty, Editor } from '@quadrats/core';
 import { useLocale, useTheme } from '@quadrats/react/configs';
 import DefaultLeaf from './DefaultLeaf.js';
-import { PLACEHOLDER_KEY } from '../index.js';
+import { CompositionProvider } from '../contexts/composition/CompositionProvider.js';
+import { PLACEHOLDER_KEY } from '../constants.js';
 
 function Editable(props) {
     const locale = useLocale();
@@ -14,6 +16,8 @@ function Editable(props) {
     const editor = useSlate();
     const isEditorEmpty = isAncestorEmpty(editor);
     const [placeholderShowable, setPlaceholderShowable] = useState(isEditorEmpty);
+    const [compositionType, setCompositionType] = useState('');
+    const [compositionPath, setCompositionPath] = useState([]);
     const decorate = useCallback((entry) => {
         const result = decorateProp ? decorateProp(entry) : [];
         const [node] = entry;
@@ -28,15 +32,29 @@ function Editable(props) {
         return result;
     }, [decorateProp, isEditorEmpty]);
     const onCompositionEnd = useCallback((event) => {
+        setCompositionType('');
+        setCompositionPath([]);
         onCompositionEndProp === null || onCompositionEndProp === void 0 ? void 0 : onCompositionEndProp(event);
         setPlaceholderShowable(true);
     }, [onCompositionEndProp]);
     const onCompositionStart = useCallback((event) => {
+        if (editor.selection) {
+            const [, path] = Editor.node(editor, editor.selection);
+            const match = Editor.above(editor, {
+                at: path,
+                match: (n) => Element.isElement(n),
+                mode: 'lowest',
+            });
+            if (match) {
+                setCompositionPath(match[1]);
+                setCompositionType(match[0].type);
+            }
+        }
         onCompositionStartProp === null || onCompositionStartProp === void 0 ? void 0 : onCompositionStartProp(event);
         if (isEditorEmpty) {
             setPlaceholderShowable(false);
         }
-    }, [onCompositionStartProp, isEditorEmpty]);
+    }, [editor, onCompositionStartProp, isEditorEmpty]);
     const renderLeaf = useCallback((props) => {
         const children = renderLeafProp ? renderLeafProp(props) : React.createElement(DefaultLeaf, Object.assign({}, props));
         if (placeholderShowable && props.leaf[PLACEHOLDER_KEY]) {
@@ -46,7 +64,8 @@ function Editable(props) {
         }
         return children;
     }, [renderLeafProp, placeholder, placeholderShowable]);
-    return (React.createElement(Editable$1, Object.assign({}, slateEditableProps, { className: clsx('qdr-editable', themeProps.className, className), decorate: decorate, onCompositionStart: onCompositionStart, onCompositionEnd: onCompositionEnd, renderLeaf: renderLeaf, style: Object.assign(Object.assign({}, themeProps.style), style) })));
+    return (React.createElement(CompositionProvider, { compositionType: compositionType, compositionPath: compositionPath },
+        React.createElement(Editable$1, Object.assign({}, slateEditableProps, { className: clsx('qdr-editable', themeProps.className, className), decorate: decorate, onCompositionStart: onCompositionStart, onCompositionEnd: onCompositionEnd, renderLeaf: renderLeaf, style: Object.assign(Object.assign({}, themeProps.style), style) }))));
 }
 
 export { Editable as default };

package/core/components/Quadrats.d.ts

@@ -1,10 +1,13 @@
-import React from 'react';
+import React, { Dispatch, SetStateAction } from 'react';
 import { Slate } from 'slate-react';
 import { ConfigsProviderProps } from '@quadrats/react/configs';
+import { ConfirmModalConfig } from '../contexts/modal/modal';
 import { Descendant } from '..';
 export type QuadratsProps = Pick<Parameters<typeof Slate>[0], 'children' | 'editor'> & Omit<ConfigsProviderProps, 'children'> & {
     onChange: (value: Descendant[]) => void;
     value: Descendant[];
+    needConfirmModal?: ConfirmModalConfig | null;
+    setNeedConfirmModal?: Dispatch<SetStateAction<ConfirmModalConfig | null>>;
 };
 /**
  * Provide configs of quadrats and control the value.

package/core/components/Quadrats.js

@@ -1,14 +1,18 @@
 import React from 'react';
 import { Slate } from 'slate-react';
 import { ConfigsProvider } from '@quadrats/react/configs';
+import { ModalProvider } from '../contexts/modal/ModalProvider.js';
+import { MessageProvider } from '../contexts/message/MessageProvider.js';
 
 /**
  * Provide configs of quadrats and control the value.
  */
 function Quadrats(props) {
-    const { children, editor, locale, onChange, theme, value, } = 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 }, children)));
+        React.createElement(Slate, { editor: editor, onChange: onChange, initialValue: value },
+            React.createElement(MessageProvider, null,
+                React.createElement(ModalProvider, { needConfirmModal: needConfirmModal, setNeedConfirmModal: setNeedConfirmModal }, children)))));
 }
 
 export { Quadrats as default };

package/core/constants.d.ts

@@ -0,0 +1 @@
+export declare const PLACEHOLDER_KEY = "__quadrats-placeholder__";

package/core/constants.js

@@ -0,0 +1,3 @@
+const PLACEHOLDER_KEY = '__quadrats-placeholder__';
+
+export { PLACEHOLDER_KEY };

package/core/contexts/composition/CompositionProvider.d.ts

@@ -0,0 +1,8 @@
+import React, { ReactNode } from 'react';
+import { Path } from '@quadrats/core';
+export interface CompositionProviderProps {
+    compositionType: string;
+    compositionPath: Path;
+    children: ReactNode;
+}
+export declare const CompositionProvider: ({ compositionType, compositionPath, children }: CompositionProviderProps) => React.JSX.Element;

package/core/contexts/composition/CompositionProvider.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { CompositionContext } from './composition.js';
+
+const CompositionProvider = ({ compositionType, compositionPath, children }) => {
+    return (React.createElement(CompositionContext.Provider, { value: { compositionType, compositionPath } }, children));
+};
+
+export { CompositionProvider };

package/core/contexts/composition/composition.d.ts

@@ -0,0 +1,7 @@
+import { Path } from '@quadrats/core';
+export interface CompositionContextValue {
+    compositionType: string;
+    compositionPath: Path;
+}
+export declare const CompositionContext: import("react").Context<CompositionContextValue>;
+export declare function useComposition(): CompositionContextValue;

package/core/contexts/composition/composition.js

@@ -0,0 +1,11 @@
+import { createContext, useContext } from 'react';
+
+const CompositionContext = createContext({
+    compositionType: '',
+    compositionPath: [],
+});
+function useComposition() {
+    return useContext(CompositionContext);
+}
+
+export { CompositionContext, useComposition };

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

@@ -0,0 +1,5 @@
+import React, { ReactNode } from 'react';
+export interface MessageProviderProps {
+    children: ReactNode;
+}
+export declare const MessageProvider: ({ children }: MessageProviderProps) => React.JSX.Element;

package/core/contexts/message/MessageProvider.js

@@ -0,0 +1,35 @@
+import React, { useContext, useCallback } from 'react';
+import { Message } from '@quadrats/react/components';
+import { ThemeContext } from '@quadrats/react/configs';
+import { MessageContext } from './message.js';
+
+const MessageProvider = ({ children }) => {
+    const { props: themeProps } = useContext(ThemeContext);
+    const message = useCallback(({ type, content, duration }) => {
+        switch (type) {
+            case 'info': {
+                Message.info(content, themeProps, { duration });
+                break;
+            }
+            case 'error': {
+                Message.error(content, themeProps, { duration });
+                break;
+            }
+            case 'warning': {
+                Message.warning(content, themeProps, { duration });
+                break;
+            }
+            case 'success': {
+                Message.success(content, themeProps, { duration });
+                break;
+            }
+            default: {
+                Message.info(content, themeProps, { duration });
+                break;
+            }
+        }
+    }, [themeProps]);
+    return React.createElement(MessageContext.Provider, { value: { message } }, children);
+};
+
+export { MessageProvider };

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,103 @@
+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: '純文字顯示',
+    },
+];
+// 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({
+        alignment: 'leftImageRightText',
+        title: '',
+        description: '',
+        remark: '',
+        linkText: '',
+        linkUrl: '',
+    });
+    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 {
+            onConfirmProps({ values, imageItem: values.alignment === 'noImage' ? null : imageUploaderItem, haveLink });
+        }
+    }, [imageUploaderItem, 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();
+        }, 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,56 @@
+import React, { useState, useEffect } 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 [inputValue, setInputValue] = useState(caption);
+    useEffect(() => {
+        const timeoutId = setTimeout(() => {
+            onChange(inputValue);
+        }, 500);
+        return () => {
+            clearTimeout(timeoutId);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [inputValue]);
+    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: inputValue, onChange: setInputValue, 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;