@quadrats/react 1.1.6 → 1.1.8

package/components/src/Tooltip/calculatePosition.ts

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

package/components/src/Tooltip/index.tsx

@@ -0,0 +1,187 @@
+import React, {
+  HTMLAttributes,
+  ReactElement,
+  SetStateAction,
+  Children,
+  cloneElement,
+  useContext,
+  useRef,
+  useState,
+  useCallback,
+  useLayoutEffect,
+} from 'react';
+import { CSSTransition } from 'react-transition-group';
+import { CSSTransitionClassNames } from 'react-transition-group/CSSTransition';
+import clsx from 'clsx';
+import { composeRefs } from '@quadrats/react/utils';
+import { ThemeContext } from '@quadrats/react/configs';
+import Portal from '../Portal';
+import { TooltipTrigger, TooltipProps } from './typings';
+import { calculatePosition } from './calculatePosition';
+
+const clsPrefix = 'qdr-tooltip';
+
+const defaultTriggers: TooltipTrigger[] = ['hover'];
+const defaultGetContainer = () => document.body;
+const defaultTransitionClassNames: CSSTransitionClassNames = {
+  enter: `${clsPrefix}__fade--enter`,
+  enterActive: `${clsPrefix}__fade--enter-active`,
+  exit: `${clsPrefix}__fade--exit`,
+  exitActive: `${clsPrefix}__fade--exit-active`,
+};
+
+/**
+ * @todo
+ * To implement all placement.
+ * Extract Popup from Tooltip.
+ */
+function Tooltip({
+  children,
+  triggers = defaultTriggers,
+  popup,
+  getContainer = defaultGetContainer,
+  placement = 'top',
+  horizontalOffset = 0,
+  verticalOffset = 0,
+  transitionClassNames = defaultTransitionClassNames,
+  mouseEnterDelay = 0,
+  mouseLeaveDelay = 0.1,
+}: TooltipProps) {
+  const { props: themeProps } = useContext(ThemeContext);
+  const [visible, setVisible] = useState(false);
+  const delayTimer = useRef(NaN);
+  const nodeRef = useRef(null);
+  const clearDelayTimer = useCallback(() => {
+    if (delayTimer.current) {
+      window.clearTimeout(delayTimer.current);
+      delayTimer.current = NaN;
+    }
+  }, []);
+
+  const delaySetVisible = useCallback(
+    (setVisibleAction: SetStateAction<boolean>, delay: number) => {
+      clearDelayTimer();
+
+      if (delay) {
+        delayTimer.current = window.setTimeout(() => {
+          setVisible(setVisibleAction);
+          clearDelayTimer();
+        }, delay * 1000);
+      } else {
+        setVisible(setVisibleAction);
+      }
+    },
+    [clearDelayTimer],
+  );
+
+  const triggerRef = useRef<HTMLElement>(null);
+  const popupRef = useRef<HTMLDivElement>(null);
+  const [firstPlacement, secondPlacement] = placement.split('-');
+  const child = Children.only(children) as ReactElement;
+  const triggerProps: HTMLAttributes<HTMLElement> = {};
+  const popupProps: HTMLAttributes<HTMLDivElement> = {};
+
+  if (triggers.includes('click')) {
+    triggerProps.onClick = (event) => {
+      delaySetVisible((prevVisible) => !prevVisible, 0);
+      (child.props as any).onClick?.(event);
+    };
+  }
+
+  if (triggers.includes('hover')) {
+    popupProps.onMouseEnter = clearDelayTimer;
+    popupProps.onMouseLeave = (event) => {
+      if (!(event.relatedTarget instanceof Node && popupRef.current?.contains(event.relatedTarget))) {
+        delaySetVisible(false, mouseLeaveDelay);
+      }
+    };
+
+    triggerProps.onMouseEnter = (event) => {
+      delaySetVisible(true, mouseEnterDelay);
+      (child.props as any).onMouseEnter?.(event);
+    };
+
+    triggerProps.onMouseLeave = (event) => {
+      delaySetVisible(false, mouseLeaveDelay);
+      (child.props as any).onMouseLeave?.(event);
+    };
+  }
+
+  const trigger = cloneElement(child, { ...triggerProps, ref: composeRefs([triggerRef, (child as any).ref]) } as any);
+
+  useLayoutEffect(() => {
+    const triggerEl = triggerRef.current;
+    const popupEl = popupRef.current;
+
+    if (!(visible && triggerEl && popupEl)) {
+      return;
+    }
+
+    const { top, left } = calculatePosition(
+      {
+        placement,
+        getContainer,
+        horizontalOffset,
+        verticalOffset,
+      },
+      triggerEl,
+      popupEl,
+    );
+
+    popupEl.style.top = `${top}px`;
+    popupEl.style.left = `${left}px`;
+  }, [visible, placement, getContainer, horizontalOffset, verticalOffset]);
+
+  useLayoutEffect(() => {
+    if (!visible) {
+      return;
+    }
+
+    function clickOutSideHandler(event: MouseEvent) {
+      event.preventDefault();
+
+      const popupEl = popupRef.current;
+      const targetEl = event.target as HTMLElement;
+      const targetUnmount = targetEl.offsetParent === null;
+
+      if (!(popupEl?.contains(targetEl) || targetUnmount)) {
+        setVisible(false);
+      }
+    }
+
+    document.addEventListener('click', clickOutSideHandler);
+
+    return () => {
+      document.removeEventListener('click', clickOutSideHandler);
+    };
+  }, [visible]);
+
+  return (
+    <>
+      <Portal getContainer={getContainer}>
+        <CSSTransition nodeRef={nodeRef} in={visible} classNames={transitionClassNames} timeout={200} unmountOnExit>
+          <div ref={nodeRef} className={`${clsPrefix}__mask`}>
+            <div
+              className={clsx(themeProps.className, `${clsPrefix}__popup`, `${clsPrefix}__popup--${firstPlacement}`)}
+              ref={popupRef}
+              style={themeProps.style}
+              {...popupProps}
+            >
+              <div
+                className={clsx(`${clsPrefix}__arrow`, `${clsPrefix}__arrow--${firstPlacement}`, {
+                  [`${clsPrefix}__arrow--${placement}`]: secondPlacement,
+                })}
+              />
+              <div className={`${clsPrefix}__content`}>{popup}</div>
+            </div>
+          </div>
+        </CSSTransition>
+      </Portal>
+      {trigger}
+    </>
+  );
+}
+
+export default Tooltip;
+
+export { TooltipProps };

package/components/src/Tooltip/typings.ts

@@ -0,0 +1,40 @@
+import { ReactNode } from 'react';
+import { CSSTransitionClassNames } from 'react-transition-group/CSSTransition';
+import { PortalProps } from '../Portal';
+
+export type TooltipPlacement =
+  | 'top'
+  | 'right'
+  | 'bottom'
+  | 'left'
+  | 'top-left'
+  | 'top-right'
+  | 'right-top'
+  | 'right-bottom';
+
+export type TooltipTrigger = 'hover' | 'click';
+
+export interface TooltipProps {
+  children?: React.ReactNode;
+  triggers?: TooltipTrigger[];
+  popup?: ReactNode;
+  getContainer?: PortalProps['getContainer'];
+  /**
+   * Placement of popup.
+   */
+  placement?: TooltipPlacement;
+  /**
+   * Horizontal offset of popup between trigger.
+   */
+  horizontalOffset?: number;
+  /**
+   * Vertical offset of popup between trigger.
+   */
+  verticalOffset?: number;
+  /**
+   * classNames props of CSSTransition in react-transition-group.
+   */
+  transitionClassNames?: string | CSSTransitionClassNames;
+  mouseEnterDelay?: number;
+  mouseLeaveDelay?: number;
+}

package/components/src/Transition/SlideFade.tsx

@@ -0,0 +1,159 @@
+import React, { cloneElement, CSSProperties, forwardRef, useRef } from 'react';
+import { composeRefs } from '@quadrats/react/utils';
+import Transition, { TransitionState, TransitionImplementationProps, TransitionProps } from './Transition';
+import { useSetNodeTransition } from './useSetNodeTransition';
+import { TransitionChildren } from 'react-transition-group/Transition';
+
+export type MotionDurationType = 'shortest' | 'shorter' | 'short' | 'standard' | 'long';
+
+export const MOTION_DURATION: Readonly<Record<MotionDurationType, number>> = {
+  shortest: 150,
+  shorter: 200,
+  short: 250,
+  standard: 300,
+  long: 375,
+};
+
+export type MotionEasingType = 'standard' | 'emphasized' | 'decelerated' | 'accelerated';
+
+export const MOTION_EASING: Readonly<Record<MotionEasingType, string>> = {
+  standard: 'cubic-bezier(0.58, 0.01, 0.29, 1.01)',
+  emphasized: 'cubic-bezier(0.83, 0, 0.17, 1)',
+  decelerated: 'cubic-bezier(0, 0, 0.3, 1)',
+  accelerated: 'cubic-bezier(0.32, 0, 0.67, 0)',
+};
+
+export function reflow(node: HTMLElement): void {
+  // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+  node.scrollTop;
+}
+
+function getStyle(state: TransitionState, inProp: boolean, direction: SlideFadeDirection): CSSProperties {
+  if (state === 'entering' || state === 'entered') {
+    return {
+      opacity: 1,
+      transform: 'translate3d(0, 0, 0)',
+    };
+  }
+
+  const style: CSSProperties = {
+    opacity: 0,
+    transform: {
+      up: 'translate3d(0, 100%, 0)',
+      right: 'translate3d(-100%, 0, 0)',
+      down: 'translate3d(0, -100%, 0)',
+      left: 'translate3d(100%, 0, 0)',
+    }[direction],
+  };
+
+  if (state === 'exited' && !inProp) {
+    style.visibility = 'hidden';
+  }
+
+  return style;
+}
+
+const defaultDuration = {
+  enter: MOTION_DURATION.short,
+  exit: MOTION_DURATION.shorter,
+};
+
+const defaultEasing = {
+  enter: MOTION_EASING.decelerated,
+  exit: MOTION_EASING.accelerated,
+};
+
+export type SlideFadeDirection = 'left' | 'right' | 'up' | 'down';
+
+export interface SlideFadeProps extends TransitionImplementationProps {
+  /**
+   * The direction of child element will enter to.
+   * @default 'down'
+   */
+  direction?: SlideFadeDirection;
+}
+
+/**
+ * The react component for `mezzanine` transition slide fade.
+ */
+const SlideFade = forwardRef<HTMLElement, SlideFadeProps>(function SlideFade(props: SlideFadeProps, ref) {
+  const {
+    children,
+    direction = 'down',
+    delay = 0,
+    duration: durationProp = defaultDuration,
+    easing = defaultEasing,
+    in: inProp = false,
+    onEnter,
+    onEntered,
+    onExit,
+    onExited,
+    ...rest
+  } = props;
+
+  const duration = durationProp === 'auto' ? defaultDuration : durationProp;
+  const nodeRef = useRef<HTMLElement>(null);
+  const composedNodeRef = composeRefs([ref, nodeRef]);
+  const [setNodeTransition, resetNodeTransition] = useSetNodeTransition(
+    {
+      delay,
+      duration,
+      easing,
+      properties: ['opacity', 'transform'],
+    },
+    children?.props.style,
+  );
+
+  const transitionProps: TransitionProps = {
+    ...rest,
+    duration,
+    in: inProp,
+    nodeRef,
+    onEnter(node, isAppearing) {
+      setNodeTransition(node, 'enter');
+      reflow(node);
+
+      if (onEnter) {
+        onEnter(node, isAppearing);
+      }
+    },
+    onEntered(node, isAppearing) {
+      resetNodeTransition(node);
+
+      if (onEntered) {
+        onEntered(node, isAppearing);
+      }
+    },
+    onExit(node) {
+      setNodeTransition(node, 'exit');
+
+      if (onExit) {
+        onExit(node);
+      }
+    },
+    onExited(node) {
+      resetNodeTransition(node);
+
+      if (onExited) {
+        onExited(node);
+      }
+    },
+  };
+
+  return (
+    <Transition {...transitionProps}>
+      {children &&
+        (((state) =>
+          cloneElement(children, {
+            ...children.props,
+            ref: composedNodeRef,
+            style: {
+              ...getStyle(state, inProp, direction),
+              ...children.props.style,
+            },
+          })) as TransitionChildren)}
+    </Transition>
+  );
+});
+
+export default SlideFade;

package/components/src/Transition/Transition.tsx

@@ -0,0 +1,176 @@
+import React, { JSX, RefObject, CSSProperties, ReactElement, JSXElementConstructor, Ref } from 'react';
+import ReactTransition, {
+  TransitionStatus as TransitionState,
+  TransitionChildren,
+} from 'react-transition-group/Transition';
+
+export type NativeElementTag = keyof JSX.IntrinsicElements;
+
+export { TransitionState };
+
+export type TransitionMode = 'enter' | 'exit';
+
+export type TransitionDuration =
+  | 'auto'
+  | number
+  | {
+      [mode in TransitionMode]?: number;
+    };
+
+export type TransitionEasing =
+  | string
+  | {
+      [mode in TransitionMode]?: string;
+    };
+
+export type TransitionDelay =
+  | number
+  | {
+      [mode in TransitionMode]?: number;
+    };
+
+export type TransitionEnterHandler = (node: HTMLElement, isAppearing: boolean) => void;
+export type TransitionExitHandler = (node: HTMLElement) => void;
+
+export interface TransitionImplementationChildProps {
+  ref?: Ref<HTMLElement>;
+  style?: CSSProperties;
+}
+
+export interface TransitionProps {
+  /**
+   * A custom callback for adding custom transition end handler
+   */
+  addEndListener?: (node: HTMLElement, next: VoidFunction) => void;
+  /**
+   * Whether to perform the enter transition if `in` is true while it first mount
+   * @true
+   */
+  appear?: boolean;
+  /**
+   * A react node or a render props called with transition state
+   */
+  children?: TransitionChildren;
+  /**
+   * The duration of the transition, in milliseconds
+   */
+  duration?: TransitionDuration;
+  /**
+   * The flag to trigger toggling transition between `enter` and `exit` state
+   * @default false
+   */
+  in?: boolean;
+  /**
+   * Whether to keeping mounting the child if exited.
+   * @default false
+   */
+  keepMount?: boolean;
+  /**
+   * Whether to mount the child at the first time entering.
+   * @default true
+   */
+  lazyMount?: boolean;
+  /**
+   * A ref of DOM element need to transition
+   */
+  nodeRef: RefObject<HTMLElement | null>;
+  /**
+   * Callback fired before the `entering` state applied
+   */
+  onEnter?: TransitionEnterHandler;
+  /**
+   * Callback fired after the `entering` state applied
+   */
+  onEntering?: TransitionEnterHandler;
+  /**
+   * Callback fired after the `entered` state applied
+   */
+  onEntered?: TransitionEnterHandler;
+  /**
+   * Callback fired before the `exiting` state applied.
+   */
+  onExit?: TransitionExitHandler;
+  /**
+   * Callback fired after the `exiting` state applied.
+   */
+  onExiting?: TransitionExitHandler;
+  /**
+   * Callback fired after the `exited` state applied.
+   */
+  onExited?: TransitionExitHandler;
+}
+
+export interface TransitionImplementationProps
+  extends Omit<TransitionProps, 'addEndListener' | 'children' | 'nodeRef'> {
+  children: ReactElement<
+    TransitionImplementationChildProps,
+    NativeElementTag | JSXElementConstructor<TransitionImplementationChildProps>
+  >;
+  /**
+   * The delay of the transition, in milliseconds
+   */
+  delay?: TransitionDelay;
+  /**
+   * The timing function of the transition
+   */
+  easing?: TransitionEasing;
+}
+
+/**
+ * The react component for `mezzanine` transition.
+ */
+function Transition(props: TransitionProps) {
+  const {
+    addEndListener,
+    appear = true,
+    children,
+    duration,
+    in: inProp = false,
+    keepMount = false,
+    lazyMount = true,
+    nodeRef,
+    onEnter,
+    onEntering,
+    onEntered,
+    onExit,
+    onExiting,
+    onExited,
+  } = props;
+
+  const addNodeToCallback = <F extends (node: HTMLElement, ...args: any[]) => void>(callback?: F) => {
+    if (!callback) {
+      return;
+    }
+
+    return (...args: F extends (node: HTMLElement, ...a: infer A) => void ? A : never) => {
+      const node = nodeRef.current;
+
+      if (node) {
+        callback(node, ...args);
+      }
+    };
+  };
+
+  return (
+    <ReactTransition
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      addEndListener={addNodeToCallback(addEndListener)!}
+      appear={appear}
+      in={inProp}
+      mountOnEnter={lazyMount}
+      nodeRef={nodeRef}
+      onEnter={addNodeToCallback(onEnter)}
+      onEntering={addNodeToCallback(onEntering)}
+      onEntered={addNodeToCallback(onEntered)}
+      onExit={addNodeToCallback(onExit)}
+      onExiting={addNodeToCallback(onExiting)}
+      onExited={addNodeToCallback(onExited)}
+      timeout={duration === 'auto' ? undefined : duration}
+      unmountOnExit={!keepMount}
+    >
+      {children}
+    </ReactTransition>
+  );
+}
+
+export default Transition;

package/components/src/Transition/getTransitionStyleProps.ts

@@ -0,0 +1,48 @@
+import { TransitionDelay, TransitionDuration, TransitionEasing, TransitionMode } from './Transition';
+
+export function getTransitionDuration(
+  mode: TransitionMode,
+  duration: TransitionDuration,
+  resolveAuto?: number | ((mode: TransitionMode) => number),
+): number {
+  if (duration !== 'auto') {
+    return typeof duration === 'number' ? duration : duration[mode] || 0;
+  }
+
+  if (typeof resolveAuto === 'function') {
+    return resolveAuto(mode);
+  }
+
+  return resolveAuto ?? 0;
+}
+
+export function getTransitionTimingFunction(mode: TransitionMode, easing: TransitionEasing): string {
+  return typeof easing === 'string' ? easing : easing[mode] || 'ease';
+}
+
+export function getTransitionDelay(mode: TransitionMode, delay: TransitionDelay): number {
+  return typeof delay === 'number' ? delay : delay[mode] || 0;
+}
+
+export interface GetTransitionStyleProps {
+  delay: TransitionDelay;
+  duration: TransitionDuration;
+  easing: TransitionEasing;
+  resolveAutoDuration?: Parameters<typeof getTransitionDuration>[2];
+}
+
+export interface TransitionStyleProps {
+  delay: number;
+  duration: number;
+  timingFunction: string;
+}
+
+export function getTransitionStyleProps(mode: TransitionMode, props: GetTransitionStyleProps): TransitionStyleProps {
+  const { delay, duration, easing, resolveAutoDuration } = props;
+
+  return {
+    delay: getTransitionDelay(mode, delay),
+    duration: getTransitionDuration(mode, duration, resolveAutoDuration),
+    timingFunction: getTransitionTimingFunction(mode, easing),
+  };
+}