@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,109 +0,0 @@
1
- import React__default, { useState, useEffect } from 'react';
2
- import classNames from 'classnames';
3
- import { c as cn } from './bem-350c1702.js';
4
- import { I as Icon } from './icon-296a1bec.js';
5
-
6
- const defaultProps = {
7
- id: '',
8
- style: {},
9
- icon: null,
10
- iconSize: '20',
11
- msg: '',
12
- bottom: '30px',
13
- duration: 2,
14
- center: true,
15
- type: 'text',
16
- title: '',
17
- customClass: '',
18
- size: 'base',
19
- textAlignCenter: true,
20
- bgColor: 'rgba(0, 0, 0, .8)',
21
- cover: false,
22
- coverColor: 'rgba(0, 0, 0, 0)',
23
- closeOnClickOverlay: false,
24
- visible: false,
25
- onClose: () => { }, // 未实现
26
- };
27
- // export default class Notification extends React.PureComponent<NotificationProps> {
28
- const Toast = (props) => {
29
- const { children, id, style, icon, iconSize, msg, bottom, duration, center, type, title, customClass, size, textAlignCenter, bgColor, cover, coverColor, closeOnClickOverlay, visible, onClose, ...rest } = { ...defaultProps, ...props };
30
- let timer;
31
- const [openState, SetOpenState] = useState(false);
32
- useEffect(() => {
33
- if (visible) {
34
- SetOpenState(true);
35
- show();
36
- }
37
- else {
38
- hide();
39
- }
40
- }, [visible]);
41
- const clearTimer = () => {
42
- if (timer) {
43
- clearTimeout(timer);
44
- timer = null;
45
- }
46
- };
47
- const hide = () => {
48
- SetOpenState(false);
49
- onClose();
50
- };
51
- const show = () => {
52
- clearTimer();
53
- if (duration) {
54
- timer = window.setTimeout(() => {
55
- hide();
56
- }, duration * 1000);
57
- }
58
- };
59
- const clickCover = () => {
60
- if (closeOnClickOverlay) {
61
- hide();
62
- }
63
- };
64
- const toastBem = cn('toast');
65
- const hasIcon = () => {
66
- if (type !== 'text') {
67
- return true;
68
- }
69
- return !!icon;
70
- };
71
- const iconName = () => {
72
- if (icon) {
73
- return icon;
74
- }
75
- return {
76
- success: 'success',
77
- fail: 'failure',
78
- warn: 'tips',
79
- loading: 'loading',
80
- }[type];
81
- };
82
- const classes = classNames({
83
- 'nut-toast-center': center,
84
- 'nut-toast-has-icon': icon,
85
- 'nut-toast-cover': cover,
86
- 'nut-toast-loading': type === 'loading',
87
- [`${customClass}`]: true,
88
- [`nut-toast-${size}`]: true,
89
- });
90
- return (React__default.createElement(React__default.Fragment, null, openState ? (React__default.createElement("div", { className: `${toastBem()} ${classes}`, id: id, style: {
91
- bottom: center ? 'auto' : `${bottom}`,
92
- backgroundColor: cover ? coverColor : '',
93
- ...style,
94
- }, onClick: () => {
95
- clickCover();
96
- } },
97
- React__default.createElement("div", { className: toastBem('inner'), style: {
98
- textAlign: textAlignCenter ? 'center' : 'left',
99
- backgroundColor: bgColor,
100
- } },
101
- hasIcon() ? (React__default.createElement("p", { className: toastBem('icon-wrapper') },
102
- React__default.createElement(Icon, { name: iconName(), color: "#ffffff", size: iconSize }))) : null,
103
- title ? React__default.createElement("div", { className: "nut-toast-title" }, title) : null,
104
- React__default.createElement("span", { className: toastBem('text') }, msg)))) : null));
105
- };
106
- Toast.defaultProps = defaultProps;
107
- Toast.displayName = 'NutToast';
108
-
109
- export { Toast as T };
@@ -1,73 +0,0 @@
1
- import React__default, { useRef } from 'react';
2
- import { c as cn } from './bem-350c1702.js';
3
- import { I as Icon } from './icon.taro-296a1bec.js';
4
-
5
- const defaultProps = {
6
- rate: 0,
7
- digits: 2,
8
- showSign: false,
9
- showZero: false,
10
- arrowLeft: false,
11
- syncTextColor: true,
12
- textColor: '#333',
13
- riseColor: '#fa2c19',
14
- dropColor: '#64b578',
15
- iconSize: '12px',
16
- upIconName: 'triangle-up',
17
- downIconName: 'triangle-down',
18
- className: '',
19
- };
20
- const TrendArrow = (props) => {
21
- const { rate, digits, showSign, showZero, arrowLeft, syncTextColor, textColor, riseColor, dropColor, iconSize, upIconName, downIconName, className, children, ...rest } = { ...defaultProps, ...props };
22
- const b = cn('trendarrow');
23
- const handleClick = () => { };
24
- const rateTrend = useRef(rate > 0);
25
- const myFixed = (num, digit = 2) => {
26
- if (Object.is(parseFloat(num), NaN)) {
27
- return console.log(`传入的值:${num}不是一个数字`);
28
- }
29
- num = parseFloat(num);
30
- // eslint-disable-next-line no-restricted-properties
31
- const numPow = Math.pow(10, digit);
32
- return (Math.round((num + Number.EPSILON) * numPow) / numPow).toFixed(digit);
33
- };
34
- const calcStyle = (() => {
35
- const arrowColor = rateTrend.current ? riseColor : dropColor;
36
- const textEquArrowColor = syncTextColor ? arrowColor : textColor;
37
- const style = {
38
- color: rate === 0 ? textColor : textEquArrowColor,
39
- };
40
- return style;
41
- })();
42
- const calcRate = (() => {
43
- rateTrend.current = rate > 0;
44
- const absRate = Math.abs(rate);
45
- if (!showZero && rate === 0) {
46
- return '--';
47
- }
48
- const resultRate = `${
49
- // eslint-disable-next-line no-nested-ternary
50
- showSign && rate !== 0 ? (rateTrend.current ? '+' : '-') : ''}${myFixed(Number(absRate), digits)}%`;
51
- return resultRate;
52
- })();
53
- const calcIconProps = (() => {
54
- const iconProps = {
55
- name: rateTrend.current ? upIconName : downIconName,
56
- color: rateTrend.current ? riseColor : dropColor,
57
- size: iconSize,
58
- };
59
- return iconProps;
60
- })();
61
- const renderContent = (arrowLeft) => {
62
- const classNameSuffix = !arrowLeft ? 'icon-after' : 'icon-before';
63
- return (React__default.createElement("span", { className: `${b(classNameSuffix)} ${b('rate')}`, style: calcStyle }, calcRate));
64
- };
65
- return (React__default.createElement("div", { className: `${b()} ${className}`, ...rest, onClick: handleClick },
66
- !arrowLeft && renderContent(!arrowLeft),
67
- children || (React__default.createElement(React__default.Fragment, null, Number(rate) !== 0 && (React__default.createElement(Icon, { size: calcIconProps.size, name: calcIconProps.name, color: calcIconProps.color })))),
68
- arrowLeft && renderContent(!arrowLeft)));
69
- };
70
- TrendArrow.defaultProps = defaultProps;
71
- TrendArrow.displayName = 'NutTrendArrow';
72
-
73
- export { TrendArrow as T };
@@ -1,9 +0,0 @@
1
- const ComponentDefaults = {
2
- // className: '',
3
- // style: {},
4
- // children: undefined,
5
- iconClassPrefix: 'nut-icon',
6
- iconFontClassName: 'nutui-iconfont',
7
- };
8
-
9
- export { ComponentDefaults as C };
@@ -1,492 +0,0 @@
1
- import React__default, { useState, useEffect, useImperativeHandle } from 'react';
2
- import classNames from 'classnames';
3
- import Taro, { uploadFile, getEnv, chooseMedia, chooseImage } from '@tarojs/taro';
4
- import { I as Icon } from './icon.taro-296a1bec.js';
5
- import { B as Button } from './button.taro-9244d065.js';
6
- import { P as Progress } from './progress.taro-f0ce38e9.js';
7
- import { Image } from '@tarojs/components';
8
- import { c as cn } from './bem-350c1702.js';
9
- import { u as useConfig } from './configprovider.taro-8d71eb49.js';
10
- import { i as isPromise } from './index-5bcb0ff8.js';
11
- import { C as ComponentDefaults } from './typings-b9828dba.js';
12
-
13
- class UploadOptions {
14
- url = '';
15
- name = 'file';
16
- fileType = 'image';
17
- formData;
18
- sourceFile;
19
- method = 'post';
20
- xhrState = 200;
21
- timeout = 30 * 1000;
22
- headers = {};
23
- withCredentials = false;
24
- onStart;
25
- taroFilePath;
26
- onProgress;
27
- onSuccess;
28
- onFailure;
29
- beforeXhrUpload;
30
- }
31
- class Upload {
32
- options;
33
- constructor(options) {
34
- this.options = options;
35
- }
36
- upload() {
37
- const { options } = this;
38
- const xhr = new XMLHttpRequest();
39
- xhr.timeout = options.timeout;
40
- if (xhr.upload) {
41
- xhr.upload.addEventListener('progress', (e) => {
42
- options.onProgress?.(e, options);
43
- }, false);
44
- xhr.onreadystatechange = () => {
45
- if (xhr.readyState === 4) {
46
- if (xhr.status === options.xhrState) {
47
- options.onSuccess?.(xhr.responseText, options);
48
- }
49
- else {
50
- options.onFailure?.(xhr.responseText, options);
51
- }
52
- }
53
- };
54
- xhr.withCredentials = options.withCredentials;
55
- xhr.open(options.method, options.url, true);
56
- // headers
57
- for (const [key, value] of Object.entries(options.headers)) {
58
- xhr.setRequestHeader(key, value);
59
- }
60
- options.onStart?.(options);
61
- if (options.beforeXhrUpload) {
62
- options.beforeXhrUpload(xhr, options);
63
- }
64
- else {
65
- xhr.send(options.formData);
66
- }
67
- }
68
- else {
69
- console.warn('浏览器不支持 XMLHttpRequest');
70
- }
71
- }
72
- }
73
- class UploaderTaro extends Upload {
74
- constructor(options) {
75
- super(options);
76
- }
77
- uploadTaro(uploadFile, env) {
78
- const options = this.options;
79
- if (options.beforeXhrUpload) {
80
- options.beforeXhrUpload(uploadFile, options);
81
- }
82
- else {
83
- const uploadTask = uploadFile({
84
- url: options.url,
85
- filePath: options.taroFilePath,
86
- fileType: options.fileType,
87
- header: {
88
- 'Content-Type': 'multipart/form-data',
89
- ...options.headers,
90
- },
91
- formData: options.formData,
92
- name: options.name,
93
- success(response) {
94
- if (options.xhrState == response.statusCode) {
95
- options.onSuccess?.(response, options);
96
- }
97
- else {
98
- options.onFailure?.(response, options);
99
- }
100
- },
101
- fail(e) {
102
- options.onFailure?.(e, options);
103
- },
104
- });
105
- options.onStart?.(options);
106
- uploadTask.progress((res) => {
107
- options.onProgress?.(res, options);
108
- });
109
- }
110
- }
111
- }
112
-
113
- const funcInterceptor = (interceptor, { args = [], done, canceled, }) => {
114
- if (interceptor) {
115
- const returnVal = interceptor.apply(null, args);
116
- if (isPromise(returnVal)) {
117
- returnVal
118
- .then((value) => {
119
- if (value) {
120
- done(value);
121
- }
122
- else if (canceled) {
123
- canceled();
124
- }
125
- })
126
- .catch(() => { });
127
- }
128
- else if (returnVal) {
129
- done();
130
- }
131
- else if (canceled) {
132
- canceled();
133
- }
134
- }
135
- else {
136
- done();
137
- }
138
- };
139
-
140
- const defaultProps = {
141
- ...ComponentDefaults,
142
- url: '',
143
- maximum: 1,
144
- sizeType: ['original', 'compressed'],
145
- sourceType: ['album', 'camera'],
146
- mediaType: ['image', 'video'],
147
- camera: 'back',
148
- uploadIcon: 'photograph',
149
- uploadIconSize: '',
150
- uploadIconTip: '',
151
- listType: 'picture',
152
- name: 'file',
153
- accept: '*',
154
- disabled: false,
155
- autoUpload: true,
156
- multiple: false,
157
- maximize: Number.MAX_VALUE,
158
- data: {},
159
- headers: {},
160
- method: 'post',
161
- defaultImg: '',
162
- xhrState: 200,
163
- timeout: 1000 * 30,
164
- isPreview: true,
165
- isDeletable: true,
166
- maxDuration: 10,
167
- onBeforeDelete: (file, files) => {
168
- return true;
169
- },
170
- };
171
- class FileItem {
172
- status = 'ready';
173
- message = '准备中..';
174
- uid = new Date().getTime().toString();
175
- name;
176
- url;
177
- type;
178
- path;
179
- percentage = 0;
180
- formData = {};
181
- }
182
- const InternalUploader = (props, ref) => {
183
- const { locale } = useConfig();
184
- const { children, uploadIcon, uploadIconSize, uploadIconTip, accept, name, camera, defaultFileList, listType, disabled, multiple, url, defaultImg, headers, timeout, method, xhrState, data, isPreview, isDeletable, maximum, maximize, mediaType, className, autoUpload, sizeType, sourceType, maxDuration, iconClassPrefix, iconFontClassName, onStart, onRemove, onChange, onFileItemClick, onProgress, onSuccess, onUpdate, onFailure, onOversize, onBeforeXhrUpload, onBeforeDelete, ...restProps } = { ...defaultProps, ...props };
185
- const [fileList, setFileList] = useState([]);
186
- const [uploadQueue, setUploadQueue] = useState([]);
187
- useEffect(() => {
188
- if (defaultFileList) {
189
- setFileList(defaultFileList);
190
- }
191
- }, [defaultFileList]);
192
- const b = cn('uploader');
193
- const classes = classNames(className, b(''));
194
- useImperativeHandle(ref, () => ({
195
- submit: () => {
196
- Promise.all(uploadQueue).then((res) => {
197
- res.forEach((i) => i.uploadTaro(uploadFile, getEnv()));
198
- });
199
- },
200
- clear: () => {
201
- clearUploadQueue();
202
- },
203
- }));
204
- const clearUploadQueue = (index = -1) => {
205
- if (index > -1) {
206
- uploadQueue.splice(index, 1);
207
- setUploadQueue(uploadQueue);
208
- }
209
- else {
210
- setUploadQueue([]);
211
- fileList.splice(0, fileList.length);
212
- setFileList([...fileList]);
213
- }
214
- };
215
- const _chooseImage = () => {
216
- if (disabled) {
217
- return;
218
- }
219
- if (Taro.getEnv() == 'WEB') {
220
- let el = document.getElementById('taroChooseImage');
221
- if (el) {
222
- el?.setAttribute('accept', accept);
223
- }
224
- else {
225
- const obj = document.createElement('input');
226
- obj.setAttribute('type', 'file');
227
- obj.setAttribute('id', 'taroChooseImage');
228
- obj.setAttribute('accept', accept);
229
- obj.setAttribute('style', 'position: fixed; top: -4000px; left: -3000px; z-index: -300;');
230
- document.body.appendChild(obj);
231
- }
232
- }
233
- if (getEnv() == 'WEAPP') {
234
- // chooseMedia 目前只支持微信小程序原生,其余端全部使用 chooseImage API
235
- chooseMedia({
236
- /** 最多可以选择的文件个数 */
237
- count: multiple ? maximum * 1 - fileList.length : 1,
238
- /** 文件类型 */
239
- mediaType: mediaType,
240
- /** 图片和视频选择的来源 */
241
- sourceType: sourceType,
242
- /** 拍摄视频最长拍摄时间,单位秒。时间范围为 3s 至 30s 之间 */
243
- maxDuration: maxDuration,
244
- /** 仅对 mediaType 为 image 时有效,是否压缩所选文件 */
245
- sizeType: [],
246
- /** 仅在 sourceType 为 camera 时生效,使用前置或后置摄像头 */
247
- camera: camera,
248
- /** 接口调用失败的回调函数 */
249
- fail: (res) => {
250
- onFailure && onFailure(res);
251
- },
252
- /** 接口调用成功的回调函数 */
253
- success: onChangeMedia,
254
- });
255
- }
256
- else {
257
- chooseImage({
258
- // 选择数量
259
- count: multiple ? maximum * 1 - fileList.length : 1,
260
- // 可以指定是原图还是压缩图,默认二者都有
261
- sizeType,
262
- sourceType,
263
- success: onChangeImage,
264
- fail: (res) => {
265
- onFailure && onFailure(res);
266
- },
267
- });
268
- }
269
- };
270
- const executeUpload = (fileItem, index) => {
271
- const uploadOption = new UploadOptions();
272
- uploadOption.name = name;
273
- uploadOption.url = url;
274
- uploadOption.fileType = fileItem.type;
275
- uploadOption.formData = fileItem.formData;
276
- uploadOption.timeout = timeout * 1;
277
- uploadOption.method = method;
278
- uploadOption.xhrState = xhrState;
279
- uploadOption.headers = headers;
280
- uploadOption.taroFilePath = fileItem.path;
281
- uploadOption.beforeXhrUpload = onBeforeXhrUpload;
282
- uploadOption.onStart = (option) => {
283
- clearUploadQueue(index);
284
- setFileList((fileList) => {
285
- fileList.map((item) => {
286
- if (item.uid === fileItem.uid) {
287
- item.status = 'ready';
288
- item.message = locale.uploader.readyUpload;
289
- }
290
- });
291
- return [...fileList];
292
- });
293
- onStart && onStart(option);
294
- };
295
- uploadOption.onProgress = (e, option) => {
296
- setFileList((fileList) => {
297
- fileList.map((item) => {
298
- if (item.uid === fileItem.uid) {
299
- item.status = 'uploading';
300
- item.message = locale.uploader.uploading;
301
- item.percentage = e.progress;
302
- onProgress && onProgress({ e, option, percentage: item.percentage });
303
- }
304
- });
305
- return [...fileList];
306
- });
307
- };
308
- uploadOption.onSuccess = (responseText, option) => {
309
- setFileList((fileList) => {
310
- onUpdate && onUpdate(fileList);
311
- fileList.map((item) => {
312
- if (item.uid === fileItem.uid) {
313
- item.status = 'success';
314
- item.message = locale.uploader.success;
315
- }
316
- });
317
- return [...fileList];
318
- });
319
- onSuccess &&
320
- onSuccess({
321
- responseText,
322
- option,
323
- fileList,
324
- file: fileItem,
325
- });
326
- };
327
- uploadOption.onFailure = (responseText, option) => {
328
- setFileList((fileList) => {
329
- fileList.map((item) => {
330
- if (item.uid === fileItem.uid) {
331
- item.status = 'error';
332
- item.message = locale.uploader.error;
333
- }
334
- });
335
- return [...fileList];
336
- });
337
- onFailure &&
338
- onFailure({
339
- responseText,
340
- option,
341
- fileList,
342
- file: fileItem,
343
- });
344
- };
345
- const task = new UploaderTaro(uploadOption);
346
- if (props.autoUpload) {
347
- task.uploadTaro(uploadFile, getEnv());
348
- }
349
- else {
350
- uploadQueue.push(new Promise((resolve, reject) => {
351
- resolve(task);
352
- }));
353
- setUploadQueue(uploadQueue);
354
- }
355
- };
356
- const readFile = (files) => {
357
- files.forEach((file, index) => {
358
- let fileType = file.type;
359
- let filepath = (file.tempFilePath || file.path);
360
- const fileItem = new FileItem();
361
- if (file.fileType) {
362
- fileType = file.fileType;
363
- }
364
- else {
365
- const imgReg = /\.(png|jpeg|jpg|webp|gif)$/i;
366
- if (!fileType &&
367
- (imgReg.test(filepath) || filepath.includes('data:image'))) {
368
- fileType = 'image';
369
- }
370
- }
371
- fileItem.path = filepath;
372
- fileItem.name = filepath;
373
- fileItem.status = 'ready';
374
- fileItem.type = fileType;
375
- if (autoUpload) {
376
- fileItem.message = locale.uploader.readyUpload;
377
- }
378
- else {
379
- fileItem.message = locale.uploader.waitingUpload;
380
- }
381
- if (getEnv() === 'WEB') {
382
- const formData = new FormData();
383
- for (const [key, value] of Object.entries(data)) {
384
- formData.append(key, value);
385
- }
386
- formData.append(name, file.originalFileObj);
387
- fileItem.name = file.originalFileObj?.name;
388
- fileItem.type = file.originalFileObj?.type;
389
- fileItem.formData = formData;
390
- }
391
- else {
392
- fileItem.formData = data;
393
- }
394
- if (isPreview) {
395
- fileItem.url = fileType == 'video' ? file.thumbTempFilePath : filepath;
396
- }
397
- fileList.push(fileItem);
398
- setFileList([...fileList]);
399
- executeUpload(fileItem, index);
400
- });
401
- };
402
- const filterFiles = (files) => {
403
- const maximum = props.maximum * 1;
404
- const maximize = props.maximize * 1;
405
- const oversizes = new Array();
406
- const filterFile = files.filter((file) => {
407
- if (file.size > maximize) {
408
- oversizes.push(file);
409
- return false;
410
- }
411
- return true;
412
- });
413
- if (oversizes.length) {
414
- onOversize && onOversize(files);
415
- }
416
- const currentFileLength = filterFile.length + fileList.length;
417
- if (currentFileLength > maximum) {
418
- filterFile.splice(filterFile.length - (currentFileLength - maximum));
419
- }
420
- return filterFile;
421
- };
422
- const deleted = (file, index) => {
423
- fileList.splice(index, 1);
424
- onRemove && onRemove(file, fileList);
425
- setFileList([...fileList]);
426
- };
427
- const onDelete = (file, index) => {
428
- clearUploadQueue(index);
429
- funcInterceptor(onBeforeDelete, {
430
- args: [file, fileList],
431
- done: () => deleted(file, index),
432
- });
433
- };
434
- const onChangeMedia = (res) => {
435
- // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
436
- const { tempFiles } = res;
437
- const _files = filterFiles(tempFiles);
438
- readFile(_files);
439
- onChange && onChange({ fileList });
440
- };
441
- const onChangeImage = (res) => {
442
- // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
443
- const { tempFiles } = res;
444
- const _files = filterFiles(tempFiles);
445
- readFile(_files);
446
- onChange && onChange({ fileList });
447
- };
448
- const handleItemClick = (file) => {
449
- onFileItemClick && onFileItemClick(file);
450
- };
451
- return (React__default.createElement("div", { className: classes, ...restProps },
452
- children && (React__default.createElement("div", { className: "nut-uploader__slot" },
453
- React__default.createElement(React__default.Fragment, null,
454
- children,
455
- maximum > fileList.length && (React__default.createElement(Button, { className: "nut-uploader__input", onClick: _chooseImage }))))),
456
- fileList.length !== 0 &&
457
- fileList.map((item, index) => {
458
- return (React__default.createElement("div", { className: `nut-uploader__preview ${listType}`, key: item.uid },
459
- listType === 'picture' && !children && (React__default.createElement("div", { className: "nut-uploader__preview-img" },
460
- isDeletable && (React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, color: "rgba(0,0,0,0.6)", className: "close", name: "failure", onClick: () => onDelete(item, index) })),
461
- item.status === 'ready' ? (React__default.createElement("div", { className: "nut-uploader__preview__progress" },
462
- React__default.createElement("div", { className: "nut-uploader__preview__progress__msg" }, item.message))) : (item.status !== 'success' && (React__default.createElement("div", { className: "nut-uploader__preview__progress" },
463
- item.failIcon === ' ' ||
464
- item.loadingIcon === ' ' ? null : (React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, color: "#fff", name: `${item.status === 'error'
465
- ? `${item.failIcon || 'failure'}`
466
- : `${item.loadingIcon || 'loading'}`}` })),
467
- React__default.createElement("div", { className: "nut-uploader__preview__progress__msg" }, item.message)))),
468
- item.type.includes('image') ? (React__default.createElement(React__default.Fragment, null, item.url && (React__default.createElement(Image, { className: "nut-uploader__preview-img__c", mode: "aspectFit", src: item.url, onClick: () => handleItemClick(item) })))) : (React__default.createElement(React__default.Fragment, null, defaultImg ? (React__default.createElement(Image, { className: "nut-uploader__preview-img__c", mode: "aspectFit", src: defaultImg, onClick: () => handleItemClick(item) })) : (React__default.createElement("div", { className: "nut-uploader__preview-img__file" },
469
- React__default.createElement("div", { onClick: () => handleItemClick(item), className: "nut-uploader__preview-img__file__name" },
470
- React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, color: "#808080", name: "link" }),
471
- "\u00A0",
472
- item.name))))),
473
- item.status === 'success' ? (React__default.createElement("div", { className: "tips" }, item.name)) : null)),
474
- listType === 'list' && (React__default.createElement("div", { className: "nut-uploader__preview-list" },
475
- React__default.createElement("div", { className: `nut-uploader__preview-img__file__name ${item.status}`, onClick: () => handleItemClick(item) },
476
- React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, name: "link" }),
477
- "\u00A0",
478
- item.name),
479
- isDeletable && (React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, color: "#808080", className: "nut-uploader__preview-img__file__del", name: "del", onClick: () => onDelete(item, index) })),
480
- item.status === 'uploading' && (React__default.createElement(Progress, { size: "small", percentage: item.percentage, strokeColor: "linear-gradient(270deg, rgba(18,126,255,1) 0%,rgba(32,147,255,1) 32.815625%,rgba(13,242,204,1) 100%)", showText: false }))))));
481
- }),
482
- maximum > fileList.length && listType === 'picture' && !children && (React__default.createElement("div", { className: `nut-uploader__upload ${listType} ${disabled ? 'nut-uploader__upload-disabled' : ''}` },
483
- React__default.createElement("div", { className: "nut-uploader__icon" },
484
- React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, size: uploadIconSize, color: "#808080", name: uploadIcon }),
485
- React__default.createElement("span", { className: "nut-uploader__icon-tip" }, uploadIconTip)),
486
- React__default.createElement(Button, { className: "nut-uploader__input", onClick: _chooseImage })))));
487
- };
488
- const Uploader = React__default.forwardRef(InternalUploader);
489
- Uploader.defaultProps = defaultProps;
490
- Uploader.displayName = 'NutUploader';
491
-
492
- export { Uploader as U };