From 7bb77f7c294f131e0f9efea6e6534a0811ecbf6b Mon Sep 17 00:00:00 2001 From: rdmclin2 Date: Mon, 29 Jan 2024 17:03:29 +0800 Subject: [PATCH] =?UTF-8?q?:recycle:=20refactor:=20=E8=BF=81=E7=A7=BB=20Ti?= =?UTF-8?q?pGuide?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/TipGuide/demos/controlled.tsx | 30 ------ src/TipGuide/demos/footer.tsx | 40 -------- src/TipGuide/demos/localStorage.tsx | 65 ------------- src/TipGuide/demos/normal.tsx | 15 --- src/TipGuide/demos/offset.tsx | 11 --- src/TipGuide/index.en-US.md | 49 ---------- src/TipGuide/index.tsx | 146 ---------------------------- src/TipGuide/index.zh-CN.md | 50 ---------- src/TipGuide/style.ts | 32 ------ src/index.ts | 1 - 10 files changed, 439 deletions(-) delete mode 100644 src/TipGuide/demos/controlled.tsx delete mode 100644 src/TipGuide/demos/footer.tsx delete mode 100644 src/TipGuide/demos/localStorage.tsx delete mode 100644 src/TipGuide/demos/normal.tsx delete mode 100644 src/TipGuide/demos/offset.tsx delete mode 100644 src/TipGuide/index.en-US.md delete mode 100644 src/TipGuide/index.tsx delete mode 100644 src/TipGuide/index.zh-CN.md delete mode 100644 src/TipGuide/style.ts diff --git a/src/TipGuide/demos/controlled.tsx b/src/TipGuide/demos/controlled.tsx deleted file mode 100644 index 8291d0fe..00000000 --- a/src/TipGuide/demos/controlled.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { TipGuide } from '@ant-design/pro-editor'; - -import { Button, List, Space } from 'antd'; -import { useState } from 'react'; - -export default () => { - const [open, setOpen] = useState(true); - - return ( - - - - - - - - ); -}; diff --git a/src/TipGuide/demos/footer.tsx b/src/TipGuide/demos/footer.tsx deleted file mode 100644 index 80cd8a75..00000000 --- a/src/TipGuide/demos/footer.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { TipGuide } from '@ant-design/pro-editor'; - -import { Button, Space } from 'antd'; -import { useState } from 'react'; - -export default () => { - const [open, setOpen] = useState(true); - - return ( - { - return ( - - - - - ); - }} - title={'This Is Footer Render Demo !'} - > - - - ); -}; diff --git a/src/TipGuide/demos/localStorage.tsx b/src/TipGuide/demos/localStorage.tsx deleted file mode 100644 index cfe156c2..00000000 --- a/src/TipGuide/demos/localStorage.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import { TipGuide } from '@ant-design/pro-editor'; - -import { Button, Checkbox, List, Space, message } from 'antd'; -import { useState } from 'react'; - -export default () => { - const [messageApi, contextHolder] = message.useMessage(); - const [open, setOpen] = useState(localStorage.getItem('tip-guide-key') ? false : true); - const [checked, setChecked] = useState(true); - - return ( - - {contextHolder} - - { - if (checked) { - localStorage.setItem('tip-guide-key', `${checked}`); - } - setOpen(e); - }} - footerRender={(dom) => { - return ( - - { - setChecked(e.target.value); - }} - checked={checked} - > - 不再显示 - - {dom} - - ); - }} - > - - - - ); -}; diff --git a/src/TipGuide/demos/normal.tsx b/src/TipGuide/demos/normal.tsx deleted file mode 100644 index 4f8a51f9..00000000 --- a/src/TipGuide/demos/normal.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { TipGuide } from '@ant-design/pro-editor'; - -import { Button } from 'antd'; - -export default () => { - return ( - - - - ); -}; diff --git a/src/TipGuide/demos/offset.tsx b/src/TipGuide/demos/offset.tsx deleted file mode 100644 index 4efb034b..00000000 --- a/src/TipGuide/demos/offset.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { TipGuide } from '@ant-design/pro-editor'; - -import { Button } from 'antd'; - -export default () => { - return ( - - - - ); -}; diff --git a/src/TipGuide/index.en-US.md b/src/TipGuide/index.en-US.md deleted file mode 100644 index 32661970..00000000 --- a/src/TipGuide/index.en-US.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: TipGuide -group: Basic ---- - -# TipGuide Focus Guide - -## When to use - -Guide users' attention in simple scenarios. - -## Code Demo - -### Basic - - - -### Controlled - -Use `open` for control. - - - -### Custom Footer - - - -You can also use localStorage in business by customizing and controlling it. - - - -### Offset - -You can use `offsetY` to vertically offset the guide point. - - - -## API - -| Parameter | Description | Type | Default | -| :----------- | :----------------------------------------- | :---------------------------------------- | :------- | -| title | Guide title | `string` | - | -| placement | ToolTip position | `TooltipProps['placement']` | 'bottom' | -| offsetY | Vertical offset value | number | - | -| maxWidth | Maximum width | number | 300 | -| open | Controlled open attribute | boolean | - | -| onOpenChange | Trigger when the open attribute changes | (open: boolean) => void | - | -| defaultOpen | Default open state | boolean | true | -| footerRender | Render API for customizing the footer part | (dom: React.ReactNode) => React.ReactNode | - | diff --git a/src/TipGuide/index.tsx b/src/TipGuide/index.tsx deleted file mode 100644 index f3df439d..00000000 --- a/src/TipGuide/index.tsx +++ /dev/null @@ -1,146 +0,0 @@ -import type { TooltipProps } from 'antd'; -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 { useToken } from '../theme'; -import { useStyle } from './style'; - -export interface TipGuideProps { - /** - * 引导标题 - */ - title: string; - /** - * Tooltip 位置，默认为 bottom - */ - placement?: TooltipProps['placement']; - /** - * 纵向偏移值 - */ - offsetY?: number; - /** - * 最大宽度 - */ - maxWidth?: number; - /** - * 引导内容 - */ - children?: ReactNode; - /** - * style - */ - style?: React.CSSProperties; - /** - * 类名 - */ - className?: string; - /** - * 受控的 open 属性 - */ - open?: boolean; - /** - * 当 open 属性变化时候的触发 - */ - onOpenChange?: (open: boolean) => void; - /** - * 默认时候的打开状态 - */ - defaultOpen?: boolean; - /** - * 用于自定义 footer 部分的 render api - */ - footerRender?: (dom: React.ReactNode) => ReturnType; -} - -const TipGuide: FC = ({ - children, - placement = 'bottom', - title, - offsetY, - maxWidth = 300, - className, - style, - defaultOpen = true, - open: outOpen, - onOpenChange = () => {}, - footerRender, -}) => { - const token = useToken(); - const { styles } = useStyle(); - const [open, setOpen] = useMergedState(defaultOpen, { - value: outOpen, - onChange: onOpenChange, - }); - - const FooterDom = () => { - const defalutFooter = ( -
- -
- ); - if (footerRender) { - return footerRender(defalutFooter); - } - - return defalutFooter; - }; - return ( - - {open ? ( -
- {children} -
- -
{title}
- - - - - } - color={'blue'} - overlayStyle={{ maxWidth, zIndex: 1000, ...style }} - overlayClassName={`${styles.guide} ${className}`} - placement={placement} - arrow={{ pointAtCenter: true }} - trigger="hover" - > - - -
-
- ) : ( - <>{children} - )} - - ); -}; - -export default TipGuide; diff --git a/src/TipGuide/index.zh-CN.md b/src/TipGuide/index.zh-CN.md deleted file mode 100644 index b9618cd9..00000000 --- a/src/TipGuide/index.zh-CN.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: TipGuide 关注点引导 -atomId: TipGuide -group: 基础组件 ---- - -# TipGuide 关注点引导 - -## 何时使用 - -简单场景引导用户关注。 - -## 代码演示 - -### 基础 - - - -### 受控 - -使用 open 进行受控 - - - -### 自定义 footer - - - -你还可以通过自定义和受控的方式使用 localStorage 来在业务中使用。 - - - -### 偏移 - -可以通过 `offsetY` 将引导点进行垂直方向偏移。 - - - -## API - -| 参数 | 说明 | 类型 | 默认值 | -| :----------- | :---------------------------------- | :---------------------------------------- | :------- | -| title | 引导标题 | `string` | - | -| placement | ToolTip 位置 | `TooltipProps['placement']` | 'bottom' | -| offsetY | 纵向偏移值 | number | - | -| maxWidth | 最大宽度 | number | 300 | -| open | 受控的 open 属性 | boolean | - | -| onOpenChange | 当 open 属性变化时候的触发 | (open: boolean) => void | - | -| defaultOpen | 默认时候的打开状态 | boolean | true | -| footerRender | 用于自定义 footer 部分的 render api | (dom: React.ReactNode) => React.ReactNode | - | diff --git a/src/TipGuide/style.ts b/src/TipGuide/style.ts deleted file mode 100644 index 9fcb0ed9..00000000 --- a/src/TipGuide/style.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { createStyles } from '../theme'; - -export const useStyle = createStyles(({ css, cx, prefixCls, token }) => { - const prefix = `${prefixCls}-${token.editorPrefix}-tip-guide`; - return { - content: cx(`${prefix}-guide-content`), - guide: cx(`${prefix}-guide`), - container: cx( - prefix, - css` - position: relative; - width: fit-content; - `, - ), - footer: cx( - `${prefix}-footer`, - css` - width: 100%; - display: flex; - justify-content: end; - `, - ), - tip: cx( - `${prefix}-tip`, - css` - position: absolute; - left: 50%; - transform: translate(-50%); - `, - ), - }; -}); diff --git a/src/index.ts b/src/index.ts index d9026096..ebe57dc9 100644 --- a/src/index.ts +++ b/src/index.ts @@ -24,7 +24,6 @@ export * from './ProEditor'; export * from './Snippet'; export * from './SortableList'; export * from './SortableTree'; -export { default as TipGuide } from './TipGuide'; export * from './antd'; export * from './theme'; export * from './types';