@douyinfe/semi-ui 2.1.3 → 2.1.6-alpha.0

package/treeSelect/_story/CustomTrigger/index.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { TreeSelect, Button } from '../../../index';
+
+export default function Demo() {
+    const treeData = [
+        {
+            label: '亚洲',
+            value: 'Asia',
+            key: '0',
+            children: [
+                {
+                    label: '中国',
+                    value: 'China',
+                    key: '0-0',
+                    children: [
+                        {
+                            label: '北京',
+                            value: 'Beijing',
+                            key: '0-0-0',
+                        },
+                        {
+                            label: '上海',
+                            value: 'Shanghai',
+                            key: '0-0-1',
+                        },
+                    ],
+                },
+            ],
+        },
+        {
+            label: '北美洲',
+            value: 'North America',
+            key: '1',
+        },
+    ];
+    return (
+        <TreeSelect
+            style={{ width: 300 }}
+            dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+            treeData={treeData}
+            placeholder="请选择"
+            triggerRender={({ value, placeholder }) => (
+                <Button block>{(value && value[0] && value[0].label) || placeholder}</Button>
+            )}
+        />
+    );
+}

package/treeSelect/_story/Demo.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import TreeSelect, { TreeSelectProps } from '../index';
+
+const Demo = (props: TreeSelectProps): React.ReactElement => {
+    const treeData = [
+        {
+            label: 'Asia',
+            value: 'Asia',
+            key: '0',
+            children: [
+                {
+                    label: 'China',
+                    value: 'China',
+                    key: '0-0',
+                    children: [
+                        {
+                            label: 'Beijing',
+                            value: 'Beijing',
+                            key: '0-0-0',
+                        },
+                        {
+                            label: 'Shanghai',
+                            value: 'Shanghai',
+                            key: '0-0-1',
+                        },
+                    ],
+                },
+                {
+                    label: 'Japan',
+                    value: 'Japan',
+                    key: '0-1',
+                    children: [
+                        {
+                            label: 'Osaka',
+                            value: 'Osaka',
+                            key: '0-1-0'
+                        }
+                    ]
+                },
+            ],
+        },
+        {
+            label: 'North America',
+            value: 'North America',
+            key: '1',
+            children: [
+                {
+                    label: 'United States',
+                    value: 'United States',
+                    key: '1-0'
+                },
+                {
+                    label: 'Canada',
+                    value: 'Canada',
+                    key: '1-1'
+                }
+            ]
+        }
+    ];
+    return (
+        <div>
+            <TreeSelect
+                style={{ width: 300 }}
+                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+                treeData={treeData}
+                filterTreeNode
+                placeholder="单选可搜索的"
+            />
+            <TreeSelect
+                style={{ width: 300 }}
+                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+                treeData={treeData}
+                multiple
+                filterTreeNode
+                maxTagCount={2}
+                placeholder="多选可搜索的"
+                searchPlaceholder="请输入关键字开始搜索"
+            />
+        </div>
+    );
+};
+
+export default Demo;