@momo-kits/calendar 0.153.2 → 0.154.1-beta.1

package/Day.tsx

@@ -3,7 +3,7 @@ import { Text as RNText, TouchableOpacity, View } from 'react-native';
 import {
   ApplicationContext,
   Colors,
-  scaleSize,
+  useScaleSize,
   Spacing,
   Text,
 } from '@momo-kits/foundation';
@@ -35,6 +35,10 @@ const Day: React.FC<DayProps> = props => {
 
   const { theme } = useContext(ApplicationContext);
   const size = useContext(ContainerContext);
+  const scaledHeight = useScaleSize(48);
+  const scaledSpacing = useScaleSize(Spacing.XS);
+  const scaledFontSize = useScaleSize(8);
+  const scaledLineHeight = useScaleSize(12);
 
   const itemWidth = (size.width - Spacing.M) / 7;
   if (isEmpty || !date) {
@@ -106,7 +110,7 @@ const Day: React.FC<DayProps> = props => {
               paddingVertical: !!price ? Spacing.XS : Spacing.S,
             },
             (isStart || isEnd) && { backgroundColor: theme.colors.primary },
-            !!price && { height: scaleSize(48) },
+            !!price && { height: scaledHeight },
             { height: size.height },
           ]}
           disabled={!(isValid && isInScope)}
@@ -114,13 +118,14 @@ const Day: React.FC<DayProps> = props => {
         >
           {lunarDate && showLunar && !!date && (
             <RNText
+              allowFontScaling={false}
               style={{
                 position: 'absolute',
-                top: scaleSize(Spacing.XS),
-                right: scaleSize(Spacing.XS),
+                top: scaledSpacing,
+                right: scaledSpacing,
                 color: lunarTextColor,
-                fontSize: scaleSize(8),
-                lineHeight: scaleSize(12),
+                fontSize: scaledFontSize,
+                lineHeight: scaledLineHeight,
               }}
             >
               {lunarDate.lunarDay === 1

package/Month.tsx

@@ -2,7 +2,7 @@ import React, {useContext, useMemo} from 'react';
 import {View} from 'react-native';
 import moment, {Moment} from 'moment';
 import Day from './Day';
-import {scaleSize, Spacing} from '@momo-kits/foundation';
+import {useScaleSize, Spacing} from '@momo-kits/foundation';
 import {MonthProps} from './types';
 import {ContainerContext} from './index';
 
@@ -46,6 +46,7 @@ const Month: React.FC<MonthProps> = ({
   };
 
   const size = useContext(ContainerContext);
+  const scaledHeight = useScaleSize(48);
 
   // Precompute disabled dates set for fast lookup (format: YYYY-MM-DD)
   const disabledSet = useMemo(
@@ -72,7 +73,7 @@ const Month: React.FC<MonthProps> = ({
               flexDirection: 'row',
               alignItems: 'center',
               marginBottom: Spacing.XS,
-              height: scaleSize(48),
+              height: scaledHeight,
             }}>
             {dayList.map((item, i) => {
               const {isEmpty, date: dateMoment, lunarDate} = item;

package/MonthList.tsx

@@ -1,4 +1,4 @@
-import { scaleSize, Spacing } from '@momo-kits/foundation';
+import { useScaleSize, Spacing } from '@momo-kits/foundation';
 import moment, { Moment } from 'moment';
 import React, {
   forwardRef,
@@ -38,6 +38,7 @@ const MonthList = forwardRef<MonthListRef, MonthListProps>((props, ref) => {
   } = props;
 
   const size = useContext(ContainerContext);
+  const scaledHeight48 = useScaleSize(48);
   const listRef = useRef<FlatList>(null);
   const currentKey = useRef<string | null>(null);
   const [heightStyle, setHeightStyle] = useState({});
@@ -128,7 +129,7 @@ const MonthList = forwardRef<MonthListRef, MonthListProps>((props, ref) => {
         try {
           setHeightStyle({
             height:
-              (scaleSize(48) * item.dateList.length) / 7 +
+              (scaledHeight48 * item.dateList.length) / 7 +
               Spacing.L * 2 +
               Spacing.XS,
           });

package/index.tsx

@@ -11,7 +11,7 @@ import moment from 'moment';
 import {
   ApplicationContext,
   Radius,
-  scaleSize,
+  useScaleSize,
   Spacing,
   Switch,
   Text,
@@ -27,6 +27,8 @@ export const ContainerContext = createContext({ width: 0, height: 0 });
 
 const Calendar: React.FC<CalendarProps> = props => {
   const { translate, theme } = useContext(ApplicationContext);
+  const scaledHeight48 = useScaleSize(48);
+  const scaledHeight34 = useScaleSize(34);
 
   // derive defaults for date bounds
   const currentDate = new Date();
@@ -336,7 +338,7 @@ const Calendar: React.FC<CalendarProps> = props => {
     <ContainerContext.Provider
       value={{
         width: containerWidth,
-        height: priceList ? scaleSize(48) : scaleSize(34),
+        height: priceList ? scaledHeight48 : scaledHeight34,
       }}
     >
       <View onLayout={onLayout} style={[style, styles.scrollView]}>

package/package.json

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

package/styles.ts

@@ -1,5 +1,5 @@
 import {StyleSheet} from 'react-native';
-import {Colors, Radius, scaleSize, Spacing} from '@momo-kits/foundation';
+import {Colors, Radius, Spacing} from '@momo-kits/foundation';
 
 export default StyleSheet.create({
   //calendar
@@ -119,9 +119,4 @@ export default StyleSheet.create({
     marginBottom: 0,
     overflow: 'hidden',
   },
-  lunarText: {
-    fontSize: scaleSize(8),
-    lineHeight: scaleSize(12),
-    fontWeight: '500',
-  },
 });