@quadrats/react 1.1.6 → 1.1.8

package/components/src/Message/index.tsx

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

package/components/src/Modal/index.tsx

@@ -0,0 +1,161 @@
+import React, { ReactNode, useContext, useRef, useEffect, useMemo } from 'react';
+import clsx from 'clsx';
+import { CSSTransition } from 'react-transition-group';
+import { useLocale, ThemeContext } from '@quadrats/react/configs';
+import { Cancel } from '@quadrats/icons';
+import Portal from '../Portal';
+import Button from '../Button';
+import Icon from '../Icon';
+
+export interface ModalProps {
+  title?: string | ReactNode;
+  className?: string;
+  closable?: boolean;
+  children: ReactNode;
+  mainAreaClassName?: string;
+  sideAreaClassName?: string;
+  mask?: boolean;
+  maskClosable?: boolean;
+  escToExit?: boolean;
+  haveFooter?: boolean;
+  sideChildren?: ReactNode;
+  size?: 'small' | 'medium' | 'large' | 'extraLarge';
+  isOpen: boolean;
+  haveCloseButton?: boolean;
+  haveConfirmButton?: boolean;
+  disabledCloseButton?: boolean;
+  disabledConfirmButton?: boolean;
+  dangerConfirmButton?: boolean;
+  closeText?: string;
+  confirmText?: string;
+  onClose: () => void;
+  onConfirm?: () => void;
+  customizedFooterElement?: ReactNode;
+}
+
+const Modal = ({
+  title,
+  className,
+  closable = false,
+  children,
+  mainAreaClassName,
+  sideAreaClassName,
+  mask = true,
+  maskClosable = true,
+  escToExit = true,
+  haveFooter = true,
+  sideChildren,
+  size = 'medium',
+  isOpen,
+  haveCloseButton = true,
+  haveConfirmButton = true,
+  disabledCloseButton = false,
+  disabledConfirmButton = false,
+  dangerConfirmButton = false,
+  closeText,
+  confirmText,
+  onClose,
+  onConfirm,
+  customizedFooterElement = <div />,
+}: ModalProps) => {
+  const locale = useLocale();
+  const nodeRef = useRef(null);
+  const { props: themeProps } = useContext(ThemeContext);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && escToExit) {
+        onClose();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [onClose, escToExit]);
+
+  const renderFooter = useMemo(
+    () => (
+      <div className="qdr-modal__footer">
+        {customizedFooterElement}
+        <div className="qdr-modal__footer__actions">
+          {haveCloseButton && (
+            <Button variant="secondary" disabled={disabledCloseButton} onClick={onClose}>
+              {closeText || locale.editor.cancel}
+            </Button>
+          )}
+          {haveConfirmButton && (
+            <Button variant="primary" danger={dangerConfirmButton} disabled={disabledConfirmButton} onClick={onConfirm}>
+              {confirmText || locale.editor.confirm}
+            </Button>
+          )}
+        </div>
+      </div>
+    ),
+    [
+      customizedFooterElement,
+      haveCloseButton,
+      disabledCloseButton,
+      dangerConfirmButton,
+      onClose,
+      closeText,
+      locale.editor.cancel,
+      locale.editor.confirm,
+      haveConfirmButton,
+      disabledConfirmButton,
+      onConfirm,
+      confirmText,
+    ],
+  );
+
+  return (
+    <Portal>
+      <div
+        className={clsx(
+          'qdr-modal',
+          {
+            'qdr-modal--opened': isOpen,
+            'qdr-modal--mask': mask,
+          },
+          themeProps.className,
+          className,
+        )}
+        style={themeProps.style}
+        onClick={maskClosable ? onClose : undefined}
+      >
+        <CSSTransition in={isOpen} nodeRef={nodeRef} timeout={250} classNames="qdr-modal__transition" unmountOnExit>
+          <div
+            ref={nodeRef}
+            className={clsx('qdr-modal__container', `qdr-modal__container--${size}`)}
+            onClick={(e) => e.stopPropagation()}
+          >
+            {title && (
+              <div className="qdr-modal__header">
+                {title}
+                {closable && (
+                  <Icon className="qdr-modal__header__cancel" icon={Cancel} width={24} height={24} onClick={onClose} />
+                )}
+              </div>
+            )}
+            <div
+              className={clsx('qdr-modal__body', {
+                'qdr-modal__body--have-footer-height': haveFooter && !sideChildren,
+              })}
+            >
+              {sideChildren && (
+                <div className="qdr-modal__side-body">
+                  <div className={clsx('qdr-modal__side', sideAreaClassName)}>{sideChildren}</div>
+                  {haveFooter && renderFooter}
+                </div>
+              )}
+              <div className={clsx('qdr-modal__main', mainAreaClassName)}>{children}</div>
+            </div>
+            {haveFooter && !sideChildren && renderFooter}
+          </div>
+        </CSSTransition>
+      </div>
+    </Portal>
+  );
+};
+
+export default Modal;

package/components/src/Notifier/NotifierManager.tsx

@@ -0,0 +1,50 @@
+import React, { useState, useImperativeHandle, Key, useMemo, RefObject, Fragment } from 'react';
+import { NotifierData, NotifierConfig, RenderNotifier } from './typings';
+
+export interface NotifierController<N extends NotifierData> {
+  add: (notifier: N & { key: Key }) => void;
+  remove: (key: Key) => void;
+}
+
+export interface NotifierManagerProps<N extends NotifierData> extends Pick<NotifierConfig, 'maxCount'> {
+  controllerRef: RefObject<NotifierController<N> | null>;
+  defaultNotifiers?: (N & { key: Key })[];
+  render: RenderNotifier<N>;
+}
+
+function NotifierManager<N extends NotifierData>(props: NotifierManagerProps<N>) {
+  const { controllerRef, defaultNotifiers = [], maxCount, render } = props;
+  const [notifiers, setNotifiers] = useState(defaultNotifiers);
+  const notifiersShouldRendered =
+    typeof maxCount === 'number' && notifiers.length > maxCount ? notifiers.slice(0, maxCount) : notifiers;
+
+  const controller: NotifierController<N> = useMemo(
+    () => ({
+      add(notifier) {
+        setNotifiers((prev) => {
+          const notifierIndex = prev.findIndex(({ key }) => key === notifier.key);
+
+          return ~notifierIndex
+            ? [...prev.slice(0, notifierIndex), notifier, ...prev.slice(notifierIndex + 1, prev.length)]
+            : [...prev, notifier];
+        });
+      },
+      remove(key: Key) {
+        setNotifiers((prev) => prev.filter((m) => m.key !== key));
+      },
+    }),
+    [],
+  );
+
+  useImperativeHandle(controllerRef, () => controller, [controller]);
+
+  return (
+    <>
+      {notifiersShouldRendered.map((notifier) => (
+        <Fragment key={notifier.key}>{render(notifier)}</Fragment>
+      ))}
+    </>
+  );
+}
+
+export default NotifierManager;

package/components/src/Notifier/createNotifier.tsx

@@ -0,0 +1,100 @@
+import React, { createRef } from 'react';
+import { createRoot, Root } from 'react-dom/client';
+import { Notifier, NotifierConfig, NotifierData, RenderNotifier } from './typings';
+import NotifierManager, { NotifierController } from './NotifierManager';
+
+export interface CreateNotifierProps<N extends NotifierData, C extends NotifierConfig> extends NotifierConfig {
+  /**
+   * Customizable config for notifier. The given values should be retrivable from your notification carrier.
+   */
+  config?: C;
+  /**
+   * The render props for notification carrier(UI component).
+   */
+  render: RenderNotifier<N>;
+  /**
+   * The method to set attributes or listeners to root.
+   */
+  setRoot?: (root: HTMLDivElement) => void;
+}
+
+/**
+ * The utility factory for `mezzanine` to create a notifier.
+ *
+ * When APIs are called, Notifier will dynamically render a new react instance by `ReactDOM.render` method.
+ */
+export function createNotifier<N extends NotifierData, C extends NotifierConfig = NotifierConfig>(
+  props: CreateNotifierProps<N, C>,
+): Notifier<N, C> {
+  const { config: configProp, render: renderNotifier, setRoot, duration, maxCount, ...restNotifierProps } = props;
+  const container = typeof document === 'undefined' ? null : document.createElement('div');
+  const root: Root | null = container ? createRoot(container) : null;
+  const controllerRef = createRef<NotifierController<N>>();
+  let currentConfig = {
+    duration,
+    maxCount,
+    ...configProp,
+  };
+
+  if (setRoot && container) {
+    setRoot(container);
+  }
+
+  return {
+    add(notifier) {
+      if (container === null) return 'NOT_SET';
+
+      document.body.appendChild(container as HTMLDivElement);
+
+      const key = notifier.key ?? Date.now();
+
+      const resolvedNotifier = {
+        ...restNotifierProps,
+        ...notifier,
+        ...currentConfig,
+        duration: notifier.duration ?? currentConfig.duration,
+        key,
+        instanceKey: key,
+      };
+
+      if (controllerRef.current) {
+        controllerRef.current.add(resolvedNotifier);
+      } else {
+        root?.render(
+          <NotifierManager<N>
+            controllerRef={controllerRef}
+            defaultNotifiers={[resolvedNotifier]}
+            maxCount={currentConfig.maxCount}
+            render={renderNotifier}
+          />,
+        );
+      }
+
+      return resolvedNotifier.key;
+    },
+    remove(key) {
+      if (controllerRef.current) {
+        controllerRef.current.remove(key);
+      }
+    },
+    destroy() {
+      if (container === null) return;
+
+      // when useEffect(() => () => { root.unmount() }, []), will be show "Rendered more hooks than during the previous render." issue.
+      root?.render(null);
+
+      if (container.parentNode) {
+        container.parentNode.removeChild(container);
+      }
+    },
+    config(config) {
+      currentConfig = {
+        ...currentConfig,
+        ...config,
+      };
+    },
+    getConfig() {
+      return currentConfig as C;
+    },
+  };
+}

package/components/src/Notifier/typings.ts

@@ -0,0 +1,33 @@
+import { Key, ReactNode } from 'react';
+
+export interface NotifierConfig {
+  /**
+   * If passed as number, the notification will be closed after the amount of time.
+   */
+  duration?: number | false;
+  maxCount?: number;
+}
+
+export interface NotifierData extends Pick<NotifierConfig, 'duration'> {
+  /**
+   * The notification content.
+   */
+  children?: ReactNode;
+  /**
+   * Close Handler
+   */
+  onClose?: (key: Key) => void;
+}
+
+export type RenderNotifier<N extends NotifierData> = (notifier: N) => ReactNode;
+
+export interface Notifier<
+  N extends NotifierData,
+  C extends NotifierConfig = NotifierConfig,
+> {
+  add: (notifier: N & { key?: Key }) => Key;
+  config: (configs: C) => void;
+  destroy: VoidFunction;
+  remove: (key: Key) => void;
+  getConfig: () => C;
+}

package/components/src/Portal/index.tsx

@@ -0,0 +1,15 @@
+import { FC } from 'react';
+import ReactDOM from 'react-dom';
+
+export interface PortalProps {
+  getContainer?: () => HTMLElement;
+  children?: React.ReactNode;
+}
+
+const Portal: FC<PortalProps> = ({ getContainer, children }) => {
+  const container = getContainer ? getContainer() : document.body;
+
+  return ReactDOM.createPortal(children, container);
+};
+
+export default Portal;

package/components/src/Progress/index.tsx

@@ -0,0 +1,49 @@
+import React, { forwardRef } from 'react';
+import clsx from 'clsx';
+
+export interface ProgressProps {
+  className?: string;
+  percentage?: number;
+}
+
+const Progress = forwardRef<HTMLDivElement, ProgressProps>(function Progress(props, ref) {
+  const { className, percentage = 0 } = props;
+
+  const size = 16;
+  const strokeWidth = 2;
+  const radius = (size - strokeWidth) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const offset = circumference * (1 - percentage / 100);
+
+  return (
+    <div ref={ref} className={clsx('qdr-progress', className)}>
+      <div className="qdr-progress__wrapper">
+        <div className="qdr-progress__spinner-wrapper">
+          <svg width={size} height={size}>
+            <circle
+              className="qdr-progress__backdrop"
+              cx={size / 2}
+              cy={size / 2}
+              r={radius}
+              strokeWidth={strokeWidth}
+              fill="none"
+            />
+            <circle
+              className="qdr-progress__track"
+              cx={size / 2}
+              cy={size / 2}
+              r={radius}
+              strokeWidth={strokeWidth}
+              fill="none"
+              strokeDasharray={circumference}
+              strokeDashoffset={offset}
+            />
+          </svg>
+        </div>
+        <p className="qdr-progress__percentage">{`${percentage}%`}</p>
+      </div>
+    </div>
+  );
+});
+
+export default Progress;

package/components/src/SegmentedControl/index.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import clsx from 'clsx';
+
+export interface SegmentedControlProps {
+  options: { value: string; label: string; disabled?: boolean }[];
+  value: string;
+  onChange: (value: string) => void;
+  disabled?: boolean;
+}
+
+const SegmentedControl = ({ options, value, onChange, disabled }: SegmentedControlProps) => {
+  return (
+    <div
+      className={clsx('qdr-segmented-control', {
+        'qdr-segmented-control--disabled': disabled || options.filter((o) => o.disabled).length === options.length,
+      })}
+    >
+      {options.map((option) => (
+        <button
+          key={option.value}
+          type="button"
+          disabled={disabled || option.disabled}
+          className={clsx('qdr-segmented-control__button', {
+            'qdr-segmented-control__button--active': value === option.value,
+          })}
+          onClick={() => {
+            onChange(option.value);
+          }}
+        >
+          {option.label}
+        </button>
+      ))}
+    </div>
+  );
+};
+
+export default SegmentedControl;

package/components/src/Textarea/index.tsx

@@ -0,0 +1,74 @@
+import React, { Ref, useMemo } from 'react';
+import clsx from 'clsx';
+import BaseField, { BaseFieldProps } from '../BaseField';
+
+export interface TextareaProps extends Omit<BaseFieldProps, 'children'> {
+  value?: string;
+  onChange?: (value: string) => void;
+  textareaRef?: Ref<HTMLTextAreaElement>;
+  placeholder?: string;
+  height?: number;
+  disabled?: boolean;
+  isError?: boolean;
+  hint?: string;
+  maxLength?: number;
+}
+
+const Textarea = ({
+  label,
+  className,
+  width,
+  value = '',
+  onChange,
+  textareaRef,
+  placeholder,
+  height,
+  disabled,
+  isError,
+  hint,
+  maxLength,
+  errorMessage,
+  required = false,
+}: TextareaProps) => {
+  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-textarea">
+        <textarea
+          ref={textareaRef}
+          style={{ height }}
+          className={clsx('qdr-textarea__textarea', {
+            'qdr-textarea__textarea--error': isError,
+          })}
+          value={value}
+          onChange={(e) => {
+            onChange?.(e.target.value);
+          }}
+          maxLength={maxLength}
+          placeholder={placeholder}
+          disabled={disabled}
+        />
+        {hint && (
+          <div className="qdr-textarea__hint-wrapper">
+            <span className="qdr-textarea__hint">{hint}</span>
+          </div>
+        )}
+        {maxLength && (
+          <span
+            className={clsx('qdr-textarea__counter', {
+              'qdr-textarea__counter--have-hint': hint,
+              'qdr-textarea__counter--limited': isLimited,
+              'qdr-textarea__counter--error': isError,
+              'qdr-textarea__counter--disabled': disabled,
+            })}
+          >
+            {`${value ? value.length : 0}/${maxLength}`}
+          </span>
+        )}
+      </div>
+    </BaseField>
+  );
+};
+
+export default Textarea;

package/components/src/Toggle/index.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import clsx from 'clsx';
+
+export interface ToggleProps {
+  onChange: (status: boolean) => void;
+  checked: boolean;
+  disabled?: boolean;
+}
+
+const Toggle = ({ onChange, checked, disabled }: ToggleProps) => {
+  return (
+    <div
+      className={clsx('qdr-toggle', {
+        'qdr-toggle--checked': checked,
+        'qdr-toggle--disabled': disabled,
+      })}
+    >
+      <div className="qdr-toggle__control" />
+      <input
+        aria-checked={checked}
+        aria-disabled={disabled}
+        checked={checked}
+        className="qdr-toggle__input"
+        disabled={disabled}
+        onChange={(e) => {
+          onChange(e.target.checked);
+        }}
+        type="checkbox"
+      />
+    </div>
+  );
+};
+
+export default Toggle;