@arco-design/mobile-react 2.30.10 → 2.31.0

package/esm/index.d.ts

@@ -56,3 +56,4 @@ export { default as Tag } from './tag';
 export { default as Textarea } from './textarea';
 export { default as Toast } from './toast';
 export { default as Transition } from './transition';
+export { default as Uploader } from './uploader';

package/esm/index.js

@@ -55,4 +55,5 @@ export { default as TabBar } from './tab-bar';
 export { default as Tag } from './tag';
 export { default as Textarea } from './textarea';
 export { default as Toast } from './toast';
-export { default as Transition } from './transition';
+export { default as Transition } from './transition';
+export { default as Uploader } from './uploader';

package/esm/input/hooks.js

@@ -61,8 +61,8 @@ export function useInputLogic(props, inputRef) {
   useEffect(function () {
     if (autoFocus) {
       setTimeout(function () {
-        inputRef.current && inputRef.current.focus();
-      }, 200);
+        inputRef.current && inputRef.current.click();
+      }, 100);
     }
   }, []);
   useEffect(function () {

package/esm/input/props.d.ts

@@ -57,8 +57,8 @@ export interface BasicInputProps<T = HTMLInputElement> {
      */
     readOnly?: boolean;
     /**
-     * 是否自动获取焦点
-     * @en Whether to automatically get the focus
+     * 是否自动获取焦点，开启后会触发一次onClick事件
+     * @en Whether to automatically get the focus, it will trigger an onClick event once after being enabled
      */
     autoFocus?: boolean;
     /**

package/esm/picker/index.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["className", "itemStyle", "cascade", "cols", "rows", "data", "okText", "dismissText", "disabled", "clickable", "hideEmptyCols", "title", "visible", "value", "needBottomOffset", "onDismiss", "onOk", "onChange", "maskClosable", "onHide", "onPickerChange", "touchToStop", "gestureOutOfControl"];
-import React, { useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
+var _excluded = ["className", "itemStyle", "cascade", "cols", "rows", "data", "okText", "dismissText", "disabled", "clickable", "hideEmptyCols", "title", "visible", "value", "needBottomOffset", "onDismiss", "onOk", "onChange", "maskClosable", "onHide", "onPickerChange", "touchToStop", "gestureOutOfControl", "renderLinkedContainer"];
+import React, { useEffect, useRef, forwardRef, useImperativeHandle, useState } from 'react';
 import { cls, componentWrapper, nextTick } from '@arco-design/mobile-utils';
 import { ContextLayout } from '../context-provider';
 import Popup from '../popup';
@@ -29,8 +29,7 @@ var Picker = /*#__PURE__*/forwardRef(function (props, ref) {
       hideEmptyCols = _props$hideEmptyCols === void 0 ? false : _props$hideEmptyCols,
       _props$title = props.title,
       title = _props$title === void 0 ? '' : _props$title,
-      _props$visible = props.visible,
-      visible = _props$visible === void 0 ? false : _props$visible,
+      userSetVisible = props.visible,
       value = props.value,
       _props$needBottomOffs = props.needBottomOffset,
       needBottomOffset = _props$needBottomOffs === void 0 ? false : _props$needBottomOffs,
@@ -44,11 +43,26 @@ var Picker = /*#__PURE__*/forwardRef(function (props, ref) {
       touchToStop = props.touchToStop,
       _props$gestureOutOfCo = props.gestureOutOfControl,
       gestureOutOfControl = _props$gestureOutOfCo === void 0 ? true : _props$gestureOutOfCo,
+      renderLinkedContainer = props.renderLinkedContainer,
       otherProps = _objectWithoutPropertiesLoose(props, _excluded);
 
   var scrollValueRef = useLatestRef(value);
   var domRef = useRef(null);
   var pickerViewRef = useRef(null);
+
+  var _useState = useState(false),
+      linkVisible = _useState[0],
+      setLinkVisible = _useState[1];
+
+  var _useState2 = useState(function () {
+    return getCurrentValueData();
+  }),
+      linkArgs = _useState2[0],
+      setLinkArgs = _useState2[1]; // 来自linkedContainer的visible变化，优先级高于受控值
+  // @en Visible changes from linkedContainer which have priority over controlled values
+
+
+  var visible = linkVisible || userSetVisible || false;
   useImperativeHandle(ref, function () {
     return {
       dom: domRef.current,
@@ -79,26 +93,49 @@ var Picker = /*#__PURE__*/forwardRef(function (props, ref) {
       }
     };
   });
+  useEffect(function () {
+    nextTick(function () {
+      setLinkArgs(getCurrentValueData());
+    });
+  }, []);
+
+  function hidePicker(scene) {
+    setLinkVisible(false);
+    onHide == null ? void 0 : onHide(scene);
+  }
 
   function handleDismiss() {
     if (onDismiss) {
       onDismiss();
     }
 
-    if (onHide) {
-      onHide('dismiss');
-    }
+    hidePicker('dismiss');
   }
 
-  var handleConfirm = function handleConfirm() {
-    var _pickerViewRef$curren6;
+  function getCurrentValueData() {
+    var _pickerViewRef$curren6, _pickerViewRef$curren7;
+
+    var val = ((_pickerViewRef$curren6 = pickerViewRef.current) == null ? void 0 : _pickerViewRef$curren6.getAllColumnValues()) || scrollValueRef.current || [];
+    var selectedData = ((_pickerViewRef$curren7 = pickerViewRef.current) == null ? void 0 : _pickerViewRef$curren7.getAllColumnData()) || [];
+    return {
+      value: val,
+      data: selectedData
+    };
+  }
 
-    (_pickerViewRef$curren6 = pickerViewRef.current) == null ? void 0 : _pickerViewRef$curren6.scrollToCurrentIndex();
+  function handleConfirm() {
+    var _pickerViewRef$curren8;
+
+    (_pickerViewRef$curren8 = pickerViewRef.current) == null ? void 0 : _pickerViewRef$curren8.scrollToCurrentIndex();
     nextTick(function () {
-      var _pickerViewRef$curren7, _pickerViewRef$curren8;
+      var _getCurrentValueData = getCurrentValueData(),
+          val = _getCurrentValueData.value,
+          selectedData = _getCurrentValueData.data;
 
-      var val = ((_pickerViewRef$curren7 = pickerViewRef.current) == null ? void 0 : _pickerViewRef$curren7.getAllColumnValues()) || scrollValueRef.current || [];
-      var selectedData = ((_pickerViewRef$curren8 = pickerViewRef.current) == null ? void 0 : _pickerViewRef$curren8.getAllColumnData()) || [];
+      setLinkArgs({
+        value: val,
+        data: selectedData
+      });
 
       if (onOk) {
         onOk(val, selectedData);
@@ -108,11 +145,9 @@ var Picker = /*#__PURE__*/forwardRef(function (props, ref) {
         onChange(val);
       }
 
-      if (onHide) {
-        onHide('confirm');
-      }
+      hidePicker('confirm');
     });
-  };
+  }
 
   useListenResize(updateLayoutByVisible, [visible]); // 每次visible从false变为true时需要重新设置scrollValue的值为当前value的值（初始值）
 
@@ -128,11 +163,16 @@ var Picker = /*#__PURE__*/forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref) {
     var prefixCls = _ref.prefixCls,
         locale = _ref.locale;
-    return /*#__PURE__*/React.createElement(Popup, _extends({
+    return /*#__PURE__*/React.createElement(React.Fragment, null, renderLinkedContainer ? /*#__PURE__*/React.createElement("div", {
+      className: prefixCls + "-picker-linked-container",
+      onClick: function onClick() {
+        return setLinkVisible(true);
+      }
+    }, renderLinkedContainer(linkArgs.value, linkArgs.data)) : null, /*#__PURE__*/React.createElement(Popup, _extends({
       visible: visible,
       className: cls(className, prefixCls + "-picker all-border-box"),
       close: function close() {
-        return onHide == null ? void 0 : onHide('mask');
+        return hidePicker('mask');
       },
       direction: "bottom",
       maskClosable: maskClosable,
@@ -164,7 +204,7 @@ var Picker = /*#__PURE__*/forwardRef(function (props, ref) {
       clickable: clickable,
       hideEmptyCols: hideEmptyCols,
       touchToStop: touchToStop
-    })));
+    }))));
   });
 });
 /**

package/esm/picker/type.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { PickerData, ValueType } from '../picker-view/type';
 import { PopupProps } from '../popup';
 export declare type DataType = PickerData[] | PickerData[][] | ValueType[][];
@@ -123,4 +123,9 @@ export interface PickerProps extends Omit<PopupProps, 'visible' | 'close' | 'chi
      * @default true
      */
     gestureOutOfControl?: boolean;
+    /**
+     * 将选择器的展现隐藏状态及选中值的展示与某个容器关联，传入后将同时渲染该容器和选择器组件，此时选择器组件的 visible 和 onHide 属性可不传，点击该容器会唤起选择器
+     * @en Associate the hidden state of the picker and the display of the selected value with a container. After passing it in, the container and the picker component will be rendered at the same time. At this time, the visible and onHide attributes of the picker component are optional values. Clicking the container will evoke the picker
+     */
+    renderLinkedContainer?: (value: ValueType[], data: PickerData[]) => ReactNode;
 }

package/esm/style.d.ts

@@ -57,3 +57,4 @@ import './tag/style';
 import './textarea/style';
 import './toast/style';
 import './transition/style';
+import './uploader/style';

package/esm/style.js

@@ -56,4 +56,5 @@ import './tab-bar/style';
 import './tag/style';
 import './textarea/style';
 import './toast/style';
-import './transition/style';
+import './transition/style';
+import './uploader/style';

package/esm/tabs/tab-cell.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useRef, forwardRef, useImperativeHandle, useState, useEffect, useContext } from 'react';
 import { cls, scrollWithAnimation, nextTick } from '@arco-design/mobile-utils';
-import { useSystem } from '../_helpers';
+import { useSystem, useUpdateEffect } from '../_helpers';
 import TabCellUnderline from './tab-cell-underline';
 import { GlobalContext } from '../context-provider';
 var TabCell = /*#__PURE__*/forwardRef(function (props, ref) {
@@ -130,7 +130,7 @@ var TabCell = /*#__PURE__*/forwardRef(function (props, ref) {
   useEffect(function () {
     updateScrollPosition();
   }, [activeIndex, wrapSize]);
-  useEffect(function () {
+  useUpdateEffect(function () {
     var _underlineRef$current2;
 
     setCellOverflow();

package/esm/uploader/index.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { UploaderRef, UploaderProps } from './type';
+export * from './type';
+declare const _default: React.ForwardRefExoticComponent<UploaderProps & React.RefAttributes<UploaderRef>> & {
+    displayName?: string | undefined;
+};
+/**
+ * 文件上传组件
+ * @en Uploader Component
+ * @type 数据录入
+ * @type_en Data Entry
+ * @name 文件上传
+ * @name_en Uploader
+ * @displayName Uploader
+ */
+export default _default;

package/esm/uploader/index.js

@@ -0,0 +1,150 @@
+import React, { useRef, forwardRef, useImperativeHandle } from 'react';
+import { cls, defaultLocale, componentWrapper } from '@arco-design/mobile-utils';
+import { ContextLayout } from '../context-provider';
+import Button from '../button';
+import { useLatestRef } from '../_helpers';
+import { IconUpload, IconDelete, IconCheck, IconFile } from '../icon';
+import Loading from '../loading';
+import { Upload } from './upload';
+export * from './type';
+var Uploader = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _props$className = props.className,
+      className = _props$className === void 0 ? '' : _props$className,
+      style = props.style,
+      _props$files = props.files,
+      files = _props$files === void 0 ? [] : _props$files,
+      _props$accept = props.accept,
+      accept = _props$accept === void 0 ? undefined : _props$accept,
+      _props$multiple = props.multiple,
+      multiple = _props$multiple === void 0 ? false : _props$multiple,
+      capture = props.capture,
+      _props$limit = props.limit,
+      limit = _props$limit === void 0 ? 0 : _props$limit,
+      _props$hideStatus = props.hideStatus,
+      hideStatus = _props$hideStatus === void 0 ? false : _props$hideStatus,
+      _props$alwaysShowSele = props.alwaysShowSelect,
+      alwaysShowSelect = _props$alwaysShowSele === void 0 ? false : _props$alwaysShowSele,
+      disabled = props.disabled,
+      renderDeleteArea = props.renderDeleteArea,
+      renderLoadedArea = props.renderLoadedArea,
+      renderLoadingArea = props.renderLoadingArea,
+      renderErrorArea = props.renderErrorArea,
+      renderFileIndexArea = props.renderFileIndexArea,
+      renderUploadArea = props.renderUploadArea,
+      renderFileList = props.renderFileList;
+  var domRef = useRef(null);
+  var fileRef = useRef(null);
+  var cacheRef = useLatestRef(files);
+  var uploadFunc = new Upload(props, fileRef, cacheRef);
+  useImperativeHandle(ref, function () {
+    return {
+      dom: domRef.current
+    };
+  });
+
+  var uploaderSelect = function uploaderSelect(prefixCls, locale) {
+    var showSelect = files.length < (limit || Infinity);
+    return (showSelect || alwaysShowSelect) && /*#__PURE__*/React.createElement("div", {
+      className: prefixCls + "-uploader-add",
+      onClick: uploadFunc.handleSelect
+    }, /*#__PURE__*/React.createElement("input", {
+      type: "file",
+      accept: accept,
+      capture: capture,
+      onChange: function onChange(e) {
+        return uploadFunc.handleChange(e);
+      },
+      multiple: multiple,
+      ref: fileRef
+    }), renderUploadArea && renderUploadArea() || /*#__PURE__*/React.createElement(Button, {
+      className: prefixCls + "-uploader-add-button",
+      size: "medium",
+      icon: /*#__PURE__*/React.createElement(IconUpload, null),
+      disabled: disabled
+    }, locale.Uploader.uploadBtn));
+  };
+
+  var getUploadList = function getUploadList(prefixCls, locale) {
+    var generateItemArea = function generateItemArea(fileItem, index, render, part, defaultArea) {
+      if (render) {
+        var node = render(fileItem, index);
+        return node ? /*#__PURE__*/React.createElement("div", {
+          className: prefixCls + "-uploader-list-item-" + part
+        }, node) : node;
+      }
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: prefixCls + "-uploader-list-item-" + part
+      }, defaultArea);
+    };
+
+    return renderFileList && renderFileList({
+      retryUpload: uploadFunc.retryUpload,
+      deleteFile: uploadFunc.deleteFile
+    }) || /*#__PURE__*/React.createElement("div", {
+      className: prefixCls + "-uploader-list"
+    }, (limit && limit < files.length ? files.slice(0, limit) : files).map(function (fileItem, index) {
+      var _cls, _cls2;
+
+      var file = fileItem.file,
+          status = fileItem.status;
+      return /*#__PURE__*/React.createElement("div", {
+        className: prefixCls + "-uploader-list-item",
+        key: index,
+        onClick: function onClick(e) {
+          return uploadFunc.handleClick(e, fileItem, index);
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: prefixCls + "-uploader-list-item-container"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: prefixCls + "-uploader-list-item-wrapper"
+      }, generateItemArea(fileItem, index, renderFileIndexArea, 'file', /*#__PURE__*/React.createElement(IconFile, {
+        className: prefixCls + "-uploader-list-item-file-icon"
+      })), /*#__PURE__*/React.createElement("div", {
+        className: cls(prefixCls + "-uploader-list-item-text", (_cls = {}, _cls[prefixCls + "-uploader-list-item-text-error"] = status === 'error', _cls))
+      }, file.name)), !hideStatus && /*#__PURE__*/React.createElement("div", {
+        className: prefixCls + "-uploader-list-item-status"
+      }, status === 'loaded' && generateItemArea(fileItem, index, renderLoadedArea, 'loaded', /*#__PURE__*/React.createElement(IconCheck, null)), status === 'loading' && generateItemArea(fileItem, index, renderLoadingArea, 'loading', /*#__PURE__*/React.createElement(Loading, {
+        type: "circle",
+        radius: 7
+      })), status === 'error' && /*#__PURE__*/React.createElement("div", {
+        onClick: function onClick() {
+          return uploadFunc.retryUpload(index);
+        }
+      }, generateItemArea(fileItem, index, renderErrorArea, 'error', /*#__PURE__*/React.createElement("span", null, locale.Uploader.retryUpload))))), /*#__PURE__*/React.createElement("div", {
+        className: prefixCls + "-uploader-list-item-delete",
+        onClick: function onClick() {
+          return uploadFunc.deleteFile(index);
+        }
+      }, renderDeleteArea && renderDeleteArea(fileItem, index) || /*#__PURE__*/React.createElement(IconDelete, {
+        className: cls(prefixCls + "-uploader-list-item-delete-icon", (_cls2 = {}, _cls2[prefixCls + "-uploader-list-item-delete-icon-disabled"] = disabled, _cls2))
+      })));
+    }));
+  };
+
+  return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref) {
+    var _cls3;
+
+    var prefixCls = _ref.prefixCls,
+        _ref$locale = _ref.locale,
+        locale = _ref$locale === void 0 ? defaultLocale : _ref$locale;
+    return /*#__PURE__*/React.createElement("div", {
+      className: cls(prefixCls + "-uploader", className, (_cls3 = {}, _cls3[prefixCls + "-uploader-disabled"] = disabled, _cls3)),
+      style: style,
+      ref: domRef
+    }, /*#__PURE__*/React.createElement("div", {
+      className: prefixCls + "-uploader-container"
+    }, uploaderSelect(prefixCls, locale), getUploadList(prefixCls, locale)));
+  });
+});
+/**
+ * 文件上传组件
+ * @en Uploader Component
+ * @type 数据录入
+ * @type_en Data Entry
+ * @name 文件上传
+ * @name_en Uploader
+ * @displayName Uploader
+ */
+
+export default componentWrapper(Uploader, 'Uploader');