fix: 修改部分 stepper 组件错误 与完善类型描述 (#99)

.changeset/odd-rings-build.md

@@ -0,0 +1,7 @@
+---
+"ossaui": patch
+"ossa-demo": patch
+"ossa-doc": patch
+---
+
+fix: 修改部分 stepper 组件错误 与完善类型描述

packages/ossa-demo/src/components/stepper/demo/index.tsx

@@ -79,7 +79,7 @@ const initialListEvent = {
       list: ["onBlur", "输入框失去焦点时触发", "event对象"],
     },
     {
-      list: ["onErrorInput", "错误输入时触发", "错误数值"],
+      list: ["onErrorInput", "错误输入时触发", "错误数值 {type: 'DISABLED' | 'LOW' | 'OVER', errorValue: number}"],
     },
     {
       list: ["onDisabledAdd", "到达最大值之后点击增加触发", "当前数值"],
@@ -154,7 +154,7 @@ export default function Index(props: Props) {
 
       <DemoBlock title='数量不可编辑'>
         <OsStepper
-          isReadonly
+          readonly
           value={current1}
           onChange={(value) => {
             onChange1(value, setCurrent1);
@@ -164,7 +164,7 @@ export default function Index(props: Props) {
 
       <DemoBlock title='不可点击'>
         <OsStepper
-          isDisabled
+          disabled
           value={current2}
           onChange={(value) => {
             onChange2(value, setCurrent2);

packages/ossa-doc/docs/组件/stepper.md

@@ -64,7 +64,7 @@ demo_url: 'https://neteaseyanxuan.github.io/OSSA/#/components/stepper/demo/index
 |onSubtract|点击减时触发|当前数值|
 |onChange|输入框值改变时触发的事件，开发者需要通过 onChange 事件来更新 current 值变化，onChange 函数必选|当前数值|
 |onBlur|输入框失去焦点时触发|event对象|
-|onErrorInput|错误输入时触发|错误数值|
+|onErrorInput|错误输入时触发|错误数值 {type: "DISABLED" \| "LOW" \| "OVER", errorValue: number}|
 |onDisabledAdd|到达最大值之后点击增加触发|当前数值|
 |onDisabledSubtract|到达最小值之后点击增加触发|当前数值|
 

packages/ossa/src/components/stepper/index.tsx

@@ -1,34 +1,27 @@
 import React from "react";
-import { View, Input } from "@tarojs/components";
+import { View, Input, BaseEventOrig, InputProps } from "@tarojs/components";
 import classNames from "classnames";
 import _toString from "lodash/toString";
 // //引入组件对应的 类型文件 .d.ts
 import { OsStepperProps } from "../../../types/index";
 import OsIcon from "../icon";
-import { deprecatedProp } from "../../utils"
+import { deprecatedProp } from "../../utils";
+import { InputErrorParam } from "../../../types/stepper";
 
 const mergeReadonly = (optionProps: OsStepperProps) => {
-  return deprecatedProp(
-    optionProps.readonly,
-    optionProps.isReadonly,
-    {
-      newPropName: "readonly",
-      oldPropName: "isReadonly",
-      moduleName: "Stepper"
-    }
-  );
-}
+  return deprecatedProp(optionProps.readonly, optionProps.isReadonly, {
+    newPropName: "readonly",
+    oldPropName: "isReadonly",
+    moduleName: "Stepper",
+  });
+};
 const mergeDisabled = (optionProps: OsStepperProps) => {
-  return deprecatedProp(
-    optionProps.disabled,
-    optionProps.isDisabled,
-    {
-      newPropName: "disabled",
-      oldPropName: "isDisabled",
-      moduleName: "Stepper"
-    }
-  );
-}
+  return deprecatedProp(optionProps.disabled, optionProps.isDisabled, {
+    newPropName: "disabled",
+    oldPropName: "isDisabled",
+    moduleName: "Stepper",
+  });
+};
 
 // 实现两数相加并保留小数点后最短尾数
 function addNum(num1, num2) {
@@ -63,12 +56,7 @@ export default function Stepper(props: OsStepperProps) {
   const mergedDisabled = mergeDisabled(props);
   const mergedReadonly = mergeReadonly(props);
   function onClick(clickType: string) {
-    const {
-      value,
-      min = 1,
-      max = 99,
-      step = 1,
-    } = props;
+    const { value, min = 1, max = 99, step = 1 } = props;
     const lowThanMin = clickType === "minus" && value <= min;
     const overThanMax = clickType === "plus" && value >= max;
 
@@ -124,9 +112,9 @@ export default function Stepper(props: OsStepperProps) {
     return resultValue;
   }
 
-  function onInput(e) {
-    const { value } = e.target;
-    if(mergedDisabled || mergedReadonly) return;
+  function onInput(e: BaseEventOrig<InputProps.inputValueEventDetail>) {
+    const { value } = e.detail;
+    if (mergedDisabled || mergedReadonly) return;
 
     // input时只做数字转换，且允许删空，改在blur时处理值
     let newValue: any = value === "" ? "" : parseValue(value);
@@ -139,15 +127,15 @@ export default function Stepper(props: OsStepperProps) {
     return newValue;
   }
 
-  function onBlur(event) {
-    const value = event.target.value;
+  function onBlur(event: BaseEventOrig<InputProps.inputValueEventDetail>) {
+    const value = event.detail.value;
     const newValue = handleValue(value);
     value !== newValue && props.onChange(newValue);
 
     props.onBlur?.(event);
   }
 
-  function handleError(errorValue) {
+  function handleError(errorValue: InputErrorParam) {
     if (!props.onErrorInput) {
       return;
     }
@@ -163,12 +151,7 @@ export default function Stepper(props: OsStepperProps) {
     return _classObject;
   }
 
-  const {
-    customStyle,
-    value,
-    min = 1,
-    max = 99,
-  } = props;
+  const { customStyle, value, min = 1, max = 99 } = props;
 
   const inputValue = handleValue(value);
   const rootClassName = [
@@ -237,8 +220,8 @@ Stepper.defaultProps = {
   step: 1,
   value: 1,
   customStyle: {},
-  isReadonly: false,
-  isDisabled: false,
+  readonly: false,
+  disabled: false,
 };
 
 Stepper.options = {

packages/ossa/types/stepper.d.ts

@@ -1,6 +1,23 @@
 import { ComponentClass, ReactChild } from "react";
 import OsComponent from "./base";
 
+
+export type InputErrorParam = {
+  /**
+   * 错误类型
+   * @desc
+   * - DISABLED: 步进器处于禁用状态时触发
+   * - LOW: 操作后小于最小值时触发
+   * - OVER: 操作后大于最小值时触发
+   */
+  type: "DISABLED" | "LOW" | "OVER",
+  /**
+   * 矫正后的值
+   * @desc 如果输入值小于最小值则为最小值，大于最大值则为最大值
+   */
+  errorValue: number;
+};
+
 /**
  * @name 步进器
  */
@@ -42,13 +59,40 @@ interface StepperProps extends OsComponent {
    * @default 1
    */
   step?: number;
+  /**
+   * 当前步进器的值
+   */
   value: number;
+  /**
+   * 点击增加按钮回调
+   * @param value 最新值
+   */
   onAdd?: (value: number) => void;
+  /**
+   * 点击减少按钮回调
+   * @param value 最新值
+   */
   onSubtract?: (value: number) => void;
+  /**
+   * 当步进器改变时回调
+   */
   onChange: (value: number) => void;
-  onErrorInput?: (value: number) => void;
-  onBlur?: (event: any) => void;
+  /**
+   * 异常输入时回调
+   * @param info 异常输入的回调信息
+   */
+  onErrorInput?: (info: InputErrorParam) => void;
+  /**
+   * 失去焦点时回调
+   */
+  onBlur?: (event: BaseEventOrig<InputProps.inputValueEventDetail>) => void;
+  /**
+   * 禁止增加回调
+   */
   onDisabledAdd?: (value: number) => void;
+  /**
+   * 禁止减小回调
+   */
   onDisabledSubtract?: (value: number) => void;
 }