@arco-design/mobile-react 2.22.2 → 2.23.0

package/esm/stepper/type.d.ts

@@ -0,0 +1,159 @@
+import { ReactNode } from 'react';
+export interface StepperProps {
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     * @en Custom stylesheet
+     * */
+    style?: React.CSSProperties;
+    /**
+     * input样式
+     * @en Input stylesheet
+     */
+    inputStyle?: React.CSSProperties;
+    /**
+     * input类名
+     * @en Input class
+     */
+    inputClass?: string;
+    /**
+     * 绑定值，传入即受控
+     * @en Bundled value (Controlled)
+     */
+    value?: number;
+    /**
+     * 默认值
+     * @en Default value
+     * @default 1
+     */
+    defaultValue?: number;
+    /**
+     * 是否允许内容为空
+     * @en Whether the content is allowed to be empty
+     * @default false
+     */
+    allowEmpty?: boolean;
+    /**
+     * 格式化到小数点后固定位数，设置为 0 表示格式化到整数
+     * @en Formatted to a decimal point after a fixed number of digits, set to 0 indicates formatting to an integer
+     * @default 0
+     */
+    digits?: number;
+    /**
+     * 是否禁用步进器
+     * @en Whether to disable the stepper
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * 输入框只读状态
+     * @en Input read only status
+     * @default false
+     */
+    inputReadonly?: boolean;
+    /**
+     * 最大值
+     * @en Max value
+     * @default Infinity
+     */
+    max?: number;
+    /**
+     * 最小值
+     * @en Min value
+     * @default 1
+     */
+    min?: number;
+    /**
+     * 是否允许操作大于/小于极限值时，操作结果等于极限值
+     * @en If an operation is allowed to be greater more/less than the limit value, the result of the operation is equal to the limit value
+     */
+    equalLimitDisabled?: boolean;
+    /**
+     * 递增/减值
+     * @en Incremental/Impairment value
+     * @default 1
+     */
+    step?: number;
+    /**
+     * 边框风格
+     * @en Border style
+     * @default "default"
+     */
+    theme?: 'square' | 'round' | 'default';
+    /**
+     * 格式化内部值（优先级最高）
+     * @en Format the inner value
+     */
+    formatter?: (innerValue: number) => number | Promise<number>;
+    /**
+     * 增加按钮
+     * @en Add button
+     */
+    addButton?: ReactNode;
+    /**
+     * 删除按钮
+     * @en Delete button
+     */
+    minusButton?: ReactNode;
+    /**
+     * 自定义输入框函数
+     * @en The function of customizing the input
+     */
+    renderContent?: (innerValue: number) => ReactNode;
+    /**
+     * 输入框失去焦点时触发
+     * @en Triggers when the input loses focus
+     */
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    /**
+     * 数据变化时的触发
+     * @en Triggers when the data change
+     */
+    onChange?: (value: number | null) => void;
+    /**
+     * 输入框获得焦点时触发
+     * @en Triggers when the input gets focus
+     */
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    /**
+     * 点击增加按钮时触发
+     * @en Triggers when the add button is clicked
+     */
+    onAddButtonClick?: (e: React.MouseEvent) => void;
+    /**
+     * 点击减少按钮时触发
+     * @en Triggers when the minus button is clicked
+     */
+    onMinusButtonClick?: (e: React.MouseEvent) => void;
+    /**
+     * 点击最外侧dom时触发
+     * @en Triggers when the most out dom is clicked
+     */
+    onClick?: (e: React.MouseEvent) => void;
+    /**
+     * 输入框输入时触发
+     * @en Triggers when the input is inputting
+     */
+    onInput?: (e: React.ChangeEvent) => void;
+}
+export interface StepperRef {
+    /**
+     * 最外层元素 DOM
+     * @en The most out element dom
+     */
+    dom: HTMLDivElement | null;
+    /**
+     * 输入框 DOM
+     * @en Input dom
+     */
+    input: HTMLInputElement | null;
+    /**
+     * 改变内部值的方法
+     * @en The function of changing inner value
+     */
+    changeValue: (newValue: number | null) => void;
+}

package/esm/stepper/type.js

@@ -0,0 +1 @@
+export {};

package/esm/style.d.ts

@@ -43,6 +43,7 @@ import './radio/style';
 import './rate/style';
 import './slider/style';
 import './search-bar/style';
+import './stepper/style';
 import './steps/style';
 import './sticky/style';
 import './swipe-action/style';

package/esm/style.js

@@ -43,6 +43,7 @@ import './radio/style';
 import './rate/style';
 import './slider/style';
 import './search-bar/style';
+import './stepper/style';
 import './steps/style';
 import './sticky/style';
 import './swipe-action/style';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@arco-design/mobile-react",
-    "version": "2.22.2",
+    "version": "2.23.0",
     "description": "",
     "main": "cjs/index.js",
     "module": "esm/index.js",
@@ -15,7 +15,7 @@
     "author": "taoyiyue@bytedance.com",
     "license": "ISC",
     "dependencies": {
-        "@arco-design/mobile-utils": "^2.12.6",
+        "@arco-design/mobile-utils": "^2.12.8",
         "@arco-design/transformable": "^1.0.0",
         "es6-promise": "^4.2.8",
         "lodash.throttle": "^4.1.1",
@@ -36,5 +36,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "52a29775d16e5e7d2b7645086644cf03aac6d71f"
+    "gitHead": "4f3772faef58931893a78030509fb27b26c4c186"
 }

package/tokens/app/arcodesign/default/css-variables.less

@@ -84,6 +84,7 @@
     --input-disabled-color: var(--disabled-color);
     --input-placeholder-color: var(--disabled-color);
     --input-clear-icon-color: var(--disabled-color);
+    --input-clear-icon-font-size: 16PX;
     --input-label-gutter: ~`pxtorem(24)`;
     --input-horizontal-padding: ~`pxtorem(16)`;
     --input-vertical-padding: ~`pxtorem(12)`;
@@ -701,4 +702,18 @@
     --image-picker-close-height: ~`pxtorem(18)`;
     --image-picker-close-background: rgba(0, 0, 0, 0.3);
     --image-picker-close-border-radius: 0 ~`pxtorem(2)`;
+    --stepper-font-size: ~`pxtorem(14)`;
+    --stepper-square-border: 1PX solid #f2f3f5;
+    --stepper-square-border-radius: ~`pxtorem(2)`;
+    --stepper-square-background-color: #ffffff;
+    --stepper-round-button-border-radius: 50%;
+    --stepper-round-input-background-color: transparent;
+    --stepper-button-size: ~`pxtorem(28)`;
+    --stepper-button-icon-size: ~`pxtorem(10)`;
+    --stepper-default-background-color: #f7f8fa;
+    --stepper-content-color: #1d2129;
+    --stepper-disable-color: #c9cdd4;
+    --stepper-input-width: ~`pxtorem(40)`;
+    --stepper-input-height: ~`pxtorem(28)`;
+    --stepper-input-margin: 0 1PX;
 }

package/tokens/app/arcodesign/default/index.d.ts

@@ -83,6 +83,7 @@ export interface ArcodesignToken extends Record<string, string> {
     'input-disabled-color': string;
     'input-placeholder-color': string;
     'input-clear-icon-color': string;
+    'input-clear-icon-font-size': string;
     'input-label-gutter': string;
     'input-horizontal-padding': string;
     'input-vertical-padding': string;
@@ -700,6 +701,20 @@ export interface ArcodesignToken extends Record<string, string> {
     'image-picker-close-height': string;
     'image-picker-close-background': string;
     'image-picker-close-border-radius': string;
+    'stepper-font-size': string;
+    'stepper-square-border': string;
+    'stepper-square-border-radius': string;
+    'stepper-square-background-color': string;
+    'stepper-round-button-border-radius': string;
+    'stepper-round-input-background-color': string;
+    'stepper-button-size': string;
+    'stepper-button-icon-size': string;
+    'stepper-default-background-color': string;
+    'stepper-content-color': string;
+    'stepper-disable-color': string;
+    'stepper-input-width': string;
+    'stepper-input-height': string;
+    'stepper-input-margin': string;
 }
 declare const tokens: ArcodesignToken;
 export default tokens;

package/tokens/app/arcodesign/default/index.js

@@ -95,6 +95,7 @@ var tokens = {
   "input-disabled-color": "#c9cdd4",
   "input-placeholder-color": "#c9cdd4",
   "input-clear-icon-color": "#c9cdd4",
+  "input-clear-icon-font-size": "16PX",
   "input-label-gutter": "0.48rem",
   "input-horizontal-padding": "0.32rem",
   "input-vertical-padding": "0.24rem",
@@ -711,7 +712,21 @@ var tokens = {
   "image-picker-close-width": "0.36rem",
   "image-picker-close-height": "0.36rem",
   "image-picker-close-background": "rgba(0, 0, 0, 0.3)",
-  "image-picker-close-border-radius": "0 0.04rem"
+  "image-picker-close-border-radius": "0 0.04rem",
+  "stepper-font-size": "0.28rem",
+  "stepper-square-border": "1PX solid #f2f3f5",
+  "stepper-square-border-radius": "0.04rem",
+  "stepper-square-background-color": "#ffffff",
+  "stepper-round-button-border-radius": "50%",
+  "stepper-round-input-background-color": "transparent",
+  "stepper-button-size": "0.56rem",
+  "stepper-button-icon-size": "0.2rem",
+  "stepper-default-background-color": "#f7f8fa",
+  "stepper-content-color": "#1d2129",
+  "stepper-disable-color": "#c9cdd4",
+  "stepper-input-width": "0.8rem",
+  "stepper-input-height": "0.56rem",
+  "stepper-input-margin": "0 1PX"
 };
 var _default = tokens;
 exports["default"] = _default;

package/tokens/app/arcodesign/default/index.json

@@ -3695,6 +3695,18 @@
             "en": "Input clear icon color"
         }
     },
+    "inputClearIconFontSize": {
+        "cssKey": "input-clear-icon-font-size",
+        "desc": "输入框 清除图标大小",
+        "override": "",
+        "value": "16PX",
+        "jsValue": "16PX",
+        "staticValue": "16PX",
+        "localeDesc": {
+            "ch": "输入框 清除图标大小",
+            "en": "Input clear icon font size"
+        }
+    },
     "inputDisabledBackground": {
         "cssKey": "input-disabled-background",
         "desc": "输入框 禁用状态输入框背景色",
@@ -6191,6 +6203,174 @@
             "en": "Label distance  of horizoverticalntal slider from the right of the mark"
         }
     },
+    "stepperButtonIconSize": {
+        "cssKey": "stepper-button-icon-size",
+        "desc": "步进器按钮图标尺寸",
+        "override": "",
+        "value": "~`pxtorem(10)`",
+        "jsValue": "@getRem@10",
+        "staticValue": "0.2rem",
+        "localeDesc": {
+            "ch": "步进器按钮图标尺寸",
+            "en": "Button icon size of Stepper"
+        }
+    },
+    "stepperButtonSize": {
+        "cssKey": "stepper-button-size",
+        "desc": "步进器按钮尺寸",
+        "override": "",
+        "value": "~`pxtorem(28)`",
+        "jsValue": "@getRem@28",
+        "staticValue": "0.56rem",
+        "localeDesc": {
+            "ch": "步进器按钮尺寸",
+            "en": "Button size of Stepper"
+        }
+    },
+    "stepperContentColor": {
+        "cssKey": "stepper-content-color",
+        "desc": "步进器内容字体颜色",
+        "override": "",
+        "value": "#1d2129",
+        "jsValue": "#1d2129",
+        "staticValue": "#1d2129",
+        "localeDesc": {
+            "ch": "步进器内容字体颜色",
+            "en": "Content text color of Stepper"
+        }
+    },
+    "stepperDefaultBackgroundColor": {
+        "cssKey": "stepper-default-background-color",
+        "desc": "步进器默认背景颜色",
+        "override": "",
+        "value": "#f7f8fa",
+        "jsValue": "#f7f8fa",
+        "staticValue": "#f7f8fa",
+        "localeDesc": {
+            "ch": "步进器默认背景颜色",
+            "en": "Background default colr of Stepper"
+        }
+    },
+    "stepperDisableColor": {
+        "cssKey": "stepper-disable-color",
+        "desc": "步进器禁用状态字体颜色",
+        "override": "",
+        "value": "#c9cdd4",
+        "jsValue": "#c9cdd4",
+        "staticValue": "#c9cdd4",
+        "localeDesc": {
+            "ch": "步进器禁用状态字体颜色",
+            "en": "Text color of Stepper in disable status"
+        }
+    },
+    "stepperFontSize": {
+        "cssKey": "stepper-font-size",
+        "desc": "步进器字体大小",
+        "override": "",
+        "value": "~`pxtorem(14)`",
+        "jsValue": "@getRem@14",
+        "staticValue": "0.28rem",
+        "localeDesc": {
+            "ch": "步进器字体大小",
+            "en": "Font size of Stepper"
+        }
+    },
+    "stepperInputHeight": {
+        "cssKey": "stepper-input-height",
+        "desc": "步进器输入框长度",
+        "override": "",
+        "value": "~`pxtorem(28)`",
+        "jsValue": "@getRem@28",
+        "staticValue": "0.56rem",
+        "localeDesc": {
+            "ch": "步进器输入框长度",
+            "en": "Input height of Stepper"
+        }
+    },
+    "stepperInputMargin": {
+        "cssKey": "stepper-input-margin",
+        "desc": "步进器输入框外边距",
+        "override": "",
+        "value": "0 1PX",
+        "jsValue": "0 1PX",
+        "staticValue": "0 1PX",
+        "localeDesc": {
+            "ch": "步进器输入框外边距",
+            "en": "Input margin of Stepper"
+        }
+    },
+    "stepperInputWidth": {
+        "cssKey": "stepper-input-width",
+        "desc": "步进器输入框宽度",
+        "override": "",
+        "value": "~`pxtorem(40)`",
+        "jsValue": "@getRem@40",
+        "staticValue": "0.8rem",
+        "localeDesc": {
+            "ch": "步进器输入框宽度",
+            "en": "Input width of Stepper"
+        }
+    },
+    "stepperRoundButtonBorderRadius": {
+        "cssKey": "stepper-round-button-border-radius",
+        "desc": "步进器圆角按钮边框半径",
+        "override": "",
+        "value": "50%",
+        "jsValue": "50%",
+        "staticValue": "50%",
+        "localeDesc": {
+            "ch": "步进器圆角按钮边框半径",
+            "en": "Round button border radius of Stepper"
+        }
+    },
+    "stepperRoundInputBackgroundColor": {
+        "cssKey": "stepper-round-input-background-color",
+        "desc": "步进器圆角输入框背景颜色",
+        "override": "",
+        "value": "transparent",
+        "jsValue": "transparent",
+        "staticValue": "transparent",
+        "localeDesc": {
+            "ch": "步进器圆角输入框背景颜色",
+            "en": "Rount input background color of Stepper"
+        }
+    },
+    "stepperSquareBackgroundColor": {
+        "cssKey": "stepper-square-background-color",
+        "desc": "步进器方角样式背景颜色",
+        "override": "",
+        "value": "#ffffff",
+        "jsValue": "#ffffff",
+        "staticValue": "#ffffff",
+        "localeDesc": {
+            "ch": "步进器方角样式背景颜色",
+            "en": "Background color of Stepper square style"
+        }
+    },
+    "stepperSquareBorder": {
+        "cssKey": "stepper-square-border",
+        "desc": "步进器方角边框样式",
+        "override": "",
+        "value": "1PX solid #f2f3f5",
+        "jsValue": "1PX solid #f2f3f5",
+        "staticValue": "1PX solid #f2f3f5",
+        "localeDesc": {
+            "ch": "步进器方角边框样式",
+            "en": "Square border style of Stepper"
+        }
+    },
+    "stepperSquareBorderRadius": {
+        "cssKey": "stepper-square-border-radius",
+        "desc": "步进器方角边框半径",
+        "override": "",
+        "value": "~`pxtorem(2)`",
+        "jsValue": "@getRem@2",
+        "staticValue": "0.04rem",
+        "localeDesc": {
+            "ch": "步进器方角边框半径",
+            "en": "Square border radius of Stepper"
+        }
+    },
     "stepsDescriptionColor": {
         "cssKey": "steps-description-color",
         "desc": "steps 步骤默认描述文字颜色",

package/tokens/app/arcodesign/default/index.less

@@ -83,6 +83,7 @@
 @input-disabled-color: @disabled-color;
 @input-placeholder-color: @disabled-color;
 @input-clear-icon-color: @disabled-color;
+@input-clear-icon-font-size: 16PX;
 @input-label-gutter: ~`pxtorem(24)`;
 @input-horizontal-padding: ~`pxtorem(16)`;
 @input-vertical-padding: ~`pxtorem(12)`;
@@ -700,4 +701,18 @@
 @image-picker-close-height: ~`pxtorem(18)`;
 @image-picker-close-background: rgba(0, 0, 0, 0.3);
 @image-picker-close-border-radius: 0 ~`pxtorem(2)`;
+@stepper-font-size: ~`pxtorem(14)`;
+@stepper-square-border: 1PX solid #f2f3f5;
+@stepper-square-border-radius: ~`pxtorem(2)`;
+@stepper-square-background-color: #ffffff;
+@stepper-round-button-border-radius: 50%;
+@stepper-round-input-background-color: transparent;
+@stepper-button-size: ~`pxtorem(28)`;
+@stepper-button-icon-size: ~`pxtorem(10)`;
+@stepper-default-background-color: #f7f8fa;
+@stepper-content-color: #1d2129;
+@stepper-disable-color: #c9cdd4;
+@stepper-input-width: ~`pxtorem(40)`;
+@stepper-input-height: ~`pxtorem(28)`;
+@stepper-input-margin: 0 1PX;
 

package/tools/flexible.js

@@ -1,82 +1,101 @@
-"use strict";
+(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.setRootPixel = mod.exports.default;
+    }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports) {
+
+    "use strict";
 
-function setRootPixel(base, sketch, max) {
-    var baseFontSize = base || 50;
-    var sketchWidth = sketch || 375;
-    var maxFontSize = max || 64;
-    var defaultFontSize = 0;
+    _exports.__esModule = true;
+    _exports.default = void 0;
 
-    function getDefaultFontSize() {
-        if (defaultFontSize) {
+    function setRootPixel(base, sketch, max) {
+        var baseFontSize = base || 50;
+        var sketchWidth = sketch || 375;
+        var maxFontSize = max || 64;
+        var defaultFontSize = 0;
+
+        function getDefaultFontSize() {
+            if (defaultFontSize) {
+                return defaultFontSize;
+            }
+
+            document.documentElement.style.fontSize = '';
+            var temp = document.createElement('div');
+            temp.style.cssText = 'width:1rem;display:none';
+            document.head.appendChild(temp);
+            defaultFontSize = +window.getComputedStyle(temp, null).getPropertyValue('width').replace('px', '') || 16;
+            document.head.removeChild(temp);
             return defaultFontSize;
         }
 
-        document.documentElement.style.fontSize = '';
-        var temp = document.createElement('div');
-        temp.style.cssText = 'width:1rem;display:none';
-        document.head.appendChild(temp);
-        defaultFontSize = +window.getComputedStyle(temp, null).getPropertyValue('width').replace('px', '') || 16;
-        document.head.removeChild(temp);
-        return defaultFontSize;
-    }
+        function getQuery(name) {
+            return (new RegExp("[?&]".concat(name, "=([^&#\\b]+)")).exec(location.search || '') || [])[1];
+        }
 
-    function getQuery(name) {
-        return (new RegExp("[?&]".concat(name, "=([^&#\\b]+)")).exec(location.search || '') || [])[1];
-    }
+        function setRootFontSize() {
+            var widthQueryKey = '';
+            var rem2px = baseFontSize;
+            var clientWidth;
 
-    function setRootFontSize() {
-        var widthQueryKey = '';
-        var rem2px = baseFontSize;
-        var clientWidth;
-
-        if (widthQueryKey && +getQuery(widthQueryKey)) {
-            clientWidth = +getQuery(widthQueryKey);
-        } else {
-            clientWidth = window.innerWidth && document.documentElement.clientWidth
-                ? Math.min(window.innerWidth, document.documentElement.clientWidth)
-                : window.innerWidth
-                    || document.documentElement.clientWidth
-                    || document.body && document.body.clientWidth
-                    || sketchWidth;
+            if (widthQueryKey && +getQuery(widthQueryKey)) {
+                clientWidth = +getQuery(widthQueryKey);
+            } else {
+                clientWidth = window.innerWidth && document.documentElement.clientWidth
+                    ? Math.min(window.innerWidth, document.documentElement.clientWidth)
+                    : window.innerWidth
+                        || document.documentElement.clientWidth
+                        || document.body && document.body.clientWidth
+                        || sketchWidth;
+            }
+            var htmlFontSizePx = clientWidth / sketchWidth * rem2px;
+            htmlFontSizePx = Math.min(htmlFontSizePx, maxFontSize);
+            window.ROOT_FONT_SIZE = htmlFontSizePx;
+            document.documentElement.style.fontSize = "".concat(htmlFontSizePx / getDefaultFontSize() * 100, "%");
         }
-        var htmlFontSizePx = clientWidth / sketchWidth * rem2px;
-        htmlFontSizePx = Math.min(htmlFontSizePx, maxFontSize);
-        window.ROOT_FONT_SIZE = htmlFontSizePx;
-        document.documentElement.style.fontSize = "".concat(htmlFontSizePx / getDefaultFontSize() * 100, "%");
-    }
 
-    function adjust(immediate) {
-        if (immediate) {
-            setRootFontSize();
-            return;
+        function adjust(immediate) {
+            if (immediate) {
+                setRootFontSize();
+                return;
+            }
+
+            setTimeout(setRootFontSize, 30);
         }
 
-        setTimeout(setRootFontSize, 30);
-    }
+        function removeRootPixel() {
+            document.documentElement.style.fontSize = '';
+            window.removeEventListener('resize', adjust, false);
+            if ('onorientationchange' in window) {
+                window.removeEventListener('orientationchange', adjust, false);
+            }
+        }
 
-    function removeRootPixel() {
-        document.documentElement.style.fontSize = '';
-        window.removeEventListener('resize', adjust, false);
-        if ('onorientationchange' in window) {
-            window.removeEventListener('orientationchange', adjust, false);
+        if (window.isResponsive === false) {
+            document.documentElement.style.fontSize = "".concat(baseFontSize, "px");
+            return function () {
+                document.documentElement.style.fontSize = '';
+            };
         }
-    }
 
-    if (window.isResponsive === false) {
-        document.documentElement.style.fontSize = "".concat(baseFontSize, "px");
-        return function () {
-            document.documentElement.style.fontSize = '';
-        };
-    }
+        adjust(true);
+        window.addEventListener('resize', adjust, false);
 
-    adjust(true);
-    window.addEventListener('resize', adjust, false);
+        if ('onorientationchange' in window) {
+            window.addEventListener('orientationchange', adjust, false);
+        }
 
-    if ('onorientationchange' in window) {
-        window.addEventListener('orientationchange', adjust, false);
+        return removeRootPixel;
     }
 
-    return removeRootPixel;
-}
+    _exports.default = setRootPixel;
 
-module.exports = setRootPixel;
+});