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,496 +0,0 @@
1
- import React from 'react'
2
- import { render, screen, fireEvent, act } from '@testing-library/react'
3
- import { Tree } from '../src/components/navigation/Tree'
4
- import type { TreeProps, TreeRef, TreeNode } from '../src/components/navigation/Tree/Tree.types'
5
-
6
- // Mock Taro components
7
- vi.mock('@tarojs/components', () => ({
8
- View: ({ children, className, style, onClick, onLongPress, ...props }) => {
9
- return (
10
- <div
11
- className={className}
12
- style={style}
13
- onClick={onClick}
14
- onContextMenu={onLongPress}
15
- {...props}
16
- >
17
- {children}
18
- </div>
19
- )
20
- },
21
- Text: ({ children, className, style, ...props }) => {
22
- return (
23
- <span className={className} style={style} {...props}>
24
- {children}
25
- </span>
26
- )
27
- }
28
- }))
29
-
30
- // Mock the Tree styles
31
- vi.mock('../src/components/navigation/Tree/Tree.styles', () => ({
32
- getTreeStyles: (config: any) => ({
33
- tree: {
34
- backgroundColor: config.theme === 'dark' ? '#1f1f1f' : '#ffffff',
35
- borderRadius: '4px',
36
- padding: '8px',
37
- },
38
- getNodeIndent: (level: number) => ({
39
- paddingLeft: `${level * 20}px`,
40
- }),
41
- }),
42
- getTreeClassNames: (config: any) => ({
43
- tree: `taro-uno-tree taro-uno-tree--${config.size} taro-uno-tree--${config.theme} taro-uno-tree--${config.mode} ${config.disabled ? 'taro-uno-tree--disabled' : ''} ${config.className || ''}`,
44
- treeNode: 'taro-uno-tree-node',
45
- treeNodeContent: 'taro-uno-tree-node-content',
46
- treeNodeSwitcher: 'taro-uno-tree-node-switcher',
47
- treeNodeCheckbox: 'taro-uno-tree-node-checkbox',
48
- treeNodeIcon: 'taro-uno-tree-node-icon',
49
- treeNodeTitle: 'taro-uno-tree-node-title',
50
- expandIcon: 'taro-uno-tree-expand-icon',
51
- expandIconLeaf: 'taro-uno-tree-expand-icon-leaf',
52
- expandIconLoading: 'taro-uno-tree-expand-icon-loading',
53
- checkbox: 'taro-uno-tree-checkbox',
54
- checkboxChecked: 'taro-uno-tree-checkbox-checked',
55
- checkboxIndeterminate: 'taro-uno-tree-checkbox-indeterminate',
56
- icon: 'taro-uno-tree-icon',
57
- iconOpen: 'taro-uno-tree-icon-open',
58
- iconClose: 'taro-uno-tree-icon-close',
59
- loading: 'taro-uno-tree-loading',
60
- line: 'taro-uno-tree-line',
61
- checkboxInner: 'taro-uno-tree-checkbox-inner',
62
- }),
63
- }))
64
-
65
- // Mock the Tree utils
66
- vi.mock('../src/components/navigation/Tree/Tree.utils', () => ({
67
- TreeUtils: {
68
- flattenTreeNodes: (treeData: TreeNode[]) => {
69
- const result: TreeNode[] = []
70
- function traverse(nodes: TreeNode[]) {
71
- nodes.forEach(node => {
72
- result.push(node)
73
- if (node.children && node.children.length > 0) {
74
- traverse(node.children)
75
- }
76
- })
77
- }
78
- traverse(treeData)
79
- return result
80
- },
81
- getNodeByKey: (treeData: TreeNode[], key: string | number) => {
82
- function traverse(nodes: TreeNode[]): TreeNode | null {
83
- for (const node of nodes) {
84
- if (node.key === key) {
85
- return node
86
- }
87
- if (node.children && node.children.length > 0) {
88
- const found = traverse(node.children)
89
- if (found) return found
90
- }
91
- }
92
- return null
93
- }
94
- return traverse(treeData)
95
- },
96
- getNodesByKeys: (treeData: TreeNode[], keys: (string | number)[]) => {
97
- return keys
98
- .map(key => TreeUtils.getNodeByKey(treeData, key))
99
- .filter((node): node is TreeNode => node !== null)
100
- },
101
- getParentKeys: (treeData: TreeNode[], targetKeys: (string | number)[]) => {
102
- const parentKeys: Set<string | number> = new Set()
103
- function traverse(nodes: TreeNode[], parentKey?: string | number) {
104
- nodes.forEach(node => {
105
- if (targetKeys.includes(node.key) && parentKey !== undefined) {
106
- parentKeys.add(parentKey)
107
- }
108
- if (node.children && node.children.length > 0) {
109
- traverse(node.children, node.key)
110
- }
111
- })
112
- }
113
- traverse(treeData)
114
- return Array.from(parentKeys)
115
- },
116
- getCheckedKeys: (
117
- treeData: TreeNode[],
118
- key: string | number,
119
- checked: boolean,
120
- currentCheckedKeys: (string | number)[],
121
- currentHalfCheckedKeys: (string | number)[]
122
- ) => {
123
- const node = TreeUtils.getNodeByKey(treeData, key)
124
- if (!node) {
125
- return { checkedKeys: currentCheckedKeys, halfCheckedKeys: currentHalfCheckedKeys }
126
- }
127
-
128
- const checkedKeys = new Set(currentCheckedKeys)
129
- const halfCheckedKeys = new Set(currentHalfCheckedKeys)
130
-
131
- if (checked) {
132
- checkedKeys.add(key)
133
- // Add all children
134
- const addChildren = (node: TreeNode) => {
135
- if (node.children) {
136
- node.children.forEach(child => {
137
- checkedKeys.add(child.key)
138
- addChildren(child)
139
- })
140
- }
141
- }
142
- addChildren(node)
143
- } else {
144
- checkedKeys.delete(key)
145
- // Remove all children
146
- const removeChildren = (node: TreeNode) => {
147
- if (node.children) {
148
- node.children.forEach(child => {
149
- checkedKeys.delete(child.key)
150
- removeChildren(child)
151
- })
152
- }
153
- }
154
- removeChildren(node)
155
- }
156
-
157
- return {
158
- checkedKeys: Array.from(checkedKeys),
159
- halfCheckedKeys: Array.from(halfCheckedKeys),
160
- }
161
- },
162
- filterTreeNodes: (treeData: TreeNode[], filterFn: (node: TreeNode) => boolean) => {
163
- return treeData.filter(node => {
164
- if (filterFn(node)) return true
165
- if (node.children) {
166
- const filteredChildren = TreeUtils.filterTreeNodes(node.children, filterFn)
167
- if (filteredChildren.length > 0) {
168
- node.children = filteredChildren
169
- return true
170
- }
171
- }
172
- return false
173
- })
174
- },
175
- },
176
- }))
177
-
178
- // Sample tree data for testing
179
- const sampleTreeData: TreeNode[] = [
180
- {
181
- key: '1',
182
- title: 'Parent 1',
183
- children: [
184
- {
185
- key: '1-1',
186
- title: 'Child 1-1',
187
- },
188
- {
189
- key: '1-2',
190
- title: 'Child 1-2',
191
- children: [
192
- {
193
- key: '1-2-1',
194
- title: 'Grandchild 1-2-1',
195
- },
196
- ],
197
- },
198
- ],
199
- },
200
- {
201
- key: '2',
202
- title: 'Parent 2',
203
- children: [
204
- {
205
- key: '2-1',
206
- title: 'Child 2-1',
207
- },
208
- ],
209
- },
210
- ]
211
-
212
- describe('Tree Component', () => {
213
- const mockRef = React.createRef<TreeRef>()
214
-
215
- beforeEach(() => {
216
- vi.clearAllMocks()
217
- })
218
-
219
- describe('Rendering', () => {
220
- it('renders tree with default props', () => {
221
- render(<Tree treeData={sampleTreeData} data-testid="tree" />)
222
- const tree = screen.getByTestId('tree')
223
- expect(tree).toBeInTheDocument()
224
- expect(tree).toHaveClass('taro-uno-tree')
225
- })
226
-
227
- it('renders tree with custom size', () => {
228
- render(<Tree treeData={sampleTreeData} size="large" data-testid="tree" />)
229
- const tree = screen.getByTestId('tree')
230
- expect(tree).toBeInTheDocument()
231
- expect(tree).toHaveClass('taro-uno-tree--large')
232
- })
233
-
234
- it('renders tree with dark theme', () => {
235
- render(<Tree treeData={sampleTreeData} theme="dark" data-testid="tree" />)
236
- const tree = screen.getByTestId('tree')
237
- expect(tree).toBeInTheDocument()
238
- expect(tree).toHaveClass('taro-uno-tree--dark')
239
- })
240
-
241
- it('renders tree with directory mode', () => {
242
- render(<Tree treeData={sampleTreeData} mode="directory" data-testid="tree" />)
243
- const tree = screen.getByTestId('tree')
244
- expect(tree).toBeInTheDocument()
245
- expect(tree).toHaveClass('taro-uno-tree--directory')
246
- })
247
-
248
- it('renders tree with showLine', () => {
249
- render(<Tree treeData={sampleTreeData} showLine data-testid="tree" />)
250
- const tree = screen.getByTestId('tree')
251
- expect(tree).toBeInTheDocument()
252
- })
253
-
254
- it('renders tree without icons', () => {
255
- render(<Tree treeData={sampleTreeData} showIcon={false} data-testid="tree" />)
256
- const tree = screen.getByTestId('tree')
257
- expect(tree).toBeInTheDocument()
258
- })
259
-
260
- it('renders tree with block nodes', () => {
261
- render(<Tree treeData={sampleTreeData} blockNode data-testid="tree" />)
262
- const tree = screen.getByTestId('tree')
263
- expect(tree).toBeInTheDocument()
264
- })
265
-
266
- it('renders tree with checkable', () => {
267
- render(<Tree treeData={sampleTreeData} checkable data-testid="tree" />)
268
- const tree = screen.getByTestId('tree')
269
- expect(tree).toBeInTheDocument()
270
- })
271
-
272
- it('renders tree with checkStrictly', () => {
273
- render(<Tree treeData={sampleTreeData} checkable checkStrictly data-testid="tree" />)
274
- const tree = screen.getByTestId('tree')
275
- expect(tree).toBeInTheDocument()
276
- })
277
-
278
- it('renders tree without selection', () => {
279
- render(<Tree treeData={sampleTreeData} selectable={false} data-testid="tree" />)
280
- const tree = screen.getByTestId('tree')
281
- expect(tree).toBeInTheDocument()
282
- })
283
-
284
- it('renders tree with multiple selection', () => {
285
- render(<Tree treeData={sampleTreeData} multiple data-testid="tree" />)
286
- const tree = screen.getByTestId('tree')
287
- expect(tree).toBeInTheDocument()
288
- })
289
-
290
- it('renders tree with disabled state', () => {
291
- render(<Tree treeData={sampleTreeData} disabled data-testid="tree" />)
292
- const tree = screen.getByTestId('tree')
293
- expect(tree).toBeInTheDocument()
294
- expect(tree).toHaveClass('taro-uno-tree--disabled')
295
- })
296
-
297
- it('renders tree with custom className', () => {
298
- render(<Tree treeData={sampleTreeData} className="custom-tree" data-testid="tree" />)
299
- const tree = screen.getByTestId('tree')
300
- expect(tree).toBeInTheDocument()
301
- expect(tree).toHaveClass('custom-tree')
302
- })
303
-
304
- it('renders tree with custom style', () => {
305
- const customStyle = { backgroundColor: '#f0f0f0', padding: '16px' }
306
- render(<Tree treeData={sampleTreeData} style={customStyle} data-testid="tree" />)
307
- const tree = screen.getByTestId('tree')
308
- expect(tree).toBeInTheDocument()
309
- })
310
-
311
- it('renders empty tree gracefully', () => {
312
- render(<Tree treeData={[]} data-testid="tree" />)
313
- const tree = screen.getByTestId('tree')
314
- expect(tree).toBeInTheDocument()
315
- })
316
- })
317
-
318
- describe('Node Selection', () => {
319
- it('selects node on click', () => {
320
- const handleSelect = vi.fn()
321
- render(<Tree treeData={sampleTreeData} onSelect={handleSelect} data-testid="tree" />)
322
-
323
- const nodeTitle = screen.getByText('Parent 1')
324
- fireEvent.click(nodeTitle)
325
-
326
- expect(handleSelect).toHaveBeenCalled()
327
- })
328
-
329
- it('selects multiple nodes when multiple is true', () => {
330
- const handleSelect = vi.fn()
331
- render(<Tree treeData={sampleTreeData} multiple onSelect={handleSelect} data-testid="tree" />)
332
-
333
- const node1 = screen.getByText('Parent 1')
334
- const node2 = screen.getByText('Parent 2')
335
-
336
- fireEvent.click(node1)
337
- fireEvent.click(node2)
338
-
339
- expect(handleSelect).toHaveBeenCalledTimes(2)
340
- })
341
-
342
- it('does not select node when disabled', () => {
343
- const handleSelect = vi.fn()
344
- render(<Tree treeData={sampleTreeData} disabled onSelect={handleSelect} data-testid="tree" />)
345
-
346
- const nodeTitle = screen.getByText('Parent 1')
347
- fireEvent.click(nodeTitle)
348
-
349
- expect(handleSelect).not.toHaveBeenCalled()
350
- })
351
-
352
- it('does not select node when selectable is false', () => {
353
- const handleSelect = vi.fn()
354
- render(<Tree treeData={sampleTreeData} selectable={false} onSelect={handleSelect} data-testid="tree" />)
355
-
356
- const nodeTitle = screen.getByText('Parent 1')
357
- fireEvent.click(nodeTitle)
358
-
359
- expect(handleSelect).not.toHaveBeenCalled()
360
- })
361
- })
362
-
363
- describe('Ref API', () => {
364
- it('exposes ref methods correctly', () => {
365
- render(<Tree treeData={sampleTreeData} ref={mockRef} data-testid="tree" />)
366
-
367
- act(() => {
368
- expect(mockRef.current).toBeDefined()
369
- expect(mockRef.current?.getSelectedKeys()).toEqual([])
370
- expect(mockRef.current?.getExpandedKeys()).toEqual([])
371
- expect(mockRef.current?.getCheckedKeys()).toEqual([])
372
- expect(mockRef.current?.getTreeData()).toEqual(sampleTreeData)
373
- })
374
- })
375
-
376
- it('sets selected keys via ref method', () => {
377
- render(<Tree treeData={sampleTreeData} ref={mockRef} data-testid="tree" />)
378
-
379
- act(() => {
380
- if (mockRef.current) {
381
- mockRef.current.setSelectedKeys(['1'])
382
- expect(mockRef.current.getSelectedKeys()).toEqual(['1'])
383
- }
384
- })
385
- })
386
-
387
- it('sets expanded keys via ref method', () => {
388
- render(<Tree treeData={sampleTreeData} ref={mockRef} data-testid="tree" />)
389
-
390
- act(() => {
391
- if (mockRef.current) {
392
- mockRef.current.setExpandedKeys(['1'])
393
- expect(mockRef.current.getExpandedKeys()).toEqual(['1'])
394
- }
395
- })
396
- })
397
-
398
- it('sets checked keys via ref method', () => {
399
- render(<Tree treeData={sampleTreeData} checkable ref={mockRef} data-testid="tree" />)
400
-
401
- act(() => {
402
- if (mockRef.current) {
403
- mockRef.current.setCheckedKeys(['1'])
404
- expect(mockRef.current.getCheckedKeys()).toEqual(['1'])
405
- }
406
- })
407
- })
408
-
409
- it('provides element access via ref', () => {
410
- render(<Tree treeData={sampleTreeData} ref={mockRef} data-testid="tree" />)
411
-
412
- act(() => {
413
- expect(mockRef.current?.element).toBeDefined()
414
- })
415
- })
416
- })
417
-
418
- describe('Accessibility', () => {
419
- it('has proper role attribute', () => {
420
- render(<Tree treeData={sampleTreeData} accessibilityRole="tree" data-testid="tree" />)
421
- const tree = screen.getByTestId('tree')
422
- expect(tree).toHaveAttribute('accessibilityRole', 'tree')
423
- })
424
-
425
- it('supports accessibilityLabel', () => {
426
- render(<Tree treeData={sampleTreeData} accessibilityLabel="Tree navigation" data-testid="tree" />)
427
- const tree = screen.getByTestId('tree')
428
- expect(tree).toHaveAttribute('accessibilityLabel', 'Tree navigation')
429
- })
430
-
431
- it('supports accessibilityState', () => {
432
- render(<Tree treeData={sampleTreeData} accessibilityState={{ disabled: true }} data-testid="tree" />)
433
- const tree = screen.getByTestId('tree')
434
- expect(tree).toHaveAttribute('accessibilityState', '{"disabled":true}')
435
- })
436
-
437
- it('supports data attributes', () => {
438
- render(<Tree treeData={sampleTreeData} data-testid="tree" data-custom="value" />)
439
- const tree = screen.getByTestId('tree')
440
- expect(tree).toHaveAttribute('data-custom', 'value')
441
- })
442
-
443
- it('supports accessible prop', () => {
444
- render(<Tree treeData={sampleTreeData} accessible={false} data-testid="tree" />)
445
- const tree = screen.getByTestId('tree')
446
- expect(tree).toHaveAttribute('accessible', 'false')
447
- })
448
- })
449
-
450
- describe('Edge Cases', () => {
451
- it('handles undefined treeData gracefully', () => {
452
- render(<Tree treeData={undefined as any} data-testid="tree" />)
453
- const tree = screen.getByTestId('tree')
454
- expect(tree).toBeInTheDocument()
455
- })
456
-
457
- it('handles null treeData gracefully', () => {
458
- render(<Tree treeData={null as any} data-testid="tree" />)
459
- const tree = screen.getByTestId('tree')
460
- expect(tree).toBeInTheDocument()
461
- })
462
-
463
- it('handles treeData with invalid nodes gracefully', () => {
464
- const invalidTreeData = [
465
- { key: '1', title: 'Valid Node' },
466
- { key: null, title: 'Invalid Node' },
467
- { title: 'Node without key' },
468
- ] as any
469
- render(<Tree treeData={invalidTreeData} data-testid="tree" />)
470
- const tree = screen.getByTestId('tree')
471
- expect(tree).toBeInTheDocument()
472
- })
473
- })
474
-
475
- describe('Style Application', () => {
476
- it('applies custom styles correctly', () => {
477
- const customStyle = { backgroundColor: '#ff0000', color: '#ffffff' }
478
- render(<Tree treeData={sampleTreeData} style={customStyle} data-testid="tree" />)
479
- const tree = screen.getByTestId('tree')
480
- expect(tree).toHaveStyle('background-color: #ff0000')
481
- expect(tree).toHaveStyle('color: #ffffff')
482
- })
483
-
484
- it('applies theme-specific styles', () => {
485
- render(<Tree treeData={sampleTreeData} theme="dark" data-testid="tree" />)
486
- const tree = screen.getByTestId('tree')
487
- expect(tree).toHaveClass('taro-uno-tree--dark')
488
- })
489
-
490
- it('applies size-specific styles', () => {
491
- render(<Tree treeData={sampleTreeData} size="large" data-testid="tree" />)
492
- const tree = screen.getByTestId('tree')
493
- expect(tree).toHaveClass('taro-uno-tree--large')
494
- })
495
- })
496
- })
@@ -1,6 +0,0 @@
1
- import React from 'react';
2
- import { Tree } from './Tree';
3
-
4
- test('Tree can be imported', () => {
5
- expect(Tree).toBeDefined();
6
- });
@@ -1,6 +0,0 @@
1
- import React from 'react';
2
-
3
- // Test if the Tree component can be imported
4
- test('Tree component can be imported', () => {
5
- expect(true).toBe(true);
6
- });
@@ -1,5 +0,0 @@
1
- import React from 'react';
2
-
3
- test('Tree test minimal', () => {
4
- expect(true).toBe(true);
5
- });
@@ -1,30 +0,0 @@
1
- import React from 'react'
2
- import { render, screen } from '@testing-library/react'
3
- import { Tree } from '../Tree'
4
- import type { TreeNode } from '../Tree.types'
5
-
6
- // Simple test data
7
- const simpleTreeData: TreeNode[] = [
8
- {
9
- key: '1',
10
- title: 'Node 1',
11
- },
12
- {
13
- key: '2',
14
- title: 'Node 2',
15
- },
16
- ]
17
-
18
- describe('Tree Component - Simple Test', () => {
19
- it('renders without crashing', () => {
20
- render(<Tree treeData={simpleTreeData} data-testid="tree" />)
21
- const tree = screen.getByTestId('tree')
22
- expect(tree).toBeInTheDocument()
23
- })
24
-
25
- it('renders with custom className', () => {
26
- render(<Tree treeData={simpleTreeData} className="custom-tree" data-testid="tree" />)
27
- const tree = screen.getByTestId('tree')
28
- expect(tree).toHaveClass('custom-tree')
29
- })
30
- })