taro-uno-ui 0.9.0 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (312) hide show
  1. package/README.md +21 -0
  2. package/dist/js/{index-DffLRSro.js → index-CDFsvu80.js} +15369 -10741
  3. package/dist/js/index-CDFsvu80.js.map +1 -0
  4. package/dist/js/index-DFdcksbe.js.map +1 -1
  5. package/dist/js/index-DXRIkWX1.js.map +1 -1
  6. package/dist/js/{index-6NJ3A1Dn.js → index-JffnTUrv.js} +15430 -10801
  7. package/dist/js/index-JffnTUrv.js.map +1 -0
  8. package/dist/utils/http/request.d.ts +280 -0
  9. package/package.json +14 -10
  10. package/src/components/basic/Button/Button.tsx +53 -13
  11. package/src/components/basic/Button/Button.types.ts +45 -9
  12. package/src/components/basic/Divider/Divider.tsx +60 -29
  13. package/src/components/basic/Icon/Icon.data.ts +474 -0
  14. package/src/components/basic/Icon/Icon.test.tsx +2 -2
  15. package/src/components/basic/Icon/Icon.tsx +48 -35
  16. package/src/components/basic/Icon/IconManager.ts +229 -0
  17. package/src/components/basic/Text/Text.styles.ts +3 -3
  18. package/src/components/basic/Text/Text.types.ts +14 -4
  19. package/src/components/basic/Typography/Typography.styles.ts +10 -9
  20. package/src/components/basic/Typography/Typography.tsx +15 -13
  21. package/src/components/basic/Typography/Typography.types.ts +41 -41
  22. package/src/components/basic/Typography/index.tsx +1 -1
  23. package/src/components/basic/Video/Video.styles.ts +777 -0
  24. package/src/components/basic/Video/Video.test.tsx +490 -0
  25. package/src/components/basic/Video/Video.tsx +1468 -0
  26. package/src/components/basic/Video/Video.types.ts +500 -0
  27. package/src/components/basic/Video/index.tsx +26 -0
  28. package/src/components/basic/index.tsx +13 -15
  29. package/src/components/common/ErrorBoundary.tsx +1 -1
  30. package/src/components/common/LazyComponent.tsx +9 -8
  31. package/src/components/common/SecurityProvider.tsx +2 -14
  32. package/src/components/common/ThemeProvider.tsx +43 -56
  33. package/src/components/common/VirtualList.tsx +187 -205
  34. package/src/components/common/index.tsx +25 -0
  35. package/src/components/display/Avatar/Avatar.styles.ts +1 -1
  36. package/src/components/display/Avatar/Avatar.tsx +6 -19
  37. package/src/components/display/Avatar/Avatar.types.ts +1 -1
  38. package/src/components/display/Avatar/index.ts +1 -1
  39. package/src/components/display/Badge/Badge.tsx +3 -16
  40. package/src/components/display/Badge/Badge.types.ts +1 -1
  41. package/src/components/display/Badge/index.ts +1 -1
  42. package/src/components/display/Calendar/Calendar.styles.ts +36 -36
  43. package/src/components/display/Calendar/Calendar.test.tsx +27 -15
  44. package/src/components/display/Calendar/Calendar.tsx +56 -35
  45. package/src/components/display/Calendar/Calendar.types.ts +1 -1
  46. package/src/components/display/Calendar/index.ts +1 -1
  47. package/src/components/display/Card/Card.styles.ts +2 -2
  48. package/src/components/display/Card/Card.test.tsx +6 -4
  49. package/src/components/display/Card/Card.tsx +1 -1
  50. package/src/components/display/Card/Card.types.ts +4 -4
  51. package/src/components/display/Card/index.ts +1 -1
  52. package/src/components/display/Carousel/Carousel.styles.ts +31 -31
  53. package/src/components/display/Carousel/Carousel.tsx +34 -39
  54. package/src/components/display/Carousel/Carousel.types.ts +1 -1
  55. package/src/components/display/Carousel/index.ts +1 -1
  56. package/src/components/display/List/List.styles.ts +3 -3
  57. package/src/components/display/List/List.tsx +0 -1
  58. package/src/components/display/List/index.ts +1 -1
  59. package/src/components/display/Rate/Rate.styles.ts +5 -17
  60. package/src/components/display/Rate/Rate.tsx +6 -14
  61. package/src/components/display/Rate/Rate.types.ts +4 -3
  62. package/src/components/display/Rate/index.ts +3 -11
  63. package/src/components/display/Table/Table.test.tsx +2 -0
  64. package/src/components/display/Table/Table.tsx +3 -7
  65. package/src/components/display/Table/Table.types.ts +3 -2
  66. package/src/components/display/Tag/Tag.styles.ts +31 -31
  67. package/src/components/display/Tag/Tag.tsx +9 -26
  68. package/src/components/display/Tag/Tag.types.ts +1 -1
  69. package/src/components/display/Tag/index.ts +1 -1
  70. package/src/components/display/Timeline/Timeline.styles.ts +32 -32
  71. package/src/components/display/Timeline/Timeline.tsx +23 -42
  72. package/src/components/display/Timeline/Timeline.types.ts +1 -1
  73. package/src/components/display/Timeline/index.ts +1 -1
  74. package/src/components/display/index.tsx +33 -29
  75. package/src/components/feedback/Loading/Loading.tsx +6 -1
  76. package/src/components/feedback/Loading/index.ts +2 -5
  77. package/src/components/feedback/Message/Message.styles.ts +3 -3
  78. package/src/components/feedback/Message/index.ts +2 -5
  79. package/src/components/feedback/Modal/Modal.styles.ts +1 -1
  80. package/src/components/feedback/Modal/Modal.tsx +9 -31
  81. package/src/components/feedback/Modal/Modal.types.ts +12 -2
  82. package/src/components/feedback/Notification/Notification.styles.ts +49 -39
  83. package/src/components/feedback/Notification/Notification.test.tsx +1 -1
  84. package/src/components/feedback/Notification/Notification.tsx +97 -120
  85. package/src/components/feedback/Notification/Notification.types.ts +11 -8
  86. package/src/components/feedback/Notification/NotificationManager.tsx +135 -106
  87. package/src/components/feedback/Notification/index.ts +10 -3
  88. package/src/components/feedback/Notification/index.tsx +16 -26
  89. package/src/components/feedback/Progress/Progress.styles.ts +23 -14
  90. package/src/components/feedback/Progress/Progress.tsx +93 -113
  91. package/src/components/feedback/Progress/Progress.types.ts +1 -1
  92. package/src/components/feedback/Progress/index.ts +1 -1
  93. package/src/components/feedback/Progress/utils/animation.ts +12 -23
  94. package/src/components/feedback/Progress/utils/index.ts +2 -2
  95. package/src/components/feedback/Progress/utils/progress-calculator.ts +14 -32
  96. package/src/components/feedback/Result/Result.styles.ts +29 -29
  97. package/src/components/feedback/Result/Result.tsx +8 -20
  98. package/src/components/feedback/Result/Result.types.ts +7 -7
  99. package/src/components/feedback/Result/index.tsx +1 -1
  100. package/src/components/feedback/Toast/Toast.styles.ts +1 -1
  101. package/src/components/feedback/Toast/Toast.tsx +25 -13
  102. package/src/components/feedback/Tooltip/Tooltip.examples.tsx +21 -44
  103. package/src/components/feedback/Tooltip/Tooltip.styles.ts +16 -22
  104. package/src/components/feedback/Tooltip/Tooltip.test.tsx +1 -1
  105. package/src/components/feedback/Tooltip/Tooltip.tsx +65 -46
  106. package/src/components/feedback/Tooltip/Tooltip.types.ts +14 -20
  107. package/src/components/feedback/Tooltip/index.ts +1 -1
  108. package/src/components/feedback/Tooltip/index.tsx +12 -24
  109. package/src/components/feedback/index.tsx +54 -42
  110. package/src/components/form/Cascader/Cascader.styles.ts +2 -2
  111. package/src/components/form/Cascader/Cascader.tsx +84 -88
  112. package/src/components/form/Cascader/Cascader.types.ts +49 -50
  113. package/src/components/form/Cascader/hooks/useCascaderFieldNames.ts +11 -8
  114. package/src/components/form/Cascader/hooks/useCascaderOptions.ts +73 -55
  115. package/src/components/form/Cascader/hooks/useCascaderState.ts +31 -25
  116. package/src/components/form/Cascader/index.ts +1 -1
  117. package/src/components/form/Cascader/utils/formatDisplayValue.ts +4 -4
  118. package/src/components/form/Checkbox/Checkbox.styles.ts +83 -84
  119. package/src/components/form/Checkbox/Checkbox.tsx +2 -9
  120. package/src/components/form/Checkbox/CheckboxGroup.tsx +7 -7
  121. package/src/components/form/DatePicker/DatePicker.test.tsx +1 -1
  122. package/src/components/form/DatePicker/DatePicker.tsx +91 -75
  123. package/src/components/form/DatePicker/DatePicker.types.ts +4 -1
  124. package/src/components/form/Form/Form.tsx +66 -504
  125. package/src/components/form/Form/Form.types.ts +16 -1
  126. package/src/components/form/Form/useFormLogic.ts +497 -0
  127. package/src/components/form/Input/Input.styles.ts +8 -1
  128. package/src/components/form/Input/Input.tsx +55 -291
  129. package/src/components/form/Input/Input.types.ts +13 -1
  130. package/src/components/form/Input/useInputLogic.test.ts +82 -0
  131. package/src/components/form/Input/useInputLogic.ts +260 -0
  132. package/src/components/form/InputNumber/InputNumber.styles.ts +76 -25
  133. package/src/components/form/InputNumber/InputNumber.tsx +53 -21
  134. package/src/components/form/InputNumber/InputNumber.types.ts +21 -3
  135. package/src/components/form/InputNumber/components/InputNumberClearButton.tsx +3 -11
  136. package/src/components/form/InputNumber/components/InputNumberControls.tsx +3 -12
  137. package/src/components/form/InputNumber/hooks/index.ts +1 -1
  138. package/src/components/form/InputNumber/hooks/useInputNumberState.ts +7 -9
  139. package/src/components/form/InputNumber/hooks/useInputNumberValidation.ts +18 -17
  140. package/src/components/form/InputNumber/index.ts +7 -7
  141. package/src/components/form/Radio/Radio.styles.ts +1 -8
  142. package/src/components/form/Radio/Radio.tsx +3 -9
  143. package/src/components/form/Radio/Radio.types.ts +5 -1
  144. package/src/components/form/Select/Select.styles.ts +5 -1
  145. package/src/components/form/Select/Select.tsx +15 -15
  146. package/src/components/form/Select/Select.types.ts +2 -1
  147. package/src/components/form/Slider/Slider.styles.ts +13 -13
  148. package/src/components/form/Slider/Slider.tsx +19 -33
  149. package/src/components/form/Slider/Slider.types.ts +14 -12
  150. package/src/components/form/Slider/index.tsx +2 -9
  151. package/src/components/form/Switch/Switch.styles.ts +1 -7
  152. package/src/components/form/Switch/Switch.tsx +7 -13
  153. package/src/components/form/Textarea/Textarea.styles.ts +4 -4
  154. package/src/components/form/Textarea/Textarea.tsx +7 -1
  155. package/src/components/form/Textarea/Textarea.types.ts +4 -1
  156. package/src/components/form/TimePicker/TimePicker.styles.ts +8 -12
  157. package/src/components/form/TimePicker/TimePicker.tsx +122 -100
  158. package/src/components/form/TimePicker/TimePicker.types.ts +2 -2
  159. package/src/components/form/TimePicker/index.ts +1 -1
  160. package/src/components/form/Transfer/Transfer.styles.ts +3 -15
  161. package/src/components/form/Transfer/Transfer.tsx +146 -134
  162. package/src/components/form/Transfer/Transfer.types.ts +34 -26
  163. package/src/components/form/Transfer/components/TransferItem.tsx +55 -62
  164. package/src/components/form/Transfer/components/TransferList.tsx +212 -199
  165. package/src/components/form/Transfer/components/TransferOperations.tsx +52 -55
  166. package/src/components/form/Transfer/components/TransferPagination.tsx +115 -111
  167. package/src/components/form/Transfer/components/TransferSearch.tsx +52 -55
  168. package/src/components/form/Transfer/hooks/useTransferData.ts +91 -81
  169. package/src/components/form/Transfer/hooks/useTransferState.ts +22 -16
  170. package/src/components/form/Transfer/index.ts +2 -8
  171. package/src/components/form/Upload/Upload.styles.ts +21 -21
  172. package/src/components/form/Upload/Upload.tsx +189 -142
  173. package/src/components/form/Upload/Upload.types.ts +31 -31
  174. package/src/components/form/Upload/index.tsx +1 -1
  175. package/src/components/form/index.tsx +60 -29
  176. package/src/components/index.tsx +0 -1
  177. package/src/components/layout/Affix/Affix.styles.ts +16 -11
  178. package/src/components/layout/Affix/Affix.tsx +67 -75
  179. package/src/components/layout/Affix/Affix.types.ts +18 -18
  180. package/src/components/layout/Affix/index.tsx +1 -1
  181. package/src/components/layout/Col/Col.styles.ts +17 -17
  182. package/src/components/layout/Col/Col.test.tsx +7 -5
  183. package/src/components/layout/Col/Col.tsx +3 -21
  184. package/src/components/layout/Col/Col.types.ts +1 -1
  185. package/src/components/layout/Container/Container.styles.ts +3 -1
  186. package/src/components/layout/Container/Container.tsx +2 -11
  187. package/src/components/layout/Grid/Grid.tsx +3 -53
  188. package/src/components/layout/Layout/Content.tsx +24 -32
  189. package/src/components/layout/Layout/Footer.tsx +24 -32
  190. package/src/components/layout/Layout/Header.tsx +24 -32
  191. package/src/components/layout/Layout/Layout.styles.ts +17 -17
  192. package/src/components/layout/Layout/Layout.tsx +14 -25
  193. package/src/components/layout/Layout/Layout.types.ts +29 -29
  194. package/src/components/layout/Layout/Sider.tsx +44 -56
  195. package/src/components/layout/Layout/index.tsx +16 -2
  196. package/src/components/layout/Row/Row.tsx +15 -43
  197. package/src/components/layout/Space/Space.tsx +3 -11
  198. package/src/components/layout/Space/Space.types.ts +1 -1
  199. package/src/components/layout/index.tsx +29 -19
  200. package/src/components/navigation/Menu/Menu.constants.ts +69 -0
  201. package/src/components/navigation/Menu/Menu.stories.tsx +107 -0
  202. package/src/components/navigation/Menu/Menu.styles.ts +25 -37
  203. package/src/components/navigation/Menu/Menu.tsx +8 -11
  204. package/src/components/navigation/Menu/Menu.types.ts +2 -2
  205. package/src/components/navigation/Menu/Menu.utils.ts +17 -17
  206. package/src/components/navigation/Menu/MenuItem.tsx +9 -11
  207. package/src/components/navigation/Menu/SubMenu.tsx +8 -6
  208. package/src/components/navigation/Menu/index.tsx +4 -69
  209. package/src/components/navigation/NavBar/NavBar.styles.ts +1 -1
  210. package/src/components/navigation/NavBar/NavBar.tsx +7 -10
  211. package/src/components/navigation/NavBar/NavBar.types.ts +3 -3
  212. package/src/components/navigation/NavBar/index.tsx +1 -1
  213. package/src/components/navigation/Pagination/Pagination.test.tsx +2 -3
  214. package/src/components/navigation/Pagination/Pagination.tsx +3 -3
  215. package/src/components/navigation/Pagination/Pagination.types.ts +3 -2
  216. package/src/components/navigation/Pagination/index.ts +9 -3
  217. package/src/components/navigation/Steps/Step.tsx +24 -44
  218. package/src/components/navigation/Steps/Steps.styles.ts +28 -13
  219. package/src/components/navigation/Steps/Steps.test.tsx +2 -0
  220. package/src/components/navigation/Steps/Steps.tsx +88 -89
  221. package/src/components/navigation/Steps/Steps.types.ts +30 -30
  222. package/src/components/navigation/Steps/index.tsx +1 -1
  223. package/src/components/navigation/Tabs/Tabs.test.tsx +3 -2
  224. package/src/components/navigation/Tabs/Tabs.types.ts +4 -3
  225. package/src/components/navigation/index.tsx +21 -16
  226. package/src/constants/index.ts +1 -1
  227. package/src/hooks/index.ts +52 -102
  228. package/src/hooks/types.ts +4 -5
  229. package/src/hooks/useAsync.ts +46 -47
  230. package/src/hooks/useClickOutside.ts +52 -0
  231. package/src/hooks/useCounter.ts +87 -0
  232. package/src/hooks/useDebounce.ts +150 -0
  233. package/src/hooks/useDeepCompareEffect.ts +88 -0
  234. package/src/hooks/useEventListener.ts +77 -0
  235. package/src/hooks/useMediaQuery.ts +75 -0
  236. package/src/hooks/useMutation.ts +233 -0
  237. package/src/hooks/usePerformance.ts +1 -64
  238. package/src/hooks/usePlatform.ts +3 -1
  239. package/src/hooks/usePrevious.ts +25 -0
  240. package/src/hooks/useRequest.ts +12 -7
  241. package/src/hooks/useStateManagement.ts +1 -1
  242. package/src/hooks/useStorage.ts +169 -0
  243. package/src/hooks/useStyle.ts +8 -2
  244. package/src/hooks/useToggle.ts +54 -0
  245. package/src/index.ts +34 -9
  246. package/src/theme/ThemeProvider.tsx +3 -7
  247. package/src/theme/ThemeProvider.types.ts +1 -1
  248. package/src/theme/defaults.ts +1 -1
  249. package/src/theme/design-system.ts +2 -2
  250. package/src/theme/design-tokens.ts +85 -99
  251. package/src/theme/generated/dark-theme.scss +1 -1
  252. package/src/theme/generated/tokens.scss +82 -18
  253. package/src/theme/index.ts +8 -29
  254. package/src/theme/responsive.tsx +36 -34
  255. package/src/theme/styles.ts +1 -1
  256. package/src/theme/useThemeUtils.ts +43 -43
  257. package/src/theme/utils.ts +32 -32
  258. package/src/theme/variables.ts +70 -51
  259. package/src/types/accessibility.ts +36 -37
  260. package/src/types/button.ts +25 -27
  261. package/src/types/component-props.ts +6 -1
  262. package/src/types/glob.d.ts +4 -0
  263. package/src/types/index.ts +2 -2
  264. package/src/types/standardized-components.ts +9 -3
  265. package/src/types/utils.ts +13 -23
  266. package/src/utils/__tests__/responsiveUtils.test.ts +5 -4
  267. package/src/utils/abort-controller.ts +48 -0
  268. package/src/utils/cache.ts +2 -6
  269. package/src/utils/createNamespace.ts +4 -4
  270. package/src/utils/environment.ts +26 -6
  271. package/src/utils/error-handler.ts +2 -2
  272. package/src/utils/errorLogger.ts +16 -20
  273. package/src/utils/formatUtils.ts +38 -70
  274. package/src/utils/http/error-codes.ts +314 -0
  275. package/src/utils/http/http-client.test.ts +63 -0
  276. package/src/utils/{network → http}/http-client.ts +45 -35
  277. package/src/utils/http/request-cache.ts +127 -0
  278. package/src/utils/http/request.ts +954 -0
  279. package/src/utils/http/taro-adapter.test.ts +74 -0
  280. package/src/utils/http/taro-adapter.ts +24 -0
  281. package/src/utils/http/types.ts +414 -0
  282. package/src/utils/http/web-adapter.ts +33 -0
  283. package/src/utils/index.ts +5 -8
  284. package/src/utils/inputValidator.ts +17 -14
  285. package/src/utils/performance/performance.ts +60 -71
  286. package/src/utils/responsiveUtils.ts +7 -16
  287. package/src/utils/rtl-support.ts +29 -19
  288. package/src/utils/security/api-security.ts +47 -39
  289. package/src/utils/securityHeaders.ts +61 -67
  290. package/src/utils/typeHelpers.ts +10 -10
  291. package/src/utils/types/dataProcessing.ts +93 -92
  292. package/src/utils/types/typeHelpers.ts +31 -21
  293. package/src/utils/xssProtection.ts +96 -48
  294. package/dist/js/index-6NJ3A1Dn.js.map +0 -1
  295. package/dist/js/index-DffLRSro.js.map +0 -1
  296. package/src/components/form/Input/Input.enhanced.tsx +0 -732
  297. package/src/components/navigation/Menu/__tests__/Menu.test.tsx +0 -687
  298. package/src/components/navigation/Tree/Tree.styles.ts +0 -553
  299. package/src/components/navigation/Tree/Tree.test.basic.tsx +0 -7
  300. package/src/components/navigation/Tree/Tree.test.functional.tsx +0 -496
  301. package/src/components/navigation/Tree/Tree.test.import.check.tsx +0 -6
  302. package/src/components/navigation/Tree/Tree.test.import.tsx +0 -6
  303. package/src/components/navigation/Tree/Tree.test.minimal.tsx +0 -5
  304. package/src/components/navigation/Tree/Tree.test.simple.tsx +0 -30
  305. package/src/components/navigation/Tree/Tree.test.tsx +0 -908
  306. package/src/components/navigation/Tree/Tree.test.working.tsx +0 -673
  307. package/src/components/navigation/Tree/Tree.tsx +0 -600
  308. package/src/components/navigation/Tree/Tree.types.ts +0 -909
  309. package/src/components/navigation/Tree/Tree.utils.ts +0 -452
  310. package/src/components/navigation/Tree/index.ts +0 -33
  311. package/src/components/navigation/Tree/index.tsx +0 -23
  312. package/src/utils/network/http-client.test.ts +0 -18
@@ -1,600 +0,0 @@
1
- /**
2
- * Taro-Uno Tree Component
3
- * 树形控件组件,支持多级数据展示、选择、展开/收起等功能
4
- */
5
-
6
- import * as React from 'react';
7
- import { forwardRef, useRef, useState, useEffect, useCallback, useMemo } from 'react';
8
- import { View, Text } from '@tarojs/components';
9
- import type { ITouchEvent } from '@tarojs/components';
10
- import { getTreeStyles, getTreeClassNames } from './Tree.styles';
11
- import { TreeUtils } from './Tree.utils';
12
- import type { TreeProps, TreeRef, TreeNode, TreeSelectedKeys, TreeExpandedKeys, TreeCheckedKeys, TreeValue, TreeDataSource, Key } from './Tree.types';
13
-
14
- /** Tree树形控件组件 */
15
- export const TreeComponent = forwardRef<TreeRef, TreeProps>((props, ref) => {
16
- const {
17
- treeData = [],
18
- selectedKeys: controlledSelectedKeys,
19
- defaultSelectedKeys = [],
20
- expandedKeys: controlledExpandedKeys,
21
- defaultExpandedKeys = [],
22
- checkedKeys: controlledCheckedKeys,
23
- defaultCheckedKeys = [],
24
- halfCheckedKeys: controlledHalfCheckedKeys,
25
- defaultHalfCheckedKeys = [],
26
- loadedKeys: controlledLoadedKeys,
27
- defaultLoadedKeys = [],
28
- size = 'medium',
29
- theme = 'light',
30
- mode = 'tree',
31
- showLine = false,
32
- showIcon = true,
33
- blockNode = false,
34
- checkable = false,
35
- checkStrictly = false,
36
- selectable = true,
37
- multiple = false,
38
- disabled = false,
39
- draggable = false,
40
- virtual = false,
41
- height = 300,
42
- itemHeight = 32,
43
- expandAction = 'click',
44
- autoExpandParent = true,
45
- defaultExpandAll = false,
46
- defaultExpandParent = true,
47
- filterTreeNode,
48
- loadData,
49
- onExpand,
50
- onCheck,
51
- onSelect,
52
- onRightClick,
53
- onDragStart,
54
- onDragEnter,
55
- onDragOver,
56
- onDragLeave,
57
- onDragEnd,
58
- onDrop,
59
- onLoad,
60
- icon,
61
- switcherIcon,
62
- draggableIcon,
63
- showActionIcon = ['hover'],
64
- titleRender,
65
- selectableIcon,
66
- className,
67
- style,
68
- // Accessibility props are passed as restProps to maintain compatibility
69
- ...restProps
70
- } = props;
71
-
72
- const treeRef = useRef<any>(null);
73
- const [internalSelectedKeys, setInternalSelectedKeys] = useState<TreeSelectedKeys>(defaultSelectedKeys);
74
- const [internalExpandedKeys, setInternalExpandedKeys] = useState<TreeExpandedKeys>(defaultExpandedKeys);
75
- const [internalCheckedKeys, setInternalCheckedKeys] = useState<TreeCheckedKeys>(defaultCheckedKeys);
76
- const [internalHalfCheckedKeys, setInternalHalfCheckedKeys] = useState<TreeCheckedKeys>(defaultHalfCheckedKeys);
77
- const [internalLoadedKeys, setInternalLoadedKeys] = useState<TreeExpandedKeys>(defaultLoadedKeys);
78
- const [loadingKeys, setLoadingKeys] = useState<TreeExpandedKeys>([]);
79
-
80
- // 处理受控模式
81
- const selectedKeys = controlledSelectedKeys !== undefined ? controlledSelectedKeys : internalSelectedKeys;
82
- const expandedKeys = controlledExpandedKeys !== undefined ? controlledExpandedKeys : internalExpandedKeys;
83
- const checkedKeys = controlledCheckedKeys !== undefined ? controlledCheckedKeys : internalCheckedKeys;
84
- const halfCheckedKeys = controlledHalfCheckedKeys !== undefined ? controlledHalfCheckedKeys : internalHalfCheckedKeys;
85
- const loadedKeys = controlledLoadedKeys !== undefined ? controlledLoadedKeys : internalLoadedKeys;
86
-
87
- // 初始化展开状态
88
- useEffect(() => {
89
- if (defaultExpandAll) {
90
- const allKeys = TreeUtils.flattenTreeNodes(treeData).map(node => String(node.key));
91
- if (controlledExpandedKeys === undefined) {
92
- setInternalExpandedKeys(allKeys);
93
- }
94
- } else if (defaultExpandParent && treeData.length > 0) {
95
- const parentKeys = TreeUtils.getParentKeys(treeData, defaultExpandedKeys).map(key => String(key));
96
- if (controlledExpandedKeys === undefined) {
97
- setInternalExpandedKeys([...defaultExpandedKeys, ...parentKeys]);
98
- }
99
- }
100
- }, [treeData, defaultExpandAll, defaultExpandParent, defaultExpandedKeys, controlledExpandedKeys]);
101
-
102
- // 更新内部状态
103
- useEffect(() => {
104
- if (controlledSelectedKeys !== undefined) {
105
- setInternalSelectedKeys(controlledSelectedKeys);
106
- }
107
- }, [controlledSelectedKeys]);
108
-
109
- useEffect(() => {
110
- if (controlledExpandedKeys !== undefined) {
111
- setInternalExpandedKeys(controlledExpandedKeys);
112
- }
113
- }, [controlledExpandedKeys]);
114
-
115
- useEffect(() => {
116
- if (controlledCheckedKeys !== undefined) {
117
- setInternalCheckedKeys(controlledCheckedKeys);
118
- }
119
- }, [controlledCheckedKeys]);
120
-
121
- useEffect(() => {
122
- if (controlledHalfCheckedKeys !== undefined) {
123
- setInternalHalfCheckedKeys(controlledHalfCheckedKeys);
124
- }
125
- }, [controlledHalfCheckedKeys]);
126
-
127
- useEffect(() => {
128
- if (controlledLoadedKeys !== undefined) {
129
- setInternalLoadedKeys(controlledLoadedKeys);
130
- }
131
- }, [controlledLoadedKeys]);
132
-
133
- // 处理节点展开/收起
134
- const handleExpand = useCallback(async (key: Key, expanded: boolean, node: TreeNode) => {
135
- const newExpandedKeys = expanded
136
- ? [...expandedKeys, key]
137
- : expandedKeys.filter((k: Key) => String(k) !== String(key));
138
-
139
- if (controlledExpandedKeys === undefined) {
140
- setInternalExpandedKeys(newExpandedKeys);
141
- }
142
- onExpand?.(newExpandedKeys, node, expanded);
143
-
144
- // 异步加载数据
145
- if (expanded && loadData && !loadedKeys.includes(key) && !loadingKeys.includes(key)) {
146
- try {
147
- setLoadingKeys(prev => [...prev, key]);
148
- await loadData(node);
149
- setInternalLoadedKeys(prev => [...prev, key]);
150
- onLoad?.([key]);
151
- } catch (error) {
152
- console.error('Failed to load tree data:', error);
153
- } finally {
154
- setLoadingKeys(prev => prev.filter((k) => String(k) !== String(key)));
155
- }
156
- }
157
- }, [expandedKeys, controlledExpandedKeys, loadData, loadedKeys, loadingKeys, onExpand, onLoad]);
158
-
159
- // 处理节点选择
160
- const handleSelect = useCallback((key: Key, selected: boolean, node: TreeNode, event: ITouchEvent) => {
161
- if (disabled || !selectable) return;
162
-
163
- let newSelectedKeys: TreeSelectedKeys;
164
- if (multiple) {
165
- newSelectedKeys = selected
166
- ? selectedKeys.filter((k: Key) => String(k) !== String(key))
167
- : [...selectedKeys, key];
168
- } else {
169
- newSelectedKeys = selected ? [] : [key];
170
- }
171
-
172
- if (controlledSelectedKeys === undefined) {
173
- setInternalSelectedKeys(newSelectedKeys);
174
- }
175
- onSelect?.(newSelectedKeys, node, selected, event);
176
- }, [selectedKeys, controlledSelectedKeys, multiple, disabled, selectable, onSelect]);
177
-
178
- // 处理节点勾选
179
- const handleCheck = useCallback((key: string, checked: boolean, node: TreeNode) => {
180
- if (disabled || !checkable) return;
181
-
182
- let newCheckedKeys: TreeCheckedKeys;
183
- let newHalfCheckedKeys: TreeCheckedKeys;
184
-
185
- if (checkStrictly) {
186
- newCheckedKeys = checked
187
- ? [...checkedKeys, key]
188
- : checkedKeys.filter((k: Key) => String(k) !== String(key));
189
- newHalfCheckedKeys = halfCheckedKeys;
190
- } else {
191
- const result = TreeUtils.getCheckedKeys(treeData, key, checked, checkedKeys, halfCheckedKeys);
192
- newCheckedKeys = result.checkedKeys;
193
- newHalfCheckedKeys = result.halfCheckedKeys;
194
- }
195
-
196
- if (controlledCheckedKeys === undefined) {
197
- setInternalCheckedKeys(newCheckedKeys);
198
- }
199
- if (controlledHalfCheckedKeys === undefined) {
200
- setInternalHalfCheckedKeys(newHalfCheckedKeys);
201
- }
202
- onCheck?.(newCheckedKeys, node, checked, TreeUtils.getNodesByKeys(treeData, newCheckedKeys), newHalfCheckedKeys);
203
- }, [treeData, checkedKeys, halfCheckedKeys, checkStrictly, disabled, checkable, controlledCheckedKeys, controlledHalfCheckedKeys, onCheck]);
204
-
205
- // 处理右键点击
206
- const handleRightClick = useCallback((event: ITouchEvent, node: TreeNode) => {
207
- onRightClick?.({ event, node });
208
- }, [onRightClick]);
209
-
210
- // 过滤树节点
211
- const filteredTreeData = useMemo(() => {
212
- if (!filterTreeNode) return treeData;
213
- return TreeUtils.filterTreeNodes(treeData, filterTreeNode);
214
- }, [treeData, filterTreeNode]);
215
-
216
- // 获取样式配置
217
- const styles = getTreeStyles({ size, theme, mode, showLine, blockNode, disabled });
218
- const classNames = getTreeClassNames({ size, theme, mode, showLine, blockNode, disabled });
219
-
220
- // 渲染展开图标
221
- const renderExpandIcon = useCallback((node: TreeNode) => {
222
- const isLeaf = !node.children || node.children.length === 0;
223
- const isExpanded = expandedKeys.includes(String(node.key));
224
- const isLoading = loadingKeys.includes(String(node.key));
225
-
226
- if (isLeaf) {
227
- return switcherIcon ? (
228
- React.createElement(switcherIcon as any, {
229
- className: classNames.expandIconLeaf,
230
- ...node['switcherIconProps']
231
- })
232
- ) : (
233
- <View className={classNames.expandIconLeaf} />
234
- );
235
- }
236
-
237
- if (isLoading) {
238
- return (
239
- <View className={classNames.expandIconLoading}>
240
- <Text>🔄</Text>
241
- </View>
242
- );
243
- }
244
-
245
- return switcherIcon ? (
246
- React.createElement(switcherIcon as any, {
247
- className: `${classNames.expandIcon} ${isExpanded ? '' : 'tree-expand-icon-close'}`,
248
- style: { transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)' },
249
- ...node['switcherIconProps']
250
- })
251
- ) : (
252
- <View className={`${classNames.expandIcon} ${isExpanded ? '' : 'tree-expand-icon-close'}`}>
253
- <Text>{isExpanded ? '▼' : '▶'}</Text>
254
- </View>
255
- );
256
- }, [expandedKeys, loadingKeys, switcherIcon, classNames]);
257
-
258
- // 渲染复选框
259
- const renderCheckbox = useCallback((node: TreeNode) => {
260
- const isChecked = checkedKeys.includes(String(node.key));
261
- const isIndeterminate = halfCheckedKeys.includes(String(node.key));
262
-
263
- return (
264
- <View
265
- className={`${classNames.checkbox} ${isChecked ? classNames.checkboxChecked : ''} ${isIndeterminate ? classNames.checkboxIndeterminate : ''}`}
266
- onClick={(e) => {
267
- e.stopPropagation();
268
- handleCheck(String(node.key), !isChecked, node);
269
- }}
270
- >
271
- <View className={(classNames as any).checkboxInner}>
272
- {isChecked ? '✓' : isIndeterminate ? '−' : ''}
273
- </View>
274
- </View>
275
- );
276
- }, [checkedKeys, halfCheckedKeys, handleCheck, classNames]);
277
-
278
- // 渲染图标
279
- const renderIcon = useCallback((node: TreeNode) => {
280
- const isExpanded = expandedKeys.includes(String(node.key));
281
- const isSelected = selectedKeys.includes(String(node.key));
282
-
283
- if (icon) {
284
- return React.createElement(icon as any, {
285
- className: `${classNames.icon} ${isSelected ? classNames.iconOpen : isExpanded ? classNames.iconOpen : classNames.iconClose}`,
286
- ...node['iconProps']
287
- });
288
- }
289
-
290
- if (node.icon) {
291
- return React.createElement(node.icon as any, {
292
- className: `${classNames.icon} ${isSelected ? classNames.iconOpen : isExpanded ? classNames.iconOpen : classNames.iconClose}`,
293
- ...node['iconProps']
294
- });
295
- }
296
-
297
- return (
298
- <View className={`${classNames.icon} ${isSelected ? classNames.iconOpen : isExpanded ? classNames.iconOpen : classNames.iconClose}`}>
299
- <Text>{node.children && node.children.length > 0 ? (isExpanded ? '📂' : '📁') : '📄'}</Text>
300
- </View>
301
- );
302
- }, [expandedKeys, selectedKeys, icon, classNames]);
303
-
304
- // 渲染节点标题
305
- const renderTitle = useCallback((node: TreeNode) => {
306
- if (titleRender) {
307
- return titleRender(node);
308
- }
309
-
310
- return (
311
- <Text className={classNames.treeNodeTitle}>
312
- {node.title}
313
- </Text>
314
- );
315
- }, [titleRender, classNames]);
316
-
317
- // 渲染树节点
318
- const renderTreeNode = useCallback((node: TreeNode, level: number = 0) => {
319
- const isExpanded = expandedKeys.includes(String(node.key));
320
- const isSelected = selectedKeys.includes(String(node.key));
321
- const isLoading = loadingKeys.includes(String(node.key));
322
- const isLeaf = !node.children || node.children.length === 0;
323
-
324
- return (
325
- <View key={node.key} className={classNames.treeNode}>
326
- {/* 连接线 */}
327
- {showLine && level > 0 && (
328
- <View className={classNames.line} style={styles.getNodeIndent(level)} />
329
- )}
330
-
331
- {/* 节点内容 */}
332
- <View
333
- className={`${classNames.treeNodeContent} ${isSelected ? 'tree-node-selected' : ''} ${disabled || node.disabled ? 'tree-node-disabled' : ''}`}
334
- style={{
335
- ...styles.getNodeIndent(level),
336
- }}
337
- onClick={(e) => {
338
- if (disabled || node.disabled) return;
339
-
340
- if (expandAction === 'click' && !isLeaf) {
341
- handleExpand(node.key, !isExpanded, node);
342
- }
343
- handleSelect(node.key, !isSelected, node, e);
344
- }}
345
- onLongPress={(e) => {
346
- if (disabled || node.disabled) return;
347
- handleRightClick(e as ITouchEvent, node);
348
- }}
349
- >
350
- {/* 展开图标 */}
351
- <View className={classNames.treeNodeSwitcher} onClick={(e) => {
352
- e.stopPropagation();
353
- if (disabled || node.disabled || isLeaf) return;
354
- handleExpand(node.key, !isExpanded, node);
355
- }}>
356
- {renderExpandIcon(node)}
357
- </View>
358
-
359
- {/* 复选框 */}
360
- {checkable && (
361
- <View className={classNames.treeNodeCheckbox}>
362
- {renderCheckbox(node)}
363
- </View>
364
- )}
365
-
366
- {/* 图标 */}
367
- {showIcon && (
368
- <View className={classNames.treeNodeIcon}>
369
- {renderIcon(node)}
370
- </View>
371
- )}
372
-
373
- {/* 标题 */}
374
- <View className={classNames.treeNodeTitle}>
375
- {renderTitle(node)}
376
- </View>
377
-
378
- {/* 加载状态 */}
379
- {isLoading && (
380
- <View className={classNames.loading}>
381
- <Text>加载中...</Text>
382
- </View>
383
- )}
384
- </View>
385
-
386
- {/* 子节点 */}
387
- {isExpanded && node.children && node.children.length > 0 && (
388
- <View className="tree-children">
389
- {node.children.map(child => renderTreeNode(child, level + 1))}
390
- </View>
391
- )}
392
- </View>
393
- );
394
- }, [expandedKeys, selectedKeys, checkedKeys, halfCheckedKeys, loadingKeys, showLine, checkable, showIcon, disabled, handleExpand, handleSelect, handleRightClick, renderExpandIcon, renderCheckbox, renderIcon, renderTitle, classNames, styles]);
395
-
396
- // 暴露给外部的引用方法
397
- React.useImperativeHandle(ref, () => ({
398
- element: treeRef.current,
399
- // TreeRef interface methods
400
- getValue: () => selectedKeys.length > 0 ? selectedKeys[0] : null,
401
- setValue: (value: TreeValue) => {
402
- const keysArray = Array.isArray(value) ? value : (value === null ? [] : [value]);
403
- if (controlledSelectedKeys === undefined) {
404
- setInternalSelectedKeys(keysArray);
405
- }
406
- onSelect?.(keysArray, keysArray[0] ? TreeUtils.getNodeByKey(treeData, keysArray[0]) : null, true, {} as ITouchEvent);
407
- },
408
- getTreeData: () => treeData,
409
- setTreeData: (_data: TreeDataSource) => {
410
- // Tree data is controlled via props, this would need to be handled by parent
411
- console.warn('setTreeData: Tree data is controlled via props');
412
- },
413
- getSelectedKeys: () => selectedKeys,
414
- setSelectedKeys: (keys: TreeSelectedKeys) => {
415
- const keysArray = Array.isArray(keys) ? keys : (keys === null ? [] : [keys]);
416
- if (controlledSelectedKeys === undefined) {
417
- setInternalSelectedKeys(keysArray);
418
- }
419
- onSelect?.(keysArray, keysArray[0] ? TreeUtils.getNodeByKey(treeData, keysArray[0]) : null, true, {} as ITouchEvent);
420
- },
421
- getExpandedKeys: () => expandedKeys,
422
- setExpandedKeys: (keys: TreeExpandedKeys) => {
423
- const keysArray = Array.isArray(keys) ? keys : (keys === null ? [] : [keys]);
424
- if (controlledExpandedKeys === undefined) {
425
- setInternalExpandedKeys(keysArray);
426
- }
427
- onExpand?.(keysArray, keysArray[0] ? TreeUtils.getNodeByKey(treeData, keysArray[0]) : null, true);
428
- },
429
- getCheckedKeys: () => checkedKeys,
430
- setCheckedKeys: (keys: TreeCheckedKeys) => {
431
- const keysArray = Array.isArray(keys) ? keys : (keys === null ? [] : [keys]);
432
- if (controlledCheckedKeys === undefined) {
433
- setInternalCheckedKeys(keysArray);
434
- }
435
- onCheck?.(keysArray, keysArray[0] ? TreeUtils.getNodeByKey(treeData, keysArray[0]) : null, true, TreeUtils.getNodesByKeys(treeData, keysArray), halfCheckedKeys);
436
- },
437
- getHalfCheckedKeys: () => halfCheckedKeys,
438
- getSelectedNodes: () => TreeUtils.getNodesByKeys(treeData, selectedKeys),
439
- getCheckedNodes: () => TreeUtils.getNodesByKeys(treeData, checkedKeys),
440
- getExpandedNodes: () => TreeUtils.getNodesByKeys(treeData, expandedKeys),
441
- findNode: (key: string | number) => TreeUtils.getNodeByKey(treeData, key),
442
- findNodePath: (key: string | number) => {
443
- const node = TreeUtils.getNodeByKey(treeData, key);
444
- return node ? [node] : [];
445
- },
446
- expandNode: (key: string | number, expanded: boolean = true) => {
447
- const newExpandedKeys = expanded
448
- ? [...expandedKeys, key]
449
- : expandedKeys.filter((k: Key) => String(k) !== String(key));
450
- if (controlledExpandedKeys === undefined) {
451
- setInternalExpandedKeys(newExpandedKeys);
452
- }
453
- onExpand?.(newExpandedKeys, TreeUtils.getNodeByKey(treeData, key), expanded);
454
- },
455
- selectNode: (key: string | number, selected: boolean = true) => {
456
- const newSelectedKeys = selected
457
- ? [...selectedKeys, key]
458
- : selectedKeys.filter((k: Key) => String(k) !== String(key));
459
- if (controlledSelectedKeys === undefined) {
460
- setInternalSelectedKeys(newSelectedKeys);
461
- }
462
- onSelect?.(newSelectedKeys, TreeUtils.getNodeByKey(treeData, key), selected, {} as ITouchEvent);
463
- },
464
- checkNode: (key: string | number, checked: boolean = true) => {
465
- const node = TreeUtils.getNodeByKey(treeData, key);
466
- if (node) {
467
- handleCheck(String(key), checked, node);
468
- }
469
- },
470
- expandAll: () => {
471
- const allKeys = TreeUtils.flattenTreeNodes(treeData)
472
- .filter(node => node.children && node.children.length > 0)
473
- .map(node => node.key);
474
- if (controlledExpandedKeys === undefined) {
475
- setInternalExpandedKeys(allKeys);
476
- }
477
- onExpand?.(allKeys, allKeys[0] ? TreeUtils.getNodeByKey(treeData, allKeys[0]) : null, true);
478
- },
479
- collapseAll: () => {
480
- if (controlledExpandedKeys === undefined) {
481
- setInternalExpandedKeys([]);
482
- }
483
- onExpand?.([], TreeUtils.getNodeByKey(treeData, ''), false);
484
- },
485
- selectAll: () => {
486
- const allKeys = TreeUtils.flattenTreeNodes(treeData).map(node => node.key);
487
- if (controlledSelectedKeys === undefined) {
488
- setInternalSelectedKeys(allKeys);
489
- }
490
- onSelect?.(allKeys, TreeUtils.getNodesByKeys(treeData, allKeys)[0], true, {} as ITouchEvent);
491
- },
492
- clearSelect: () => {
493
- if (controlledSelectedKeys === undefined) {
494
- setInternalSelectedKeys([]);
495
- }
496
- onSelect?.([], TreeUtils.getNodeByKey(treeData, ''), false, {} as ITouchEvent);
497
- },
498
- checkAll: () => {
499
- const allKeys = TreeUtils.flattenTreeNodes(treeData).map(node => node.key);
500
- if (controlledCheckedKeys === undefined) {
501
- setInternalCheckedKeys(allKeys);
502
- }
503
- if (controlledHalfCheckedKeys === undefined) {
504
- setInternalHalfCheckedKeys([]);
505
- }
506
- onCheck?.(allKeys, TreeUtils.getNodesByKeys(treeData, allKeys)[0], true, TreeUtils.getNodesByKeys(treeData, allKeys), []);
507
- },
508
- clearCheck: () => {
509
- if (controlledCheckedKeys === undefined) {
510
- setInternalCheckedKeys([]);
511
- }
512
- if (controlledHalfCheckedKeys === undefined) {
513
- setInternalHalfCheckedKeys([]);
514
- }
515
- onCheck?.([], TreeUtils.getNodeByKey(treeData, ''), false, [], []);
516
- },
517
- filterNodes: (filterFn: (node: TreeNode) => boolean) => TreeUtils.filterTreeNodes(treeData, filterFn),
518
- addNode: (_parentNodeKey: string | number, _newNode: TreeNode) => {
519
- console.warn('addNode: Tree data is controlled via props');
520
- },
521
- updateNode: (_key: string | number, _updates: Partial<TreeNode>) => {
522
- console.warn('updateNode: Tree data is controlled via props');
523
- },
524
- removeNode: (_key: string | number) => {
525
- console.warn('removeNode: Tree data is controlled via props');
526
- },
527
- moveNode: (_key: string | number, _targetKey: string | number, _position: 'before' | 'after' | 'inside') => {
528
- console.warn('moveNode: Tree data is controlled via props');
529
- },
530
- disableNode: (_key: string | number, _disabled: boolean = true) => {
531
- console.warn('disableNode: Tree data is controlled via props');
532
- },
533
- enableNode: (_key: string | number) => {
534
- console.warn('enableNode: Tree data is controlled via props');
535
- },
536
- scrollToNode: (key: string | number) => {
537
- console.log('Scroll to node:', key);
538
- },
539
- refreshNode: (key: string | number) => {
540
- console.log('Refresh node:', key);
541
- },
542
- reset: () => {
543
- if (controlledSelectedKeys === undefined) {
544
- setInternalSelectedKeys(defaultSelectedKeys);
545
- }
546
- if (controlledExpandedKeys === undefined) {
547
- setInternalExpandedKeys(defaultExpandedKeys);
548
- }
549
- if (controlledCheckedKeys === undefined) {
550
- setInternalCheckedKeys(defaultCheckedKeys);
551
- }
552
- if (controlledHalfCheckedKeys === undefined) {
553
- setInternalHalfCheckedKeys(defaultHalfCheckedKeys);
554
- }
555
- },
556
- scrollTo: ({ key }: { key: string }) => {
557
- // 在Taro环境中,滚动功能可能有限制
558
- console.log('Scroll to:', key);
559
- },
560
- getNodeByKey: (key: string) => TreeUtils.getNodeByKey(treeData, key),
561
- getNodesByKeys: (keys: string[]) => TreeUtils.getNodesByKeys(treeData, keys),
562
- }), [
563
- treeData,
564
- selectedKeys,
565
- expandedKeys,
566
- checkedKeys,
567
- halfCheckedKeys,
568
- controlledSelectedKeys,
569
- controlledExpandedKeys,
570
- controlledCheckedKeys,
571
- controlledHalfCheckedKeys,
572
- onSelect,
573
- onExpand,
574
- onCheck,
575
- handleCheck,
576
- defaultSelectedKeys,
577
- defaultExpandedKeys,
578
- defaultCheckedKeys,
579
- defaultHalfCheckedKeys,
580
- ]);
581
-
582
- // 无障碍状态通过 restProps 传递
583
-
584
- return (
585
- <View
586
- ref={treeRef}
587
- className={`${classNames.tree} ${className || ''}`}
588
- style={{ ...styles.tree, ...style }}
589
- {...restProps}
590
- >
591
- {filteredTreeData.map((node: TreeNode) => renderTreeNode(node))}
592
- </View>
593
- );
594
- });
595
-
596
- /** Tree组件显示名称 */
597
- TreeComponent.displayName = 'Tree';
598
-
599
- /** 导出Tree组件 */
600
- export const Tree = TreeComponent;