@quadrats/react 1.1.6 → 1.1.8

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

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

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

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

@@ -0,0 +1,280 @@
+/* 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>
+  );
+};