refactor: move component into a single package (#898)

packages/component/src/ui/popper/PopoverArrow.tsx

@@ -0,0 +1,92 @@
+import { forwardRef } from 'react';
+import { styled } from '../../styles';
+import { PopperArrowProps } from './interface';
+
+export const PopperArrow = forwardRef<HTMLElement, PopperArrowProps>(
+  ({ placement }, ref) => {
+    return <StyledArrow placement={placement} ref={ref} />;
+  }
+);
+
+const getArrowStyle = (placement: PopperArrowProps['placement']) => {
+  if (placement.indexOf('bottom') === 0) {
+    return {
+      top: 0,
+      left: 0,
+      marginTop: '-0.9em',
+      width: '3em',
+      height: '1em',
+      '&::before': {
+        borderWidth: '0 1em 1em 1em',
+        borderColor: `transparent transparent #98ACBD transparent`,
+      },
+    };
+  }
+
+  if (placement.indexOf('top') === 0) {
+    return {
+      bottom: 0,
+      left: 0,
+      marginBottom: '-0.9em',
+      width: '3em',
+      height: '1em',
+      '&::before': {
+        borderWidth: '1em 1em 0 1em',
+        borderColor: `#98ACBD transparent transparent transparent`,
+      },
+    };
+  }
+  if (placement.indexOf('left') === 0) {
+    return {
+      right: 0,
+      marginRight: '-0.9em',
+      height: '3em',
+      width: '1em',
+      '&::before': {
+        borderWidth: '1em 0 1em 1em',
+        borderColor: `transparent transparent transparent #98ACBD`,
+      },
+    };
+  }
+  if (placement.indexOf('right') === 0) {
+    return {
+      left: 0,
+      marginLeft: '-0.9em',
+      height: '3em',
+      width: '1em',
+      '&::before': {
+        borderWidth: '1em 1em 1em 0',
+        borderColor: `transparent #98ACBD transparent transparent`,
+      },
+    };
+  }
+
+  return {
+    display: 'none',
+  };
+};
+
+const StyledArrow = styled('span')<{
+  placement: PopperArrowProps['placement'];
+}>(({ placement }) => {
+  return {
+    position: 'absolute',
+    fontSize: '7px',
+    width: '3em',
+    '::before': {
+      content: '""',
+      margin: 'auto',
+      display: 'block',
+      width: 0,
+      height: 0,
+      borderStyle: 'solid',
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0,
+    },
+
+    ...getArrowStyle(placement),
+  };
+});

packages/component/src/ui/popper/Popper.tsx

@@ -0,0 +1,191 @@
+import {
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+  cloneElement,
+} from 'react';
+import PopperUnstyled from '@mui/base/PopperUnstyled';
+import ClickAwayListener from '@mui/base/ClickAwayListener';
+import Grow from '@mui/material/Grow';
+
+import { styled } from '../../styles';
+
+import { PopperProps, VirtualElement } from './interface';
+import { PopperArrow } from './PopoverArrow';
+export const Popper = ({
+  children,
+  content,
+  anchorEl: propsAnchorEl,
+  placement = 'top-start',
+  defaultVisible = false,
+  visible: propsVisible,
+  trigger = 'hover',
+  pointerEnterDelay = 100,
+  pointerLeaveDelay = 100,
+  onVisibleChange,
+  popoverStyle,
+  popoverClassName,
+  anchorClassName,
+  zIndex,
+  offset = [0, 5],
+  showArrow = false,
+  popperHandlerRef,
+  onClick,
+  onClickAway,
+  ...popperProps
+}: PopperProps) => {
+  const [anchorEl, setAnchorEl] = useState<VirtualElement>();
+  const [visible, setVisible] = useState(defaultVisible);
+  const [arrowRef, setArrowRef] = useState<HTMLElement>();
+  const pointerLeaveTimer = useRef<number>();
+  const pointerEnterTimer = useRef<number>();
+
+  const visibleControlledByParent = typeof propsVisible !== 'undefined';
+  const isAnchorCustom = typeof propsAnchorEl !== 'undefined';
+
+  const hasHoverTrigger = useMemo(() => {
+    return (
+      trigger === 'hover' ||
+      (Array.isArray(trigger) && trigger.includes('hover'))
+    );
+  }, [trigger]);
+
+  const hasClickTrigger = useMemo(() => {
+    return (
+      trigger === 'click' ||
+      (Array.isArray(trigger) && trigger.includes('click'))
+    );
+  }, [trigger]);
+
+  const onPointerEnterHandler = () => {
+    if (!hasHoverTrigger || visibleControlledByParent) {
+      return;
+    }
+    window.clearTimeout(pointerLeaveTimer.current);
+
+    pointerEnterTimer.current = window.setTimeout(() => {
+      setVisible(true);
+    }, pointerEnterDelay);
+  };
+
+  const onPointerLeaveHandler = () => {
+    if (!hasHoverTrigger || visibleControlledByParent) {
+      return;
+    }
+    window.clearTimeout(pointerEnterTimer.current);
+    pointerLeaveTimer.current = window.setTimeout(() => {
+      setVisible(false);
+    }, pointerLeaveDelay);
+  };
+
+  useEffect(() => {
+    onVisibleChange?.(visible);
+  }, [visible, onVisibleChange]);
+
+  useImperativeHandle(popperHandlerRef, () => {
+    return {
+      setVisible: (visible: boolean) => {
+        !visibleControlledByParent && setVisible(visible);
+      },
+    };
+  });
+
+  return (
+    <ClickAwayListener
+      onClickAway={() => {
+        if (visibleControlledByParent) {
+          onClickAway?.();
+        } else {
+          setVisible(false);
+        }
+      }}
+    >
+      <Container>
+        {cloneElement(children, {
+          ref: (dom: HTMLDivElement) => setAnchorEl(dom),
+          onClick: (e: MouseEvent) => {
+            children.props.onClick?.(e);
+            if (!hasClickTrigger || visibleControlledByParent) {
+              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+              // @ts-ignore
+              onClick?.(e);
+              return;
+            }
+            setVisible(!visible);
+          },
+          onPointerEnter: onPointerEnterHandler,
+          onPointerLeave: onPointerLeaveHandler,
+          className: `${anchorClassName ? anchorClassName + ' ' : ''}${
+            children.props.className
+          }`,
+        })}
+        {content && (
+          <BasicStyledPopper
+            open={visibleControlledByParent ? propsVisible : visible}
+            zIndex={zIndex}
+            anchorEl={isAnchorCustom ? propsAnchorEl : anchorEl}
+            placement={placement}
+            transition
+            modifiers={[
+              {
+                name: 'offset',
+                options: {
+                  offset,
+                },
+              },
+              {
+                name: 'arrow',
+                enabled: showArrow,
+                options: {
+                  element: arrowRef,
+                },
+              },
+            ]}
+            {...popperProps}
+          >
+            {({ TransitionProps }) => (
+              <Grow {...TransitionProps}>
+                <div
+                  onPointerEnter={onPointerEnterHandler}
+                  onPointerLeave={onPointerLeaveHandler}
+                  style={popoverStyle}
+                  className={popoverClassName}
+                  onClick={() => {
+                    if (hasClickTrigger && !visibleControlledByParent) {
+                      setVisible(false);
+                    }
+                  }}
+                >
+                  {showArrow && (
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                    // @ts-ignore
+                    <PopperArrow placement={placement} ref={setArrowRef} />
+                  )}
+                  {content}
+                </div>
+              </Grow>
+            )}
+          </BasicStyledPopper>
+        )}
+      </Container>
+    </ClickAwayListener>
+  );
+};
+
+// The children of ClickAwayListener must be a DOM Node to judge whether the click is outside, use node.contains
+const Container = styled('div')({
+  display: 'contents',
+});
+
+const BasicStyledPopper = styled(PopperUnstyled, {
+  shouldForwardProp: (propName: string) =>
+    !['zIndex'].some(name => name === propName),
+})<{
+  zIndex?: number;
+}>(({ zIndex, theme }) => {
+  return {
+    zIndex: zIndex ?? theme.zIndex.popover,
+  };
+});

packages/component/src/ui/popper/index.ts

@@ -0,0 +1,2 @@
+export * from './interface';
+export * from './Popper';

packages/component/src/ui/popper/interface.ts

@@ -0,0 +1,63 @@
+import type { CSSProperties, ReactNode, Ref, ReactElement } from 'react';
+import {
+  type PopperPlacementType,
+  type PopperUnstyledProps,
+} from '@mui/base/PopperUnstyled';
+export type VirtualElement = {
+  getBoundingClientRect: () => ClientRect | DOMRect;
+  contextElement?: Element;
+};
+
+export type PopperHandler = {
+  setVisible: (visible: boolean) => void;
+};
+
+export type PopperArrowProps = {
+  placement: PopperPlacementType;
+};
+
+export type PopperProps = {
+  // Popover content
+  content?: ReactNode;
+
+  // Popover trigger
+  children: ReactElement;
+
+  // Whether the default is implicit
+  defaultVisible?: boolean;
+
+  // Used to manually control the visibility of the Popover
+  visible?: boolean;
+
+  // TODO: support focus
+  trigger?: 'hover' | 'click' | 'focus' | ('click' | 'hover' | 'focus')[];
+
+  // How long does it take for the mouse to display the Popover, in milliseconds
+  pointerEnterDelay?: number;
+
+  // How long does it take to hide the Popover after the mouse moves out, in milliseconds
+  pointerLeaveDelay?: number;
+
+  // Callback fired when the component closed or open
+  onVisibleChange?: (visible: boolean) => void;
+
+  // Popover container style
+  popoverStyle?: CSSProperties;
+
+  // Popover container class name
+  popoverClassName?: string;
+
+  // Anchor class name
+  anchorClassName?: string;
+
+  // Popover z-index
+  zIndex?: number;
+
+  offset?: [number, number];
+
+  showArrow?: boolean;
+
+  popperHandlerRef?: Ref<PopperHandler>;
+
+  onClickAway?: () => void;
+} & Omit<PopperUnstyledProps, 'open'>;