@arco-design/mobile-react 2.30.9 → 2.31.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 +32 -0
- package/README.en-US.md +70 -2
- package/README.md +69 -2
- package/cjs/carousel/index.js +3 -0
- package/cjs/form/form-item.d.ts +3 -0
- package/cjs/form/form-item.js +38 -10
- package/cjs/form/style/css/index.css +13 -0
- package/cjs/form/style/index.less +18 -0
- package/cjs/icon/IconCheck/index.js +1 -2
- package/cjs/icon/IconDownload/index.d.ts +7 -0
- package/cjs/icon/IconDownload/index.js +41 -0
- package/cjs/icon/IconFile/index.d.ts +7 -0
- package/cjs/icon/IconFile/index.js +41 -0
- package/cjs/icon/IconKeyboard/index.js +1 -0
- package/cjs/icon/IconQuestionCircle/index.js +1 -2
- package/cjs/icon/IconUpload/index.js +6 -4
- package/cjs/icon/IconUserFill/index.js +1 -2
- package/cjs/icon/index.d.ts +3 -1
- package/cjs/icon/index.js +17 -7
- package/cjs/icon/type.d.ts +3 -1
- package/cjs/image-picker/index.js +15 -161
- package/cjs/image-picker/type.d.ts +4 -73
- package/cjs/index.d.ts +1 -0
- package/cjs/index.js +6 -2
- package/cjs/input/hooks.js +2 -2
- package/cjs/input/props.d.ts +2 -2
- package/cjs/picker/index.js +60 -19
- package/cjs/picker/type.d.ts +7 -2
- package/cjs/picker-view/components/cascader.d.ts +1 -0
- package/cjs/picker-view/components/cascader.js +8 -1
- package/cjs/picker-view/components/picker-cell.d.ts +1 -0
- package/cjs/picker-view/components/picker-cell.js +6 -1
- package/cjs/picker-view/index.d.ts +6 -1
- package/cjs/picker-view/index.js +25 -13
- package/cjs/style.d.ts +1 -0
- package/cjs/style.js +3 -1
- package/cjs/tabs/tab-cell.js +54 -29
- package/cjs/tabs/type.d.ts +5 -0
- package/cjs/uploader/index.d.ts +16 -0
- package/cjs/uploader/index.js +180 -0
- package/cjs/uploader/style/css/index.css +650 -0
- package/cjs/uploader/style/css/index.d.ts +4 -0
- package/cjs/uploader/style/css/index.js +9 -0
- package/cjs/uploader/style/index.d.ts +4 -0
- package/cjs/uploader/style/index.js +9 -0
- package/cjs/uploader/style/index.less +161 -0
- package/cjs/uploader/type.d.ts +108 -0
- package/cjs/uploader/type.js +3 -0
- package/cjs/uploader/upload/index.d.ts +2 -0
- package/cjs/uploader/upload/index.js +19 -0
- package/cjs/uploader/upload/type.d.ts +107 -0
- package/cjs/uploader/upload/type.js +3 -0
- package/cjs/uploader/upload/upload.d.ts +20 -0
- package/cjs/uploader/upload/upload.js +189 -0
- package/dist/index.js +679 -310
- package/dist/index.min.js +4 -4
- package/dist/style.css +593 -0
- package/dist/style.min.css +1 -1
- package/esm/carousel/index.js +3 -0
- package/esm/form/form-item.d.ts +3 -0
- package/esm/form/form-item.js +36 -10
- package/esm/form/style/css/index.css +13 -0
- package/esm/form/style/index.less +18 -0
- package/esm/icon/IconCheck/index.js +1 -2
- package/esm/icon/IconDownload/index.d.ts +7 -0
- package/esm/icon/IconDownload/index.js +30 -0
- package/esm/icon/IconFile/index.d.ts +7 -0
- package/esm/icon/IconFile/index.js +30 -0
- package/esm/icon/IconKeyboard/index.js +1 -0
- package/esm/icon/IconQuestionCircle/index.js +1 -2
- package/esm/icon/IconUpload/index.js +6 -4
- package/esm/icon/IconUserFill/index.js +1 -2
- package/esm/icon/index.d.ts +3 -1
- package/esm/icon/index.js +3 -1
- package/esm/icon/type.d.ts +3 -1
- package/esm/image-picker/index.js +14 -160
- package/esm/image-picker/type.d.ts +4 -73
- package/esm/index.d.ts +1 -0
- package/esm/index.js +2 -1
- package/esm/input/hooks.js +2 -2
- package/esm/input/props.d.ts +2 -2
- package/esm/picker/index.js +61 -20
- package/esm/picker/type.d.ts +7 -2
- package/esm/picker-view/components/cascader.d.ts +1 -0
- package/esm/picker-view/components/cascader.js +8 -1
- package/esm/picker-view/components/picker-cell.d.ts +1 -0
- package/esm/picker-view/components/picker-cell.js +6 -1
- package/esm/picker-view/index.d.ts +6 -1
- package/esm/picker-view/index.js +26 -13
- package/esm/style.d.ts +1 -0
- package/esm/style.js +2 -1
- package/esm/tabs/tab-cell.js +56 -30
- package/esm/tabs/type.d.ts +5 -0
- package/esm/uploader/index.d.ts +16 -0
- package/esm/uploader/index.js +150 -0
- package/esm/uploader/style/css/index.css +650 -0
- package/esm/uploader/style/css/index.d.ts +4 -0
- package/esm/uploader/style/css/index.js +4 -0
- package/esm/uploader/style/index.d.ts +4 -0
- package/esm/uploader/style/index.js +4 -0
- package/esm/uploader/style/index.less +161 -0
- package/esm/uploader/type.d.ts +108 -0
- package/esm/uploader/type.js +1 -0
- package/esm/uploader/upload/index.d.ts +2 -0
- package/esm/uploader/upload/index.js +2 -0
- package/esm/uploader/upload/type.d.ts +107 -0
- package/esm/uploader/upload/type.js +1 -0
- package/esm/uploader/upload/upload.d.ts +20 -0
- package/esm/uploader/upload/upload.js +175 -0
- package/package.json +3 -3
- package/tokens/app/arcodesign/default/css-variables.less +27 -0
- package/tokens/app/arcodesign/default/index.d.ts +27 -0
- package/tokens/app/arcodesign/default/index.js +28 -1
- package/tokens/app/arcodesign/default/index.json +292 -0
- package/tokens/app/arcodesign/default/index.less +27 -0
- package/umd/carousel/index.js +3 -0
- package/umd/form/form-item.d.ts +3 -0
- package/umd/form/form-item.js +38 -10
- package/umd/form/style/css/index.css +13 -0
- package/umd/form/style/index.less +18 -0
- package/umd/icon/IconCheck/index.js +1 -2
- package/umd/icon/IconDownload/index.d.ts +7 -0
- package/umd/icon/IconDownload/index.js +49 -0
- package/umd/icon/IconFile/index.d.ts +7 -0
- package/umd/icon/IconFile/index.js +49 -0
- package/umd/icon/IconKeyboard/index.js +1 -0
- package/umd/icon/IconQuestionCircle/index.js +1 -2
- package/umd/icon/IconUpload/index.js +6 -4
- package/umd/icon/IconUserFill/index.js +1 -2
- package/umd/icon/index.d.ts +3 -1
- package/umd/icon/index.js +15 -9
- package/umd/icon/type.d.ts +3 -1
- package/umd/image-picker/index.js +17 -163
- package/umd/image-picker/type.d.ts +4 -73
- package/umd/index.d.ts +1 -0
- package/umd/index.js +7 -5
- package/umd/input/hooks.js +2 -2
- package/umd/input/props.d.ts +2 -2
- package/umd/picker/index.js +60 -19
- package/umd/picker/type.d.ts +7 -2
- package/umd/picker-view/components/cascader.d.ts +1 -0
- package/umd/picker-view/components/cascader.js +8 -1
- package/umd/picker-view/components/picker-cell.d.ts +1 -0
- package/umd/picker-view/components/picker-cell.js +6 -1
- package/umd/picker-view/index.d.ts +6 -1
- package/umd/picker-view/index.js +25 -13
- package/umd/style.d.ts +1 -0
- package/umd/style.js +4 -4
- package/umd/tabs/tab-cell.js +54 -29
- package/umd/tabs/type.d.ts +5 -0
- package/umd/uploader/index.d.ts +16 -0
- package/umd/uploader/index.js +178 -0
- package/umd/uploader/style/css/index.css +650 -0
- package/umd/uploader/style/css/index.d.ts +4 -0
- package/umd/uploader/style/css/index.js +15 -0
- package/umd/uploader/style/index.d.ts +4 -0
- package/umd/uploader/style/index.js +15 -0
- package/umd/uploader/style/index.less +161 -0
- package/umd/uploader/type.d.ts +108 -0
- package/umd/uploader/type.js +17 -0
- package/umd/uploader/upload/index.d.ts +2 -0
- package/umd/uploader/upload/index.js +27 -0
- package/umd/uploader/upload/type.d.ts +107 -0
- package/umd/uploader/upload/type.js +17 -0
- package/umd/uploader/upload/upload.d.ts +20 -0
- package/umd/uploader/upload/upload.js +200 -0
package/esm/index.d.ts
CHANGED
package/esm/index.js
CHANGED
@@ -55,4 +55,5 @@ export { default as TabBar } from './tab-bar';
|
|
55
55
|
export { default as Tag } from './tag';
|
56
56
|
export { default as Textarea } from './textarea';
|
57
57
|
export { default as Toast } from './toast';
|
58
|
-
export { default as Transition } from './transition';
|
58
|
+
export { default as Transition } from './transition';
|
59
|
+
export { default as Uploader } from './uploader';
|
package/esm/input/hooks.js
CHANGED
@@ -61,8 +61,8 @@ export function useInputLogic(props, inputRef) {
|
|
61
61
|
useEffect(function () {
|
62
62
|
if (autoFocus) {
|
63
63
|
setTimeout(function () {
|
64
|
-
inputRef.current && inputRef.current.
|
65
|
-
},
|
64
|
+
inputRef.current && inputRef.current.click();
|
65
|
+
}, 100);
|
66
66
|
}
|
67
67
|
}, []);
|
68
68
|
useEffect(function () {
|
package/esm/input/props.d.ts
CHANGED
@@ -57,8 +57,8 @@ export interface BasicInputProps<T = HTMLInputElement> {
|
|
57
57
|
*/
|
58
58
|
readOnly?: boolean;
|
59
59
|
/**
|
60
|
-
*
|
61
|
-
* @en Whether to automatically get the focus
|
60
|
+
* 是否自动获取焦点,开启后会触发一次onClick事件
|
61
|
+
* @en Whether to automatically get the focus, it will trigger an onClick event once after being enabled
|
62
62
|
*/
|
63
63
|
autoFocus?: boolean;
|
64
64
|
/**
|
package/esm/picker/index.js
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
2
2
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
|
3
|
-
var _excluded = ["className", "itemStyle", "cascade", "cols", "rows", "data", "okText", "dismissText", "disabled", "clickable", "hideEmptyCols", "title", "visible", "value", "needBottomOffset", "onDismiss", "onOk", "onChange", "maskClosable", "onHide", "onPickerChange", "touchToStop", "gestureOutOfControl"];
|
4
|
-
import React, { useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
|
3
|
+
var _excluded = ["className", "itemStyle", "cascade", "cols", "rows", "data", "okText", "dismissText", "disabled", "clickable", "hideEmptyCols", "title", "visible", "value", "needBottomOffset", "onDismiss", "onOk", "onChange", "maskClosable", "onHide", "onPickerChange", "touchToStop", "gestureOutOfControl", "renderLinkedContainer"];
|
4
|
+
import React, { useEffect, useRef, forwardRef, useImperativeHandle, useState } from 'react';
|
5
5
|
import { cls, componentWrapper, nextTick } from '@arco-design/mobile-utils';
|
6
6
|
import { ContextLayout } from '../context-provider';
|
7
7
|
import Popup from '../popup';
|
@@ -29,8 +29,7 @@ var Picker = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
29
29
|
hideEmptyCols = _props$hideEmptyCols === void 0 ? false : _props$hideEmptyCols,
|
30
30
|
_props$title = props.title,
|
31
31
|
title = _props$title === void 0 ? '' : _props$title,
|
32
|
-
|
33
|
-
visible = _props$visible === void 0 ? false : _props$visible,
|
32
|
+
userSetVisible = props.visible,
|
34
33
|
value = props.value,
|
35
34
|
_props$needBottomOffs = props.needBottomOffset,
|
36
35
|
needBottomOffset = _props$needBottomOffs === void 0 ? false : _props$needBottomOffs,
|
@@ -44,11 +43,26 @@ var Picker = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
44
43
|
touchToStop = props.touchToStop,
|
45
44
|
_props$gestureOutOfCo = props.gestureOutOfControl,
|
46
45
|
gestureOutOfControl = _props$gestureOutOfCo === void 0 ? true : _props$gestureOutOfCo,
|
46
|
+
renderLinkedContainer = props.renderLinkedContainer,
|
47
47
|
otherProps = _objectWithoutPropertiesLoose(props, _excluded);
|
48
48
|
|
49
49
|
var scrollValueRef = useLatestRef(value);
|
50
50
|
var domRef = useRef(null);
|
51
51
|
var pickerViewRef = useRef(null);
|
52
|
+
|
53
|
+
var _useState = useState(false),
|
54
|
+
linkVisible = _useState[0],
|
55
|
+
setLinkVisible = _useState[1];
|
56
|
+
|
57
|
+
var _useState2 = useState(function () {
|
58
|
+
return getCurrentValueData();
|
59
|
+
}),
|
60
|
+
linkArgs = _useState2[0],
|
61
|
+
setLinkArgs = _useState2[1]; // 来自linkedContainer的visible变化,优先级高于受控值
|
62
|
+
// @en Visible changes from linkedContainer which have priority over controlled values
|
63
|
+
|
64
|
+
|
65
|
+
var visible = linkVisible || userSetVisible || false;
|
52
66
|
useImperativeHandle(ref, function () {
|
53
67
|
return {
|
54
68
|
dom: domRef.current,
|
@@ -79,39 +93,61 @@ var Picker = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
79
93
|
}
|
80
94
|
};
|
81
95
|
});
|
96
|
+
useEffect(function () {
|
97
|
+
nextTick(function () {
|
98
|
+
setLinkArgs(getCurrentValueData());
|
99
|
+
});
|
100
|
+
}, []);
|
101
|
+
|
102
|
+
function hidePicker(scene) {
|
103
|
+
setLinkVisible(false);
|
104
|
+
onHide == null ? void 0 : onHide(scene);
|
105
|
+
}
|
82
106
|
|
83
107
|
function handleDismiss() {
|
84
108
|
if (onDismiss) {
|
85
109
|
onDismiss();
|
86
110
|
}
|
87
111
|
|
88
|
-
|
89
|
-
onHide('dismiss');
|
90
|
-
}
|
112
|
+
hidePicker('dismiss');
|
91
113
|
}
|
92
114
|
|
93
|
-
|
94
|
-
var _pickerViewRef$curren6;
|
115
|
+
function getCurrentValueData() {
|
116
|
+
var _pickerViewRef$curren6, _pickerViewRef$curren7;
|
117
|
+
|
118
|
+
var val = ((_pickerViewRef$curren6 = pickerViewRef.current) == null ? void 0 : _pickerViewRef$curren6.getAllColumnValues()) || scrollValueRef.current || [];
|
119
|
+
var selectedData = ((_pickerViewRef$curren7 = pickerViewRef.current) == null ? void 0 : _pickerViewRef$curren7.getAllColumnData()) || [];
|
120
|
+
return {
|
121
|
+
value: val,
|
122
|
+
data: selectedData
|
123
|
+
};
|
124
|
+
}
|
95
125
|
|
96
|
-
|
126
|
+
function handleConfirm() {
|
127
|
+
var _pickerViewRef$curren8;
|
128
|
+
|
129
|
+
(_pickerViewRef$curren8 = pickerViewRef.current) == null ? void 0 : _pickerViewRef$curren8.scrollToCurrentIndex();
|
97
130
|
nextTick(function () {
|
98
|
-
var
|
131
|
+
var _getCurrentValueData = getCurrentValueData(),
|
132
|
+
val = _getCurrentValueData.value,
|
133
|
+
selectedData = _getCurrentValueData.data;
|
99
134
|
|
100
|
-
|
135
|
+
setLinkArgs({
|
136
|
+
value: val,
|
137
|
+
data: selectedData
|
138
|
+
});
|
101
139
|
|
102
140
|
if (onOk) {
|
103
|
-
onOk(val);
|
141
|
+
onOk(val, selectedData);
|
104
142
|
}
|
105
143
|
|
106
144
|
if (onChange) {
|
107
145
|
onChange(val);
|
108
146
|
}
|
109
147
|
|
110
|
-
|
111
|
-
onHide('confirm');
|
112
|
-
}
|
148
|
+
hidePicker('confirm');
|
113
149
|
});
|
114
|
-
}
|
150
|
+
}
|
115
151
|
|
116
152
|
useListenResize(updateLayoutByVisible, [visible]); // 每次visible从false变为true时需要重新设置scrollValue的值为当前value的值(初始值)
|
117
153
|
|
@@ -127,11 +163,16 @@ var Picker = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
127
163
|
return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref) {
|
128
164
|
var prefixCls = _ref.prefixCls,
|
129
165
|
locale = _ref.locale;
|
130
|
-
return /*#__PURE__*/React.createElement(
|
166
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, renderLinkedContainer ? /*#__PURE__*/React.createElement("div", {
|
167
|
+
className: prefixCls + "-picker-linked-container",
|
168
|
+
onClick: function onClick() {
|
169
|
+
return setLinkVisible(true);
|
170
|
+
}
|
171
|
+
}, renderLinkedContainer(linkArgs.value, linkArgs.data)) : null, /*#__PURE__*/React.createElement(Popup, _extends({
|
131
172
|
visible: visible,
|
132
173
|
className: cls(className, prefixCls + "-picker all-border-box"),
|
133
174
|
close: function close() {
|
134
|
-
return
|
175
|
+
return hidePicker('mask');
|
135
176
|
},
|
136
177
|
direction: "bottom",
|
137
178
|
maskClosable: maskClosable,
|
@@ -163,7 +204,7 @@ var Picker = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
163
204
|
clickable: clickable,
|
164
205
|
hideEmptyCols: hideEmptyCols,
|
165
206
|
touchToStop: touchToStop
|
166
|
-
})));
|
207
|
+
}))));
|
167
208
|
});
|
168
209
|
});
|
169
210
|
/**
|
package/esm/picker/type.d.ts
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
import React from 'react';
|
1
|
+
import React, { ReactNode } from 'react';
|
2
2
|
import { PickerData, ValueType } from '../picker-view/type';
|
3
3
|
import { PopupProps } from '../popup';
|
4
4
|
export declare type DataType = PickerData[] | PickerData[][] | ValueType[][];
|
@@ -81,7 +81,7 @@ export interface PickerProps extends Omit<PopupProps, 'visible' | 'close' | 'chi
|
|
81
81
|
* 点击选中时执行的回调
|
82
82
|
* @en Callback when clicking on Ok
|
83
83
|
*/
|
84
|
-
onOk?: (value: ValueType[]) => void;
|
84
|
+
onOk?: (value: ValueType[], data: PickerData[]) => void;
|
85
85
|
/**
|
86
86
|
* 点击取消时执行的回调
|
87
87
|
* @en Callback when clicking to cancel
|
@@ -123,4 +123,9 @@ export interface PickerProps extends Omit<PopupProps, 'visible' | 'close' | 'chi
|
|
123
123
|
* @default true
|
124
124
|
*/
|
125
125
|
gestureOutOfControl?: boolean;
|
126
|
+
/**
|
127
|
+
* 将选择器的展现隐藏状态及选中值的展示与某个容器关联,传入后将同时渲染该容器和选择器组件,此时选择器组件的 visible 和 onHide 属性可不传,点击该容器会唤起选择器
|
128
|
+
* @en Associate the hidden state of the picker and the display of the selected value with a container. After passing it in, the container and the picker component will be rendered at the same time. At this time, the visible and onHide attributes of the picker component are optional values. Clicking the container will evoke the picker
|
129
|
+
*/
|
130
|
+
renderLinkedContainer?: (value: ValueType[], data: PickerData[]) => ReactNode;
|
126
131
|
}
|
@@ -19,6 +19,7 @@ export interface CascaderRef {
|
|
19
19
|
getCellMovingStatus: () => PickerCellMovingStatus[];
|
20
20
|
scrollToCurrentIndex: () => void;
|
21
21
|
getAllCellsValue: () => ValueType[];
|
22
|
+
getAllCellsData: () => PickerData[];
|
22
23
|
}
|
23
24
|
declare const Cascader: React.ForwardRefExoticComponent<CascaderProps & React.RefAttributes<CascaderRef>>;
|
24
25
|
export default Cascader;
|
@@ -22,7 +22,8 @@ var Cascader = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
22
22
|
return {
|
23
23
|
getCellMovingStatus: getCellMovingStatus,
|
24
24
|
scrollToCurrentIndex: scrollToCurrentIndex,
|
25
|
-
getAllCellsValue: getAllCellsValue
|
25
|
+
getAllCellsValue: getAllCellsValue,
|
26
|
+
getAllCellsData: getAllCellsData
|
26
27
|
};
|
27
28
|
});
|
28
29
|
|
@@ -44,6 +45,12 @@ var Cascader = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
44
45
|
});
|
45
46
|
}
|
46
47
|
|
48
|
+
function getAllCellsData() {
|
49
|
+
return pickerCellsRef.current.map(function (cell) {
|
50
|
+
return cell.getCurrentCellData();
|
51
|
+
});
|
52
|
+
}
|
53
|
+
|
47
54
|
function _onValueChange(value, index, newData) {
|
48
55
|
var children = arrayTreeFilter(data, function (item, level) {
|
49
56
|
return level <= index && item.value === value[level];
|
@@ -22,6 +22,7 @@ export interface PickerCellRef {
|
|
22
22
|
movingStatus: PickerCellMovingStatus;
|
23
23
|
scrollToCurrentIndex: () => void;
|
24
24
|
getCurrentCellValue: () => ValueType;
|
25
|
+
getCurrentCellData: () => PickerData;
|
25
26
|
}
|
26
27
|
declare const PickerCell: React.ForwardRefExoticComponent<PickerCellProps & React.RefAttributes<PickerCellRef>>;
|
27
28
|
export default PickerCell;
|
@@ -289,6 +289,10 @@ var PickerCell = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
289
289
|
return (_data$currentIndex = data[currentIndex]) == null ? void 0 : _data$currentIndex.value;
|
290
290
|
}
|
291
291
|
|
292
|
+
function getCurrentCellData() {
|
293
|
+
return data[currentIndex];
|
294
|
+
}
|
295
|
+
|
292
296
|
function _clearTimer() {
|
293
297
|
timeRef.current && clearTimeout(timeRef.current);
|
294
298
|
timeRef.current = null;
|
@@ -354,7 +358,8 @@ var PickerCell = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
354
358
|
return {
|
355
359
|
movingStatus: movingStatusRef.current,
|
356
360
|
scrollToCurrentIndex: scrollToCurrentIndex,
|
357
|
-
getCurrentCellValue: getCurrentCellValue
|
361
|
+
getCurrentCellValue: getCurrentCellValue,
|
362
|
+
getCurrentCellData: getCurrentCellData
|
358
363
|
};
|
359
364
|
});
|
360
365
|
return !hideEmptyCols || data && data.length ? /*#__PURE__*/React.createElement("div", {
|
@@ -2,7 +2,7 @@ import React from 'react';
|
|
2
2
|
import MultiPicker from '../picker-view/components/multi-picker';
|
3
3
|
import PickerCell from '../picker-view/components/picker-cell';
|
4
4
|
import Cascader from '../picker-view/components/cascader';
|
5
|
-
import { PickerViewProps, ValueType, PickerCellMovingStatus } from './type';
|
5
|
+
import { PickerViewProps, ValueType, PickerData, PickerCellMovingStatus } from './type';
|
6
6
|
export * from './type';
|
7
7
|
export { MultiPicker, PickerCell, Cascader };
|
8
8
|
export interface PickerViewRef {
|
@@ -41,6 +41,11 @@ export interface PickerViewRef {
|
|
41
41
|
* @en Jump directly to the current most recent line (will break scrolling when called)
|
42
42
|
*/
|
43
43
|
scrollToCurrentIndex: () => void;
|
44
|
+
/**
|
45
|
+
* 获取所有列的 data
|
46
|
+
* @en Get all column data
|
47
|
+
*/
|
48
|
+
getAllColumnData: () => PickerData[];
|
44
49
|
}
|
45
50
|
declare const _default: React.ForwardRefExoticComponent<PickerViewProps & React.RefAttributes<PickerViewRef>> & {
|
46
51
|
displayName?: string | undefined;
|
package/esm/picker-view/index.js
CHANGED
@@ -8,6 +8,15 @@ import Cascader from '../picker-view/components/cascader';
|
|
8
8
|
import { useMountedState } from '../_helpers';
|
9
9
|
export * from './type';
|
10
10
|
export { MultiPicker, PickerCell, Cascader };
|
11
|
+
|
12
|
+
var isArray = function isArray(dt) {
|
13
|
+
return dt ? Array.isArray(dt[0]) : false;
|
14
|
+
};
|
15
|
+
|
16
|
+
var isStrOrNum = function isStrOrNum(dt) {
|
17
|
+
return typeof dt[0][0] === 'string' || typeof dt[0][0] === 'number';
|
18
|
+
};
|
19
|
+
|
11
20
|
var PickerView = /*#__PURE__*/forwardRef(function (props, ref) {
|
12
21
|
var _props$className = props.className,
|
13
22
|
className = _props$className === void 0 ? '' : _props$className,
|
@@ -57,14 +66,6 @@ var PickerView = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
57
66
|
var innerData = useMemo(function () {
|
58
67
|
var newData;
|
59
68
|
|
60
|
-
var isArray = function isArray(dt) {
|
61
|
-
return dt ? Array.isArray(dt[0]) : false;
|
62
|
-
};
|
63
|
-
|
64
|
-
var isStrOrNum = function isStrOrNum(dt) {
|
65
|
-
return typeof dt[0][0] === 'string' || typeof dt[0][0] === 'number';
|
66
|
-
};
|
67
|
-
|
68
69
|
if (isArray(data)) {
|
69
70
|
if (isStrOrNum(data)) {
|
70
71
|
newData = data.map(function (item) {
|
@@ -98,6 +99,17 @@ var PickerView = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
98
99
|
});
|
99
100
|
};
|
100
101
|
|
102
|
+
var getAllColumnData = function getAllColumnData() {
|
103
|
+
var _cascaderRef$current2;
|
104
|
+
|
105
|
+
var curValues = cascade ? ((_cascaderRef$current2 = cascaderRef.current) == null ? void 0 : _cascaderRef$current2.getAllCellsData()) || [] : pickerCellsRef.current.map(function (cell) {
|
106
|
+
return cell.getCurrentCellData();
|
107
|
+
});
|
108
|
+
return curValues.filter(function (v) {
|
109
|
+
return v !== undefined;
|
110
|
+
});
|
111
|
+
};
|
112
|
+
|
101
113
|
function getColumnValue(index) {
|
102
114
|
if (index === void 0) {
|
103
115
|
index = 0;
|
@@ -107,18 +119,18 @@ var PickerView = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
107
119
|
}
|
108
120
|
|
109
121
|
function getCellMovingStatus() {
|
110
|
-
var _cascaderRef$
|
122
|
+
var _cascaderRef$current3;
|
111
123
|
|
112
|
-
return cascade ? ((_cascaderRef$
|
124
|
+
return cascade ? ((_cascaderRef$current3 = cascaderRef.current) == null ? void 0 : _cascaderRef$current3.getCellMovingStatus()) || [] : pickerCellsRef.current.map(function (cell) {
|
113
125
|
return cell.movingStatus;
|
114
126
|
});
|
115
127
|
}
|
116
128
|
|
117
129
|
function scrollToCurrentIndex() {
|
118
130
|
if (cascade) {
|
119
|
-
var _cascaderRef$
|
131
|
+
var _cascaderRef$current4;
|
120
132
|
|
121
|
-
(_cascaderRef$
|
133
|
+
(_cascaderRef$current4 = cascaderRef.current) == null ? void 0 : _cascaderRef$current4.scrollToCurrentIndex();
|
122
134
|
return;
|
123
135
|
}
|
124
136
|
|
@@ -135,7 +147,8 @@ var PickerView = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
135
147
|
getColumnValue: getColumnValue,
|
136
148
|
updateLayout: updateLayout,
|
137
149
|
resetValue: resetValue,
|
138
|
-
scrollToCurrentIndex: scrollToCurrentIndex
|
150
|
+
scrollToCurrentIndex: scrollToCurrentIndex,
|
151
|
+
getAllColumnData: getAllColumnData
|
139
152
|
};
|
140
153
|
});
|
141
154
|
|
package/esm/style.d.ts
CHANGED
package/esm/style.js
CHANGED
package/esm/tabs/tab-cell.js
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
2
2
|
import React, { useRef, forwardRef, useImperativeHandle, useState, useEffect, useContext } from 'react';
|
3
3
|
import { cls, scrollWithAnimation, nextTick } from '@arco-design/mobile-utils';
|
4
|
-
import { useSystem } from '../_helpers';
|
4
|
+
import { useSystem, useUpdateEffect } from '../_helpers';
|
5
5
|
import TabCellUnderline from './tab-cell-underline';
|
6
6
|
import { GlobalContext } from '../context-provider';
|
7
7
|
var TabCell = /*#__PURE__*/forwardRef(function (props, ref) {
|
@@ -73,14 +73,18 @@ var TabCell = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
73
73
|
return tabs.length < overflowThreshold ? tabBarArrange : 'start';
|
74
74
|
}),
|
75
75
|
originArrange = _useState3[0],
|
76
|
-
setOriginArrange = _useState3[1];
|
76
|
+
setOriginArrange = _useState3[1];
|
77
77
|
|
78
|
+
var _useState4 = useState(false),
|
79
|
+
forceUpdate = _useState4[0],
|
80
|
+
setForceUpdate = _useState4[1]; // 默认tab小于overflowThreshold个时不开启加载前隐藏,大于overflowThreshold个时开启
|
78
81
|
|
79
|
-
|
82
|
+
|
83
|
+
var _useState5 = useState(function () {
|
80
84
|
return hideTabBarBeforeMounted === void 0 ? tabs.length < overflowThreshold || activeIndex === 0 : !hideTabBarBeforeMounted;
|
81
85
|
}),
|
82
|
-
showTab =
|
83
|
-
setShowTab =
|
86
|
+
showTab = _useState5[0],
|
87
|
+
setShowTab = _useState5[1];
|
84
88
|
|
85
89
|
var isVertical = tabDirection === 'vertical';
|
86
90
|
var isLine = (type || '').indexOf('line') !== -1;
|
@@ -95,6 +99,15 @@ var TabCell = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
95
99
|
var hasDivider = tabBarHasDivider === void 0 ? isLine : tabBarHasDivider;
|
96
100
|
var wrapSize = isVertical ? wrapWidth : wrapHeight;
|
97
101
|
var system = useSystem();
|
102
|
+
|
103
|
+
var updateScrollPosition = function updateScrollPosition() {
|
104
|
+
if (wrapSize && tabBarScrollChance !== 'none') {
|
105
|
+
setTimeout(function () {
|
106
|
+
scrollToCenter();
|
107
|
+
}, tabBarScrollChance === 'after-jump' ? Math.max(transitionDuration || 0, duration || 0) : 0);
|
108
|
+
}
|
109
|
+
};
|
110
|
+
|
98
111
|
useEffect(function () {
|
99
112
|
nextTick(function () {
|
100
113
|
setCellOverflow(); // dom出来之后originArrange置空,交由tabBarArrange控制
|
@@ -114,31 +127,16 @@ var TabCell = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
114
127
|
(_underlineRef$current = underlineRef.current) == null ? void 0 : _underlineRef$current.resetUnderlineStyle();
|
115
128
|
});
|
116
129
|
}, [activeIndex, tabs, getCellPadding('left'), getCellPadding('right'), tabBarGutter, tabDirection]);
|
117
|
-
useImperativeHandle(ref, function () {
|
118
|
-
return {
|
119
|
-
dom: domRef.current,
|
120
|
-
scrollTo: scrollTo,
|
121
|
-
scrollToCenter: scrollToCenter,
|
122
|
-
hasOverflow: hasOverflow,
|
123
|
-
setCaterpillarAnimate: function setCaterpillarAnimate(ratio) {
|
124
|
-
var _underlineRef$current2;
|
125
|
-
|
126
|
-
return (_underlineRef$current2 = underlineRef.current) == null ? void 0 : _underlineRef$current2.setCaterpillarAnimate(ratio);
|
127
|
-
},
|
128
|
-
resetUnderlineStyle: function resetUnderlineStyle() {
|
129
|
-
var _underlineRef$current3;
|
130
|
-
|
131
|
-
return (_underlineRef$current3 = underlineRef.current) == null ? void 0 : _underlineRef$current3.resetUnderlineStyle();
|
132
|
-
}
|
133
|
-
};
|
134
|
-
}, [scrollToCenter, scrollTo, hasOverflow]);
|
135
130
|
useEffect(function () {
|
136
|
-
|
137
|
-
setTimeout(function () {
|
138
|
-
scrollToCenter();
|
139
|
-
}, tabBarScrollChance === 'after-jump' ? Math.max(transitionDuration || 0, duration || 0) : 0);
|
140
|
-
}
|
131
|
+
updateScrollPosition();
|
141
132
|
}, [activeIndex, wrapSize]);
|
133
|
+
useUpdateEffect(function () {
|
134
|
+
var _underlineRef$current2;
|
135
|
+
|
136
|
+
setCellOverflow();
|
137
|
+
(_underlineRef$current2 = underlineRef.current) == null ? void 0 : _underlineRef$current2.resetUnderlineStyle();
|
138
|
+
updateScrollPosition();
|
139
|
+
}, [forceUpdate]);
|
142
140
|
useEffect(function () {
|
143
141
|
tabBarScrollChance !== 'none' && scrollToCenter(true); // TabCell左右可滚动时,防止触发父级touchmove事件导致滚不动
|
144
142
|
// @en When the TabCell can be scrolled left and right, prevent the parent touchmove event from being triggered which result in inability to scroll
|
@@ -279,7 +277,7 @@ var TabCell = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
279
277
|
return typeof tab === 'string' ? tab : tab.title;
|
280
278
|
}
|
281
279
|
|
282
|
-
function renderTabUnderline() {
|
280
|
+
var renderTabUnderline = function renderTabUnderline() {
|
283
281
|
if (!showUnderline || !isLine) {
|
284
282
|
return null;
|
285
283
|
}
|
@@ -310,7 +308,7 @@ var TabCell = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
310
308
|
getTabCenterLeft: getTabCenterLeft,
|
311
309
|
getTabRect: getTabRect
|
312
310
|
}, lineProps));
|
313
|
-
}
|
311
|
+
};
|
314
312
|
|
315
313
|
var cellInner = /*#__PURE__*/React.createElement(React.Fragment, null, tabs.map(function (tab, index) {
|
316
314
|
return /*#__PURE__*/React.createElement("div", {
|
@@ -352,6 +350,34 @@ var TabCell = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
352
350
|
height: '100%'
|
353
351
|
}
|
354
352
|
}) : null);
|
353
|
+
|
354
|
+
var _updateLayout = function updateLayout() {
|
355
|
+
setForceUpdate(function (val) {
|
356
|
+
return !val;
|
357
|
+
});
|
358
|
+
};
|
359
|
+
|
360
|
+
useImperativeHandle(ref, function () {
|
361
|
+
return {
|
362
|
+
dom: domRef.current,
|
363
|
+
scrollTo: scrollTo,
|
364
|
+
scrollToCenter: scrollToCenter,
|
365
|
+
hasOverflow: hasOverflow,
|
366
|
+
setCaterpillarAnimate: function setCaterpillarAnimate(ratio) {
|
367
|
+
var _underlineRef$current3;
|
368
|
+
|
369
|
+
return (_underlineRef$current3 = underlineRef.current) == null ? void 0 : _underlineRef$current3.setCaterpillarAnimate(ratio);
|
370
|
+
},
|
371
|
+
resetUnderlineStyle: function resetUnderlineStyle() {
|
372
|
+
var _underlineRef$current4;
|
373
|
+
|
374
|
+
return (_underlineRef$current4 = underlineRef.current) == null ? void 0 : _underlineRef$current4.resetUnderlineStyle();
|
375
|
+
},
|
376
|
+
updateLayout: function updateLayout() {
|
377
|
+
return _updateLayout();
|
378
|
+
}
|
379
|
+
};
|
380
|
+
}, [scrollToCenter, scrollTo, hasOverflow]);
|
355
381
|
return /*#__PURE__*/React.createElement("div", {
|
356
382
|
className: cls(prefix + "-container-wrap", tabDirection, "type-" + type, tabBarClass, system),
|
357
383
|
style: tabBarStyle
|
package/esm/tabs/type.d.ts
CHANGED
@@ -565,6 +565,11 @@ export interface TabCellRef {
|
|
565
565
|
* @en Recalculate underline style
|
566
566
|
*/
|
567
567
|
resetUnderlineStyle: () => void;
|
568
|
+
/**
|
569
|
+
* 强制更新 tab-cell
|
570
|
+
* @en Force update tab-cell
|
571
|
+
*/
|
572
|
+
updateLayout: () => void;
|
568
573
|
}
|
569
574
|
export interface TabPaneProps extends Pick<TabsProps, 'duration' | 'transitionDuration' | 'lazyloadCount' | 'hideContentStyle' | 'renderHideContent' | 'mode' | 'tabPaneClass' | 'tabPaneStyle' | 'tabPaneExtra' | 'getScrollContainer' | 'scrollThrottle' | 'scrollOffset' | 'goLastWhenScrollBottom' | 'scrollVertical' | 'translateZ' | 'fullScreen' | 'autoHeight' | 'onScroll' | 'swipeEnergySaving'> {
|
570
575
|
prefixCls?: string;
|
@@ -0,0 +1,16 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { UploaderRef, UploaderProps } from './type';
|
3
|
+
export * from './type';
|
4
|
+
declare const _default: React.ForwardRefExoticComponent<UploaderProps & React.RefAttributes<UploaderRef>> & {
|
5
|
+
displayName?: string | undefined;
|
6
|
+
};
|
7
|
+
/**
|
8
|
+
* 文件上传组件
|
9
|
+
* @en Uploader Component
|
10
|
+
* @type 数据录入
|
11
|
+
* @type_en Data Entry
|
12
|
+
* @name 文件上传
|
13
|
+
* @name_en Uploader
|
14
|
+
* @displayName Uploader
|
15
|
+
*/
|
16
|
+
export default _default;
|