@arco-design/mobile-react 2.26.0 → 2.27.1

package/esm/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/esm/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/esm/keyboard/type.js

@@ -0,0 +1 @@
+export {};

package/esm/picker/index.js

@@ -9,43 +9,6 @@ import PickerView from '../picker-view';
 import { useListenResize } from '../_helpers';
 export * from './type';
 export { MultiPicker, PickerCell, Cascader } from '../picker-view';
-
-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__*/forwardRef(function (props, ref) {
   var className = props.className,
       itemStyle = props.itemStyle,
@@ -83,7 +46,7 @@ var Picker = /*#__PURE__*/forwardRef(function (props, ref) {
       gestureOutOfControl = _props$gestureOutOfCo === void 0 ? true : _props$gestureOutOfCo,
       otherProps = _objectWithoutPropertiesLoose(props, _excluded);
 
-  var _useState = useState(getInitialValue(value, data, cascade)),
+  var _useState = useState(value),
       scrollValue = _useState[0],
       setScrollValue = _useState[1];
 
@@ -137,7 +100,7 @@ var Picker = /*#__PURE__*/forwardRef(function (props, ref) {
     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);
@@ -200,7 +163,7 @@ var Picker = /*#__PURE__*/forwardRef(function (props, ref) {
       cols: cols,
       rows: rows,
       disabled: disabled,
-      value: getInitialValue(value, data, cascade),
+      value: value,
       onPickerChange: onPickerChange,
       itemStyle: itemStyle,
       clickable: clickable,

package/esm/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/esm/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/esm/picker-view/components/cascader.js

@@ -13,7 +13,6 @@ var Cascader = /*#__PURE__*/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,
@@ -38,7 +37,7 @@ var Cascader = /*#__PURE__*/forwardRef(function (props, ref) {
     });
   }
 
-  function _onValueChange(value, index) {
+  function _onValueChange(value, index, newData) {
     var children = arrayTreeFilter(data, function (item, level) {
       return level <= index && item.value === value[level];
     });
@@ -48,15 +47,19 @@ var Cascader = /*#__PURE__*/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 = 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;
     });
@@ -81,8 +84,7 @@ var Cascader = /*#__PURE__*/forwardRef(function (props, ref) {
     data: formatData,
     selectedValue: selectedValue,
     itemHeight: itemHeight,
-    onValueChange: _onValueChange,
-    onPickerChange: onPickerChange
+    onValueChange: _onValueChange
   }, formatData.map(function (item, index) {
     return /*#__PURE__*/React.createElement(PickerCell, {
       key: index + "_picker_cell_cascader",

package/esm/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/esm/picker-view/components/multi-picker.js

@@ -2,59 +2,56 @@ import React from 'react';
 export default 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.Children.map(children, function (child) {
-      var childrenArray = React.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.Children.map(children, function (col, index) {
       return /*#__PURE__*/React.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/esm/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/esm/picker-view/components/picker-cell.js

@@ -70,17 +70,15 @@ var PickerCell = /*#__PURE__*/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);
         }
       }
     }
@@ -325,7 +323,7 @@ var PickerCell = /*#__PURE__*/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/esm/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

package/esm/picker-view/index.js

@@ -5,7 +5,7 @@ import { ContextLayout } from '../context-provider';
 import MultiPicker from '../picker-view/components/multi-picker';
 import PickerCell from '../picker-view/components/picker-cell';
 import Cascader from '../picker-view/components/cascader';
-import { useMountedState } from '../_helpers';
+import { useLatestRef, useMountedState } from '../_helpers';
 export * from './type';
 export { MultiPicker, PickerCell, Cascader };
 var PickerView = /*#__PURE__*/forwardRef(function (props, ref) {
@@ -45,7 +45,7 @@ var PickerView = /*#__PURE__*/forwardRef(function (props, ref) {
   var wrapperRef = useRef(null);
   var domRef = useRef(null);
   var barRef = useRef(null);
-  var scrollValueRef = useRef(value);
+  var scrollValueRef = useLatestRef(scrollValue);
   var pickerCellsRef = useRef([]);
   var cascaderRef = useRef(null);
   var innerData = useMemo(function () {
@@ -78,20 +78,19 @@ var PickerView = /*#__PURE__*/forwardRef(function (props, ref) {
 
     return newData;
   }, [data]);
-  useEffect(function () {
-    scrollValueRef.current = scrollValue;
-  }, [scrollValue]);
 
   var getAllColumnValues = function getAllColumnValues() {
-    return scrollValueRef.current;
+    return scrollValueRef.current || [];
   };
 
   function getColumnValue(index) {
+    var _scrollValueRef$curre;
+
     if (index === void 0) {
       index = 0;
     }
 
-    return scrollValueRef.current[index];
+    return (_scrollValueRef$curre = scrollValueRef.current) == null ? void 0 : _scrollValueRef$curre[index];
   }
 
   function getCellMovingStatus() {
@@ -127,25 +126,17 @@ var PickerView = /*#__PURE__*/forwardRef(function (props, ref) {
     };
   });
 
-  function _onPickerChange(val, index) {
+  function _onValueChange(val, index, newData) {
     setScrollValue(val);
 
     if (onPickerChange) {
-      onPickerChange(val, index);
-    }
-  }
-
-  function _onValueChange(val, index) {
-    setScrollValue(val);
-
-    if (onPickerChange) {
-      onPickerChange(val, index);
+      onPickerChange(val, index, newData);
     }
   }
 
   useEffect(function () {
     setScrollValue(value);
-  }, [value, setScrollValue]);
+  }, [value]);
   var updateWrapperHeight = useCallback(function () {
     if (wrapperRef && wrapperRef.current) {
       setWrapperHeight(wrapperRef.current.offsetHeight);
@@ -190,7 +181,6 @@ var PickerView = /*#__PURE__*/forwardRef(function (props, ref) {
       data: data,
       selectedValue: scrollValue,
       onValueChange: _onValueChange,
-      onPickerChange: _onPickerChange,
       clickable: clickable,
       itemHeight: itemHeight,
       wrapperHeight: wrapperHeight,
@@ -204,8 +194,7 @@ var PickerView = /*#__PURE__*/forwardRef(function (props, ref) {
       data: innerData,
       itemHeight: itemHeight,
       selectedValue: scrollValue,
-      onValueChange: _onValueChange,
-      onPickerChange: _onPickerChange
+      onValueChange: _onValueChange
     }, innerData.map(function (item, index) {
       return /*#__PURE__*/React.createElement(PickerCell, {
         key: index + "_picker_cell_normal",

package/esm/picker-view/type.d.ts

@@ -52,12 +52,12 @@ export interface PickerViewProps {
      * 值, 格式是[value1, value2, value3], 对应数据源的相应级层value
      * @en Value, the format is [value1, value2, value3], corresponding to the corresponding level value of the data source
      */
-    value: ValueType[];
+    value?: ValueType[];
     /**
      * 每列数据选择变化后的回调函数
      * @en The callback function 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/esm/slider/hooks/useSliderEvents.js

@@ -73,29 +73,29 @@ export var useSliderEvents = function useSliderEvents(_ref) {
       return function (realTimeValue) {
         setValueGroup(realTimeValue);
       };
-    } else {
-      var index = Math.abs(valueGroup[0] - start) < Math.abs(valueGroup[1] - start) ? 0 : 1;
-
-      var handleValue = function handleValue(realTimeValue) {
-        setValueGroup(function (passValueGroup) {
-          if (typeof passValueGroup === 'number') {
-            return [passValueGroup, realTimeValue];
-          }
-
-          var newValueGroup = [].concat(passValueGroup);
-          newValueGroup[index] = realTimeValue;
-          return newValueGroup;
-        });
-      };
+    }
 
-      if (isTouching) {
-        setCommonIsTouching(index);
-        handleValue(start);
-        setIsTouching(IsTouchingStatus.Moving);
-      }
+    var index = Math.abs(valueGroup[0] - start) < Math.abs(valueGroup[1] - start) ? 0 : 1;
 
-      return handleValue;
+    var handleValue = function handleValue(realTimeValue) {
+      setValueGroup(function (passValueGroup) {
+        if (typeof passValueGroup === 'number') {
+          return [passValueGroup, realTimeValue];
+        }
+
+        var newValueGroup = [].concat(passValueGroup);
+        newValueGroup[index] = realTimeValue;
+        return newValueGroup;
+      });
+    };
+
+    if (isTouching) {
+      setCommonIsTouching(index);
+      handleValue(start);
+      setIsTouching(IsTouchingStatus.Moving);
     }
+
+    return handleValue;
   }, [touchStartPosition, getValueFromPosition]);
   useEffect(function () {
     var _lineRef$current;

package/esm/sticky/index.js

@@ -79,8 +79,8 @@ var Sticky = /*#__PURE__*/forwardRef(function (props, ref) {
     var containerTop = containerRect.top,
         containerBottom = containerRect.bottom,
         containerHeight = containerRect.height;
-    var disFromTop = placeholderClientRect.top - containerTop;
-    var disFromBottom = placeholderClientRect.top + calculatedHeight - containerBottom;
+    var disFromTop = Math.round(placeholderClientRect.top - containerTop);
+    var disFromBottom = Math.round(placeholderClientRect.top + calculatedHeight - containerBottom);
     var topFollowDifference = followBottom - followOffset - calculatedHeight - topOffset - containerTop;
     var bottomFollowDifference = containerHeight - followTop - followOffset - calculatedHeight - bottomOffset;
     setWasSticky(Boolean(isStickyRef.current));

package/esm/style.d.ts

@@ -27,6 +27,8 @@ import './grid/style';
 import './image/style';
 import './show-monitor/style';
 import './image-preview/style';
+import './index-bar/style';
+import './keyboard/style';
 import './load-more/style';
 import './loading/style';
 import './masking/style';

package/esm/style.js

@@ -27,6 +27,8 @@ import './grid/style';
 import './image/style';
 import './show-monitor/style';
 import './image-preview/style';
+import './index-bar/style';
+import './keyboard/style';
 import './load-more/style';
 import './loading/style';
 import './masking/style';