@quadrats/react 1.1.8 → 1.1.9

package/components/src/Icon/index.tsx

@@ -1,45 +0,0 @@
-import React, { SVGProps, forwardRef } from 'react';
-import { IconDefinition } from '@quadrats/icons';
-
-const svgBaseProps: SVGProps<SVGSVGElement> = {
-  width: '1em',
-  height: '1em',
-  'aria-hidden': true,
-  focusable: false,
-};
-
-export interface IconProps extends SVGProps<SVGSVGElement> {
-  /**
-   * The `IconDefinition` will be rendered.
-   */
-  icon: IconDefinition;
-  /**
-   * Provide `fontSize` by `em` to control size of icon.
-   * @default 1
-   */
-  size?: number;
-}
-
-const Icon = forwardRef<SVGSVGElement, IconProps>(({
-  children, style, icon, size = 1, ...props
-}, ref) => {
-  if (!icon) {
-    throw new Error('The icon definition is needed.');
-  }
-
-  const { definition } = icon;
-  const svgProps: SVGProps<SVGSVGElement> = {
-    ...svgBaseProps,
-    ...definition.svg,
-    ...props,
-    style: { ...style, fontSize: `${size}em` },
-  };
-
-  return (
-    <svg {...svgProps} ref={ref}>
-      <path {...definition.path} />
-    </svg>
-  );
-});
-
-export default Icon;

package/components/src/ImageUploader/index.tsx

@@ -1,306 +0,0 @@
-import React, { Dispatch, SetStateAction, useState, useMemo, useCallback } from 'react';
-import {
-  FileUploaderGetBody,
-  FileUploaderGetHeaders,
-  FileUploaderGetUrl,
-  FileUploaderImplement,
-  ImageAccept,
-} from '@quadrats/common/file-uploader';
-import { readFileAsBase64, upload } from '@quadrats/react/utils';
-import { Trash } from '@quadrats/icons';
-import clsx from 'clsx';
-import { Plus, Image } from '@quadrats/icons';
-import BaseField, { BaseFieldProps } from '../BaseField';
-import Icon from '../Icon';
-import { Hints } from '../Hint';
-import Progress from '../Progress';
-
-export type ImageUploaderItem = {
-  file: File;
-  progress: number;
-  preview: string;
-  url: string;
-};
-
-export interface ImageUploaderProps extends Omit<BaseFieldProps, 'children'> {
-  getBody: FileUploaderGetBody;
-  getHeaders?: FileUploaderGetHeaders;
-  getUrl: FileUploaderGetUrl;
-  uploader?: FileUploaderImplement;
-  imageUploaderItem: ImageUploaderItem | null;
-  setImageUploaderItem: Dispatch<SetStateAction<ImageUploaderItem | null>>;
-  accept?: ImageAccept[];
-  ratio?: [number, number];
-  limitSize?: number;
-  disabled?: boolean;
-  onOverLimitSize?: VoidFunction;
-  onErrorAccept?: VoidFunction;
-}
-
-// TODO: i18n
-const ImageUploader = ({
-  label,
-  className,
-  getBody,
-  getHeaders,
-  getUrl,
-  uploader,
-  imageUploaderItem,
-  setImageUploaderItem,
-  width = 140,
-  accept = ['image/jpeg', 'image/jpg', 'image/png'],
-  ratio,
-  limitSize = 5,
-  disabled = false,
-  required,
-  errorMessage,
-  onOverLimitSize,
-  onErrorAccept,
-}: ImageUploaderProps) => {
-  const [isDragging, setIsDragging] = useState<boolean>(false);
-  const [isError, setIsError] = useState<boolean>(false);
-
-  const onProgress = useCallback(
-    (p: number) => {
-      setImageUploaderItem((prev) => {
-        if (prev) {
-          return {
-            ...prev,
-            progress: p,
-          };
-        }
-
-        return prev;
-      });
-    },
-    [setImageUploaderItem],
-  );
-
-  const onUpload = useCallback(
-    async (file?: File) => {
-      if (file) {
-        if (file.size > limitSize * 1024 * 1024) {
-          setIsError(true);
-          onOverLimitSize?.();
-        } else {
-          const base64 = await readFileAsBase64(file);
-
-          setImageUploaderItem(() => ({
-            file,
-            preview: base64,
-            url: '',
-            progress: 0,
-          }));
-
-          try {
-            const url = await upload({
-              file,
-              getBody,
-              getHeaders,
-              getUrl,
-              uploader,
-              onProgress,
-            });
-
-            setImageUploaderItem((prev) => {
-              if (prev) {
-                return {
-                  ...prev,
-                  preview: url,
-                  url,
-                };
-              }
-
-              return prev;
-            });
-          } catch (error) {
-            setIsError(true);
-            setImageUploaderItem(() => null);
-          }
-        }
-      }
-    },
-    [getBody, getHeaders, getUrl, limitSize, onOverLimitSize, onProgress, setImageUploaderItem, uploader],
-  );
-
-  const onSelectFile = useCallback(async () => {
-    if (!disabled && !imageUploaderItem) {
-      setIsError(false);
-
-      return new Promise<File | undefined>((resolve) => {
-        const inputEl = document.createElement('input');
-
-        if (accept) {
-          inputEl.accept = accept.join(',');
-        }
-
-        inputEl.multiple = false;
-        inputEl.type = 'file';
-
-        inputEl.addEventListener('cancel', () => {
-          resolve(undefined);
-        });
-
-        inputEl.addEventListener('change', () => {
-          const { files: fileList } = inputEl;
-
-          if (!fileList || !fileList.length) {
-            resolve(undefined);
-          } else {
-            resolve(fileList[0]);
-          }
-        });
-
-        inputEl.click();
-      });
-    }
-  }, [accept, disabled, imageUploaderItem]);
-
-  const handleDrop = useCallback(
-    async (event: React.DragEvent<HTMLDivElement>) => {
-      if (event.dataTransfer?.types?.includes('Files') && !disabled && !imageUploaderItem) {
-        event.preventDefault();
-        setIsDragging(false);
-        setIsError(false);
-
-        const files = Array.from(event.dataTransfer.files);
-        const targetFile = files[0];
-
-        if (targetFile.size > limitSize * 1024 * 1024) {
-          setIsError(true);
-          onOverLimitSize?.();
-
-          return;
-        }
-
-        if (!accept.find((a) => a === targetFile.type)) {
-          setIsError(true);
-          onErrorAccept?.();
-
-          return;
-        }
-
-        await onUpload(targetFile);
-      }
-    },
-    [accept, disabled, imageUploaderItem, limitSize, onErrorAccept, onOverLimitSize, onUpload],
-  );
-
-  const acceptText = useMemo(() => {
-    if (accept.find((a) => a === 'image/jpeg' || a === 'image/jpg') && accept.find((a) => a === 'image/png')) {
-      return 'JPG 或 PNG';
-    } else if (accept.find((a) => a === 'image/png')) {
-      return 'PNG';
-    } else if (accept.find((a) => a === 'image/jpeg' || a === 'image/jpg')) {
-      return 'JPG';
-    }
-
-    return '';
-  }, [accept]);
-
-  return (
-    <BaseField className={className} label={label} required={required} width={width} errorMessage={errorMessage}>
-      <div className="qdr-image-uploader__wrapper">
-        {imageUploaderItem ? (
-          <div
-            className="qdr-image-uploader qdr-image-uploader__previewer"
-            style={{ width, aspectRatio: ratio ? `${ratio[0]} / ${ratio[1]}` : '1 / 1' }}
-          >
-            <div className="qdr-image-uploader__image-wrapper">
-              {imageUploaderItem.progress !== 100 && <Progress percentage={imageUploaderItem.progress} />}
-              <div contentEditable={false} className={clsx('qdr-inline-toolbar', 'qdr-image-uploader__inline-toolbar')}>
-                <Icon
-                  className={clsx('qdr-inline-toolbar__icon', {
-                    'qdr-inline-toolbar__icon--disabled': disabled,
-                  })}
-                  icon={Trash}
-                  width={24}
-                  height={24}
-                  onClick={() => {
-                    if (!disabled) {
-                      setImageUploaderItem(() => null);
-                    }
-                  }}
-                />
-              </div>
-              <img
-                src={imageUploaderItem.url || imageUploaderItem.preview}
-                className="qdr-image-uploader__image"
-                style={{
-                  objectFit: ratio ? 'cover' : 'contain',
-                  aspectRatio: ratio ? `${ratio[0]} / ${ratio[1]}` : '1 / 1',
-                }}
-              />
-            </div>
-          </div>
-        ) : (
-          <div
-            className={clsx('qdr-image-uploader', {
-              'qdr-image-uploader--dragging': isDragging,
-              'qdr-image-uploader--error': isError,
-              'qdr-image-uploader--disabled': disabled,
-            })}
-            style={isDragging ? undefined : { width, aspectRatio: ratio ? `${ratio[0]} / ${ratio[1]}` : '1 / 1' }}
-            onClick={async () => {
-              const file = await onSelectFile();
-
-              await onUpload(file);
-            }}
-            onDragOver={(e) => {
-              e.preventDefault();
-
-              if (e.dataTransfer?.types?.includes('Files')) {
-                setIsDragging(true);
-                setIsError(false);
-              }
-            }}
-            onDragLeave={() => {
-              setIsDragging(false);
-              setIsError(false);
-            }}
-            onDrop={handleDrop}
-          >
-            {isError ? (
-              <>
-                <Icon icon={Image} width={24} height={24} className="qdr-image-uploader__icon" />
-                <span className="qdr-image-uploader__main-text">上傳錯誤</span>
-              </>
-            ) : (
-              <>
-                <Icon icon={Plus} width={24} height={24} className="qdr-image-uploader__icon" />
-                {isDragging ? (
-                  <div className="qdr-image-uploader__dragging-wrapper">
-                    <span className="qdr-image-uploader__main-text">點擊或拖曳檔案到此上傳</span>
-                    <span className="qdr-image-uploader__info-text">
-                      {ratio
-                        ? `僅能上傳 ${acceptText}；建議比例為 ${ratio[0]}:${ratio[1]} 且寬度至少達 2000px 以上；檔案大小不可超過 ${limitSize}MB`
-                        : `僅能上傳 ${acceptText}；檔案大小不可超過 ${limitSize}MB`}
-                    </span>
-                  </div>
-                ) : (
-                  <span className="qdr-image-uploader__main-text">上傳</span>
-                )}
-              </>
-            )}
-          </div>
-        )}
-        <Hints
-          style={{ width }}
-          hints={[
-            {
-              text: `檔案格式：限 ${acceptText}。`,
-            },
-            ratio && {
-              text: `檔案尺寸：最佳比例為 ${ratio[0]}:${ratio[1]}。建議圖片寬度達 2000px 以上，高度不限。`,
-            },
-            {
-              text: `檔案大小：不可大於 ${limitSize} MB。`,
-            },
-          ].filter((h) => !!h)}
-        />
-      </div>
-    </BaseField>
-  );
-};
-
-export default ImageUploader;

package/components/src/Input/index.tsx

@@ -1,72 +0,0 @@
-import React, { Ref, useMemo } from 'react';
-import clsx from 'clsx';
-import BaseField, { BaseFieldProps } from '../BaseField';
-
-export interface InputProps extends Omit<BaseFieldProps, 'children'> {
-  value?: string;
-  onChange?: (value: string) => void;
-  inputRef?: Ref<HTMLInputElement>;
-  placeholder?: string;
-  disabled?: boolean;
-  isError?: boolean;
-  hint?: string;
-  maxLength?: number;
-}
-
-const Input = ({
-  label,
-  className,
-  width,
-  value = '',
-  onChange,
-  inputRef,
-  placeholder,
-  disabled,
-  isError,
-  hint,
-  maxLength,
-  errorMessage,
-  required = false,
-}: InputProps) => {
-  const isLimited = useMemo(() => maxLength && value && value.length >= maxLength, [maxLength, value]);
-
-  return (
-    <BaseField className={className} label={label} required={required} width={width} errorMessage={errorMessage}>
-      <div className="qdr-input">
-        <input
-          ref={inputRef}
-          className={clsx('qdr-input__input', {
-            'qdr-input__input--error': isError,
-          })}
-          value={value}
-          onChange={(e) => {
-            onChange?.(e.target.value);
-          }}
-          type="text"
-          maxLength={maxLength}
-          placeholder={placeholder}
-          disabled={disabled}
-        />
-        {hint && (
-          <div className="qdr-input__hint-wrapper">
-            <span className="qdr-input__hint">{hint}</span>
-          </div>
-        )}
-        {maxLength && (
-          <span
-            className={clsx('qdr-input__counter', {
-              'qdr-input__counter--have-hint': hint,
-              'qdr-input__counter--limited': isLimited,
-              'qdr-input__counter--error': isError,
-              'qdr-input__counter--disabled': disabled,
-            })}
-          >
-            {`${value ? value.length : 0}/${maxLength}`}
-          </span>
-        )}
-      </div>
-    </BaseField>
-  );
-};
-
-export default Input;

package/components/src/Message/index.tsx

@@ -1,138 +0,0 @@
-import React, { FC, Key, useEffect, useState } from 'react';
-import clsx from 'clsx';
-import { ThemeProps } from '@quadrats/react/configs';
-import Icon from '../Icon';
-import { createNotifier } from '../Notifier/createNotifier';
-import { Notifier, NotifierData, NotifierConfig } from '../Notifier/typings';
-import SlideFade, { SlideFadeProps } from '../Transition/SlideFade';
-import { Info, Success, Warning, Error, IconDefinition } from '@quadrats/icons';
-
-export interface MessageConfigProps
-  extends Pick<NotifierConfig, 'duration'>,
-    Pick<
-      SlideFadeProps,
-      'onEnter' | 'onEntering' | 'onEntered' | 'onExit' | 'onExiting' | 'onExited' | 'easing' | 'direction'
-    > {}
-
-export type MessageSeverity = 'success' | 'warning' | 'error' | 'info';
-
-export interface MessageData extends Omit<NotifierData, 'onClose'>, MessageConfigProps {
-  duration?: NotifierData['duration'];
-  icon?: IconDefinition;
-  reference?: Key;
-  severity?: MessageSeverity;
-  theme: ThemeProps;
-}
-
-export type MessageType = FC<MessageData> &
-  Notifier<MessageData, MessageConfigProps> &
-  Record<
-    string,
-    (
-      message: MessageData['children'],
-      theme: ThemeProps,
-      props?: Omit<MessageData, 'children' | 'theme' | 'severity' | 'icon'>,
-    ) => Key
-  >;
-
-const Message: MessageType = ((props) => {
-  const {
-    children,
-    theme,
-    duration,
-    icon,
-    reference,
-    severity,
-    onExited: onExitedProp,
-    ...restTransitionProps
-  } = props;
-
-  const [open, setOpen] = useState(true);
-
-  useEffect(() => {
-    if (open && duration) {
-      const timer = window.setTimeout(() => {
-        setOpen(false);
-      }, duration);
-
-      return () => {
-        window.clearTimeout(timer);
-      };
-    }
-  }, [open, duration]);
-
-  const onExited: SlideFadeProps['onExited'] = (node) => {
-    if (onExitedProp) {
-      onExitedProp(node);
-    }
-
-    if (reference) Message.remove(reference);
-  };
-
-  return (
-    <SlideFade in={open} appear onExited={onExited} {...restTransitionProps}>
-      <div
-        className={clsx(
-          'qdr-message',
-          {
-            [`qdr-message--${severity}`]: !!severity,
-          },
-          theme.className,
-        )}
-        style={theme.style}
-      >
-        {icon ? <Icon className="qdr-message__icon" icon={icon} width={24} height={24} /> : null}
-        <span className="qdr-message__content">{children}</span>
-      </div>
-    </SlideFade>
-  );
-}) as MessageType;
-
-const { add, config, destroy, remove } = createNotifier<MessageData, MessageConfigProps>({
-  duration: 3000,
-  render: (message) => <Message {...message} key={undefined} />,
-  setRoot: (root) => {
-    root?.setAttribute('class', 'qdr-message__root');
-  },
-});
-
-Message.add = add;
-Message.config = config;
-Message.destroy = destroy;
-Message.remove = remove;
-
-const severities = [
-  {
-    key: 'success',
-    icon: Success,
-  },
-  {
-    key: 'warning',
-    icon: Warning,
-  },
-  {
-    key: 'error',
-    icon: Error,
-  },
-  {
-    key: 'info',
-    icon: Info,
-  },
-];
-
-const validSeverities: MessageSeverity[] = ['success', 'warning', 'error', 'info'];
-
-severities.forEach((severity) => {
-  Message[severity.key] = (message, theme, props) =>
-    Message.add({
-      ...props,
-      children: message,
-      theme,
-      severity: validSeverities.includes(severity.key as MessageSeverity)
-        ? (severity.key as MessageSeverity)
-        : undefined,
-      icon: severity.icon,
-    });
-});
-
-export default Message;