Feat/collapse

components/collapse/__docs__/adaptor/index.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { Collapse } from '@alifd/next';
+import { Types, parseData, NodeType } from '@alifd/adaptor-helper';
+
+interface AdaptorProps {
+    state: string;
+    width: number;
+    data: string;
+    style: React.CSSProperties;
+}
+
+export default {
+    name: 'Collapse',
+    editor: () => ({
+        props: [
+            {
+                name: 'state',
+                label: 'Status',
+                type: Types.enum,
+                options: ['normal', 'disabled'],
+                default: 'normal',
+            },
+            {
+                name: 'width',
+                type: Types.number,
+                default: 400,
+            },
+        ],
+        data: {
+            active: true,
+            disable: true,
+            default:
+                '*Panel Header 1\n\tPeople always make mistakes, frustrated, nerve-racking, but cannot remain stagnant.\nPanel Header 2\n\tPeople always make mistakes, frustrated, nerve-racking, but cannot remain stagnant.\nPanel Header 3\n\tPeople always make mistakes, frustrated, nerve-racking, but cannot remain stagnant.\n',
+        },
+    }),
+    adaptor: ({ state, width, data, style = {}, ...others }: AdaptorProps) => {
+        const list = parseData(data).filter(node => NodeType.node === node.type);
+        const expandedKeys = [] as string[];
+        const children = list.map(({ state, value, children }, index) => {
+            if (state === 'active') {
+                expandedKeys.push(`panel_${index}`);
+            }
+
+            return (
+                <Collapse.Panel
+                    disabled={state === 'disabled'}
+                    key={`panel_${index}`}
+                    title={value as string}
+                >
+                    {children && children.length > 0 ? children[0].value : ''}
+                </Collapse.Panel>
+            );
+        });
+        return (
+            <Collapse
+                {...others}
+                style={{
+                    minWidth: width,
+                    ...style,
+                }}
+                expandedKeys={state === 'disabled' ? [] : expandedKeys}
+                disabled={state === 'disabled'}
+            >
+                {children}
+            </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__/demo/event/index.tsx

@@ -5,25 +5,22 @@ import { Collapse } from '@alifd/next';
 const Panel = Collapse.Panel;
 
 class Demo extends React.Component {
-    constructor(props, context) {
-        super(props, context);
-        this.state = {
-            expandedKeys: [],
-        };
-    }
+    state = {
+        expandedKeys: [],
+    };
 
-    onExpand(expandedKeys) {
+    onExpand = (expandedKeys: string[]) => {
         this.setState({
             expandedKeys,
         });
-    }
+    };
 
-    onClick(key) {
+    onClick = (key: any) => {
         console.log('clicked', key);
-    }
+    };
     render() {
         return (
-            <Collapse onExpand={this.onExpand.bind(this)} expandedKeys={this.state.expandedKeys}>
+            <Collapse onExpand={this.onExpand} expandedKeys={this.state.expandedKeys}>
                 <Panel title="simple tile" onClick={this.onClick}>
                     Promotions are marketing campaigns ran by Marketplace. Participate to sale your
                     products during that promotion and make a profit

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 的折叠状态    |