@arco-design/mobile-react 2.31.6 → 2.33.0

package/esnext/image/style/css/index.d.ts

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

package/esnext/image/style/css/index.js

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

package/esnext/image/style/index.d.ts

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

package/esnext/image/style/index.js

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

package/esnext/image/style/index.less

@@ -0,0 +1,198 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-image {
+    display: inline-block;
+    position: relative;
+
+    &.preview {
+        transition: all 0.3s ease-in-out;
+
+        .image-container,
+        .image-loading-container .image-loading,
+        .image-error-container .image-retry-load {
+            background-color: transparent;
+        }
+
+        .image-container::after {
+            border-color: transparent;
+        }
+    }
+
+    .image-bottom-overlap,
+    .image-top-overlap {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+    }
+
+    .image-bottom-overlap {
+        z-index: 0;
+        overflow: hidden;
+    }
+
+    .image-placeholder {
+        .use-var(background-color, image-placeholder-background);
+        width: 100%;
+        height: 100%;
+    }
+
+    .image-top-overlap {
+        z-index: 10;
+    }
+
+    .image-loading-container,
+    .image-error-container {
+        overflow: hidden;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        z-index: 2;
+        .use-var(font-size, image-inner-font-size);
+    }
+
+    .image-container {
+        position: relative;
+        font-size: 0;
+        opacity: 0;
+        z-index: 1;
+        overflow: hidden;
+
+        &.static-label,
+        &.loaded,
+        &.error,
+        &.has-loaded {
+            opacity: 1;
+        }
+
+        &.animate {
+            transition-property: opacity;
+            .use-var(transition-timing-function, image-transition-function);
+        }
+
+        .bordered {
+            .hairline-var(line-color);
+        }
+
+        &,
+        & img {
+            width: inherit;
+            height: inherit;
+            min-width: inherit;
+            min-height: inherit;
+            max-width: inherit;
+            max-height: inherit;
+        }
+
+        .preview-fit-contain-y {
+            width: 100%;
+            height: auto;
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+        }
+
+        .preview-fit-contain-x {
+            height: 100%;
+            width: auto;
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+        }
+    }
+
+    .image-error-container {
+        .image-retry-load {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            .use-var(background-color, image-mask-background);
+            .use-var(font-size, image-retry-font-size);
+            .use-var(color, image-retry-icon-color);
+        }
+    }
+
+    .image-loading-container {
+        .image-loading {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            .use-var(color, image-loading-icon-color);
+            .use-var(background-color, image-mask-background);
+            .set-loading-color-var(image-loading-icon-color);
+        }
+    }
+}
+
+/***************************************************
+ *                                                 *
+ *               Arco Theme Style                  *
+ *                                                 *
+ ***************************************************/
+& when (@use-dark-mode = 1) {
+    
+  .process-bg-color-with-config,
+  .process-custom-icon-bg-color-with-config {
+    @{arco-dark-mode-selector} & {
+      .use-var(color, dark-steps-process-with-config-item-icon-color);
+      .use-var(color, dark-steps-process-with-config-item-icon-color);
+    }
+  }
+  .wait-custom-icon-bg-color-with-config {
+    @{arco-dark-mode-selector} & {
+      .use-var(background, dark-steps-wait-icon-num-background);
+      .use-var(color, dark-sub-info-font-color);
+      .use-var(background, dark-steps-wait-icon-num-background);
+      .use-var(color, dark-sub-info-font-color);
+    }
+  }
+  .@{prefix}-image {
+    .image-placeholder {
+      @{arco-dark-mode-selector} & {
+        .use-var(background-color, dark-image-placeholder-background);
+      }
+    }
+    .image-container {
+      .bordered {
+        @{arco-dark-mode-selector} & {
+          .hairline-var(dark-line-color);
+        }
+      }
+    }
+    .image-error-container {
+      .image-retry-load {
+        @{arco-dark-mode-selector} & {
+          .use-var(color, dark-image-retry-icon-color);
+        }
+      }
+    }
+    .image-loading-container {
+      .image-loading {
+        @{arco-dark-mode-selector} & {
+          .use-var(color, dark-image-loading-icon-color);
+          .set-loading-color-var(dark-image-loading-icon-color);
+        }
+      }
+    }
+  }
+}
+/********************* End *************************/

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

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

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export default function AddIcon() {
+    return (React.createElement("svg", { width: "30", height: "30", viewBox: "0 0 30 30", fill: "none" },
+        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/esnext/image-picker/index.d.ts

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

package/esnext/image-picker/index.js

@@ -0,0 +1,77 @@
+import React, { useRef, forwardRef, useImperativeHandle } from 'react';
+import { cls, defaultLocale, componentWrapper } from '@arco-design/mobile-utils';
+import { ContextLayout } from '../context-provider';
+import { IconClose } from '../icon';
+import Image from '../image';
+import Grid from '../grid';
+import AddIcon from './add-icon';
+import { useLatestRef } from '../_helpers';
+import { Upload } from '../uploader/upload';
+export * from './type';
+const ImagePicker = forwardRef((props, ref) => {
+    const { className = '', style, accept = 'image/*', multiple = false, capture, columns = 3, gutter = 8, limit = 0, images = [], disabled, deleteIcon, selectIcon, hideDelete = false, hideSelect = false, alwaysShowSelect = false, imageProps, renderLoading, renderError, selectAdapter, } = props;
+    const domRef = useRef(null);
+    const fileRef = useRef(null);
+    const cacheRef = useLatestRef(images);
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+    }));
+    const uploadFunc = new Upload({ ...props, files: images }, fileRef, cacheRef);
+    const getGridData = (prefixCls, locale) => {
+        const errorNode = (index) => {
+            if (renderError) {
+                return typeof renderError === 'function' ? renderError(index) : renderError;
+            }
+            return (React.createElement("div", { className: `${prefixCls}-image-picker-error` },
+                React.createElement("p", null, locale.ImagePicker.loadError)));
+        };
+        const loadingNode = (index) => {
+            if (renderLoading) {
+                return typeof renderLoading === 'function' ? renderLoading(index) : renderLoading;
+            }
+            return null;
+        };
+        const data = (limit && limit < images.length ? images.slice(0, limit) : images).map((image, index) => {
+            const { url, status } = image;
+            return {
+                img: (React.createElement("div", { key: `${index}-${url}`, className: `${prefixCls}-image-picker-image` },
+                    React.createElement("div", { onTouchStart: e => uploadFunc.handleTouchStart(e, image, index), onClick: e => uploadFunc.handleClick(e, image, index), className: `${prefixCls}-image-picker-image-container` },
+                        React.createElement(Image, Object.assign({ showLoading: true, showError: true }, (imageProps || {}), { src: url, errorArea: errorNode(index), loadingArea: loadingNode(index), status: status || imageProps?.status })),
+                        React.createElement("div", { className: `${prefixCls}-image-picker-image-mask` })),
+                    !hideDelete && (React.createElement("div", { className: `${prefixCls}-image-picker-close`, onClick: () => uploadFunc.deleteFile(index) }, deleteIcon || (React.createElement("div", { className: `${prefixCls}-image-picker-close-icon` },
+                        React.createElement(IconClose, null))))))),
+                title: '',
+            };
+        });
+        const showSelect = !hideSelect && images.length < (limit || Infinity);
+        const disableSelect = disabled || (alwaysShowSelect && !showSelect);
+        if (showSelect || alwaysShowSelect) {
+            data.push({
+                img: (React.createElement("div", { className: cls(`${prefixCls}-image-picker-add`, {
+                        [`${prefixCls}-image-picker-add-disabled`]: disableSelect,
+                    }), onClick: uploadFunc.handleSelect },
+                    React.createElement("div", { className: `${prefixCls}-image-picker-add-container` },
+                        selectIcon || (React.createElement("div", { className: `${prefixCls}-image-picker-add-icon` },
+                            React.createElement(AddIcon, null))),
+                        !selectAdapter ? (React.createElement("input", { capture: capture, accept: accept, multiple: multiple, type: "file", onChange: e => uploadFunc.handleChange(e), ref: fileRef })) : null))),
+                title: '',
+            });
+        }
+        return data;
+    };
+    return (React.createElement(ContextLayout, null, ({ prefixCls, locale = defaultLocale }) => (React.createElement("div", { className: cls(`${prefixCls}-image-picker`, className, {
+            [`${prefixCls}-image-picker-disabled`]: disabled,
+        }), style: style, ref: domRef },
+        React.createElement("div", { className: `${prefixCls}-image-picker-container` },
+            React.createElement(Grid, { data: getGridData(prefixCls, locale), gutter: gutter, columns: columns }))))));
+});
+/**
+ * 图片选择器组件
+ * @en ImagePicker Component
+ * @type 数据录入
+ * @type_en Data Entry
+ * @name 图片选择器
+ * @name_en ImagePicker
+ * @displayName ImagePicker
+ */
+export default componentWrapper(ImagePicker, 'ImagePicker');