@arco-design/mobile-react 2.19.1 → 2.21.0

package/esm/dropdown-menu/index.d.ts

@@ -1,5 +1,4 @@
-import React from 'react';
-import { DropdownMenuRef } from './type';
+/// <reference types="react" />
 export * from './type';
 /**
  * 下拉选择组件，点击选择器(select)展开下拉框(dropdown)，展示选择项(options)，兼容多个选择器的情况。
@@ -9,5 +8,5 @@ export * from './type';
  * @name 下拉选择菜单
  * @name_en DropdownMenu
  */
-declare const DropdownMenu: React.ForwardRefExoticComponent<(import("./type").DropdownMenuBasicProps & import("./type").SingleOptionProps & React.RefAttributes<DropdownMenuRef>) | (import("./type").DropdownMenuBasicProps & import("./type").MultipleOptionProps & React.RefAttributes<DropdownMenuRef>)>;
+declare const DropdownMenu: import("react").ForwardRefExoticComponent<(import("./type").DropdownMenuBasicProps & import("./type").SingleOptionProps & import("react").RefAttributes<import("./type").DropdownMenuRef>) | (import("./type").DropdownMenuBasicProps & import("./type").MultipleOptionProps & import("react").RefAttributes<import("./type").DropdownMenuRef>)>;
 export default DropdownMenu;

package/esm/dropdown-menu/index.js

@@ -1,10 +1,5 @@
-import _extends from "@babel/runtime/helpers/extends";
-import React, { useRef, useState, forwardRef, useImperativeHandle, useMemo, useCallback, useEffect, useContext } from 'react';
-import { cls } from '@arco-design/mobile-utils';
-import { GlobalContext } from '../context-provider';
-import { getFormattedOptions as defaultFormatFunc, isCascadeArray, isClassNameDom, isRefDom } from './helper';
+import { componentGenerator } from './dropdown-menu';
 import Dropdown from '../dropdown';
-import IconTriDown from '../icon/IconTriDown';
 export * from './type';
 /**
  * 下拉选择组件，点击选择器(select)展开下拉框(dropdown)，展示选择项(options)，兼容多个选择器的情况。
@@ -15,235 +10,5 @@ export * from './type';
  * @name_en DropdownMenu
  */
 
-var DropdownMenu = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _props$className = props.className,
-      className = _props$className === void 0 ? '' : _props$className,
-      _props$style = props.style,
-      style = _props$style === void 0 ? {} : _props$style,
-      _props$options = props.options,
-      options = _props$options === void 0 ? [] : _props$options,
-      _props$disabled = props.disabled,
-      disabled = _props$disabled === void 0 ? [] : _props$disabled,
-      _props$selectTips = props.selectTips,
-      selectTips = _props$selectTips === void 0 ? [] : _props$selectTips,
-      values = props.values,
-      _props$defaultValues = props.defaultValues,
-      defaultValues = _props$defaultValues === void 0 ? [] : _props$defaultValues,
-      icon = props.icon,
-      _props$chooseAndClose = props.chooseAndClose,
-      chooseAndClose = _props$chooseAndClose === void 0 ? true : _props$chooseAndClose,
-      selectIndex = props.selectIndex,
-      _props$defaultSelectI = props.defaultSelectIndex,
-      defaultSelectIndex = _props$defaultSelectI === void 0 ? 0 : _props$defaultSelectI,
-      showDropdown = props.showDropdown,
-      _props$defaultShowDro = props.defaultShowDropdown,
-      defaultShowDropdown = _props$defaultShowDro === void 0 ? false : _props$defaultShowDro,
-      renderSelectLabel = props.renderSelectLabel,
-      onValuesChange = props.onValuesChange,
-      onSelectChange = props.onSelectChange,
-      onDropdownChange = props.onDropdownChange,
-      _props$getFormattedOp = props.getFormattedOptions,
-      getFormattedOptions = _props$getFormattedOp === void 0 ? defaultFormatFunc : _props$getFormattedOp,
-      children = props.children,
-      extraForDropdown = props.extraForDropdown;
-
-  var _useContext = useContext(GlobalContext),
-      prefixCls = _useContext.prefixCls,
-      locale = _useContext.locale;
-
-  var _useState = useState(defaultValues),
-      innerValues = _useState[0],
-      setInnerValues = _useState[1];
-
-  var _useState2 = useState(0),
-      defaultTop = _useState2[0],
-      setDefaultTop = _useState2[1];
-
-  var currentValues = values !== void 0 ? values : innerValues;
-
-  var _useState3 = useState(defaultShowDropdown),
-      innerShowDropdown = _useState3[0],
-      setInnerShowDropdown = _useState3[1];
-
-  var dropdownShown = showDropdown !== void 0 ? showDropdown : innerShowDropdown;
-
-  var _useState4 = useState(defaultSelectIndex),
-      innerSelectedIndex = _useState4[0],
-      setInnerSelectedIndex = _useState4[1];
-
-  var selectedIndex = selectIndex !== void 0 ? selectIndex : innerSelectedIndex;
-  var selectWrapper = useRef(null);
-  var domRef = useRef(null);
-  var defaultOpItem = {
-    label: locale == null ? void 0 : locale.DropdownMenu.select,
-    value: -1
-  };
-  /**
-   * 下拉框的容器
-   * @en Dropdown container
-   */
-
-  var getContainer = useCallback(function () {
-    if (props.getContainer) {
-      return props.getContainer() || selectWrapper.current;
-    }
-
-    return selectWrapper.current;
-  }, [selectWrapper.current]);
-  /**
-   * 更新选项数组和选择情况
-   * @en Update options list and selection
-   */
-
-  var _useMemo = useMemo(function () {
-    return getFormattedOptions(options, currentValues);
-  }, [options, currentValues]),
-      formattedOptions = _useMemo.formattedOptions;
-
-  var selectedOptions = useMemo(function () {
-    return formattedOptions.map(function (ops, index) {
-      return ops.find(function (op) {
-        var value = currentValues[index];
-        return Array.isArray(value) ? value.includes(op.value) : op.value === value;
-      }) || (props.multiple ? defaultOpItem : ops[0]);
-    });
-  }, [formattedOptions, currentValues]);
-  /**
-   * 当下拉框的状态变化
-   * @en When the state of the dropdown box changes
-   */
-
-  var handleShowDropdownChange = function handleShowDropdownChange(show, index) {
-    onDropdownChange && onDropdownChange(show, index);
-    setInnerShowDropdown(show);
-  };
-
-  var handleSelectedIndexChange = function handleSelectedIndexChange(idx) {
-    setInnerSelectedIndex(idx);
-    onSelectChange == null ? void 0 : onSelectChange(idx);
-  };
-
-  var handleValuesChange = function handleValuesChange(val) {
-    var newValue = [].concat(currentValues); // 级联情况下 selectedIndex 之后的选项值重置
-    // @en Option values are reset after selectedIndex in case of cascade
-
-    if (isCascadeArray(options)) {
-      newValue = newValue.slice(0, selectedIndex);
-    }
-
-    newValue[selectedIndex] = val;
-    newValue = getFormattedOptions(options, newValue).formattedValue;
-    setInnerValues(newValue);
-    onValuesChange == null ? void 0 : onValuesChange(newValue);
-  };
-  /**
-   * 处理选择框的点击事件
-   * @en Handle click event of dropdown box
-   */
-
-
-  var handleSelectClick = function handleSelectClick(idx) {
-    if (disabled[idx]) return;
-
-    if (Number(idx) === selectedIndex) {
-      handleShowDropdownChange(!dropdownShown, idx);
-    } else {
-      handleSelectedIndexChange(idx);
-      if (!dropdownShown) handleShowDropdownChange(true, idx);
-    }
-  };
-  /**
-   * 判断是否为当前实例下的选择框
-   * @en Determine whether it is the dropdown box under the current instance
-   */
-
-
-  var isCurrentSelectEl = function isCurrentSelectEl(target) {
-    var _ref = extraForDropdown || {},
-        isStopTouchEl = _ref.isStopTouchEl;
-
-    return isRefDom(target, selectWrapper) && isClassNameDom(target, 'select-item') || (isStopTouchEl == null ? void 0 : isStopTouchEl(target)) || false;
-  };
-
-  useImperativeHandle(ref, function () {
-    return {
-      dom: domRef.current
-    };
-  });
-  useEffect(function () {
-    var _getContainer;
-
-    setDefaultTop(((_getContainer = getContainer()) == null ? void 0 : _getContainer.getBoundingClientRect().bottom) || 0);
-  }, [getContainer, dropdownShown]);
-
-  var onCancel = props.onCancel || function () {
-    return handleShowDropdownChange(false);
-  };
-
-  var dropdownCommonProps = _extends({
-    showDropdown: dropdownShown,
-    top: (extraForDropdown == null ? void 0 : extraForDropdown.top) || defaultTop,
-    onCancel: onCancel
-  }, extraForDropdown || {}, {
-    isStopTouchEl: isCurrentSelectEl
-  });
-
-  return /*#__PURE__*/React.createElement("div", {
-    ref: domRef,
-    className: cls(prefixCls + "-dropdown-menu all-border-box " + (dropdownShown ? 'show' : ''), className),
-    style: style
-  }, /*#__PURE__*/React.createElement("div", {
-    className: cls(prefixCls + "-select"),
-    ref: selectWrapper
-  }, selectedOptions.map(function (op, index) {
-    var tip = selectTips[index] || '';
-    return /*#__PURE__*/React.createElement("div", {
-      className: cls(prefixCls + "-select-item", {
-        'is-disabled': disabled[index],
-        'is-selected': dropdownShown && selectedIndex === index
-      }),
-      key: index,
-      "data-idx": index,
-      onClick: function onClick() {
-        return handleSelectClick(index);
-      }
-    }, tip.length > 0 && /*#__PURE__*/React.createElement("span", {
-      className: cls(prefixCls + "-select-item-tip")
-    }, tip), /*#__PURE__*/React.createElement("div", {
-      className: cls(prefixCls + "-select-item-label")
-    }, renderSelectLabel ? renderSelectLabel(op, index) : /*#__PURE__*/React.createElement("div", {
-      className: cls(prefixCls + "-select-item-label-text")
-    }, op.label), icon === void 0 ? /*#__PURE__*/React.createElement(IconTriDown, {
-      className: cls(prefixCls + "-select-item-icon", {
-        'is-show': dropdownShown && selectedIndex === index
-      })
-    }) : icon));
-  }), props.multiple === true ? /*#__PURE__*/React.createElement(Dropdown, _extends({
-    multiple: true,
-    options: formattedOptions[selectedIndex] || [],
-    selectedValue: currentValues[selectedIndex] || [],
-    onOptionClick: function onOptionClick(selected, val, op) {
-      props.onOptionClick == null ? void 0 : props.onOptionClick(selected, val, op, selectedIndex);
-    },
-    onOptionChange: function onOptionChange(val, op) {
-      props.onOptionChange == null ? void 0 : props.onOptionChange(val, op, selectedIndex);
-      handleValuesChange(val);
-    }
-  }, dropdownCommonProps), children) : /*#__PURE__*/React.createElement(Dropdown, _extends({
-    multiple: props.multiple,
-    options: formattedOptions[selectedIndex] || [],
-    selectedValue: currentValues[selectedIndex] || 0,
-    onOptionClick: function onOptionClick(val, op) {
-      props.onOptionClick == null ? void 0 : props.onOptionClick(val, op, selectedIndex);
-
-      if (chooseAndClose) {
-        handleShowDropdownChange(false, selectedIndex);
-      }
-    },
-    onOptionChange: function onOptionChange(val, op) {
-      props.onOptionChange == null ? void 0 : props.onOptionChange(val, op, selectedIndex);
-      handleValuesChange(val);
-    }
-  }, dropdownCommonProps), children)));
-});
+var DropdownMenu = componentGenerator(Dropdown);
 export default DropdownMenu;

package/esm/dropdown-menu/type.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactNode } from 'react';
-import { OptionsItem, DropdownCommonProps } from '../dropdown';
+import { OptionsItem, DropdownCommonProps, OptionValueType } from '../dropdown';
 export type { OptionsItem, DropdownCommonProps };
 export interface CascadeOptions extends OptionsItem {
     /**
@@ -29,11 +29,6 @@ export interface DropdownMenuBasicProps {
      * @en The selected number of selector (controlled)
      */
     selectIndex?: number;
-    /**
-     * 自定义选择器
-     * @en Custom selector
-     */
-    renderSelectLabel?: (op: OptionsItem, index: number) => ReactNode;
     /**
      * 选择器禁用状态
      * @en Selector disabled state
@@ -112,47 +107,53 @@ export interface SingleOptionProps {
      * 初始选择项
      * @en initial selection item
      *  */
-    defaultValues?: number[];
+    defaultValues?: OptionValueType[];
     /**
      * (受控) 每个选择器选中的项
      * @en (Controlled) The item selected by each selector
      *  */
-    values?: number[];
+    values?: OptionValueType[];
+    /**
+     * 自定义选择器
+     * @en Custom selector
+     */
+    renderSelectLabel?: (op: OptionsItem, index: number) => ReactNode;
     /**
      * 点击选项时触发的回调函数
      * @en Callback when clicking option
      *  */
-    onOptionClick?: (value: number, item: OptionsItem, selectIndex?: number) => void;
+    onOptionClick?: (value: OptionValueType, item: OptionsItem, selectIndex?: number) => void;
     /**
      * 选项改变时触发的回调函数
      * @en Callback when options change
      *  */
-    onOptionChange?: (value: number, item: OptionsItem, selectIndex?: number) => void;
+    onOptionChange?: (value: OptionValueType, item: OptionsItem, selectIndex?: number) => void;
     /**
      * 所有选择器选项总值改变时的回调函数
      * @en Callback when the total value of all selector options changes
      *  */
-    onValuesChange?: (values: number[]) => void;
+    onValuesChange?: (values: OptionValueType[]) => void;
     /**
      * 格式化传入的options
      * @en Format the input options
      *  */
-    getFormattedOptions?: (options: SingleOptionProps['options'], values?: number[]) => {
+    getFormattedOptions?: (options: SingleOptionProps['options'], values?: OptionValueType[]) => {
         formattedOptions: OptionsItem[][];
-        formattedValue: number[];
+        formattedValue: OptionValueType[];
     };
 }
 export interface MultipleOptionProps {
     multiple: true;
     options: string[] | OptionsItem[][];
-    defaultValues?: number[][];
-    values?: number[][];
-    onOptionClick?: (selected: boolean, val: number, item: OptionsItem, selectIndex?: number) => void;
-    onOptionChange?: (vals: number[], item: OptionsItem, selectIndex?: number) => void;
-    onValuesChange?: (values: number[][]) => void;
-    getFormattedOptions?: (options: SingleOptionProps['options'], values?: number[][]) => {
+    defaultValues?: OptionValueType[][];
+    values?: OptionValueType[][];
+    renderSelectLabel?: (op: OptionsItem[], index: number) => ReactNode;
+    onOptionClick?: (selected: boolean, val: OptionValueType, item: OptionsItem, selectIndex?: number) => void;
+    onOptionChange?: (vals: OptionValueType[], item: OptionsItem, selectIndex?: number) => void;
+    onValuesChange?: (values: OptionValueType[][]) => void;
+    getFormattedOptions?: (options: SingleOptionProps['options'], values?: OptionValueType[][]) => {
         formattedOptions: OptionsItem[][];
-        formattedValue: number[][];
+        formattedValue: OptionValueType[][];
     };
 }
 export declare type OptionProps = SingleOptionProps | MultipleOptionProps;

package/esm/ellipsis/index.d.ts

@@ -4,7 +4,7 @@ export * from './type';
 /**
  * 文本缩略组件，支持多行缩略、富文本、自定义缩略符、尾字符过滤等。
  * @en Text ellipsis component supports multi-line abbreviations, rich text, custom abbreviations, tail character filtering, etc.
- * @type 数据展示
+ * @type 信息展示
  * @type_en Data Display
  * @name 文本缩略
  * @name_en Ellipsis

package/esm/ellipsis/index.js

@@ -8,7 +8,7 @@ export * from './type';
 /**
  * 文本缩略组件，支持多行缩略、富文本、自定义缩略符、尾字符过滤等。
  * @en Text ellipsis component supports multi-line abbreviations, rich text, custom abbreviations, tail character filtering, etc.
- * @type 数据展示
+ * @type 信息展示
  * @type_en Data Display
  * @name 文本缩略
  * @name_en Ellipsis

package/esm/grid/index.js

@@ -36,14 +36,21 @@ var Grid = /*#__PURE__*/forwardRef(function (props, ref) {
   });
 
   var getRows = function getRows(prefix, rowsData, rows, row) {
-    var fakeGrids = new Array(!isSliding && columns && rowsData.length % columns ? columns - rowsData.length % columns : 0).fill('');
-    var widthStyle = {
-      minWidth: 1 / columns * 100 + "%"
-    };
+    var placeholders = !isSliding && rowsData.length % columns;
+    var renderData = rowsData;
+
+    if (placeholders) {
+      var fakeGrids = new Array(columns - placeholders).fill({
+        img: null,
+        title: ''
+      });
+      renderData = rowsData.concat(fakeGrids);
+    }
+
     return /*#__PURE__*/React.createElement("div", {
       className: prefix + "-rows",
       key: row
-    }, rowsData.map(function (item, index) {
+    }, renderData.map(function (item, index) {
       var img = item.img,
           title = item.title,
           content = item.content,
@@ -57,7 +64,7 @@ var Grid = /*#__PURE__*/forwardRef(function (props, ref) {
       }
 
       var marginBottom = row + 1 === rows ? 0 : typeof gutter === 'number' ? gutter : (gutter == null ? void 0 : gutter.y) || 0;
-      var rowLen = rowsData.length;
+      var rowLen = renderData.length;
       var marginRight = index + 1 === rowLen ? 0 : typeof gutter === 'number' ? gutter : (gutter == null ? void 0 : gutter.x) || 0;
       return /*#__PURE__*/React.createElement("div", {
         key: index,
@@ -86,12 +93,6 @@ var Grid = /*#__PURE__*/forwardRef(function (props, ref) {
       }) : null, (row + 1) % rows !== 0 ? /*#__PURE__*/React.createElement("i", {
         className: "horizontal-border"
       }) : null);
-    }), fakeGrids.map(function (_, i) {
-      return /*#__PURE__*/React.createElement("div", {
-        className: cls(prefix + "-rows-item fake-col"),
-        key: i,
-        style: widthStyle
-      });
     }));
   };
 

package/esm/image/index.d.ts

@@ -14,7 +14,6 @@ export interface ImageProps {
     /**
      * 指定图片状态，staticLabel=false时有效
      * @en The specified image state, valid when staticLabel=false
-     * @default "init"
      */
     status?: ImageStatus;
     /**
@@ -178,7 +177,7 @@ export interface ImageRef {
 /**
  * 增强版的 img 标签，提供多种图片填充模式，支持图片加载中提示、加载失败提示。
  * @en Enhanced img tag, provides a variety of image filling modes, and supports image loading prompts and loading failure prompts.
- * @type 数据展示
+ * @type 信息展示
  * @type_en Data Display
  * @name 图片
  * @name_en Image

package/esm/image/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { forwardRef, useImperativeHandle, useRef, useEffect, useMemo } from 'react';
-import { cls, handleUnit, nextTick } from '@arco-design/mobile-utils';
+import { cls, defaultLocale, handleUnit, nextTick } from '@arco-design/mobile-utils';
 import { ContextLayout } from '../context-provider';
 import Loading from '../loading';
 import { useSystem, useWindowSize, getStyleWithVendor, useMountedState } from '../_helpers';
@@ -8,7 +8,7 @@ import { useSystem, useWindowSize, getStyleWithVendor, useMountedState } from '.
 /**
  * 增强版的 img 标签，提供多种图片填充模式，支持图片加载中提示、加载失败提示。
  * @en Enhanced img tag, provides a variety of image filling modes, and supports image loading prompts and loading failure prompts.
- * @type 数据展示
+ * @type 信息展示
  * @type_en Data Display
  * @name 图片
  * @name_en Image
@@ -37,10 +37,10 @@ export var BaseImage = /*#__PURE__*/forwardRef(function (props, ref) {
   var wrapRef = useRef(null);
   var retryCountRef = useRef(0);
   var loadingImageRef = useRef(null);
+  var hasLoadedRef = useRef(false);
   var style = props.style,
       className = props.className,
-      _props$status = props.status,
-      status = _props$status === void 0 ? 'init' : _props$status,
+      status = props.status,
       src = props.src,
       width = props.width,
       height = props.height,
@@ -80,6 +80,7 @@ export var BaseImage = /*#__PURE__*/forwardRef(function (props, ref) {
   var isPreview = Boolean(fit.indexOf('preview') >= 0);
   var actualBoxWidth = boxWidth || windowWidth;
   var actualBoxHeight = boxHeight || windowHeight;
+  var validStatus = status === undefined ? imageStatus : status;
   var attrs = useMemo(function () {
     var imageStyle = {};
 
@@ -160,6 +161,7 @@ export var BaseImage = /*#__PURE__*/forwardRef(function (props, ref) {
     image.onload = function (evt) {
       loadingImageRef.current = null;
       imageDomRef.current = image;
+      hasLoadedRef.current = true;
       changeStatus('loaded');
       var _image$width = image.width,
           imageWidth = _image$width === void 0 ? 0 : _image$width,
@@ -255,7 +257,9 @@ export var BaseImage = /*#__PURE__*/forwardRef(function (props, ref) {
   }
 
   return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref) {
-    var prefixCls = _ref.prefixCls;
+    var prefixCls = _ref.prefixCls,
+        _ref$locale = _ref.locale,
+        locale = _ref$locale === void 0 ? defaultLocale : _ref$locale;
     return /*#__PURE__*/React.createElement("div", {
       className: cls(prefixCls + "-image all-border-box", {
         preview: isPreview
@@ -270,9 +274,10 @@ export var BaseImage = /*#__PURE__*/forwardRef(function (props, ref) {
     }, bottomOverlap || /*#__PURE__*/React.createElement("div", {
       className: "image-placeholder"
     })) : null, /*#__PURE__*/React.createElement("div", {
-      className: cls('image-container', imageStatus, {
+      className: cls('image-container', validStatus, {
         animate: Boolean(animateDuration),
-        'static-label': staticLabel
+        'static-label': staticLabel,
+        'has-loaded': hasLoadedRef.current
       }),
       style: getStyleWithVendor({
         transitionDuration: animateDuration + "ms"
@@ -285,7 +290,7 @@ export var BaseImage = /*#__PURE__*/forwardRef(function (props, ref) {
         return _onLoad && _onLoad(e.nativeEvent, imageDomRef.current);
       },
       onError: handleStaticImageError
-    })) : null), showLoading && (status === 'loading' || imageStatus === 'loading') ? /*#__PURE__*/React.createElement("div", {
+    })) : null), showLoading && validStatus === 'loading' ? /*#__PURE__*/React.createElement("div", {
       className: "image-content image-loading-container",
       style: {
         borderRadius: radius
@@ -297,7 +302,7 @@ export var BaseImage = /*#__PURE__*/forwardRef(function (props, ref) {
       className: "loading-icon",
       radius: 8.5,
       stroke: 3
-    }))) : null, showError && (status === 'error' || imageStatus === 'error') ? /*#__PURE__*/React.createElement("div", {
+    }))) : null, showError && validStatus === 'error' ? /*#__PURE__*/React.createElement("div", {
       className: "image-content image-error-container",
       onClick: function onClick(e) {
         e.stopPropagation();
@@ -308,7 +313,7 @@ export var BaseImage = /*#__PURE__*/forwardRef(function (props, ref) {
       }
     }, errorArea || /*#__PURE__*/React.createElement("div", {
       className: "image-retry-load"
-    }, "\u91CD\u8BD5")) : null, topOverlap ? /*#__PURE__*/React.createElement("div", {
+    }, locale.Image.loadError)) : null, topOverlap ? /*#__PURE__*/React.createElement("div", {
       className: "image-content image-top-overlap",
       style: {
         borderRadius: radius

package/esm/image/style/css/index.css

@@ -66,7 +66,8 @@
 }
 .arco-image .image-container.static-label,
 .arco-image .image-container.loaded,
-.arco-image .image-container.error {
+.arco-image .image-container.error,
+.arco-image .image-container.has-loaded {
   opacity: 1;
 }
 .arco-image .image-container.animate {

package/esm/image/style/index.less

@@ -66,7 +66,8 @@
 
         &.static-label,
         &.loaded,
-        &.error {
+        &.error,
+        &.has-loaded {
             opacity: 1;
         }
 

package/esm/image-picker/add-icon.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function AddIcon(): JSX.Element;

package/esm/image-picker/add-icon.js

@@ -0,0 +1,14 @@
+import React from 'react';
+export default function AddIcon() {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "30",
+    height: "30",
+    viewBox: "0 0 30 30",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M14.5 0C14.2239 0 14 0.223857 14 0.5V14H0.5C0.223858 14 0 14.2239 0 14.5V15.5C0 15.7761 0.223857 16 0.5 16H14V29.5C14 29.7761 14.2239 30 14.5 30H15.5C15.7761 30 16 29.7761 16 29.5V16H29.5C29.7761 16 30 15.7761 30 15.5V14.5C30 14.2239 29.7761 14 29.5 14H16V0.5C16 0.223858 15.7761 0 15.5 0H14.5Z",
+    fill: "#C9CDD4"
+  }));
+}

package/esm/image-picker/demo/style/css/mobile.css

@@ -0,0 +1,40 @@
+#demo-image-picker .demo-space {
+  font-size: 14px;
+  line-height: 1;
+  margin: 8px 0;
+}
+#demo-image-picker #demo-order-5 .custom-delete {
+  top: 4px;
+  right: 4px;
+  font-size: 18px;
+  position: absolute;
+  border-radius: 50%;
+  width: 18px;
+  height: 18px;
+  line-height: 16px;
+  text-align: center;
+}
+#demo-image-picker #demo-order-5 .custom-delete-bg {
+  background-color: #0000004d;
+}
+#demo-image-picker #demo-order-6 .loading,
+#demo-image-picker #demo-order-6 .loading1,
+#demo-image-picker #demo-order-6 .load-error,
+#demo-image-picker #demo-order-6 .load-error1 {
+  background: rgba(0, 0, 0, 0.5);
+  text-align: center;
+  line-height: 1.5;
+  font-size: 14px;
+  color: #fff;
+  width: 100%;
+  height: 100%;
+  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;
+}

package/esm/image-picker/demo/style/mobile.less

@@ -0,0 +1,42 @@
+@import '../../../../style/mixin.less';
+
+#demo-image-picker {
+    .demo-space{
+        font-size: 14px;
+        line-height: 1;
+        margin: 8px 0;
+    }
+    #demo-order-5 {
+        .custom-delete {
+            top: 4px;
+            right: 4px;
+            font-size: 18px;
+            position: absolute;
+            border-radius: 50%;
+            width: 18px;
+            height: 18px;
+            line-height: 16px;
+            text-align: center;
+        }
+        .custom-delete-bg {
+            background-color: #0000004d;
+        }
+    }
+    #demo-order-6 {
+        .loading,
+        .loading1,
+        .load-error,
+        .load-error1 {
+            background: rgba(0, 0, 0, 0.5);
+            text-align: center;
+            line-height: 1.5;
+            font-size: 14px;
+            color: #fff;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+    }
+}

package/esm/image-picker/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ImagePickerProps, ImagePickerRef } from './type';
+export * from './type';
+/**
+ * 图片选择器组件
+ * @en ImagePicker Component
+ * @type 数据录入
+ * @type_en Data Entry
+ * @name 图片选择器
+ * @name_en ImagePicker
+ */
+declare const ImagePicker: React.ForwardRefExoticComponent<ImagePickerProps & React.RefAttributes<ImagePickerRef>>;
+export default ImagePicker;