@quadrats/react 1.1.8 → 1.1.10

package/src/core/contexts/modal/CarouselModal/CarouselModal.tsx

@@ -1,280 +0,0 @@
-/* eslint-disable max-len */
-import React, { useMemo, useCallback, useState, useEffect } from 'react';
-import clsx from 'clsx';
-import { Editor } from '@quadrats/core';
-import { Plus, Upload } from '@quadrats/icons';
-import { usePreviousValue, readFileAsBase64, upload } from '@quadrats/react/utils';
-import { Carousel, CarouselFieldArrayItem } from '@quadrats/common/carousel';
-import { Hints, Button, Modal, Icon } from '@quadrats/react/components';
-import { useMessage } from '../../message/message';
-import FilesDropZone from './FilesDropZone';
-import CarouselItem from './CarouselItem';
-
-export interface CarouselModalProps {
-  isOpen: boolean;
-  close: VoidFunction;
-  controller?: Carousel<Editor>;
-  initialValue?: CarouselFieldArrayItem[];
-  onConfirm?: (items: CarouselFieldArrayItem[]) => void;
-}
-
-export const CarouselModal = ({ isOpen, close, controller, initialValue = [], onConfirm }: CarouselModalProps) => {
-  const [uploading, setUploading] = useState(false);
-  const [isDragging, setIsDragging] = useState(false);
-  const [items, setItems] = useState<CarouselFieldArrayItem[]>([]);
-  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?.accept.find((a) => a === 'image/jpeg' || a === 'image/jpg') &&
-      controller?.accept.find((a) => a === 'image/png')
-    ) {
-      return 'JPG 或 PNG';
-    } else if (controller?.accept.find((a) => a === 'image/png')) {
-      return 'PNG';
-    } else if (controller?.accept.find((a) => a === 'image/jpeg' || a === 'image/jpg')) {
-      return 'JPG';
-    }
-
-    return '';
-  }, [controller?.accept]);
-
-  const isOverMaxLength = useMemo(() => {
-    if (controller?.maxLength) {
-      return items.length >= controller.maxLength;
-    }
-
-    return false;
-  }, [controller?.maxLength, items.length]);
-
-  const disabledConfirm = useMemo(() => {
-    return items.length === 0;
-  }, [items.length]);
-
-  const uploadFiles = useCallback(
-    async (files: File[]) => {
-      if (files && controller) {
-        const currentItems: CarouselFieldArrayItem[] = [];
-
-        for (const file of files) {
-          const base64 = await readFileAsBase64(file);
-
-          currentItems.push({ file, url: '', caption: '', preview: base64, progress: 0 });
-        }
-
-        setItems((prev) => [...prev, ...currentItems]);
-
-        for (const item of currentItems) {
-          const onProgress = (p: number) => {
-            setItems((prev) => prev.map((u) => (u.file === item.file ? { ...u, progress: p } : u)));
-          };
-
-          try {
-            const url = await upload({
-              file: item.file,
-              getBody: controller?.getBody,
-              getHeaders: controller?.getHeaders,
-              getUrl: controller?.getUrl,
-              uploader: 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 ? { ...u, preview: url, url } : u));
-            });
-          } catch (error) {
-            setItems((prev) =>
-              prev.map((u) => (u.file === item.file ? { ...u, preview: '', url: '', isError: true } : u)),
-            );
-          }
-        }
-      }
-    },
-    [controller, message],
-  );
-
-  const change = useCallback((index: number, image: Omit<CarouselFieldArrayItem, 'progress' | 'preview' | 'file'>) => {
-    setItems((prev) => {
-      const updated = [...prev];
-
-      updated[index] = { ...updated[index], ...image };
-
-      return updated;
-    });
-  }, []);
-
-  const remove = useCallback((index: number) => {
-    setItems((prev) => prev.filter((_, i) => i !== index));
-  }, []);
-
-  const swap = useCallback((from: number, to: number) => {
-    setItems((prev) => {
-      const updated = [...prev];
-      const temp = updated[from];
-
-      updated[from] = updated[to];
-      updated[to] = temp;
-
-      return updated;
-    });
-  }, []);
-
-  // TODO: i18n
-
-  return (
-    <Modal
-      isOpen={isOpen}
-      title="建立輪播"
-      size="extraLarge"
-      closable={!uploading}
-      maskClosable={!uploading}
-      haveCloseButton={false}
-      confirmText="建立輪播"
-      mainAreaClassName="qdr-carousel-modal__main"
-      sideChildren={
-        <div className="qdr-carousel-modal__side">
-          <div className="qdr-carousel-modal__side__hints-wrapper">
-            <div className="qdr-carousel-modal__side__hints-title">上傳建議</div>
-            <Hints
-              hints={[
-                {
-                  text: `數量限制：至少 1 張，至多 ${controller?.maxLength} 張。`,
-                },
-                {
-                  text: `檔案格式：限 ${acceptText}。`,
-                },
-                controller?.ratio && {
-                  text: `檔案尺寸：最佳比例為 ${controller.ratio[0]}:${controller.ratio[1]}。建議圖片寬度達 2000px 以上，高度不限。`,
-                },
-                {
-                  text: `檔案大小：不可大於 ${controller?.limitSize} MB。`,
-                },
-              ].filter((h) => !!h)}
-            />
-          </div>
-          <Button
-            className="qdr-carousel-modal__side__upload"
-            variant="outlined"
-            size="large"
-            disabled={isOverMaxLength}
-            prefix={<Icon icon={Plus} width={24} height={24} />}
-            onClick={async () => {
-              const files = await controller?.selectFiles();
-
-              if (files) {
-                const correctFiles = files.filter(
-                  (f) => controller?.limitSize && f.size <= controller.limitSize * 1024 * 1024,
-                );
-
-                if (correctFiles.length !== files.length) {
-                  message({ type: 'error', content: `圖片檔案過大，檔案需小於 ${controller?.limitSize}MB` });
-                }
-
-                if (correctFiles.length > 0) {
-                  await uploadFiles(correctFiles);
-                }
-              }
-            }}
-          >
-            加入圖片
-          </Button>
-        </div>
-      }
-      customizedFooterElement={
-        <div className="qdr-carousel-modal__counter">
-          {`已上傳 ${items.filter((i) => i.progress === 100).length}/${controller?.maxLength}`}
-        </div>
-      }
-      disabledConfirmButton={disabledConfirm}
-      onClose={() => {
-        close();
-        setItems([]);
-      }}
-      onConfirm={() => {
-        if (uploading) {
-          message({ type: 'error', content: '檔案上傳中，無法建立' });
-        } else if (controller?.maxLength && items.length > controller.maxLength) {
-          message({ type: 'error', content: '超過數量上限，請刪除已存在圖片' });
-        } else {
-          close();
-          setItems([]);
-
-          setTimeout(() => {
-            onConfirm?.(items);
-          }, 0);
-        }
-      }}
-    >
-      <FilesDropZone
-        isDragging={isDragging}
-        setIsDragging={setIsDragging}
-        isOverMaxLength={isOverMaxLength}
-        controller={controller}
-        uploadFiles={uploadFiles}
-      >
-        {items.length > 0 ? (
-          <div
-            className={clsx('qdr-carousel-modal__grid', {
-              'qdr-carousel-modal__grid--isDragging': isDragging,
-            })}
-          >
-            {items.map((item, index) => (
-              <CarouselItem
-                key={`${item.url}-${item.preview}-${index}`}
-                url={item.url}
-                preview={item.preview}
-                progress={item.progress}
-                caption={item.caption}
-                index={index}
-                ratio={controller?.ratio}
-                isError={item.isError}
-                onChange={(value) => {
-                  change(index, { url: item.url, caption: value });
-                }}
-                onRemove={() => {
-                  remove(index);
-                }}
-                swap={swap}
-              />
-            ))}
-          </div>
-        ) : (
-          <div className="qdr-carousel-modal__placeholder">
-            <div className="qdr-carousel-modal__placeholder__block">
-              <div className="qdr-carousel-modal__placeholder__icon">
-                <Icon icon={Upload} width={32} height={32} />
-              </div>
-              <div className="qdr-carousel-modal__placeholder__title">拖曳檔案到此上傳</div>
-              <div className="qdr-carousel-modal__placeholder__hint">
-                {controller?.ratio
-                  ? `僅能上傳 ${acceptText}；建議比例為 ${controller.ratio[0]}:${controller.ratio[1]} 且寬度至少達 2000px 以上；檔案大小不可超過 ${controller?.limitSize}MB`
-                  : `僅能上傳 ${acceptText}；檔案大小不可超過 ${controller?.limitSize}MB`}
-              </div>
-            </div>
-          </div>
-        )}
-      </FilesDropZone>
-    </Modal>
-  );
-};

package/src/core/contexts/modal/CarouselModal/FilesDropZone.tsx

@@ -1,118 +0,0 @@
-import React, { Dispatch, SetStateAction, ReactNode, useCallback } from 'react';
-import clsx from 'clsx';
-import { Editor } from '@quadrats/core';
-import { Carousel } from '@quadrats/common/carousel';
-import { Upload } from '@quadrats/icons';
-import { Icon } from '@quadrats/react/components';
-import { useMessage } from '../../message/message';
-
-interface FilesDropZoneProps {
-  isDragging: boolean;
-  setIsDragging: Dispatch<SetStateAction<boolean>>;
-  children: ReactNode;
-  isOverMaxLength: boolean;
-  controller?: Carousel<Editor>;
-  uploadFiles: (files: File[]) => Promise<void>;
-}
-
-const FilesDropZone = ({
-  isDragging,
-  setIsDragging,
-  children,
-  isOverMaxLength,
-  controller,
-  uploadFiles,
-}: FilesDropZoneProps) => {
-  const { message } = useMessage();
-
-  const validateFile = useCallback(
-    (file: File) => {
-      if (!controller?.accept.find((a) => a === file.type)) {
-        return false;
-      }
-
-      return true;
-    },
-    [controller?.accept],
-  );
-
-  const validateFiles = useCallback(
-    (event: React.DragEvent<HTMLDivElement>) => {
-      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(
-    async (event: React.DragEvent<HTMLDivElement>) => {
-      if (event.dataTransfer?.types?.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?.limitSize && f.size <= controller.limitSize * 1024 * 1024,
-        );
-
-        if (files.find((f) => !validateFile(f))) {
-          message({ type: 'error', content: '檔案類型錯誤。' });
-        }
-
-        if (files.find((f) => controller?.limitSize && f.size > controller.limitSize * 1024 * 1024)) {
-          message({ type: 'error', content: `圖片檔案過大，檔案需小於 ${controller?.limitSize}MB` });
-        }
-
-        if (correctFiles.length > 0) {
-          await uploadFiles(correctFiles);
-        }
-      }
-    },
-    [setIsDragging, validateFiles, validateFile, controller?.limitSize, message, uploadFiles],
-  );
-
-  // TODO: i18n
-
-  return (
-    <div
-      className={clsx('qdr-carousel-modal__zone')}
-      onDragOver={(e) => {
-        e.preventDefault();
-
-        if (e.dataTransfer?.types?.includes('Files')) {
-          setIsDragging(true);
-        }
-      }}
-      onDragLeave={() => {
-        setIsDragging(false);
-      }}
-      onDrop={handleDrop}
-    >
-      {isDragging && (
-        <div className="qdr-carousel-modal__zone__wrapper">
-          <div className="qdr-carousel-modal__zone__block">
-            <Icon icon={Upload} width={24} height={24} />
-            將檔案拖曳到這裡即可上傳
-          </div>
-        </div>
-      )}
-      {children}
-    </div>
-  );
-};
-
-export default FilesDropZone;

package/src/core/contexts/modal/ConfirmModal/ConfirmModal.tsx

@@ -1,72 +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';
-
-export interface ConfirmModalProps {
-  isOpen: boolean;
-  close: VoidFunction;
-  title: string;
-  content: string;
-  confirmText: string;
-  onConfirm?: () => void;
-  haveFooter?: boolean;
-  mask?: boolean;
-  maskClosable?: boolean;
-  escToExit?: boolean;
-}
-
-export const ConfirmModal = ({
-  isOpen,
-  title,
-  content,
-  confirmText,
-  close,
-  onConfirm,
-  haveFooter = true,
-  mask,
-  maskClosable,
-  escToExit,
-}: ConfirmModalProps) => {
-  const locale = useLocale();
-
-  return (
-    <Modal
-      isOpen={isOpen}
-      className="qdr-confirm-modal"
-      size="small"
-      mask={mask}
-      maskClosable={maskClosable}
-      escToExit={escToExit}
-      onClose={() => {
-        close();
-      }}
-      haveFooter={false}
-    >
-      <div className="qdr-confirm-modal__container">
-        <Icon icon={Warning} width={28} height={28} className="qdr-confirm-modal__icon" />
-        <div className="qdr-confirm-modal__body">
-          <div className="qdr-confirm-modal__title">{title}</div>
-          <div className="qdr-confirm-modal__content">{content}</div>
-        </div>
-      </div>
-      {haveFooter && (
-        <div className="qdr-confirm-modal__footer">
-          <Button variant="secondary" onClick={close}>
-            {locale.editor.cancel}
-          </Button>
-          <Button
-            variant="primary"
-            danger
-            onClick={() => {
-              close();
-              onConfirm?.();
-            }}
-          >
-            {confirmText || locale.editor.confirm}
-          </Button>
-        </div>
-      )}
-    </Modal>
-  );
-};

package/src/core/contexts/modal/EmbedModal/EmbedModal.tsx

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

package/src/core/contexts/modal/ModalProvider.tsx

@@ -1,114 +0,0 @@
-import React, { Dispatch, SetStateAction, ReactNode, useCallback, useState, useEffect } from 'react';
-import { EmbedModal } from './EmbedModal/EmbedModal';
-import { CarouselModal } from './CarouselModal/CarouselModal';
-import { CardModal } from './CardModal/CardModal';
-import { ConfirmModal } from './ConfirmModal/ConfirmModal';
-import {
-  ModalContext,
-  ModalName,
-  EmbedModalConfig,
-  CarouselModalConfig,
-  CardModalConfig,
-  ConfirmModalConfig,
-} from './modal';
-
-export interface ModalProviderProps {
-  children: ReactNode;
-  needConfirmModal?: ConfirmModalConfig | null;
-  setNeedConfirmModal?: Dispatch<SetStateAction<ConfirmModalConfig | null>>;
-}
-
-export const ModalProvider = ({ children, needConfirmModal, setNeedConfirmModal }: ModalProviderProps) => {
-  const [modalName, setModalName] = useState<ModalName>('');
-  const [isModalClosed, setIsModalClosed] = useState<boolean>(false);
-  const [embedModalConfig, setEmbedModalConfig] = useState<EmbedModalConfig | null>(null);
-  const [carouselModalConfig, setCarouselModalConfig] = useState<CarouselModalConfig | null>(null);
-  const [cardModalConfig, setCardModalConfig] = useState<CardModalConfig | null>(null);
-  const [confirmModalConfig, setConfirmModalConfig] = useState<ConfirmModalConfig | null>(null);
-
-  const close = useCallback(() => {
-    setModalName('');
-    setIsModalClosed(true);
-
-    if (needConfirmModal) {
-      setNeedConfirmModal?.(null);
-    }
-  }, [needConfirmModal, setNeedConfirmModal]);
-
-  useEffect(() => {
-    if (needConfirmModal) {
-      setModalName('confirm-modal');
-      setConfirmModalConfig(needConfirmModal);
-    }
-  }, [needConfirmModal]);
-
-  return (
-    <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}
-      <EmbedModal
-        isOpen={modalName === 'embed-modal'}
-        close={close}
-        placeholder={embedModalConfig?.placeholder || ''}
-        confirmText={embedModalConfig?.confirmText || ''}
-        hint={embedModalConfig?.hint || ''}
-        type={embedModalConfig?.type || 'input'}
-        onConfirm={(value) => {
-          embedModalConfig?.onConfirm?.(value);
-        }}
-      />
-      <CarouselModal
-        isOpen={modalName === 'carousel-modal'}
-        close={close}
-        controller={carouselModalConfig?.controller}
-        initialValue={carouselModalConfig?.initialValue}
-        onConfirm={carouselModalConfig?.onConfirm}
-      />
-      <CardModal
-        isOpen={modalName === 'card-modal'}
-        close={close}
-        controller={cardModalConfig?.controller}
-        initialValue={cardModalConfig?.initialValue}
-        onConfirm={({ values, imageItem, haveLink }) => {
-          cardModalConfig?.onConfirm?.({
-            values,
-            imageItem,
-            haveLink,
-          });
-        }}
-      />
-      <ConfirmModal
-        isOpen={modalName === 'confirm-modal'}
-        close={close}
-        title={confirmModalConfig?.title ?? ''}
-        content={confirmModalConfig?.content ?? ''}
-        confirmText={confirmModalConfig?.confirmText ?? ''}
-        onConfirm={confirmModalConfig?.onConfirm}
-        haveFooter={confirmModalConfig?.haveFooter}
-        mask={confirmModalConfig?.mask}
-        maskClosable={confirmModalConfig?.maskClosable}
-        escToExit={confirmModalConfig?.escToExit}
-      />
-    </ModalContext.Provider>
-  );
-};

package/src/core/contexts/modal/modal.ts

@@ -1,36 +0,0 @@
-import { createContext, useContext, Dispatch, SetStateAction } from 'react';
-import { EmbedModalProps } from './EmbedModal/EmbedModal';
-import { CarouselModalProps } from './CarouselModal/CarouselModal';
-import { CardModalProps } from './CardModal/CardModal';
-import { ConfirmModalProps } from './ConfirmModal/ConfirmModal';
-
-export type ModalName = 'embed-modal' | 'carousel-modal' | 'card-modal' | 'confirm-modal' | '';
-
-export interface EmbedModalConfig extends Omit<EmbedModalProps, 'isOpen' | 'close'> {}
-export interface CarouselModalConfig extends Omit<CarouselModalProps, 'isOpen' | 'close'> {}
-export interface CardModalConfig extends Omit<CardModalProps, 'isOpen' | 'close'> {}
-export interface ConfirmModalConfig extends Omit<ConfirmModalProps, 'isOpen' | 'close'> {}
-
-export interface ModalContextValue {
-  isModalClosed: boolean;
-  setIsModalClosed: Dispatch<SetStateAction<boolean>>;
-
-  setEmbedModalConfig: (config: EmbedModalConfig) => void;
-  setCarouselModalConfig: (config: CarouselModalConfig) => void;
-  setCardModalConfig: (config: CardModalConfig) => void;
-  setConfirmModalConfig: (config: ConfirmModalConfig) => void;
-}
-
-export const ModalContext = createContext<ModalContextValue>({
-  isModalClosed: false,
-  setIsModalClosed: () => {},
-
-  setEmbedModalConfig: () => {},
-  setCarouselModalConfig: () => {},
-  setCardModalConfig: () => {},
-  setConfirmModalConfig: () => {},
-});
-
-export function useModal() {
-  return useContext(ModalContext);
-}

package/src/core/createReactEditor.ts

@@ -1,7 +0,0 @@
-import { ReactEditor, withReact } from 'slate-react';
-import { createEditor } from '@quadrats/core';
-import { QuadratsReactEditor } from '..';
-
-export function createReactEditor() {
-  return withReact(createEditor() as unknown as ReactEditor) as QuadratsReactEditor;
-}

package/src/core/createRenderElement.ts

@@ -1,6 +0,0 @@
-import { createRenderElementBase } from '@quadrats/react/_internal';
-import { CreateRenderElementOptions, RenderElementProps } from './typings/renderer';
-
-export function createRenderElement<P extends RenderElementProps>(options: CreateRenderElementOptions<P>) {
-  return createRenderElementBase<P, RenderElementProps>(options);
-}