feat(Popover): add popover (#1394)

* refactor(Popover): Move Popover to legacy/

* chore: add react-poper and @popperjs/core repos

* refactor(eslint): update eslint rule

* test(style): fix stylelint issues

* feat(Popover): update some features for popover

* fix(Popover): use useRef for popover

* fix(eslint): update some eslint issues

* fix(popover): update useRef

* fix(build): update useRef issue

* fix(role): add role for different trigger

* fix(popover): support trigger as string | string[]

* fix(style): update popover styles

* feat(popover): support new props for popover

* fix(Popover): fix some feedback issues

Co-authored-by: Zhang Rui <zhangrui@growingio.com>

.eslintrc.js

@@ -36,5 +36,6 @@ module.exports = {
     'react/static-property-placement': ['error', 'static public field'],
     '@typescript-eslint/no-unused-expressions': ['error', { allowShortCircuit: true }],
     '@typescript-eslint/explicit-module-boundary-types': ['off'],
+    'react/jsx-no-bind': ['off'],
   },
 };

package.json

@@ -38,6 +38,7 @@
   },
   "dependencies": {
     "@gio-design/table": "7.18.1-patch.1",
+    "@popperjs/core": "^2.10.2",
     "@types/react-resizable": "^1.7.3",
     "classnames": "^2.2.6",
     "date-fns": "^2.21.3",
@@ -63,6 +64,7 @@
     "react-dnd": "^11.1.3",
     "react-dnd-html5-backend": "^14.0.0",
     "react-lines-ellipsis": "^0.15.0",
+    "react-popper": "^2.2.5",
     "react-resizable": "^3.0.4",
     "react-sortable-hoc": "^2.0.0",
     "react-truncate": "^2.4.0",

src/index.ts

@@ -33,7 +33,7 @@ export {
 export { default as Page, PageProps } from './page';
 export { default as Pagination, PaginationProps } from './pagination';
 export { default as Popconfirm, PopconfirmProps } from './popconfirm';
-export { default as Popover, PopoverProps } from './popover';
+export { default as Popover, PopoverProps } from './legacy/popover';
 export { default as Progress, ProgressProps } from './progress';
 export { default as Radio, RadioGroup, RadioProps, RadioGroupProps, RadioGroupOption } from './radio';
 export { default as Sign, SignProps } from './sign';

src/legacy/popover/Popover.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { usePrefixCls } from '@gio-design/utils';
+import Tooltip from '../../tooltip';
+import getPlacements from '../../tooltip/placements';
+import { PopoverProps } from './interface';
+
+export { PopoverProps } from './interface';
+
+const Popover: React.FC<PopoverProps> = (props: PopoverProps) => {
+  const {
+    children,
+    contentArea,
+    footerArea,
+    prefixCls: customizePrefixCls,
+    subPrefixCls = 'popover',
+    arrowPointAtCenter,
+    autoAdjustOverflow,
+    ...rest
+  } = props;
+  const prefixCls = usePrefixCls(subPrefixCls, customizePrefixCls);
+
+  const popoverOverlay = () => (
+    <>
+      {contentArea && <div className={`${prefixCls}-inner-content`}>{contentArea}</div>}
+      {footerArea && <div className={`${prefixCls}-inner-footer`}>{footerArea}</div>}
+    </>
+  );
+  return (
+    <Tooltip
+      prefixCls={customizePrefixCls}
+      subPrefixCls={subPrefixCls}
+      overlay={popoverOverlay()}
+      builtinPlacements={getPlacements({ arrowPointAtCenter, autoAdjustOverflow, arrowWidth: 12 })}
+      arrowPointAtCenter={arrowPointAtCenter}
+      autoAdjustOverflow={autoAdjustOverflow}
+      {...rest}
+    >
+      {children}
+    </Tooltip>
+  );
+};
+
+export default Popover;

src/legacy/popover/demos/Popover.stories.tsx

@@ -0,0 +1,150 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react';
+import { Story, Meta } from '@storybook/react/types-6-0';
+import Docs from './PopoverPage';
+import Popover from '../index';
+import { PopoverProps } from '../interface';
+// import '../style';
+// import '../style/demo.stories.less';
+import { Checkbox, CheckboxGroup } from '../../..';
+import Link from '../../link';
+
+export default {
+  title: 'Legacy/Popover',
+  component: Popover,
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+} as Meta;
+
+const content = () => (
+  <>
+    <p className="title">广告阶段</p>
+    <CheckboxGroup>
+      <Checkbox value="1">点击</Checkbox>
+      <Checkbox value="2">到站访问</Checkbox>
+      <Checkbox value="3">到站访问率</Checkbox>
+    </CheckboxGroup>
+    <p className="title" style={{ marginTop: 32 }}>
+      用户量
+    </p>
+    <CheckboxGroup>
+      <Checkbox value="1">用户总量</Checkbox>
+      <Checkbox value="2">新增</Checkbox>
+      <Checkbox value="3">回访</Checkbox>
+    </CheckboxGroup>
+  </>
+);
+const text = () => (
+  <>
+    <input className="displayInput" />
+    <p className="desc">*此链接用于统计渠道点击数据，请用此链接替换点击跳转地址。</p>
+  </>
+);
+
+const Template: Story<PopoverProps> = (args) => {
+  const { trigger } = args;
+  const triggerText = trigger === 'click' ? 'click me' : 'hover me';
+
+  return (
+    <div className="popover-demo-box">
+      <Popover {...args}>
+        <span className="popoverSpan">{triggerText}</span>
+      </Popover>
+      <Popover
+        {...args}
+        contentArea={text()}
+        footerArea={<span className="rightButton">复制链接</span>}
+        arrowPointAtCenter={false}
+      >
+        <Link component="span">{triggerText}</Link>
+      </Popover>
+    </div>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  contentArea: content(),
+};
+
+export const ClickPopover = Template.bind({});
+ClickPopover.args = {
+  contentArea: text(),
+  footerArea: <span className="rightButton">复制链接</span>,
+  trigger: 'click',
+};
+
+const ArrowTemplate: Story<PopoverProps> = (args) => (
+  <div className="popover-demo-box">
+    <Popover {...args} arrowPointAtCenter>
+      <span className="popoverSpan">Arrow points to center / 箭头指向中心</span>
+    </Popover>
+    <Popover {...args}>
+      <span className="popoverSpan">Align edge / 边缘对齐</span>
+    </Popover>
+  </div>
+);
+
+export const Arrow = ArrowTemplate.bind({});
+Arrow.args = {
+  contentArea: content(),
+  placement: 'topLeft',
+};
+
+const PlacementTemplate: Story<PopoverProps> = (props) => (
+  <div className="popover-demo-box">
+    <div className="popover-top">
+      <Popover placement="topLeft" {...props}>
+        <span className="popoverSpan">TopLeft</span>
+      </Popover>
+      <Popover placement="top" {...props}>
+        <span className="popoverSpan">Top</span>
+      </Popover>
+      <Popover placement="topRight" {...props}>
+        <span className="popoverSpan">TopRight</span>
+      </Popover>
+    </div>
+    <div className="popover-left">
+      <Popover placement="leftTop" {...props}>
+        <span className="popoverSpan">LeftTop</span>
+      </Popover>
+      <Popover placement="left" {...props}>
+        <span className="popoverSpan">Left</span>
+      </Popover>
+      <Popover placement="leftBottom" {...props}>
+        <span className="popoverSpan">LeftBottom</span>
+      </Popover>
+    </div>
+    <div className="popover-right">
+      <Popover placement="rightTop" {...props}>
+        <span className="popoverSpan">RightTop</span>
+      </Popover>
+      <Popover placement="right" {...props}>
+        <span className="popoverSpan">Right</span>
+      </Popover>
+      <Popover placement="rightBottom" {...props}>
+        <span className="popoverSpan">RightBottom</span>
+      </Popover>
+    </div>
+    <div className="popover-buttom">
+      <Popover placement="bottomLeft" {...props}>
+        <span className="popoverSpan">BottomLeft</span>
+      </Popover>
+      <Popover placement="bottom" {...props}>
+        <span className="popoverSpan">Bottom</span>
+      </Popover>
+      <Popover placement="bottomRight" {...props}>
+        <span className="popoverSpan">BottomRight</span>
+      </Popover>
+    </div>
+  </div>
+);
+
+export const Placement = PlacementTemplate.bind({});
+Placement.args = {
+  contentArea: content(),
+  arrowPointAtCenter: true,
+};

src/legacy/popover/interface.ts

@@ -0,0 +1,13 @@
+import { TooltipProps } from '../../tooltip/interface';
+
+export type ReactRender = () => React.ReactNode;
+export interface PopoverProps extends Omit<TooltipProps, 'title' | 'tooltipLink'> {
+  /**
+   	卡片内容区域
+   */
+  contentArea: React.ReactNode | ReactRender;
+  /**
+   	卡片按钮区域
+   */
+  footerArea?: React.ReactNode | ReactRender;
+}

src/legacy/popover/style/index.less

@@ -0,0 +1,61 @@
+@import '../../../stylesheet/index.less';
+@import '../../../stylesheet/mixin/trigger.less';
+
+@popover-prefix-cls: ~'@{component-prefix}-popover';
+@popover-arrow-width: 12px;
+@distance: 6px;
+@popover-offset: 20px;
+@popover-duration: 10ms;
+
+.@{popover-prefix-cls} {
+  position: absolute;
+  z-index: @zindex-popover;
+  margin: auto;
+
+  &-hidden {
+    display: none;
+  }
+
+  &-content {
+    position: relative;
+    background-color: @color-background-popover;
+    border-radius: 4px;
+    box-shadow: @shadow-popover;
+  }
+
+  &-inner {
+    overflow: hidden;
+    &-content {
+      position: relative;
+      margin: 20px;
+      overflow: hidden;
+    }
+    &-footer {
+      position: relative;
+      margin: -4px 20px 16px;
+      overflow: hidden;
+    }
+  }
+
+  &-arrow {
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    pointer-events: none;
+    &-content {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      width: 0;
+      height: 0;
+      margin: auto;
+      border: @popover-arrow-width / 2 solid;
+      pointer-events: auto;
+    }
+  }
+  .trigger-placement(@popover-prefix-cls, @color-background-popover, @popover-arrow-width, @distance, @popover-offset);
+}
+
+.trigger-transition(@popover-prefix-cls, @popover-duration);

src/legacy/popover/style/index.ts

@@ -0,0 +1 @@
+import './index.less';