@momo-kits/stepper 0.153.2-beta.3 → 0.154.1-beta.0

package/NumberView.tsx

@@ -1,7 +1,7 @@
-import React, {FC, useContext} from 'react';
-import {TextInput, View, StyleSheet} from 'react-native';
-import {StepperValueProps} from './types';
-import {ApplicationContext, useScaleSize, Radius, Spacing} from '@momo-kits/foundation';
+import React, { FC, useContext } from 'react';
+import { TextInput, View } from 'react-native';
+import { StepperValueProps } from './types';
+import { ApplicationContext, useScaleSize } from '@momo-kits/foundation';
 import styles from './styles';
 
 const NumberView: FC<StepperValueProps> = ({
@@ -12,39 +12,10 @@ const NumberView: FC<StepperValueProps> = ({
   disabled,
   componentId,
 }) => {
-  const {theme} = useContext(ApplicationContext);
+  const { theme } = useContext(ApplicationContext);
   const scaledHeight28 = useScaleSize(28);
   const scaledHeight24 = useScaleSize(24);
   const scaledFontSize = useScaleSize(12);
-  
-  const dynamicStyles = StyleSheet.create({
-    numberView: {
-      minWidth: 32,
-      height: scaledHeight28,
-      borderWidth: 1,
-      borderRadius: Radius.S,
-      justifyContent: 'center',
-      alignItems: 'center',
-      marginHorizontal: Spacing.S,
-    },
-    numberViewSmall: {
-      minWidth: 28,
-      height: scaledHeight24,
-      borderWidth: 1,
-      borderRadius: Radius.S,
-      justifyContent: 'center',
-      alignItems: 'center',
-      marginHorizontal: Spacing.S,
-    },
-    input: {
-      fontSize: scaledFontSize,
-      paddingVertical: 0,
-      textAlign: 'center',
-    },
-  });
-  
-  const sizeStyle =
-    size === 'large' ? dynamicStyles.numberView : dynamicStyles.numberViewSmall;
 
   const formattedNumber = (value: number) => {
     if (isNaN(value)) {
@@ -62,17 +33,29 @@ const NumberView: FC<StepperValueProps> = ({
     ? theme.colors.border.disable
     : theme.colors.border.default;
   return (
-    <View style={[sizeStyle, {borderColor}]}>
+    <View
+      style={[
+        styles.numberViewBase,
+        size === 'large'
+          ? { minWidth: 32, height: scaledHeight28 }
+          : { minWidth: 28, height: scaledHeight24 },
+        { borderColor },
+      ]}
+    >
       <TextInput
         allowFontScaling={false}
         editable={editable}
-        style={[dynamicStyles.input, {color: textColor}]}
+        style={[
+          styles.numberViewInput,
+          { fontSize: scaledFontSize },
+          { color: textColor },
+        ]}
         value={formattedNumber(value)}
         onChangeText={onValueChange}
         keyboardType={'number-pad'}
         selectionColor={theme.colors.primary}
         accessibilityLabel={`${componentId}|input`}
-        accessibilityState={{disabled}}
+        accessibilityState={{ disabled }}
       />
     </View>
   );

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/stepper",
-    "version": "0.153.2-beta.3",
+    "version": "0.154.1-beta.0",
     "private": false,
     "main": "index.tsx",
     "peerDependencies": {

package/styles.ts

@@ -30,4 +30,15 @@ export default StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
   },
+  numberViewBase: {
+    borderWidth: 1,
+    borderRadius: Radius.S,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginHorizontal: Spacing.S,
+  },
+  numberViewInput: {
+    paddingVertical: 0,
+    textAlign: 'center',
+  },
 });