@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.
Files changed (238) hide show
  1. package/CHANGELOG.md +29 -0
  2. package/README.en-US.md +2 -2
  3. package/README.md +2 -2
  4. package/cjs/form/form-item.js +4 -2
  5. package/cjs/icon/IconHeart/index.js +1 -1
  6. package/cjs/icon/IconKeyboard/index.d.ts +7 -0
  7. package/cjs/icon/IconKeyboard/index.js +48 -0
  8. package/cjs/icon/IconKeyboardDelete/index.d.ts +7 -0
  9. package/cjs/icon/IconKeyboardDelete/index.js +44 -0
  10. package/cjs/icon/IconMinus/index.js +1 -1
  11. package/cjs/icon/IconMore/index.js +1 -1
  12. package/cjs/icon/IconNotice/index.js +1 -1
  13. package/cjs/icon/IconNoticeOff/index.js +1 -1
  14. package/cjs/icon/IconPlay/index.js +1 -1
  15. package/cjs/icon/IconSetting/index.js +2 -2
  16. package/cjs/icon/IconSound/index.js +1 -1
  17. package/cjs/icon/IconStar/index.js +1 -1
  18. package/cjs/icon/IconStarFill/index.js +1 -1
  19. package/cjs/icon/IconTriDown/index.js +1 -1
  20. package/cjs/icon/IconTriUp/index.js +1 -1
  21. package/cjs/icon/IconUpload/index.js +1 -1
  22. package/cjs/icon/IconWarnCircle/index.js +1 -1
  23. package/cjs/icon/IconWarnCircleFill/index.js +1 -1
  24. package/cjs/icon/index.d.ts +2 -0
  25. package/cjs/icon/index.js +12 -2
  26. package/cjs/image-picker/style/css/index.d.ts +1 -0
  27. package/cjs/image-picker/style/css/index.js +2 -0
  28. package/cjs/image-picker/style/index.d.ts +1 -0
  29. package/cjs/image-picker/style/index.js +2 -0
  30. package/cjs/index-bar/context.d.ts +3 -0
  31. package/cjs/index-bar/context.js +15 -0
  32. package/cjs/index-bar/demo/style/css/mobile.css +23 -0
  33. package/cjs/index-bar/demo/style/mobile.less +26 -0
  34. package/cjs/index-bar/group.d.ts +3 -0
  35. package/cjs/index-bar/group.js +101 -0
  36. package/cjs/index-bar/index.d.ts +15 -0
  37. package/cjs/index-bar/index.js +274 -0
  38. package/cjs/index-bar/side-bar.d.ts +3 -0
  39. package/cjs/index-bar/side-bar.js +102 -0
  40. package/cjs/index-bar/style/css/index.css +164 -0
  41. package/cjs/index-bar/style/css/index.d.ts +3 -0
  42. package/cjs/index-bar/style/css/index.js +7 -0
  43. package/cjs/index-bar/style/index.d.ts +3 -0
  44. package/cjs/index-bar/style/index.js +7 -0
  45. package/cjs/index-bar/style/index.less +122 -0
  46. package/cjs/index-bar/type.d.ts +195 -0
  47. package/cjs/index-bar/type.js +3 -0
  48. package/cjs/index-bar/utils.d.ts +6 -0
  49. package/cjs/index-bar/utils.js +68 -0
  50. package/cjs/index.d.ts +2 -0
  51. package/cjs/index.js +9 -1
  52. package/cjs/keyboard/demo/style/css/mobile.css +4 -0
  53. package/cjs/keyboard/demo/style/mobile.less +8 -0
  54. package/cjs/keyboard/index.d.ts +13 -0
  55. package/cjs/keyboard/index.js +270 -0
  56. package/cjs/keyboard/style/css/index.css +93 -0
  57. package/cjs/keyboard/style/css/index.d.ts +3 -0
  58. package/cjs/keyboard/style/css/index.js +7 -0
  59. package/cjs/keyboard/style/index.d.ts +3 -0
  60. package/cjs/keyboard/style/index.js +7 -0
  61. package/cjs/keyboard/style/index.less +80 -0
  62. package/cjs/keyboard/type.d.ts +102 -0
  63. package/cjs/keyboard/type.js +3 -0
  64. package/cjs/picker/index.js +3 -39
  65. package/cjs/picker/type.d.ts +1 -1
  66. package/cjs/picker-view/components/cascader.d.ts +2 -3
  67. package/cjs/picker-view/components/cascader.js +8 -6
  68. package/cjs/picker-view/components/multi-picker.d.ts +2 -3
  69. package/cjs/picker-view/components/multi-picker.js +31 -35
  70. package/cjs/picker-view/components/picker-cell.d.ts +1 -1
  71. package/cjs/picker-view/components/picker-cell.js +5 -7
  72. package/cjs/picker-view/index.d.ts +1 -1
  73. package/cjs/picker-view/index.js +9 -20
  74. package/cjs/picker-view/type.d.ts +2 -2
  75. package/cjs/slider/hooks/useSliderEvents.js +20 -20
  76. package/cjs/sticky/index.js +2 -2
  77. package/cjs/style.d.ts +2 -0
  78. package/cjs/style.js +4 -0
  79. package/dist/index.js +1172 -444
  80. package/dist/index.min.js +5 -5
  81. package/dist/style.css +215 -1
  82. package/dist/style.min.css +1 -1
  83. package/esm/form/form-item.js +4 -2
  84. package/esm/icon/IconHeart/index.js +1 -1
  85. package/esm/icon/IconKeyboard/index.d.ts +7 -0
  86. package/esm/icon/IconKeyboard/index.js +37 -0
  87. package/esm/icon/IconKeyboardDelete/index.d.ts +7 -0
  88. package/esm/icon/IconKeyboardDelete/index.js +33 -0
  89. package/esm/icon/IconMinus/index.js +1 -1
  90. package/esm/icon/IconMore/index.js +1 -1
  91. package/esm/icon/IconNotice/index.js +1 -1
  92. package/esm/icon/IconNoticeOff/index.js +1 -1
  93. package/esm/icon/IconPlay/index.js +1 -1
  94. package/esm/icon/IconSetting/index.js +2 -2
  95. package/esm/icon/IconSound/index.js +1 -1
  96. package/esm/icon/IconStar/index.js +1 -1
  97. package/esm/icon/IconStarFill/index.js +1 -1
  98. package/esm/icon/IconTriDown/index.js +1 -1
  99. package/esm/icon/IconTriUp/index.js +1 -1
  100. package/esm/icon/IconUpload/index.js +1 -1
  101. package/esm/icon/IconWarnCircle/index.js +1 -1
  102. package/esm/icon/IconWarnCircleFill/index.js +1 -1
  103. package/esm/icon/index.d.ts +2 -0
  104. package/esm/icon/index.js +2 -0
  105. package/esm/image-picker/style/css/index.d.ts +1 -0
  106. package/esm/image-picker/style/css/index.js +1 -0
  107. package/esm/image-picker/style/index.d.ts +1 -0
  108. package/esm/image-picker/style/index.js +1 -0
  109. package/esm/index-bar/context.d.ts +3 -0
  110. package/esm/index-bar/context.js +8 -0
  111. package/esm/index-bar/demo/style/css/mobile.css +23 -0
  112. package/esm/index-bar/demo/style/mobile.less +26 -0
  113. package/esm/index-bar/group.d.ts +3 -0
  114. package/esm/index-bar/group.js +83 -0
  115. package/esm/index-bar/index.d.ts +15 -0
  116. package/esm/index-bar/index.js +253 -0
  117. package/esm/index-bar/side-bar.d.ts +3 -0
  118. package/esm/index-bar/side-bar.js +90 -0
  119. package/esm/index-bar/style/css/index.css +164 -0
  120. package/esm/index-bar/style/css/index.d.ts +3 -0
  121. package/esm/index-bar/style/css/index.js +3 -0
  122. package/esm/index-bar/style/index.d.ts +3 -0
  123. package/esm/index-bar/style/index.js +3 -0
  124. package/esm/index-bar/style/index.less +122 -0
  125. package/esm/index-bar/type.d.ts +195 -0
  126. package/esm/index-bar/type.js +1 -0
  127. package/esm/index-bar/utils.d.ts +6 -0
  128. package/esm/index-bar/utils.js +53 -0
  129. package/esm/index.d.ts +2 -0
  130. package/esm/index.js +2 -0
  131. package/esm/keyboard/demo/style/css/mobile.css +4 -0
  132. package/esm/keyboard/demo/style/mobile.less +8 -0
  133. package/esm/keyboard/index.d.ts +13 -0
  134. package/esm/keyboard/index.js +243 -0
  135. package/esm/keyboard/style/css/index.css +93 -0
  136. package/esm/keyboard/style/css/index.d.ts +3 -0
  137. package/esm/keyboard/style/css/index.js +3 -0
  138. package/esm/keyboard/style/index.d.ts +3 -0
  139. package/esm/keyboard/style/index.js +3 -0
  140. package/esm/keyboard/style/index.less +80 -0
  141. package/esm/keyboard/type.d.ts +102 -0
  142. package/esm/keyboard/type.js +1 -0
  143. package/esm/picker/index.js +3 -40
  144. package/esm/picker/type.d.ts +1 -1
  145. package/esm/picker-view/components/cascader.d.ts +2 -3
  146. package/esm/picker-view/components/cascader.js +8 -6
  147. package/esm/picker-view/components/multi-picker.d.ts +2 -3
  148. package/esm/picker-view/components/multi-picker.js +31 -34
  149. package/esm/picker-view/components/picker-cell.d.ts +1 -1
  150. package/esm/picker-view/components/picker-cell.js +5 -7
  151. package/esm/picker-view/index.d.ts +1 -1
  152. package/esm/picker-view/index.js +10 -21
  153. package/esm/picker-view/type.d.ts +2 -2
  154. package/esm/slider/hooks/useSliderEvents.js +20 -20
  155. package/esm/sticky/index.js +2 -2
  156. package/esm/style.d.ts +2 -0
  157. package/esm/style.js +2 -0
  158. package/package.json +3 -3
  159. package/tokens/app/arcodesign/default/css-variables.less +43 -0
  160. package/tokens/app/arcodesign/default/index.d.ts +43 -0
  161. package/tokens/app/arcodesign/default/index.js +43 -0
  162. package/tokens/app/arcodesign/default/index.json +516 -0
  163. package/tokens/app/arcodesign/default/index.less +43 -0
  164. package/umd/form/form-item.js +4 -2
  165. package/umd/icon/IconHeart/index.js +1 -1
  166. package/umd/icon/IconKeyboard/index.d.ts +7 -0
  167. package/umd/icon/IconKeyboard/index.js +56 -0
  168. package/umd/icon/IconKeyboardDelete/index.d.ts +7 -0
  169. package/umd/icon/IconKeyboardDelete/index.js +52 -0
  170. package/umd/icon/IconMinus/index.js +1 -1
  171. package/umd/icon/IconMore/index.js +1 -1
  172. package/umd/icon/IconNotice/index.js +1 -1
  173. package/umd/icon/IconNoticeOff/index.js +1 -1
  174. package/umd/icon/IconPlay/index.js +1 -1
  175. package/umd/icon/IconSetting/index.js +2 -2
  176. package/umd/icon/IconSound/index.js +1 -1
  177. package/umd/icon/IconStar/index.js +1 -1
  178. package/umd/icon/IconStarFill/index.js +1 -1
  179. package/umd/icon/IconTriDown/index.js +1 -1
  180. package/umd/icon/IconTriUp/index.js +1 -1
  181. package/umd/icon/IconUpload/index.js +1 -1
  182. package/umd/icon/IconWarnCircle/index.js +1 -1
  183. package/umd/icon/IconWarnCircleFill/index.js +1 -1
  184. package/umd/icon/index.d.ts +2 -0
  185. package/umd/icon/index.js +12 -6
  186. package/umd/image-picker/style/css/index.d.ts +1 -0
  187. package/umd/image-picker/style/css/index.js +4 -4
  188. package/umd/image-picker/style/index.d.ts +1 -0
  189. package/umd/image-picker/style/index.js +4 -4
  190. package/umd/index-bar/context.d.ts +3 -0
  191. package/umd/index-bar/context.js +26 -0
  192. package/umd/index-bar/demo/style/css/mobile.css +23 -0
  193. package/umd/index-bar/demo/style/mobile.less +26 -0
  194. package/umd/index-bar/group.d.ts +3 -0
  195. package/umd/index-bar/group.js +107 -0
  196. package/umd/index-bar/index.d.ts +15 -0
  197. package/umd/index-bar/index.js +274 -0
  198. package/umd/index-bar/side-bar.d.ts +3 -0
  199. package/umd/index-bar/side-bar.js +113 -0
  200. package/umd/index-bar/style/css/index.css +164 -0
  201. package/umd/index-bar/style/css/index.d.ts +3 -0
  202. package/umd/index-bar/style/css/index.js +15 -0
  203. package/umd/index-bar/style/index.d.ts +3 -0
  204. package/umd/index-bar/style/index.js +15 -0
  205. package/umd/index-bar/style/index.less +122 -0
  206. package/umd/index-bar/type.d.ts +195 -0
  207. package/umd/index-bar/type.js +17 -0
  208. package/umd/index-bar/utils.d.ts +6 -0
  209. package/umd/index-bar/utils.js +78 -0
  210. package/umd/index.d.ts +2 -0
  211. package/umd/index.js +9 -5
  212. package/umd/keyboard/demo/style/css/mobile.css +4 -0
  213. package/umd/keyboard/demo/style/mobile.less +8 -0
  214. package/umd/keyboard/index.d.ts +13 -0
  215. package/umd/keyboard/index.js +271 -0
  216. package/umd/keyboard/style/css/index.css +93 -0
  217. package/umd/keyboard/style/css/index.d.ts +3 -0
  218. package/umd/keyboard/style/css/index.js +15 -0
  219. package/umd/keyboard/style/index.d.ts +3 -0
  220. package/umd/keyboard/style/index.js +15 -0
  221. package/umd/keyboard/style/index.less +80 -0
  222. package/umd/keyboard/type.d.ts +102 -0
  223. package/umd/keyboard/type.js +17 -0
  224. package/umd/picker/index.js +3 -39
  225. package/umd/picker/type.d.ts +1 -1
  226. package/umd/picker-view/components/cascader.d.ts +2 -3
  227. package/umd/picker-view/components/cascader.js +8 -6
  228. package/umd/picker-view/components/multi-picker.d.ts +2 -3
  229. package/umd/picker-view/components/multi-picker.js +31 -35
  230. package/umd/picker-view/components/picker-cell.d.ts +1 -1
  231. package/umd/picker-view/components/picker-cell.js +5 -7
  232. package/umd/picker-view/index.d.ts +1 -1
  233. package/umd/picker-view/index.js +9 -20
  234. package/umd/picker-view/type.d.ts +2 -2
  235. package/umd/slider/hooks/useSliderEvents.js +20 -20
  236. package/umd/sticky/index.js +2 -2
  237. package/umd/style.d.ts +2 -0
  238. 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,3 @@
1
+ import '../../../../style/css/public.css';
2
+ import '../../../popup/style/css';
3
+ import './index.css';
@@ -0,0 +1,7 @@
1
+ "use strict";
2
+
3
+ require("../../../../style/css/public.css");
4
+
5
+ require("../../../popup/style/css");
6
+
7
+ require("./index.css");
@@ -0,0 +1,3 @@
1
+ import '../../../style/public.less';
2
+ import '../../popup/style';
3
+ import './index.less';
@@ -0,0 +1,7 @@
1
+ "use strict";
2
+
3
+ require("../../../style/public.less");
4
+
5
+ require("../../popup/style");
6
+
7
+ require("./index.less");
@@ -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
+ }
@@ -0,0 +1,3 @@
1
+ "use strict";
2
+
3
+ exports.__esModule = true;
@@ -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)(getInitialValue(value, data, cascade)),
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: getInitialValue(value, data, cascade),
201
+ value: value,
238
202
  onPickerChange: onPickerChange,
239
203
  itemStyle: itemStyle,
240
204
  clickable: clickable,
@@ -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: ValueType[];
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 {