@arco-design/mobile-react 2.26.0 → 2.27.1
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 +29 -0
- package/README.en-US.md +2 -2
- package/README.md +2 -2
- package/cjs/form/form-item.js +4 -2
- package/cjs/icon/IconHeart/index.js +1 -1
- package/cjs/icon/IconKeyboard/index.d.ts +7 -0
- package/cjs/icon/IconKeyboard/index.js +48 -0
- package/cjs/icon/IconKeyboardDelete/index.d.ts +7 -0
- package/cjs/icon/IconKeyboardDelete/index.js +44 -0
- package/cjs/icon/IconMinus/index.js +1 -1
- package/cjs/icon/IconMore/index.js +1 -1
- package/cjs/icon/IconNotice/index.js +1 -1
- package/cjs/icon/IconNoticeOff/index.js +1 -1
- package/cjs/icon/IconPlay/index.js +1 -1
- package/cjs/icon/IconSetting/index.js +2 -2
- package/cjs/icon/IconSound/index.js +1 -1
- package/cjs/icon/IconStar/index.js +1 -1
- package/cjs/icon/IconStarFill/index.js +1 -1
- package/cjs/icon/IconTriDown/index.js +1 -1
- package/cjs/icon/IconTriUp/index.js +1 -1
- package/cjs/icon/IconUpload/index.js +1 -1
- package/cjs/icon/IconWarnCircle/index.js +1 -1
- package/cjs/icon/IconWarnCircleFill/index.js +1 -1
- package/cjs/icon/index.d.ts +2 -0
- package/cjs/icon/index.js +12 -2
- package/cjs/image-picker/style/css/index.d.ts +1 -0
- package/cjs/image-picker/style/css/index.js +2 -0
- package/cjs/image-picker/style/index.d.ts +1 -0
- package/cjs/image-picker/style/index.js +2 -0
- package/cjs/index-bar/context.d.ts +3 -0
- package/cjs/index-bar/context.js +15 -0
- package/cjs/index-bar/demo/style/css/mobile.css +23 -0
- package/cjs/index-bar/demo/style/mobile.less +26 -0
- package/cjs/index-bar/group.d.ts +3 -0
- package/cjs/index-bar/group.js +101 -0
- package/cjs/index-bar/index.d.ts +15 -0
- package/cjs/index-bar/index.js +274 -0
- package/cjs/index-bar/side-bar.d.ts +3 -0
- package/cjs/index-bar/side-bar.js +102 -0
- package/cjs/index-bar/style/css/index.css +164 -0
- package/cjs/index-bar/style/css/index.d.ts +3 -0
- package/cjs/index-bar/style/css/index.js +7 -0
- package/cjs/index-bar/style/index.d.ts +3 -0
- package/cjs/index-bar/style/index.js +7 -0
- package/cjs/index-bar/style/index.less +122 -0
- package/cjs/index-bar/type.d.ts +195 -0
- package/cjs/index-bar/type.js +3 -0
- package/cjs/index-bar/utils.d.ts +6 -0
- package/cjs/index-bar/utils.js +68 -0
- package/cjs/index.d.ts +2 -0
- package/cjs/index.js +9 -1
- package/cjs/keyboard/demo/style/css/mobile.css +4 -0
- package/cjs/keyboard/demo/style/mobile.less +8 -0
- package/cjs/keyboard/index.d.ts +13 -0
- package/cjs/keyboard/index.js +270 -0
- package/cjs/keyboard/style/css/index.css +93 -0
- package/cjs/keyboard/style/css/index.d.ts +3 -0
- package/cjs/keyboard/style/css/index.js +7 -0
- package/cjs/keyboard/style/index.d.ts +3 -0
- package/cjs/keyboard/style/index.js +7 -0
- package/cjs/keyboard/style/index.less +80 -0
- package/cjs/keyboard/type.d.ts +102 -0
- package/cjs/keyboard/type.js +3 -0
- package/cjs/picker/index.js +3 -39
- package/cjs/picker/type.d.ts +1 -1
- package/cjs/picker-view/components/cascader.d.ts +2 -3
- package/cjs/picker-view/components/cascader.js +8 -6
- package/cjs/picker-view/components/multi-picker.d.ts +2 -3
- package/cjs/picker-view/components/multi-picker.js +31 -35
- package/cjs/picker-view/components/picker-cell.d.ts +1 -1
- package/cjs/picker-view/components/picker-cell.js +5 -7
- package/cjs/picker-view/index.d.ts +1 -1
- package/cjs/picker-view/index.js +9 -20
- package/cjs/picker-view/type.d.ts +2 -2
- package/cjs/slider/hooks/useSliderEvents.js +20 -20
- package/cjs/sticky/index.js +2 -2
- package/cjs/style.d.ts +2 -0
- package/cjs/style.js +4 -0
- package/dist/index.js +1172 -444
- package/dist/index.min.js +5 -5
- package/dist/style.css +215 -1
- package/dist/style.min.css +1 -1
- package/esm/form/form-item.js +4 -2
- package/esm/icon/IconHeart/index.js +1 -1
- package/esm/icon/IconKeyboard/index.d.ts +7 -0
- package/esm/icon/IconKeyboard/index.js +37 -0
- package/esm/icon/IconKeyboardDelete/index.d.ts +7 -0
- package/esm/icon/IconKeyboardDelete/index.js +33 -0
- package/esm/icon/IconMinus/index.js +1 -1
- package/esm/icon/IconMore/index.js +1 -1
- package/esm/icon/IconNotice/index.js +1 -1
- package/esm/icon/IconNoticeOff/index.js +1 -1
- package/esm/icon/IconPlay/index.js +1 -1
- package/esm/icon/IconSetting/index.js +2 -2
- package/esm/icon/IconSound/index.js +1 -1
- package/esm/icon/IconStar/index.js +1 -1
- package/esm/icon/IconStarFill/index.js +1 -1
- package/esm/icon/IconTriDown/index.js +1 -1
- package/esm/icon/IconTriUp/index.js +1 -1
- package/esm/icon/IconUpload/index.js +1 -1
- package/esm/icon/IconWarnCircle/index.js +1 -1
- package/esm/icon/IconWarnCircleFill/index.js +1 -1
- package/esm/icon/index.d.ts +2 -0
- package/esm/icon/index.js +2 -0
- package/esm/image-picker/style/css/index.d.ts +1 -0
- package/esm/image-picker/style/css/index.js +1 -0
- package/esm/image-picker/style/index.d.ts +1 -0
- package/esm/image-picker/style/index.js +1 -0
- package/esm/index-bar/context.d.ts +3 -0
- package/esm/index-bar/context.js +8 -0
- package/esm/index-bar/demo/style/css/mobile.css +23 -0
- package/esm/index-bar/demo/style/mobile.less +26 -0
- package/esm/index-bar/group.d.ts +3 -0
- package/esm/index-bar/group.js +83 -0
- package/esm/index-bar/index.d.ts +15 -0
- package/esm/index-bar/index.js +253 -0
- package/esm/index-bar/side-bar.d.ts +3 -0
- package/esm/index-bar/side-bar.js +90 -0
- package/esm/index-bar/style/css/index.css +164 -0
- package/esm/index-bar/style/css/index.d.ts +3 -0
- package/esm/index-bar/style/css/index.js +3 -0
- package/esm/index-bar/style/index.d.ts +3 -0
- package/esm/index-bar/style/index.js +3 -0
- package/esm/index-bar/style/index.less +122 -0
- package/esm/index-bar/type.d.ts +195 -0
- package/esm/index-bar/type.js +1 -0
- package/esm/index-bar/utils.d.ts +6 -0
- package/esm/index-bar/utils.js +53 -0
- package/esm/index.d.ts +2 -0
- package/esm/index.js +2 -0
- package/esm/keyboard/demo/style/css/mobile.css +4 -0
- package/esm/keyboard/demo/style/mobile.less +8 -0
- package/esm/keyboard/index.d.ts +13 -0
- package/esm/keyboard/index.js +243 -0
- package/esm/keyboard/style/css/index.css +93 -0
- package/esm/keyboard/style/css/index.d.ts +3 -0
- package/esm/keyboard/style/css/index.js +3 -0
- package/esm/keyboard/style/index.d.ts +3 -0
- package/esm/keyboard/style/index.js +3 -0
- package/esm/keyboard/style/index.less +80 -0
- package/esm/keyboard/type.d.ts +102 -0
- package/esm/keyboard/type.js +1 -0
- package/esm/picker/index.js +3 -40
- package/esm/picker/type.d.ts +1 -1
- package/esm/picker-view/components/cascader.d.ts +2 -3
- package/esm/picker-view/components/cascader.js +8 -6
- package/esm/picker-view/components/multi-picker.d.ts +2 -3
- package/esm/picker-view/components/multi-picker.js +31 -34
- package/esm/picker-view/components/picker-cell.d.ts +1 -1
- package/esm/picker-view/components/picker-cell.js +5 -7
- package/esm/picker-view/index.d.ts +1 -1
- package/esm/picker-view/index.js +10 -21
- package/esm/picker-view/type.d.ts +2 -2
- package/esm/slider/hooks/useSliderEvents.js +20 -20
- package/esm/sticky/index.js +2 -2
- package/esm/style.d.ts +2 -0
- package/esm/style.js +2 -0
- package/package.json +3 -3
- package/tokens/app/arcodesign/default/css-variables.less +43 -0
- package/tokens/app/arcodesign/default/index.d.ts +43 -0
- package/tokens/app/arcodesign/default/index.js +43 -0
- package/tokens/app/arcodesign/default/index.json +516 -0
- package/tokens/app/arcodesign/default/index.less +43 -0
- package/umd/form/form-item.js +4 -2
- package/umd/icon/IconHeart/index.js +1 -1
- package/umd/icon/IconKeyboard/index.d.ts +7 -0
- package/umd/icon/IconKeyboard/index.js +56 -0
- package/umd/icon/IconKeyboardDelete/index.d.ts +7 -0
- package/umd/icon/IconKeyboardDelete/index.js +52 -0
- package/umd/icon/IconMinus/index.js +1 -1
- package/umd/icon/IconMore/index.js +1 -1
- package/umd/icon/IconNotice/index.js +1 -1
- package/umd/icon/IconNoticeOff/index.js +1 -1
- package/umd/icon/IconPlay/index.js +1 -1
- package/umd/icon/IconSetting/index.js +2 -2
- package/umd/icon/IconSound/index.js +1 -1
- package/umd/icon/IconStar/index.js +1 -1
- package/umd/icon/IconStarFill/index.js +1 -1
- package/umd/icon/IconTriDown/index.js +1 -1
- package/umd/icon/IconTriUp/index.js +1 -1
- package/umd/icon/IconUpload/index.js +1 -1
- package/umd/icon/IconWarnCircle/index.js +1 -1
- package/umd/icon/IconWarnCircleFill/index.js +1 -1
- package/umd/icon/index.d.ts +2 -0
- package/umd/icon/index.js +12 -6
- package/umd/image-picker/style/css/index.d.ts +1 -0
- package/umd/image-picker/style/css/index.js +4 -4
- package/umd/image-picker/style/index.d.ts +1 -0
- package/umd/image-picker/style/index.js +4 -4
- package/umd/index-bar/context.d.ts +3 -0
- package/umd/index-bar/context.js +26 -0
- package/umd/index-bar/demo/style/css/mobile.css +23 -0
- package/umd/index-bar/demo/style/mobile.less +26 -0
- package/umd/index-bar/group.d.ts +3 -0
- package/umd/index-bar/group.js +107 -0
- package/umd/index-bar/index.d.ts +15 -0
- package/umd/index-bar/index.js +274 -0
- package/umd/index-bar/side-bar.d.ts +3 -0
- package/umd/index-bar/side-bar.js +113 -0
- package/umd/index-bar/style/css/index.css +164 -0
- package/umd/index-bar/style/css/index.d.ts +3 -0
- package/umd/index-bar/style/css/index.js +15 -0
- package/umd/index-bar/style/index.d.ts +3 -0
- package/umd/index-bar/style/index.js +15 -0
- package/umd/index-bar/style/index.less +122 -0
- package/umd/index-bar/type.d.ts +195 -0
- package/umd/index-bar/type.js +17 -0
- package/umd/index-bar/utils.d.ts +6 -0
- package/umd/index-bar/utils.js +78 -0
- package/umd/index.d.ts +2 -0
- package/umd/index.js +9 -5
- package/umd/keyboard/demo/style/css/mobile.css +4 -0
- package/umd/keyboard/demo/style/mobile.less +8 -0
- package/umd/keyboard/index.d.ts +13 -0
- package/umd/keyboard/index.js +271 -0
- package/umd/keyboard/style/css/index.css +93 -0
- package/umd/keyboard/style/css/index.d.ts +3 -0
- package/umd/keyboard/style/css/index.js +15 -0
- package/umd/keyboard/style/index.d.ts +3 -0
- package/umd/keyboard/style/index.js +15 -0
- package/umd/keyboard/style/index.less +80 -0
- package/umd/keyboard/type.d.ts +102 -0
- package/umd/keyboard/type.js +17 -0
- package/umd/picker/index.js +3 -39
- package/umd/picker/type.d.ts +1 -1
- package/umd/picker-view/components/cascader.d.ts +2 -3
- package/umd/picker-view/components/cascader.js +8 -6
- package/umd/picker-view/components/multi-picker.d.ts +2 -3
- package/umd/picker-view/components/multi-picker.js +31 -35
- package/umd/picker-view/components/picker-cell.d.ts +1 -1
- package/umd/picker-view/components/picker-cell.js +5 -7
- package/umd/picker-view/index.d.ts +1 -1
- package/umd/picker-view/index.js +9 -20
- package/umd/picker-view/type.d.ts +2 -2
- package/umd/slider/hooks/useSliderEvents.js +20 -20
- package/umd/sticky/index.js +2 -2
- package/umd/style.d.ts +2 -0
- package/umd/style.js +4 -4
@@ -0,0 +1,270 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
|
+
|
5
|
+
exports.__esModule = true;
|
6
|
+
var _exportNames = {};
|
7
|
+
exports.default = void 0;
|
8
|
+
|
9
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
10
|
+
|
11
|
+
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
|
12
|
+
|
13
|
+
var _mobileUtils = require("@arco-design/mobile-utils");
|
14
|
+
|
15
|
+
var _react = _interopRequireWildcard(require("react"));
|
16
|
+
|
17
|
+
var _contextProvider = require("../context-provider");
|
18
|
+
|
19
|
+
var _icon = require("../icon");
|
20
|
+
|
21
|
+
var _popup = _interopRequireDefault(require("../popup"));
|
22
|
+
|
23
|
+
var _type = require("./type");
|
24
|
+
|
25
|
+
Object.keys(_type).forEach(function (key) {
|
26
|
+
if (key === "default" || key === "__esModule") return;
|
27
|
+
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
28
|
+
if (key in exports && exports[key] === _type[key]) return;
|
29
|
+
exports[key] = _type[key];
|
30
|
+
});
|
31
|
+
var _excluded = ["normalKeyClass", "normalKeyStyle", "className", "style", "type", "randomOrder", "title", "rightColumns", "confirmClosable", "confirmButton", "deleteButton", "keyboardButton", "close", "onConfirm", "onDelete", "onChange"];
|
32
|
+
|
33
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
34
|
+
|
35
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
36
|
+
|
37
|
+
// 键盘乱序
|
38
|
+
// @en let keyboard random
|
39
|
+
var makeArrayRandom = function makeArrayRandom(targetArray) {
|
40
|
+
var randomFn = function randomFn() {
|
41
|
+
return Math.random() - 0.5;
|
42
|
+
};
|
43
|
+
|
44
|
+
return targetArray.sort(randomFn);
|
45
|
+
};
|
46
|
+
|
47
|
+
var splitArray = function splitArray(target) {
|
48
|
+
return target.reduce(function (acc, cur) {
|
49
|
+
if (!acc[acc.length - 1] || acc[acc.length - 1].length >= 3) {
|
50
|
+
acc.push([]);
|
51
|
+
}
|
52
|
+
|
53
|
+
acc[acc.length - 1].push(cur);
|
54
|
+
return acc;
|
55
|
+
}, []);
|
56
|
+
}; // 纯数字类字符
|
57
|
+
// @en Pure numeric characters
|
58
|
+
|
59
|
+
|
60
|
+
var contentArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
|
61
|
+
/**
|
62
|
+
* 数字键盘组件
|
63
|
+
* @en Keyboard component
|
64
|
+
* @type 数据录入
|
65
|
+
* @type_en Data Entry
|
66
|
+
* @name 数字键盘
|
67
|
+
* @name_en Keyboard
|
68
|
+
*/
|
69
|
+
|
70
|
+
var Keyboard = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
71
|
+
var normalKeyClass = props.normalKeyClass,
|
72
|
+
normalKeyStyle = props.normalKeyStyle,
|
73
|
+
_props$className = props.className,
|
74
|
+
className = _props$className === void 0 ? '' : _props$className,
|
75
|
+
style = props.style,
|
76
|
+
_props$type = props.type,
|
77
|
+
type = _props$type === void 0 ? 'number' : _props$type,
|
78
|
+
_props$randomOrder = props.randomOrder,
|
79
|
+
randomOrder = _props$randomOrder === void 0 ? false : _props$randomOrder,
|
80
|
+
title = props.title,
|
81
|
+
rightColumns = props.rightColumns,
|
82
|
+
confirmClosable = props.confirmClosable,
|
83
|
+
confirmButton = props.confirmButton,
|
84
|
+
deleteButton = props.deleteButton,
|
85
|
+
keyboardButton = props.keyboardButton,
|
86
|
+
close = props.close,
|
87
|
+
onConfirm = props.onConfirm,
|
88
|
+
onDelete = props.onDelete,
|
89
|
+
onChange = props.onChange,
|
90
|
+
resetProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
|
91
|
+
var popupRef = (0, _react.useRef)(null);
|
92
|
+
var keyboardRef = (0, _react.useRef)(null);
|
93
|
+
|
94
|
+
var _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
|
95
|
+
prefixCls = _useContext.prefixCls,
|
96
|
+
_useContext$locale = _useContext.locale,
|
97
|
+
locale = _useContext$locale === void 0 ? _mobileUtils.defaultLocale : _useContext$locale;
|
98
|
+
|
99
|
+
var prefix = prefixCls + "-keyboard"; // 3x4键盘的按键内容
|
100
|
+
// @en 3x4 Keyboard button content
|
101
|
+
|
102
|
+
var displayData = (0, _react.useMemo)(function () {
|
103
|
+
var numberArr = randomOrder ? makeArrayRandom(contentArray) : contentArray;
|
104
|
+
var lastNum = numberArr.slice(-1)[0];
|
105
|
+
var finalData = splitArray(numberArr.slice(0, -1));
|
106
|
+
|
107
|
+
switch (type) {
|
108
|
+
case 'confirm':
|
109
|
+
finalData.push([lastNum, '.']);
|
110
|
+
break;
|
111
|
+
|
112
|
+
case 'tool':
|
113
|
+
finalData.push(['.', lastNum, {
|
114
|
+
type: 'delete'
|
115
|
+
}]);
|
116
|
+
break;
|
117
|
+
|
118
|
+
case 'number':
|
119
|
+
default:
|
120
|
+
finalData.push([{
|
121
|
+
type: 'keyboard'
|
122
|
+
}, lastNum, {
|
123
|
+
type: 'delete'
|
124
|
+
}]);
|
125
|
+
break;
|
126
|
+
}
|
127
|
+
|
128
|
+
return finalData;
|
129
|
+
}, [type]); // 右边一列
|
130
|
+
// @en Right column
|
131
|
+
|
132
|
+
var rightColumn = (0, _react.useMemo)(function () {
|
133
|
+
switch (type) {
|
134
|
+
case 'number':
|
135
|
+
return [];
|
136
|
+
|
137
|
+
case 'confirm':
|
138
|
+
{
|
139
|
+
return [{
|
140
|
+
type: 'delete'
|
141
|
+
}];
|
142
|
+
}
|
143
|
+
|
144
|
+
case 'tool':
|
145
|
+
return ['+', '-', '×', '÷'];
|
146
|
+
|
147
|
+
default:
|
148
|
+
return [];
|
149
|
+
}
|
150
|
+
}, [type]); // 确认按钮需要在type为confirm时展示
|
151
|
+
// @en Display then confirm button when type is confirm
|
152
|
+
|
153
|
+
var getConfirmButton = (0, _react.useCallback)(function () {
|
154
|
+
if (type !== 'confirm') {
|
155
|
+
return null;
|
156
|
+
}
|
157
|
+
|
158
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
159
|
+
onClick: function onClick() {
|
160
|
+
confirmClosable && close();
|
161
|
+
onConfirm == null ? void 0 : onConfirm();
|
162
|
+
},
|
163
|
+
className: (0, _mobileUtils.cls)(prefix + "-key", prefix + "-key-confirm")
|
164
|
+
}, confirmButton || locale.Keyboard.confirm);
|
165
|
+
}, [type]); // 点击空白处关闭键盘
|
166
|
+
// @en Close keyboard when clicked the blank space
|
167
|
+
|
168
|
+
(0, _react.useEffect)(function () {
|
169
|
+
var handlerDocumentClick = function handlerDocumentClick(e) {
|
170
|
+
if (!keyboardRef.current) {
|
171
|
+
return;
|
172
|
+
}
|
173
|
+
|
174
|
+
if (!keyboardRef.current.contains(e.target) && e.target !== keyboardRef.current) {
|
175
|
+
close();
|
176
|
+
}
|
177
|
+
};
|
178
|
+
|
179
|
+
document.addEventListener('click', handlerDocumentClick);
|
180
|
+
return function () {
|
181
|
+
document.removeEventListener('click', handlerDocumentClick);
|
182
|
+
};
|
183
|
+
}, []);
|
184
|
+
(0, _react.useImperativeHandle)(ref, function () {
|
185
|
+
return (0, _extends2.default)({
|
186
|
+
keyboard: keyboardRef.current
|
187
|
+
}, popupRef.current);
|
188
|
+
});
|
189
|
+
|
190
|
+
var handleButtonClick = function handleButtonClick(ele) {
|
191
|
+
switch (ele.type) {
|
192
|
+
case 'delete':
|
193
|
+
onDelete == null ? void 0 : onDelete();
|
194
|
+
break;
|
195
|
+
|
196
|
+
case 'keyboard':
|
197
|
+
close();
|
198
|
+
break;
|
199
|
+
|
200
|
+
default:
|
201
|
+
onChange == null ? void 0 : onChange(ele.value);
|
202
|
+
}
|
203
|
+
};
|
204
|
+
|
205
|
+
var renderButtonContent = function renderButtonContent(ele) {
|
206
|
+
switch (ele.type) {
|
207
|
+
case 'delete':
|
208
|
+
return deleteButton || /*#__PURE__*/_react.default.createElement(_icon.IconKeyboardDelete, null);
|
209
|
+
|
210
|
+
case 'keyboard':
|
211
|
+
return keyboardButton || /*#__PURE__*/_react.default.createElement(_icon.IconKeyboard, null);
|
212
|
+
|
213
|
+
default:
|
214
|
+
return ele.content;
|
215
|
+
}
|
216
|
+
};
|
217
|
+
|
218
|
+
var renderButton = function renderButton(data, key, extraClass) {
|
219
|
+
var ele = typeof data === 'string' || typeof data === 'number' ? {
|
220
|
+
type: 'content',
|
221
|
+
content: data,
|
222
|
+
value: data
|
223
|
+
} : data;
|
224
|
+
return /*#__PURE__*/_react.default.createElement("button", {
|
225
|
+
onClick: function onClick() {
|
226
|
+
return handleButtonClick(ele);
|
227
|
+
},
|
228
|
+
className: (0, _mobileUtils.cls)(prefix + "-key", normalKeyClass, extraClass),
|
229
|
+
key: key,
|
230
|
+
style: normalKeyStyle
|
231
|
+
}, renderButtonContent(ele));
|
232
|
+
};
|
233
|
+
|
234
|
+
var renderKeyboardRightColumns = function renderKeyboardRightColumns() {
|
235
|
+
if (rightColumns) {
|
236
|
+
return rightColumns;
|
237
|
+
}
|
238
|
+
|
239
|
+
return rightColumn.length > 0 ? /*#__PURE__*/_react.default.createElement("div", {
|
240
|
+
className: prefix + "-col"
|
241
|
+
}, rightColumn.map(function (item, index) {
|
242
|
+
return renderButton(item, String(index));
|
243
|
+
}), getConfirmButton()) : null;
|
244
|
+
};
|
245
|
+
|
246
|
+
return /*#__PURE__*/_react.default.createElement(_popup.default, (0, _extends2.default)({
|
247
|
+
ref: popupRef,
|
248
|
+
maskClass: prefix + "-popup",
|
249
|
+
close: close
|
250
|
+
}, resetProps), /*#__PURE__*/_react.default.createElement("div", {
|
251
|
+
className: (0, _mobileUtils.cls)(prefix, "" + className),
|
252
|
+
style: style,
|
253
|
+
ref: keyboardRef
|
254
|
+
}, title, /*#__PURE__*/_react.default.createElement("div", {
|
255
|
+
className: prefix + "-wrapper"
|
256
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
257
|
+
className: prefix + "-key-wrapper"
|
258
|
+
}, displayData.map(function (item, index) {
|
259
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
260
|
+
className: prefix + "-row",
|
261
|
+
key: index
|
262
|
+
}, item.map(function (e, idx) {
|
263
|
+
var _renderButton;
|
264
|
+
|
265
|
+
return renderButton(e, String(idx), (_renderButton = {}, _renderButton[prefix + "-key-special"] = type === 'confirm' && index === displayData.length - 1 && idx === 0, _renderButton));
|
266
|
+
}));
|
267
|
+
})), renderKeyboardRightColumns())));
|
268
|
+
});
|
269
|
+
var _default = Keyboard;
|
270
|
+
exports.default = _default;
|
@@ -0,0 +1,93 @@
|
|
1
|
+
.arco-keyboard {
|
2
|
+
background: #f2f3f5 ;
|
3
|
+
padding: 0.16rem ;
|
4
|
+
-webkit-touch-callout: none;
|
5
|
+
/* iOS Safari */
|
6
|
+
-webkit-user-select: none;
|
7
|
+
/* Chrome/Safari/Opera */
|
8
|
+
/* Konqueror */
|
9
|
+
/* Firefox */
|
10
|
+
/* Internet Explorer/Edge */
|
11
|
+
user-select: none;
|
12
|
+
/* Non-prefixed version, currently*/
|
13
|
+
}
|
14
|
+
.arco-keyboard-wrapper {
|
15
|
+
display: -webkit-box;
|
16
|
+
display: -webkit-flex;
|
17
|
+
display: flex;
|
18
|
+
}
|
19
|
+
.arco-keyboard-key-wrapper {
|
20
|
+
-webkit-box-flex: 2;
|
21
|
+
-webkit-flex: 2 0 auto;
|
22
|
+
flex: 2 0 auto;
|
23
|
+
}
|
24
|
+
.arco-keyboard-row {
|
25
|
+
display: -webkit-box;
|
26
|
+
display: -webkit-flex;
|
27
|
+
display: flex;
|
28
|
+
}
|
29
|
+
.arco-keyboard-row:not(.arco-keyboard-row:nth-last-child(1)) {
|
30
|
+
margin-bottom: 0.16rem ;
|
31
|
+
}
|
32
|
+
.arco-keyboard-row .arco-keyboard-key:not(.arco-keyboard-row .arco-keyboard-key:nth-child(1)) {
|
33
|
+
margin-left: 0.16rem ;
|
34
|
+
}
|
35
|
+
.arco-keyboard-row .arco-keyboard-key-special {
|
36
|
+
-webkit-box-flex: 2.1;
|
37
|
+
-webkit-flex: 2.1 0 auto;
|
38
|
+
flex: 2.1 0 auto;
|
39
|
+
}
|
40
|
+
.arco-keyboard-col {
|
41
|
+
-webkit-box-flex: 1;
|
42
|
+
-webkit-flex: 1;
|
43
|
+
flex: 1;
|
44
|
+
display: -webkit-box;
|
45
|
+
display: -webkit-flex;
|
46
|
+
display: flex;
|
47
|
+
-webkit-box-orient: vertical;
|
48
|
+
-webkit-box-direction: normal;
|
49
|
+
-webkit-flex-direction: column;
|
50
|
+
flex-direction: column;
|
51
|
+
margin-left: 0.16rem ;
|
52
|
+
}
|
53
|
+
.arco-keyboard-col .arco-keyboard-key:not(.arco-keyboard-col .arco-keyboard-key:nth-child(1)) {
|
54
|
+
margin-top: 0.16rem ;
|
55
|
+
}
|
56
|
+
.arco-keyboard-col .arco-keyboard-key-confirm {
|
57
|
+
-webkit-box-flex: 2.5;
|
58
|
+
-webkit-flex: 2.5 0 auto;
|
59
|
+
flex: 2.5 0 auto;
|
60
|
+
background: #165dff ;
|
61
|
+
color: #ffffff ;
|
62
|
+
font-size: 0.36rem ;
|
63
|
+
}
|
64
|
+
.arco-keyboard-key {
|
65
|
+
display: -webkit-box;
|
66
|
+
display: -webkit-flex;
|
67
|
+
display: flex;
|
68
|
+
-webkit-box-align: center;
|
69
|
+
-webkit-align-items: center;
|
70
|
+
align-items: center;
|
71
|
+
-webkit-box-pack: center;
|
72
|
+
-webkit-justify-content: center;
|
73
|
+
justify-content: center;
|
74
|
+
-webkit-box-flex: 1;
|
75
|
+
-webkit-flex: 1;
|
76
|
+
flex: 1;
|
77
|
+
font-weight: 500 ;
|
78
|
+
font-size: 0.44rem ;
|
79
|
+
line-height: 0.6rem ;
|
80
|
+
background: #ffffff ;
|
81
|
+
height: 0.96rem ;
|
82
|
+
border-radius: 0.08rem ;
|
83
|
+
color: #1d2129 ;
|
84
|
+
}
|
85
|
+
.arco-keyboard-key:active {
|
86
|
+
background: #e5e6eb ;
|
87
|
+
}
|
88
|
+
.arco-keyboard-key .arco-icon {
|
89
|
+
font-size: 0.52rem ;
|
90
|
+
}
|
91
|
+
.arco-keyboard-popup {
|
92
|
+
display: none;
|
93
|
+
}
|
@@ -0,0 +1,80 @@
|
|
1
|
+
@import '../../../style/mixin.less';
|
2
|
+
|
3
|
+
.@{prefix}-keyboard {
|
4
|
+
.use-var(background, keyboard-background);
|
5
|
+
.use-var(padding, keyboard-content-padding);
|
6
|
+
.noselect();
|
7
|
+
|
8
|
+
&-wrapper {
|
9
|
+
display: flex;
|
10
|
+
}
|
11
|
+
|
12
|
+
&-key-wrapper {
|
13
|
+
flex: 2 0 auto;
|
14
|
+
}
|
15
|
+
|
16
|
+
&-row {
|
17
|
+
display: flex;
|
18
|
+
&:not(&:nth-last-child(1)) {
|
19
|
+
.use-var(margin-bottom, keyboard-unified-margin);
|
20
|
+
}
|
21
|
+
|
22
|
+
.@{prefix}-keyboard-key {
|
23
|
+
&:not(&:nth-child(1)) {
|
24
|
+
.use-var(margin-left, keyboard-unified-margin);
|
25
|
+
}
|
26
|
+
|
27
|
+
&-special {
|
28
|
+
flex: 2.1 0 auto;
|
29
|
+
}
|
30
|
+
}
|
31
|
+
}
|
32
|
+
|
33
|
+
&-col {
|
34
|
+
flex: 1;
|
35
|
+
display: flex;
|
36
|
+
flex-direction: column;
|
37
|
+
.use-var(margin-left, keyboard-unified-margin);
|
38
|
+
|
39
|
+
.@{prefix}-keyboard-key {
|
40
|
+
&:not(&:nth-child(1)) {
|
41
|
+
.use-var(margin-top, keyboard-unified-margin);
|
42
|
+
}
|
43
|
+
|
44
|
+
&-confirm {
|
45
|
+
flex: 2.5 0 auto;
|
46
|
+
.use-var(background, keyboard-confirm-key-background);
|
47
|
+
.use-var(color, keyboard-confirm-key-color);
|
48
|
+
.use-var(font-size, keyboard-confirm-key-font-size);
|
49
|
+
}
|
50
|
+
}
|
51
|
+
}
|
52
|
+
|
53
|
+
&-key {
|
54
|
+
display: flex;
|
55
|
+
align-items: center;
|
56
|
+
justify-content: center;
|
57
|
+
flex: 1;
|
58
|
+
|
59
|
+
.use-var(font-weight, keyboard-key-font-weight);
|
60
|
+
.use-var(font-size, keyboard-key-font-size);
|
61
|
+
.use-var(line-height, keyboard-key-line-height);
|
62
|
+
.use-var(background, keyboard-key-background);
|
63
|
+
.use-var(border-radius, keyboard-key-border-radius);
|
64
|
+
.use-var(height, keyboard-key-height);
|
65
|
+
.use-var(border-radius, keyboard-key-border-radius);
|
66
|
+
.use-var(color, keyboard-key-color);
|
67
|
+
|
68
|
+
&:active {
|
69
|
+
.use-var(background, keyboard-key-active-background);
|
70
|
+
}
|
71
|
+
|
72
|
+
.@{prefix}-icon {
|
73
|
+
.use-var(font-size, keyboard-key-icon-size);
|
74
|
+
}
|
75
|
+
}
|
76
|
+
|
77
|
+
&-popup {
|
78
|
+
display: none;
|
79
|
+
}
|
80
|
+
}
|
@@ -0,0 +1,102 @@
|
|
1
|
+
import { CSSProperties, ReactNode } from 'react';
|
2
|
+
import { PopupProps, PopupRef } from '../popup';
|
3
|
+
export declare type ColumnData = string | number | ColumnObjData;
|
4
|
+
export declare type ColumnObjData = {
|
5
|
+
type: 'keyboard' | 'delete';
|
6
|
+
} | {
|
7
|
+
type: 'content';
|
8
|
+
content: ReactNode;
|
9
|
+
value: string | number;
|
10
|
+
};
|
11
|
+
export interface KeyboardProps extends PopupProps {
|
12
|
+
/**
|
13
|
+
* 常规键位自定义类名
|
14
|
+
* @en Custom classname for normal keys
|
15
|
+
*/
|
16
|
+
normalKeyClass?: string;
|
17
|
+
/**
|
18
|
+
* 常规键位自定义样式
|
19
|
+
* @en Custom style for normal keys
|
20
|
+
*/
|
21
|
+
normalKeyStyle?: CSSProperties;
|
22
|
+
/**
|
23
|
+
* 自定义类名
|
24
|
+
* @en Custom classname
|
25
|
+
*/
|
26
|
+
className?: string;
|
27
|
+
/**
|
28
|
+
* 自定义样式
|
29
|
+
* @en Custom stylesheet
|
30
|
+
*/
|
31
|
+
style?: React.CSSProperties;
|
32
|
+
/**
|
33
|
+
* 键盘展示类型,不同类型有不同布局。number - 纯数字常规键盘,confirm - 带确认按钮的键盘,tool - 带运算符的键盘
|
34
|
+
* @en Keyboard display type, different types have different layouts. number - a regular keyboard with pure numbers, confirm - a keyboard with a confirm button, tool - a keyboard with operators
|
35
|
+
* @default "number"
|
36
|
+
*/
|
37
|
+
type?: 'number' | 'confirm' | 'tool';
|
38
|
+
/**
|
39
|
+
* 是否打乱键盘中的数字展示位置
|
40
|
+
* @en Whether to scramble number placements in the keyboard
|
41
|
+
* @default false
|
42
|
+
*/
|
43
|
+
randomOrder: boolean;
|
44
|
+
/**
|
45
|
+
* 键盘顶部展示标题内容,样式纯自定义
|
46
|
+
* @en The title content displayed on the top of the keyboard, the style is purely customized
|
47
|
+
*/
|
48
|
+
title?: ReactNode;
|
49
|
+
/**
|
50
|
+
* 自定义渲染数字右侧(第四列)的内容
|
51
|
+
* @en Custom rendering of the content to the right of the number (fourth column)
|
52
|
+
*/
|
53
|
+
rightColumns?: ReactNode;
|
54
|
+
/**
|
55
|
+
* 点击确认后是否自动关闭键盘
|
56
|
+
* @en Whether to automatically close the keyboard after clicking confirm button
|
57
|
+
* @default false
|
58
|
+
*/
|
59
|
+
confirmClosable?: boolean;
|
60
|
+
/**
|
61
|
+
* 自定义渲染确认按钮内部内容
|
62
|
+
* @en Customize the internal content of the confirm button
|
63
|
+
*/
|
64
|
+
confirmButton?: ReactNode;
|
65
|
+
/**
|
66
|
+
* 自定义渲染删除按钮内部内容
|
67
|
+
* @en Customize the internal content of the delete button
|
68
|
+
*/
|
69
|
+
deleteButton?: ReactNode;
|
70
|
+
/**
|
71
|
+
* 自定义渲染收起键盘按钮内部内容
|
72
|
+
* @en Customize the internal content of the keyboard button
|
73
|
+
*/
|
74
|
+
keyboardButton?: ReactNode;
|
75
|
+
/**
|
76
|
+
* 收起键盘回调
|
77
|
+
* @en Callback for closing the keyboard
|
78
|
+
*/
|
79
|
+
close: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => {};
|
80
|
+
/**
|
81
|
+
* 点击确认按钮回调
|
82
|
+
* @en Callback for clicking the confirm button
|
83
|
+
*/
|
84
|
+
onConfirm?: () => {};
|
85
|
+
/**
|
86
|
+
* 点击删除按钮回调
|
87
|
+
* @en Callback for clicking the delete button
|
88
|
+
*/
|
89
|
+
onDelete?: () => {};
|
90
|
+
/**
|
91
|
+
* 点击常规按钮回调
|
92
|
+
* @en Callback for clicking the normal button
|
93
|
+
*/
|
94
|
+
onChange?: (data: string | number) => {};
|
95
|
+
}
|
96
|
+
export interface KeyboardRef extends PopupRef {
|
97
|
+
/**
|
98
|
+
* 最外层 DOM 元素
|
99
|
+
* @en The outer DOM element of the component
|
100
|
+
*/
|
101
|
+
keyboard: HTMLDivElement | null;
|
102
|
+
}
|
package/cjs/picker/index.js
CHANGED
@@ -44,42 +44,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
44
44
|
|
45
45
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
46
46
|
|
47
|
-
var getInitialValue = function getInitialValue(value, data, cascade) {
|
48
|
-
if (value && value.length) {
|
49
|
-
return value;
|
50
|
-
}
|
51
|
-
|
52
|
-
var computedValue = [];
|
53
|
-
|
54
|
-
if (!cascade) {
|
55
|
-
if (!(data[0] instanceof Array)) {
|
56
|
-
var _data$;
|
57
|
-
|
58
|
-
return (_data$ = data[0]) != null && _data$.value ? [data[0].value] : [];
|
59
|
-
}
|
60
|
-
|
61
|
-
data.map(function (column) {
|
62
|
-
computedValue.push(typeof column[0] === 'object' ? column[0].value : column[0]);
|
63
|
-
});
|
64
|
-
} else {
|
65
|
-
var cascadePickerData = data;
|
66
|
-
|
67
|
-
if (!cascadePickerData || !cascadePickerData.length) {
|
68
|
-
return computedValue;
|
69
|
-
}
|
70
|
-
|
71
|
-
computedValue.push(cascadePickerData[0].value);
|
72
|
-
var traverse = cascadePickerData[0].children;
|
73
|
-
|
74
|
-
while (traverse) {
|
75
|
-
computedValue.push(traverse[0].value);
|
76
|
-
traverse = traverse[0].children;
|
77
|
-
}
|
78
|
-
}
|
79
|
-
|
80
|
-
return computedValue;
|
81
|
-
};
|
82
|
-
|
83
47
|
var Picker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
84
48
|
var className = props.className,
|
85
49
|
itemStyle = props.itemStyle,
|
@@ -117,7 +81,7 @@ var Picker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
117
81
|
gestureOutOfControl = _props$gestureOutOfCo === void 0 ? true : _props$gestureOutOfCo,
|
118
82
|
otherProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
|
119
83
|
|
120
|
-
var _useState = (0, _react.useState)(
|
84
|
+
var _useState = (0, _react.useState)(value),
|
121
85
|
scrollValue = _useState[0],
|
122
86
|
setScrollValue = _useState[1];
|
123
87
|
|
@@ -171,7 +135,7 @@ var Picker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
171
135
|
(0, _mobileUtils.nextTick)(function () {
|
172
136
|
var _pickerViewRef$curren7;
|
173
137
|
|
174
|
-
var val = ((_pickerViewRef$curren7 = pickerViewRef.current) == null ? void 0 : _pickerViewRef$curren7.getAllColumnValues()) || scrollValue;
|
138
|
+
var val = ((_pickerViewRef$curren7 = pickerViewRef.current) == null ? void 0 : _pickerViewRef$curren7.getAllColumnValues()) || scrollValue || [];
|
175
139
|
|
176
140
|
if (onOk) {
|
177
141
|
onOk(val);
|
@@ -234,7 +198,7 @@ var Picker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
234
198
|
cols: cols,
|
235
199
|
rows: rows,
|
236
200
|
disabled: disabled,
|
237
|
-
value:
|
201
|
+
value: value,
|
238
202
|
onPickerChange: onPickerChange,
|
239
203
|
itemStyle: itemStyle,
|
240
204
|
clickable: clickable,
|
package/cjs/picker/type.d.ts
CHANGED
@@ -51,7 +51,7 @@ export interface PickerProps extends Omit<PopupProps, 'visible' | 'close' | 'chi
|
|
51
51
|
* 每列数据选择变化后的回调函数
|
52
52
|
* @en The callback after each column data selection changes
|
53
53
|
*/
|
54
|
-
onPickerChange?: (value: ValueType[], index: number) => void;
|
54
|
+
onPickerChange?: (value: ValueType[], index: number, data: PickerData[]) => void;
|
55
55
|
/**
|
56
56
|
* 每列样式
|
57
57
|
* @en Stylesheet per column
|
@@ -9,11 +9,10 @@ export interface CascaderProps {
|
|
9
9
|
disabled: boolean;
|
10
10
|
itemHeight: number;
|
11
11
|
wrapperHeight: number;
|
12
|
-
selectedValue
|
12
|
+
selectedValue?: ValueType[];
|
13
13
|
rows?: number;
|
14
14
|
hideEmptyCols?: boolean;
|
15
|
-
onValueChange?: (value: ValueType[], index: number) => void;
|
16
|
-
onPickerChange?: (value: ValueType[], index: number) => void;
|
15
|
+
onValueChange?: (value: ValueType[], index: number, data: PickerData[]) => void;
|
17
16
|
touchToStop?: boolean | number;
|
18
17
|
}
|
19
18
|
export interface CascaderRef {
|