@momo-kits/foundation 0.159.1-beta.5 → 0.160.1-beta.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.
Files changed (40) hide show
  1. package/Application/BottomSheet.tsx +1 -1
  2. package/Application/BottomTab/BottomTabBar.tsx +2 -2
  3. package/Application/BottomTab/CustomBottomTabItem.tsx +1 -1
  4. package/Application/Components/HeaderBackground.tsx +1 -1
  5. package/Application/Components/HeaderExtendHeader.tsx +1 -1
  6. package/Application/Components/HeaderTitle.tsx +1 -1
  7. package/Application/Components/SearchHeader.tsx +1 -1
  8. package/Application/NavigationContainer.tsx +9 -22
  9. package/Application/types.ts +0 -1
  10. package/Badge/Badge.tsx +9 -3
  11. package/Badge/BadgeDot.tsx +1 -1
  12. package/Badge/BadgeRibbon.tsx +1 -1
  13. package/Button/index.tsx +2 -2
  14. package/CheckBox/index.tsx +1 -1
  15. package/Context/index.ts +0 -4
  16. package/Icon/index.tsx +1 -1
  17. package/IconButton/index.tsx +1 -1
  18. package/Image/index.tsx +1 -1
  19. package/Input/Input.tsx +1 -1
  20. package/Input/InputDropDown.tsx +1 -1
  21. package/Input/InputMoney.tsx +1 -1
  22. package/Input/InputOTP.tsx +1 -1
  23. package/Input/InputPhoneNumber.tsx +1 -1
  24. package/Input/InputSearch.tsx +1 -1
  25. package/Input/InputTextArea.tsx +1 -1
  26. package/Layout/Item.tsx +1 -1
  27. package/Pagination/PaginationDot.tsx +1 -1
  28. package/Pagination/PaginationNumber.tsx +1 -1
  29. package/Pagination/PaginationScroll.tsx +1 -1
  30. package/Pagination/PaginationWhiteDot.tsx +1 -1
  31. package/Popup/PopupNotify.tsx +1 -1
  32. package/Popup/PopupPromotion.tsx +1 -1
  33. package/Radio/index.tsx +1 -1
  34. package/Switch/index.tsx +1 -1
  35. package/Tag/index.tsx +1 -1
  36. package/Text/index.tsx +1 -1
  37. package/Text/utils.ts +16 -42
  38. package/Title/index.tsx +1 -1
  39. package/package.json +34 -34
  40. package/Application/ScaleSizeProvider.tsx +0 -16
@@ -39,7 +39,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
39
39
  const heightHeader = useHeaderHeight();
40
40
  const keyboardOffset = heightHeader - Math.min(insets.bottom, 21);
41
41
 
42
- const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
42
+ const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
43
43
 
44
44
  const {
45
45
  screen: Screen,
@@ -63,7 +63,7 @@ export default function BottomTabBar({
63
63
  const focusedTab = state?.routes[state.index]?.name || routes[0]?.params;
64
64
 
65
65
  const context = useContext<any>(MiniAppContext);
66
- const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
66
+ const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
67
67
 
68
68
  /**
69
69
  * render tab item
@@ -299,7 +299,7 @@ const styles = StyleSheet.create({
299
299
  left: 0,
300
300
  right: 0,
301
301
  top: -2,
302
- bottom: Platform.OS === 'ios' ? -6 : 4
302
+ bottom: Platform.OS === 'ios' ? -6 : 4,
303
303
  },
304
304
  floatingContent: {
305
305
  alignItems: 'center',
@@ -61,7 +61,7 @@ const CustomBottomTabItem: React.FC<CustomBottomTabItemProps> = ({
61
61
  allowFontScaling,
62
62
  }) => {
63
63
  const context = useContext<any>(MiniAppContext);
64
- const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
64
+ const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
65
65
 
66
66
  const renderIcon = () => {
67
67
  if (icon === undefined) {
@@ -24,7 +24,7 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
24
24
  const gradientColor = customGradientColor ?? theme.colors.gradient;
25
25
  const headerImage = headerBackground ?? theme.assets?.headerBackground;
26
26
 
27
- const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
27
+ const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
28
28
 
29
29
  const opacityBackground = animatedValue?.interpolate({
30
30
  inputRange: [0, 52],
@@ -49,7 +49,7 @@ const HeaderExtendHeader: React.FC<{
49
49
  const headerBackground = customBackground ?? theme.assets?.headerBackground;
50
50
  const leftPosition = inputSearchProps?.leftPosition || BACK_WIDTH + 20;
51
51
 
52
- const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
52
+ const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
53
53
 
54
54
  const opacityBackground = animatedValue?.interpolate({
55
55
  inputRange: [0, 52],
@@ -24,7 +24,7 @@ import { Skeleton } from '../../Skeleton';
24
24
  const HeaderTitle: React.FC<any> = props => {
25
25
  const context = useContext<any>(MiniAppContext);
26
26
 
27
- const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
27
+ const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
28
28
 
29
29
  const opacity = props.animatedValue?.interpolate(
30
30
  props.interpolate ?? {
@@ -77,7 +77,7 @@ const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
77
77
  return true;
78
78
  };
79
79
 
80
- const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
80
+ const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
81
81
 
82
82
  return (
83
83
  <View
@@ -16,7 +16,6 @@ import { DeviceEventEmitter } from 'react-native';
16
16
  import StackScreen from './StackScreen';
17
17
  import ModalScreen from './ModalScreen';
18
18
  import Navigator from './Navigator';
19
- import ScaleSizeProvider from './ScaleSizeProvider';
20
19
  import { getModalOptions, getStackOptions } from './utils';
21
20
  import { NavigationContainerProps } from './types';
22
21
  import { ApplicationContext, MiniAppContext } from '../Context';
@@ -36,12 +35,6 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
36
35
  maxApi,
37
36
  initialParams,
38
37
  localize = new Localize({ vi: {}, en: {} }),
39
- features = {
40
- enableBottomTabAnimation: true,
41
- enableHapticDialog: true,
42
- enableForceFoundationList: false,
43
- enableHapticBottomTab: true,
44
- },
45
38
  }) => {
46
39
  const context = useContext<any>(MiniAppContext);
47
40
  const [currentContext, setCurrentContext] = useState<any>({});
@@ -49,26 +42,20 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
49
42
  const mergedContext = {
50
43
  ...context,
51
44
  ...currentContext,
52
- features: {
53
- ...context?.features,
54
- ...features,
55
- },
56
45
  };
57
46
 
58
47
  return (
59
48
  <SafeAreaProvider>
60
49
  <MiniAppContext.Provider value={mergedContext}>
61
- <ScaleSizeProvider scaleSizeMaxRate={mergedContext?.scaleSizeMaxRate}>
62
- <Navigation
63
- screen={screen}
64
- theme={theme}
65
- options={options}
66
- maxApi={maxApi}
67
- setCurrentContext={setCurrentContext}
68
- initialParams={initialParams}
69
- localize={localize}
70
- />
71
- </ScaleSizeProvider>
50
+ <Navigation
51
+ screen={screen}
52
+ theme={theme}
53
+ options={options}
54
+ maxApi={maxApi}
55
+ setCurrentContext={setCurrentContext}
56
+ initialParams={initialParams}
57
+ localize={localize}
58
+ />
72
59
  </MiniAppContext.Provider>
73
60
  </SafeAreaProvider>
74
61
  );
@@ -158,7 +158,6 @@ export type NavigationContainerProps = {
158
158
  maxApi: any;
159
159
  initialParams?: any;
160
160
  localize: LocalizeProps;
161
- features?: FeatureFlags;
162
161
  };
163
162
 
164
163
  export type WidgetContainerProps = {
package/Badge/Badge.tsx CHANGED
@@ -18,8 +18,8 @@ const Badge: FC<BadgeProps> = ({
18
18
  const { componentId } = useComponentId('Badge', accessibilityLabel);
19
19
  const scaledSize = useScaleSize(16);
20
20
 
21
- const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
22
-
21
+ const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
22
+
23
23
  const styles = StyleSheet.create({
24
24
  badge: {
25
25
  paddingHorizontal: Spacing.XS,
@@ -84,7 +84,13 @@ const Badge: FC<BadgeProps> = ({
84
84
  }
85
85
 
86
86
  return (
87
- <View style={[style, styles.badgeContainer, showBaseLineDebug && styles.debugBaseLine]}>
87
+ <View
88
+ style={[
89
+ style,
90
+ styles.badgeContainer,
91
+ showBaseLineDebug && styles.debugBaseLine,
92
+ ]}
93
+ >
88
94
  <View
89
95
  style={[styles.badge, { backgroundColor: badgeColor }]}
90
96
  accessibilityLabel={componentId}
@@ -9,7 +9,7 @@ const BadgeDot: FC<BadgeDotProps> = ({ size = 'large', style }) => {
9
9
  let dotStyle;
10
10
  let dotContainerStyle;
11
11
 
12
- const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
12
+ const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
13
13
 
14
14
  if (size === 'large') {
15
15
  dotStyle = styles.dot;
@@ -19,7 +19,7 @@ const BadgeRibbon: FC<BadgeRibbonProps> = ({
19
19
  const isRight = position === 'top_right' || position === 'bottom_right';
20
20
  const isUpTail = position === 'bottom_left' || position === 'top_right';
21
21
 
22
- const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
22
+ const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
23
23
 
24
24
  const ribbonRotate = useMemo(() => (isRight ? '180deg' : '0deg'), [isRight]);
25
25
  const textRotate = ribbonRotate;
package/Button/index.tsx CHANGED
@@ -77,7 +77,7 @@ const Button: FC<ButtonProps> = ({
77
77
  const animationRef = useRef<LottieView>(null);
78
78
  const pressAnim = useSharedValue(0);
79
79
 
80
- const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
80
+ const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
81
81
 
82
82
  const componentName = 'Button';
83
83
  const { componentId } = useComponentId(
@@ -355,7 +355,7 @@ const Button: FC<ButtonProps> = ({
355
355
  onPressOut={animateOut}
356
356
  >
357
357
  <Reanimated.View style={[buttonStyle, animatedStyle]}>
358
- {renderIcon('left')}
358
+ {renderIcon('left')}
359
359
  {renderTitle()}
360
360
  {renderIcon('right')}
361
361
  {gradientPros && (
@@ -34,7 +34,7 @@ const CheckBox: FC<CheckBoxProps> = ({
34
34
  props.accessibilityLabel,
35
35
  );
36
36
 
37
- const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
37
+ const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
38
38
 
39
39
  if (haveValue) {
40
40
  borderColor = theme.colors.primary;
package/Context/index.ts CHANGED
@@ -9,9 +9,6 @@ const MiniAppContext = (Platform as any).MiniAppContext ?? Context;
9
9
  const ScreenContext = (Platform as any).ScreenContext ?? Context;
10
10
  const ComponentContext = (Platform as any).ComponentContext ?? Context;
11
11
  const SkeletonContext = createContext({ loading: false });
12
- const ScaleSizeContext = createContext<{ scaleSizeMaxRate?: number }>({
13
- scaleSizeMaxRate: undefined,
14
- });
15
12
  const TrackingScopeContext = createContext<{ scopeName?: string }>({
16
13
  scopeName: undefined,
17
14
  });
@@ -23,5 +20,4 @@ export {
23
20
  ComponentContext,
24
21
  SkeletonContext,
25
22
  TrackingScopeContext,
26
- ScaleSizeContext,
27
23
  };
package/Icon/index.tsx CHANGED
@@ -17,7 +17,7 @@ const Icon: React.FC<IconProps> = ({
17
17
  const { theme } = useContext(ApplicationContext);
18
18
  const context = useContext<any>(MiniAppContext);
19
19
 
20
- const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
20
+ const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
21
21
 
22
22
  /**
23
23
  * get icon source maps or remote http
@@ -46,7 +46,7 @@ const IconButton: React.FC<IconButtonProps> = ({
46
46
  const { theme } = useContext(ApplicationContext);
47
47
  const context = useContext<any>(MiniAppContext);
48
48
 
49
- const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
49
+ const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
50
50
 
51
51
  /**
52
52
  * get size icon button
package/Image/index.tsx CHANGED
@@ -37,7 +37,7 @@ const Image: React.FC<ImageProps> = ({
37
37
  const error = useRef(false);
38
38
  const [status, setStatus] = useState<Status>('success');
39
39
 
40
- const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
40
+ const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
41
41
 
42
42
  let accessibilityLabel: any = `img|${getImageName(source)}`;
43
43
  if (component?.componentId) {
package/Input/Input.tsx CHANGED
@@ -81,7 +81,7 @@ const Input = forwardRef(
81
81
  const inputRef = useRef<TextInput | null>(null);
82
82
  const componentName = 'Input';
83
83
 
84
- const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
84
+ const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
85
85
 
86
86
  const { componentId } = useComponentId(
87
87
  `${componentName}/${placeholder}`,
@@ -43,7 +43,7 @@ const InputDropDown = ({
43
43
  const scaleHeight = useScaleSize(size === 'small' ? 48 : 56);
44
44
  const componentName = 'InputDropDown';
45
45
 
46
- const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
46
+ const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
47
47
 
48
48
  const { componentId } = useComponentId(
49
49
  `${componentName}/${placeholder}`,
@@ -76,7 +76,7 @@ const InputMoney = forwardRef(
76
76
  const inputRef = useRef<TextInput>(null);
77
77
  const componentName = 'InputMoney';
78
78
 
79
- const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
79
+ const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
80
80
 
81
81
  const { componentId } = useComponentId(
82
82
  `${componentName}/${placeholder}`,
@@ -99,7 +99,7 @@ const InputOTP = forwardRef(
99
99
 
100
100
  const componentName = 'InputOTP';
101
101
 
102
- const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
102
+ const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
103
103
 
104
104
  const { componentId } = useComponentId(
105
105
  `${componentName}/${placeholder}`,
@@ -73,7 +73,7 @@ const InputPhoneNumber = forwardRef(
73
73
  const inputRef = useRef<TextInput | null>(null);
74
74
  const componentName = 'InputPhoneNumber';
75
75
 
76
- const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
76
+ const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
77
77
 
78
78
  const { componentId } = useComponentId(
79
79
  `${componentName}/${placeholder}`,
@@ -146,7 +146,7 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
146
146
  const context = useContext<any>(MiniAppContext);
147
147
  const scaledFontSize = useScaleSize(14);
148
148
 
149
- const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
149
+ const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
150
150
 
151
151
  const [focused, setFocused] = useState(false);
152
152
  const [internalText, setInternalText] = useState(defaultValue || '');
@@ -57,7 +57,7 @@ const InputTextArea = forwardRef(
57
57
  const context = useContext<any>(MiniAppContext);
58
58
  const DEFAULT_HEIGHT = useScaleSize(104);
59
59
 
60
- const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
60
+ const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
61
61
  const scaledFontSize = useScaleSize(14);
62
62
  const [focused, setFocused] = useState(false);
63
63
  const [inputValue, setInputValue] = useState(defaultValue ?? '');
package/Layout/Item.tsx CHANGED
@@ -27,7 +27,7 @@ const Item: React.FC<ItemProps> = ({
27
27
  const context = useContext<any>(MiniAppContext);
28
28
  const grid = useContext(GridContext);
29
29
 
30
- const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
30
+ const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
31
31
 
32
32
  /**
33
33
  * render overlay view only dev mode
@@ -14,7 +14,7 @@ const PaginationDot: FC<ChildPaginationProps> = ({
14
14
  const { theme } = useContext(ApplicationContext);
15
15
  const context = useContext<any>(MiniAppContext);
16
16
 
17
- const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
17
+ const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
18
18
 
19
19
  const renderDots = () => {
20
20
  const dots: React.ReactElement[] = [];
@@ -13,7 +13,7 @@ const PaginationNumber: FC<ChildPaginationProps> = ({
13
13
  }) => {
14
14
  const context = useContext<any>(MiniAppContext);
15
15
 
16
- const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
16
+ const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
17
17
 
18
18
  return (
19
19
  <View
@@ -17,7 +17,7 @@ const PaginationScroll: FC<ScrollIndicatorProps> = ({
17
17
  const [scrollViewWidth, setScrollViewWidth] = useState(0);
18
18
  const [scrollContentWidth, setScrollContentWidth] = useState(0);
19
19
 
20
- const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
20
+ const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
21
21
 
22
22
  const translateX = () => {
23
23
  if (scrollViewWidth && scrollContentWidth) {
@@ -13,7 +13,7 @@ const PaginationWhiteDot: FC<ChildPaginationProps> = ({
13
13
  }) => {
14
14
  const context = useContext<any>(MiniAppContext);
15
15
 
16
- const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
16
+ const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
17
17
 
18
18
  const renderDots = () => {
19
19
  const dots: React.ReactElement[] = [];
@@ -32,7 +32,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
32
32
  const { width: widthDevice } = Dimensions.get('window');
33
33
  const scaledMaxHeight = useScaleSize(172);
34
34
 
35
- const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
35
+ const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
36
36
  const closeAction = useRef('touch_outside');
37
37
  let descriptionStyle = {};
38
38
  let Description: any = View;
@@ -17,7 +17,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
17
17
  const { width: widthDevice } = Dimensions.get('window');
18
18
  const closeAction = useRef('touch_outside');
19
19
 
20
- const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
20
+ const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
21
21
 
22
22
  /**
23
23
  * on action popup
package/Radio/index.tsx CHANGED
@@ -33,7 +33,7 @@ const Radio: FC<RadioProps> = ({
33
33
  accessibilityLabel,
34
34
  );
35
35
 
36
- const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
36
+ const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
37
37
  let disabledStyle = {};
38
38
  let checkBoxStyle = {
39
39
  borderWidth: 2,
package/Switch/index.tsx CHANGED
@@ -22,7 +22,7 @@ const Switch: FC<SwitchProps> = ({
22
22
 
23
23
  const { componentId } = useComponentId(componentName, accessibilityLabel);
24
24
 
25
- const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
25
+ const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
26
26
 
27
27
  let backgroundColor = value ? Colors.green_03 : Colors.black_07;
28
28
  if (disabled) {
package/Tag/index.tsx CHANGED
@@ -38,7 +38,7 @@ const Tag: FC<TagProps> = ({
38
38
  const scaledHeight24 = useScaleSize(24);
39
39
  const scaledHeight18 = useScaleSize(18);
40
40
 
41
- const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
41
+ const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
42
42
 
43
43
  const styles = StyleSheet.create({
44
44
  container: {
package/Text/index.tsx CHANGED
@@ -158,7 +158,7 @@ const Text: React.FC<TextProps> = ({
158
158
  );
159
159
  }
160
160
 
161
- const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
161
+ const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
162
162
 
163
163
  if (skeleton.loading) {
164
164
  return (
package/Text/utils.ts CHANGED
@@ -1,62 +1,36 @@
1
1
  import { Dimensions, PixelRatio, useWindowDimensions } from 'react-native';
2
2
  import { useContext } from 'react';
3
- import { ScaleSizeContext } from '../Context';
3
+ import { MiniAppContext } from '../Context';
4
4
 
5
5
  const deviceWidth = Dimensions.get('window').width;
6
6
  const DEFAULT_SCREEN_SIZE = 375;
7
7
  const MAX_FONT_SCALE = 1.2;
8
- const MAX_DEVICE_SCALE = 5;
9
8
 
10
- const useScaleSize = (size: number, scaleRate?: number) => {
11
- const { scaleSizeMaxRate = MAX_FONT_SCALE } = useContext(ScaleSizeContext);
12
- const fontScale = PixelRatio.getFontScale();
9
+ const useScaleSize = (size: number) => {
13
10
  const { width } = useWindowDimensions();
14
- const deviceScale = width / DEFAULT_SCREEN_SIZE;
15
-
16
- const maxScaleRate = scaleRate ?? scaleSizeMaxRate;
11
+ const context = useContext<any>(MiniAppContext);
12
+ const allowFontScale = context?.designSystemConfig?.allowFontScale ?? true;
13
+ if (!allowFontScale) return size;
17
14
 
18
- let fontSizeDeviceScale = size;
19
- let fontSizeOSScale = size;
20
-
21
- if (deviceScale > 1) {
22
- fontSizeDeviceScale = Math.min(
23
- fontSizeDeviceScale * deviceScale,
24
- fontSizeDeviceScale + MAX_DEVICE_SCALE,
25
- );
26
- }
15
+ const deviceScale = width / DEFAULT_SCREEN_SIZE;
16
+ const fontScale = PixelRatio.getFontScale();
27
17
 
28
- if (fontScale > 1) {
29
- fontSizeOSScale = Math.min(
30
- fontSizeOSScale * fontScale,
31
- fontSizeOSScale * maxScaleRate,
32
- );
33
- }
18
+ const maxSize = size * MAX_FONT_SCALE;
19
+ const fontSizeScaleDevice = deviceScale > 1 ? deviceScale * size : size;
20
+ const fontSizeScaleOS = fontScale > 1 ? fontScale * size : size;
34
21
 
35
- return Math.max(fontSizeDeviceScale, fontSizeOSScale);
22
+ return Math.min(Math.max(fontSizeScaleDevice, fontSizeScaleOS), maxSize);
36
23
  };
37
24
 
38
25
  const scaleSize = (size: number) => {
39
- const fontScale = PixelRatio.getFontScale();
40
26
  const deviceScale = deviceWidth / DEFAULT_SCREEN_SIZE;
27
+ const fontScale = PixelRatio.getFontScale();
41
28
 
42
- let fontSizeDeviceScale = size;
43
- let fontSizeOSScale = size;
44
-
45
- if (deviceScale > 1) {
46
- fontSizeDeviceScale = Math.min(
47
- fontSizeDeviceScale * deviceScale,
48
- fontSizeDeviceScale + MAX_DEVICE_SCALE,
49
- );
50
- }
51
-
52
- if (fontScale > 1) {
53
- fontSizeOSScale = Math.min(
54
- fontSizeOSScale * fontScale,
55
- fontSizeOSScale * MAX_FONT_SCALE,
56
- );
57
- }
29
+ const maxSize = size * MAX_FONT_SCALE;
30
+ const fontSizeScaleDevice = deviceScale > 1 ? deviceScale * size : size;
31
+ const fontSizeScaleOS = fontScale > 1 ? fontScale * size : size;
58
32
 
59
- return Math.max(fontSizeDeviceScale, fontSizeOSScale);
33
+ return Math.min(Math.max(fontSizeScaleDevice, fontSizeScaleOS), maxSize);
60
34
  };
61
35
 
62
36
  export { scaleSize, useScaleSize };
package/Title/index.tsx CHANGED
@@ -39,7 +39,7 @@ const Title: FC<TitleProps> = ({
39
39
  const [badgeWidth, setBadgeWidth] = useState(0);
40
40
  const [contentWidth, setContentWidth] = useState(0);
41
41
 
42
- const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
42
+ const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
43
43
 
44
44
  const size18 = useScaleSize(18);
45
45
  const size22 = useScaleSize(22);
package/package.json CHANGED
@@ -1,35 +1,35 @@
1
1
  {
2
- "name": "@momo-kits/foundation",
3
- "version": "0.159.1-beta.5",
4
- "description": "React Native Component Kits",
5
- "main": "index.ts",
6
- "scripts": {},
7
- "keywords": [
8
- "@momo-kits/foundation"
9
- ],
10
- "dependencies": {
11
- "react-native-fast-image": "git+https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-native-fast-image.git#v8.11.0",
12
- "@react-navigation/bottom-tabs": "7.4.2",
13
- "@react-navigation/core": "7.12.1",
14
- "@react-navigation/elements": "2.5.2",
15
- "@react-navigation/native": "7.1.14",
16
- "@react-navigation/routers": "7.4.1",
17
- "@react-navigation/stack": "7.4.2",
18
- "react-native-gesture-handler": "2.27.1",
19
- "react-native-linear-gradient": "git+https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-native-linear-gradient#v3.0.0",
20
- "react-native-reanimated": "4.1.0",
21
- "react-native-safe-area-context": "5.5.2",
22
- "@shopify/flash-list": "2.1.0",
23
- "lottie-react-native": "7.2.4"
24
- },
25
- "peerDependencies": {
26
- "react-native": "*"
27
- },
28
- "devDependencies": {
29
- "@types/color": "3.0.6"
30
- },
31
- "publishConfig": {
32
- "registry": "https://registry.npmjs.org/"
33
- },
34
- "license": "MoMo"
35
- }
2
+ "name": "@momo-kits/foundation",
3
+ "version": "0.160.1-beta.2",
4
+ "description": "React Native Component Kits",
5
+ "main": "index.ts",
6
+ "scripts": {},
7
+ "keywords": [
8
+ "@momo-kits/foundation"
9
+ ],
10
+ "dependencies": {
11
+ "react-native-fast-image": "git+https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-native-fast-image.git#v8.11.0",
12
+ "@react-navigation/bottom-tabs": "7.4.2",
13
+ "@react-navigation/core": "7.12.1",
14
+ "@react-navigation/elements": "2.5.2",
15
+ "@react-navigation/native": "7.1.14",
16
+ "@react-navigation/routers": "7.4.1",
17
+ "@react-navigation/stack": "7.4.2",
18
+ "react-native-gesture-handler": "2.27.1",
19
+ "react-native-linear-gradient": "git+https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-native-linear-gradient#v3.0.0",
20
+ "react-native-reanimated": "4.1.0",
21
+ "react-native-safe-area-context": "5.5.2",
22
+ "@shopify/flash-list": "2.1.0",
23
+ "lottie-react-native": "7.2.4"
24
+ },
25
+ "peerDependencies": {
26
+ "react-native": "*"
27
+ },
28
+ "devDependencies": {
29
+ "@types/color": "3.0.6"
30
+ },
31
+ "publishConfig": {
32
+ "registry": "https://registry.npmjs.org/"
33
+ },
34
+ "license": "MoMo"
35
+ }
@@ -1,16 +0,0 @@
1
- import React, { FC } from 'react';
2
- import { ScaleSizeContext } from '../Context';
3
- import { ScaleSizeProviderProps } from './types';
4
-
5
- const ScaleSizeProvider: FC<ScaleSizeProviderProps> = ({
6
- scaleSizeMaxRate,
7
- children,
8
- }) => {
9
- return (
10
- <ScaleSizeContext.Provider value={{ scaleSizeMaxRate }}>
11
- {children}
12
- </ScaleSizeContext.Provider>
13
- );
14
- };
15
-
16
- export default ScaleSizeProvider;