@momo-kits/stepper 0.167.2-beta.1 → 0.168.1-beta.1

package/NumberView.tsx

@@ -30,23 +30,20 @@ const NumberView: FC<StepperValueProps> = ({
     }
   };
 
-  const textColor = disabled
-    ? theme.colors.text.disable
-    : theme.colors.text.default;
+  const { colors } = theme;
+  const textColor = disabled ? colors.text.disable : colors.text.default;
 
-  const borderColor = disabled
-    ? theme.colors.border.disable
-    : theme.colors.border.default;
+  const borderColor = disabled ? colors.border.disable : colors.border.default;
+
+  const isLarge = size === 'large';
+  const isWeb = Platform.OS === 'web';
+  const inputWidth = isLarge ? 32 : 28;
+  const sizeStyle = {
+    height: isLarge ? scaledHeight28 : scaledHeight24,
+    ...(isWeb ? { width: inputWidth } : { minWidth: inputWidth }),
+  };
   return (
-    <View
-      style={[
-        styles.numberViewBase,
-        size === 'large'
-          ? { height: scaledHeight28, ...(Platform.OS === 'web' ? { width: 32 } : { minWidth: 32 }) }
-          : { height: scaledHeight24, ...(Platform.OS === 'web' ? { width: 28 } : { minWidth: 28 }) },
-        { borderColor },
-      ]}
-    >
+    <View style={[styles.numberViewBase, sizeStyle, { borderColor }]}>
       <TextInput
         allowFontScaling={false}
         editable={editable}
@@ -58,7 +55,7 @@ const NumberView: FC<StepperValueProps> = ({
         value={formattedNumber(value)}
         onChangeText={onValueChange}
         keyboardType={'number-pad'}
-        selectionColor={theme.colors.primary}
+        selectionColor={colors.primary}
         accessibilityLabel={`${componentId}|input`}
         accessibilityState={{ disabled }}
       />

package/StepperButton.tsx

@@ -13,12 +13,14 @@ const StepperButton: FC<StepperButtonProps> = ({
 }) => {
   const {theme} = useContext(ApplicationContext);
 
+  const colors = theme.colors;
+
   const sizeStyle = size === 'large' ? styles.button : styles.smallButton;
-  const buttonIcon =
-    sign === '-' ? '24_navigation_minus_circle' : '24_navigation_plus_circle';
-  const buttonColor = disabled
-    ? theme.colors.text.disable
-    : theme.colors.primary;
+  let buttonIcon = '24_navigation_plus_circle';
+  if (sign === '-') {
+    buttonIcon = '24_navigation_minus_circle';
+  }
+  const buttonColor = disabled ? colors.text.disable : colors.primary;
 
   return (
     <TouchableOpacity

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/stepper",
-    "version": "0.167.2-beta.1",
+    "version": "0.168.1-beta.1",
     "private": false,
     "main": "index.tsx",
     "peerDependencies": {