@nutui/nutui-react 1.2.1 → 1.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +17 -0
- package/dist/esm/ConfigProvider.js +11 -0
- package/dist/esm/DatePicker.js +148 -106
- package/dist/esm/Divider.js +6 -3
- package/dist/esm/Icon.js +4 -72
- package/dist/esm/NumberKeyboard/style/index.js +2 -0
- package/dist/esm/NumberKeyboard.js +277 -0
- package/dist/esm/Picker.js +294 -195
- package/dist/esm/Progress/style/index.js +2 -0
- package/dist/esm/Progress.js +130 -0
- package/dist/esm/Range.js +186 -129
- package/dist/esm/SearchBar/style/index.js +2 -0
- package/dist/esm/SearchBar.js +247 -0
- package/dist/esm/Signature.js +3 -0
- package/dist/esm/Tabbar.js +6 -3
- package/dist/esm/TabbarItem.js +14 -5
- package/dist/esm/Tag.js +18 -9
- package/dist/esm/icon-62bd7379.js +72 -0
- package/dist/esm/nutui-react.es.js +3 -0
- package/dist/esm/useTouch-a2ea68c6.js +119 -0
- package/dist/locales/base.d.ts +11 -0
- package/dist/locales/base.js +1 -1
- package/dist/locales/en-US.js +12 -1
- package/dist/locales/id-ID.js +12 -1
- package/dist/locales/zh-CN.js +12 -1
- package/dist/locales/zh-TW.js +12 -1
- package/dist/nutui.react.es.js +1312 -592
- package/dist/nutui.react.umd.js +15 -15
- package/dist/packages/numberkeyboard/numberkeyboard.scss +106 -0
- package/dist/packages/picker/picker.scss +35 -16
- package/dist/packages/progress/progress.scss +81 -0
- package/dist/packages/range/range.scss +141 -13
- package/dist/packages/searchbar/searchbar.scss +106 -0
- package/dist/packages/signature/signature.scss +4 -4
- package/dist/packages/tabbar/tabbar.scss +10 -3
- package/dist/packages/tabbaritem/tabbaritem.scss +26 -8
- package/dist/style.css +1 -1
- package/dist/style.es.js +1 -1
- package/dist/styles/themes/default.scss +3 -0
- package/dist/styles/variables.scss +73 -6
- package/dist/types/datepicker/__test__/datepicker.spec.d.ts +1 -0
- package/dist/types/datepicker/datepicker.d.ts +16 -5
- package/dist/types/divider/__test__/divider.spec.d.ts +1 -0
- package/dist/types/navbar/__test__/navbar.spec.d.ts +1 -0
- package/dist/types/numberkeyboard/_test_/index.spec.d.ts +1 -0
- package/dist/types/numberkeyboard/demo.d.ts +3 -0
- package/dist/types/numberkeyboard/index.d.ts +2 -0
- package/dist/types/numberkeyboard/numberkeyboard.d.ts +20 -0
- package/dist/types/nutui.react.d.ts +4 -1
- package/dist/types/picker/picker.d.ts +17 -13
- package/dist/types/picker/pickerSlot.d.ts +4 -3
- package/dist/types/progress/__tests__/progress.spec.d.ts +1 -0
- package/dist/types/progress/demo.d.ts +3 -0
- package/dist/types/progress/index.d.ts +2 -0
- package/dist/types/progress/progress.d.ts +26 -0
- package/dist/types/range/demo.d.ts +1 -0
- package/dist/types/range/range.d.ts +3 -1
- package/dist/types/searchbar/demo.d.ts +3 -0
- package/dist/types/searchbar/index.d.ts +2 -0
- package/dist/types/searchbar/searchbar.d.ts +60 -0
- package/dist/types/signature/__test__/signature.spec.d.ts +2 -0
- package/dist/types/tabbar/__tests__/tabbar.spec.d.ts +1 -0
- package/dist/types/tabbar/tabbar.d.ts +2 -2
- package/dist/types/tabbaritem/tabbaritem.d.ts +4 -1
- package/dist/types/tag/tag.d.ts +1 -1
- package/package.json +3 -2
- package/dist/packages/range/custom.scss +0 -9
package/dist/esm/Picker.js
CHANGED
|
@@ -2,26 +2,34 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
|
2
2
|
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
3
3
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
4
4
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
5
|
-
var _excluded = ["isVisible", "title", "listData", "defaultValueData", "onConfirm", "onClose", "onCloseUpdate", "
|
|
5
|
+
var _excluded = ["isVisible", "title", "listData", "defaultValueData", "onConfirm", "onClose", "onCloseUpdate", "onChange", "className", "style", "threeDimensional"];
|
|
6
6
|
|
|
7
7
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
8
8
|
|
|
9
9
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
10
10
|
|
|
11
|
-
import React__default, { useState, useRef,
|
|
11
|
+
import React__default, { useState, useRef, useEffect } from 'react';
|
|
12
12
|
import Popup from './Popup.js';
|
|
13
|
+
import { u as useTouch } from './useTouch-a2ea68c6.js';
|
|
13
14
|
import { useConfig } from './ConfigProvider.js';
|
|
14
15
|
import { c as cn } from './bem-893ad28d.js';
|
|
15
16
|
import '@bem-react/classname';
|
|
16
17
|
|
|
17
18
|
var InternalPickerSlot = function InternalPickerSlot(props, ref) {
|
|
18
|
-
var
|
|
19
|
-
_props$keyIndex = props.keyIndex,
|
|
19
|
+
var _props$keyIndex = props.keyIndex,
|
|
20
20
|
keyIndex = _props$keyIndex === void 0 ? 0 : _props$keyIndex,
|
|
21
21
|
defaultValue = props.defaultValue,
|
|
22
22
|
_props$listData = props.listData,
|
|
23
23
|
listData = _props$listData === void 0 ? [] : _props$listData,
|
|
24
|
+
_props$threeDimension = props.threeDimensional,
|
|
25
|
+
threeDimensional = _props$threeDimension === void 0 ? true : _props$threeDimension,
|
|
24
26
|
chooseItem = props.chooseItem;
|
|
27
|
+
var touch = useTouch(); // 触发惯性滑动条件:
|
|
28
|
+
// 在手指离开屏幕时,如果和上一次 move 时的间隔小于 `MOMENTUM_TIME` 且 move
|
|
29
|
+
// 距离大于 `MOMENTUM_DISTANCE` 时,执行惯性滑动
|
|
30
|
+
|
|
31
|
+
var INERTIA_TIME = 300;
|
|
32
|
+
var INERTIA_DISTANCE = 15;
|
|
25
33
|
|
|
26
34
|
var _useState = useState(1),
|
|
27
35
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -31,36 +39,26 @@ var InternalPickerSlot = function InternalPickerSlot(props, ref) {
|
|
|
31
39
|
var lineSpacing = 36;
|
|
32
40
|
var rotation = 20;
|
|
33
41
|
var timer;
|
|
34
|
-
|
|
42
|
+
useRef(null);
|
|
35
43
|
var rollerRef = useRef(null);
|
|
36
44
|
var pickerSlotRef = useRef(null);
|
|
37
|
-
|
|
38
|
-
var
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
};
|
|
55
|
-
});
|
|
56
|
-
useEffect(function () {
|
|
57
|
-
touchParams.transformY = 0;
|
|
58
|
-
modifyStatus();
|
|
59
|
-
}, [isUpdate]);
|
|
60
|
-
useEffect(function () {
|
|
61
|
-
touchParams.transformY = 0;
|
|
62
|
-
modifyStatus();
|
|
63
|
-
}, [defaultValue]);
|
|
45
|
+
|
|
46
|
+
var _useState3 = useState(0),
|
|
47
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
48
|
+
startTime = _useState4[0],
|
|
49
|
+
setStartTime = _useState4[1];
|
|
50
|
+
|
|
51
|
+
var _useState5 = useState(0),
|
|
52
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
53
|
+
startY = _useState6[0],
|
|
54
|
+
setStartY = _useState6[1];
|
|
55
|
+
|
|
56
|
+
var transformY = useRef(0);
|
|
57
|
+
|
|
58
|
+
var _useState7 = useState(0),
|
|
59
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
|
60
|
+
scrollDistance = _useState8[0],
|
|
61
|
+
setScrollDistance = _useState8[1];
|
|
64
62
|
|
|
65
63
|
var isHidden = function isHidden(index) {
|
|
66
64
|
if (index >= currIndex + 8 || index <= currIndex - 8) {
|
|
@@ -75,24 +73,26 @@ var InternalPickerSlot = function InternalPickerSlot(props, ref) {
|
|
|
75
73
|
var type = arguments.length > 1 ? arguments[1] : undefined;
|
|
76
74
|
var time = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1000;
|
|
77
75
|
var deg = arguments.length > 3 ? arguments[3] : undefined;
|
|
76
|
+
var nTime = time;
|
|
78
77
|
|
|
79
|
-
if (type
|
|
80
|
-
|
|
81
|
-
|
|
78
|
+
if (type !== 'end') {
|
|
79
|
+
nTime = 0;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
if (threeDimensional) {
|
|
83
|
+
rollerRef.current.style.webkitTransform = "rotate3d(1, 0, 0, ".concat(deg, ")");
|
|
82
84
|
} else {
|
|
83
|
-
|
|
84
|
-
rollerRef.current.style.webkitTransition = '';
|
|
85
|
+
rollerRef.current.style.webkitTransform = "translate3d(0, ".concat(translateY, "px, 0)");
|
|
85
86
|
}
|
|
86
87
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
touchParams.scrollDistance = translateY;
|
|
88
|
+
rollerRef.current.style.webkitTransition = "transform ".concat(nTime, "ms cubic-bezier(0.17, 0.89, 0.45, 1)");
|
|
89
|
+
setScrollDistance(translateY);
|
|
90
90
|
};
|
|
91
91
|
|
|
92
92
|
var setMove = function setMove(move, type, time) {
|
|
93
|
-
var updateMove = move +
|
|
93
|
+
var updateMove = move + transformY.current;
|
|
94
94
|
|
|
95
|
-
if (type === 'end'
|
|
95
|
+
if (type === 'end') {
|
|
96
96
|
// 限定滚动距离
|
|
97
97
|
if (updateMove > 0) {
|
|
98
98
|
updateMove = 0;
|
|
@@ -106,133 +106,148 @@ var InternalPickerSlot = function InternalPickerSlot(props, ref) {
|
|
|
106
106
|
var endMove = Math.round(updateMove / lineSpacing) * lineSpacing;
|
|
107
107
|
var deg = "".concat((Math.abs(Math.round(endMove / lineSpacing)) + 1) * rotation, "deg");
|
|
108
108
|
setTransform(endMove, type, time, deg);
|
|
109
|
-
timer = setTimeout(function () {
|
|
110
|
-
setChooseValue(endMove);
|
|
111
|
-
}, time / 2);
|
|
112
109
|
setCurrIndex(Math.abs(Math.round(endMove / lineSpacing)) + 1);
|
|
113
110
|
} else {
|
|
114
|
-
var _deg =
|
|
111
|
+
var _deg = 0;
|
|
112
|
+
var currentDeg = (-updateMove / lineSpacing + 1) * rotation; // picker 滚动的最大角度
|
|
115
113
|
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
_deg = "".concat((-updateMove / lineSpacing + 1) * rotation, "deg");
|
|
120
|
-
}
|
|
114
|
+
var maxDeg = (listData.length + 1) * rotation;
|
|
115
|
+
var minDeg = 0;
|
|
116
|
+
_deg = Math.min(Math.max(currentDeg, minDeg), maxDeg);
|
|
121
117
|
|
|
122
|
-
|
|
123
|
-
|
|
118
|
+
if (minDeg < _deg && _deg < maxDeg) {
|
|
119
|
+
setTransform(updateMove, '', undefined, "".concat(_deg, "deg"));
|
|
120
|
+
setCurrIndex(Math.abs(Math.round(updateMove / lineSpacing)) + 1);
|
|
121
|
+
}
|
|
124
122
|
}
|
|
125
123
|
};
|
|
126
124
|
|
|
127
125
|
var setChooseValue = function setChooseValue(move) {
|
|
128
126
|
chooseItem && chooseItem(listData === null || listData === void 0 ? void 0 : listData[Math.round(-move / lineSpacing)], keyIndex);
|
|
129
|
-
};
|
|
127
|
+
}; // 开始滚动
|
|
128
|
+
|
|
130
129
|
|
|
131
130
|
var touchStart = function touchStart(event) {
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
touchParams.transformY = touchParams.scrollDistance;
|
|
131
|
+
touch.start(event);
|
|
132
|
+
setStartY(touch.deltaY);
|
|
133
|
+
setStartTime(Date.now());
|
|
134
|
+
transformY.current = scrollDistance;
|
|
137
135
|
};
|
|
138
136
|
|
|
139
|
-
var touchMove = function touchMove(event
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
137
|
+
var touchMove = function touchMove(event) {
|
|
138
|
+
touch.move(event);
|
|
139
|
+
|
|
140
|
+
if (touch.isVertical) {
|
|
141
|
+
preventDefault(event, true);
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
var move = touch.deltaY - startY;
|
|
144
145
|
setMove(move);
|
|
145
146
|
};
|
|
146
147
|
|
|
147
148
|
var touchEnd = function touchEnd(event) {
|
|
148
|
-
|
|
149
|
-
var
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
move *= 2;
|
|
156
|
-
moveTime += 1000;
|
|
157
|
-
setMove(move, 'end', moveTime);
|
|
149
|
+
var move = touch.deltaY - startY;
|
|
150
|
+
var moveTime = Date.now() - startTime; // 区分是否为惯性滚动
|
|
151
|
+
|
|
152
|
+
if (moveTime <= INERTIA_TIME && Math.abs(move) > INERTIA_DISTANCE) {
|
|
153
|
+
// 惯性滚动
|
|
154
|
+
var distance = momentum(move, moveTime);
|
|
155
|
+
setMove(distance, 'end', moveTime + 1000);
|
|
158
156
|
} else {
|
|
159
|
-
setMove(move, 'end'
|
|
157
|
+
setMove(move, 'end');
|
|
160
158
|
}
|
|
159
|
+
|
|
160
|
+
setTimeout(function () {
|
|
161
|
+
touch.reset();
|
|
162
|
+
}, 0);
|
|
163
|
+
}; // 惯性滚动 距离
|
|
164
|
+
|
|
165
|
+
|
|
166
|
+
var momentum = function momentum(distance, duration) {
|
|
167
|
+
var nDistance = distance; // 惯性滚动的速度
|
|
168
|
+
|
|
169
|
+
var speed = Math.abs(nDistance / duration); // 惯性滚动的距离
|
|
170
|
+
|
|
171
|
+
nDistance = speed / 0.003 * (nDistance < 0 ? -1 : 1);
|
|
172
|
+
return nDistance;
|
|
161
173
|
};
|
|
162
174
|
|
|
163
175
|
var modifyStatus = function modifyStatus(type, val) {
|
|
164
176
|
var value = val || defaultValue;
|
|
165
177
|
var index = -1;
|
|
166
178
|
|
|
167
|
-
if (value
|
|
179
|
+
if (value) {
|
|
168
180
|
listData.some(function (item, idx) {
|
|
169
|
-
if (item.value
|
|
181
|
+
if (item.value === value) {
|
|
170
182
|
index = idx;
|
|
171
183
|
return true;
|
|
172
184
|
}
|
|
185
|
+
|
|
186
|
+
return false;
|
|
173
187
|
});
|
|
174
|
-
} else
|
|
175
|
-
listData.
|
|
176
|
-
if (item
|
|
177
|
-
index =
|
|
178
|
-
return true;
|
|
188
|
+
} else {
|
|
189
|
+
listData.forEach(function (item, i) {
|
|
190
|
+
if (item.value === defaultValue) {
|
|
191
|
+
index = i;
|
|
179
192
|
}
|
|
180
193
|
});
|
|
181
|
-
} else {
|
|
182
|
-
index = listData.indexOf(defaultValue);
|
|
183
194
|
}
|
|
184
195
|
|
|
185
196
|
setCurrIndex(index === -1 ? 1 : index + 1);
|
|
186
197
|
var move = index === -1 ? 0 : index * lineSpacing;
|
|
187
198
|
type && setChooseValue(-move);
|
|
188
199
|
setMove(-move);
|
|
189
|
-
};
|
|
200
|
+
}; // 惯性滚动结束
|
|
190
201
|
|
|
191
|
-
useEffect(function () {
|
|
192
|
-
var _pickerSlotRef$curren, _pickerSlotRef$curren2, _pickerSlotRef$curren3;
|
|
193
202
|
|
|
194
|
-
|
|
203
|
+
var stopMomentum = function stopMomentum() {
|
|
204
|
+
setChooseValue(scrollDistance);
|
|
205
|
+
}; // 阻止默认事件
|
|
195
206
|
|
|
196
|
-
(_pickerSlotRef$curren = pickerSlotRef.current) === null || _pickerSlotRef$curren === void 0 ? void 0 : _pickerSlotRef$curren.addEventListener('touchstart', touchStart);
|
|
197
|
-
(_pickerSlotRef$curren2 = pickerSlotRef.current) === null || _pickerSlotRef$curren2 === void 0 ? void 0 : _pickerSlotRef$curren2.addEventListener('touchmove', touchMove);
|
|
198
|
-
(_pickerSlotRef$curren3 = pickerSlotRef.current) === null || _pickerSlotRef$curren3 === void 0 ? void 0 : _pickerSlotRef$curren3.addEventListener('touchend', touchEnd);
|
|
199
|
-
return function () {
|
|
200
|
-
var _pickerSlotRef$curren4, _pickerSlotRef$curren5, _pickerSlotRef$curren6;
|
|
201
207
|
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
208
|
+
var preventDefault = function preventDefault(event, isStopPropagation) {
|
|
209
|
+
/* istanbul ignore else */
|
|
210
|
+
if (typeof event.cancelable !== 'boolean' || event.cancelable) {
|
|
211
|
+
event.preventDefault();
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
if (isStopPropagation) {
|
|
215
|
+
event.stopPropagation();
|
|
216
|
+
}
|
|
217
|
+
};
|
|
218
|
+
|
|
219
|
+
useEffect(function () {
|
|
220
|
+
setScrollDistance(0);
|
|
221
|
+
transformY.current = 0;
|
|
222
|
+
modifyStatus(false);
|
|
223
|
+
return function () {
|
|
206
224
|
clearTimeout(timer);
|
|
207
225
|
};
|
|
208
226
|
}, [listData]);
|
|
209
227
|
return React__default.createElement("div", {
|
|
210
228
|
className: "nut-picker-list",
|
|
211
|
-
ref: pickerSlotRef
|
|
229
|
+
ref: pickerSlotRef,
|
|
230
|
+
onTouchStart: touchStart,
|
|
231
|
+
onTouchMove: touchMove,
|
|
232
|
+
onTouchEnd: touchEnd
|
|
212
233
|
}, React__default.createElement("div", {
|
|
213
234
|
className: "nut-picker-roller",
|
|
214
|
-
ref: rollerRef
|
|
215
|
-
|
|
235
|
+
ref: rollerRef,
|
|
236
|
+
onTransitionEnd: stopMomentum
|
|
237
|
+
}, threeDimensional && listData.map(function (item, index) {
|
|
216
238
|
return React__default.createElement("div", {
|
|
217
239
|
className: "nut-picker-roller-item ".concat(isHidden(index + 1) && 'nut-picker-roller-item-hidden'),
|
|
218
240
|
style: {
|
|
219
241
|
transform: "rotate3d(1, 0, 0, ".concat(-rotation * (index + 1), "deg) translate3d(0px, 0px, 104px)")
|
|
220
242
|
},
|
|
221
|
-
key: item.
|
|
222
|
-
}, item.
|
|
223
|
-
})
|
|
224
|
-
className: "nut-picker-content"
|
|
225
|
-
}, React__default.createElement("div", {
|
|
226
|
-
className: "nut-picker-list-panel",
|
|
227
|
-
ref: listRef
|
|
228
|
-
}, listData.map(function (item, index) {
|
|
243
|
+
key: item.value ? item.value : index
|
|
244
|
+
}, item.text ? item.text : item);
|
|
245
|
+
}), !threeDimensional && listData.map(function (item, index) {
|
|
229
246
|
return React__default.createElement("div", {
|
|
230
|
-
className: "nut-picker-item",
|
|
231
|
-
key: item.
|
|
232
|
-
}, item.
|
|
233
|
-
}),
|
|
234
|
-
className: "nut-picker-placeholder"
|
|
235
|
-
}))), React__default.createElement("div", {
|
|
247
|
+
className: "nut-picker-roller-item-tile",
|
|
248
|
+
key: item.value ? item.value : index
|
|
249
|
+
}, item.text ? item.text : item);
|
|
250
|
+
})), React__default.createElement("div", {
|
|
236
251
|
className: "nut-picker-mask"
|
|
237
252
|
}), React__default.createElement("div", {
|
|
238
253
|
className: "nut-picker-indicator"
|
|
@@ -249,122 +264,207 @@ var InternalPicker = function InternalPicker(props, ref) {
|
|
|
249
264
|
title = props.title,
|
|
250
265
|
_props$listData2 = props.listData,
|
|
251
266
|
listData = _props$listData2 === void 0 ? [] : _props$listData2,
|
|
252
|
-
|
|
253
|
-
defaultValueData = _props$defaultValueDa === void 0 ? [] : _props$defaultValueDa,
|
|
267
|
+
defaultValueData = props.defaultValueData,
|
|
254
268
|
onConfirm = props.onConfirm,
|
|
255
|
-
|
|
269
|
+
onClose = props.onClose,
|
|
256
270
|
onCloseUpdate = props.onCloseUpdate,
|
|
257
|
-
|
|
271
|
+
onChange = props.onChange,
|
|
258
272
|
className = props.className,
|
|
259
273
|
style = props.style,
|
|
274
|
+
threeDimensional = props.threeDimensional,
|
|
260
275
|
rest = _objectWithoutProperties(props, _excluded);
|
|
261
276
|
|
|
262
|
-
var
|
|
263
|
-
|
|
264
|
-
chooseValueData =
|
|
265
|
-
setchooseValueData =
|
|
277
|
+
var _useState9 = useState([]),
|
|
278
|
+
_useState10 = _slicedToArray(_useState9, 2),
|
|
279
|
+
chooseValueData = _useState10[0],
|
|
280
|
+
setchooseValueData = _useState10[1]; // 选择的数据的 value 值, 每一条数据的 value 值
|
|
266
281
|
|
|
267
|
-
var _useState5 = useState([]),
|
|
268
|
-
_useState6 = _slicedToArray(_useState5, 2),
|
|
269
|
-
cacheValueData = _useState6[0],
|
|
270
|
-
setcacheValueData = _useState6[1];
|
|
271
282
|
|
|
272
|
-
var
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
283
|
+
var _useState11 = useState(0),
|
|
284
|
+
_useState12 = _slicedToArray(_useState11, 2),
|
|
285
|
+
columnIndex = _useState12[0],
|
|
286
|
+
setcolumnIndex = _useState12[1]; // 选中列
|
|
287
|
+
|
|
276
288
|
|
|
277
289
|
var pickerRef = useRef(null);
|
|
278
|
-
var pickerSlotRef1 = useRef(null);
|
|
279
|
-
var pickerSlotRef2 = useRef(null);
|
|
280
|
-
var pickerSlotRef3 = useRef(null);
|
|
281
|
-
var refList = [pickerSlotRef1, pickerSlotRef2, pickerSlotRef3];
|
|
282
290
|
|
|
283
|
-
var
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
291
|
+
var _useState13 = useState([]),
|
|
292
|
+
_useState14 = _slicedToArray(_useState13, 2),
|
|
293
|
+
columnsList = _useState14[0],
|
|
294
|
+
setColumnsList = _useState14[1]; // 格式化后每一列的数据
|
|
295
|
+
|
|
296
|
+
|
|
297
|
+
var b = cn('picker'); // 默认值修改
|
|
287
298
|
|
|
288
|
-
var b = cn('picker');
|
|
289
299
|
useEffect(function () {
|
|
290
|
-
|
|
300
|
+
if (defaultValueData && defaultValueData.length !== 0 && defaultValueData.toString() !== chooseValueData.toString()) {
|
|
301
|
+
var data = _toConsumableArray(defaultValueData);
|
|
302
|
+
|
|
303
|
+
setchooseValueData(data);
|
|
304
|
+
setColumnsList(normalListData());
|
|
305
|
+
}
|
|
306
|
+
}, [defaultValueData]); // 选中值进行修改
|
|
307
|
+
|
|
308
|
+
useEffect(function () {
|
|
309
|
+
onChange && onChange(columnIndex, chooseValueData, selectedOptions());
|
|
310
|
+
}, [chooseValueData]); // 列表格式修改
|
|
291
311
|
|
|
292
|
-
setchooseValueData(data);
|
|
293
|
-
setcacheValueData(data);
|
|
294
|
-
onConfirm && onConfirm(data);
|
|
295
|
-
}, [defaultValueData]);
|
|
296
312
|
useEffect(function () {
|
|
297
313
|
init();
|
|
298
314
|
}, [listData]);
|
|
299
315
|
|
|
300
|
-
var
|
|
301
|
-
|
|
316
|
+
var closeActionSheet = function closeActionSheet() {
|
|
317
|
+
onClose && onClose(chooseValueData, selectedOptions());
|
|
318
|
+
onCloseUpdate && onCloseUpdate(chooseValueData, selectedOptions(), pickerRef);
|
|
319
|
+
}; // 点击确定
|
|
302
320
|
|
|
303
|
-
if (!value) return;
|
|
304
|
-
setcacheValueData(function (data) {
|
|
305
|
-
var cache = _toConsumableArray(cacheValueData);
|
|
306
321
|
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
(_refList$index$curren = refList[index].current) === null || _refList$index$curren === void 0 ? void 0 : _refList$index$curren.updateTransform(value);
|
|
322
|
+
var confirm = function confirm() {
|
|
323
|
+
onConfirm && onConfirm(chooseValueData, selectedOptions());
|
|
324
|
+
onClose && onClose(chooseValueData, selectedOptions());
|
|
311
325
|
};
|
|
312
326
|
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
327
|
+
var selectedOptions = function selectedOptions() {
|
|
328
|
+
var optins = [];
|
|
329
|
+
columnsList.map(function (column, index) {
|
|
330
|
+
var currOptions = [];
|
|
331
|
+
currOptions = column.filter(function (item) {
|
|
332
|
+
return item.value === chooseValueData[index];
|
|
333
|
+
});
|
|
318
334
|
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
335
|
+
if (currOptions[0]) {
|
|
336
|
+
optins.push(currOptions[0]);
|
|
337
|
+
} else {
|
|
338
|
+
column[0] && optins.push(column[0]);
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
return column;
|
|
342
|
+
});
|
|
343
|
+
return optins;
|
|
344
|
+
}; // 选择每一列的数据
|
|
345
|
+
|
|
346
|
+
|
|
347
|
+
var _chooseItem = function chooseItem(option, columnIndex) {
|
|
348
|
+
if (option && Object.keys(option).length) {
|
|
349
|
+
// 是否移动后是否与之前有差异
|
|
350
|
+
if (chooseValueData[columnIndex] !== option.value) {
|
|
351
|
+
if (columnsType() === 'cascade') {
|
|
352
|
+
chooseValueData[columnIndex] = option.value ? option.value : '';
|
|
353
|
+
setchooseValueData(_toConsumableArray(chooseValueData));
|
|
354
|
+
var index = columnIndex;
|
|
355
|
+
var cursor = option;
|
|
356
|
+
|
|
357
|
+
while (cursor && cursor.children && cursor.children[0]) {
|
|
358
|
+
chooseValueData[index + 1] = cursor.children[0].value;
|
|
359
|
+
setchooseValueData(_toConsumableArray(chooseValueData));
|
|
360
|
+
index++;
|
|
361
|
+
var cc = cursor.children[0];
|
|
362
|
+
cursor = cc;
|
|
363
|
+
} // 当前改变列的下一列 children 值为空
|
|
364
|
+
|
|
365
|
+
|
|
366
|
+
if (cursor && cursor.children) {
|
|
367
|
+
chooseValueData[index + 1] = '';
|
|
368
|
+
setchooseValueData(_toConsumableArray(chooseValueData));
|
|
369
|
+
}
|
|
370
|
+
|
|
371
|
+
setColumnsList(normalListData());
|
|
372
|
+
} else {
|
|
373
|
+
setchooseValueData(function (data) {
|
|
374
|
+
var cdata = _toConsumableArray(data);
|
|
375
|
+
|
|
376
|
+
cdata[columnIndex] = Object.prototype.hasOwnProperty.call(option, 'value') ? option.value : '';
|
|
377
|
+
return cdata;
|
|
378
|
+
});
|
|
379
|
+
}
|
|
380
|
+
|
|
381
|
+
setcolumnIndex(columnIndex);
|
|
382
|
+
}
|
|
383
|
+
}
|
|
384
|
+
}; // 传入的数据格式化
|
|
325
385
|
|
|
326
|
-
var confirm = function confirm(defaultValueData) {
|
|
327
|
-
var data = defaultValueData || cacheValueData;
|
|
328
|
-
onConfirm && onConfirm(data);
|
|
329
|
-
setchooseValueData(_toConsumableArray(data));
|
|
330
|
-
_onClose && _onClose();
|
|
331
|
-
};
|
|
332
386
|
|
|
333
|
-
var
|
|
334
|
-
|
|
335
|
-
var cacheData = _toConsumableArray(data);
|
|
387
|
+
var normalListData = function normalListData() {
|
|
388
|
+
var type = columnsType();
|
|
336
389
|
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
390
|
+
switch (type) {
|
|
391
|
+
case 'multiple':
|
|
392
|
+
return listData;
|
|
393
|
+
|
|
394
|
+
case 'cascade':
|
|
395
|
+
// 级联数据处理
|
|
396
|
+
return formatCascade(listData, chooseValueData);
|
|
397
|
+
|
|
398
|
+
default:
|
|
399
|
+
return [listData];
|
|
400
|
+
}
|
|
401
|
+
}; // 每一列的类型
|
|
402
|
+
|
|
403
|
+
|
|
404
|
+
var columnsType = function columnsType() {
|
|
405
|
+
var firstColumn = listData[0];
|
|
406
|
+
|
|
407
|
+
if (firstColumn) {
|
|
408
|
+
if (Array.isArray(firstColumn)) {
|
|
409
|
+
return 'multiple';
|
|
340
410
|
}
|
|
341
411
|
|
|
342
|
-
|
|
343
|
-
|
|
412
|
+
if ('children' in firstColumn) {
|
|
413
|
+
return 'cascade';
|
|
414
|
+
}
|
|
415
|
+
}
|
|
416
|
+
|
|
417
|
+
return 'single';
|
|
418
|
+
}; // 级联数据格式化
|
|
419
|
+
|
|
420
|
+
|
|
421
|
+
var formatCascade = function formatCascade(columns, defaultValues) {
|
|
422
|
+
var formatted = [];
|
|
423
|
+
var cursor = {
|
|
424
|
+
text: '',
|
|
425
|
+
value: '',
|
|
426
|
+
children: columns
|
|
427
|
+
};
|
|
428
|
+
var columnIndex = 0;
|
|
429
|
+
|
|
430
|
+
var _loop = function _loop() {
|
|
431
|
+
var options = cursor.children;
|
|
432
|
+
var value = defaultValues[columnIndex];
|
|
433
|
+
var index = options.findIndex(function (columnItem) {
|
|
434
|
+
return columnItem.value === value;
|
|
435
|
+
});
|
|
436
|
+
if (index === -1) index = 0;
|
|
437
|
+
cursor = cursor.children[index];
|
|
438
|
+
columnIndex++;
|
|
439
|
+
formatted.push(options);
|
|
440
|
+
};
|
|
441
|
+
|
|
442
|
+
while (cursor && cursor.children) {
|
|
443
|
+
_loop();
|
|
444
|
+
}
|
|
445
|
+
|
|
446
|
+
return formatted;
|
|
344
447
|
};
|
|
345
448
|
|
|
346
449
|
var init = function init() {
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
});
|
|
450
|
+
var data = [];
|
|
451
|
+
var normalData = normalListData();
|
|
452
|
+
setColumnsList(normalData);
|
|
453
|
+
normalData.map(function (item) {
|
|
454
|
+
data.push(item[0].value);
|
|
455
|
+
return item;
|
|
456
|
+
});
|
|
457
|
+
|
|
458
|
+
if (!defaultValueData && chooseValueData.length === 0) {
|
|
357
459
|
setchooseValueData([].concat(data));
|
|
358
460
|
}
|
|
359
|
-
|
|
360
|
-
setIsReady(true);
|
|
361
461
|
};
|
|
362
462
|
|
|
363
463
|
return React__default.createElement(Popup, {
|
|
364
464
|
visible: isVisible,
|
|
365
465
|
position: "bottom",
|
|
366
466
|
onClose: function onClose() {
|
|
367
|
-
|
|
467
|
+
closeActionSheet();
|
|
368
468
|
}
|
|
369
469
|
}, React__default.createElement("div", _objectSpread({
|
|
370
470
|
className: "".concat(b(), " ").concat(className || ''),
|
|
@@ -386,17 +486,16 @@ var InternalPicker = function InternalPicker(props, ref) {
|
|
|
386
486
|
}, locale.confirm)), React__default.createElement("div", {
|
|
387
487
|
className: b('panel'),
|
|
388
488
|
ref: pickerRef
|
|
389
|
-
},
|
|
489
|
+
}, columnsList === null || columnsList === void 0 ? void 0 : columnsList.map(function (item, index) {
|
|
390
490
|
return React__default.createElement(PickerSlot, {
|
|
391
491
|
defaultValue: chooseValueData === null || chooseValueData === void 0 ? void 0 : chooseValueData[index],
|
|
392
|
-
isUpdate: isUpdate,
|
|
393
492
|
listData: item,
|
|
493
|
+
threeDimensional: threeDimensional,
|
|
394
494
|
chooseItem: function chooseItem(value, index) {
|
|
395
495
|
return _chooseItem(value, index);
|
|
396
496
|
},
|
|
397
497
|
key: index,
|
|
398
|
-
keyIndex: index
|
|
399
|
-
ref: refList[index]
|
|
498
|
+
keyIndex: index
|
|
400
499
|
});
|
|
401
500
|
}))));
|
|
402
501
|
};
|