diff --git a/packages/meta/src/ButtonList/ButtonList.tsx b/packages/meta/src/ButtonList/ButtonList.tsx index 22db3dc..9597fcf 100644 --- a/packages/meta/src/ButtonList/ButtonList.tsx +++ b/packages/meta/src/ButtonList/ButtonList.tsx @@ -10,7 +10,7 @@ export interface IButtonItem { onClick: () => void; children?: Array>; // 用于排序 - weight: number; + weight?: number; icon?: ReactNode className?: string; isCenter?: boolean; @@ -30,12 +30,16 @@ const ButtonList: React.FC = (Props) => { const [buttonListWrapMarginLeft, setButtonListWrapMarginLeft] = useState(0) const centerButtonRef = useRef(null); - const sortedButtons = useMemo(() => { - let buttonList = [...buttons] - - - return buttonList?.sort((a, b) => a.weight - b.weight); + let buttonList = buttons.map((btn, index) => { + if (btn.weight === undefined) { + return { ...btn, weight: index } + } else { + return { ...btn, weight: btn.weight } + } + }) + const newButtonList = buttonList?.sort((a, b) => a.weight - b.weight) + return newButtonList; }, [buttons]); const handleButtonClick = (key: string, item: IButtonItem) => { @@ -64,7 +68,7 @@ const ButtonList: React.FC = (Props) => { 作为 buttonListWrap marginLeft 修正距离 */ - // 这里为什么要 * 2 由于 justify-content: center; marginLeft 需要 * 2才是 正确的值 具体原因 还在研究 + // 这里为什么要 * 2 由于 justify-content: center; marginLeft 需要 * 2才是 正确的值 具体原因 还在研究 const buttonListWrapMarginLeft = (buttonListCenterOffset - centerButtonOffset) * 2 setButtonListWrapMarginLeft(buttonListWrapMarginLeft) diff --git a/packages/meta/src/ButtonList/demo/base.tsx b/packages/meta/src/ButtonList/demo/base.tsx index fd7f191..13be8c3 100644 --- a/packages/meta/src/ButtonList/demo/base.tsx +++ b/packages/meta/src/ButtonList/demo/base.tsx @@ -19,34 +19,28 @@ export default () => { { 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被点击'), - weight: 2, }, { key: '播放', text: isPlay ? '播放按钮' : '图片按钮', onClick: () => { setIsPlay(!isPlay) }, - weight: 3, - isCenter: true + // isCenter: true }, { key: 'button3', text: '一级按钮3', onClick: () => console.log('一级按钮3被点击'), - weight: 3, }, { key: 'button4', text: '一级按钮4', onClick: () => console.log('一级按钮4被点击'), - weight: 4, - // isCenter: true }, { @@ -56,7 +50,6 @@ export default () => { children: [ { key: 'subButton5-1', text: '二级按钮5-1', onClick: () => console.log('二级按钮5-1被点击') }, ], - weight: 5, }, ], }