From d8dab224cae1f3fe2f849075797151b0430a28b5 Mon Sep 17 00:00:00 2001 From: YuanHongbo <782242184@qq.com> Date: Thu, 29 Feb 2024 13:48:50 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=20=E6=8C=89=E9=92=AE?= =?UTF-8?q?=E5=88=97=E8=A1=A8=20ButtonList?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/meta/src/ButtonList/ButtonList.tsx | 79 ++++++++++++++++++ packages/meta/src/ButtonList/index.less | 14 ++++ packages/meta/src/ButtonList/index.md | 90 +++++++++++++++++++++ packages/meta/src/ButtonList/index.tsx | 4 + packages/meta/src/index.tsx | 2 +- 5 files changed, 188 insertions(+), 1 deletion(-) create mode 100644 packages/meta/src/ButtonList/ButtonList.tsx create mode 100644 packages/meta/src/ButtonList/index.less create mode 100644 packages/meta/src/ButtonList/index.md create mode 100644 packages/meta/src/ButtonList/index.tsx diff --git a/packages/meta/src/ButtonList/ButtonList.tsx b/packages/meta/src/ButtonList/ButtonList.tsx new file mode 100644 index 0000000..f5e7dad --- /dev/null +++ b/packages/meta/src/ButtonList/ButtonList.tsx @@ -0,0 +1,79 @@ +import React, {useState ,useMemo ,ReactNode} from 'react'; +import './index.less'; +import { Button, Col, Dropdown, Row } from 'antd/es'; +import { Gutter } from '../grid/row'; + +type ButtonItem = { + key: string; + text: ReactNode; + onClick: () => void; + children?: Array; + // 用于排序 + weight: number; + icon?: ReactNode + className?: string; +}; + +type Props = { + buttons: Array + customButton?: ButtonItem; + gutter?: Gutter; +}; + +const componentName = 'zhst-button-list'; + +const ButtonList: React.FC = (Props) => { + const { buttons, customButton ,gutter} = Props + const [activeKey, setActiveKey] = useState(null); + + + const sortedButtons = useMemo(() => { + let buttonList=[...buttons] + + if (customButton) { + buttonList = [...buttons,customButton] + } + + return buttonList.sort((a, b) => a.weight - b.weight); + }, [buttons, customButton]); + + const handleButtonClick = (key: string, item: ButtonItem) => { + setActiveKey(activeKey === key ? null : key); + if (!item.children ) { + item.onClick(); + } + }; + + return ( +
+ + {sortedButtons.map((item) => ( + + {item.children ? ( + ({ + key: child.key, + label: {child.text}, + onClick: () => child.onClick(), + })), + }} + open={activeKey === item.key} + onOpenChange={(visible:boolean) => { + if (!visible) setActiveKey(null); + }} + trigger={['click']} + > + + + ) : ( + + )} + + ))} + +
+ ); +}; + +export default ButtonList; \ No newline at end of file diff --git a/packages/meta/src/ButtonList/index.less b/packages/meta/src/ButtonList/index.less new file mode 100644 index 0000000..a0eae06 --- /dev/null +++ b/packages/meta/src/ButtonList/index.less @@ -0,0 +1,14 @@ + + + + +.zhst-button-list { + .ant-btn-text:hover{ + background: none !important; + color: #247fdb !important; + } +} + + + + diff --git a/packages/meta/src/ButtonList/index.md b/packages/meta/src/ButtonList/index.md new file mode 100644 index 0000000..13e4592 --- /dev/null +++ b/packages/meta/src/ButtonList/index.md @@ -0,0 +1,90 @@ +--- +group: 通用 +category: Components +subtitle: 按钮列表 +title: ButtonList 按钮列表组件 +--- + +# ButtonList 按钮列表组件 + +```jsx +import React, { useState, useRef ,useMemo} from 'react'; +import { Button, Space } from 'antd' +import { DownloadOutlined } from '@ant-design/icons'; +import { ButtonList } from '@zhst/meta' + + + + + +export default () => { +const [isPlay,setIsPlay] = useState(true); + +const props = useMemo(() => { + return { + buttons: [ + { + key: 'button1', + text: '一级按钮1', + onClick: () => console.log('一级按钮1被点击'), + children: [ + { key: 'subButton1-1', text: '二级按钮1-1', onClick: () => console.log('二级按钮1-1被点击') , icon: }, + { key: 'subButton1-2', text: '二级按钮1-2', onClick: () => console.log('二级按钮1-2被点击') }, + ], + weight: 1, + // icon:, + }, + { + key: 'button2', + text: '一级按钮2', + onClick: () => console.log('一级按钮2被点击'), + children: null, + weight: 2, + }, + { + key: 'button3', + text: '一级按钮3', + onClick: () => console.log('一级按钮3被点击'), + children: null, + weight: 3, + }, + { + key: 'button4', + text: '一级按钮4', + onClick: () => console.log('一级按钮4被点击'), + weight: 4, + }, + { + key: 'button5', + text: '一级按钮5' , + onClick: () => console.log('一级按钮5被点击'), + children: [ + { key: 'subButton5-1', text: '二级按钮5-1', onClick: () => console.log('二级按钮5-1被点击') }, + ], + weight: 5, + }, + ], + customButton: + { + key: '播放', + text: isPlay ? '播放按钮' : '图片按钮', + onClick: () => {setIsPlay(!isPlay)}, + weight: 3.5, + } +}},[isPlay]) + return ( + + + + ) +} +``` + +## API + +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| ---- | ---- | ---- | ------ | ---- | +| buttons | 传入按钮列表 |ButtonItem[]| - | - | +| customButton | 传入自定义按钮 | ButtonItem | - | - | +| gutter | 控制间隙 | Gutter | - | - | + diff --git a/packages/meta/src/ButtonList/index.tsx b/packages/meta/src/ButtonList/index.tsx new file mode 100644 index 0000000..496c280 --- /dev/null +++ b/packages/meta/src/ButtonList/index.tsx @@ -0,0 +1,4 @@ +import ButtonList from './ButtonList' + + +export default ButtonList diff --git a/packages/meta/src/index.tsx b/packages/meta/src/index.tsx index 544fb69..9fcf70f 100644 --- a/packages/meta/src/index.tsx +++ b/packages/meta/src/index.tsx @@ -80,4 +80,4 @@ export type { TooltipAlignConfig, TooltipProps, TooltipPlacement, TooltipPropsWi export { default as Tour } from './tour' export type { TourLocale, TourProps, TourStepProps } from './tour/interface' export { default as Segmented } from './segmented' -export type { SegmentedLabeledOption, SegmentedProps, SegmentedValue } from './segmented' +export { default as ButtonList } from './ButtonList'