@arco-design/mobile-react 2.19.0

package/umd/tag/style/css/index.js

@@ -0,0 +1,15 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["../../../../style/css/public.css", "./index.css"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(require("../../../../style/css/public.css"), require("./index.css"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(global._public, global.index);
+    global.index = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_public, _index) {
+  "use strict";
+});

package/umd/tag/style/index.d.ts

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

package/umd/tag/style/index.js

@@ -0,0 +1,15 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["../../../style/public.less", "./index.less"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(require("../../../style/public.less"), require("./index.less"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(global._public, global.index);
+    global.index = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_public, _index) {
+  "use strict";
+});

package/umd/tag/style/index.less

@@ -0,0 +1,133 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-tag {
+    display: inline-flex;
+    justify-items: center;
+    justify-content: center;
+    align-items: center;
+    vertical-align: middle;
+    box-sizing: border-box;
+    border: none;
+    .use-var(border-radius, tag-border-radius);
+    .use-var(font-size, tag-font-size);
+    border-width: 1PX;
+    border-style: solid;
+
+    &.size-small {
+        .use-var(height, tag-small-size-height);
+        .use-var(padding, tag-small-size-padding, 0);
+
+        .tag-text {
+            transform: scale(.8333);
+            .rem(margin-left, -2);
+            .rem(margin-right, -2);
+        }
+    }
+
+    &.size-medium {
+        .use-var(height, tag-medium-size-height);
+        .use-var(padding, tag-medium-size-padding, 0);
+    }
+
+    &.size-large {
+        .use-var(height, tag-large-size-height);
+        .use-var(padding, tag-large-size-padding, 0);
+    }
+
+    &.filleted {
+        .use-var(padding, tag-filleted-padding, 0);
+        border-radius: 100px;
+    }
+
+    &.half-border:not(&-solid) {
+
+        &:not(.filleted) {
+            .onepx-border(all, inherit, @tag-border-radius, 1PX, inherit);
+            // bugfix: 一些情况border-style会和border-width合并为border属性
+            // border-style: inherit时合并后为 border: 1PX inherit 语法有问题 这里复写一下
+
+            &::after {
+                border: inherit;
+                border-width: 1PX;
+            }
+        }
+
+        &.filleted {
+            .onepx-border(all, inherit, 100px, 1PX, inherit);
+
+            &::after {
+                border: inherit;
+                border-width: 1PX;
+            }
+        }
+    }
+
+    .tag-text {
+        vertical-align: middle;
+        font-size: inherit;
+    }
+    .@{prefix}-icon:not(.tag-close-icon) {
+        vertical-align: middle;
+        .use-var(margin-right, tag-icon-margin-right);
+        .use-var(font-size, tag-icon-font-size);
+    }
+
+    .tag-close-wrap {
+        font-size: 0;
+    }
+
+    .tag-close-icon {
+        vertical-align: middle;
+        .use-var(margin-left, tag-icon-close-margin-left);
+        .use-var(font-size, tag-icon-font-size);
+    }
+
+    &.android {
+
+        .tag-text {
+            .rem(padding-top, 1);
+        }
+    }
+
+    &&-primary {
+        .use-var(color, tag-primary-color);
+        .use-var(background, tag-primary-background-color);
+        .use-var(border-color, tag-primary-border-color);
+    }
+
+    &&-hollow {
+        .use-var(color, tag-hollow-color);
+        background: transparent;
+        .use-var(border-color, tag-hollow-border-color);
+    }
+
+    &&-solid {
+        .use-var(color, tag-solid-color);
+        .use-var(background, tag-solid-background-color);
+        border-width: 0;
+    }
+}
+
+.@{prefix}-tag-list {
+    margin-bottom: -1 * @tag-list-vertical-gutter;
+    .@{prefix}-tag {
+        vertical-align: top;
+
+        &:not(:last-child) {
+            .use-var(margin-right, tag-list-horizontal-gutter);
+        }
+        .use-var(margin-bottom, tag-list-vertical-gutter);
+    }
+
+    .tag-list-add-wrap {
+        font-size: 0;
+        display: inline-block;
+    }
+
+    .tag-list-add {
+        .use-var(margin-bottom, tag-list-vertical-gutter);
+        .use-var(border-color, tag-list-add-border-color);
+        .use-var(background, tag-list-add-background);
+        .use-var(color, tag-list-add-color);
+    }
+}

package/umd/tag/tag.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TagProps, TagRef } from './type';
+export declare const Tag: React.ForwardRefExoticComponent<TagProps & React.RefAttributes<TagRef>>;

package/umd/tag/tag.js

@@ -0,0 +1,94 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "@babel/runtime/helpers/extends", "react", "@arco-design/mobile-utils", "../context-provider", "../_helpers", "../icon/IconClose"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("@babel/runtime/helpers/extends"), require("react"), require("@arco-design/mobile-utils"), require("../context-provider"), require("../_helpers"), require("../icon/IconClose"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global._extends, global.react, global.mobileUtils, global.contextProvider, global._helpers, global.IconClose);
+    global.tag = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends2, _react, _mobileUtils, _contextProvider, _helpers, _IconClose) {
+  "use strict";
+
+  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+  _exports.__esModule = true;
+  _exports.Tag = void 0;
+  _extends2 = _interopRequireDefault(_extends2);
+  _react = _interopRequireWildcard(_react);
+  _IconClose = _interopRequireDefault(_IconClose);
+
+  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 Tag = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+    var className = props.className,
+        style = props.style,
+        _props$type = props.type,
+        type = _props$type === void 0 ? 'primary' : _props$type,
+        icon = props.icon,
+        children = props.children,
+        _props$size = props.size,
+        size = _props$size === void 0 ? 'medium' : _props$size,
+        color = props.color,
+        bgColor = props.bgColor,
+        borderColor = props.borderColor,
+        _props$borderStyle = props.borderStyle,
+        borderStyle = _props$borderStyle === void 0 ? 'solid' : _props$borderStyle,
+        _props$halfBorder = props.halfBorder,
+        halfBorder = _props$halfBorder === void 0 ? true : _props$halfBorder,
+        closeable = props.closeable,
+        closeIcon = props.closeIcon,
+        closeColor = props.closeColor,
+        filleted = props.filleted,
+        onClose = props.onClose,
+        onClick = props.onClick;
+    var domRef = (0, _react.useRef)(null);
+    var system = (0, _helpers.useSystem)();
+    (0, _react.useImperativeHandle)(ref, function () {
+      return {
+        dom: domRef.current
+      };
+    });
+
+    function getTagStyle() {
+      return (0, _extends2.default)({
+        color: color,
+        background: bgColor,
+        borderColor: borderColor,
+        borderStyle: borderStyle
+      }, style || {});
+    }
+
+    return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref) {
+      var prefixCls = _ref.prefixCls;
+      var prefix = prefixCls + "-tag";
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _mobileUtils.cls)(prefix, 'all-border-box', className, prefix + "-" + type, {
+          'half-border': halfBorder
+        }, system, "size-" + size, {
+          filleted: filleted
+        }),
+        style: getTagStyle(),
+        ref: domRef,
+        onClick: onClick
+      }, icon, /*#__PURE__*/_react.default.createElement("span", {
+        className: "tag-text"
+      }, children), closeable ? /*#__PURE__*/_react.default.createElement("div", {
+        onClick: function onClick(e) {
+          e.stopPropagation();
+          onClose && onClose(e);
+        },
+        className: "tag-close-wrap"
+      }, closeIcon || /*#__PURE__*/_react.default.createElement(_IconClose.default, {
+        className: "tag-close-icon",
+        color: closeColor
+      })) : null);
+    });
+  });
+  _exports.Tag = Tag;
+});

package/umd/tag/type.d.ts

@@ -0,0 +1,159 @@
+import React, { CSSProperties, ReactNode } from 'react';
+export interface TagProps {
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     * @en Custom stylesheet
+     */
+    style?: CSSProperties;
+    /**
+     * 样式类型。primary表示基本类型，hollow表示空心类型，solid表示实心类型
+     * @en Style type. primary represents the basic type, hollow represents the hollow type, and solid represents the solid type
+     * @default "primary"
+     */
+    type?: 'primary' | 'hollow' | 'solid';
+    /**
+     * 图标内容
+     * @en Icon
+     */
+    icon?: ReactNode;
+    /**
+     * 标签内部内容
+     * @en Children element of tag
+     */
+    children?: ReactNode;
+    /**
+     * 标签尺寸
+     * @en Tag size
+     * @default "medium"
+     */
+    size?: 'medium' | 'large' | 'small';
+    /**
+     * 文字颜色
+     * @en Text color
+     */
+    color?: string;
+    /**
+     * 背景颜色
+     * @en Background color
+     */
+    bgColor?: string;
+    /**
+     * 边框颜色
+     * @en Border color
+     */
+    borderColor?: string;
+    /**
+     * 边框样式
+     * @en Border style
+     * @default "solid"
+     */
+    borderStyle?: 'none' | 'dotted' | 'solid' | 'dashed';
+    /**
+     * 是否是0.5px边框
+     * @en Whether it is a 0.5px border
+     * @default true
+     */
+    halfBorder?: boolean;
+    /**
+     * 是否有关闭按钮
+     * @en whether there is a close button
+     */
+    closeable?: boolean;
+    /**
+     * 关闭按钮内容
+     * @en Close button content
+     */
+    closeIcon?: ReactNode;
+    /**
+     * 关闭按钮颜色
+     * @en Close button color
+     */
+    closeColor?: string;
+    /**
+     * 是否圆角
+     * @en Whether it has rounded corners
+     */
+    filleted?: boolean;
+    /**
+     * 点击关闭按钮回调
+     * @en Callback when clicking the close button
+     */
+    onClose?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    /**
+     * 点击标签回调
+     * @en Callback when clicking the tag
+     */
+    onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+}
+export interface TagRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+}
+export interface TagListProps<T extends TagProps = TagProps> {
+    /**
+     * 标签列表
+     * @en Tag List
+     */
+    list: T[];
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     * @en Custom stylesheet
+     */
+    style?: CSSProperties;
+    /**
+     * 样式类型。primary表示基本类型，hollow表示空心类型，solid表示实心类型
+     * @en Style type, primary represents the basic type, hollow represents the hollow type, and solid represents the solid type
+     */
+    type?: 'primary' | 'hollow' | 'solid';
+    /**
+     * 是否展示添加标签按钮
+     * @en Whether to display the add tag button
+     * @default true
+     */
+    showAddButton?: boolean;
+    /**
+     * 自定义添加标签按钮
+     * @en Customize the add tag button
+     */
+    addArea?: ReactNode;
+    /**
+     * 标签横向间距
+     * @en Horizontal spacing of tags
+     */
+    horizontalPadding?: string | number;
+    /**
+     * 标签纵向间距
+     * @en Vertical spacing of tags
+     */
+    verticalPadding?: string | number;
+    /**
+     * 点击添加标签按钮回调
+     * @en Callback when clicking the add tag button
+     */
+    onAdd?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    /**
+     * 点击标签关闭按钮回调
+     * @en Callback when clicking the close tag button
+     */
+    onClose?: (index: number, e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+}
+export interface TagListRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+}

package/umd/tag/type.js

@@ -0,0 +1,17 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports);
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports);
+    global.type = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports) {
+  "use strict";
+
+  _exports.__esModule = true;
+});

package/umd/textarea/demo/style/css/mobile.css

@@ -0,0 +1,10 @@
+#demo-textarea .arcodesign-mobile-demo-content {
+  padding: 0;
+  background: transparent;
+}
+#demo-textarea .arco-input-container {
+  background:  #ffffff ;
+}
+#demo-textarea .arco-input-container:not(:first-of-type) {
+  margin-top: 0.16rem;
+}

package/umd/textarea/demo/style/mobile.less

@@ -0,0 +1,16 @@
+@import "../../../../style/mixin.less";
+
+#demo-textarea {
+
+    .arcodesign-mobile-demo-content {
+        padding: 0;
+        background: transparent;
+    }
+    .@{prefix}-input-container {
+        .use-var(background, background-color);
+
+        &:not(:first-of-type) {
+            .rem(margin-top, 8);
+        }
+    }
+}

package/umd/textarea/index.d.ts

@@ -0,0 +1,93 @@
+import React, { ReactNode } from 'react';
+import { BasicInputProps } from '../input/props';
+export interface TextareaProps extends BasicInputProps<HTMLTextAreaElement> {
+    /**
+     * 文本域默认行数
+     * @en Default number of lines in the text field
+     */
+    rows?: number;
+    /**
+     * 自适应内容高度
+     * @en Adaptive content height
+     */
+    autosize?: boolean;
+    /**
+     * 文本域dom自定义类名
+     * @en Custom classname of text field dom
+     */
+    textareaClass?: string;
+    /**
+     * 文本域dom自定义样式
+     * @en Custom stylesheet of text field dom
+     */
+    textareaStyle?: React.CSSProperties;
+    /**
+     * autosize=true 时，是否通过 cloneNode 计算新高度
+     * @en When autosize=true, whether to calculate the new height through cloneNode
+     * @default false
+     */
+    cloneNodeWhenAutosize?: boolean;
+    /**
+     * 是否展示字数统计
+     * @en Whether to display word count
+     * @default true
+     */
+    showStatistics?: boolean;
+    /**
+     * 字数统计时的最大输入长度
+     * @en Maximum input length for word count
+     */
+    statisticsMaxlength?: number;
+    /**
+     * 自定义统计字数方法
+     * @en Customize word count method
+     */
+    statisticsLengthCaculator?: (value: string) => number;
+    /**
+     * 字数统计错误状态切换回调，仅当状态发生改变时触发
+     * @en Callback when the error state of word count switches, triggered only when the state changes
+     */
+    onErrStatusChange?: (hasError: boolean) => void;
+    /**
+     * 字数统计错误状态回调，当值有改变时就会触发
+     * @en Callback when word count is in error status, triggered when the value changes
+     */
+    onErrValueChange?: (hasError: boolean, currentLength: number, maxLength?: number) => void;
+    /**
+     * 自定义字数统计内容
+     * @en Custom word count content
+     */
+    renderStatistics?: (currentLength: number, maxLength: number) => ReactNode;
+    /**
+     * 其他未列出的原生属性，优先级低于已列出的组件属性
+     * @en Other unlisted native properties, lower priority than listed component properties
+     */
+    nativeProps?: React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+}
+export interface TextareaRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+    /**
+     * 原生文本框 DOM
+     * @en Native textarea DOM
+     */
+    textarea: HTMLTextAreaElement | null;
+    /**
+     * 手动 resize 输入框，autosize=true 时生效
+     * @en Manually resize the input box, it takes effect when autosize=true
+     */
+    resize: () => void;
+}
+/**
+ * 多行文本输入框组件，支持自适应内容高度。
+ * @en A multi-line textarea, supports adaptive content height.
+ * @type 数据输入
+ * @type_en Data Entry
+ * @name 多行文本框
+ * @name_en Textarea
+ */
+declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<TextareaRef>>;
+export default Textarea;