@quadrats/react 1.1.8 → 1.1.9

package/src/core/composeHandlers.ts

@@ -1,58 +0,0 @@
-import { QuadratsReactEditor } from '..';
-import {
-  EventHandlerName,
-  EventHandlers,
-  GetEventByName,
-  Handler,
-} from './typings/handler';
-
-function createEventHandler(
-  editor: QuadratsReactEditor,
-  handlers: Handler<any>[],
-): (event: GetEventByName<any>) => void {
-  const [handler, ...restHandlers] = handlers;
-
-  return event => handler(event, editor, () => {
-    const next = restHandlers.length > 0 ? createEventHandler(editor, restHandlers) : () => {};
-
-    next(event);
-  });
-}
-
-/**
- * To compose sequential `event handlers` to single for each event types.
- */
-export function composeHandlers<H extends EventHandlerName>(
-  handlersList: {
-    [HH in H]?: Handler<HH>;
-  }[],
-): (editor: QuadratsReactEditor) => EventHandlers {
-  const handlersListRecord = handlersList.reduce(
-    (acc, handlers) => {
-      Object.entries(handlers).forEach(([key, value]) => {
-        const name = key as H;
-        const handler = value as Handler<H>;
-        const origin = acc[name] as Handler<H>[] | undefined;
-
-        if (origin) {
-          origin.push(handler);
-        } else {
-          acc[name] = [handler];
-        }
-      });
-
-      return acc;
-    },
-    {} as {
-      [HH in H]?: Handler<HH>[];
-    },
-  );
-
-  const handlersEntries = Object.entries(handlersListRecord) as [H, Handler<any>[]][];
-
-  return editor => handlersEntries.reduce((acc, [name, handlers]) => {
-    acc[name] = createEventHandler(editor, handlers);
-
-    return acc;
-  }, {} as EventHandlers);
-}

package/src/core/composeRenderElements.tsx

@@ -1,13 +0,0 @@
-import React, { JSX } from 'react';
-import { composeRenderElementsBase } from '@quadrats/react/_internal';
-import { RenderElementProps } from './typings/renderer';
-import DefaultElement from './components/DefaultElement';
-
-/**
- * To compose sequential `renderElement`s to single.
- */
-export function composeRenderElements(
-  renderElements: ((props: RenderElementProps) => JSX.Element | null | undefined)[],
-) {
-  return composeRenderElementsBase(props => <DefaultElement {...props} />, renderElements);
-}

package/src/core/composeRenderLeafs.tsx

@@ -1,11 +0,0 @@
-import React, { JSX } from 'react';
-import { composeRenderLeafsBase } from '@quadrats/react/_internal';
-import { RenderLeafProps } from './typings/renderer';
-import DefaultLeaf from './components/DefaultLeaf';
-
-/**
- * To compose sequential `renderLeaf`s or `renderMark`s to single.
- */
-export function composeRenderLeafs(renderLeafs: ((props: RenderLeafProps) => JSX.Element)[]) {
-  return composeRenderLeafsBase(props => <DefaultLeaf {...props} />, renderLeafs);
-}

package/src/core/constants.ts

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

package/src/core/contexts/composition/CompositionProvider.tsx

@@ -1,15 +0,0 @@
-import React, { ReactNode } from 'react';
-import { Path } from '@quadrats/core';
-import { CompositionContext } from './composition';
-
-export interface CompositionProviderProps {
-  compositionType: string;
-  compositionPath: Path;
-  children: ReactNode;
-}
-
-export const CompositionProvider = ({ compositionType, compositionPath, children }: CompositionProviderProps) => {
-  return (
-    <CompositionContext.Provider value={{ compositionType, compositionPath }}>{children}</CompositionContext.Provider>
-  );
-};

package/src/core/contexts/composition/composition.ts

@@ -1,16 +0,0 @@
-import { Path } from '@quadrats/core';
-import { createContext, useContext } from 'react';
-
-export interface CompositionContextValue {
-  compositionType: string;
-  compositionPath: Path;
-}
-
-export const CompositionContext = createContext<CompositionContextValue>({
-  compositionType: '',
-  compositionPath: [],
-});
-
-export function useComposition() {
-  return useContext(CompositionContext);
-}

package/src/core/contexts/message/MessageProvider.tsx

@@ -1,46 +0,0 @@
-import React, { ReactNode, useCallback, useContext } from 'react';
-import { MessageSeverity, Message } from '@quadrats/react/components';
-import { ThemeContext } from '@quadrats/react/configs';
-import { MessageContext } from './message';
-
-export interface MessageProviderProps {
-  children: ReactNode;
-}
-
-export const MessageProvider = ({ children }: MessageProviderProps) => {
-  const { props: themeProps } = useContext(ThemeContext);
-
-  const message = useCallback(
-    ({ type, content, duration }: { type?: MessageSeverity; content: string; duration?: number }) => {
-      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 <MessageContext.Provider value={{ message }}>{children}</MessageContext.Provider>;
-};

package/src/core/contexts/message/message.ts

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

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

@@ -1,256 +0,0 @@
-import React, { useState, useEffect, useCallback, useMemo } from 'react';
-import { Editor } from '@quadrats/core';
-import { Card, CardAlignment } from '@quadrats/common/card';
-import { usePreviousValue } from '@quadrats/react/utils';
-import {
-  Textarea,
-  Input,
-  Modal,
-  SegmentedControl,
-  Toggle,
-  ImageUploader,
-  ImageUploaderItem,
-} from '@quadrats/react/components';
-import { useMessage } from '../../message/message';
-
-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;
-}
-
-const options: {
-  value: CardAlignment;
-  label: string;
-}[] = [
-  {
-    value: 'leftImageRightText',
-    label: '左圖右文',
-  },
-  {
-    value: 'rightImageLeftText',
-    label: '右圖左文',
-  },
-  {
-    value: 'noImage',
-    label: '純文字顯示',
-  },
-];
-
-const emptyValues: CardModalValues = {
-  alignment: 'leftImageRightText',
-  title: '',
-  description: '',
-  remark: '',
-  linkText: '',
-  linkUrl: '',
-};
-
-// TODO: i18n
-export const CardModal = ({ isOpen, close, controller, initialValue, onConfirm: onConfirmProps }: CardModalProps) => {
-  const { message } = useMessage();
-  const [values, setValues] = useState<CardModalValues>(emptyValues);
-
-  const [imageUploaderItem, setImageUploaderItem] = useState<ImageUploaderItem | null>(null);
-  const [haveLink, setHaveLink] = useState<boolean>(true);
-  const [errors, setErrors] = useState<{ field: string; message: string }[]>([]);
-  const uploading = useMemo(() => imageUploaderItem && imageUploaderItem.progress !== 100, [imageUploaderItem]);
-  const prevIsOpen = usePreviousValue(isOpen);
-
-  useEffect(() => {
-    if (!prevIsOpen && isOpen && initialValue) {
-      setValues({
-        ...initialValue.values,
-      });
-
-      setHaveLink(initialValue.haveLink);
-
-      setImageUploaderItem(initialValue.imageItem);
-    }
-  }, [initialValue, isOpen, prevIsOpen]);
-
-  const onConfirm = useCallback(() => {
-    const errorItems: { field: string; message: string }[] = [];
-
-    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 (
-    <Modal
-      isOpen={isOpen}
-      size="medium"
-      title="建立卡片"
-      confirmText="建立卡片"
-      mainAreaClassName="qdr-card-modal__main"
-      closable={!uploading}
-      maskClosable={!uploading}
-      onClose={() => {
-        close();
-        setValues(emptyValues);
-        setHaveLink(true);
-        setImageUploaderItem(null);
-      }}
-      onConfirm={onConfirm}
-    >
-      <div className="qdr-card-modal__block">
-        <p className="qdr-card-modal__block-title">顯示設定</p>
-        <SegmentedControl
-          options={options}
-          value={values.alignment}
-          onChange={(value) => setValues((prev) => ({ ...prev, alignment: value as CardAlignment }))}
-        />
-      </div>
-      <div className="qdr-card-modal__block">
-        <p className="qdr-card-modal__block-title">基本設定</p>
-        <div className="qdr-card-modal__block-content">
-          {values.alignment !== 'noImage' && controller && (
-            <ImageUploader
-              label="圖片"
-              getBody={controller.getBody}
-              getHeaders={controller.getHeaders}
-              getUrl={controller.getUrl}
-              uploader={controller.uploader}
-              imageUploaderItem={imageUploaderItem}
-              setImageUploaderItem={setImageUploaderItem}
-              width={240}
-              accept={controller?.accept}
-              ratio={controller?.ratio}
-              limitSize={controller?.limitSize}
-              onOverLimitSize={() => {
-                message({ type: 'error', content: '圖片檔案過大，檔案需小於 2MB' });
-              }}
-              onErrorAccept={() => {
-                message({ type: 'error', content: '圖片類型錯誤' });
-              }}
-              required
-              errorMessage={errors.find((e) => e.field === 'image')?.message ?? ''}
-            />
-          )}
-          <Input
-            value={values.title}
-            className="qdr-card-modal__block-field"
-            onChange={(value) => setValues((prev) => ({ ...prev, title: value }))}
-            label="標題"
-            placeholder="請輸入標題"
-            maxLength={30}
-            required
-            errorMessage={errors.find((e) => e.field === 'title')?.message ?? ''}
-          />
-          <Textarea
-            value={values.description}
-            className="qdr-card-modal__block-field"
-            onChange={(value) => setValues((prev) => ({ ...prev, description: value }))}
-            label="簡述"
-            placeholder="請輸入簡述"
-            height={86}
-            maxLength={50}
-            required
-            errorMessage={errors.find((e) => e.field === 'description')?.message ?? ''}
-          />
-          <Input
-            value={values.remark}
-            className="qdr-card-modal__block-field"
-            onChange={(value) => setValues((prev) => ({ ...prev, remark: value }))}
-            label="備註"
-            placeholder="請輸入備註資訊"
-            maxLength={30}
-          />
-        </div>
-      </div>
-      <div className="qdr-card-modal__block">
-        <div className="qdr-card-modal__block-title">
-          <span>導連按鈕</span>
-          <div className="qdr-card-modal__toggle-wrapper">
-            <Toggle checked={haveLink} onChange={setHaveLink} />
-            <span>顯示按鈕</span>
-          </div>
-        </div>
-        {haveLink && (
-          <div className="qdr-card-modal__link-wrapper">
-            <Input
-              value={values.linkText}
-              onChange={(value) => setValues((prev) => ({ ...prev, linkText: value }))}
-              width={180}
-              label="顯示文字"
-              placeholder="請輸入顯示文字"
-              maxLength={6}
-              required
-              errorMessage={errors.find((e) => e.field === 'linkText')?.message ?? ''}
-            />
-            <Input
-              value={values.linkUrl}
-              onChange={(value) => setValues((prev) => ({ ...prev, linkUrl: value }))}
-              className="qdr-card-modal__url-field"
-              label="連結"
-              placeholder="貼上連結，如 https://..."
-              required
-              errorMessage={errors.find((e) => e.field === 'linkUrl')?.message ?? ''}
-            />
-          </div>
-        )}
-      </div>
-    </Modal>
-  );
-};

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

@@ -1,97 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-import { useDrag, useDrop } from 'react-dnd';
-import { Input, Icon, Progress } from '@quadrats/react/components';
-import { Trash, Image } from '@quadrats/icons';
-
-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;
-}
-
-const CarouselItem = ({
-  url,
-  preview,
-  progress,
-  caption,
-  index,
-  onChange,
-  onRemove,
-  swap,
-  ratio,
-  isError,
-}: CarouselItemProps) => {
-  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: { index: number }) => {
-      if (item.index !== index) {
-        swap(item.index, index);
-      }
-    },
-  }));
-
-  // TODO: i18n
-  return drop(
-    drag(
-      dragPreview(
-        <div
-          className={clsx('qdr-carousel-modal__item', {
-            'qdr-carousel-modal__item--isDragging': isDragging,
-            'qdr-carousel-modal__item--isOver': isOver,
-          })}
-        >
-          {progress !== 100 && <Progress percentage={progress} />}
-          <div contentEditable={false} className={clsx('qdr-inline-toolbar', 'qdr-carousel-modal__inline-toolbar')}>
-            <Icon className="qdr-inline-toolbar__icon" icon={Trash} width={24} height={24} onClick={onRemove} />
-          </div>
-          <div className="qdr-carousel-modal__image-wrapper">
-            {isError ? (
-              <div
-                className="qdr-carousel-modal__error-wrapper"
-                style={{
-                  aspectRatio: ratio ? `${ratio[0]} / ${ratio[1]}` : '3 /2',
-                }}
-              >
-                <Icon className="qdr-carousel-modal__error-icon" icon={Image} width={48} height={48} />
-                <p className="qdr-carousel-modal__error-text">上傳錯誤</p>
-              </div>
-            ) : (
-              <img
-                src={url || preview}
-                className="qdr-carousel-modal__image"
-                style={{
-                  objectFit: ratio ? 'cover' : 'contain',
-                  aspectRatio: ratio ? `${ratio[0]} / ${ratio[1]}` : '3 /2',
-                }}
-              />
-            )}
-          </div>
-          <div className="qdr-carousel-modal__input-wrapper">
-            <Input value={caption} onChange={onChange} placeholder="圖片說明或替代文字..." />
-          </div>
-        </div>,
-      ),
-    ),
-  );
-};
-
-export default CarouselItem;