@momo-kits/calendar 0.169.3 → 0.169.4-beta.3

package/ContainerContext.ts

@@ -1,3 +1,14 @@
 import { createContext } from 'react';
 
-export const ContainerContext = createContext({ width: 0, height: 0 });
+/** Style width of the probe the calendar measures to learn the rendered size scale. */
+export const SCALE_PROBE_SIZE = 100;
+
+/**
+ * Calendar container size: `width`/`height` are style sizes for layout, `pageWidth` is
+ * the rendered width that horizontal paging and scroll offsets are measured in.
+ */
+export const ContainerContext = createContext({
+  width: 0,
+  height: 0,
+  pageWidth: 0,
+});

package/MonthList.tsx

@@ -111,22 +111,24 @@ const MonthList = forwardRef<MonthListRef, MonthListProps>((props, ref) => {
 
   // paging keeps the old pixel offset when the width changes (fold, unfold,
   // rotation), so remember the offset and move back onto the same month
-  const scrollOffset = useRef(Math.max(currentScrollIndex, 0) * size.width);
-  const pageWidth = useRef(size.width);
+  const scrollOffset = useRef(
+    Math.max(currentScrollIndex, 0) * size.pageWidth,
+  );
+  const pageWidth = useRef(size.pageWidth);
 
   useLayoutEffect(() => {
     const previousWidth = pageWidth.current;
-    pageWidth.current = size.width;
-    if (previousWidth === size.width || previousWidth <= 0) {
+    pageWidth.current = size.pageWidth;
+    if (previousWidth === size.pageWidth || previousWidth <= 0) {
       return;
     }
     const page = Math.round(scrollOffset.current / previousWidth);
-    scrollOffset.current = page * size.width;
+    scrollOffset.current = page * size.pageWidth;
     listRef.current?.scrollToOffset({
       offset: scrollOffset.current,
       animated: false,
     });
-  }, [size.width]);
+  }, [size.pageWidth]);
 
   const onScroll = useCallback(
     (e: NativeSyntheticEvent<NativeScrollEvent>) => {
@@ -188,11 +190,11 @@ const MonthList = forwardRef<MonthListRef, MonthListProps>((props, ref) => {
 
   const getItemLayout = useCallback(
     (_: any, index: number) => ({
-      length: size.width,
-      offset: size.width * index,
+      length: size.pageWidth,
+      offset: size.pageWidth * index,
       index,
     }),
-    [size.width],
+    [size.pageWidth],
   );
 
   const renderItem = useCallback(

package/index.tsx

@@ -11,7 +11,7 @@ import {
 import CalendarPro from './CalendarPro';
 import { HeaderPanel, SwitchReturnSelection } from './CalendarHeader';
 import { CalendarProps, CalendarProRef, TabHeaderRef } from './types';
-import { ContainerContext } from './ContainerContext';
+import { ContainerContext, SCALE_PROBE_SIZE } from './ContainerContext';
 import styles from './styles';
 
 const DOUBLE = 'doubleDate';
@@ -51,6 +51,8 @@ const Calendar: React.FC<CalendarProps> = props => {
   const [containerWidth, setContainerWidth] = useState<number>(
     Dimensions.get('window').width,
   );
+  // rendered size per style unit, read from a probe of known style width
+  const [layoutScale, setLayoutScale] = useState(1);
   const [isDoubleDateMode, setIsDoubleDateMode] = useState<boolean>(
     mode === DOUBLE,
   );
@@ -104,6 +106,11 @@ const Calendar: React.FC<CalendarProps> = props => {
   const onLayout = (e: LayoutChangeEvent) =>
     setContainerWidth(e.nativeEvent.layout.width);
 
+  const handleProbeLayout = (e: LayoutChangeEvent) => {
+    const ratio = e.nativeEvent.layout.width / SCALE_PROBE_SIZE;
+    if (ratio > 0) setLayoutScale(ratio);
+  };
+
   const onChangeTab = (tabId: number) => {
     onChangeTabProp?.(tabId);
     tabSelected.current = tabId;
@@ -252,11 +259,17 @@ const Calendar: React.FC<CalendarProps> = props => {
   return (
     <ContainerContext.Provider
       value={{
-        width: containerWidth,
+        width: containerWidth / layoutScale,
         height: priceList ? scaledHeight48 : scaledHeight34,
+        pageWidth: containerWidth,
       }}
     >
       <View onLayout={onLayout} style={[style, styles.scrollView]}>
+        <View
+          pointerEvents="none"
+          style={styles.scaleProbe}
+          onLayout={handleProbeLayout}
+        />
         <View
           style={[
             {

package/package.json

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

package/styles.ts

@@ -1,5 +1,6 @@
 import {StyleSheet} from 'react-native';
 import {Colors, Radius, Spacing} from '@momo-kits/foundation';
+import {SCALE_PROBE_SIZE} from './ContainerContext';
 
 export default StyleSheet.create({
   //calendar
@@ -100,6 +101,7 @@ export default StyleSheet.create({
     borderTopRightRadius: Radius.XS,
     borderBottomRightRadius: Radius.XS,
   },
+  scaleProbe: {position: 'absolute', width: SCALE_PROBE_SIZE, height: 0},
   invisible: {
     height: 0,
     width: 0,