✨ feat: TipGuide add controlled api

ant-design · Aug 31, 2023 · a5df92a · a5df92a
1 parent 01f6325
commit a5df92a
Show file tree

Hide file tree

Showing 7 changed files with 166 additions and 69 deletions.
diff --git a/src/TipGuide/demos/controlled.tsx b/src/TipGuide/demos/controlled.tsx
@@ -0,0 +1,37 @@
+import { TipGuide } from '@ant-design/pro-editor';
+
+import { Button, List, Space } from 'antd';
+import { useState } from 'react';
+
+export default () => {
+  const guideKey = 'DEMO_KEY123';
+
+  const [open, setOpen] = useState(true);
+
+  return (
+    <Space>
+      <Button
+        onClick={() => {
+          setOpen(true);
+        }}
+      >
+        Open
+      </Button>
+      <Button
+        onClick={() => {
+          setOpen(false);
+        }}
+      >
+        Close
+      </Button>
+      <TipGuide
+        guideKey={guideKey}
+        open={open}
+        placement="right"
+        title={'现在这个 List 是一个空数据，需要你添加数据'}
+      >
+        <List />
+      </TipGuide>
+    </Space>
+  );
+};
diff --git a/src/TipGuide/demos/footer.tsx b/src/TipGuide/demos/footer.tsx
@@ -0,0 +1,42 @@
+import { TipGuide } from '@ant-design/pro-editor';
+
+import { Button, Space } from 'antd';
+import { useState } from 'react';
+
+export default () => {
+  const guideKey = 'DEMO_KEY';
+  const [open, setOpen] = useState(true);
+
+  return (
+    <TipGuide
+      guideKey={guideKey}
+      open={open}
+      placement="right"
+      footerRender={() => {
+        return (
+          <Space>
+            <Button type="primary" disabled>
+              Clear
+            </Button>
+            <Button
+              onClick={() => {
+                setOpen(false);
+              }}
+            >
+              Close
+            </Button>
+          </Space>
+        );
+      }}
+      title={'This Is Footer Render Demo !'}
+    >
+      <Button
+        onClick={() => {
+          setOpen(true);
+        }}
+      >
+        Open
+      </Button>
+    </TipGuide>
+  );
+};
diff --git a/src/TipGuide/demos/normal.tsx b/src/TipGuide/demos/normal.tsx
@@ -12,14 +12,7 @@ export default () => {
         '道可道，非常道；名可名，非常名。无名天地之始，有名万物之母。故常无欲，以观其妙；常有欲，以观其徼（jiào）。此两者同出而异名，同谓之玄，玄之又玄，众妙之门。'
       }
     >
-      <Button
-        onClick={() => {
-          localStorage.removeItem(guideKey);
-          location.reload();
-        }}
-      >
-        清理引导缓存
-      </Button>
+      <Button onClick={() => {}}>Button</Button>
     </TipGuide>
   );
 };
diff --git a/src/TipGuide/index.md b/src/TipGuide/index.md
@@ -18,6 +18,16 @@ group: 基础组件
 
 <code src="./demos/normal.tsx" ></code>
 
+### 受控
+
+使用 open 进行受控
+
+<code src="./demos/controlled.tsx" ></code>
+
+### 自定义 footer
+
+<code src="./demos/footer.tsx" ></code>
+
 ### 偏移
 
 可以通过 `offsetY` 将引导点进行垂直方向偏移。
@@ -26,10 +36,14 @@ group: 基础组件
 
 ## API
 
-| 参数      | 说明                           | 类型                        | 默认值   |
-| :-------- | :----------------------------- | :-------------------------- | :------- |
-| title     | 引导标题                       | `string`                    | -        |
-| placement | ToolTip 位置                   | `TooltipProps['placement']` | 'bottom' |
-| offsetY   | 纵向偏移值                     | number                      | -        |
-| maxWidth  | 最大宽度                       | number                      | 300      |
-| guideKey  | 最用于持久化该引导值状态, 必填 | string                      | -        |
+| 参数         | 说明                                | 类型                                      | 默认值   |
+| :----------- | :---------------------------------- | :---------------------------------------- | :------- |
+| title        | 引导标题                            | `string`                                  | -        |
+| placement    | ToolTip 位置                        | `TooltipProps['placement']`               | 'bottom' |
+| offsetY      | 纵向偏移值                          | number                                    | -        |
+| maxWidth     | 最大宽度                            | number                                    | 300      |
+| guideKey     | 最用于持久化该引导值状态, 必填      | string                                    | -        |
+| open         | 受控的 open 属性                    | boolean                                   | -        |
+| onOpenChange | 当 open 属性变化时候的触发          | (open: boolean) => void                   | -        |
+| defaultOpen  | 默认时候的打开状态                  | boolean                                   | -        |
+| footerRender | 用于自定义 footer 部分的 render api | (dom: React.ReactNode) => React.ReactNode | -        |
diff --git a/src/TipGuide/index.tsx b/src/TipGuide/index.tsx
@@ -1,12 +1,11 @@
 import type { TooltipProps } from 'antd';
-import { Badge, Button, Checkbox, Popover } from 'antd';
-import type { FC, ReactNode } from 'react';
+import { Badge, Button, Popover } from 'antd';
+import useMergedState from 'rc-util/lib/hooks/useMergedState';
+import { type FC, type ReactNode } from 'react';
 import { Flexbox } from 'react-layout-kit';
-
 import { ConfigProvider } from '../ConfigProvider';
 import { getPrefixCls, useToken } from '../theme';
 import { useStyle } from './style';
-import { useTipGuide } from './useTipGuide';
 
 export interface TipGuideProps {
   /**
@@ -45,6 +44,22 @@ export interface TipGuideProps {
    * 类名
    */
   className?: string;
+  /**
+   * 受控的 open 属性
+   */
+  open?: boolean;
+  /**
+   * 当 open 属性变化时候的触发
+   */
+  onOpenChange?: (open: boolean) => void;
+  /**
+   * 默认时候的打开状态
+   */
+  defaultOpen?: boolean;
+  /**
+   * 用于自定义 footer 部分的 render api
+   */
+  footerRender?: (dom: React.ReactNode) => React.ReactNode;
 }
 
 const TipGuide: FC<TipGuideProps> = ({
@@ -57,13 +72,39 @@ const TipGuide: FC<TipGuideProps> = ({
   className,
   style,
   guideKey,
+  defaultOpen = true,
+  open: outOpen,
+  onOpenChange = () => {},
+  footerRender,
 }) => {
   const prefixCls = getPrefixCls('tip-guide', customPrefixCls);
-
-  const { noLongerShow, toggleChecked, closeGuide, visible, checked } =
-    useTipGuide(guideKey);
   const token = useToken();
   const { styles, cx } = useStyle(prefixCls);
+  const [open, setOpen] = useMergedState<boolean>(defaultOpen, {
+    value: outOpen,
+    onChange: onOpenChange,
+  });
+
+  const FooterDom = () => {
+    const defalutFooter = (
+      <div className={styles.footer}>
+        <Button
+          type={'primary'}
+          size={'small'}
+          onClick={() => {
+            setOpen(!open);
+          }}
+        >
+          我知道了
+        </Button>
+      </div>
+    );
+    if (footerRender) {
+      return footerRender(defalutFooter);
+    }
+
+    return defalutFooter;
+  };
   return (
     <ConfigProvider
       componentToken={{
@@ -76,10 +117,8 @@ const TipGuide: FC<TipGuideProps> = ({
         Button: { colorPrimary: token['blue-7'] },
       }}
     >
-      {noLongerShow || !visible ? (
-        <>{children}</>
-      ) : (
-        <div className={styles.container}>
+      {open ? (
+        <div className={styles.container} key={guideKey}>
           {children}
           <div
             className={styles.tip}
@@ -88,25 +127,12 @@ const TipGuide: FC<TipGuideProps> = ({
             }}
           >
             <Popover
-              open={visible}
+              open={open}
               content={
                 <Flexbox className={`${prefixCls}-guide-content`} gap={24}>
                   <div>{title}</div>
-                  <Flexbox
-                    direction={'horizontal'}
-                    distribution={'space-between'}
-                    gap={8}
-                  >
-                    <Checkbox onChange={toggleChecked} checked={checked}>
-                      不再显示
-                    </Checkbox>
-                    <Button
-                      type={'primary'}
-                      size={'small'}
-                      onClick={closeGuide}
-                    >
-                      我知道了
-                    </Button>
+                  <Flexbox direction={'horizontal'} distribution={'space-between'} gap={8}>
+                    <FooterDom />
                   </Flexbox>
                 </Flexbox>
               }
@@ -121,6 +147,8 @@ const TipGuide: FC<TipGuideProps> = ({
             </Popover>
           </div>
         </div>
+      ) : (
+        <>{children}</>
       )}
     </ConfigProvider>
   );

diff --git a/src/TipGuide/style.ts b/src/TipGuide/style.ts
@@ -1,6 +1,8 @@
 import { createStyles } from '../theme';
 
 export const useStyle = createStyles(({ css, cx }, prefixCls: string) => {
+  console.log('prefixCls', prefixCls);
+
   return {
     container: cx(
       prefixCls,
@@ -9,6 +11,14 @@ export const useStyle = createStyles(({ css, cx }, prefixCls: string) => {
         width: fit-content;
       `,
     ),
+    footer: cx(
+      `${prefixCls}-footer`,
+      css`
+        width: 100%;
+        display: flex;
+        justify-content: end;
+      `,
+    ),
     tip: cx(
       `${prefixCls}-tip`,
       css`

diff --git a/src/TipGuide/useTipGuide.ts b/src/TipGuide/useTipGuide.ts