@arco-design/mobile-react 2.19.1-941e02b.7 → 2.19.1

package/cjs/image-picker/style/css/index.css

@@ -1,147 +0,0 @@
-.arco-image-picker {
-  font-size:  0.28rem ;
-}
-.arco-image-picker-container {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: flex;
-  -webkit-flex-wrap: wrap;
-          flex-wrap: wrap;
-}
-.arco-image-picker-image {
-  position: relative;
-  width: 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;
-  padding-top: 100%;
-  border-radius:  0.04rem ;
-  overflow: hidden;
-}
-.arco-image-picker-image-container {
-  position: absolute;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  left: 0;
-}
-.arco-image-picker-image .arco-image {
-  height: 100%;
-  width: 100%;
-}
-.arco-image-picker-image-mask {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 2;
-}
-.arco-image-picker-add {
-  background-color:  #f7f8fa ;
-  border-radius:  0.04rem ;
-  position: relative;
-  width: 100%;
-  height: 100%;
-  padding-top: 100%;
-}
-.arco-image-picker-add-container {
-  position: absolute;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  left: 0;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-  -webkit-flex-direction: column;
-          flex-direction: column;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-          justify-content: center;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-          align-items: center;
-  text-align: center;
-  font-size:  0.24rem ;
-  color:  #86909c ;
-}
-.arco-image-picker-add-icon {
-  font-size:  0.6rem ;
-  color:  #d8d8d8 ;
-}
-.arco-image-picker-add-icon svg {
-  display: block;
-}
-.arco-image-picker-add-disabled {
-  pointer-events: none;
-}
-.arco-image-picker-add-disabled .arco-image-picker-add-icon {
-  opacity:  0.7 ;
-}
-.arco-image-picker-add input {
-  position: absolute;
-  opacity: 0;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  display: none;
-}
-.arco-image-picker-close {
-  position: absolute;
-  top: 0;
-  right: 0;
-  z-index: 2;
-}
-.arco-image-picker-close-icon {
-  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;
-  font-size:  0.24rem ;
-  width:  0.36rem ;
-  height:  0.36rem ;
-  color:  #ffffff ;
-  background:  rgba(0, 0, 0, 0.3) ;
-  border-radius:  0 0.04rem ;
-}
-.arco-image-picker-error {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-  -webkit-flex-direction: column;
-          flex-direction: column;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-          justify-content: center;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-          align-items: center;
-  background:  rgba(0, 0, 0, 0.5) ;
-  color:  #ffffff ;
-  font-size:  0.28rem ;
-}
-.arco-image-picker-disabled {
-  pointer-events: none;
-}

package/cjs/image-picker/style/css/index.d.ts

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

package/cjs/image-picker/style/css/index.js

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

package/cjs/image-picker/style/index.d.ts

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

package/cjs/image-picker/style/index.js

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

package/cjs/image-picker/style/index.less

@@ -1,116 +0,0 @@
-@import '../../../style/mixin.less';
-
-.@{prefix}-image-picker {
-    .use-var(font-size, image-picker-font-size);
-    &-container {
-        display: flex;
-        flex-wrap: wrap;
-    }
-    .container() {
-        position: absolute;
-        top: 0;
-        width: 100%;
-        height: 100%;
-        left: 0;
-    }
-    &-image {
-        position: relative;
-        width: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding-top: 100%;
-        .use-var(border-radius, image-picker-border-radius);
-        overflow: hidden;
-        &-container {
-            .container()
-        }
-        .arco-image{
-            height: 100%;
-            width: 100%;
-        }
-        &-mask {
-            position: absolute;
-            left: 0;
-            top: 0;
-            width: 100%;
-            height: 100%;
-            z-index: 2;
-        }
-    }
-    &-add {
-        .use-var(background-color, image-picker-add-background);
-        .use-var(border-radius, image-picker-border-radius);
-        position: relative;
-        width: 100%;
-        height: 100%;
-        padding-top: 100%;
-        &-container {
-            .container();
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            text-align: center;
-            .use-var(font-size, image-picker-add-text-font-size);
-            .use-var(color, image-picker-add-text-color);
-        }
-        &-icon {
-            .use-var(font-size, image-picker-add-icon-font-size);
-            .use-var(color, image-picker-add-icon-color);
-            svg {
-                display: block;
-            }
-        }
-        &-disabled {
-            pointer-events: none;
-        }
-        &-disabled &-icon {
-            .use-var(opacity, image-picker-disabled-opacity);
-        }
-        input {
-            position: absolute;
-            opacity: 0;
-            left: 0;
-            top: 0;
-            width: 100%;
-            height: 100%;
-            display: none;
-        }
-    }
-    &-close {
-        position: absolute;
-        top: 0;
-        right: 0;
-        z-index: 2;
-        &-icon {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            .use-var(font-size, image-picker-close-font-size);
-            .use-var(width, image-picker-close-width);
-            .use-var(height, image-picker-close-height);
-            .use-var(color, image-picker-close-color);
-            .use-var(background, image-picker-close-background);
-            .use-var(border-radius, image-picker-close-border-radius);
-        }
-    }
-    &-error {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        .use-var(background, image-picker-error-background);
-        .use-var(color, image-picker-error-color);
-        .use-var(font-size, image-picker-font-size);
-    }
-}
-
-.@{prefix}-image-picker-disabled {
-    pointer-events: none;
-}

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

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

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

@@ -1,14 +0,0 @@
-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

@@ -1,40 +0,0 @@
-#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

@@ -1,42 +0,0 @@
-@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

@@ -1,181 +0,0 @@
-import React, { InputHTMLAttributes } from 'react';
-import { ImageProps } from '../image';
-export interface ImagePickItem {
-    /**
-     * 图片地址
-     * @en Image Url
-     */
-    url: string;
-    /**
-     * 图片文件
-     * @en Image File
-     */
-    file?: File;
-    /**
-     * 图片状态
-     * @en Image Status
-     * @default 'loaded'
-     */
-    status: 'loaded' | 'loading' | 'error';
-}
-export interface AdapterFile {
-    url?: string;
-    size: number;
-    name: string;
-}
-export interface SelectCallback {
-    files: AdapterFile[];
-}
-export interface ImagePickerProps {
-    /**
-     * 自定义类名
-     * @en Custom className
-     */
-    className?: string;
-    /**
-     * 自定义样式
-     * @en Custom stylesheet
-     */
-    style?: React.CSSProperties;
-    /**
-     * 已选择图片列表
-     * @en selected images list
-     */
-    images: ImagePickItem[];
-    /**
-     * 可以选择的文件类型
-     * @en Available File Types
-     * @default 'image/*'
-     */
-    accept?: string;
-    /**
-     * 是否支持多选
-     * @en Whether To Support Multiple Selection
-     */
-    multiple?: boolean;
-    /**
-     * 图片选取模式 Image selection mode [capture MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture)
-     * @en Whether To Support Multiple Selection [capture MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture)
-     */
-    capture?: InputHTMLAttributes<unknown>['capture'];
-    /**
-     * 一行展示图片张数
-     * @en The Number Of Pictures Displayed In A Row
-     * @default 3
-     */
-    columns?: number;
-    /**
-     * 格子间的间距
-     * @en spacing between grids
-     * @default 8
-     */
-    gutter?: number;
-    /**
-     * 最多选择图片张数，超出数量自动隐藏上传按钮，0表示不做限制
-     * @en max Pictures Can Choose
-     */
-    limit?: number;
-    /**
-     * 文件大小限制，单位为K
-     * @en File size limit, in K
-     */
-    maxSize?: number;
-    /**
-     * 是否隐藏删除Icon
-     * @en Whether to hide delete Icon
-     * @default false
-     */
-    hideDelete?: boolean;
-    /**
-     * 是否隐藏选择Icon
-     * @en Whether to hide Select Icon
-     * @default false
-     */
-    hideSelect?: boolean;
-    /**
-     * 是否总是展示选择Icon，默认情况下当图片数量超出limit值时会自动隐藏选择Icon
-     * @en Whether to always show Select Icon
-     * @default false
-     */
-    alwaysShowSelect?: boolean;
-    /**
-     * 禁用选择和删除图片
-     * @en Disable Select & Delete Image
-     */
-    disabled?: boolean;
-    /**
-     * 自定义删除图标
-     * @en Defined Delete Icon
-     */
-    deleteIcon?: React.ReactNode;
-    /**
-     * 自定义选择图标
-     * @en Defined Select Icon
-     */
-    selectIcon?: React.ReactNode;
-    /**
-     * 透传给图片的属性
-     * @en Attributes passed through to the image
-     */
-    imageProps?: ImageProps;
-    /**
-     * 自定义上传失败展示
-     * @en Defined upload failed display
-     */
-    renderError?: (index?: number) => React.ReactNode | React.ReactNode;
-    /**
-     * 自定义上传中展示
-     * @en Defined uploading display
-     */
-    renderLoading?: (index?: number) => React.ReactNode | React.ReactNode;
-    /**
-     * 上传方法
-     * @en upload function
-     */
-    upload?: (file: ImagePickItem) => Promise<ImagePickItem | null>;
-    onSelect?: (...args: any[]) => void;
-    /**
-     * 已选图片列表发生变化
-     * @en The list of selected images changes
-     */
-    onChange?: (fileList: ImagePickItem[]) => Promise<void>;
-    /**
-     * 图片超过限制大小
-     * @en Image exceeds size limit
-     */
-    onMaxSizeExceed?: (file: File) => void;
-    /**
-     * 选择张数超过限制
-     * @en The number of pictures exceeds the limit
-     */
-    onLimitExceed?: (files: File[]) => void;
-    /**
-     * 图片点击
-     * @en click event
-     */
-    onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>, image: ImagePickItem, index: number) => void;
-    /**
-     * 图片长按事件
-     * @en long press event
-     */
-    onLongPress?: (e: React.MouseEvent<HTMLElement, MouseEvent>, image: ImagePickItem, index: number) => void;
-    /**
-     * 图片选择适配器
-     * @en Select Adaptor
-     */
-    selectAdapter: () => Promise<SelectCallback>;
-}
-export interface ImagePickerRef {
-    /** 最外层元素 DOM */
-    dom: HTMLDivElement | null;
-}
-/**
- * 图片选择器组件
- * @en ImagePicker Component
- * @type 数据输入
- * @type_en Data Entry
- * @name 图片选择器
- * @name_en ImagePicker
- */
-declare const ImagePicker: React.ForwardRefExoticComponent<ImagePickerProps & React.RefAttributes<ImagePickerRef>>;
-export default ImagePicker;