@arco-design/mobile-react 2.22.2 → 2.23.0

package/cjs/stepper/style/css/index.css

@@ -0,0 +1,76 @@
+.arco-stepper {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  font-size:  0.28rem ;
+}
+.arco-stepper.arco-square {
+  border:  1PX solid #f2f3f5 ;
+  border-radius:  0.04rem ;
+}
+.arco-stepper.arco-square .arco-stepper-add-button,
+.arco-stepper.arco-square .arco-stepper-minus-button,
+.arco-stepper.arco-square .arco-stepper-input {
+  background:  #ffffff ;
+}
+.arco-stepper.arco-square .arco-stepper-input {
+  border-left:  1PX solid #f2f3f5 ;
+  border-right:  1PX solid #f2f3f5 ;
+}
+.arco-stepper.arco-round .arco-stepper-minus-button,
+.arco-stepper.arco-round .arco-stepper-add-button {
+  border-radius:  50% ;
+}
+.arco-stepper.arco-round .arco-stepper-input {
+  background:  transparent ;
+}
+.arco-stepper-minus-button {
+  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.2rem ;
+  width:  0.56rem ;
+  height:  0.56rem ;
+  background:  #f7f8fa ;
+}
+.arco-stepper-minus-button-icon {
+  color:  #1d2129 ;
+}
+.arco-stepper-minus-button-icon.disabled {
+  color:  #c9cdd4 ;
+}
+.arco-stepper-input {
+  text-align: center;
+  width:  0.8rem ;
+  height:  0.56rem ;
+  background:  #f7f8fa ;
+  color:  #1d2129 ;
+  margin:  0 1PX ;
+}
+.arco-stepper-add-button {
+  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.2rem ;
+  width:  0.56rem ;
+  height:  0.56rem ;
+  background:  #f7f8fa ;
+}
+.arco-stepper-add-button-icon {
+  color:  #1d2129 ;
+}
+.arco-stepper-add-button-icon.disabled {
+  color:  #c9cdd4 ;
+}

package/cjs/stepper/style/css/index.d.ts

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

package/cjs/stepper/style/css/index.js

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

package/cjs/stepper/style/index.d.ts

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

package/cjs/stepper/style/index.js

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

package/cjs/stepper/style/index.less

@@ -0,0 +1,80 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-stepper {
+    display: flex;
+    .use-var(font-size, stepper-font-size);
+
+    &.@{prefix}-square {
+        .use-var(border, stepper-square-border);
+        .use-var(border-radius, stepper-square-border-radius);
+
+        .@{prefix}-stepper {
+            &-add-button,
+            &-minus-button,
+            &-input {
+                .use-var(background, stepper-square-background-color);
+            }
+            &-input {
+                .use-var(border-left, stepper-square-border);
+                .use-var(border-right, stepper-square-border);
+            }
+        }
+    }
+
+    &.@{prefix}-round {
+        .@{prefix}-stepper {
+            &-minus-button,
+            &-add-button {
+                .use-var(border-radius, stepper-round-button-border-radius);
+            }
+            &-input {
+                .use-var(background, stepper-round-input-background-color);
+            }
+        }
+    }
+
+    &-minus-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .use-var(font-size, stepper-button-icon-size);
+        .use-var(width, stepper-button-size);
+        .use-var(height, stepper-button-size);
+        .use-var(background, stepper-default-background-color);
+
+        &-icon {
+            .use-var(color, stepper-content-color);
+
+            &.disabled {
+                .use-var(color, stepper-disable-color);
+            }
+        }
+    }
+
+    &-input {
+        text-align: center;
+        .use-var(width, stepper-input-width);
+        .use-var(height, stepper-input-height);
+        .use-var(background, stepper-default-background-color);
+        .use-var(color, stepper-content-color);
+        .use-var(margin, stepper-input-margin);
+    }
+
+    &-add-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .use-var(font-size, stepper-button-icon-size);
+        .use-var(width, stepper-button-size);
+        .use-var(height, stepper-button-size);
+        .use-var(background, stepper-default-background-color);
+
+        &-icon {
+            .use-var(color, stepper-content-color);
+
+            &.disabled {
+                .use-var(color, stepper-disable-color);
+            }
+        }
+    }
+}

package/cjs/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/cjs/stepper/type.js

@@ -0,0 +1,3 @@
+"use strict";
+
+exports.__esModule = true;

package/cjs/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/cjs/style.js

@@ -90,6 +90,8 @@ require("./slider/style");
 
 require("./search-bar/style");
 
+require("./stepper/style");
+
 require("./steps/style");
 
 require("./sticky/style");