@momo-kits/foundation 0.92.2 → 0.92.3-tracking.2

package/Radio/index.tsx

@@ -4,18 +4,9 @@ import {TouchableOpacity, View} from 'react-native';
 import {RadioProps} from './types';
 import {Text} from '../Text';
 import styles from './styles';
-import {ApplicationContext} from '../Application';
+import {ApplicationContext, ComponentContext} from '../Application';
 import {Spacing} from '../Consts';
-import {
-  cleanNameForTracking,
-  formatNameLength,
-  getAccessibilityID,
-} from '../Application/utils';
-
-const {
-  ScreenContext,
-  MiniAppContext,
-} = require('react-native/Libraries/Components/ScreenContext');
+import {formatNameLength} from '../Application/utils';
 
 const Radio: FC<RadioProps> = ({
   value,
@@ -25,11 +16,9 @@ const Radio: FC<RadioProps> = ({
   label,
   style,
   params,
-  componentId,
+  accessibilityLabel,
 }) => {
-  const {appId, code} = useContext<any>(MiniAppContext);
   const {theme} = useContext(ApplicationContext);
-  const screenInfo = useContext<any>(ScreenContext);
   const selected = value === groupValue;
   let disabledStyle = {};
   let checkBoxStyle = {
@@ -51,26 +40,19 @@ const Radio: FC<RadioProps> = ({
     };
   }
 
-  const accessibilityID = getAccessibilityID?.(
-    `${appId}/${code}/${screenInfo.screenName}/rdo_${cleanNameForTracking(
-      label,
-    )}_${selected}`,
-  );
-
   return (
-    <ScreenContext.Provider
+    <ComponentContext.Provider
       value={{
-        ...screenInfo,
         componentName: 'Button',
         params,
         state: disabled ? 'disabled' : 'enabled',
-        componentId,
+        componentId: accessibilityLabel,
         componentLabel: formatNameLength(label || ''),
         componentValue: value,
         action: 'click',
       }}>
       <TouchableOpacity
-        {...accessibilityID}
+        accessibilityLabel={accessibilityLabel}
         onPress={onChange}
         disabled={disabled}
         style={[
@@ -90,7 +72,7 @@ const Radio: FC<RadioProps> = ({
         />
         {!!label && <Text typography={'body_default_regular'}>{label}</Text>}
       </TouchableOpacity>
-    </ScreenContext.Provider>
+    </ComponentContext.Provider>
   );
 };
 

package/Radio/types.ts

@@ -1,6 +1,6 @@
-import {ViewStyle} from 'react-native';
+import {TouchableOpacityProps, ViewStyle} from 'react-native';
 
-export type RadioProps = {
+export interface RadioProps extends TouchableOpacityProps {
   /**
    * `value`: Represents the value associated with the Radio component.
    * It is used to determine whether the Radio component is selected or not in comparison with the `groupValue`.
@@ -36,8 +36,5 @@ export type RadioProps = {
    */
   style?: ViewStyle;
 
-
-  params?: any
-
-  componentId?: string
-};
+  params?: any;
+}

package/Switch/index.tsx

@@ -1,20 +1,18 @@
-import React, {FC, useContext} from 'react';
+import React, {FC} from 'react';
 import {TouchableOpacity, View} from 'react-native';
 import {SwitchProps} from './types';
 import styles from './styles';
 import {Colors} from '../Consts';
-import {getAccessibilityID} from '../Application/utils';
-
-const {
-  ScreenContext,
-  MiniAppContext,
-} = require('react-native/Libraries/Components/ScreenContext');
-
-const Switch: FC<SwitchProps> = props => {
-  const {appId, code} = useContext<any>(MiniAppContext);
-  const {value, onChange, disabled, style, params, componentId} = props;
-  const screenInfo = useContext<any>(ScreenContext);
+import {ComponentContext} from '../Application';
 
+const Switch: FC<SwitchProps> = ({
+  value = false,
+  onChange,
+  disabled = false,
+  style,
+  params,
+  accessibilityLabel,
+}) => {
   const circleBackgroundColor = value ? Colors.black_01 : Colors.black_03;
   const circleAlign = value ? 'flex-end' : 'flex-start';
 
@@ -23,24 +21,19 @@ const Switch: FC<SwitchProps> = props => {
     backgroundColor = value ? Colors.green_09 : Colors.black_05;
   }
 
-  const accessibilityID = getAccessibilityID?.(
-    `${appId}/${code}/${screenInfo.screenName}/swt_${value}`,
-  );
-
   return (
-    <ScreenContext.Provider
+    <ComponentContext.Provider
       value={{
-        ...screenInfo,
         componentName: 'Button',
         params,
         state: disabled ? 'disabled' : 'enabled',
-        componentId,
+        componentId: accessibilityLabel,
         componentValue: value,
         action: 'click',
       }}>
       <TouchableOpacity
-        {...accessibilityID}
         disabled={disabled}
+        accessibilityLabel={accessibilityLabel}
         onPress={() => onChange?.(!value)}
         style={[
           style,
@@ -51,12 +44,8 @@ const Switch: FC<SwitchProps> = props => {
           <View style={[styles.circleSmall, {backgroundColor}]} />
         </View>
       </TouchableOpacity>
-    </ScreenContext.Provider>
+    </ComponentContext.Provider>
   );
 };
 
-Switch.defaultProps = {
-  value: false,
-  disabled: false,
-};
 export {Switch};

package/Switch/types.ts

@@ -1,6 +1,6 @@
-import {ViewStyle} from 'react-native';
+import {TouchableOpacityProps, ViewStyle} from 'react-native';
 
-export type SwitchProps = {
+export interface SwitchProps extends TouchableOpacityProps {
   /**
    * `value`: Represents whether the Switch component is currently in the 'on' (`true`) or 'off' (`false`) state.
    */
@@ -24,7 +24,5 @@ export type SwitchProps = {
    */
   style?: ViewStyle;
 
-  params?: any
-
-  componentId?: string
-};
+  params?: any;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.92.2",
+    "version": "0.92.3-tracking.2",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {