@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.
- package/CHANGELOG.md +36 -0
- package/README.en-US.md +6 -6
- package/README.md +6 -6
- package/cjs/_helpers/type.d.ts +1 -1
- package/cjs/avatar/group.js +1 -1
- package/cjs/avatar/index.js +10 -13
- package/cjs/avatar/style/css/index.css +96 -126
- package/cjs/avatar/style/index.less +54 -72
- package/cjs/badge/index.js +6 -8
- package/cjs/badge/style/css/index.css +5 -5
- package/cjs/badge/style/index.less +5 -5
- package/cjs/button/hooks.d.ts +1 -2
- package/cjs/button/hooks.js +5 -3
- package/cjs/button/index.d.ts +12 -0
- package/cjs/button/index.js +40 -33
- package/cjs/button/style/css/index.css +75 -310
- package/cjs/button/style/index.less +32 -38
- package/cjs/count-down/demo/style/mobile.less +1 -1
- package/cjs/dropdown/dropdown.d.ts +3 -0
- package/cjs/dropdown/dropdown.js +306 -0
- package/cjs/dropdown/index.d.ts +3 -4
- package/cjs/dropdown/index.js +3 -303
- package/cjs/dropdown/options.js +2 -1
- package/cjs/dropdown/type.d.ts +20 -9
- package/cjs/dropdown-menu/dropdown-menu.d.ts +4 -0
- package/cjs/dropdown-menu/dropdown-menu.js +273 -0
- package/cjs/dropdown-menu/helper.d.ts +1 -1
- package/cjs/dropdown-menu/index.d.ts +2 -3
- package/cjs/dropdown-menu/index.js +2 -245
- package/cjs/dropdown-menu/type.d.ts +21 -20
- package/cjs/image/index.js +4 -1
- package/cjs/image/style/css/index.css +2 -1
- package/cjs/image/style/index.less +2 -1
- package/cjs/image-picker/index.d.ts +11 -8
- package/cjs/image-picker/index.js +19 -12
- package/cjs/image-picker/style/index.less +1 -1
- package/cjs/nav-bar/index.js +7 -2
- package/cjs/notify/index.d.ts +1 -0
- package/cjs/notify/index.js +12 -0
- package/cjs/notify/type.d.ts +1 -0
- package/cjs/show-monitor/index.js +31 -3
- package/cjs/transition/index.js +4 -2
- package/dist/index.js +677 -617
- package/dist/index.min.js +4 -4
- package/dist/style.css +174 -438
- package/dist/style.min.css +1 -1
- package/esm/_helpers/type.d.ts +1 -1
- package/esm/avatar/group.js +1 -1
- package/esm/avatar/index.js +10 -13
- package/esm/avatar/style/css/index.css +96 -126
- package/esm/avatar/style/index.less +54 -72
- package/esm/badge/index.js +6 -8
- package/esm/badge/style/css/index.css +5 -5
- package/esm/badge/style/index.less +5 -5
- package/esm/button/hooks.d.ts +1 -2
- package/esm/button/hooks.js +5 -3
- package/esm/button/index.d.ts +12 -0
- package/esm/button/index.js +42 -35
- package/esm/button/style/css/index.css +75 -310
- package/esm/button/style/index.less +32 -38
- package/esm/count-down/demo/style/mobile.less +1 -1
- package/esm/dropdown/dropdown.d.ts +3 -0
- package/esm/dropdown/dropdown.js +288 -0
- package/esm/dropdown/index.d.ts +3 -4
- package/esm/dropdown/index.js +3 -293
- package/esm/dropdown/options.js +2 -1
- package/esm/dropdown/type.d.ts +20 -9
- package/esm/dropdown-menu/dropdown-menu.d.ts +4 -0
- package/esm/dropdown-menu/dropdown-menu.js +256 -0
- package/esm/dropdown-menu/helper.d.ts +1 -1
- package/esm/dropdown-menu/index.d.ts +2 -3
- package/esm/dropdown-menu/index.js +2 -237
- package/esm/dropdown-menu/type.d.ts +21 -20
- package/esm/image/index.js +4 -1
- package/esm/image/style/css/index.css +2 -1
- package/esm/image/style/index.less +2 -1
- package/esm/image-picker/index.d.ts +11 -8
- package/esm/image-picker/index.js +19 -12
- package/esm/image-picker/style/index.less +1 -1
- package/esm/nav-bar/index.js +6 -2
- package/esm/notify/index.d.ts +1 -0
- package/esm/notify/index.js +1 -0
- package/esm/notify/type.d.ts +1 -0
- package/esm/show-monitor/index.js +31 -3
- package/esm/transition/index.js +4 -2
- package/package.json +3 -3
- package/tokens/app/arcodesign/default/css-variables.less +2 -1
- package/tokens/app/arcodesign/default/index.d.ts +2 -1
- package/tokens/app/arcodesign/default/index.js +2 -1
- package/tokens/app/arcodesign/default/index.json +123 -47
- package/tokens/app/arcodesign/default/index.less +2 -1
- package/umd/_helpers/type.d.ts +1 -1
- package/umd/avatar/group.js +1 -1
- package/umd/avatar/index.js +10 -13
- package/umd/avatar/style/css/index.css +96 -126
- package/umd/avatar/style/index.less +54 -72
- package/umd/badge/index.js +6 -8
- package/umd/badge/style/css/index.css +5 -5
- package/umd/badge/style/index.less +5 -5
- package/umd/button/hooks.d.ts +1 -2
- package/umd/button/hooks.js +5 -3
- package/umd/button/index.d.ts +12 -0
- package/umd/button/index.js +40 -33
- package/umd/button/style/css/index.css +75 -310
- package/umd/button/style/index.less +32 -38
- package/umd/count-down/demo/style/mobile.less +1 -1
- package/umd/dropdown/dropdown.d.ts +3 -0
- package/umd/dropdown/dropdown.js +309 -0
- package/umd/dropdown/index.d.ts +3 -4
- package/umd/dropdown/index.js +5 -298
- package/umd/dropdown/options.js +2 -1
- package/umd/dropdown/type.d.ts +20 -9
- package/umd/dropdown-menu/dropdown-menu.d.ts +4 -0
- package/umd/dropdown-menu/dropdown-menu.js +278 -0
- package/umd/dropdown-menu/helper.d.ts +1 -1
- package/umd/dropdown-menu/index.d.ts +2 -3
- package/umd/dropdown-menu/index.js +5 -241
- package/umd/dropdown-menu/type.d.ts +21 -20
- package/umd/image/index.js +4 -1
- package/umd/image/style/css/index.css +2 -1
- package/umd/image/style/index.less +2 -1
- package/umd/image-picker/index.d.ts +11 -8
- package/umd/image-picker/index.js +19 -12
- package/umd/image-picker/style/index.less +1 -1
- package/umd/nav-bar/index.js +9 -6
- package/umd/notify/index.d.ts +1 -0
- package/umd/notify/index.js +13 -4
- package/umd/notify/type.d.ts +1 -0
- package/umd/show-monitor/index.js +31 -3
- package/umd/transition/index.js +4 -2
@@ -1,10 +1,5 @@
|
|
1
|
-
import
|
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 =
|
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?:
|
110
|
+
defaultValues?: OptionValueType[];
|
116
111
|
/**
|
117
112
|
* (受控) 每个选择器选中的项
|
118
113
|
* @en (Controlled) The item selected by each selector
|
119
114
|
* */
|
120
|
-
values?:
|
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:
|
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:
|
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:
|
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?:
|
140
|
+
getFormattedOptions?: (options: SingleOptionProps['options'], values?: OptionValueType[]) => {
|
141
141
|
formattedOptions: OptionsItem[][];
|
142
|
-
formattedValue:
|
142
|
+
formattedValue: OptionValueType[];
|
143
143
|
};
|
144
144
|
}
|
145
145
|
export interface MultipleOptionProps {
|
146
146
|
multiple: true;
|
147
147
|
options: string[] | OptionsItem[][];
|
148
|
-
defaultValues?:
|
149
|
-
values?:
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
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:
|
156
|
+
formattedValue: OptionValueType[][];
|
156
157
|
};
|
157
158
|
}
|
158
159
|
export declare type OptionProps = SingleOptionProps | MultipleOptionProps;
|
package/esm/image/index.js
CHANGED
@@ -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 {
|
@@ -14,9 +14,10 @@ export interface ImagePickItem {
|
|
14
14
|
/**
|
15
15
|
* 图片状态
|
16
16
|
* @en Image Status
|
17
|
-
* @default
|
17
|
+
* @default 以图片自身加载状态而定
|
18
|
+
* @default_en According to inner status of the image
|
18
19
|
*/
|
19
|
-
status
|
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[]) =>
|
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.
|
161
|
+
onLongPress?: (e: React.TouchEvent<HTMLElement>, image: ImagePickItem, index: number) => void;
|
162
162
|
/**
|
163
163
|
* 图片选择适配器
|
164
164
|
* @en Select Adaptor
|
165
165
|
*/
|
166
|
-
selectAdapter
|
166
|
+
selectAdapter?: () => Promise<SelectCallback>;
|
167
167
|
}
|
168
168
|
export interface ImagePickerRef {
|
169
|
-
/**
|
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
|
-
|
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
|
-
|
159
|
+
onLongPress == null ? void 0 : onLongPress(e, image, index);
|
155
160
|
}, 750);
|
156
161
|
};
|
157
162
|
|
158
|
-
var
|
163
|
+
var handleClick = function handleClick(e, image, index) {
|
159
164
|
clearTimeout(timeOutEvent);
|
160
165
|
|
161
166
|
if (timeOutEvent !== 0) {
|
162
|
-
|
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
|
-
|
210
|
-
return
|
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:
|
258
|
+
onChange: function onChange(e) {
|
259
|
+
return handleChange(e);
|
260
|
+
},
|
254
261
|
ref: fileRef
|
255
262
|
}) : null)),
|
256
263
|
title: ''
|
package/esm/nav-bar/index.js
CHANGED
@@ -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
|
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)
|
package/esm/notify/index.d.ts
CHANGED
package/esm/notify/index.js
CHANGED
@@ -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,
|
package/esm/notify/type.d.ts
CHANGED
@@ -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
|
379
|
-
var curListeners = listeners[
|
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[
|
417
|
+
delete listeners[_key2];
|
390
418
|
|
391
419
|
if (scrollPort.current) {
|
392
420
|
scrollPort.current.removeEventListener('scroll', throttlingVisibleChange);
|