@arco-design/mobile-react 2.30.9 → 2.31.0

package/cjs/picker-view/index.js

@@ -45,6 +45,14 @@ 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 isArray = function isArray(dt) {
+  return dt ? Array.isArray(dt[0]) : false;
+};
+
+var isStrOrNum = function isStrOrNum(dt) {
+  return typeof dt[0][0] === 'string' || typeof dt[0][0] === 'number';
+};
+
 var PickerView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _props$className = props.className,
       className = _props$className === void 0 ? '' : _props$className,
@@ -94,14 +102,6 @@ var PickerView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var innerData = (0, _react.useMemo)(function () {
     var newData;
 
-    var isArray = function isArray(dt) {
-      return dt ? Array.isArray(dt[0]) : false;
-    };
-
-    var isStrOrNum = function isStrOrNum(dt) {
-      return typeof dt[0][0] === 'string' || typeof dt[0][0] === 'number';
-    };
-
     if (isArray(data)) {
       if (isStrOrNum(data)) {
         newData = data.map(function (item) {
@@ -135,6 +135,17 @@ var PickerView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     });
   };
 
+  var getAllColumnData = function getAllColumnData() {
+    var _cascaderRef$current2;
+
+    var curValues = cascade ? ((_cascaderRef$current2 = cascaderRef.current) == null ? void 0 : _cascaderRef$current2.getAllCellsData()) || [] : pickerCellsRef.current.map(function (cell) {
+      return cell.getCurrentCellData();
+    });
+    return curValues.filter(function (v) {
+      return v !== undefined;
+    });
+  };
+
   function getColumnValue(index) {
     if (index === void 0) {
       index = 0;
@@ -144,18 +155,18 @@ var PickerView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }
 
   function getCellMovingStatus() {
-    var _cascaderRef$current2;
+    var _cascaderRef$current3;
 
-    return cascade ? ((_cascaderRef$current2 = cascaderRef.current) == null ? void 0 : _cascaderRef$current2.getCellMovingStatus()) || [] : pickerCellsRef.current.map(function (cell) {
+    return cascade ? ((_cascaderRef$current3 = cascaderRef.current) == null ? void 0 : _cascaderRef$current3.getCellMovingStatus()) || [] : pickerCellsRef.current.map(function (cell) {
       return cell.movingStatus;
     });
   }
 
   function scrollToCurrentIndex() {
     if (cascade) {
-      var _cascaderRef$current3;
+      var _cascaderRef$current4;
 
-      (_cascaderRef$current3 = cascaderRef.current) == null ? void 0 : _cascaderRef$current3.scrollToCurrentIndex();
+      (_cascaderRef$current4 = cascaderRef.current) == null ? void 0 : _cascaderRef$current4.scrollToCurrentIndex();
       return;
     }
 
@@ -172,7 +183,8 @@ var PickerView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       getColumnValue: getColumnValue,
       updateLayout: updateLayout,
       resetValue: resetValue,
-      scrollToCurrentIndex: scrollToCurrentIndex
+      scrollToCurrentIndex: scrollToCurrentIndex,
+      getAllColumnData: getAllColumnData
     };
   });
 

package/cjs/style.d.ts

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

package/cjs/style.js

@@ -116,4 +116,6 @@ require("./textarea/style");
 
 require("./toast/style");
 
-require("./transition/style");
+require("./transition/style");
+
+require("./uploader/style");

package/cjs/tabs/tab-cell.js

@@ -90,14 +90,18 @@ var TabCell = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return tabs.length < overflowThreshold ? tabBarArrange : 'start';
   }),
       originArrange = _useState3[0],
-      setOriginArrange = _useState3[1]; // 默认tab小于overflowThreshold个时不开启加载前隐藏，大于overflowThreshold个时开启
+      setOriginArrange = _useState3[1];
 
+  var _useState4 = (0, _react.useState)(false),
+      forceUpdate = _useState4[0],
+      setForceUpdate = _useState4[1]; // 默认tab小于overflowThreshold个时不开启加载前隐藏，大于overflowThreshold个时开启
 
-  var _useState4 = (0, _react.useState)(function () {
+
+  var _useState5 = (0, _react.useState)(function () {
     return hideTabBarBeforeMounted === void 0 ? tabs.length < overflowThreshold || activeIndex === 0 : !hideTabBarBeforeMounted;
   }),
-      showTab = _useState4[0],
-      setShowTab = _useState4[1];
+      showTab = _useState5[0],
+      setShowTab = _useState5[1];
 
   var isVertical = tabDirection === 'vertical';
   var isLine = (type || '').indexOf('line') !== -1;
@@ -112,6 +116,15 @@ var TabCell = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var hasDivider = tabBarHasDivider === void 0 ? isLine : tabBarHasDivider;
   var wrapSize = isVertical ? wrapWidth : wrapHeight;
   var system = (0, _helpers.useSystem)();
+
+  var updateScrollPosition = function updateScrollPosition() {
+    if (wrapSize && tabBarScrollChance !== 'none') {
+      setTimeout(function () {
+        scrollToCenter();
+      }, tabBarScrollChance === 'after-jump' ? Math.max(transitionDuration || 0, duration || 0) : 0);
+    }
+  };
+
   (0, _react.useEffect)(function () {
     (0, _mobileUtils.nextTick)(function () {
       setCellOverflow(); // dom出来之后originArrange置空，交由tabBarArrange控制
@@ -131,31 +144,16 @@ var TabCell = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       (_underlineRef$current = underlineRef.current) == null ? void 0 : _underlineRef$current.resetUnderlineStyle();
     });
   }, [activeIndex, tabs, getCellPadding('left'), getCellPadding('right'), tabBarGutter, tabDirection]);
-  (0, _react.useImperativeHandle)(ref, function () {
-    return {
-      dom: domRef.current,
-      scrollTo: scrollTo,
-      scrollToCenter: scrollToCenter,
-      hasOverflow: hasOverflow,
-      setCaterpillarAnimate: function setCaterpillarAnimate(ratio) {
-        var _underlineRef$current2;
-
-        return (_underlineRef$current2 = underlineRef.current) == null ? void 0 : _underlineRef$current2.setCaterpillarAnimate(ratio);
-      },
-      resetUnderlineStyle: function resetUnderlineStyle() {
-        var _underlineRef$current3;
-
-        return (_underlineRef$current3 = underlineRef.current) == null ? void 0 : _underlineRef$current3.resetUnderlineStyle();
-      }
-    };
-  }, [scrollToCenter, scrollTo, hasOverflow]);
   (0, _react.useEffect)(function () {
-    if (wrapSize && tabBarScrollChance !== 'none') {
-      setTimeout(function () {
-        scrollToCenter();
-      }, tabBarScrollChance === 'after-jump' ? Math.max(transitionDuration || 0, duration || 0) : 0);
-    }
+    updateScrollPosition();
   }, [activeIndex, wrapSize]);
+  (0, _helpers.useUpdateEffect)(function () {
+    var _underlineRef$current2;
+
+    setCellOverflow();
+    (_underlineRef$current2 = underlineRef.current) == null ? void 0 : _underlineRef$current2.resetUnderlineStyle();
+    updateScrollPosition();
+  }, [forceUpdate]);
   (0, _react.useEffect)(function () {
     tabBarScrollChance !== 'none' && scrollToCenter(true); // TabCell左右可滚动时，防止触发父级touchmove事件导致滚不动
     // @en When the TabCell can be scrolled left and right, prevent the parent touchmove event from being triggered which result in inability to scroll
@@ -296,7 +294,7 @@ var TabCell = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return typeof tab === 'string' ? tab : tab.title;
   }
 
-  function renderTabUnderline() {
+  var renderTabUnderline = function renderTabUnderline() {
     if (!showUnderline || !isLine) {
       return null;
     }
@@ -327,7 +325,7 @@ var TabCell = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       getTabCenterLeft: getTabCenterLeft,
       getTabRect: getTabRect
     }, lineProps));
-  }
+  };
 
   var cellInner = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, tabs.map(function (tab, index) {
     return /*#__PURE__*/_react.default.createElement("div", {
@@ -370,6 +368,33 @@ var TabCell = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }
   }) : null);
 
+  var _updateLayout = function updateLayout() {
+    setForceUpdate(function (val) {
+      return !val;
+    });
+  };
+
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      dom: domRef.current,
+      scrollTo: scrollTo,
+      scrollToCenter: scrollToCenter,
+      hasOverflow: hasOverflow,
+      setCaterpillarAnimate: function setCaterpillarAnimate(ratio) {
+        var _underlineRef$current3;
+
+        return (_underlineRef$current3 = underlineRef.current) == null ? void 0 : _underlineRef$current3.setCaterpillarAnimate(ratio);
+      },
+      resetUnderlineStyle: function resetUnderlineStyle() {
+        var _underlineRef$current4;
+
+        return (_underlineRef$current4 = underlineRef.current) == null ? void 0 : _underlineRef$current4.resetUnderlineStyle();
+      },
+      updateLayout: function updateLayout() {
+        return _updateLayout();
+      }
+    };
+  }, [scrollToCenter, scrollTo, hasOverflow]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _mobileUtils.cls)(prefix + "-container-wrap", tabDirection, "type-" + type, tabBarClass, system),
     style: tabBarStyle

package/cjs/tabs/type.d.ts

@@ -565,6 +565,11 @@ export interface TabCellRef {
      * @en Recalculate underline style
      */
     resetUnderlineStyle: () => void;
+    /**
+     * 强制更新 tab-cell
+     * @en Force update tab-cell
+     */
+    updateLayout: () => void;
 }
 export interface TabPaneProps extends Pick<TabsProps, 'duration' | 'transitionDuration' | 'lazyloadCount' | 'hideContentStyle' | 'renderHideContent' | 'mode' | 'tabPaneClass' | 'tabPaneStyle' | 'tabPaneExtra' | 'getScrollContainer' | 'scrollThrottle' | 'scrollOffset' | 'goLastWhenScrollBottom' | 'scrollVertical' | 'translateZ' | 'fullScreen' | 'autoHeight' | 'onScroll' | 'swipeEnergySaving'> {
     prefixCls?: string;

package/cjs/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/cjs/uploader/index.js

@@ -0,0 +1,180 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+var _exportNames = {};
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _mobileUtils = require("@arco-design/mobile-utils");
+
+var _contextProvider = require("../context-provider");
+
+var _button = _interopRequireDefault(require("../button"));
+
+var _helpers = require("../_helpers");
+
+var _icon = require("../icon");
+
+var _loading = _interopRequireDefault(require("../loading"));
+
+var _upload = require("./upload");
+
+var _type = require("./type");
+
+Object.keys(_type).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _type[key]) return;
+  exports[key] = _type[key];
+});
+
+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); }
+
+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 Uploader = /*#__PURE__*/(0, _react.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 = (0, _react.useRef)(null);
+  var fileRef = (0, _react.useRef)(null);
+  var cacheRef = (0, _helpers.useLatestRef)(files);
+  var uploadFunc = new _upload.Upload(props, fileRef, cacheRef);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      dom: domRef.current
+    };
+  });
+
+  var uploaderSelect = function uploaderSelect(prefixCls, locale) {
+    var showSelect = files.length < (limit || Infinity);
+    return (showSelect || alwaysShowSelect) && /*#__PURE__*/_react.default.createElement("div", {
+      className: prefixCls + "-uploader-add",
+      onClick: uploadFunc.handleSelect
+    }, /*#__PURE__*/_react.default.createElement("input", {
+      type: "file",
+      accept: accept,
+      capture: capture,
+      onChange: function onChange(e) {
+        return uploadFunc.handleChange(e);
+      },
+      multiple: multiple,
+      ref: fileRef
+    }), renderUploadArea && renderUploadArea() || /*#__PURE__*/_react.default.createElement(_button.default, {
+      className: prefixCls + "-uploader-add-button",
+      size: "medium",
+      icon: /*#__PURE__*/_react.default.createElement(_icon.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.default.createElement("div", {
+          className: prefixCls + "-uploader-list-item-" + part
+        }, node) : node;
+      }
+
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: prefixCls + "-uploader-list-item-" + part
+      }, defaultArea);
+    };
+
+    return renderFileList && renderFileList({
+      retryUpload: uploadFunc.retryUpload,
+      deleteFile: uploadFunc.deleteFile
+    }) || /*#__PURE__*/_react.default.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.default.createElement("div", {
+        className: prefixCls + "-uploader-list-item",
+        key: index,
+        onClick: function onClick(e) {
+          return uploadFunc.handleClick(e, fileItem, index);
+        }
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: prefixCls + "-uploader-list-item-container"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: prefixCls + "-uploader-list-item-wrapper"
+      }, generateItemArea(fileItem, index, renderFileIndexArea, 'file', /*#__PURE__*/_react.default.createElement(_icon.IconFile, {
+        className: prefixCls + "-uploader-list-item-file-icon"
+      })), /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _mobileUtils.cls)(prefixCls + "-uploader-list-item-text", (_cls = {}, _cls[prefixCls + "-uploader-list-item-text-error"] = status === 'error', _cls))
+      }, file.name)), !hideStatus && /*#__PURE__*/_react.default.createElement("div", {
+        className: prefixCls + "-uploader-list-item-status"
+      }, status === 'loaded' && generateItemArea(fileItem, index, renderLoadedArea, 'loaded', /*#__PURE__*/_react.default.createElement(_icon.IconCheck, null)), status === 'loading' && generateItemArea(fileItem, index, renderLoadingArea, 'loading', /*#__PURE__*/_react.default.createElement(_loading.default, {
+        type: "circle",
+        radius: 7
+      })), status === 'error' && /*#__PURE__*/_react.default.createElement("div", {
+        onClick: function onClick() {
+          return uploadFunc.retryUpload(index);
+        }
+      }, generateItemArea(fileItem, index, renderErrorArea, 'error', /*#__PURE__*/_react.default.createElement("span", null, locale.Uploader.retryUpload))))), /*#__PURE__*/_react.default.createElement("div", {
+        className: prefixCls + "-uploader-list-item-delete",
+        onClick: function onClick() {
+          return uploadFunc.deleteFile(index);
+        }
+      }, renderDeleteArea && renderDeleteArea(fileItem, index) || /*#__PURE__*/_react.default.createElement(_icon.IconDelete, {
+        className: (0, _mobileUtils.cls)(prefixCls + "-uploader-list-item-delete-icon", (_cls2 = {}, _cls2[prefixCls + "-uploader-list-item-delete-icon-disabled"] = disabled, _cls2))
+      })));
+    }));
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref) {
+    var _cls3;
+
+    var prefixCls = _ref.prefixCls,
+        _ref$locale = _ref.locale,
+        locale = _ref$locale === void 0 ? _mobileUtils.defaultLocale : _ref$locale;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _mobileUtils.cls)(prefixCls + "-uploader", className, (_cls3 = {}, _cls3[prefixCls + "-uploader-disabled"] = disabled, _cls3)),
+      style: style,
+      ref: domRef
+    }, /*#__PURE__*/_react.default.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
+ */
+
+var _default = (0, _mobileUtils.componentWrapper)(Uploader, 'Uploader');
+
+exports.default = _default;