@momo-kits/stepper 0.103.1 → 0.103.2-rc.10

package/index.tsx

@@ -1,95 +1,120 @@
-import React, {FC, useState} from 'react';
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useState,
+} from 'react';
 import {View} from 'react-native';
 import StepperButton from './StepperButton';
 import {DisabledStatus, StepperProps} from './types';
 import styles from './styles';
 import NumberView from './NumberView';
 
-const Stepper: FC<StepperProps> = ({
-  size = 'large',
-  defaultValue = 0,
-  min = 0,
-  max = 100,
-  disabled = false,
-  step = 1,
-  editable = false,
-  onValueChange,
-}) => {
-  const [value, setValue] = useState(defaultValue);
+const Stepper = forwardRef(
+  (
+    {
+      size = 'large',
+      defaultValue = 0,
+      min = 0,
+      max = 100,
+      disabled = false,
+      step = 1,
+      editable = false,
+      onValueChange,
+    }: StepperProps,
+    ref
+  ) => {
+    const [value, setValue] = useState(defaultValue);
 
-  const onPlus = () => {
-    let newValue = value + step;
-    _onValueChange(newValue.toString());
-  };
-  const onMinus = () => {
-    let newValue = value - step;
-    _onValueChange(newValue.toString());
-  };
-  const _onValueChange = (num: string) => {
-    let newValue = parseInt(num);
+    useImperativeHandle(ref, () => ({
+      setStepValue: (value: React.SetStateAction<number>) => {
+        setValue(value);
+        _onValueChange(value.toString());
+      },
+    }));
 
-    if (isNaN(newValue)) {
-      newValue = 0;
-    }
+    useEffect(() => {
+      setValue(defaultValue);
+    }, [defaultValue]);
 
-    if (newValue > max) {
-      newValue = max;
-    }
+    const onPlus = () => {
+      let newValue = value + step;
+      _onValueChange(newValue.toString());
+    };
+    const onMinus = () => {
+      let newValue = value - step;
+      _onValueChange(newValue.toString());
+    };
+    const _onValueChange = (num: string) => {
+      let newValue = parseInt(num);
 
-    if (newValue < min) {
-      newValue = min;
-    }
+      if (isNaN(newValue)) {
+        newValue = 0;
+      }
 
-    setValue(newValue);
-    onValueChange?.(newValue);
-  };
-  const getViewDisabledStatus = () => {
-    let disabledStatus: DisabledStatus;
+      if (newValue > max) {
+        newValue = max;
+      }
 
-    if (Array.isArray(disabled)) {
-      disabledStatus = {
-        plus: disabled[1],
-        minus: disabled[0],
-        number: disabled[0] && disabled[1],
-      };
-    } else {
-      disabledStatus = {
-        plus: disabled,
-        minus: disabled,
-        number: disabled,
-      };
-    }
+      if (newValue < min) {
+        newValue = min;
+      }
 
-    if (value === min) {
-      disabledStatus.minus = true;
-    }
-    if (value === max) {
-      disabledStatus.plus = true;
-    }
-    return disabledStatus;
-  };
+      setValue(newValue);
+      onValueChange?.(newValue);
+    };
+    const getViewDisabledStatus = () => {
+      let disabledStatus: DisabledStatus;
 
-  const viewStatus = getViewDisabledStatus();
+      if (Array.isArray(disabled)) {
+        disabledStatus = {
+          plus: disabled[1],
+          minus: disabled[0],
+          number: disabled[0] && disabled[1],
+        };
+      } else {
+        disabledStatus = {
+          plus: disabled,
+          minus: disabled,
+          number: disabled,
+        };
+      }
 
-  return (
-    <View style={styles.stepper}>
-      <StepperButton
-        onPress={onMinus}
-        sign={'-'}
-        size={size}
-        disabled={viewStatus.minus}
-      />
-      <NumberView
-        onValueChange={_onValueChange}
-        size={size}
-        value={value}
-        disabled={viewStatus.number}
-        editable={editable}
-      />
-      <StepperButton onPress={onPlus} size={size} disabled={viewStatus.plus} />
-    </View>
-  );
-};
+      if (value === min) {
+        disabledStatus.minus = true;
+      }
+      if (value === max) {
+        disabledStatus.plus = true;
+      }
+      return disabledStatus;
+    };
+
+    const viewStatus = getViewDisabledStatus();
+
+    return (
+      <View style={styles.stepper}>
+        <StepperButton
+          onPress={onMinus}
+          sign={'-'}
+          size={size}
+          disabled={viewStatus.minus}
+        />
+        <NumberView
+          onValueChange={_onValueChange}
+          size={size}
+          value={value}
+          disabled={viewStatus.number}
+          editable={editable}
+        />
+        <StepperButton
+          onPress={onPlus}
+          size={size}
+          disabled={viewStatus.plus}
+        />
+      </View>
+    );
+  }
+);
 
 export {Stepper};
 export type {StepperProps};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/stepper",
-    "version": "0.103.1",
+    "version": "0.103.2-rc.10",
     "private": false,
     "main": "index.tsx",
     "dependencies": {},
@@ -14,4 +14,4 @@
         "@momo-platform/versions": "4.1.11"
     },
     "license": "MoMo"
-}
+}

package/publish.sh

@@ -7,15 +7,15 @@ rsync -r --exclude=/dist ./* dist
 cd dist
 
 if [ "$1" == "stable" ]; then
-  #npm version $(npm view @momo-kits/stepper@stable version)
-  #npm version patch
+  npm version $(npm view @momo-kits/foundation@stable version)
+  npm version patch
   npm publish --tag stable --access=public
 elif [ "$1" == "latest" ]; then
-  #npm version $(npm view @momo-kits/foundation@latest version)
+  npm version $(npm view @momo-kits/foundation@latest version)
   npm publish --tag latest --access=public
 else
-  #npm version $(npm view @momo-kits/stepper@beta version)
-  #npm version prerelease --preid=beta
+  npm version $(npm view @momo-kits/stepper@beta version)
+  npm version prerelease --preid=beta
   npm publish --tag beta --access=public
 fi
 

package/types.ts

@@ -133,3 +133,7 @@ export type DisabledStatus = {
    */
   number: boolean;
 };
+
+export type StepperRef = {
+  setStepValue: (value: number) => void;
+};