@quadrats/react 1.1.8 → 1.1.10

package/components/src/Modal/index.tsx

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

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

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

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

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

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

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

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

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

package/components/src/Tooltip/calculatePosition.ts

@@ -1,84 +0,0 @@
-import { TooltipProps } from './typings';
-
-function isContainerAsDocument(container: HTMLElement) {
-  return container === document.documentElement || container === document.body;
-}
-
-function getTargetRect(container: HTMLElement, targetEl: HTMLElement) {
-  const triggerRect = targetEl.getBoundingClientRect();
-
-  if (isContainerAsDocument(container)) {
-    return triggerRect;
-  }
-
-  const containerRect = container.getBoundingClientRect();
-
-  const { width, height } = triggerRect;
-  const top = triggerRect.top - containerRect.top;
-  const left = triggerRect.left - containerRect.left;
-
-  return {
-    width,
-    height,
-    top,
-    bottom: top + height,
-    left,
-    right: left + width,
-  };
-}
-
-function getScrollLeftAndTop(container: HTMLElement) {
-  const isAsDocument = isContainerAsDocument(container);
-
-  return {
-    scrollTop: isAsDocument ? document.documentElement.scrollTop + document.body.scrollTop : container.scrollTop,
-    scrollLeft: isAsDocument ? document.documentElement.scrollLeft + document.body.scrollLeft : container.scrollLeft,
-  };
-}
-
-export function calculatePosition(
-  props: Required<Pick<TooltipProps, 'placement' | 'getContainer' | 'horizontalOffset' | 'verticalOffset'>>,
-  triggerEl: HTMLElement,
-  popupEl: HTMLElement,
-) {
-  const {
-    placement, getContainer, horizontalOffset, verticalOffset,
-  } = props;
-  const isTop = placement.includes('top');
-  const isBottom = placement.includes('bottom');
-  const isLeft = placement.includes('left');
-  const isRight = placement.includes('right');
-
-  const container = getContainer();
-  const triggerRect = getTargetRect(container, triggerEl);
-  const { width: popupWidth, height: popupHeight } = popupEl.getBoundingClientRect();
-  let { scrollTop: top, scrollLeft: left } = getScrollLeftAndTop(container);
-
-  /**
-   * position
-   */
-  if (isLeft) {
-    left += triggerRect.left;
-  } else if (isRight) {
-    left += triggerRect.right - popupWidth;
-  } else {
-    left += triggerRect.left + (triggerRect.width - popupWidth) / 2;
-  }
-
-  if (isTop) {
-    top += triggerRect.top - popupHeight;
-  } else if (isBottom) {
-    top += triggerRect.bottom;
-  } else {
-    top += triggerRect.top + (triggerRect.height - popupHeight) / 2;
-    left += isLeft ? -popupWidth : popupWidth;
-  }
-
-  /**
-   * offset
-   */
-  top += isTop ? -verticalOffset : verticalOffset;
-  left += isLeft ? -horizontalOffset : horizontalOffset;
-
-  return { top, left };
-}