@momo-kits/calendar 0.169.4-beta.1 → 0.169.4

package/ContainerContext.ts

@@ -1,14 +1,3 @@
 import { createContext } from 'react';
 
-/** 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,
-});
+export const ContainerContext = createContext({ width: 0, height: 0 });

package/MonthList.tsx

@@ -111,24 +111,22 @@ 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.pageWidth,
-  );
-  const pageWidth = useRef(size.pageWidth);
+  const scrollOffset = useRef(Math.max(currentScrollIndex, 0) * size.width);
+  const pageWidth = useRef(size.width);
 
   useLayoutEffect(() => {
     const previousWidth = pageWidth.current;
-    pageWidth.current = size.pageWidth;
-    if (previousWidth === size.pageWidth || previousWidth <= 0) {
+    pageWidth.current = size.width;
+    if (previousWidth === size.width || previousWidth <= 0) {
       return;
     }
     const page = Math.round(scrollOffset.current / previousWidth);
-    scrollOffset.current = page * size.pageWidth;
+    scrollOffset.current = page * size.width;
     listRef.current?.scrollToOffset({
       offset: scrollOffset.current,
       animated: false,
     });
-  }, [size.pageWidth]);
+  }, [size.width]);
 
   const onScroll = useCallback(
     (e: NativeSyntheticEvent<NativeScrollEvent>) => {
@@ -190,11 +188,11 @@ const MonthList = forwardRef<MonthListRef, MonthListProps>((props, ref) => {
 
   const getItemLayout = useCallback(
     (_: any, index: number) => ({
-      length: size.pageWidth,
-      offset: size.pageWidth * index,
+      length: size.width,
+      offset: size.width * index,
       index,
     }),
-    [size.pageWidth],
+    [size.width],
   );
 
   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, SCALE_PROBE_SIZE } from './ContainerContext';
+import { ContainerContext } from './ContainerContext';
 import styles from './styles';
 
 const DOUBLE = 'doubleDate';
@@ -51,8 +51,6 @@ 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,
   );
@@ -106,11 +104,6 @@ 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;
@@ -259,17 +252,11 @@ const Calendar: React.FC<CalendarProps> = props => {
   return (
     <ContainerContext.Provider
       value={{
-        width: containerWidth / layoutScale,
+        width: containerWidth,
         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.4-beta.1",
+    "version": "0.169.4",
     "private": false,
     "main": "index.tsx",
     "peerDependencies": {

package/styles.ts

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