@nutui/nutui-react-taro 1.5.2-beta.1 → 1.5.2

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 (231) hide show
  1. package/dist/esm/ActionSheet.js +90 -14
  2. package/dist/esm/Address.js +620 -21
  3. package/dist/esm/Animate.js +53 -7
  4. package/dist/esm/AnimatingNumbers.js +125 -7
  5. package/dist/esm/Audio.js +264 -19
  6. package/dist/esm/Avatar.js +130 -11
  7. package/dist/esm/{AvatarContext-c96afdcc.js → AvatarContext-15733596.js} +1 -3
  8. package/dist/esm/AvatarGroup.js +41 -11
  9. package/dist/esm/BackTop.js +138 -10
  10. package/dist/esm/Badge.js +71 -9
  11. package/dist/esm/Barrage.js +97 -8
  12. package/dist/esm/Button.js +108 -9
  13. package/dist/esm/Calendar.js +128 -20
  14. package/dist/esm/CalendarItem.js +674 -12
  15. package/dist/esm/Card.js +61 -11
  16. package/dist/esm/Cascader.js +671 -16
  17. package/dist/esm/Cell.js +101 -9
  18. package/dist/esm/CellGroup.js +2 -5
  19. package/dist/esm/Checkbox.js +5 -7
  20. package/dist/esm/CheckboxGroup.js +111 -8
  21. package/dist/esm/CircleProgress.js +114 -8
  22. package/dist/esm/Col.js +57 -7
  23. package/dist/esm/Collapse.js +97 -7
  24. package/dist/esm/CollapseItem.js +146 -8
  25. package/dist/esm/ConfigProvider.js +187 -8
  26. package/dist/esm/CountDown.js +247 -9
  27. package/dist/esm/DatePicker.js +309 -25
  28. package/dist/esm/Dialog.js +296 -17
  29. package/dist/esm/Divider.js +34 -7
  30. package/dist/esm/Drag.js +118 -7
  31. package/dist/esm/Elevator.js +234 -8
  32. package/dist/esm/Ellipsis.js +176 -10
  33. package/dist/esm/Empty.js +79 -8
  34. package/dist/esm/FixedNav.js +103 -14
  35. package/dist/esm/Form.js +215 -10
  36. package/dist/esm/FormItem.js +3 -10
  37. package/dist/esm/Grid.js +81 -11
  38. package/dist/esm/GridItem.js +123 -13
  39. package/dist/esm/Icon.js +2 -5
  40. package/dist/esm/Image.js +169 -11
  41. package/dist/esm/ImagePreview.js +225 -19
  42. package/dist/esm/Indicator.js +50 -7
  43. package/dist/esm/Infiniteloading.js +215 -14
  44. package/dist/esm/Input.js +362 -12
  45. package/dist/esm/InputNumber.js +275 -9
  46. package/dist/esm/Layout.js +13 -5
  47. package/dist/esm/Menu.js +153 -10
  48. package/dist/esm/MenuItem.js +175 -15
  49. package/dist/esm/NavBar.js +114 -9
  50. package/dist/esm/NoticeBar.js +568 -10
  51. package/dist/esm/Notify.js +234 -8
  52. package/dist/esm/NumberKeyboard.js +247 -17
  53. package/dist/esm/Overlay.js +2 -6
  54. package/dist/esm/Pagination.js +168 -9
  55. package/dist/esm/Picker.js +494 -22
  56. package/dist/esm/Popover.js +223 -12
  57. package/dist/esm/Popup.js +193 -13
  58. package/dist/esm/Price.js +84 -6
  59. package/dist/esm/Progress.js +122 -9
  60. package/dist/esm/PullToRefresh.js +276 -13
  61. package/dist/esm/Radio.js +4 -8
  62. package/dist/esm/RadioGroup.js +120 -7
  63. package/dist/esm/Range.js +406 -15
  64. package/dist/esm/Rate.js +121 -9
  65. package/dist/esm/Row.js +49 -7
  66. package/dist/esm/SearchBar.js +235 -12
  67. package/dist/esm/ShortPassword.js +191 -17
  68. package/dist/esm/SideNavBar.js +57 -19
  69. package/dist/esm/SideNavBarItem.js +24 -5
  70. package/dist/esm/Signature.js +153 -13
  71. package/dist/esm/Skeleton.js +98 -12
  72. package/dist/esm/Step.js +87 -10
  73. package/dist/esm/Steps.js +38 -8
  74. package/dist/esm/Sticky.js +190 -11
  75. package/dist/esm/SubSideNavBar.js +78 -6
  76. package/dist/esm/Swipe.js +230 -10
  77. package/dist/esm/Swiper.js +490 -9
  78. package/dist/esm/SwiperItem.js +36 -8
  79. package/dist/esm/Switch.js +71 -6
  80. package/dist/esm/TabPane.js +2 -5
  81. package/dist/esm/Tabbar.js +68 -6
  82. package/dist/esm/TabbarItem.js +78 -9
  83. package/dist/esm/Table.js +140 -12
  84. package/dist/esm/Tabs.js +5 -8
  85. package/dist/esm/Tag.js +110 -10
  86. package/dist/esm/TextArea.js +148 -9
  87. package/dist/esm/TimeDetail.js +67 -9
  88. package/dist/esm/TimePannel.js +29 -9
  89. package/dist/esm/TimeSelect.js +171 -19
  90. package/dist/esm/Toast.js +268 -7
  91. package/dist/esm/TrendArrow.js +99 -7
  92. package/dist/esm/Uploader.js +566 -17
  93. package/dist/esm/{UserContext-0aac9a82.js → UserContext-101ad4a4.js} +1 -3
  94. package/dist/esm/{UserContext-e402e1a6.js → UserContext-2629d479.js} +1 -3
  95. package/dist/esm/{UserContext-e8176108.js → UserContext-b33bcf21.js} +1 -3
  96. package/dist/esm/Video.js +90 -7
  97. package/dist/esm/VirtualList.js +313 -9
  98. package/dist/esm/WaterMark.js +111 -11
  99. package/dist/esm/{bem-350c1702.js → bem-3b438e61.js} +6 -3
  100. package/dist/esm/cellgroup-fcc72767.js +34 -0
  101. package/dist/esm/checkbox-44e13cd0.js +137 -0
  102. package/dist/esm/date-c7aad4c0.js +97 -0
  103. package/dist/esm/formitem-8a73a5fb.js +157 -0
  104. package/dist/esm/get-scroll-parent-5f85dee8.js +24 -0
  105. package/dist/esm/{grid.taro.context-c2bbfb4f.js → grid.context-2ee27d95.js} +2 -4
  106. package/dist/esm/icon-4ef1581c.js +70 -0
  107. package/dist/esm/index-030b7245.js +11 -0
  108. package/dist/esm/nutui-react.es.js +94 -119
  109. package/dist/esm/offsetContext-3ab00d40.js +16 -0
  110. package/dist/esm/overlay-de6c79d5.js +83 -0
  111. package/dist/esm/radio-9f141e6b.js +118 -0
  112. package/dist/esm/render-bbebb760.js +79 -0
  113. package/dist/esm/tabpane-01075e6c.js +29 -0
  114. package/dist/esm/tabs-e1b4e4b1.js +181 -0
  115. package/dist/esm/typings-f27b58f4.js +8 -0
  116. package/dist/esm/useClientRect-56bb675b.js +39 -0
  117. package/dist/esm/useTouch-cf73a407.js +99 -0
  118. package/dist/locales/base.js +1 -1
  119. package/dist/locales/en-US.js +1 -1
  120. package/dist/locales/id-ID.js +1 -1
  121. package/dist/locales/zh-CN.js +1 -1
  122. package/dist/locales/zh-TW.js +1 -1
  123. package/dist/locales/zh-UG.js +1 -1
  124. package/dist/nutui.react.mjs +15025 -13192
  125. package/dist/nutui.react.umd.js +15004 -13169
  126. package/dist/style.mjs +1 -1
  127. package/dist/types/index.d.ts +183 -176
  128. package/package.json +1 -1
  129. package/dist/esm/actionsheet.taro-e6a51446.js +0 -53
  130. package/dist/esm/address.taro-3a9b6396.js +0 -461
  131. package/dist/esm/animate.taro-fb7986d6.js +0 -40
  132. package/dist/esm/animatingnumbers.taro-03e5d61d.js +0 -104
  133. package/dist/esm/audio.taro-87ec8bf2.js +0 -161
  134. package/dist/esm/avatar.taro-3676f38f.js +0 -103
  135. package/dist/esm/avatargroup-f3574510.js +0 -34
  136. package/dist/esm/backtop.taro-66394a36.js +0 -48
  137. package/dist/esm/badge.taro-a4e59c11.js +0 -52
  138. package/dist/esm/barrage.taro-0495a1b2.js +0 -94
  139. package/dist/esm/button.taro-9244d065.js +0 -100
  140. package/dist/esm/calendar.taro-670842ea.js +0 -65
  141. package/dist/esm/calendaritem.taro-2a603571.js +0 -787
  142. package/dist/esm/can-use-dom-3eeb5af4.js +0 -6
  143. package/dist/esm/card.taro-e4c76dad.js +0 -33
  144. package/dist/esm/cascader.taro-eb1fb011.js +0 -438
  145. package/dist/esm/cell.taro-a10a74d3.js +0 -64
  146. package/dist/esm/cellgroup.taro-abe501bc.js +0 -25
  147. package/dist/esm/checkbox.taro-6120e3e3.js +0 -171
  148. package/dist/esm/circleprogress.taro-79854448.js +0 -109
  149. package/dist/esm/col.taro-53eed3cc.js +0 -41
  150. package/dist/esm/collapse.taro-1a9e4ba2.js +0 -83
  151. package/dist/esm/collapseitem-4d0bc55d.js +0 -83
  152. package/dist/esm/configprovider-67d19d3a.js +0 -19
  153. package/dist/esm/configprovider.taro-8d71eb49.js +0 -42
  154. package/dist/esm/countdown.taro-5b17c607.js +0 -226
  155. package/dist/esm/datepicker.taro-6e9b4b8f.js +0 -275
  156. package/dist/esm/dialog.taro-a3267d29.js +0 -118
  157. package/dist/esm/divider.taro-26d1d8b4.js +0 -35
  158. package/dist/esm/drag.taro-79bb8744.js +0 -110
  159. package/dist/esm/elevator.taro-6019669e.js +0 -178
  160. package/dist/esm/ellipsis.taro-f15f26da.js +0 -241
  161. package/dist/esm/empty.taro-04ae4389.js +0 -62
  162. package/dist/esm/fixednav.taro-1f05acaf.js +0 -53
  163. package/dist/esm/form.taro-0c8e7a39.js +0 -179
  164. package/dist/esm/formitem.taro-190a3326.js +0 -89
  165. package/dist/esm/get-scroll-parent-b4a07e65.js +0 -25
  166. package/dist/esm/grid.taro-3503b82c.js +0 -61
  167. package/dist/esm/griditem.taro-cdb3f119.js +0 -98
  168. package/dist/esm/icon-296a1bec.js +0 -63
  169. package/dist/esm/icon.taro-296a1bec.js +0 -63
  170. package/dist/esm/image.taro-142cf512.js +0 -64
  171. package/dist/esm/imagepreview.taro-c50bb0a3.js +0 -167
  172. package/dist/esm/index-5bcb0ff8.js +0 -7
  173. package/dist/esm/indicator.taro-cba8b010.js +0 -37
  174. package/dist/esm/infiniteloading.taro-183bccbf.js +0 -144
  175. package/dist/esm/input.taro-97af6c96.js +0 -240
  176. package/dist/esm/inputnumber.taro-91f65d17.js +0 -130
  177. package/dist/esm/layout.taro-9046d093.js +0 -11
  178. package/dist/esm/menu.taro-7e4038a1.js +0 -99
  179. package/dist/esm/menuitem.taro-96cc4f15.js +0 -130
  180. package/dist/esm/navbar.taro-777c4705.js +0 -79
  181. package/dist/esm/noticebar.taro-4a23cdee.js +0 -448
  182. package/dist/esm/notify.taro-e17c6f82.js +0 -75
  183. package/dist/esm/numberkeyboard.taro-1bc24744.js +0 -159
  184. package/dist/esm/offsetContext-c2a746fa.js +0 -5
  185. package/dist/esm/overlay.taro-21e87fb1.js +0 -69
  186. package/dist/esm/pagination.taro-715a173b.js +0 -124
  187. package/dist/esm/picker.taro-9ad1b7c5.js +0 -473
  188. package/dist/esm/popover.taro-ad5e76ea.js +0 -156
  189. package/dist/esm/popup.taro-01676bff.js +0 -137
  190. package/dist/esm/price.taro-776ed16e.js +0 -83
  191. package/dist/esm/progress.taro-f0ce38e9.js +0 -90
  192. package/dist/esm/pulltorefresh.taro-a294f656.js +0 -181
  193. package/dist/esm/radio.taro-a6eff96c.js +0 -168
  194. package/dist/esm/range.taro-d8fc7656.js +0 -332
  195. package/dist/esm/rate.taro-6cdf03bd.js +0 -75
  196. package/dist/esm/row.taro-f64d4a13.js +0 -46
  197. package/dist/esm/searchbar.taro-0c25927b.js +0 -152
  198. package/dist/esm/shortpassword.taro-9ee034f7.js +0 -111
  199. package/dist/esm/sidenavbar.taro-c307b35e.js +0 -35
  200. package/dist/esm/sidenavbaritem.taro-5a7965d0.js +0 -12
  201. package/dist/esm/signature.taro-ec4e713b.js +0 -143
  202. package/dist/esm/skeleton.taro-76faf63f.js +0 -62
  203. package/dist/esm/step.taro-b7903e8c.js +0 -59
  204. package/dist/esm/steps.taro-c82d2252.js +0 -30
  205. package/dist/esm/sticky.taro-218bda37.js +0 -138
  206. package/dist/esm/subsidenavbar.taro-69cb9752.js +0 -63
  207. package/dist/esm/supports-passive-c85ef996.js +0 -18
  208. package/dist/esm/swipe.taro-ea35f07f.js +0 -177
  209. package/dist/esm/swiper.taro-7a94e211.js +0 -451
  210. package/dist/esm/swiperitem-c9e3d0d5.js +0 -29
  211. package/dist/esm/switch.taro-34ca8228.js +0 -50
  212. package/dist/esm/tabbar.taro-9acfc2fa.js +0 -59
  213. package/dist/esm/tabbaritem.taro-bf517487.js +0 -58
  214. package/dist/esm/table.taro-91fc0c01.js +0 -93
  215. package/dist/esm/tabpane.taro-4ca340ef.js +0 -23
  216. package/dist/esm/tabs.taro-6a7524a4.js +0 -140
  217. package/dist/esm/tag.taro-23ba0834.js +0 -92
  218. package/dist/esm/textarea.taro-442e7350.js +0 -94
  219. package/dist/esm/timedetail.taro-5b2f2269.js +0 -44
  220. package/dist/esm/timepannel.taro-d6e40180.js +0 -22
  221. package/dist/esm/timeselect.taro-a07036f4.js +0 -133
  222. package/dist/esm/toast.taro-d6c14811.js +0 -109
  223. package/dist/esm/trendarrow.taro-b8c5ccd9.js +0 -73
  224. package/dist/esm/typings-b9828dba.js +0 -9
  225. package/dist/esm/uploader.taro-587e6bf3.js +0 -492
  226. package/dist/esm/useClientRect-1f8ed1fe.js +0 -18
  227. package/dist/esm/useTouch-db24bb5c.js +0 -69
  228. package/dist/esm/video-f1be8a91.js +0 -67
  229. package/dist/esm/virtuallist.taro-f0b0270d.js +0 -214
  230. package/dist/esm/watermark.taro-9ce2ae37.js +0 -114
  231. package/dist/esm/zh-CN-c779e6c1.js +0 -131
@@ -1,138 +0,0 @@
1
- import React__default, { useRef, useEffect, useState, useMemo, useCallback } from 'react';
2
- import classNames from 'classnames';
3
- import { getEnv, usePageScroll, getSystemInfoSync } from '@tarojs/taro';
4
- import { g as getRectByTaro } from './useClientRect-1f8ed1fe.js';
5
- import { g as getScrollParent } from './get-scroll-parent-b4a07e65.js';
6
- import { c as cn } from './bem-350c1702.js';
7
-
8
- function useWatch(dep, callback, config = { immediate: false }) {
9
- const { immediate } = config;
10
- const prev = useRef();
11
- const inited = useRef(false);
12
- const stop = useRef(false);
13
- useEffect(() => {
14
- const execute = () => callback(prev.current);
15
- if (!stop.current) {
16
- if (!inited.current) {
17
- inited.current = true;
18
- if (immediate) {
19
- execute();
20
- }
21
- }
22
- else {
23
- execute();
24
- }
25
- prev.current = dep;
26
- }
27
- }, [dep]);
28
- return () => {
29
- stop.current = true;
30
- };
31
- }
32
-
33
- const defaultProps = {
34
- position: 'top',
35
- top: 0,
36
- bottom: 0,
37
- zIndex: 2000,
38
- };
39
- const b = cn('sticky');
40
- const Sticky = (props) => {
41
- const { position = 'top', top = 0, bottom = 0, zIndex = 2000, children, container, className, onChange, ...rest } = props;
42
- const stickyRef = useRef(null);
43
- const rootRef = useRef(null);
44
- const offset = position === 'top' ? top : bottom;
45
- const [rootRect, setRootRect] = useState({});
46
- const [fixed, setFixed] = useState(false);
47
- const [transform, setTransform] = useState(0); // 相对容器偏移距离
48
- useWatch(fixed, () => {
49
- onChange && onChange(fixed);
50
- });
51
- const rootStyle = useMemo(() => {
52
- if (!fixed) {
53
- return {
54
- height: '',
55
- width: '',
56
- };
57
- }
58
- const style = {};
59
- if (rootRect.height) {
60
- style.height = rootRect.height;
61
- }
62
- if (rootRect.width) {
63
- style.width = rootRect.width;
64
- }
65
- return style;
66
- }, [fixed, rootRect.height, rootRect.width]);
67
- const stickyStyle = useMemo(() => {
68
- if (!fixed) {
69
- return {
70
- height: '',
71
- width: '',
72
- [position]: '',
73
- };
74
- }
75
- let style = {};
76
- if (rootRect.height)
77
- style.height = rootRect.height;
78
- if (rootRect.width)
79
- style.width = rootRect.width;
80
- style.transform = `translate3d(0, ${transform}px, 0)`;
81
- style[position] = offset;
82
- style.zIndex = zIndex;
83
- return style;
84
- }, [fixed, rootRect.height, rootRect.width, transform, position]);
85
- const handleScroll = async (scrollTop) => {
86
- const curRootRect = await getRectByTaro(rootRef.current);
87
- const stickyRect = await getRectByTaro(stickyRef.current);
88
- if (curRootRect && stickyRect) {
89
- setRootRect(curRootRect);
90
- if (position === 'top') {
91
- if (container) {
92
- const containerRect = await getRectByTaro(container.current);
93
- const difference = containerRect.bottom - top - curRootRect.height;
94
- const curTransform = difference < 0 ? difference : 0;
95
- setTransform(curTransform);
96
- const curFixed = top > curRootRect.top && containerRect.bottom > 0;
97
- setFixed(curFixed);
98
- }
99
- else {
100
- setFixed(top > curRootRect.top);
101
- }
102
- }
103
- else {
104
- const windowHeight = getSystemInfoSync().windowHeight;
105
- setFixed(windowHeight - offset < curRootRect.bottom);
106
- }
107
- }
108
- else {
109
- console.log('getRectByTaro获取失败', { stickyRect, curRootRect });
110
- }
111
- };
112
- const getElement = useCallback(() => {
113
- return getScrollParent(rootRef.current);
114
- }, []);
115
- useEffect(() => {
116
- if (getEnv() === 'WEB' && getElement() !== window) {
117
- window.addEventListener('touchmove', handleScroll, true);
118
- window.addEventListener('scroll', handleScroll, true);
119
- return () => {
120
- window.removeEventListener('touchmove', handleScroll);
121
- window.removeEventListener('scroll', handleScroll);
122
- };
123
- }
124
- }, []);
125
- usePageScroll((res) => {
126
- if (getEnv() === 'WEAPP') {
127
- handleScroll(res.scrollTop);
128
- }
129
- });
130
- return (React__default.createElement("div", { ref: rootRef, style: rootStyle, className: classNames(b(), className), ...rest },
131
- React__default.createElement("div", {
132
- // 应符合 bem 规范
133
- className: classNames('nut-sticky-box', { 'nut-sticky-fixed': fixed }), ref: stickyRef, style: stickyStyle }, children)));
134
- };
135
- Sticky.defaultProps = defaultProps;
136
- Sticky.displayName = 'NutSticky';
137
-
138
- export { Sticky as S };
@@ -1,63 +0,0 @@
1
- import React__default, { useState, useContext, useRef, useCallback, useEffect } from 'react';
2
- import { O as OffsetContext } from './offsetContext-c2a746fa.js';
3
-
4
- const defaultProps = {
5
- open: true,
6
- };
7
- const SubSideNavBar = (props) => {
8
- const { title, ikey, children, onClick, open, ...rest } = {
9
- ...defaultProps,
10
- ...props,
11
- };
12
- const [subShow, setSubShow] = useState(open);
13
- const offset = useContext(OffsetContext);
14
- const listRef = useRef(null);
15
- const setListLevel = useCallback((nodeList, level = 1) => {
16
- const titleClass = nodeList[0].className;
17
- if (titleClass.includes('nut-subsidenavbar__title')) {
18
- const left = offset * (level + 1);
19
- nodeList[0].style.paddingLeft = `${left}px`;
20
- }
21
- const childNodes = nodeList[1] &&
22
- nodeList[1].children &&
23
- Array.from(nodeList[1].children).filter((item) => item.nodeType !== 3 && item.nodeType !== 8);
24
- childNodes.forEach((item) => {
25
- const itemClass = item.className;
26
- if (itemClass.includes('nut-subsidenavbar__item')) {
27
- const left = offset * (level + 2);
28
- item.style.paddingLeft = `${left}px`;
29
- }
30
- if (itemClass.includes('nut-subsidenavbar__list')) {
31
- let level = item.getAttribute('level')
32
- ? Number(item.getAttribute('level'))
33
- : 1;
34
- level += 1;
35
- item.setAttribute('level', level.toString());
36
- item.children && setListLevel(item.children, level);
37
- }
38
- });
39
- }, [offset]);
40
- const clickFn = (e) => {
41
- e.stopPropagation();
42
- setSubShow(!subShow);
43
- const isShow = !subShow;
44
- onClick && onClick({ title, ikey, isShow });
45
- };
46
- useEffect(() => {
47
- const childNodes = listRef.current?.children;
48
- listRef.current?.setAttribute('level', '1');
49
- childNodes && setListLevel(childNodes);
50
- }, [setListLevel]);
51
- const divClass = subShow
52
- ? 'nut-subsidenavbar__list nutShow'
53
- : 'nut-subsidenavbar__list nutHide';
54
- const iconClass = subShow ? 'arrow-icon arrow-down' : 'arrow-icon arrow-up';
55
- return (React__default.createElement("div", { className: divClass, ref: listRef, onClick: clickFn, ...rest },
56
- React__default.createElement("div", { className: "nut-subsidenavbar__title border-bt" },
57
- title,
58
- " ",
59
- React__default.createElement("i", { className: iconClass })),
60
- React__default.createElement("div", { className: "nut-subsidenavbar__content" }, children)));
61
- };
62
-
63
- export { SubSideNavBar as S };
@@ -1,18 +0,0 @@
1
- import { c as canUseDom } from './can-use-dom-3eeb5af4.js';
2
-
3
- let passiveSupported = false;
4
- if (canUseDom) {
5
- try {
6
- const opts = Object.defineProperty({}, 'passive', {
7
- get() {
8
- passiveSupported = true;
9
- },
10
- });
11
- window.addEventListener('test-passive-supported', null, opts);
12
- }
13
- catch (e) {
14
- console.log(e);
15
- }
16
- }
17
-
18
- export { passiveSupported as p };
@@ -1,177 +0,0 @@
1
- import React__default, { forwardRef, useRef, useState, useMemo, useImperativeHandle, useEffect } from 'react';
2
- import classNames from 'classnames';
3
- import { useReady, nextTick } from '@tarojs/taro';
4
- import { c as cn } from './bem-350c1702.js';
5
- import { u as useTouch } from './useTouch-db24bb5c.js';
6
- import { g as getRectByTaro } from './useClientRect-1f8ed1fe.js';
7
-
8
- function preventDefault(event, isStopPropagation) {
9
- if (typeof event.cancelable !== 'boolean' || event.cancelable) {
10
- event.preventDefault();
11
- }
12
- if (isStopPropagation) {
13
- event.stopPropagation();
14
- }
15
- }
16
- const defaultProps = {
17
- name: '',
18
- leftWidth: 0,
19
- rightWidth: 0,
20
- };
21
- const Swipe = forwardRef((props, instanceRef) => {
22
- const swipeBem = cn('swipe');
23
- const touch = useTouch();
24
- // 获取元素的时候要在页面 onReady 后,需要参考小程序的事件周期
25
- useReady(() => {
26
- const getWidth = async () => {
27
- if (leftWrapper.current) {
28
- const leftRect = await getRectByTaro(leftWrapper.current);
29
- setActionWidth((v) => ({ ...v, left: leftRect.width }));
30
- }
31
- if (rightWrapper.current) {
32
- const rightRect = await getRectByTaro(rightWrapper.current);
33
- setActionWidth((v) => ({ ...v, right: rightRect.width }));
34
- }
35
- };
36
- nextTick(() => getWidth());
37
- });
38
- const { children, className, style } = { ...defaultProps, ...props };
39
- const root = useRef();
40
- const opened = useRef(false);
41
- const lockClick = useRef(false);
42
- const startOffset = useRef(0);
43
- const [state, setState] = useState({
44
- offset: 0,
45
- dragging: false,
46
- });
47
- const [actionWidth, setActionWidth] = useState({
48
- left: 0,
49
- right: 0,
50
- });
51
- const wrapperStyle = {
52
- transform: `translate3d(${state.offset}px, 0, 0)`,
53
- transitionDuration: state.dragging ? '0s' : '.6s',
54
- };
55
- const leftWidth = useMemo(() => (props.leftWidth ? props.leftWidth : actionWidth.left), [props.leftWidth, actionWidth.left]);
56
- const rightWidth = useMemo(() => (props.rightWidth ? props.rightWidth : actionWidth.right), [props.rightWidth, actionWidth.right]);
57
- const onTouchStart = async (event) => {
58
- if (leftWrapper.current) {
59
- const leftRect = await getRectByTaro(leftWrapper.current);
60
- setActionWidth((v) => ({ ...v, left: leftRect.width }));
61
- }
62
- if (rightWrapper.current) {
63
- const rightRect = await getRectByTaro(rightWrapper.current);
64
- setActionWidth((v) => ({ ...v, right: rightRect.width }));
65
- }
66
- if (!props.disabled) {
67
- startOffset.current = state.offset;
68
- touch.start(event);
69
- props.onTouchStart && props.onTouchStart(event);
70
- }
71
- };
72
- const onTouchMove = (event) => {
73
- if (props.disabled) {
74
- return;
75
- }
76
- touch.move(event);
77
- props.onTouchMove && props.onTouchMove(event);
78
- if (touch.isHorizontal()) {
79
- lockClick.current = true;
80
- const newState = { ...state, dragging: true };
81
- const isEdge = !opened || touch.deltaX * startOffset.current < 0;
82
- if (isEdge) {
83
- preventDefault(event, true);
84
- }
85
- newState.offset = rangeCalculation(touch.deltaX + startOffset.current, -rightWidth || 0, leftWidth || 0);
86
- setState(newState);
87
- }
88
- };
89
- const onTouchEnd = (event) => {
90
- if (state.dragging) {
91
- setState((v) => ({ ...v, dragging: false }));
92
- toggle(state.offset > 0 ? 'left' : 'right');
93
- setTimeout(() => {
94
- lockClick.current = false;
95
- }, 0);
96
- props.onTouchEnd && props.onTouchEnd(event);
97
- }
98
- };
99
- const toggle = (side) => {
100
- const offset = Math.abs(state.offset);
101
- const base = 0.3;
102
- const baseNum = opened ? 1 - base : base;
103
- const width = side === 'left' ? leftWidth : rightWidth;
104
- if (width && offset > Number(width) * baseNum) {
105
- open(side);
106
- }
107
- else {
108
- close(side);
109
- }
110
- };
111
- const open = (side) => {
112
- opened.current = true;
113
- const offset = side === 'left' ? leftWidth : -rightWidth;
114
- const name = props.name;
115
- props.onOpen?.({ name, position: side });
116
- setState((v) => ({ ...v, offset: Number(offset) || 0 }));
117
- };
118
- const close = (position) => {
119
- if (opened.current) {
120
- opened.current = false;
121
- props.onClose?.({
122
- name: props.name,
123
- position: position || 'left',
124
- });
125
- }
126
- setState((v) => ({ ...v, offset: 0 }));
127
- };
128
- const rangeCalculation = (num, min, max) => {
129
- return Math.min(Math.max(Number(num), Number(min)), Number(max));
130
- };
131
- const leftWrapper = useRef(null);
132
- const rightWrapper = useRef(null);
133
- const renderActionContent = (side) => {
134
- if (props[`${side}Action`]) {
135
- return (React__default.createElement("div", { id: "left", ref: side === 'left' ? leftWrapper : rightWrapper, className: `${swipeBem(side)}`, onClick: (e) => handleOperate(e, side) }, props[`${side}Action`]));
136
- }
137
- return null;
138
- };
139
- const handleOperate = (event, position) => {
140
- event.stopPropagation();
141
- if (props.beforeClose) {
142
- props.beforeClose(position);
143
- }
144
- else {
145
- props.onActionClick && props.onActionClick(event, position);
146
- }
147
- };
148
- useImperativeHandle(instanceRef, () => ({
149
- open,
150
- close: () => close(),
151
- }));
152
- useEffect(() => {
153
- const handler = (event) => {
154
- const targets = [root];
155
- if (targets.some((targetItem) => {
156
- const targetElement = targetItem.current || targetItem;
157
- return !targetElement || targetElement?.contains(event.target);
158
- })) {
159
- return;
160
- }
161
- close();
162
- };
163
- document.addEventListener('touchstart', handler);
164
- return () => {
165
- document.removeEventListener('touchstart', handler);
166
- };
167
- }, []);
168
- return (React__default.createElement("div", { ref: root, className: classNames(swipeBem(), className), onTouchStart: (e) => onTouchStart(e), onTouchMove: (e) => onTouchMove(e), onTouchEnd: (e) => onTouchEnd(e), style: style },
169
- React__default.createElement("div", { className: `${swipeBem('wrapper')}`, style: wrapperStyle },
170
- renderActionContent('left'),
171
- children,
172
- renderActionContent('right'))));
173
- });
174
- Swipe.defaultProps = defaultProps;
175
- Swipe.displayName = 'NutSwipe';
176
-
177
- export { Swipe as S };