Feat/collapse

components/collapse/__docs__/demo/basic/index.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Collapse, Radio } from '@alifd/next';
+import { Collapse } from '@alifd/next';
 
 const Panel = Collapse.Panel;
-const RadioGroup = Radio.Group;
 
 ReactDOM.render(
     <Collapse>

components/collapse/__docs__/index.en-us.md

@@ -12,29 +12,52 @@
 ### When to use
 
 When some earas may toggle between collapse state and expand state.
+
 ## API
 
 ### Collapse
 
-| Param           | Description                                | Type       | Default Value          |
-| ------------------- | -------------------------------------------------- | -------- | --------- |
-| dataSource          | data model                                         | Array    | -         |
-| defaultExpandedKeys | default expand panel keys                                           | Array    | -         |
-| expandedKeys        | expand panel keys                                          | Array    | -         |
-| onExpand            | callback when panel state changes<br><br>**signature**:<br>Function() => void | Function | func.noop |
-| disabled            | disable all panel                                               | Boolean  | -         |
-| accordion           | accordion mode, you can only open at most one panel             | Boolean  | false     |
+| Param               | Description                                      | Type                                         | Default Value | Required |
+| ------------------- | ------------------------------------------------ | -------------------------------------------- | ------------- | -------- |
+| dataSource          | Use data model to build                          | Array<DataItem>                              | -             |          |
+| defaultExpandedKeys | Default expanded keys                            | KeyType[]                                    | -             |          |
+| expandedKeys        | Controlled expanded keys                         | KeyType[]                                    | -             |          |
+| onExpand            | Callback when the expanded state changes         | (expandedKeys: KeyType \| KeyType[]) => void | -             |          |
+| disabled            | All disabled                                     | boolean                                      | -             |          |
+| accordion           | Accordion mode, only one can be opened at a time | boolean                                      | false         |          |
 
 ### Collapse.Panel
 
-| Param      | Description         | Type       | Default Value          |
-| -------- | -------- | --------- | --- |
-| disabled | disable this panel | Boolean   | -   |
-| title    | panel title       | ReactNode | -   |
+| Param      | Description                     | Type                                                                                             | Default Value | Required |
+| ---------- | ------------------------------- | ------------------------------------------------------------------------------------------------ | ------------- | -------- |
+| disabled   | Whether to disable user actions | boolean                                                                                          | -             |          |
+| title      | Title                           | React.ReactNode                                                                                  | -             |          |
+| isExpanded | Whether to expand               | boolean                                                                                          | false         |          |
+| onClick    | Click callback function         | \| ((e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>) => void)<br/> \| null | -             |          |
+
+### KeyType
+
+```typescript
+export type KeyType = string | number;
+```
+
+### DataItem
+
+```typescript
+export type DataItem = {
+    id?: string;
+    title?: React.ReactNode;
+    content?: React.ReactNode;
+    disabled?: boolean;
+    key?: KeyType;
+    onClick?: (key: KeyType) => void;
+    [propName: string]: unknown;
+};
+```
 
 ## ARIA and KeyBoard
 
-| KeyBoard          | Descripiton                              |
-| :---------- | :------------------------------ |
-| Tab       | navigate to the next collapse panel                |
-| Space       | toggle expanded                          |
+| KeyBoard | Descripiton                         |
+| :------- | :---------------------------------- |
+| Tab      | navigate to the next collapse panel |
+| Space    | toggle expanded                     |

components/collapse/__docs__/index.md

@@ -19,25 +19,47 @@
 
 ### Collapse
 
-| 参数                  | 说明                                                    | 类型       | 默认值       |
-| ------------------- | ----------------------------------------------------- | -------- | --------- |
-| dataSource          | 使用数据模型构建                                              | Array    | -         |
-| defaultExpandedKeys | 默认展开keys                                              | Array    | -         |
-| expandedKeys        | 受控展开keys                                              | Array    | -         |
-| onExpand            | 展开状态发升变化时候的回调<br/><br/>**签名**:<br/>Function() => void | Function | func.noop |
-| disabled            | 所有禁用                                                  | Boolean  | -         |
-| accordion           | 手风琴模式，一次只能打开一个                                        | Boolean  | false     |
+| 参数                | 说明                         | 类型                                         | 默认值 | 是否必填 |
+| ------------------- | ---------------------------- | -------------------------------------------- | ------ | -------- |
+| dataSource          | 使用数据模型构建             | Array<DataItem>                              | -      |          |
+| defaultExpandedKeys | 默认展开 keys                | KeyType[]                                    | -      |          |
+| expandedKeys        | 受控展开 keys                | KeyType[]                                    | -      |          |
+| onExpand            | 展开状态发升变化时候的回调   | (expandedKeys: KeyType \| KeyType[]) => void | -      |          |
+| disabled            | 所有禁用                     | boolean                                      | -      |          |
+| accordion           | 手风琴模式，一次只能打开一个 | boolean                                      | false  |          |
 
 ### Collapse.Panel
 
-| 参数       | 说明       | 类型        | 默认值 |
-| -------- | -------- | --------- | --- |
-| disabled | 是否禁止用户操作 | Boolean   | -   |
-| title    | 标题       | ReactNode | -   |
+| 参数       | 说明             | 类型                                                                                             | 默认值 | 是否必填 |
+| ---------- | ---------------- | ------------------------------------------------------------------------------------------------ | ------ | -------- |
+| disabled   | 是否禁止用户操作 | boolean                                                                                          | -      |          |
+| title      | 标题             | React.ReactNode                                                                                  | -      |          |
+| isExpanded | 是否展开         | boolean                                                                                          | false  |          |
+| onClick    | 点击回调函数     | \| ((e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>) => void)<br/> \| null | -      |          |
+
+### KeyType
+
+```typescript
+export type KeyType = string | number;
+```
+
+### DataItem
+
+```typescript
+export type DataItem = {
+    id?: string;
+    title?: React.ReactNode;
+    content?: React.ReactNode;
+    disabled?: boolean;
+    key?: KeyType;
+    onClick?: (key: KeyType) => void;
+    [propName: string]: unknown;
+};
+```
 
 ## 无障碍键盘操作指南
 
-| 按键    | 说明                   |
-| :---- | :------------------- |
-| Tab   | 切换到下一个collapse panel |
-| Space | 切换collapse的折叠状态      |
+| 按键  | 说明                        |
+| :---- | :-------------------------- |
+| Tab   | 切换到下一个 collapse panel |
+| Space | 切换 collapse 的折叠状态    |

components/collapse/__tests__/a11y-spec.tsx

@@ -5,7 +5,6 @@ import { testReact } from '../../util/__tests__/a11y/validate';
 
 const Panel = Collapse.Panel;
 
-/* eslint-disable no-undef, react/jsx-filename-extension */
 describe('Collapse A11y', () => {
     it('should not have any violations for children rendered component', async () => {
         await testReact(

components/collapse/__tests__/index-spec.tsx

@@ -1,12 +1,9 @@
-import React, { ReactElement } from 'react';
+import React, { type ReactElement } from 'react';
 import Collapse from '../index';
 import '../style';
 
 const Panel = Collapse.Panel;
 
-/* global describe, it */
-/* eslint-disable react/jsx-filename-extension */
-
 describe('Collapse', () => {
     describe('render', () => {
         it('[normal] Should render null', () => {
@@ -78,7 +75,9 @@ describe('Collapse', () => {
                         <div>others</div>
                     </Collapse>
                 );
-                cy.get('.next-collapse-panel-expanded').should('have.length', 1);
+                cy.get('.next-collapse-panel')
+                    .eq(2)
+                    .should('have.class', 'next-collapse-panel-expanded');
             });
 
             it('should expand panel with number key', () => {
@@ -92,7 +91,9 @@ describe('Collapse', () => {
                         <div>others</div>
                     </Collapse>
                 );
-                cy.get('.next-collapse-panel-expanded').should('have.length', 1);
+                cy.get('.next-collapse-panel')
+                    .eq(2)
+                    .should('have.class', 'next-collapse-panel-expanded');
             });
 
             it('should close default expanded string keys', () => {

components/collapse/collapse.tsx

@@ -1,20 +1,19 @@
-import React, { type MouseEventHandler, type ReactElement } from 'react';
+import React, { type Key, type ReactElement } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { polyfill } from 'react-lifecycles-compat';
 import ConfigProvider from '../config-provider';
 import { func, obj } from '../util';
 import Panel from './panel';
-import { PanelProps, type CollapseProps, type DataItem } from './types';
+import type { CollapseProps, DataItem, KeyType } from './types';
 
 /** Collapse */
 class Collapse extends React.Component<
     CollapseProps,
     {
-        expandedKeys: (string | number)[];
+        expandedKeys: KeyType[];
     }
 > {
-    static Panel: typeof Panel;
     static propTypes = {
         /**
          * 样式前缀
@@ -29,11 +28,11 @@ class Collapse extends React.Component<
          */
         dataSource: PropTypes.array,
         /**
-         * 默认展开keys
+         * 默认展开 keys
          */
         defaultExpandedKeys: PropTypes.array,
         /**
-         * 受控展开keys
+         * 受控展开 keys
          */
         expandedKeys: PropTypes.array,
         /**
@@ -45,7 +44,7 @@ class Collapse extends React.Component<
          */
         disabled: PropTypes.bool,
         /**
-         * 扩展class
+         * 扩展 class
          */
         className: PropTypes.string,
         /**
@@ -70,7 +69,7 @@ class Collapse extends React.Component<
     constructor(props: CollapseProps) {
         super(props);
 
-        let expandedKeys;
+        let expandedKeys: KeyType[] | undefined;
         if ('expandedKeys' in props) {
             expandedKeys = props.expandedKeys;
         } else {
@@ -91,7 +90,7 @@ class Collapse extends React.Component<
         return null;
     }
 
-    onItemClick(key: string) {
+    onItemClick(key: KeyType) {
         let expandedKeys = this.state.expandedKeys;
         if (this.props.accordion) {
             expandedKeys = String(expandedKeys[0]) === String(key) ? [] : [key];
@@ -109,19 +108,19 @@ class Collapse extends React.Component<
         this.setExpandedKey(expandedKeys);
     }
 
-    genratePanelId(itemId: string | number | undefined, index: number) {
+    genratePanelId(itemId: string | undefined, index: number) {
         const { id: collapseId } = this.props;
         let id;
         if (itemId) {
-            // 优先用 item自带的id
+            // 优先用 item 自带的 id
             id = itemId;
         } else if (collapseId) {
-            // 其次用 collapseId 和 index 生成id
+            // 其次用 collapseId 和 index 生成 id
             id = `${collapseId}-panel-${index}`;
         }
         return id;
     }
-    getProps(item: DataItem, index: number, key: string) {
+    getProps(item: DataItem, index: number, key: KeyType) {
         const expandedKeys = this.state.expandedKeys;
         const { title } = item;
         let disabled = this.props.disabled;
@@ -161,25 +160,26 @@ class Collapse extends React.Component<
             id,
             onClick: disabled
                 ? null
-                : ((() => {
+                : () => {
                       this.onItemClick(key);
                       if ('onClick' in item) {
                           item.onClick?.(key);
                       }
-                  }) as PanelProps['onClick']),
+                  },
         };
     }
 
     getItemsByDataSource() {
         const { props } = this;
         const { dataSource } = props;
-        // 是否有dataSource.item传入过key
+        // 是否有 dataSource.item 传入过 key
         const hasKeys = dataSource!.some(item => 'key' in item);
 
         return dataSource!.map((item, index) => {
-            // 传入过key就用item.key 没传入则统一使用index为key
-            const key = (hasKeys ? item.key : `${index}`) as string;
+            // 传入过 key 就用 item.key 没传入则统一使用 index 为 key
+            const key = hasKeys ? item.key : `${index}`;
             return (
+                // @ts-expect-error FIXME 这里要确保 key 一定存在才能正常运行，hasKeys 的判断方式需要改进
                 <Panel {...this.getProps(item, index, key)} key={key}>
                     {item.content}
                 </Panel>
@@ -188,7 +188,7 @@ class Collapse extends React.Component<
     }
 
     getItemsByChildren() {
-        // 是否有child传入过key
+        // 是否有 child 传入过 key
         const allKeys = React.Children.map(
             this.props.children,
             (child: ReactElement) => child && child.key
@@ -199,31 +199,31 @@ class Collapse extends React.Component<
             if (
                 child &&
                 typeof child.type === 'function' &&
-                (child.type as unknown as { isNextPanel: boolean }).isNextPanel
+                (child.type as typeof Panel).isNextPanel
             ) {
-                // 传入过key就用child.key 没传入则统一使用index为key
+                // 传入过 key 就用 child.key 没传入则统一使用 index 为 key
                 const key = hasKeys ? child.key : `${index}`;
-                return React.cloneElement(child, this.getProps(child.props, index, key as string));
+                // @ts-expect-error FIXME 这里要确保 key 一定存在才能正常运行，hasKeys 的判断方式需要改进
+                return React.cloneElement(child, this.getProps(child.props, index, key));
             } else {
                 return child;
             }
         });
     }
 
-    setExpandedKey(expandedKeys: (string | number)[]) {
+    setExpandedKey(expandedKeys: KeyType[]) {
         if (!('expandedKeys' in this.props)) {
             this.setState({ expandedKeys });
         }
         this.props.onExpand?.(this.props.accordion ? expandedKeys[0] : expandedKeys);
     }
 
     render() {
-        const { prefix, style, disabled, dataSource, id, rtl } = this.props;
-        const className = this.props.className;
+        const { prefix, className, style, disabled, dataSource, id, rtl } = this.props;
         const collapseClassName = classNames({
             [`${prefix}collapse`]: true,
             [`${prefix}collapse-disabled`]: disabled,
-            [className!]: Boolean(className),
+            [className!]: className,
         });
 
         const others = obj.pickOthers(Collapse.propTypes, this.props);

components/collapse/index.tsx

@@ -1,8 +1,9 @@
+import { assignSubComponent } from '../util/component';
 import Collapse from './collapse';
 import Panel from './panel';
 import type { CollapseProps, PanelProps } from './types';
 
-Collapse.Panel = Panel;
+const CollapseWithPanel = assignSubComponent(Collapse, { Panel });
 
-export default Collapse;
+export default CollapseWithPanel;
 export type { CollapseProps, PanelProps };