@momo-kits/stepper 0.112.1-beta.11 → 0.112.1-beta.13

package/NumberView.tsx

@@ -10,7 +10,7 @@ const NumberView: FC<StepperValueProps> = ({
   editable = false,
   onValueChange,
   disabled,
-  accessibilityLabel,
+  componentId,
 }) => {
   const {theme} = useContext(ApplicationContext);
   const sizeStyle =
@@ -40,10 +40,8 @@ const NumberView: FC<StepperValueProps> = ({
         onChangeText={onValueChange}
         keyboardType={'number-pad'}
         selectionColor={theme.colors.primary}
-        accessibilityLabel={accessibilityLabel}
-        accessibilityState={{
-          disabled: !editable,
-        }}
+        accessibilityLabel={`${componentId}|input`}
+        accessibilityState={{disabled}}
       />
     </View>
   );

package/StepperButton.tsx

@@ -9,7 +9,7 @@ const StepperButton: FC<StepperButtonProps> = ({
   sign = '+',
   size = 'large',
   onPress,
-  accessibilityLabel,
+  componentId,
 }) => {
   const {theme} = useContext(ApplicationContext);
 
@@ -21,9 +21,14 @@ const StepperButton: FC<StepperButtonProps> = ({
     : theme.colors.primary;
 
   return (
-    <TouchableOpacity accessibilityLabel={accessibilityLabel} accessibilityState={{
-      disabled,
-    }} disabled={disabled} onPress={onPress} style={[sizeStyle]}>
+    <TouchableOpacity
+      disabled={disabled}
+      onPress={onPress}
+      style={[sizeStyle]}
+      accessibilityState={{disabled}}
+      accessibilityLabel={`${componentId}|${
+        sign === '+' ? 'plus' : 'minus'
+      }-touch`}>
       <Icon size={22} color={buttonColor} source={buttonIcon} />
     </TouchableOpacity>
   );

package/index.tsx

@@ -1,7 +1,9 @@
 import React, {
   forwardRef,
+  useContext,
   useEffect,
   useImperativeHandle,
+  useMemo,
   useState,
 } from 'react';
 import {View} from 'react-native';
@@ -9,6 +11,7 @@ import StepperButton from './StepperButton';
 import {DisabledStatus, StepperProps} from './types';
 import styles from './styles';
 import NumberView from './NumberView';
+import {MiniAppContext, ScreenContext} from '@momo-kits/foundation';
 
 const Stepper = forwardRef(
   (
@@ -22,14 +25,23 @@ const Stepper = forwardRef(
       editable = false,
       onValueChange,
       accessibilityLabel,
-      accessbibilityLabelMinus,
-      accessbibilityLabelPlus,
-      accessbibilityLabelNumber
     }: StepperProps,
     ref
   ) => {
     const [value, setValue] = useState(defaultValue);
 
+    const app = useContext<any>(MiniAppContext);
+    const screen = useContext<any>(ScreenContext);
+    const componentName = 'Stepper';
+
+    const componentId = useMemo(() => {
+      if (accessibilityLabel) {
+        return accessibilityLabel;
+      }
+      let id = `${app.appId}/${app.code}/${screen.screenName}/${componentName}`;
+      return id;
+    }, [componentName, accessibilityLabel, app, screen]);
+
     useImperativeHandle(ref, () => ({
       setStepValue: (value: React.SetStateAction<number>) => {
         setValue(value);
@@ -96,13 +108,13 @@ const Stepper = forwardRef(
     const viewStatus = getViewDisabledStatus();
 
     return (
-      <View style={styles.stepper} accessibilityLabel={accessibilityLabel}>
+      <View style={styles.stepper} accessibilityLabel={componentId}>
         <StepperButton
           onPress={onMinus}
           sign={'-'}
           size={size}
           disabled={viewStatus.minus}
-          accessibilityLabel={accessbibilityLabelMinus}
+          componentId={componentId}
         />
         <NumberView
           onValueChange={_onValueChange}
@@ -110,13 +122,13 @@ const Stepper = forwardRef(
           value={value}
           disabled={viewStatus.number}
           editable={editable}
-          accessibilityLabel={accessbibilityLabelNumber}
+          componentId={componentId}
         />
         <StepperButton
           onPress={onPlus}
           size={size}
           disabled={viewStatus.plus}
-          accessibilityLabel={accessbibilityLabelPlus}
+          componentId={componentId}
         />
       </View>
     );

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/stepper",
-    "version": "0.112.1-beta.11",
+    "version": "0.112.1-beta.13",
     "private": false,
     "main": "index.tsx",
     "dependencies": {},

package/styles.ts

@@ -1,5 +1,5 @@
 import {StyleSheet} from 'react-native';
-import {Colors, Radius, Spacing} from '@momo-kits/foundation';
+import {Colors, Radius, scaleSize, Spacing} from '@momo-kits/foundation';
 
 export default StyleSheet.create({
   button: {
@@ -49,7 +49,7 @@ export default StyleSheet.create({
     marginHorizontal: Spacing.S,
   },
   input: {
-    fontSize: 12,
+    fontSize: scaleSize(12),
     paddingVertical: 0,
     textAlign: 'center',
   },

package/types.ts

@@ -29,7 +29,7 @@ export type StepperButtonProps = {
   /**
    * Optional. Assign accessibility label to the button for automated testing.
    */
-  accessibilityLabel?: string;
+  componentId: string;
 };
 
 /**
@@ -67,7 +67,7 @@ export type StepperValueProps = {
   /**
    * Optional. Assign accessibility label to the button for automated testing.
    */
-  accessibilityLabel?: string;
+  componentId: string;
 };
 
 /**
@@ -126,21 +126,6 @@ export type StepperProps = {
    * Optional. Assign accessibility label to the button for automated testing.
    */
   accessibilityLabel?: string;
-
-  /**
-   * Optional. Assign accessibility label to the button for automated testing.
-   */
-  accessbibilityLabelPlus?: string;
-
-  /**
-   * Optional. Assign accessibility label to the button for automated testing.
-   */
-  accessbibilityLabelMinus?: string;
-
-  /**
-   * Optional. Assign accessibility label to the button for automated testing.
-   */
-  accessbibilityLabelNumber?: string;
 };
 
 /**