diff --git a/package.json b/package.json index c61240a..00a6778 100644 --- a/package.json +++ b/package.json @@ -47,7 +47,7 @@ "dependencies": { "@babel/runtime": "^7.10.1", "@rc-component/motion": "^1.1.4", - "@rc-component/util": "^1.0.1", + "@rc-component/util": "^1.3.0", "classnames": "2.x" }, "devDependencies": { diff --git a/src/Collapse.tsx b/src/Collapse.tsx index 1b0b099..20eeb38 100644 --- a/src/Collapse.tsx +++ b/src/Collapse.tsx @@ -1,5 +1,5 @@ import classNames from 'classnames'; -import useMergedState from '@rc-component/util/lib/hooks/useMergedState'; +import { useControlledState, useEvent } from '@rc-component/util'; import warning from '@rc-component/util/lib/warning'; import React from 'react'; import useItems from './hooks/useItems'; @@ -7,7 +7,7 @@ import type { CollapseProps } from './interface'; import CollapsePanel from './Panel'; import pickAttrs from '@rc-component/util/lib/pickAttrs'; -function getActiveKeysArray(activeKey: React.Key | React.Key[]) { +function getActiveKeysArray(activeKey: React.Key | React.Key[]): React.Key[] { let currentActiveKey = activeKey; if (!Array.isArray(currentActiveKey)) { const activeKeyType = typeof currentActiveKey; @@ -38,27 +38,27 @@ const Collapse = React.forwardRef((props, ref) => const collapseClassName = classNames(prefixCls, className); - const [activeKey, setActiveKey] = useMergedState([], { - value: rawActiveKey, - onChange: (v) => onChange?.(v as React.Key[]), - defaultValue: defaultActiveKey, - postState: getActiveKeysArray, - }); - - const onItemClick = (key: React.Key) => - setActiveKey(() => { - if (accordion) { - return activeKey[0] === key ? [] : [key]; - } + const [internalActiveKey, setActiveKey] = useControlledState( + defaultActiveKey, + rawActiveKey, + ); + const activeKey = getActiveKeysArray(internalActiveKey); - const index = activeKey.indexOf(key); - const isActive = index > -1; - if (isActive) { - return activeKey.filter((item) => item !== key); - } + const triggerActiveKey = useEvent((next) => { + const nextKeys = getActiveKeysArray(next); + setActiveKey(nextKeys); + onChange?.(nextKeys); + }); - return [...activeKey, key]; - }); + const onItemClick = (key: React.Key) => { + if (accordion) { + triggerActiveKey(activeKey[0] === key ? [] : [key]); + } else { + triggerActiveKey( + activeKey.includes(key) ? activeKey.filter((item) => item !== key) : [...activeKey, key], + ); + } + }; // ======================== Children ======================== warning(