feat(tree-select): add example

feat Tencent#395

src/tree-select/_example/base.tsx

@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+import { TreeSelect } from 'tdesign-mobile-react';
+import { TdTreeSelectProps, TreeSelectValue } from '../type';
+
+export default function BaseBadge() {
+  const chineseNumber = '一二三四五六七八九十'.split('');
+
+  const generateTree = (deep = 0, count = 10, prefix = ''): TdTreeSelectProps['options'] => {
+    const ans: TdTreeSelectProps['options'] = [];
+
+    for (let i = 0; i < count; i += 1) {
+      const value = prefix ? `${prefix}-${i}` : `${i}`;
+      const rect = {
+        label: `选项${chineseNumber[i]}`,
+        value,
+      };
+
+      if (deep > 0) {
+        // @ts-ignore
+        rect.children = generateTree(deep - 1, 10, value);
+      }
+      ans.push(rect);
+    }
+
+    return ans;
+  };
+  const options = generateTree(1);
+  const [value, setValue] = useState<TreeSelectValue>(['1', '1-0']);
+  const onChange: TdTreeSelectProps['onChange'] = (itemValue, level) => {
+    console.log(itemValue, level);
+    setValue(itemValue);
+  };
+
+  return (
+    <>
+      <TreeSelect value={value} options={options} onChange={onChange}></TreeSelect>
+    </>
+  );
+}

src/tree-select/_example/index.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import TDemoBlock from '../../../site/mobile/components/DemoBlock';
+import TDemoHeader from '../../../site/mobile/components/DemoHeader';
+
+import BaseDemo from './base';
+import MultipleDemo from './multiple';
+import NormalDemo from './normal';
+
+export default function BadgeDemo() {
+  return (
+    <div className="tdesign-mobile-demo">
+      <TDemoHeader title="TreeSelect 树形选择器" summary="用于多层级数据的逐级选择。" />
+      <TDemoBlock title="01 组件类型" summary="基础树形选择">
+        <BaseDemo />
+      </TDemoBlock>
+      <TDemoBlock summary="多选树形选择">
+        <MultipleDemo />
+      </TDemoBlock>
+      <TDemoBlock title="02 组件状态" summary="三级树形选择">
+        <NormalDemo />
+      </TDemoBlock>
+    </div>
+  );
+}

src/tree-select/_example/multiple.tsx

@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+import { TreeSelect } from 'tdesign-mobile-react';
+import { TdTreeSelectProps, TreeSelectValue } from '../type';
+
+export default function BaseBadge() {
+  const chineseNumber = '一二三四五六七八九十'.split('');
+
+  const generateTree = (deep = 0, count = 10, prefix = ''): TdTreeSelectProps['options'] => {
+    const ans: TdTreeSelectProps['options'] = [];
+
+    for (let i = 0; i < count; i += 1) {
+      const value = prefix ? `${prefix}-${i}` : `${i}`;
+      const rect = {
+        label: `选项${chineseNumber[i]}`,
+        value,
+      };
+
+      if (deep > 0) {
+        // @ts-ignore
+        rect.children = generateTree(deep - 1, 10, value);
+      }
+      ans.push(rect);
+    }
+
+    return ans;
+  };
+  const options = generateTree(1);
+  const [value, setValue] = useState<TreeSelectValue>(['0', ['0-0', '0-1']]);
+
+  const onChange: TdTreeSelectProps['onChange'] = (itemValue, level) => {
+    console.log(itemValue, level);
+    setValue(itemValue);
+  };
+
+  return (
+    <>
+      <TreeSelect value={value} multiple options={options} onChange={onChange}></TreeSelect>
+    </>
+  );
+}

src/tree-select/_example/normal.tsx

@@ -0,0 +1,142 @@
+import React, { useState } from 'react';
+import { TreeSelect } from 'tdesign-mobile-react';
+import { TdTreeSelectProps, TreeSelectValue } from '../type';
+
+export default function BaseBadge() {
+  const areaList = {
+    provinces: {
+      110000: '北京市',
+      440000: '广东省',
+    },
+    cities: {
+      110100: '北京市',
+      440100: '广州市',
+      440200: '韶关市',
+      440300: '深圳市',
+      440400: '珠海市',
+      440500: '汕头市',
+      440600: '佛山市',
+    },
+    counties: {
+      110101: '东城区',
+      110102: '西城区',
+      110105: '朝阳区',
+      110106: '丰台区',
+      110107: '石景山区',
+      110108: '海淀区',
+      110109: '门头沟区',
+      110111: '房山区',
+      110112: '通州区',
+      110113: '顺义区',
+      110114: '昌平区',
+      110115: '大兴区',
+      110116: '怀柔区',
+      110117: '平谷区',
+      110118: '密云区',
+      110119: '延庆区',
+      440103: '荔湾区',
+      440104: '越秀区',
+      440105: '海珠区',
+      440106: '天河区',
+      440111: '白云区',
+      440112: '黄埔区',
+      440113: '番禺区',
+      440114: '花都区',
+      440115: '南沙区',
+      440117: '从化区',
+      440118: '增城区',
+      440203: '武江区',
+      440204: '浈江区',
+      440205: '曲江区',
+      440222: '始兴县',
+      440224: '仁化县',
+      440229: '翁源县',
+      440232: '乳源瑶族自治县',
+      440233: '新丰县',
+      440281: '乐昌市',
+      440282: '南雄市',
+      440303: '罗湖区',
+      440304: '福田区',
+      440305: '南山区',
+      440306: '宝安区',
+      440307: '龙岗区',
+      440308: '盐田区',
+      440309: '龙华区',
+      440310: '坪山区',
+      440311: '光明区',
+      440402: '香洲区',
+      440403: '斗门区',
+      440404: '金湾区',
+      440507: '龙湖区',
+      440511: '金平区',
+      440512: '濠江区',
+      440513: '潮阳区',
+      440514: '潮南区',
+      440515: '澄海区',
+      440523: '南澳县',
+      440604: '禅城区',
+      440605: '南海区',
+      440606: '顺德区',
+      440607: '三水区',
+      440608: '高明区',
+    },
+  };
+
+  const generateTree = () => {
+    const { provinces, cities, counties } = areaList;
+    const options: TdTreeSelectProps['options'] = [];
+    const eachObj = (obj: Record<string, string>, cb: (item: string) => void) => Object.keys(obj).forEach(cb);
+    // @ts-ignore
+    const match = (v1, v2, base) => parseInt(v1 / base, 10) === parseInt(v2 / base, 10);
+
+    eachObj(provinces, (prov) => {
+      const cityList: TdTreeSelectProps['options'] = [];
+
+      eachObj(cities, (city) => {
+        const countyList: TdTreeSelectProps['options'] = [];
+
+        if (match(city, prov, 10000)) {
+          eachObj(counties, (county) => {
+            if (match(county, city, 100)) {
+              countyList.push({
+                label: counties[county],
+                value: county,
+                disabled: ['110102', '440104'].includes(county),
+              });
+            }
+          });
+          cityList.push({
+            label: cities[city],
+            value: city,
+            children: countyList,
+            disabled: ['110100', '440200'].includes(city),
+          });
+        }
+      });
+
+      const item = {
+        label: provinces[prov],
+        value: prov,
+        children: cityList,
+      };
+
+      options.push(item);
+    });
+
+    return options;
+  };
+
+  const options = generateTree();
+  const [value, setValue] = useState<TreeSelectValue>(['110000', '110100', '110101']);
+
+  const onChange: TdTreeSelectProps['onChange'] = (itemValue, level) => {
+    console.log(itemValue, level);
+    setValue(itemValue);
+  };
+
+  return (
+    <>
+      <TreeSelect value={value} options={options} onChange={onChange}></TreeSelect>
+    </>
+  );
+}

src/tree-select/index.ts

@@ -5,6 +5,4 @@ import './style';
 
 export * from './type';
 export type TreeSelectProps = TdTreeSelectProps;
-const TreeSelect = _TreeSelect;
-// export const TreeSelect: WithInstallType<typeof _TreeSelect> = withInstall(_TreeSelect);
-export default TreeSelect;
+export const TreeSelect = _TreeSelect;

src/tree-select/tree-select.tsx

@@ -52,7 +52,7 @@ const TreeSelect: FC<TreeSelectProps> = (props) => {
     setTreeOptions(tmpTreeOptions);
     if (multiple) {
       const finalValue = innerValue;
-      if (finalValue[leafLevel] != null && !Array.isArray(finalValue[leafLevel])) {
+      if (finalValue[level] != null && !Array.isArray(finalValue[level])) {
         throw TypeError('应传入数组类型的 value');
       }
     }