From f6ac2895f8a56d4a32de1654c92706a956b7c3f1 Mon Sep 17 00:00:00 2001 From: epoll-j Date: Sat, 14 Sep 2024 14:44:30 +0800 Subject: [PATCH] feat(tree-select): add example feat #395 --- src/tree-select/_example/base.tsx | 39 +++++++ src/tree-select/_example/index.tsx | 24 +++++ src/tree-select/_example/multiple.tsx | 40 ++++++++ src/tree-select/_example/normal.tsx | 142 ++++++++++++++++++++++++++ src/tree-select/index.ts | 4 +- src/tree-select/tree-select.tsx | 2 +- 6 files changed, 247 insertions(+), 4 deletions(-) create mode 100644 src/tree-select/_example/base.tsx create mode 100644 src/tree-select/_example/index.tsx create mode 100644 src/tree-select/_example/multiple.tsx create mode 100644 src/tree-select/_example/normal.tsx diff --git a/src/tree-select/_example/base.tsx b/src/tree-select/_example/base.tsx new file mode 100644 index 00000000..e172af3e --- /dev/null +++ b/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(['1', '1-0']); + const onChange: TdTreeSelectProps['onChange'] = (itemValue, level) => { + console.log(itemValue, level); + setValue(itemValue); + }; + + return ( + <> + + + ); +} diff --git a/src/tree-select/_example/index.tsx b/src/tree-select/_example/index.tsx new file mode 100644 index 00000000..9d96e8f3 --- /dev/null +++ b/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 ( +
+ + + + + + + + + + +
+ ); +} diff --git a/src/tree-select/_example/multiple.tsx b/src/tree-select/_example/multiple.tsx new file mode 100644 index 00000000..1757e2cf --- /dev/null +++ b/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(['0', ['0-0', '0-1']]); + + const onChange: TdTreeSelectProps['onChange'] = (itemValue, level) => { + console.log(itemValue, level); + setValue(itemValue); + }; + + return ( + <> + + + ); +} diff --git a/src/tree-select/_example/normal.tsx b/src/tree-select/_example/normal.tsx new file mode 100644 index 00000000..7b43353e --- /dev/null +++ b/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, 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(['110000', '110100', '110101']); + + const onChange: TdTreeSelectProps['onChange'] = (itemValue, level) => { + console.log(itemValue, level); + setValue(itemValue); + }; + + return ( + <> + + + ); +} diff --git a/src/tree-select/index.ts b/src/tree-select/index.ts index b355da1c..3880645d 100644 --- a/src/tree-select/index.ts +++ b/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 = withInstall(_TreeSelect); -export default TreeSelect; +export const TreeSelect = _TreeSelect; diff --git a/src/tree-select/tree-select.tsx b/src/tree-select/tree-select.tsx index ccbe74be..76c5faa8 100644 --- a/src/tree-select/tree-select.tsx +++ b/src/tree-select/tree-select.tsx @@ -52,7 +52,7 @@ const TreeSelect: FC = (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'); } }