@momo-kits/foundation 0.81.43-rc.6 → 0.81.43-tracking.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -244,7 +244,7 @@ const HeaderCustom: React.FC<TitleCustomProps> = ({
244
244
  )}
245
245
  </View>
246
246
  <View style={[Styles.flex, {paddingHorizontal: 8}]}>
247
- <Text typography="action_default_bold" color={tintColor}>
247
+ <Text typography="header_default_bold" color={tintColor}>
248
248
  {title}
249
249
  </Text>
250
250
  <Text typography="description_default_regular" color={tintColor}>
@@ -6,7 +6,7 @@ import {
6
6
  NavigationContainerRef,
7
7
  } from '@react-navigation/native';
8
8
  import {createStackNavigator} from '@react-navigation/stack';
9
- import {DeviceEventEmitter, NativeModules} from 'react-native';
9
+ import {Alert, DeviceEventEmitter, NativeModules} from 'react-native';
10
10
  import StackScreen from './StackScreen';
11
11
  import ModalScreen from './ModalScreen';
12
12
  import Navigator from './Navigator';
@@ -128,6 +128,10 @@ class Navigator {
128
128
  ) => {
129
129
  this.toolkitCallback = callback;
130
130
  };
131
+
132
+ setTrackingInfo = (newInfo: TrackingInfo) => {
133
+ this.trackingInfo = {...this.trackingInfo, ...newInfo};
134
+ };
131
135
  }
132
136
 
133
137
  export default Navigator;
@@ -5,6 +5,10 @@ import {ApplicationContext} from './index';
5
5
  import {GridSystem} from '../Layout';
6
6
  import {useHeaderHeight} from '@react-navigation/stack';
7
7
 
8
+ const {
9
+ ScreenContext,
10
+ } = require('react-native/Libraries/Components/ScreenContext');
11
+
8
12
  const StackScreen: React.FC<ScreenParams> = props => {
9
13
  const {screen: Component, options}: ScreenParams = props.route.params;
10
14
  const {theme, showGrid, navigator} = useContext(ApplicationContext);
@@ -64,10 +68,15 @@ const StackScreen: React.FC<ScreenParams> = props => {
64
68
  }, []);
65
69
 
66
70
  return (
67
- <>
71
+ <ScreenContext.Provider
72
+ value={{
73
+ ...navigator?.trackingInfo,
74
+ screenName: Component.name,
75
+ autoTracking: navigator?.maxApi?.autoTracking,
76
+ }}>
68
77
  <Component heightHeader={heightHeader} {...params} />
69
78
  {showGrid && <GridSystem />}
70
- </>
79
+ </ScreenContext.Provider>
71
80
  );
72
81
  };
73
82
 
@@ -82,9 +82,10 @@ export type LocalizationObject = {
82
82
 
83
83
  export type TrackingInfo = {
84
84
  [key: string]: any;
85
- code: string;
86
85
  appId: string;
87
- buildNumber: number;
86
+ code: string;
87
+ screenName: string;
88
+ buildNumber: string;
88
89
  flowPartnerId?: string;
89
90
  };
90
91
 
package/Badge/Badge.tsx CHANGED
@@ -46,7 +46,7 @@ const Badge: FC<BadgeProps> = ({label = 'Label', style, backgroundColor}) => {
46
46
 
47
47
  return (
48
48
  <View style={[style, styles.badge, {backgroundColor: badgeColor}]}>
49
- <Text color={Colors.black_01} typography={'action_xxs_bold'}>
49
+ <Text color={Colors.black_01} typography={'action_xs_bold'}>
50
50
  {formatTitle()}
51
51
  </Text>
52
52
  </View>
package/Button/index.tsx CHANGED
@@ -6,7 +6,6 @@ import {
6
6
  TouchableOpacityProps,
7
7
  View,
8
8
  } from 'react-native';
9
-
10
9
  import LinearGradient from 'react-native-linear-gradient';
11
10
  import {ApplicationContext} from '../Application';
12
11
  import {Text} from '../Text';
@@ -15,6 +14,11 @@ import {Colors, Spacing} from '../Consts';
15
14
  import styles from './styles';
16
15
  import {Icon} from '../Icon';
17
16
  import {Loader} from '../Loader';
17
+ import {TrackingInfo} from '../Application/types';
18
+
19
+ const {
20
+ ScreenContext,
21
+ } = require('react-native/Libraries/Components/ScreenContext');
18
22
 
19
23
  const AnimationLinear = Animated.createAnimatedComponent(LinearGradient);
20
24
 
@@ -70,6 +74,10 @@ export interface ButtonProps extends TouchableOpacityProps {
70
74
  * A callback function that is called when the button is pressed.
71
75
  */
72
76
  onPress: () => void;
77
+
78
+ trackingParams?: any;
79
+
80
+ component_id?: string;
73
81
  }
74
82
 
75
83
  const Button: FC<ButtonProps> = ({
@@ -82,6 +90,8 @@ const Button: FC<ButtonProps> = ({
82
90
  loading = false,
83
91
  title = 'Button',
84
92
  onPress,
93
+ trackingParams,
94
+ component_id,
85
95
  ...rest
86
96
  }) => {
87
97
  const {theme, config} = useContext(ApplicationContext);
@@ -94,6 +104,8 @@ const Button: FC<ButtonProps> = ({
94
104
  end: {x: 0, y: 0.5},
95
105
  };
96
106
  }
107
+
108
+ const screenInfo = useContext<TrackingInfo>(ScreenContext);
97
109
  const getSizeStyle = () => {
98
110
  const styleSheet: {[key: string]: any} = styles;
99
111
  return styleSheet[size ?? 'small'];
@@ -291,20 +303,28 @@ const Button: FC<ButtonProps> = ({
291
303
  const activeOpacity = type === 'disabled' ? 0.75 : 0.5;
292
304
 
293
305
  return (
294
- <TouchableOpacity
295
- {...rest}
296
- accessibilityLabel={`Button/${title}`}
297
- activeOpacity={activeOpacity}
298
- onPress={onPressButton}
299
- style={buttonStyle}>
300
- {renderLeading()}
301
- {renderTitle()}
302
- {renderTrailing()}
303
- {gradientPros && (
304
- <AnimationLinear {...gradientPros} style={styles.gradientView} />
305
- )}
306
- {gradientPros && <View style={styles.strokeView} />}
307
- </TouchableOpacity>
306
+ <ScreenContext.Provider
307
+ value={{
308
+ ...screenInfo,
309
+ componentName: 'Button',
310
+ params: trackingParams,
311
+ state: type === 'disabled' ? 'disabled' : 'enabled',
312
+ component_id,
313
+ }}>
314
+ <TouchableOpacity
315
+ {...rest}
316
+ activeOpacity={activeOpacity}
317
+ onPress={onPressButton}
318
+ style={buttonStyle}>
319
+ {renderLeading()}
320
+ {renderTitle()}
321
+ {renderTrailing()}
322
+ {gradientPros && (
323
+ <AnimationLinear {...gradientPros} style={styles.gradientView} />
324
+ )}
325
+ {gradientPros && <View style={styles.strokeView} />}
326
+ </TouchableOpacity>
327
+ </ScreenContext.Provider>
308
328
  );
309
329
  };
310
330
 
@@ -5,6 +5,11 @@ import styles from './styles';
5
5
  import {ApplicationContext} from '../Application';
6
6
  import {Text} from '../Text';
7
7
  import {Icon} from '../Icon';
8
+ import {TrackingInfo} from '../Application/types';
9
+
10
+ const {
11
+ ScreenContext,
12
+ } = require('react-native/Libraries/Components/ScreenContext');
8
13
 
9
14
  const CheckBox: FC<CheckBoxProps> = ({
10
15
  value,
@@ -19,6 +24,7 @@ const CheckBox: FC<CheckBoxProps> = ({
19
24
  const iconSource = indeterminate ? 'ic_minus' : 'ic_checked';
20
25
  let borderColor = theme.colors.text.default;
21
26
  let backgroundColor = theme.colors.background.surface;
27
+ const screenInfo = useContext<TrackingInfo>(ScreenContext);
22
28
 
23
29
  if (haveValue) {
24
30
  borderColor = theme.colors.primary;
@@ -35,27 +41,35 @@ const CheckBox: FC<CheckBoxProps> = ({
35
41
  }
36
42
 
37
43
  return (
38
- <TouchableOpacity
39
- accessibilityLabel={`CheckBox/${label}/${value}`}
40
- activeOpacity={0.8}
41
- onPress={() => onChange?.(!value)}
42
- disabled={disabled}
43
- style={[style, styles.container]}>
44
- <View
45
- style={[
46
- {borderColor, backgroundColor, borderWidth: 1},
47
- styles.checkbox,
48
- ]}>
49
- {haveValue && (
50
- <Icon
51
- color={theme.colors.background.surface}
52
- size={20}
53
- source={iconSource}
54
- />
55
- )}
56
- </View>
57
- {!!label && <Text typography={'body_default_regular'}>{label}</Text>}
58
- </TouchableOpacity>
44
+ <ScreenContext.Provider
45
+ value={{
46
+ ...screenInfo,
47
+ componentName: 'CheckBox',
48
+ params: {
49
+ value,
50
+ },
51
+ }}>
52
+ <TouchableOpacity
53
+ activeOpacity={0.8}
54
+ onPress={() => onChange?.(!value)}
55
+ disabled={disabled}
56
+ style={[style, styles.container]}>
57
+ <View
58
+ style={[
59
+ {borderColor, backgroundColor, borderWidth: 1},
60
+ styles.checkbox,
61
+ ]}>
62
+ {haveValue && (
63
+ <Icon
64
+ color={theme.colors.background.surface}
65
+ size={20}
66
+ source={iconSource}
67
+ />
68
+ )}
69
+ </View>
70
+ {!!label && <Text typography={'body_default_regular'}>{label}</Text>}
71
+ </TouchableOpacity>
72
+ </ScreenContext.Provider>
59
73
  );
60
74
  };
61
75
 
@@ -9,6 +9,11 @@ import {ApplicationContext} from '../Application';
9
9
  import {Colors} from '../Consts';
10
10
  import {Icon} from '../Icon';
11
11
  import styles from './styles';
12
+ import {TrackingInfo} from '../Application/types';
13
+
14
+ const {
15
+ ScreenContext,
16
+ } = require('react-native/Libraries/Components/ScreenContext');
12
17
 
13
18
  export interface IconButtonProps extends TouchableOpacityProps {
14
19
  /**
@@ -36,6 +41,7 @@ const IconButton: React.FC<IconButtonProps> = ({
36
41
  ...rest
37
42
  }) => {
38
43
  const {theme} = useContext(ApplicationContext);
44
+ const screenInfo = useContext<TrackingInfo>(ScreenContext);
39
45
 
40
46
  /**
41
47
  * get size icon button
@@ -121,14 +127,22 @@ const IconButton: React.FC<IconButtonProps> = ({
121
127
  const iconSize = size === 'small' ? 16 : 24;
122
128
 
123
129
  return (
124
- <TouchableOpacity
125
- {...rest}
126
- accessibilityLabel={`IconButton/${icon}`}
127
- activeOpacity={activeOpacity}
128
- onPress={onPressButton}
129
- style={buttonStyle}>
130
- <Icon size={iconSize} source={icon} color={getIconColor()} />
131
- </TouchableOpacity>
130
+ <ScreenContext.Provider
131
+ value={{
132
+ ...screenInfo,
133
+ componentName: 'IconButton',
134
+ params: {
135
+ icon,
136
+ },
137
+ }}>
138
+ <TouchableOpacity
139
+ {...rest}
140
+ activeOpacity={activeOpacity}
141
+ onPress={onPressButton}
142
+ style={buttonStyle}>
143
+ <Icon size={iconSize} source={icon} color={getIconColor()} />
144
+ </TouchableOpacity>
145
+ </ScreenContext.Provider>
132
146
  );
133
147
  };
134
148
 
package/Input/Input.tsx CHANGED
@@ -13,6 +13,10 @@ import {InputProps} from './index';
13
13
  import {Icon} from '../Icon';
14
14
  import {checkTyping} from './utils';
15
15
  import {Loader} from '../Loader';
16
+ import {TrackingInfo} from '../Application/types';
17
+ const {
18
+ ScreenContext,
19
+ } = require('react-native/Libraries/Components/ScreenContext');
16
20
 
17
21
  const Input = forwardRef(
18
22
  (
@@ -38,6 +42,8 @@ const Input = forwardRef(
38
42
  fontWeight = 'Regular',
39
43
  onPressIcon,
40
44
  style,
45
+ trackingParams,
46
+ component_id,
41
47
  ...props
42
48
  }: InputProps,
43
49
  ref,
@@ -47,6 +53,7 @@ const Input = forwardRef(
47
53
  const [haveValue, setHaveValue] = useState(!!value || !!props.defaultValue);
48
54
  const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
49
55
  const accessibilityLabel = `Input/${floatingValue ?? placeholder}`;
56
+ const screenInfo = useContext<TrackingInfo>(ScreenContext);
50
57
 
51
58
  const onClearText = () => {
52
59
  inputRef?.current?.clear();
@@ -160,12 +167,21 @@ const Input = forwardRef(
160
167
  };
161
168
 
162
169
  return (
163
- <View
164
- style={[style, styles.wrapper]}
165
- accessibilityLabel={accessibilityLabel}>
166
- {renderInputView()}
167
- <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
168
- </View>
170
+ <ScreenContext.Provider
171
+ value={{
172
+ ...screenInfo,
173
+ componentName: 'Input',
174
+ params: trackingParams,
175
+ state: disabled ? 'disabled' : 'enabled',
176
+ component_id,
177
+ }}>
178
+ <View
179
+ style={[style, styles.wrapper]}
180
+ accessibilityLabel={accessibilityLabel}>
181
+ {renderInputView()}
182
+ <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
183
+ </View>
184
+ </ScreenContext.Provider>
169
185
  );
170
186
  },
171
187
  );
@@ -12,6 +12,10 @@ import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
12
12
  import {InputMoneyProps} from './index';
13
13
  import {Icon} from '../Icon';
14
14
  import {formatMoneyToNumber, formatNumberToMoney} from './utils';
15
+ import {TrackingInfo} from '../Application/types';
16
+ const {
17
+ ScreenContext,
18
+ } = require('react-native/Libraries/Components/ScreenContext');
15
19
 
16
20
  const InputMoney = forwardRef(
17
21
  (
@@ -30,7 +34,9 @@ const InputMoney = forwardRef(
30
34
  required = false,
31
35
  errorSpacing,
32
36
  style,
37
+ trackingParams,
33
38
  defaultValue = '',
39
+ component_id,
34
40
  ...props
35
41
  }: InputMoneyProps,
36
42
  ref,
@@ -39,6 +45,7 @@ const InputMoney = forwardRef(
39
45
  const [focused, setFocused] = useState(false);
40
46
  const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
41
47
  const accessibilityLabel = `InputMoney/${floatingValue}`;
48
+ const screenInfo = useContext<TrackingInfo>(ScreenContext);
42
49
 
43
50
  const validateText = (text: string) => {
44
51
  const valueFormat = formatMoneyToNumber(text, 'đ');
@@ -142,12 +149,21 @@ const InputMoney = forwardRef(
142
149
  };
143
150
 
144
151
  return (
145
- <View
146
- style={[style, styles.wrapper]}
147
- accessibilityLabel={accessibilityLabel}>
148
- {renderInputView()}
149
- <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
150
- </View>
152
+ <ScreenContext.Provider
153
+ value={{
154
+ ...screenInfo,
155
+ componentName: 'InputMoney',
156
+ params: trackingParams,
157
+ state: 'enable',
158
+ component_id,
159
+ }}>
160
+ <View
161
+ style={[style, styles.wrapper]}
162
+ accessibilityLabel={accessibilityLabel}>
163
+ {renderInputView()}
164
+ <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
165
+ </View>
166
+ </ScreenContext.Provider>
151
167
  );
152
168
  },
153
169
  );
@@ -21,6 +21,10 @@ import styles from './styles';
21
21
  import {ErrorView, getBorderColor} from './common';
22
22
  import {ApplicationContext} from '../Application';
23
23
  import {Spacing} from '../Consts';
24
+ import {TrackingInfo} from '../Application/types';
25
+ const {
26
+ ScreenContext,
27
+ } = require('react-native/Libraries/Components/ScreenContext');
24
28
 
25
29
  const OTPCaret: FC<CaretProps> = ({index, length}) => {
26
30
  const DURATION = 300;
@@ -78,7 +82,9 @@ const InputOTP = forwardRef(
78
82
  onFocus,
79
83
  onBlur,
80
84
  dataType = 'number',
85
+ trackingParams,
81
86
  style,
87
+ component_id,
82
88
  ...props
83
89
  }: InputOTPProps,
84
90
  ref,
@@ -89,6 +95,7 @@ const InputOTP = forwardRef(
89
95
  const inputRef = useRef<TextInput>(null);
90
96
  const {theme} = useContext(ApplicationContext);
91
97
  const accessibilityLabel = `InputOTP/${floatingValue ?? placeholder}`;
98
+ const screenInfo = useContext<TrackingInfo>(ScreenContext);
92
99
 
93
100
  useImperativeHandle(ref, () => ({
94
101
  onChangeText: (text: string) => {
@@ -223,14 +230,23 @@ const InputOTP = forwardRef(
223
230
  };
224
231
 
225
232
  return (
226
- <TouchableOpacity
227
- activeOpacity={1}
228
- onPress={onFocusInput}
229
- style={[style, styles.otpWrapper]}
230
- accessibilityLabel={accessibilityLabel}>
231
- {renderInputView()}
232
- <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
233
- </TouchableOpacity>
233
+ <ScreenContext.Provider
234
+ value={{
235
+ ...screenInfo,
236
+ componentName: 'InputOTP',
237
+ params: trackingParams,
238
+ state: 'enable',
239
+ component_id,
240
+ }}>
241
+ <TouchableOpacity
242
+ activeOpacity={1}
243
+ onPress={onFocusInput}
244
+ style={[style, styles.otpWrapper]}
245
+ accessibilityLabel={accessibilityLabel}>
246
+ {renderInputView()}
247
+ <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
248
+ </TouchableOpacity>
249
+ </ScreenContext.Provider>
234
250
  );
235
251
  },
236
252
  );
@@ -12,6 +12,10 @@ import styles from './styles';
12
12
  import {Icon} from '../Icon';
13
13
  import {Text} from '../Text';
14
14
  import {checkTyping} from './utils';
15
+ import {TrackingInfo} from '../Application/types';
16
+ const {
17
+ ScreenContext,
18
+ } = require('react-native/Libraries/Components/ScreenContext');
15
19
 
16
20
  const InputSearch = forwardRef(
17
21
  (
@@ -29,6 +33,9 @@ const InputSearch = forwardRef(
29
33
  style,
30
34
  defaultValue,
31
35
  onPressButtonText,
36
+ trackingParams,
37
+ component_id,
38
+
32
39
  ...props
33
40
  }: InputSearchProps,
34
41
  ref,
@@ -38,6 +45,7 @@ const InputSearch = forwardRef(
38
45
  const [haveValue, setHaveValue] = useState(!!value || !!defaultValue);
39
46
  const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
40
47
  const accessibilityLabel = `InputMoney/${placeholder}`;
48
+ const screenInfo = useContext<TrackingInfo>(ScreenContext);
41
49
 
42
50
  const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
43
51
  setFocused(true);
@@ -119,35 +127,46 @@ const InputSearch = forwardRef(
119
127
  );
120
128
  };
121
129
  return (
122
- <View
123
- style={[style, styles.searchInputContainer]}
124
- accessibilityLabel={accessibilityLabel}>
130
+ <ScreenContext.Provider
131
+ value={{
132
+ ...screenInfo,
133
+ componentName: 'InputSearch',
134
+ params: trackingParams,
135
+ state: 'enabled',
136
+ component_id,
137
+ }}>
125
138
  <View
126
- style={[
127
- styles.searchInputWrapper,
128
- {
129
- backgroundColor: theme.colors.background.surface,
130
- borderColor: theme.colors.background.surface,
131
- },
132
- showBorder && {borderColor: theme.colors.border.default},
133
- focused && {borderColor: theme.colors.primary},
134
- ]}>
135
- <Icon
136
- source={'navigation_search'}
137
- size={24}
138
- color={theme.colors.text.hint}
139
- />
140
- {renderInputView()}
141
- {renderIconView()}
139
+ style={[style, styles.searchInputContainer]}
140
+ accessibilityLabel={accessibilityLabel}>
141
+ <View
142
+ style={[
143
+ styles.searchInputWrapper,
144
+ {
145
+ backgroundColor: theme.colors.background.surface,
146
+ borderColor: theme.colors.background.surface,
147
+ },
148
+ showBorder && {borderColor: theme.colors.border.default},
149
+ focused && {borderColor: theme.colors.primary},
150
+ ]}>
151
+ <Icon
152
+ source={'navigation_search'}
153
+ size={24}
154
+ color={theme.colors.text.hint}
155
+ />
156
+ {renderInputView()}
157
+ {renderIconView()}
158
+ </View>
159
+ {showButtonText && (
160
+ <TouchableOpacity onPress={onPressButtonText}>
161
+ <Text
162
+ typography={'action_default_bold'}
163
+ style={styles.textButton}>
164
+ {buttonText}
165
+ </Text>
166
+ </TouchableOpacity>
167
+ )}
142
168
  </View>
143
- {showButtonText && (
144
- <TouchableOpacity onPress={onPressButtonText}>
145
- <Text typography={'action_default_bold'} style={styles.textButton}>
146
- {buttonText}
147
- </Text>
148
- </TouchableOpacity>
149
- )}
150
- </View>
169
+ </ScreenContext.Provider>
151
170
  );
152
171
  },
153
172
  );
package/Input/index.tsx CHANGED
@@ -80,6 +80,9 @@ export interface InputProps extends TextInputProps {
80
80
  fontWeight?: 'Regular' | 'Bold';
81
81
 
82
82
  onPressIcon?: () => void;
83
+
84
+ trackingParams?: any;
85
+ component_id?: string;
83
86
  }
84
87
 
85
88
  type InputPropsWithoutSizeAndIcon = Omit<
@@ -126,6 +129,10 @@ export interface InputSearchProps extends TextInputProps {
126
129
  * Optional. Represents the name or key of the icon to be displayed in the Input component.
127
130
  */
128
131
  icon?: string;
132
+
133
+ trackingParams?: any;
134
+
135
+ component_id?: string;
129
136
  }
130
137
 
131
138
  export interface InputMoneyProps extends InputPropsWithoutPlaceholder {}
@@ -192,7 +192,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
192
192
  ]}>
193
193
  {!!image && <Image source={{uri: image}} style={styles.image} />}
194
194
  <View style={styles.content}>
195
- <Text typography={'action_default_bold'} numberOfLines={1}>
195
+ <Text typography={'header_default_bold'} numberOfLines={1}>
196
196
  {title}
197
197
  </Text>
198
198
  <Description style={[styles.description, descriptionStyle]}>
package/Radio/index.tsx CHANGED
@@ -6,6 +6,11 @@ import {Text} from '../Text';
6
6
  import styles from './styles';
7
7
  import {ApplicationContext} from '../Application';
8
8
  import {Spacing} from '../Consts';
9
+ import {TrackingInfo} from '../Application/types';
10
+
11
+ const {
12
+ ScreenContext,
13
+ } = require('react-native/Libraries/Components/ScreenContext');
9
14
 
10
15
  const Radio: FC<RadioProps> = ({
11
16
  value,
@@ -37,28 +42,38 @@ const Radio: FC<RadioProps> = ({
37
42
  };
38
43
  }
39
44
 
45
+ const screenInfo = useContext<TrackingInfo>(ScreenContext);
46
+
40
47
  return (
41
- <TouchableOpacity
42
- accessibilityLabel={`Radio/${label}/${value}`}
43
- onPress={onChange}
44
- disabled={disabled}
45
- style={[
46
- style,
47
- {
48
- flexDirection: 'row',
49
- alignItems: 'center',
48
+ <ScreenContext.Provider
49
+ value={{
50
+ ...screenInfo,
51
+ componentName: 'Radio',
52
+ params: {
53
+ value,
50
54
  },
51
- ]}>
52
- <View
55
+ }}>
56
+ <TouchableOpacity
57
+ onPress={onChange}
58
+ disabled={disabled}
53
59
  style={[
54
- styles.radio,
55
- checkBoxStyle,
56
- disabledStyle,
57
- {marginRight: label ? Spacing.XS : 0},
58
- ]}
59
- />
60
- {!!label && <Text typography={'body_default_regular'}>{label}</Text>}
61
- </TouchableOpacity>
60
+ style,
61
+ {
62
+ flexDirection: 'row',
63
+ alignItems: 'center',
64
+ },
65
+ ]}>
66
+ <View
67
+ style={[
68
+ styles.radio,
69
+ checkBoxStyle,
70
+ disabledStyle,
71
+ {marginRight: label ? Spacing.XS : 0},
72
+ ]}
73
+ />
74
+ {!!label && <Text typography={'body_default_regular'}>{label}</Text>}
75
+ </TouchableOpacity>
76
+ </ScreenContext.Provider>
62
77
  );
63
78
  };
64
79
 
package/Switch/index.tsx CHANGED
@@ -1,13 +1,19 @@
1
- import React, {FC} from 'react';
1
+ import React, {FC, useContext} from 'react';
2
2
  import {TouchableOpacity, View} from 'react-native';
3
3
  import {SwitchProps} from './types';
4
4
  import styles from './styles';
5
5
  import {Colors} from '../Consts';
6
+ import {TrackingInfo} from '../Application/types';
7
+
8
+ const {
9
+ ScreenContext,
10
+ } = require('react-native/Libraries/Components/ScreenContext');
6
11
 
7
12
  const Switch: FC<SwitchProps> = props => {
8
13
  const {value, onChange, disabled, style} = props;
9
14
  const circleBackgroundColor = value ? Colors.black_01 : Colors.black_03;
10
15
  const circleAlign = value ? 'flex-end' : 'flex-start';
16
+ const screenInfo = useContext<TrackingInfo>(ScreenContext);
11
17
 
12
18
  let backgroundColor = value ? Colors.green_03 : Colors.black_07;
13
19
  if (disabled) {
@@ -15,19 +21,27 @@ const Switch: FC<SwitchProps> = props => {
15
21
  }
16
22
 
17
23
  return (
18
- <TouchableOpacity
19
- accessibilityLabel={'Switch'}
20
- disabled={disabled}
21
- onPress={() => onChange?.(!value)}
22
- style={[
23
- style,
24
- styles.container,
25
- {backgroundColor, alignItems: circleAlign},
26
- ]}>
27
- <View style={[styles.circle, {backgroundColor: circleBackgroundColor}]}>
28
- <View style={[styles.circleSmall, {backgroundColor}]} />
29
- </View>
30
- </TouchableOpacity>
24
+ <ScreenContext.Provider
25
+ value={{
26
+ ...screenInfo,
27
+ componentName: 'Switch',
28
+ params: {
29
+ value,
30
+ },
31
+ }}>
32
+ <TouchableOpacity
33
+ disabled={disabled}
34
+ onPress={() => onChange?.(!value)}
35
+ style={[
36
+ style,
37
+ styles.container,
38
+ {backgroundColor, alignItems: circleAlign},
39
+ ]}>
40
+ <View style={[styles.circle, {backgroundColor: circleBackgroundColor}]}>
41
+ <View style={[styles.circleSmall, {backgroundColor}]} />
42
+ </View>
43
+ </TouchableOpacity>
44
+ </ScreenContext.Provider>
31
45
  );
32
46
  };
33
47
 
package/Text/styles.ts CHANGED
@@ -5,7 +5,7 @@ export default {
5
5
  header_s_semibold: {fontSize: 14, lineHeight: 20, fontWeight: '600'},
6
6
  header_xs_semibold: {fontSize: 12, lineHeight: 16, fontWeight: '600'},
7
7
  body_default_regular: {fontSize: 14, lineHeight: 20, fontWeight: '400'},
8
- body_default_regularstrikethrought: {
8
+ body_regularstrikethrought: {
9
9
  fontSize: 14,
10
10
  lineHeight: 20,
11
11
  fontWeight: '400',
package/Text/types.ts CHANGED
@@ -20,7 +20,7 @@ export type Typography =
20
20
  | 'header_s_semibold'
21
21
  | 'header_xs_semibold'
22
22
  | 'body_default_regular'
23
- | 'body_default_regularstrikethrought'
23
+ | 'body_regularstrikethrought'
24
24
  | 'description_default_regular'
25
25
  | 'description_default_regularstrikethrought'
26
26
  | 'description_xs_regular'
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@momo-kits/foundation",
3
- "version": "0.81.43-rc.6",
3
+ "version": "0.81.43-tracking.2",
4
4
  "description": "React Native Component Kits",
5
5
  "main": "index.ts",
6
6
  "scripts": {