@arco-design/mobile-react 2.19.1-941e02b.7 → 2.20.0

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 (130) hide show
  1. package/CHANGELOG.md +36 -0
  2. package/README.en-US.md +6 -6
  3. package/README.md +6 -6
  4. package/cjs/_helpers/type.d.ts +1 -1
  5. package/cjs/avatar/group.js +1 -1
  6. package/cjs/avatar/index.js +10 -13
  7. package/cjs/avatar/style/css/index.css +96 -126
  8. package/cjs/avatar/style/index.less +54 -72
  9. package/cjs/badge/index.js +6 -8
  10. package/cjs/badge/style/css/index.css +5 -5
  11. package/cjs/badge/style/index.less +5 -5
  12. package/cjs/button/hooks.d.ts +1 -2
  13. package/cjs/button/hooks.js +5 -3
  14. package/cjs/button/index.d.ts +12 -0
  15. package/cjs/button/index.js +40 -33
  16. package/cjs/button/style/css/index.css +75 -310
  17. package/cjs/button/style/index.less +32 -38
  18. package/cjs/count-down/demo/style/mobile.less +1 -1
  19. package/cjs/dropdown/dropdown.d.ts +3 -0
  20. package/cjs/dropdown/dropdown.js +306 -0
  21. package/cjs/dropdown/index.d.ts +3 -4
  22. package/cjs/dropdown/index.js +3 -303
  23. package/cjs/dropdown/options.js +2 -1
  24. package/cjs/dropdown/type.d.ts +20 -9
  25. package/cjs/dropdown-menu/dropdown-menu.d.ts +4 -0
  26. package/cjs/dropdown-menu/dropdown-menu.js +273 -0
  27. package/cjs/dropdown-menu/helper.d.ts +1 -1
  28. package/cjs/dropdown-menu/index.d.ts +2 -3
  29. package/cjs/dropdown-menu/index.js +2 -245
  30. package/cjs/dropdown-menu/type.d.ts +21 -20
  31. package/cjs/image/index.js +4 -1
  32. package/cjs/image/style/css/index.css +2 -1
  33. package/cjs/image/style/index.less +2 -1
  34. package/cjs/image-picker/index.d.ts +11 -8
  35. package/cjs/image-picker/index.js +19 -12
  36. package/cjs/image-picker/style/index.less +1 -1
  37. package/cjs/nav-bar/index.js +7 -2
  38. package/cjs/notify/index.d.ts +1 -0
  39. package/cjs/notify/index.js +12 -0
  40. package/cjs/notify/type.d.ts +1 -0
  41. package/cjs/show-monitor/index.js +31 -3
  42. package/cjs/transition/index.js +4 -2
  43. package/dist/index.js +677 -617
  44. package/dist/index.min.js +4 -4
  45. package/dist/style.css +174 -438
  46. package/dist/style.min.css +1 -1
  47. package/esm/_helpers/type.d.ts +1 -1
  48. package/esm/avatar/group.js +1 -1
  49. package/esm/avatar/index.js +10 -13
  50. package/esm/avatar/style/css/index.css +96 -126
  51. package/esm/avatar/style/index.less +54 -72
  52. package/esm/badge/index.js +6 -8
  53. package/esm/badge/style/css/index.css +5 -5
  54. package/esm/badge/style/index.less +5 -5
  55. package/esm/button/hooks.d.ts +1 -2
  56. package/esm/button/hooks.js +5 -3
  57. package/esm/button/index.d.ts +12 -0
  58. package/esm/button/index.js +42 -35
  59. package/esm/button/style/css/index.css +75 -310
  60. package/esm/button/style/index.less +32 -38
  61. package/esm/count-down/demo/style/mobile.less +1 -1
  62. package/esm/dropdown/dropdown.d.ts +3 -0
  63. package/esm/dropdown/dropdown.js +288 -0
  64. package/esm/dropdown/index.d.ts +3 -4
  65. package/esm/dropdown/index.js +3 -293
  66. package/esm/dropdown/options.js +2 -1
  67. package/esm/dropdown/type.d.ts +20 -9
  68. package/esm/dropdown-menu/dropdown-menu.d.ts +4 -0
  69. package/esm/dropdown-menu/dropdown-menu.js +256 -0
  70. package/esm/dropdown-menu/helper.d.ts +1 -1
  71. package/esm/dropdown-menu/index.d.ts +2 -3
  72. package/esm/dropdown-menu/index.js +2 -237
  73. package/esm/dropdown-menu/type.d.ts +21 -20
  74. package/esm/image/index.js +4 -1
  75. package/esm/image/style/css/index.css +2 -1
  76. package/esm/image/style/index.less +2 -1
  77. package/esm/image-picker/index.d.ts +11 -8
  78. package/esm/image-picker/index.js +19 -12
  79. package/esm/image-picker/style/index.less +1 -1
  80. package/esm/nav-bar/index.js +6 -2
  81. package/esm/notify/index.d.ts +1 -0
  82. package/esm/notify/index.js +1 -0
  83. package/esm/notify/type.d.ts +1 -0
  84. package/esm/show-monitor/index.js +31 -3
  85. package/esm/transition/index.js +4 -2
  86. package/package.json +3 -3
  87. package/tokens/app/arcodesign/default/css-variables.less +2 -1
  88. package/tokens/app/arcodesign/default/index.d.ts +2 -1
  89. package/tokens/app/arcodesign/default/index.js +2 -1
  90. package/tokens/app/arcodesign/default/index.json +123 -47
  91. package/tokens/app/arcodesign/default/index.less +2 -1
  92. package/umd/_helpers/type.d.ts +1 -1
  93. package/umd/avatar/group.js +1 -1
  94. package/umd/avatar/index.js +10 -13
  95. package/umd/avatar/style/css/index.css +96 -126
  96. package/umd/avatar/style/index.less +54 -72
  97. package/umd/badge/index.js +6 -8
  98. package/umd/badge/style/css/index.css +5 -5
  99. package/umd/badge/style/index.less +5 -5
  100. package/umd/button/hooks.d.ts +1 -2
  101. package/umd/button/hooks.js +5 -3
  102. package/umd/button/index.d.ts +12 -0
  103. package/umd/button/index.js +40 -33
  104. package/umd/button/style/css/index.css +75 -310
  105. package/umd/button/style/index.less +32 -38
  106. package/umd/count-down/demo/style/mobile.less +1 -1
  107. package/umd/dropdown/dropdown.d.ts +3 -0
  108. package/umd/dropdown/dropdown.js +309 -0
  109. package/umd/dropdown/index.d.ts +3 -4
  110. package/umd/dropdown/index.js +5 -298
  111. package/umd/dropdown/options.js +2 -1
  112. package/umd/dropdown/type.d.ts +20 -9
  113. package/umd/dropdown-menu/dropdown-menu.d.ts +4 -0
  114. package/umd/dropdown-menu/dropdown-menu.js +278 -0
  115. package/umd/dropdown-menu/helper.d.ts +1 -1
  116. package/umd/dropdown-menu/index.d.ts +2 -3
  117. package/umd/dropdown-menu/index.js +5 -241
  118. package/umd/dropdown-menu/type.d.ts +21 -20
  119. package/umd/image/index.js +4 -1
  120. package/umd/image/style/css/index.css +2 -1
  121. package/umd/image/style/index.less +2 -1
  122. package/umd/image-picker/index.d.ts +11 -8
  123. package/umd/image-picker/index.js +19 -12
  124. package/umd/image-picker/style/index.less +1 -1
  125. package/umd/nav-bar/index.js +9 -6
  126. package/umd/notify/index.d.ts +1 -0
  127. package/umd/notify/index.js +13 -4
  128. package/umd/notify/type.d.ts +1 -0
  129. package/umd/show-monitor/index.js +31 -3
  130. package/umd/transition/index.js +4 -2
@@ -1,10 +1,5 @@
1
- import _extends from "@babel/runtime/helpers/extends";
2
- import React, { useRef, useState, forwardRef, useImperativeHandle, useMemo, useCallback, useEffect, useContext } from 'react';
3
- import { cls } from '@arco-design/mobile-utils';
4
- import { GlobalContext } from '../context-provider';
5
- import { getFormattedOptions as defaultFormatFunc, isCascadeArray, isClassNameDom, isRefDom } from './helper';
1
+ import { componentGenerator } from './dropdown-menu';
6
2
  import Dropdown from '../dropdown';
7
- import IconTriDown from '../icon/IconTriDown';
8
3
  export * from './type';
9
4
  /**
10
5
  * 下拉选择组件,点击选择器(select)展开下拉框(dropdown),展示选择项(options),兼容多个选择器的情况。
@@ -15,235 +10,5 @@ export * from './type';
15
10
  * @name_en DropdownMenu
16
11
  */
17
12
 
18
- var DropdownMenu = /*#__PURE__*/forwardRef(function (props, ref) {
19
- var _props$className = props.className,
20
- className = _props$className === void 0 ? '' : _props$className,
21
- _props$style = props.style,
22
- style = _props$style === void 0 ? {} : _props$style,
23
- _props$options = props.options,
24
- options = _props$options === void 0 ? [] : _props$options,
25
- _props$disabled = props.disabled,
26
- disabled = _props$disabled === void 0 ? [] : _props$disabled,
27
- _props$selectTips = props.selectTips,
28
- selectTips = _props$selectTips === void 0 ? [] : _props$selectTips,
29
- values = props.values,
30
- _props$defaultValues = props.defaultValues,
31
- defaultValues = _props$defaultValues === void 0 ? [] : _props$defaultValues,
32
- icon = props.icon,
33
- _props$chooseAndClose = props.chooseAndClose,
34
- chooseAndClose = _props$chooseAndClose === void 0 ? true : _props$chooseAndClose,
35
- selectIndex = props.selectIndex,
36
- _props$defaultSelectI = props.defaultSelectIndex,
37
- defaultSelectIndex = _props$defaultSelectI === void 0 ? 0 : _props$defaultSelectI,
38
- showDropdown = props.showDropdown,
39
- _props$defaultShowDro = props.defaultShowDropdown,
40
- defaultShowDropdown = _props$defaultShowDro === void 0 ? false : _props$defaultShowDro,
41
- renderSelectLabel = props.renderSelectLabel,
42
- onValuesChange = props.onValuesChange,
43
- onSelectChange = props.onSelectChange,
44
- onDropdownChange = props.onDropdownChange,
45
- _props$getFormattedOp = props.getFormattedOptions,
46
- getFormattedOptions = _props$getFormattedOp === void 0 ? defaultFormatFunc : _props$getFormattedOp,
47
- children = props.children,
48
- extraForDropdown = props.extraForDropdown;
49
-
50
- var _useContext = useContext(GlobalContext),
51
- prefixCls = _useContext.prefixCls,
52
- locale = _useContext.locale;
53
-
54
- var _useState = useState(defaultValues),
55
- innerValues = _useState[0],
56
- setInnerValues = _useState[1];
57
-
58
- var _useState2 = useState(0),
59
- defaultTop = _useState2[0],
60
- setDefaultTop = _useState2[1];
61
-
62
- var currentValues = values !== void 0 ? values : innerValues;
63
-
64
- var _useState3 = useState(defaultShowDropdown),
65
- innerShowDropdown = _useState3[0],
66
- setInnerShowDropdown = _useState3[1];
67
-
68
- var dropdownShown = showDropdown !== void 0 ? showDropdown : innerShowDropdown;
69
-
70
- var _useState4 = useState(defaultSelectIndex),
71
- innerSelectedIndex = _useState4[0],
72
- setInnerSelectedIndex = _useState4[1];
73
-
74
- var selectedIndex = selectIndex !== void 0 ? selectIndex : innerSelectedIndex;
75
- var selectWrapper = useRef(null);
76
- var domRef = useRef(null);
77
- var defaultOpItem = {
78
- label: locale == null ? void 0 : locale.DropdownMenu.select,
79
- value: -1
80
- };
81
- /**
82
- * 下拉框的容器
83
- * @en Dropdown container
84
- */
85
-
86
- var getContainer = useCallback(function () {
87
- if (props.getContainer) {
88
- return props.getContainer() || selectWrapper.current;
89
- }
90
-
91
- return selectWrapper.current;
92
- }, [selectWrapper.current]);
93
- /**
94
- * 更新选项数组和选择情况
95
- * @en Update options list and selection
96
- */
97
-
98
- var _useMemo = useMemo(function () {
99
- return getFormattedOptions(options, currentValues);
100
- }, [options, currentValues]),
101
- formattedOptions = _useMemo.formattedOptions;
102
-
103
- var selectedOptions = useMemo(function () {
104
- return formattedOptions.map(function (ops, index) {
105
- return ops.find(function (op) {
106
- var value = currentValues[index];
107
- return Array.isArray(value) ? value.includes(op.value) : op.value === value;
108
- }) || (props.multiple ? defaultOpItem : ops[0]);
109
- });
110
- }, [formattedOptions, currentValues]);
111
- /**
112
- * 当下拉框的状态变化
113
- * @en When the state of the dropdown box changes
114
- */
115
-
116
- var handleShowDropdownChange = function handleShowDropdownChange(show, index) {
117
- onDropdownChange && onDropdownChange(show, index);
118
- setInnerShowDropdown(show);
119
- };
120
-
121
- var handleSelectedIndexChange = function handleSelectedIndexChange(idx) {
122
- setInnerSelectedIndex(idx);
123
- onSelectChange == null ? void 0 : onSelectChange(idx);
124
- };
125
-
126
- var handleValuesChange = function handleValuesChange(val) {
127
- var newValue = [].concat(currentValues); // 级联情况下 selectedIndex 之后的选项值重置
128
- // @en Option values are reset after selectedIndex in case of cascade
129
-
130
- if (isCascadeArray(options)) {
131
- newValue = newValue.slice(0, selectedIndex);
132
- }
133
-
134
- newValue[selectedIndex] = val;
135
- newValue = getFormattedOptions(options, newValue).formattedValue;
136
- setInnerValues(newValue);
137
- onValuesChange == null ? void 0 : onValuesChange(newValue);
138
- };
139
- /**
140
- * 处理选择框的点击事件
141
- * @en Handle click event of dropdown box
142
- */
143
-
144
-
145
- var handleSelectClick = function handleSelectClick(idx) {
146
- if (disabled[idx]) return;
147
-
148
- if (Number(idx) === selectedIndex) {
149
- handleShowDropdownChange(!dropdownShown, idx);
150
- } else {
151
- handleSelectedIndexChange(idx);
152
- if (!dropdownShown) handleShowDropdownChange(true, idx);
153
- }
154
- };
155
- /**
156
- * 判断是否为当前实例下的选择框
157
- * @en Determine whether it is the dropdown box under the current instance
158
- */
159
-
160
-
161
- var isCurrentSelectEl = function isCurrentSelectEl(target) {
162
- var _ref = extraForDropdown || {},
163
- isStopTouchEl = _ref.isStopTouchEl;
164
-
165
- return isRefDom(target, selectWrapper) && isClassNameDom(target, 'select-item') || (isStopTouchEl == null ? void 0 : isStopTouchEl(target)) || false;
166
- };
167
-
168
- useImperativeHandle(ref, function () {
169
- return {
170
- dom: domRef.current
171
- };
172
- });
173
- useEffect(function () {
174
- var _getContainer;
175
-
176
- setDefaultTop(((_getContainer = getContainer()) == null ? void 0 : _getContainer.getBoundingClientRect().bottom) || 0);
177
- }, [getContainer, dropdownShown]);
178
-
179
- var onCancel = props.onCancel || function () {
180
- return handleShowDropdownChange(false);
181
- };
182
-
183
- var dropdownCommonProps = _extends({
184
- showDropdown: dropdownShown,
185
- top: (extraForDropdown == null ? void 0 : extraForDropdown.top) || defaultTop,
186
- onCancel: onCancel
187
- }, extraForDropdown || {}, {
188
- isStopTouchEl: isCurrentSelectEl
189
- });
190
-
191
- return /*#__PURE__*/React.createElement("div", {
192
- ref: domRef,
193
- className: cls(prefixCls + "-dropdown-menu all-border-box " + (dropdownShown ? 'show' : ''), className),
194
- style: style
195
- }, /*#__PURE__*/React.createElement("div", {
196
- className: cls(prefixCls + "-select"),
197
- ref: selectWrapper
198
- }, selectedOptions.map(function (op, index) {
199
- var tip = selectTips[index] || '';
200
- return /*#__PURE__*/React.createElement("div", {
201
- className: cls(prefixCls + "-select-item", {
202
- 'is-disabled': disabled[index],
203
- 'is-selected': dropdownShown && selectedIndex === index
204
- }),
205
- key: index,
206
- "data-idx": index,
207
- onClick: function onClick() {
208
- return handleSelectClick(index);
209
- }
210
- }, tip.length > 0 && /*#__PURE__*/React.createElement("span", {
211
- className: cls(prefixCls + "-select-item-tip")
212
- }, tip), /*#__PURE__*/React.createElement("div", {
213
- className: cls(prefixCls + "-select-item-label")
214
- }, renderSelectLabel ? renderSelectLabel(op, index) : /*#__PURE__*/React.createElement("div", {
215
- className: cls(prefixCls + "-select-item-label-text")
216
- }, op.label), icon === void 0 ? /*#__PURE__*/React.createElement(IconTriDown, {
217
- className: cls(prefixCls + "-select-item-icon", {
218
- 'is-show': dropdownShown && selectedIndex === index
219
- })
220
- }) : icon));
221
- }), props.multiple === true ? /*#__PURE__*/React.createElement(Dropdown, _extends({
222
- multiple: true,
223
- options: formattedOptions[selectedIndex] || [],
224
- selectedValue: currentValues[selectedIndex] || [],
225
- onOptionClick: function onOptionClick(selected, val, op) {
226
- props.onOptionClick == null ? void 0 : props.onOptionClick(selected, val, op, selectedIndex);
227
- },
228
- onOptionChange: function onOptionChange(val, op) {
229
- props.onOptionChange == null ? void 0 : props.onOptionChange(val, op, selectedIndex);
230
- handleValuesChange(val);
231
- }
232
- }, dropdownCommonProps), children) : /*#__PURE__*/React.createElement(Dropdown, _extends({
233
- multiple: props.multiple,
234
- options: formattedOptions[selectedIndex] || [],
235
- selectedValue: currentValues[selectedIndex] || 0,
236
- onOptionClick: function onOptionClick(val, op) {
237
- props.onOptionClick == null ? void 0 : props.onOptionClick(val, op, selectedIndex);
238
-
239
- if (chooseAndClose) {
240
- handleShowDropdownChange(false, selectedIndex);
241
- }
242
- },
243
- onOptionChange: function onOptionChange(val, op) {
244
- props.onOptionChange == null ? void 0 : props.onOptionChange(val, op, selectedIndex);
245
- handleValuesChange(val);
246
- }
247
- }, dropdownCommonProps), children)));
248
- });
13
+ var DropdownMenu = componentGenerator(Dropdown);
249
14
  export default DropdownMenu;
@@ -1,5 +1,5 @@
1
1
  import { CSSProperties, ReactNode } from 'react';
2
- import { OptionsItem, DropdownCommonProps } from '../dropdown';
2
+ import { OptionsItem, DropdownCommonProps, OptionValueType } from '../dropdown';
3
3
  export type { OptionsItem, DropdownCommonProps };
4
4
  export interface CascadeOptions extends OptionsItem {
5
5
  /**
@@ -29,11 +29,6 @@ export interface DropdownMenuBasicProps {
29
29
  * @en The selected number of selector (controlled)
30
30
  */
31
31
  selectIndex?: number;
32
- /**
33
- * 自定义选择器
34
- * @en Custom selector
35
- */
36
- renderSelectLabel?: (op: OptionsItem, index: number) => ReactNode;
37
32
  /**
38
33
  * 选择器禁用状态
39
34
  * @en Selector disabled state
@@ -112,47 +107,53 @@ export interface SingleOptionProps {
112
107
  * 初始选择项
113
108
  * @en initial selection item
114
109
  * */
115
- defaultValues?: number[];
110
+ defaultValues?: OptionValueType[];
116
111
  /**
117
112
  * (受控) 每个选择器选中的项
118
113
  * @en (Controlled) The item selected by each selector
119
114
  * */
120
- values?: number[];
115
+ values?: OptionValueType[];
116
+ /**
117
+ * 自定义选择器
118
+ * @en Custom selector
119
+ */
120
+ renderSelectLabel?: (op: OptionsItem, index: number) => ReactNode;
121
121
  /**
122
122
  * 点击选项时触发的回调函数
123
123
  * @en Callback when clicking option
124
124
  * */
125
- onOptionClick?: (value: number, item: OptionsItem, selectIndex?: number) => void;
125
+ onOptionClick?: (value: OptionValueType, item: OptionsItem, selectIndex?: number) => void;
126
126
  /**
127
127
  * 选项改变时触发的回调函数
128
128
  * @en Callback when options change
129
129
  * */
130
- onOptionChange?: (value: number, item: OptionsItem, selectIndex?: number) => void;
130
+ onOptionChange?: (value: OptionValueType, item: OptionsItem, selectIndex?: number) => void;
131
131
  /**
132
132
  * 所有选择器选项总值改变时的回调函数
133
133
  * @en Callback when the total value of all selector options changes
134
134
  * */
135
- onValuesChange?: (values: number[]) => void;
135
+ onValuesChange?: (values: OptionValueType[]) => void;
136
136
  /**
137
137
  * 格式化传入的options
138
138
  * @en Format the input options
139
139
  * */
140
- getFormattedOptions?: (options: SingleOptionProps['options'], values?: number[]) => {
140
+ getFormattedOptions?: (options: SingleOptionProps['options'], values?: OptionValueType[]) => {
141
141
  formattedOptions: OptionsItem[][];
142
- formattedValue: number[];
142
+ formattedValue: OptionValueType[];
143
143
  };
144
144
  }
145
145
  export interface MultipleOptionProps {
146
146
  multiple: true;
147
147
  options: string[] | OptionsItem[][];
148
- defaultValues?: number[][];
149
- values?: number[][];
150
- onOptionClick?: (selected: boolean, val: number, item: OptionsItem, selectIndex?: number) => void;
151
- onOptionChange?: (vals: number[], item: OptionsItem, selectIndex?: number) => void;
152
- onValuesChange?: (values: number[][]) => void;
153
- getFormattedOptions?: (options: SingleOptionProps['options'], values?: number[][]) => {
148
+ defaultValues?: OptionValueType[][];
149
+ values?: OptionValueType[][];
150
+ renderSelectLabel?: (op: OptionsItem[], index: number) => ReactNode;
151
+ onOptionClick?: (selected: boolean, val: OptionValueType, item: OptionsItem, selectIndex?: number) => void;
152
+ onOptionChange?: (vals: OptionValueType[], item: OptionsItem, selectIndex?: number) => void;
153
+ onValuesChange?: (values: OptionValueType[][]) => void;
154
+ getFormattedOptions?: (options: SingleOptionProps['options'], values?: OptionValueType[][]) => {
154
155
  formattedOptions: OptionsItem[][];
155
- formattedValue: number[][];
156
+ formattedValue: OptionValueType[][];
156
157
  };
157
158
  }
158
159
  export declare type OptionProps = SingleOptionProps | MultipleOptionProps;
@@ -37,6 +37,7 @@ export var BaseImage = /*#__PURE__*/forwardRef(function (props, ref) {
37
37
  var wrapRef = useRef(null);
38
38
  var retryCountRef = useRef(0);
39
39
  var loadingImageRef = useRef(null);
40
+ var hasLoadedRef = useRef(false);
40
41
  var style = props.style,
41
42
  className = props.className,
42
43
  status = props.status,
@@ -160,6 +161,7 @@ export var BaseImage = /*#__PURE__*/forwardRef(function (props, ref) {
160
161
  image.onload = function (evt) {
161
162
  loadingImageRef.current = null;
162
163
  imageDomRef.current = image;
164
+ hasLoadedRef.current = true;
163
165
  changeStatus('loaded');
164
166
  var _image$width = image.width,
165
167
  imageWidth = _image$width === void 0 ? 0 : _image$width,
@@ -274,7 +276,8 @@ export var BaseImage = /*#__PURE__*/forwardRef(function (props, ref) {
274
276
  })) : null, /*#__PURE__*/React.createElement("div", {
275
277
  className: cls('image-container', validStatus, {
276
278
  animate: Boolean(animateDuration),
277
- 'static-label': staticLabel
279
+ 'static-label': staticLabel,
280
+ 'has-loaded': hasLoadedRef.current
278
281
  }),
279
282
  style: getStyleWithVendor({
280
283
  transitionDuration: animateDuration + "ms"
@@ -66,7 +66,8 @@
66
66
  }
67
67
  .arco-image .image-container.static-label,
68
68
  .arco-image .image-container.loaded,
69
- .arco-image .image-container.error {
69
+ .arco-image .image-container.error,
70
+ .arco-image .image-container.has-loaded {
70
71
  opacity: 1;
71
72
  }
72
73
  .arco-image .image-container.animate {
@@ -66,7 +66,8 @@
66
66
 
67
67
  &.static-label,
68
68
  &.loaded,
69
- &.error {
69
+ &.error,
70
+ &.has-loaded {
70
71
  opacity: 1;
71
72
  }
72
73
 
@@ -14,9 +14,10 @@ export interface ImagePickItem {
14
14
  /**
15
15
  * 图片状态
16
16
  * @en Image Status
17
- * @default 'loaded'
17
+ * @default 以图片自身加载状态而定
18
+ * @default_en According to inner status of the image
18
19
  */
19
- status: 'loaded' | 'loading' | 'error';
20
+ status?: 'loaded' | 'loading' | 'error';
20
21
  }
21
22
  export interface AdapterFile {
22
23
  url?: string;
@@ -117,7 +118,7 @@ export interface ImagePickerProps {
117
118
  * 透传给图片的属性
118
119
  * @en Attributes passed through to the image
119
120
  */
120
- imageProps?: ImageProps;
121
+ imageProps?: Partial<ImageProps>;
121
122
  /**
122
123
  * 自定义上传失败展示
123
124
  * @en Defined upload failed display
@@ -133,12 +134,11 @@ export interface ImagePickerProps {
133
134
  * @en upload function
134
135
  */
135
136
  upload?: (file: ImagePickItem) => Promise<ImagePickItem | null>;
136
- onSelect?: (...args: any[]) => void;
137
137
  /**
138
138
  * 已选图片列表发生变化
139
139
  * @en The list of selected images changes
140
140
  */
141
- onChange?: (fileList: ImagePickItem[]) => Promise<void>;
141
+ onChange?: (fileList: ImagePickItem[]) => void;
142
142
  /**
143
143
  * 图片超过限制大小
144
144
  * @en Image exceeds size limit
@@ -158,15 +158,18 @@ export interface ImagePickerProps {
158
158
  * 图片长按事件
159
159
  * @en long press event
160
160
  */
161
- onLongPress?: (e: React.MouseEvent<HTMLElement, MouseEvent>, image: ImagePickItem, index: number) => void;
161
+ onLongPress?: (e: React.TouchEvent<HTMLElement>, image: ImagePickItem, index: number) => void;
162
162
  /**
163
163
  * 图片选择适配器
164
164
  * @en Select Adaptor
165
165
  */
166
- selectAdapter: () => Promise<SelectCallback>;
166
+ selectAdapter?: () => Promise<SelectCallback>;
167
167
  }
168
168
  export interface ImagePickerRef {
169
- /** 最外层元素 DOM */
169
+ /**
170
+ * 最外层 DOM 元素
171
+ * @en The outer DOM element of the component
172
+ */
170
173
  dom: HTMLDivElement | null;
171
174
  }
172
175
  /**
@@ -91,7 +91,7 @@ var ImagePicker = /*#__PURE__*/forwardRef(function (props, ref) {
91
91
  });
92
92
  };
93
93
 
94
- var handleChange = function handleChange(event) {
94
+ var handleChange = function handleChange(event, fromAdapter) {
95
95
  var files = [].concat(event.target.files || []).filter(function (file) {
96
96
  // 过滤maxSize
97
97
  if (maxSize && file.size > maxSize * 1024) {
@@ -101,7 +101,11 @@ var ImagePicker = /*#__PURE__*/forwardRef(function (props, ref) {
101
101
 
102
102
  return true;
103
103
  }) || [];
104
- event.target.value = ''; // 截断limit
104
+
105
+ if (!fromAdapter) {
106
+ event.target.value = '';
107
+ } // 截断limit
108
+
105
109
 
106
110
  if (limit !== 0 && files.length + images.length > limit) {
107
111
  onLimitExceed && onLimitExceed(files);
@@ -115,7 +119,7 @@ var ImagePicker = /*#__PURE__*/forwardRef(function (props, ref) {
115
119
  var res = parseFiles.map(function (url, index) {
116
120
  return {
117
121
  url: url,
118
- status: upload ? 'loading' : 'loaded',
122
+ status: typeof upload === 'function' ? 'loading' : 'loaded',
119
123
  file: files[index]
120
124
  };
121
125
  });
@@ -126,11 +130,12 @@ var ImagePicker = /*#__PURE__*/forwardRef(function (props, ref) {
126
130
  var propsImageLength = images.length;
127
131
  files.forEach(function (_file, index) {
128
132
  upload(cacheRes[propsImageLength + index]).then(function (data) {
129
- cacheRes[propsImageLength + index] = _extends({}, cacheRes[propsImageLength + index], data);
133
+ cacheRes[propsImageLength + index] = _extends({}, cacheRes[propsImageLength + index], data, {
134
+ status: undefined
135
+ });
130
136
  }).catch(function () {
131
137
  cacheRes[propsImageLength + index].status = 'error';
132
138
  }).finally(function () {
133
- cacheRes[propsImageLength + index].status = 'loaded';
134
139
  onChange([].concat(cacheRes));
135
140
  });
136
141
  });
@@ -151,15 +156,15 @@ var ImagePicker = /*#__PURE__*/forwardRef(function (props, ref) {
151
156
  e.preventDefault();
152
157
  timeOutEvent = setTimeout(function () {
153
158
  timeOutEvent = 0;
154
- typeof onLongPress === 'function' && onLongPress(e, image, index);
159
+ onLongPress == null ? void 0 : onLongPress(e, image, index);
155
160
  }, 750);
156
161
  };
157
162
 
158
- var handleTouchEnd = function handleTouchEnd(e, image, index) {
163
+ var handleClick = function handleClick(e, image, index) {
159
164
  clearTimeout(timeOutEvent);
160
165
 
161
166
  if (timeOutEvent !== 0) {
162
- typeof onClick === 'function' && onClick(e, image, index);
167
+ onClick == null ? void 0 : onClick(e, image, index);
163
168
  }
164
169
  };
165
170
 
@@ -172,7 +177,7 @@ var ImagePicker = /*#__PURE__*/forwardRef(function (props, ref) {
172
177
  target: {
173
178
  files: files
174
179
  }
175
- });
180
+ }, true);
176
181
  }) : (_fileRef$current = fileRef.current) == null ? void 0 : _fileRef$current.click();
177
182
  };
178
183
 
@@ -206,8 +211,8 @@ var ImagePicker = /*#__PURE__*/forwardRef(function (props, ref) {
206
211
  onTouchStart: function onTouchStart(e) {
207
212
  return handleTouchStart(e, image, index);
208
213
  },
209
- onTouchEnd: function onTouchEnd(e) {
210
- return handleTouchEnd(e, image, index);
214
+ onClick: function onClick(e) {
215
+ return handleClick(e, image, index);
211
216
  },
212
217
  className: prefixCls + "-image-picker-image-container"
213
218
  }, /*#__PURE__*/React.createElement(Image, _extends({
@@ -250,7 +255,9 @@ var ImagePicker = /*#__PURE__*/forwardRef(function (props, ref) {
250
255
  accept: accept,
251
256
  multiple: multiple,
252
257
  type: "file",
253
- onChange: handleChange,
258
+ onChange: function onChange(e) {
259
+ return handleChange(e);
260
+ },
254
261
  ref: fileRef
255
262
  }) : null)),
256
263
  title: ''
@@ -25,7 +25,7 @@
25
25
  &-container {
26
26
  .container()
27
27
  }
28
- .arco-image{
28
+ .@{prefix}-image {
29
29
  height: 100%;
30
30
  width: 100%;
31
31
  }
@@ -3,6 +3,7 @@ import React, { useEffect, useState, forwardRef, useImperativeHandle, useRef } f
3
3
  import { cls, getScrollContainerAttribute, getValidScrollContainer } from '@arco-design/mobile-utils';
4
4
  import { ContextLayout } from '../context-provider';
5
5
  import BackArrow from './back-icon';
6
+ import { useSystem } from '../_helpers';
6
7
 
7
8
  /**
8
9
  * 导航栏组件,支持吸顶和沉浸式,支持在指定滚动位置展示,支持根据滚动位置实时更新style。
@@ -51,8 +52,10 @@ var NavBar = /*#__PURE__*/forwardRef(function (props, ref) {
51
52
  customStyle = _useState2[0],
52
53
  setCustomStyle = _useState2[1];
53
54
 
55
+ var system = useSystem();
56
+
54
57
  var onElementScroll = function onElementScroll(curOffset) {
55
- setScrollToggleHide(curOffset <= showOffset);
58
+ setScrollToggleHide(curOffset < showOffset);
56
59
 
57
60
  if (getComputedStyleByScroll) {
58
61
  var cstyle = getComputedStyleByScroll(curOffset);
@@ -78,6 +81,7 @@ var NavBar = /*#__PURE__*/forwardRef(function (props, ref) {
78
81
  useEffect(function () {
79
82
  var needBind = showOffset || getComputedStyleByScroll;
80
83
  var container = getValidScrollContainer(getScrollContainer);
84
+ handleEleScroll();
81
85
 
82
86
  if (needBind && container) {
83
87
  container.addEventListener('scroll', handleEleScroll, false);
@@ -125,7 +129,7 @@ var NavBar = /*#__PURE__*/forwardRef(function (props, ref) {
125
129
  background: relBackground
126
130
  } : {})
127
131
  }, /*#__PURE__*/React.createElement("div", {
128
- className: cls(className, prefixCls + "-nav-bar-wrapper", (_cls2 = {}, _cls2[prefixCls + "-nav-bar-wrapper-fixed"] = fixed, _cls2[prefixCls + "-nav-bar-wrapper-border"] = hasBottomLine, _cls2)),
132
+ className: cls(className, system, prefixCls + "-nav-bar-wrapper", (_cls2 = {}, _cls2[prefixCls + "-nav-bar-wrapper-fixed"] = fixed, _cls2[prefixCls + "-nav-bar-wrapper-border"] = hasBottomLine, _cls2)),
129
133
  style: _extends({
130
134
  paddingTop: statusBarHeight ? statusBarHeight + "px" : ''
131
135
  }, customStyle)
@@ -1,6 +1,7 @@
1
1
  import React from 'react';
2
2
  import { NotifyProps, NotifyRef } from './type';
3
3
  import { NotifyBaseProps } from './methods';
4
+ export * from './type';
4
5
  export declare function methodsGenerator<P extends NotifyBaseProps>(Comp: React.FC<P>): {
5
6
  /**
6
7
  * 展示常规通知
@@ -5,6 +5,7 @@ import { componentWrapper, nextTick } from '@arco-design/mobile-utils';
5
5
  import { ContextLayout } from '../context-provider';
6
6
  import { getStyleWithVendor, useUpdateEffect } from '../_helpers';
7
7
  import { notify } from './methods';
8
+ export * from './type';
8
9
  var Notify = /*#__PURE__*/forwardRef(function (props, ref) {
9
10
  var _props$className = props.className,
10
11
  className = _props$className === void 0 ? '' : _props$className,
@@ -19,6 +19,7 @@ export interface NotifyProps {
19
19
  /**
20
20
  * 通知类型
21
21
  * @en Notification type
22
+ * @default "info"
22
23
  */
23
24
  type?: NotifyType;
24
25
  /**
@@ -108,6 +108,34 @@ var ShowMonitor = /*#__PURE__*/forwardRef(function (props, ref) {
108
108
  offset: offset,
109
109
  threshold: threshold
110
110
  }, true);
111
+ },
112
+
113
+ /**
114
+ * 重置元素初始可见态为false,并重新对元素可见度发起检测,优先级低于disabled(通常用在对ShowMonitor内部元素变化时发起的重新监听)
115
+ * @en Reset the initial visible state of the element to false, and re-detect the visibility of the element, the priority is lower than 'disabled'(Usually used to re-listen when elements inside ShowMonitor change)
116
+ */
117
+ flushVisibleStatus: function flushVisibleStatus() {
118
+ isVisible.current = false;
119
+
120
+ if (isSupportNativeApi && io.current && domRef.current) {
121
+ disabled ? io.current.unobserve(domRef.current) : io.current.observe(domRef.current);
122
+ } else if (listener.current) {
123
+ var _key = wrapperKey.current;
124
+
125
+ if (once && onOnceEmittedListeners != null && onOnceEmittedListeners[_key]) {
126
+ onOnceEmittedListeners[_key] = onOnceEmittedListeners[_key].filter(function (emitListener) {
127
+ return emitListener !== listener.current;
128
+ });
129
+ }
130
+
131
+ if (!disabled && !listeners[_key].find(function (_listener) {
132
+ return _listener === listener.current;
133
+ })) {
134
+ listeners[_key].push(listener.current);
135
+ }
136
+
137
+ !disabled && _checkVisible(listener.current);
138
+ }
111
139
  }
112
140
  };
113
141
  });
@@ -375,8 +403,8 @@ var ShowMonitor = /*#__PURE__*/forwardRef(function (props, ref) {
375
403
  }
376
404
  }
377
405
 
378
- var _key = wrapperKey.current;
379
- var curListeners = listeners[_key];
406
+ var _key2 = wrapperKey.current;
407
+ var curListeners = listeners[_key2];
380
408
 
381
409
  if (curListeners) {
382
410
  // 不在监听队列中,移除
@@ -386,7 +414,7 @@ var ShowMonitor = /*#__PURE__*/forwardRef(function (props, ref) {
386
414
  // @en When the listening queue is empty, unbind scroll and resize events
387
415
 
388
416
  if (curListeners.length === 0) {
389
- delete listeners[_key];
417
+ delete listeners[_key2];
390
418
 
391
419
  if (scrollPort.current) {
392
420
  scrollPort.current.removeEventListener('scroll', throttlingVisibleChange);