@arco-design/mobile-react 2.26.0 → 2.27.0

package/cjs/keyboard/style/css/index.css

@@ -0,0 +1,93 @@
+.arco-keyboard {
+  background:  #f2f3f5 ;
+  padding:  0.16rem ;
+  -webkit-touch-callout: none;
+  /* iOS Safari */
+  -webkit-user-select: none;
+  /* Chrome/Safari/Opera */
+  /* Konqueror */
+  /* Firefox */
+  /* Internet Explorer/Edge */
+  user-select: none;
+  /* Non-prefixed version, currently*/
+}
+.arco-keyboard-wrapper {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+}
+.arco-keyboard-key-wrapper {
+  -webkit-box-flex: 2;
+  -webkit-flex: 2 0 auto;
+          flex: 2 0 auto;
+}
+.arco-keyboard-row {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+}
+.arco-keyboard-row:not(.arco-keyboard-row:nth-last-child(1)) {
+  margin-bottom:  0.16rem ;
+}
+.arco-keyboard-row .arco-keyboard-key:not(.arco-keyboard-row .arco-keyboard-key:nth-child(1)) {
+  margin-left:  0.16rem ;
+}
+.arco-keyboard-row .arco-keyboard-key-special {
+  -webkit-box-flex: 2.1;
+  -webkit-flex: 2.1 0 auto;
+          flex: 2.1 0 auto;
+}
+.arco-keyboard-col {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+          flex: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+          flex-direction: column;
+  margin-left:  0.16rem ;
+}
+.arco-keyboard-col .arco-keyboard-key:not(.arco-keyboard-col .arco-keyboard-key:nth-child(1)) {
+  margin-top:  0.16rem ;
+}
+.arco-keyboard-col .arco-keyboard-key-confirm {
+  -webkit-box-flex: 2.5;
+  -webkit-flex: 2.5 0 auto;
+          flex: 2.5 0 auto;
+  background:  #165dff ;
+  color:  #ffffff ;
+  font-size:  0.36rem ;
+}
+.arco-keyboard-key {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+          justify-content: center;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+          flex: 1;
+  font-weight:  500 ;
+  font-size:  0.44rem ;
+  line-height:  0.6rem ;
+  background:  #ffffff ;
+  height:  0.96rem ;
+  border-radius:  0.08rem ;
+  color:  #1d2129 ;
+}
+.arco-keyboard-key:active {
+  background:  #e5e6eb ;
+}
+.arco-keyboard-key .arco-icon {
+  font-size:  0.52rem ;
+}
+.arco-keyboard-popup {
+  display: none;
+}

package/cjs/keyboard/style/css/index.d.ts

@@ -0,0 +1,3 @@
+import '../../../../style/css/public.css';
+import '../../../popup/style/css';
+import './index.css';

package/cjs/keyboard/style/css/index.js

@@ -0,0 +1,7 @@
+"use strict";
+
+require("../../../../style/css/public.css");
+
+require("../../../popup/style/css");
+
+require("./index.css");

package/cjs/keyboard/style/index.d.ts

@@ -0,0 +1,3 @@
+import '../../../style/public.less';
+import '../../popup/style';
+import './index.less';

package/cjs/keyboard/style/index.js

@@ -0,0 +1,7 @@
+"use strict";
+
+require("../../../style/public.less");
+
+require("../../popup/style");
+
+require("./index.less");

package/cjs/keyboard/style/index.less

@@ -0,0 +1,80 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-keyboard {
+    .use-var(background, keyboard-background);
+    .use-var(padding, keyboard-content-padding);
+    .noselect();
+
+    &-wrapper {
+        display: flex;
+    }
+
+    &-key-wrapper {
+        flex: 2 0 auto;
+    }
+
+    &-row {
+        display: flex;
+        &:not(&:nth-last-child(1)) {
+            .use-var(margin-bottom, keyboard-unified-margin);
+        }
+
+        .@{prefix}-keyboard-key {
+            &:not(&:nth-child(1)) {
+                .use-var(margin-left, keyboard-unified-margin);
+            }
+
+            &-special {
+                flex: 2.1 0 auto;
+            }
+        }
+    }
+
+    &-col {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        .use-var(margin-left, keyboard-unified-margin);
+
+        .@{prefix}-keyboard-key {
+            &:not(&:nth-child(1)) {
+                .use-var(margin-top, keyboard-unified-margin);
+            }
+
+            &-confirm {
+                flex: 2.5 0 auto;
+                .use-var(background, keyboard-confirm-key-background);
+                .use-var(color, keyboard-confirm-key-color);
+                .use-var(font-size, keyboard-confirm-key-font-size);
+            }
+        }
+    }
+
+    &-key {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex: 1;
+
+        .use-var(font-weight, keyboard-key-font-weight);
+        .use-var(font-size, keyboard-key-font-size);
+        .use-var(line-height, keyboard-key-line-height);
+        .use-var(background, keyboard-key-background);
+        .use-var(border-radius, keyboard-key-border-radius);
+        .use-var(height, keyboard-key-height);
+        .use-var(border-radius, keyboard-key-border-radius);
+        .use-var(color, keyboard-key-color);
+
+        &:active {
+            .use-var(background, keyboard-key-active-background);
+        }
+
+        .@{prefix}-icon {
+            .use-var(font-size, keyboard-key-icon-size);
+        }
+    }
+
+    &-popup {
+      display: none;
+    }
+}

package/cjs/keyboard/type.d.ts

@@ -0,0 +1,102 @@
+import { CSSProperties, ReactNode } from 'react';
+import { PopupProps, PopupRef } from '../popup';
+export declare type ColumnData = string | number | ColumnObjData;
+export declare type ColumnObjData = {
+    type: 'keyboard' | 'delete';
+} | {
+    type: 'content';
+    content: ReactNode;
+    value: string | number;
+};
+export interface KeyboardProps extends PopupProps {
+    /**
+     * 常规键位自定义类名
+     * @en Custom classname for normal keys
+     */
+    normalKeyClass?: string;
+    /**
+     * 常规键位自定义样式
+     * @en Custom style for normal keys
+     */
+    normalKeyStyle?: CSSProperties;
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     * @en Custom stylesheet
+     */
+    style?: React.CSSProperties;
+    /**
+     * 键盘展示类型，不同类型有不同布局。number - 纯数字常规键盘，confirm - 带确认按钮的键盘，tool - 带运算符的键盘
+     * @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
+     * @default "number"
+     */
+    type?: 'number' | 'confirm' | 'tool';
+    /**
+     * 是否打乱键盘中的数字展示位置
+     * @en Whether to scramble number placements in the keyboard
+     * @default false
+     */
+    randomOrder: boolean;
+    /**
+     * 键盘顶部展示标题内容，样式纯自定义
+     * @en The title content displayed on the top of the keyboard, the style is purely customized
+     */
+    title?: ReactNode;
+    /**
+     * 自定义渲染数字右侧（第四列）的内容
+     * @en Custom rendering of the content to the right of the number (fourth column)
+     */
+    rightColumns?: ReactNode;
+    /**
+     * 点击确认后是否自动关闭键盘
+     * @en Whether to automatically close the keyboard after clicking confirm button
+     * @default false
+     */
+    confirmClosable?: boolean;
+    /**
+     * 自定义渲染确认按钮内部内容
+     * @en Customize the internal content of the confirm button
+     */
+    confirmButton?: ReactNode;
+    /**
+     * 自定义渲染删除按钮内部内容
+     * @en Customize the internal content of the delete button
+     */
+    deleteButton?: ReactNode;
+    /**
+     * 自定义渲染收起键盘按钮内部内容
+     * @en Customize the internal content of the keyboard button
+     */
+    keyboardButton?: ReactNode;
+    /**
+     * 收起键盘回调
+     * @en Callback for closing the keyboard
+     */
+    close: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => {};
+    /**
+     * 点击确认按钮回调
+     * @en Callback for clicking the confirm button
+     */
+    onConfirm?: () => {};
+    /**
+     * 点击删除按钮回调
+     * @en Callback for clicking the delete button
+     */
+    onDelete?: () => {};
+    /**
+     * 点击常规按钮回调
+     * @en Callback for clicking the normal button
+     */
+    onChange?: (data: string | number) => {};
+}
+export interface KeyboardRef extends PopupRef {
+    /**
+     * 最外层 DOM 元素
+     * @en The outer DOM element of the component
+     */
+    keyboard: HTMLDivElement | null;
+}

package/cjs/keyboard/type.js

@@ -0,0 +1,3 @@
+"use strict";
+
+exports.__esModule = true;

package/cjs/picker/index.js

@@ -44,42 +44,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
-var getInitialValue = function getInitialValue(value, data, cascade) {
-  if (value && value.length) {
-    return value;
-  }
-
-  var computedValue = [];
-
-  if (!cascade) {
-    if (!(data[0] instanceof Array)) {
-      var _data$;
-
-      return (_data$ = data[0]) != null && _data$.value ? [data[0].value] : [];
-    }
-
-    data.map(function (column) {
-      computedValue.push(typeof column[0] === 'object' ? column[0].value : column[0]);
-    });
-  } else {
-    var cascadePickerData = data;
-
-    if (!cascadePickerData || !cascadePickerData.length) {
-      return computedValue;
-    }
-
-    computedValue.push(cascadePickerData[0].value);
-    var traverse = cascadePickerData[0].children;
-
-    while (traverse) {
-      computedValue.push(traverse[0].value);
-      traverse = traverse[0].children;
-    }
-  }
-
-  return computedValue;
-};
-
 var Picker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var className = props.className,
       itemStyle = props.itemStyle,
@@ -117,7 +81,7 @@ var Picker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       gestureOutOfControl = _props$gestureOutOfCo === void 0 ? true : _props$gestureOutOfCo,
       otherProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
 
-  var _useState = (0, _react.useState)(getInitialValue(value, data, cascade)),
+  var _useState = (0, _react.useState)(value),
       scrollValue = _useState[0],
       setScrollValue = _useState[1];
 
@@ -171,7 +135,7 @@ var Picker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     (0, _mobileUtils.nextTick)(function () {
       var _pickerViewRef$curren7;
 
-      var val = ((_pickerViewRef$curren7 = pickerViewRef.current) == null ? void 0 : _pickerViewRef$curren7.getAllColumnValues()) || scrollValue;
+      var val = ((_pickerViewRef$curren7 = pickerViewRef.current) == null ? void 0 : _pickerViewRef$curren7.getAllColumnValues()) || scrollValue || [];
 
       if (onOk) {
         onOk(val);
@@ -234,7 +198,7 @@ var Picker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       cols: cols,
       rows: rows,
       disabled: disabled,
-      value: getInitialValue(value, data, cascade),
+      value: value,
       onPickerChange: onPickerChange,
       itemStyle: itemStyle,
       clickable: clickable,

package/cjs/picker/type.d.ts

@@ -51,7 +51,7 @@ export interface PickerProps extends Omit<PopupProps, 'visible' | 'close' | 'chi
      * 每列数据选择变化后的回调函数
      * @en The callback after each column data selection changes
      */
-    onPickerChange?: (value: ValueType[], index: number) => void;
+    onPickerChange?: (value: ValueType[], index: number, data: PickerData[]) => void;
     /**
      * 每列样式
      * @en Stylesheet per column

package/cjs/picker-view/components/cascader.d.ts

@@ -9,11 +9,10 @@ export interface CascaderProps {
     disabled: boolean;
     itemHeight: number;
     wrapperHeight: number;
-    selectedValue: ValueType[];
+    selectedValue?: ValueType[];
     rows?: number;
     hideEmptyCols?: boolean;
-    onValueChange?: (value: ValueType[], index: number) => void;
-    onPickerChange?: (value: ValueType[], index: number) => void;
+    onValueChange?: (value: ValueType[], index: number, data: PickerData[]) => void;
     touchToStop?: boolean | number;
 }
 export interface CascaderRef {

package/cjs/picker-view/components/cascader.js

@@ -28,7 +28,6 @@ var Cascader = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       wrapperHeight = props.wrapperHeight,
       rows = props.rows,
       hideEmptyCols = props.hideEmptyCols,
-      onPickerChange = props.onPickerChange,
       onValueChange = props.onValueChange,
       _props$selectedValue = props.selectedValue,
       selectedValue = _props$selectedValue === void 0 ? [] : _props$selectedValue,
@@ -53,7 +52,7 @@ var Cascader = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     });
   }
 
-  function _onValueChange(value, index) {
+  function _onValueChange(value, index, newData) {
     var children = (0, _mobileUtils.arrayTreeFilter)(data, function (item, level) {
       return level <= index && item.value === value[level];
     });
@@ -63,15 +62,19 @@ var Cascader = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     for (i = index + 1; i < cols && child && child.children; i++) {
       child = child.children[0];
       value[i] = child.value;
+      newData[i] = child;
     }
 
     value.length = i;
-    onValueChange == null ? void 0 : onValueChange(value, index);
+    newData.length = i;
+    onValueChange == null ? void 0 : onValueChange(value, index, newData);
   }
 
   function _formatData() {
     var childrenTree = (0, _mobileUtils.arrayTreeFilter)(data, function (item, level) {
-      return item.value === selectedValue[level];
+      return item.value === (selectedValue == null ? void 0 : selectedValue[level]);
+    }, {
+      fallbackChildIndex: 0
     }).map(function (item) {
       return item.children;
     });
@@ -96,8 +99,7 @@ var Cascader = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     data: formatData,
     selectedValue: selectedValue,
     itemHeight: itemHeight,
-    onValueChange: _onValueChange,
-    onPickerChange: onPickerChange
+    onValueChange: _onValueChange
   }, formatData.map(function (item, index) {
     return /*#__PURE__*/_react.default.createElement(_pickerCell.default, {
       key: index + "_picker_cell_cascader",

package/cjs/picker-view/components/multi-picker.d.ts

@@ -3,10 +3,9 @@ import { PickerData, ValueType } from '../type';
 export interface MultiPickerProps {
     prefixCls: string;
     data: PickerData[][];
-    selectedValue: ValueType[];
+    selectedValue?: ValueType[];
     children: any;
     itemHeight: number;
-    onValueChange: (value: ValueType[], index: number) => void;
-    onPickerChange?: (value: ValueType[], index: number) => void;
+    onValueChange: (value: ValueType[], index: number, data: PickerData[]) => void;
 }
 export default function MultiPicker(props: MultiPickerProps): JSX.Element;

package/cjs/picker-view/components/multi-picker.js

@@ -10,60 +10,56 @@ var _react = _interopRequireDefault(require("react"));
 function MultiPicker(props) {
   var prefixCls = props.prefixCls,
       onValueChange = props.onValueChange,
-      onPickerChange = props.onPickerChange,
       children = props.children,
       itemHeight = props.itemHeight,
       selectedValue = props.selectedValue,
       data = props.data;
 
-  function getValue() {
-    if (selectedValue && selectedValue.length) {
-      return selectedValue;
-    }
-
-    if (data) {
-      return data.map(function (item) {
-        return item && item[0] && item[0].value;
-      });
-    }
-
-    if (!children) {
-      return [];
-    }
-
-    return _react.default.Children.map(children, function (child) {
-      var childrenArray = _react.default.Children.toArray(child.children || child.props.children);
-
-      return childrenArray && childrenArray[0] && childrenArray[0].props.value;
+  function getCurrentData() {
+    return (data || []).map(function (item, itemIndex) {
+      var curSelected = selectedValue == null ? void 0 : selectedValue[itemIndex];
+      var cur = curSelected ? (item || []).find(function (i) {
+        return i.value === curSelected;
+      }) : undefined;
+      return cur || (item == null ? void 0 : item[0]);
     });
   }
 
-  function onChange(index, value, callback) {
-    var newValue = getValue().concat();
+  function onChange(_ref) {
+    var index = _ref.index,
+        value = _ref.value,
+        changedData = _ref.changedData,
+        callback = _ref.callback;
+    var newData = getCurrentData().concat();
+    newData[index] = changedData;
+    var newValue = newData.map(function (d) {
+      return d == null ? void 0 : d.value;
+    });
     newValue[index] = value;
 
     if (callback) {
-      callback(newValue, index);
+      callback(newValue, index, newData);
     }
   }
 
-  function _onValueChange(value, index) {
-    onChange(index, value, onValueChange);
-  }
-
-  function _onScrollChange(value, index) {
-    onChange(index, value, onPickerChange);
+  function _onValueChange(value, index, changedData) {
+    onChange({
+      index: index,
+      value: value,
+      callback: onValueChange,
+      changedData: changedData
+    });
   }
 
   function renderChild() {
-    var value = getValue();
+    var curData = getCurrentData();
+    var value = curData.map(function (d) {
+      return d == null ? void 0 : d.value;
+    });
     return _react.default.Children.map(children, function (col, index) {
       return /*#__PURE__*/_react.default.cloneElement(col, {
-        onScrollChange: function onScrollChange(val) {
-          return _onScrollChange(val, index);
-        },
-        onValueChange: function onValueChange(val) {
-          return _onValueChange(val, index);
+        onValueChange: function onValueChange(val, changedData) {
+          return _onValueChange(val, index, changedData);
         },
         selectedValue: value[index]
       });

package/cjs/picker-view/components/picker-cell.d.ts

@@ -8,7 +8,7 @@ export interface PickerCellProps {
     itemHeight: number;
     wrapperHeight: number;
     selectedValue?: ValueType;
-    onValueChange?: (value: ValueType) => void;
+    onValueChange?: (value: ValueType, data: PickerData) => void;
     disabled: boolean;
     hideEmptyCols?: boolean;
     /**

package/cjs/picker-view/components/picker-cell.js

@@ -85,17 +85,15 @@ var PickerCell = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     // index有改变时再抛出
     // @en Throws again when index changes
     if (currentIndex !== nowItemIndex) {
-      setCurrentIndex(nowItemIndex);
-      var newValue = data[nowItemIndex] && data[nowItemIndex].value;
+      setCurrentIndex(Math.max(nowItemIndex, 0));
+      var newData = data[nowItemIndex];
+      var newValue = newData == null ? void 0 : newData.value;
 
       if (newValue !== currentValue) {
-        // if (!('selectedValue' in props)) {
-        //     setCurrentValue(newValue);
-        // }
         setCurrentValue(newValue);
 
         if (onValueChange) {
-          onValueChange(newValue);
+          onValueChange(newValue, newData);
         }
       }
     }
@@ -340,7 +338,7 @@ var PickerCell = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       var curIndex = data.findIndex(function (item) {
         return item.value === selectedValue;
       });
-      setCurrentIndex(curIndex);
+      setCurrentIndex(Math.max(curIndex, 0));
 
       if (curIndex >= 0) {
         _scrollToIndexWithChange(curIndex);

package/cjs/picker-view/index.d.ts

@@ -25,7 +25,7 @@ export interface PickerViewRef {
      * 获取第 n 列的值
      * @en Get the value of the nth column
      */
-    getColumnValue: (index: number) => ValueType;
+    getColumnValue: (index: number) => ValueType | undefined;
     /**
      * 手动更新元素布局
      * @en Manually update the element layout