@fountain-ui/lab 1.13.0 → 1.13.4

package/CHANGELOG.md

@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.13.4](https://github.com/tappytoon/tappytoon/compare/@fountain-ui/lab@1.13.0...@fountain-ui/lab@1.13.4) (2021-10-06)
+
+**Note:** Version bump only for package @fountain-ui/lab
+
+
+
+
+
+## [1.13.3](https://github.com/tappytoon/tappytoon/compare/@fountain-ui/lab@1.13.0...@fountain-ui/lab@1.13.3) (2021-10-01)
+
+**Note:** Version bump only for package @fountain-ui/lab
+
+
+
+
+
+## [1.13.2](https://github.com/tappytoon/tappytoon/compare/@fountain-ui/lab@1.13.0...@fountain-ui/lab@1.13.2) (2021-09-29)
+
+**Note:** Version bump only for package @fountain-ui/lab
+
+
+
+
+
+## [1.13.1](https://github.com/tappytoon/tappytoon/compare/@fountain-ui/lab@1.13.0...@fountain-ui/lab@1.13.1) (2021-09-29)
+
+**Note:** Version bump only for package @fountain-ui/lab
+
+
+
+
+
 # [1.13.0](https://github.com/tappytoon/tappytoon/compare/@fountain-ui/lab@1.9.2...@fountain-ui/lab@1.13.0) (2021-09-27)
 
 **Note:** Version bump only for package @fountain-ui/lab

package/build/commonjs/Carousel/CarouselWeb.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = Carousel;
+exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -96,19 +96,33 @@ const StyledContainer = _styled.default.div(props => ({
   ...props.arrowsStyle
 }));
 
-const ArrowContainer = ({
-  children
-}) => /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-  style: {
-    height: '100%',
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: 'white',
-    borderRadius: 16
-  }
-}, children);
-
-function Carousel(props) {
+const ArrowContainer = props => {
+  const {
+    children,
+    currentSlide,
+    slideCount,
+    visible,
+    ...otherProps
+  } = props;
+  return visible ?
+  /*#__PURE__*/
+  // If root component is not a div, there's no arrow class.
+  _react.default.createElement("div", _extends({}, otherProps, {
+    style: {
+      cursor: 'pointer'
+    }
+  }), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: {
+      height: '100%',
+      justifyContent: 'center',
+      alignItems: 'center',
+      backgroundColor: 'white',
+      borderRadius: 16
+    }
+  }, children)) : null;
+};
+
+var _default = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const {
     activeSlideScale = _utils2.defaultActiveSlideScale,
     autoplay = _utils2.defaultAutoplay,
@@ -131,6 +145,8 @@ function Carousel(props) {
 
   const slickRef = _react.default.useRef(null);
 
+  const [visibleArrow, setVisibleArrow] = _react.default.useState(false);
+
   _react.default.useEffect(() => {
     if (slickRef.current) {
       slickRef.current.slickGoTo(index, false);
@@ -157,12 +173,25 @@ function Carousel(props) {
     fixOnClickNotWorkingAfterMobileSwipe();
   };
 
+  const onPointerOver = () => setVisibleArrow(true);
+
+  const onPointerLeave = () => setVisibleArrow(false);
+
+  _react.default.useEffect(() => {
+    if (ref) {
+      //@ts-ignore
+      ref.current = slickRef.current;
+    }
+  }, []);
+
   return /*#__PURE__*/_react.default.createElement(StyledContainer, {
     activeSlideScale: activeSlideScale,
     inactiveSlideOpacity: inactiveSlideOpacity,
     inactiveSlideScale: inactiveSlideScale,
     arrowsStyle: arrowsStyle,
-    trackStyle: trackStyle
+    trackStyle: trackStyle,
+    onPointerOver: onPointerOver,
+    onPointerLeave: onPointerLeave
   }, /*#__PURE__*/_react.default.createElement(_reactSlick.default, _extends({}, baseSettings, {
     afterChange: handleAfterChange,
     autoplay: autoplay,
@@ -176,19 +205,18 @@ function Carousel(props) {
     slidesToScroll: slidesToScroll,
     slidesToShow: slidesToShow,
     arrows: arrows,
-    prevArrow:
-    /*#__PURE__*/
-    // If root component is not a div, there's no arrow class.
-    _react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(ArrowContainer, {
+    prevArrow: /*#__PURE__*/_react.default.createElement(ArrowContainer, {
+      visible: visibleArrow,
       children: /*#__PURE__*/_react.default.createElement(_icons.ChevronLeft, {
         fill: '#767676'
       })
-    })),
-    nextArrow: /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(ArrowContainer, {
+    }),
+    nextArrow: /*#__PURE__*/_react.default.createElement(ArrowContainer, {
+      visible: visibleArrow,
       children: /*#__PURE__*/_react.default.createElement(_icons.ChevronRight, {
         fill: '#767676'
       })
-    }))
+    })
   }), (0, _utils.mapIndexed)((item, index) => {
     const child = renderItem({
       item,
@@ -203,7 +231,7 @@ function Carousel(props) {
 
     return child;
   }, data)));
-}
+});
 
-;
+exports.default = _default;
 //# sourceMappingURL=CarouselWeb.js.map

package/build/commonjs/Carousel/CarouselWeb.js.map

@@ -1 +1 @@
-{"version":3,"sources":["CarouselWeb.tsx"],"names":["baseSettings","dots","draggable","lazyLoad","pauseOnFocus","pauseOnHover","rows","swipe","slidesPerRow","vertical","noop","StyledContainer","styled","div","props","display","position","userSelect","overflow","margin","padding","outline","cursor","transform","top","left","content","clear","trackStyle","float","height","minHeight","justifyContent","inactiveSlideScale","transition","opacity","inactiveSlideOpacity","activeSlideScale","arrowsStyle","ArrowContainer","children","alignItems","backgroundColor","borderRadius","Carousel","defaultActiveSlideScale","autoplay","defaultAutoplay","autoplayInterval","defaultAutoplayInterval","centerMode","centerSlidePadding","data","defaultInactiveSlideOpacity","defaultInactiveSlideScale","index","infinite","defaultInfinite","onChange","renderItem","slidesToScroll","slidesToShow","arrows","slickRef","React","useRef","useEffect","current","slickGoTo","fixOnClickNotWorkingAfterMobileSwipe","innerSlider","clickHandler","handleAfterChange","newIndex","handleBeforeChange","item","child","cloneElement","key"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport Slick, { Settings } from 'react-slick';\nimport styled from '@emotion/styled';\nimport { ChevronLeft, ChevronRight } from '@fountain-ui/icons';\nimport { mapIndexed } from '@fountain-ui/utils';\nimport type CarouselProps from './CarouselProps';\nimport {\n    defaultAutoplay,\n    defaultAutoplayInterval,\n    defaultInactiveSlideOpacity,\n    defaultInactiveSlideScale,\n    defaultActiveSlideScale,\n    defaultInfinite,\n} from './utils';\n\nconst baseSettings: Settings = {\n    dots: false,\n    draggable: true,\n    lazyLoad: 'ondemand',\n    pauseOnFocus: true,\n    pauseOnHover: true,\n    rows: 1,\n    swipe: true,\n    slidesPerRow: 1,\n    vertical: false,\n};\n\nconst noop = () => void 0;\n\nconst StyledContainer: any = styled.div((props: any) => ({\n    ['& .slick-slider']: {\n        display: 'block',\n        position: 'relative',\n        userSelect: 'none',\n    },\n    ['& .slick-list']: {\n        display: 'block',\n        position: 'relative',\n        overflow: 'hidden',\n        margin: 0,\n        padding: 0,\n        ['&:focus']: {\n            outline: 'none',\n        },\n        ['&.dragging']: {\n            cursor: 'pointer',\n        },\n    },\n    ['& .slick-slider .slick-track, &.slick-slider .slick-list']: {\n        transform: 'translate3d(0, 0, 0)',\n    },\n    ['& .slick-track']: {\n        display: 'block',\n        position: 'relative',\n        top: 0,\n        left: 0,\n        ['&:before, &:after']: {\n            display: 'table',\n            content: '\\'\\'',\n        },\n        ['&:after']: {\n            clear: 'both',\n        },\n        ...props.trackStyle,\n    },\n    ['& .slick-slide']: {\n        display: 'none',\n        float: 'left',\n        height: '100%',\n        minHeight: 1,\n        ['& > div']: {\n            justifyContent: 'center',\n            display: 'flex',\n            transform: `scale(${props.inactiveSlideScale})`,\n            transition: 'transform .5s',\n            opacity: props.inactiveSlideOpacity,\n        },\n    },\n    ['& .slick-current > div']: {\n        transform: `scale(${props.activeSlideScale})`,\n        opacity: 1,\n    },\n    ['& .slick-initialized .slick-slide']: {\n        display: 'block',\n    },\n    ...props.arrowsStyle,\n}));\n\ninterface ArrowContainerProps {\n    children: React.ReactElement;\n}\n\nconst ArrowContainer = ({ children }: ArrowContainerProps) => (\n    <View\n        style={{\n            height: '100%',\n            justifyContent: 'center',\n            alignItems: 'center',\n            backgroundColor: 'white',\n            borderRadius: 16,\n        }}\n    >\n        {children}\n    </View>\n);\n\nexport default function Carousel<ItemT>(props: CarouselProps<ItemT>) {\n    const {\n        activeSlideScale = defaultActiveSlideScale,\n        autoplay = defaultAutoplay,\n        autoplayInterval = defaultAutoplayInterval,\n        centerMode = false,\n        centerSlidePadding = 0,\n        data,\n        inactiveSlideOpacity = defaultInactiveSlideOpacity,\n        inactiveSlideScale = defaultInactiveSlideScale,\n        index,\n        infinite = defaultInfinite,\n        onChange,\n        renderItem,\n        slidesToScroll = 1,\n        slidesToShow = 1,\n        arrows = false,\n        arrowsStyle = {},\n        trackStyle = {},\n    } = props;\n\n    const slickRef = React.useRef<Slick | null>(null);\n\n    React.useEffect(() => {\n        if (slickRef.current) {\n            slickRef.current.slickGoTo(index, false);\n        }\n    }, [index]);\n\n    const fixOnClickNotWorkingAfterMobileSwipe = () => {\n        // @ts-ignore\n        if (slickRef.current && slickRef.current.innerSlider) {\n            // @ts-ignore\n            slickRef.current.innerSlider.clickHandler = noop;\n        }\n    };\n\n    const handleAfterChange = (newIndex: number) => {\n        fixOnClickNotWorkingAfterMobileSwipe();\n\n        if (onChange) {\n            onChange(newIndex);\n        }\n    };\n\n    const handleBeforeChange = () => {\n        fixOnClickNotWorkingAfterMobileSwipe();\n    };\n\n    return (\n        <StyledContainer\n            activeSlideScale={activeSlideScale}\n            inactiveSlideOpacity={inactiveSlideOpacity}\n            inactiveSlideScale={inactiveSlideScale}\n            arrowsStyle={arrowsStyle}\n            trackStyle={trackStyle}\n        >\n            <Slick\n                {...baseSettings}\n                afterChange={handleAfterChange}\n                autoplay={autoplay}\n                autoplaySpeed={autoplayInterval}\n                beforeChange={handleBeforeChange}\n                centerMode={centerMode}\n                centerPadding={`${centerSlidePadding}px`}\n                infinite={infinite}\n                initialSlide={index}\n                ref={slickRef}\n                slidesToScroll={slidesToScroll}\n                slidesToShow={slidesToShow}\n                arrows={arrows}\n                prevArrow={(\n                    // If root component is not a div, there's no arrow class.\n                    <div>\n                        <ArrowContainer children={<ChevronLeft fill={'#767676'}/>}/>\n                    </div>\n                )}\n                nextArrow={(\n                    <div>\n                        <ArrowContainer children={<ChevronRight fill={'#767676'}/>}/>\n                    </div>\n                )}\n            >\n                {mapIndexed((item, index) => {\n                    const child = renderItem({ item, index });\n\n                    if (child) {\n                        return React.cloneElement(child, { key: index });\n                    }\n                    return child;\n                }, data)}\n            </Slick>\n        </StyledContainer>\n    );\n};\n"]}
+{"version":3,"sources":["CarouselWeb.tsx"],"names":["baseSettings","dots","draggable","lazyLoad","pauseOnFocus","pauseOnHover","rows","swipe","slidesPerRow","vertical","noop","StyledContainer","styled","div","props","display","position","userSelect","overflow","margin","padding","outline","cursor","transform","top","left","content","clear","trackStyle","float","height","minHeight","justifyContent","inactiveSlideScale","transition","opacity","inactiveSlideOpacity","activeSlideScale","arrowsStyle","ArrowContainer","children","currentSlide","slideCount","visible","otherProps","alignItems","backgroundColor","borderRadius","React","forwardRef","ref","defaultActiveSlideScale","autoplay","defaultAutoplay","autoplayInterval","defaultAutoplayInterval","centerMode","centerSlidePadding","data","defaultInactiveSlideOpacity","defaultInactiveSlideScale","index","infinite","defaultInfinite","onChange","renderItem","slidesToScroll","slidesToShow","arrows","slickRef","useRef","visibleArrow","setVisibleArrow","useState","useEffect","current","slickGoTo","fixOnClickNotWorkingAfterMobileSwipe","innerSlider","clickHandler","handleAfterChange","newIndex","handleBeforeChange","onPointerOver","onPointerLeave","item","child","cloneElement","key"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport Slick, { Settings } from 'react-slick';\nimport styled from '@emotion/styled';\nimport { ChevronLeft, ChevronRight } from '@fountain-ui/icons';\nimport { mapIndexed } from '@fountain-ui/utils';\nimport type CarouselProps from './CarouselProps';\nimport {\n    defaultAutoplay,\n    defaultAutoplayInterval,\n    defaultInactiveSlideOpacity,\n    defaultInactiveSlideScale,\n    defaultActiveSlideScale,\n    defaultInfinite,\n} from './utils';\n\nconst baseSettings: Settings = {\n    dots: false,\n    draggable: true,\n    lazyLoad: 'ondemand',\n    pauseOnFocus: true,\n    pauseOnHover: true,\n    rows: 1,\n    swipe: true,\n    slidesPerRow: 1,\n    vertical: false,\n};\n\nconst noop = () => void 0;\n\nconst StyledContainer: any = styled.div((props: any) => ({\n    ['& .slick-slider']: {\n        display: 'block',\n        position: 'relative',\n        userSelect: 'none',\n    },\n    ['& .slick-list']: {\n        display: 'block',\n        position: 'relative',\n        overflow: 'hidden',\n        margin: 0,\n        padding: 0,\n        ['&:focus']: {\n            outline: 'none',\n        },\n        ['&.dragging']: {\n            cursor: 'pointer',\n        },\n    },\n    ['& .slick-slider .slick-track, &.slick-slider .slick-list']: {\n        transform: 'translate3d(0, 0, 0)',\n    },\n    ['& .slick-track']: {\n        display: 'block',\n        position: 'relative',\n        top: 0,\n        left: 0,\n        ['&:before, &:after']: {\n            display: 'table',\n            content: '\\'\\'',\n        },\n        ['&:after']: {\n            clear: 'both',\n        },\n        ...props.trackStyle,\n    },\n    ['& .slick-slide']: {\n        display: 'none',\n        float: 'left',\n        height: '100%',\n        minHeight: 1,\n        ['& > div']: {\n            justifyContent: 'center',\n            display: 'flex',\n            transform: `scale(${props.inactiveSlideScale})`,\n            transition: 'transform .5s',\n            opacity: props.inactiveSlideOpacity,\n        },\n    },\n    ['& .slick-current > div']: {\n        transform: `scale(${props.activeSlideScale})`,\n        opacity: 1,\n    },\n    ['& .slick-initialized .slick-slide']: {\n        display: 'block',\n    },\n    ...props.arrowsStyle,\n}));\n\ninterface ArrowContainerProps {\n    children: React.ReactElement;\n    visible: boolean;\n    currentSlide?: any;\n    slideCount?: any;\n}\n\nconst ArrowContainer = (props: ArrowContainerProps) => {\n    const {\n        children,\n        currentSlide,\n        slideCount,\n        visible,\n        ...otherProps\n    } = props;\n\n    return visible ? (\n        // If root component is not a div, there's no arrow class.\n        <div {...otherProps} style={{ cursor: 'pointer' }}>\n            <View\n                style={{\n                    height: '100%',\n                    justifyContent: 'center',\n                    alignItems: 'center',\n                    backgroundColor: 'white',\n                    borderRadius: 16,\n                }}\n            >\n                {children}\n            </View>\n        </div>\n    ) : null;\n};\n\nexport default React.forwardRef((props: CarouselProps, ref) => {\n    const {\n        activeSlideScale = defaultActiveSlideScale,\n        autoplay = defaultAutoplay,\n        autoplayInterval = defaultAutoplayInterval,\n        centerMode = false,\n        centerSlidePadding = 0,\n        data,\n        inactiveSlideOpacity = defaultInactiveSlideOpacity,\n        inactiveSlideScale = defaultInactiveSlideScale,\n        index,\n        infinite = defaultInfinite,\n        onChange,\n        renderItem,\n        slidesToScroll = 1,\n        slidesToShow = 1,\n        arrows = false,\n        arrowsStyle = {},\n        trackStyle = {},\n    } = props;\n\n    const slickRef = React.useRef<Slick | null>(null);\n    const [visibleArrow, setVisibleArrow] = React.useState(false);\n\n    React.useEffect(() => {\n        if (slickRef.current) {\n            slickRef.current.slickGoTo(index, false);\n        }\n    }, [index]);\n\n    const fixOnClickNotWorkingAfterMobileSwipe = () => {\n        // @ts-ignore\n        if (slickRef.current && slickRef.current.innerSlider) {\n            // @ts-ignore\n            slickRef.current.innerSlider.clickHandler = noop;\n        }\n    };\n\n    const handleAfterChange = (newIndex: number) => {\n        fixOnClickNotWorkingAfterMobileSwipe();\n\n        if (onChange) {\n            onChange(newIndex);\n        }\n    };\n\n    const handleBeforeChange = () => {\n        fixOnClickNotWorkingAfterMobileSwipe();\n    };\n\n    const onPointerOver = () => setVisibleArrow(true);\n    const onPointerLeave = () => setVisibleArrow(false);\n\n    React.useEffect(() => {\n        if (ref) {\n            //@ts-ignore\n            ref.current = slickRef.current;\n        }\n    }, []);\n\n    return (\n        <StyledContainer\n            activeSlideScale={activeSlideScale}\n            inactiveSlideOpacity={inactiveSlideOpacity}\n            inactiveSlideScale={inactiveSlideScale}\n            arrowsStyle={arrowsStyle}\n            trackStyle={trackStyle}\n            onPointerOver={onPointerOver}\n            onPointerLeave={onPointerLeave}\n        >\n            <Slick\n                {...baseSettings}\n                afterChange={handleAfterChange}\n                autoplay={autoplay}\n                autoplaySpeed={autoplayInterval}\n                beforeChange={handleBeforeChange}\n                centerMode={centerMode}\n                centerPadding={`${centerSlidePadding}px`}\n                infinite={infinite}\n                initialSlide={index}\n                ref={slickRef}\n                slidesToScroll={slidesToScroll}\n                slidesToShow={slidesToShow}\n                arrows={arrows}\n                prevArrow={<ArrowContainer visible={visibleArrow} children={<ChevronLeft fill={'#767676'}/>}/>}\n                nextArrow={<ArrowContainer visible={visibleArrow} children={<ChevronRight fill={'#767676'}/>}/>}\n            >\n                {mapIndexed((item, index) => {\n                    const child = renderItem({ item, index });\n\n                    if (child) {\n                        return React.cloneElement(child, { key: index });\n                    }\n                    return child;\n                }, data)}\n            </Slick>\n        </StyledContainer>\n    );\n});\n"]}

package/build/commonjs/DateTimePicker/DateTimePicker.js

@@ -47,11 +47,13 @@ function DateTimePicker(props) {
   } = useDateTimePicker(); //TODO: Need to update arrow components
 
   const LeftArrow = /*#__PURE__*/_react.default.createElement(_core.Typography, {
-    children: '<'
+    children: '<',
+    color: 'textPrimary'
   });
 
   const RightArrow = /*#__PURE__*/_react.default.createElement(_core.Typography, {
-    children: '>'
+    children: '>',
+    color: 'textPrimary'
   });
 
   const onYearPress = date => {

package/build/commonjs/DateTimePicker/DateTimePicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["DateTimePicker.tsx"],"names":["useDateTimePicker","React","useContext","DateTimePickerContext","DateTimePicker","props","currentMonth","Date","locale","markedDate","markedDateProp","maxDate","minDate","onDayPress","onYearPress","onYearPressProp","theme","yearPickerVisible","setYearPickerVisible","useState","locales","LeftArrow","RightArrow","date","LocaleConfig","defaultLocale","direction","selected","disableTouchEvent","selectedColor","palette","primary","main","selectedTextColor","contrastTextColor","toDate"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;;AAPA;AASA,MAAMA,iBAAiB,GAAG,MAAM;AAC5B,SAAOC,eAAMC,UAAN,CAAiBC,6CAAjB,CAAP;AACH,CAFD;;AAIe,SAASC,cAAT,CAAwBC,KAAxB,EAAoD;AAC/D,QAAM;AACFC,IAAAA,YAAY,GAAG,IAAIC,IAAJ,EADb;AAEFC,IAAAA,MAFE;AAGFC,IAAAA,UAAU,EAAEC,cAHV;AAIFC,IAAAA,OAJE;AAKFC,IAAAA,OALE;AAMFC,IAAAA,UANE;AAOFC,IAAAA,WAAW,EAAEC;AAPX,MAQFV,KARJ;AAUA,QAAMW,KAAK,GAAG,uBAAd;;AAEA,QAAM,CAACC,iBAAD,EAAoBC,oBAApB,IAA4CjB,eAAMkB,QAAN,CAAe,KAAf,CAAlD;;AACA,QAAM;AAAEC,IAAAA;AAAF,MAAcpB,iBAAiB,EAArC,CAd+D,CAgB/D;;AACA,QAAMqB,SAAS,gBAAG,6BAAC,gBAAD;AAAY,IAAA,QAAQ,EAAE;AAAtB,IAAlB;;AACA,QAAMC,UAAU,gBAAG,6BAAC,gBAAD;AAAY,IAAA,QAAQ,EAAE;AAAtB,IAAnB;;AAEA,QAAMR,WAAW,GAAIS,IAAD,IAAgB;AAChCL,IAAAA,oBAAoB,CAAC,KAAD,CAApB;AACAH,IAAAA,eAAe,IAAIA,eAAe,CAACQ,IAAD,CAAlC;AACH,GAHD;;AAKA,MAAIf,MAAJ,EAAY;AACRgB,uCAAaJ,OAAb,GAAuBA,OAAvB;AACAI,uCAAaC,aAAb,GAA6BjB,MAA7B;AACH;;AAED,QAAMC,UAAU,GAAGC,cAAc,GAAG,qBAAOA,cAAP,EAAuB,YAAvB,CAAH,GAA0C,EAA3E;;AAEA,MAAIO,iBAAJ,EAAuB;AACnB,wBACI,6BAAC,mBAAD;AACI,MAAA,IAAI,EAAEX,YADV;AAEI,MAAA,MAAM,EAAEE,MAFZ;AAGI,MAAA,OAAO,EAAEG,OAHb;AAII,MAAA,OAAO,EAAEC,OAJb;AAKI,MAAA,WAAW,EAAEE;AALjB,MADJ;AASH;;AAED,sBACI,6BAAC,8BAAD;AACI,IAAA,OAAO,EAAER,YADb;AAEI,IAAA,UAAU,EAAEO,UAFhB;AAGI,IAAA,OAAO,EAAEF,OAHb;AAII,IAAA,OAAO,EAAEC,OAJb;AAKI,IAAA,WAAW,EAAGc,SAAD,IAAuBA,SAAS,KAAK,MAAd,GAAuBL,SAAvB,GAAmCC,UAL3E;AAMI,IAAA,WAAW,EAAE;AACT,OAACb,UAAD,GAAc;AACVkB,QAAAA,QAAQ,EAAE,IADA;AAEVC,QAAAA,iBAAiB,EAAE,IAFT;AAGVC,QAAAA,aAAa,EAAEb,KAAK,CAACc,OAAN,CAAcC,OAAd,CAAsBC,IAH3B;AAIVC,QAAAA,iBAAiB,EAAEjB,KAAK,CAACc,OAAN,CAAcC,OAAd,CAAsBG;AAJ/B;AADL,KANjB,CAcI;AAdJ;AAeI,IAAA,YAAY,EAAGX,IAAD,iBACV,6BAAC,YAAD;AACI,MAAA,QAAQ,EAAE,uBAAWA,IAAI,CAACY,MAAL,EAAX,EAA0B3B,MAA1B,CADd;AAEI,MAAA,OAAO,EAAE,MAFb;AAGI,MAAA,IAAI,EAAE,OAHV;AAII,MAAA,OAAO,EAAE,MAAMU,oBAAoB,CAAC,IAAD;AAJvC;AAhBR,IADJ;AA0BH;;AAAA","sourcesContent":["import React from 'react';\nimport { format } from 'date-fns';\n//@ts-ignore\nimport { Calendar, LocaleConfig } from 'react-native-calendars';\nimport { Button, Typography } from '@fountain-ui/core';\nimport { useTheme } from '@fountain-ui/styles';\nimport YearPicker from './YearPicker';\nimport { DateTimePickerContext } from './DateTimePickerProvider';\nimport type DateTimePickerProps from './DateTimePickerProps';\nimport { formatDate } from './utils';\n\nconst useDateTimePicker = () => {\n    return React.useContext(DateTimePickerContext);\n};\n\nexport default function DateTimePicker(props: DateTimePickerProps) {\n    const {\n        currentMonth = new Date(),\n        locale,\n        markedDate: markedDateProp,\n        maxDate,\n        minDate,\n        onDayPress,\n        onYearPress: onYearPressProp,\n    } = props;\n\n    const theme = useTheme();\n\n    const [yearPickerVisible, setYearPickerVisible] = React.useState(false);\n    const { locales } = useDateTimePicker();\n\n    //TODO: Need to update arrow components\n    const LeftArrow = <Typography children={'<'}/>;\n    const RightArrow = <Typography children={'>'}/>;\n\n    const onYearPress = (date: Date) => {\n        setYearPickerVisible(false);\n        onYearPressProp && onYearPressProp(date);\n    };\n\n    if (locale) {\n        LocaleConfig.locales = locales;\n        LocaleConfig.defaultLocale = locale;\n    }\n\n    const markedDate = markedDateProp ? format(markedDateProp, 'yyyy-MM-dd') : '';\n\n    if (yearPickerVisible) {\n        return (\n            <YearPicker\n                date={currentMonth}\n                locale={locale}\n                maxDate={maxDate}\n                minDate={minDate}\n                onYearPress={onYearPress}\n            />\n        );\n    }\n\n    return (\n        <Calendar\n            current={currentMonth}\n            onDayPress={onDayPress}\n            maxDate={maxDate}\n            minDate={minDate}\n            renderArrow={(direction: string) => direction === 'left' ? LeftArrow : RightArrow}\n            markedDates={{\n                [markedDate]: {\n                    selected: true,\n                    disableTouchEvent: true,\n                    selectedColor: theme.palette.primary.main,\n                    selectedTextColor: theme.palette.primary.contrastTextColor,\n                },\n            }}\n            // @ts-ignore\n            renderHeader={(date) => (\n                <Button\n                    children={formatDate(date.toDate(), locale)}\n                    variant={'text'}\n                    size={'small'}\n                    onPress={() => setYearPickerVisible(true)}\n                />\n            )}\n        />\n    );\n};\n"]}
+{"version":3,"sources":["DateTimePicker.tsx"],"names":["useDateTimePicker","React","useContext","DateTimePickerContext","DateTimePicker","props","currentMonth","Date","locale","markedDate","markedDateProp","maxDate","minDate","onDayPress","onYearPress","onYearPressProp","theme","yearPickerVisible","setYearPickerVisible","useState","locales","LeftArrow","RightArrow","date","LocaleConfig","defaultLocale","direction","selected","disableTouchEvent","selectedColor","palette","primary","main","selectedTextColor","contrastTextColor","toDate"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;;AAPA;AASA,MAAMA,iBAAiB,GAAG,MAAM;AAC5B,SAAOC,eAAMC,UAAN,CAAiBC,6CAAjB,CAAP;AACH,CAFD;;AAIe,SAASC,cAAT,CAAwBC,KAAxB,EAAoD;AAC/D,QAAM;AACFC,IAAAA,YAAY,GAAG,IAAIC,IAAJ,EADb;AAEFC,IAAAA,MAFE;AAGFC,IAAAA,UAAU,EAAEC,cAHV;AAIFC,IAAAA,OAJE;AAKFC,IAAAA,OALE;AAMFC,IAAAA,UANE;AAOFC,IAAAA,WAAW,EAAEC;AAPX,MAQFV,KARJ;AAUA,QAAMW,KAAK,GAAG,uBAAd;;AAEA,QAAM,CAACC,iBAAD,EAAoBC,oBAApB,IAA4CjB,eAAMkB,QAAN,CAAe,KAAf,CAAlD;;AACA,QAAM;AAAEC,IAAAA;AAAF,MAAcpB,iBAAiB,EAArC,CAd+D,CAgB/D;;AACA,QAAMqB,SAAS,gBAAG,6BAAC,gBAAD;AAAY,IAAA,QAAQ,EAAE,GAAtB;AAA2B,IAAA,KAAK,EAAE;AAAlC,IAAlB;;AACA,QAAMC,UAAU,gBAAG,6BAAC,gBAAD;AAAY,IAAA,QAAQ,EAAE,GAAtB;AAA2B,IAAA,KAAK,EAAE;AAAlC,IAAnB;;AAEA,QAAMR,WAAW,GAAIS,IAAD,IAAgB;AAChCL,IAAAA,oBAAoB,CAAC,KAAD,CAApB;AACAH,IAAAA,eAAe,IAAIA,eAAe,CAACQ,IAAD,CAAlC;AACH,GAHD;;AAKA,MAAIf,MAAJ,EAAY;AACRgB,uCAAaJ,OAAb,GAAuBA,OAAvB;AACAI,uCAAaC,aAAb,GAA6BjB,MAA7B;AACH;;AAED,QAAMC,UAAU,GAAGC,cAAc,GAAG,qBAAOA,cAAP,EAAuB,YAAvB,CAAH,GAA0C,EAA3E;;AAEA,MAAIO,iBAAJ,EAAuB;AACnB,wBACI,6BAAC,mBAAD;AACI,MAAA,IAAI,EAAEX,YADV;AAEI,MAAA,MAAM,EAAEE,MAFZ;AAGI,MAAA,OAAO,EAAEG,OAHb;AAII,MAAA,OAAO,EAAEC,OAJb;AAKI,MAAA,WAAW,EAAEE;AALjB,MADJ;AASH;;AAED,sBACI,6BAAC,8BAAD;AACI,IAAA,OAAO,EAAER,YADb;AAEI,IAAA,UAAU,EAAEO,UAFhB;AAGI,IAAA,OAAO,EAAEF,OAHb;AAII,IAAA,OAAO,EAAEC,OAJb;AAKI,IAAA,WAAW,EAAGc,SAAD,IAAuBA,SAAS,KAAK,MAAd,GAAuBL,SAAvB,GAAmCC,UAL3E;AAMI,IAAA,WAAW,EAAE;AACT,OAACb,UAAD,GAAc;AACVkB,QAAAA,QAAQ,EAAE,IADA;AAEVC,QAAAA,iBAAiB,EAAE,IAFT;AAGVC,QAAAA,aAAa,EAAEb,KAAK,CAACc,OAAN,CAAcC,OAAd,CAAsBC,IAH3B;AAIVC,QAAAA,iBAAiB,EAAEjB,KAAK,CAACc,OAAN,CAAcC,OAAd,CAAsBG;AAJ/B;AADL,KANjB,CAcI;AAdJ;AAeI,IAAA,YAAY,EAAGX,IAAD,iBACV,6BAAC,YAAD;AACI,MAAA,QAAQ,EAAE,uBAAWA,IAAI,CAACY,MAAL,EAAX,EAA0B3B,MAA1B,CADd;AAEI,MAAA,OAAO,EAAE,MAFb;AAGI,MAAA,IAAI,EAAE,OAHV;AAII,MAAA,OAAO,EAAE,MAAMU,oBAAoB,CAAC,IAAD;AAJvC;AAhBR,IADJ;AA0BH;;AAAA","sourcesContent":["import React from 'react';\nimport { format } from 'date-fns';\n//@ts-ignore\nimport { Calendar, LocaleConfig } from 'react-native-calendars';\nimport { Button, Typography } from '@fountain-ui/core';\nimport { useTheme } from '@fountain-ui/styles';\nimport YearPicker from './YearPicker';\nimport { DateTimePickerContext } from './DateTimePickerProvider';\nimport type DateTimePickerProps from './DateTimePickerProps';\nimport { formatDate } from './utils';\n\nconst useDateTimePicker = () => {\n    return React.useContext(DateTimePickerContext);\n};\n\nexport default function DateTimePicker(props: DateTimePickerProps) {\n    const {\n        currentMonth = new Date(),\n        locale,\n        markedDate: markedDateProp,\n        maxDate,\n        minDate,\n        onDayPress,\n        onYearPress: onYearPressProp,\n    } = props;\n\n    const theme = useTheme();\n\n    const [yearPickerVisible, setYearPickerVisible] = React.useState(false);\n    const { locales } = useDateTimePicker();\n\n    //TODO: Need to update arrow components\n    const LeftArrow = <Typography children={'<'} color={'textPrimary'}/>;\n    const RightArrow = <Typography children={'>'} color={'textPrimary'}/>;\n\n    const onYearPress = (date: Date) => {\n        setYearPickerVisible(false);\n        onYearPressProp && onYearPressProp(date);\n    };\n\n    if (locale) {\n        LocaleConfig.locales = locales;\n        LocaleConfig.defaultLocale = locale;\n    }\n\n    const markedDate = markedDateProp ? format(markedDateProp, 'yyyy-MM-dd') : '';\n\n    if (yearPickerVisible) {\n        return (\n            <YearPicker\n                date={currentMonth}\n                locale={locale}\n                maxDate={maxDate}\n                minDate={minDate}\n                onYearPress={onYearPress}\n            />\n        );\n    }\n\n    return (\n        <Calendar\n            current={currentMonth}\n            onDayPress={onDayPress}\n            maxDate={maxDate}\n            minDate={minDate}\n            renderArrow={(direction: string) => direction === 'left' ? LeftArrow : RightArrow}\n            markedDates={{\n                [markedDate]: {\n                    selected: true,\n                    disableTouchEvent: true,\n                    selectedColor: theme.palette.primary.main,\n                    selectedTextColor: theme.palette.primary.contrastTextColor,\n                },\n            }}\n            // @ts-ignore\n            renderHeader={(date) => (\n                <Button\n                    children={formatDate(date.toDate(), locale)}\n                    variant={'text'}\n                    size={'small'}\n                    onPress={() => setYearPickerVisible(true)}\n                />\n            )}\n        />\n    );\n};\n"]}

package/build/commonjs/ViewPager/ChildrenMemoizedPage.js

@@ -32,10 +32,6 @@ var _default = /*#__PURE__*/_react.default.memo(Page, (prevProps, nextProps) =>
     return false;
   }
 
-  if (prevProps.style !== nextProps.style) {
-    return false;
-  }
-
   if (prevProps.rerenderKey !== nextProps.rerenderKey) {
     return false;
   }

package/build/commonjs/ViewPager/ChildrenMemoizedPage.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ChildrenMemoizedPage.tsx"],"names":["Page","props","isVisible","otherProps","React","memo","prevProps","nextProps","children","style","rerenderKey"],"mappings":";;;;;;;AAAA;;AACA;;;;;;AAGA,MAAMA,IAAI,GAAG,SAASA,IAAT,CAAcC,KAAd,EAAgC;AACzC,QAAM;AAAEC,IAAAA,SAAF;AAAa,OAAGC;AAAhB,MAA+BF,KAArC;AAEA,sBACI,6BAAC,iBAAD;AACI,IAAA,WAAW,EAAE;AADjB,KAEQE,UAFR,EADJ;AAMH,CATD;;4BAWeC,eAAMC,IAAN,CAAWL,IAAX,EAAiB,CAACM,SAAD,EAAYC,SAAZ,KAA0B;AACtD,MAAID,SAAS,CAACE,QAAV,KAAuB,IAAvB,IAA+BD,SAAS,CAACC,QAAV,KAAuB,IAA1D,EAAgE;AAC5D,WAAO,IAAP;AACH;;AAED,MAAIF,SAAS,CAACJ,SAAV,KAAwBK,SAAS,CAACL,SAAtC,EAAiD;AAC7C,WAAO,KAAP;AACH;;AAED,MAAII,SAAS,CAACG,KAAV,KAAoBF,SAAS,CAACE,KAAlC,EAAyC;AACrC,WAAO,KAAP;AACH;;AAED,MAAIH,SAAS,CAACI,WAAV,KAA0BH,SAAS,CAACG,WAAxC,EAAqD;AACjD,WAAO,KAAP;AACH;;AAED,SAAOJ,SAAS,CAACE,QAAV,KAAuB,IAAvB,IAA+BD,SAAS,CAACC,QAAV,KAAuB,IAA7D;AACH,CAlBc,C","sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport type { PageProps } from './ViewPagerProps';\n\nconst Page = function Page(props: PageProps) {\n    const { isVisible, ...otherProps } = props;\n\n    return (\n        <View\n            collapsable={false}\n            {...otherProps}\n        />\n    );\n};\n\nexport default React.memo(Page, (prevProps, nextProps) => {\n    if (prevProps.children === null && nextProps.children === null) {\n        return true;\n    }\n\n    if (prevProps.isVisible !== nextProps.isVisible) {\n        return false;\n    }\n\n    if (prevProps.style !== nextProps.style) {\n        return false;\n    }\n\n    if (prevProps.rerenderKey !== nextProps.rerenderKey) {\n        return false;\n    }\n\n    return prevProps.children !== null && nextProps.children !== null;\n});\n"]}
+{"version":3,"sources":["ChildrenMemoizedPage.tsx"],"names":["Page","props","isVisible","otherProps","React","memo","prevProps","nextProps","children","rerenderKey"],"mappings":";;;;;;;AAAA;;AACA;;;;;;AAGA,MAAMA,IAAI,GAAG,SAASA,IAAT,CAAcC,KAAd,EAAgC;AACzC,QAAM;AAAEC,IAAAA,SAAF;AAAa,OAAGC;AAAhB,MAA+BF,KAArC;AAEA,sBACI,6BAAC,iBAAD;AACI,IAAA,WAAW,EAAE;AADjB,KAEQE,UAFR,EADJ;AAMH,CATD;;4BAWeC,eAAMC,IAAN,CAAWL,IAAX,EAAiB,CAACM,SAAD,EAAYC,SAAZ,KAA0B;AACtD,MAAID,SAAS,CAACE,QAAV,KAAuB,IAAvB,IAA+BD,SAAS,CAACC,QAAV,KAAuB,IAA1D,EAAgE;AAC5D,WAAO,IAAP;AACH;;AAED,MAAIF,SAAS,CAACJ,SAAV,KAAwBK,SAAS,CAACL,SAAtC,EAAiD;AAC7C,WAAO,KAAP;AACH;;AAED,MAAII,SAAS,CAACG,WAAV,KAA0BF,SAAS,CAACE,WAAxC,EAAqD;AACjD,WAAO,KAAP;AACH;;AAED,SAAOH,SAAS,CAACE,QAAV,KAAuB,IAAvB,IAA+BD,SAAS,CAACC,QAAV,KAAuB,IAA7D;AACH,CAdc,C","sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport type { PageProps } from './ViewPagerProps';\n\nconst Page = function Page(props: PageProps) {\n    const { isVisible, ...otherProps } = props;\n\n    return (\n        <View\n            collapsable={false}\n            {...otherProps}\n        />\n    );\n};\n\nexport default React.memo(Page, (prevProps, nextProps) => {\n    if (prevProps.children === null && nextProps.children === null) {\n        return true;\n    }\n\n    if (prevProps.isVisible !== nextProps.isVisible) {\n        return false;\n    }\n\n    if (prevProps.rerenderKey !== nextProps.rerenderKey) {\n        return false;\n    }\n\n    return prevProps.children !== null && nextProps.children !== null;\n});\n"]}

package/build/commonjs/ViewPager/ViewPagerWeb.js

@@ -44,6 +44,7 @@ function ViewPager(props) {
   return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: [styles.root, style]
   }, _react.default.Children.map(renderer(children), (child, i) => /*#__PURE__*/_react.default.cloneElement(child, {
+    isVisible: i === index,
     style: i !== index ? styles.none : _reactNative.StyleSheet.absoluteFill
   })));
 }

package/build/commonjs/ViewPager/ViewPagerWeb.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ViewPagerWeb.tsx"],"names":["styles","StyleSheet","create","root","overflow","position","none","display","ViewPager","props","children","enableVisibleHint","defaultEnableVisibleHint","index","loading","defaultLoading","pageComponent","defaultPageComponent","pageForceRerenderKey","style","renderer","React","Children","map","child","i","cloneElement","absoluteFill"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;;;AAEA,MAAMA,MAAM,GAAGC,wBAAWC,MAAX,CAAkB;AAC7BC,EAAAA,IAAI,EAAE;AACF;AACAC,IAAAA,QAAQ,EAAE,MAFR;AAGFC,IAAAA,QAAQ,EAAE;AAHR,GADuB;AAM7BC,EAAAA,IAAI,EAAE;AAAEC,IAAAA,OAAO,EAAE;AAAX;AANuB,CAAlB,CAAf;;AASe,SAASC,SAAT,CAAmBC,KAAnB,EAA0C;AACrD,QAAM;AACFC,IAAAA,QADE;AAEFC,IAAAA,iBAAiB,GAAGC,+BAFlB;AAGFC,IAAAA,KAHE;AAIFC,IAAAA,OAAO,GAAGC,qBAJR;AAKFC,IAAAA,aAAa,GAAGC,2BALd;AAMFC,IAAAA,oBANE;AAOFC,IAAAA;AAPE,MAQFV,KARJ;AAUA,QAAMW,QAAQ,GAAG,4BAAgB;AAC7BT,IAAAA,iBAD6B;AAE7BE,IAAAA,KAF6B;AAG7BC,IAAAA,OAH6B;AAI7BE,IAAAA,aAJ6B;AAK7BE,IAAAA;AAL6B,GAAhB,CAAjB;AAQA,sBACI,6BAAC,iBAAD;AAAM,IAAA,KAAK,EAAE,CAAClB,MAAM,CAACG,IAAR,EAAcgB,KAAd;AAAb,KACKE,eAAMC,QAAN,CAAeC,GAAf,CAAmBH,QAAQ,CAACV,QAAD,CAA3B,EAAuC,CAACc,KAAD,EAAQC,CAAR,kBACpCJ,eAAMK,YAAN,CAAmBF,KAAnB,EAAgD;AAC5CL,IAAAA,KAAK,EAAEM,CAAC,KAAKZ,KAAN,GAAcb,MAAM,CAACM,IAArB,GAA4BL,wBAAW0B;AADF,GAAhD,CADH,CADL,CADJ;AASH;;AAAA","sourcesContent":["import React from 'react';\nimport { StyleSheet, View } from 'react-native';\nimport type ViewPagerProps from './ViewPagerProps';\nimport { defaultEnableVisibleHint, defaultLoading, defaultPageComponent, usePageRenderer } from './utils';\n\nconst styles = StyleSheet.create({\n    root: {\n        // @ts-ignore\n        overflow: 'auto',\n        position: 'relative',\n    },\n    none: { display: 'none' },\n});\n\nexport default function ViewPager(props: ViewPagerProps) {\n    const {\n        children,\n        enableVisibleHint = defaultEnableVisibleHint,\n        index,\n        loading = defaultLoading,\n        pageComponent = defaultPageComponent,\n        pageForceRerenderKey,\n        style,\n    } = props;\n\n    const renderer = usePageRenderer({\n        enableVisibleHint,\n        index,\n        loading,\n        pageComponent,\n        pageForceRerenderKey,\n    });\n\n    return (\n        <View style={[styles.root, style]}>\n            {React.Children.map(renderer(children), (child, i) =>\n                React.cloneElement(child as React.ReactElement, {\n                    style: i !== index ? styles.none : StyleSheet.absoluteFill,\n                }),\n            )}\n        </View>\n    );\n};\n"]}
+{"version":3,"sources":["ViewPagerWeb.tsx"],"names":["styles","StyleSheet","create","root","overflow","position","none","display","ViewPager","props","children","enableVisibleHint","defaultEnableVisibleHint","index","loading","defaultLoading","pageComponent","defaultPageComponent","pageForceRerenderKey","style","renderer","React","Children","map","child","i","cloneElement","isVisible","absoluteFill"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;;;AAEA,MAAMA,MAAM,GAAGC,wBAAWC,MAAX,CAAkB;AAC7BC,EAAAA,IAAI,EAAE;AACF;AACAC,IAAAA,QAAQ,EAAE,MAFR;AAGFC,IAAAA,QAAQ,EAAE;AAHR,GADuB;AAM7BC,EAAAA,IAAI,EAAE;AAAEC,IAAAA,OAAO,EAAE;AAAX;AANuB,CAAlB,CAAf;;AASe,SAASC,SAAT,CAAmBC,KAAnB,EAA0C;AACrD,QAAM;AACFC,IAAAA,QADE;AAEFC,IAAAA,iBAAiB,GAAGC,+BAFlB;AAGFC,IAAAA,KAHE;AAIFC,IAAAA,OAAO,GAAGC,qBAJR;AAKFC,IAAAA,aAAa,GAAGC,2BALd;AAMFC,IAAAA,oBANE;AAOFC,IAAAA;AAPE,MAQFV,KARJ;AAUA,QAAMW,QAAQ,GAAG,4BAAgB;AAC7BT,IAAAA,iBAD6B;AAE7BE,IAAAA,KAF6B;AAG7BC,IAAAA,OAH6B;AAI7BE,IAAAA,aAJ6B;AAK7BE,IAAAA;AAL6B,GAAhB,CAAjB;AAQA,sBACI,6BAAC,iBAAD;AAAM,IAAA,KAAK,EAAE,CAAClB,MAAM,CAACG,IAAR,EAAcgB,KAAd;AAAb,KACKE,eAAMC,QAAN,CAAeC,GAAf,CAAmBH,QAAQ,CAACV,QAAD,CAA3B,EAAuC,CAACc,KAAD,EAAQC,CAAR,kBACpCJ,eAAMK,YAAN,CAAmBF,KAAnB,EAAgD;AAC5CG,IAAAA,SAAS,EAAEF,CAAC,KAAKZ,KAD2B;AAE5CM,IAAAA,KAAK,EAAEM,CAAC,KAAKZ,KAAN,GAAcb,MAAM,CAACM,IAArB,GAA4BL,wBAAW2B;AAFF,GAAhD,CADH,CADL,CADJ;AAUH;;AAAA","sourcesContent":["import React from 'react';\nimport { StyleSheet, View } from 'react-native';\nimport type ViewPagerProps from './ViewPagerProps';\nimport { defaultEnableVisibleHint, defaultLoading, defaultPageComponent, usePageRenderer } from './utils';\n\nconst styles = StyleSheet.create({\n    root: {\n        // @ts-ignore\n        overflow: 'auto',\n        position: 'relative',\n    },\n    none: { display: 'none' },\n});\n\nexport default function ViewPager(props: ViewPagerProps) {\n    const {\n        children,\n        enableVisibleHint = defaultEnableVisibleHint,\n        index,\n        loading = defaultLoading,\n        pageComponent = defaultPageComponent,\n        pageForceRerenderKey,\n        style,\n    } = props;\n\n    const renderer = usePageRenderer({\n        enableVisibleHint,\n        index,\n        loading,\n        pageComponent,\n        pageForceRerenderKey,\n    });\n\n    return (\n        <View style={[styles.root, style]}>\n            {React.Children.map(renderer(children), (child, i) =>\n                React.cloneElement(child as React.ReactElement, {\n                    isVisible: i === index,\n                    style: i !== index ? styles.none : StyleSheet.absoluteFill,\n                }),\n            )}\n        </View>\n    );\n};\n"]}

package/build/module/Carousel/CarouselWeb.js

@@ -80,19 +80,33 @@ const StyledContainer = styled.div(props => ({
   ...props.arrowsStyle
 }));
 
-const ArrowContainer = ({
-  children
-}) => /*#__PURE__*/React.createElement(View, {
-  style: {
-    height: '100%',
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: 'white',
-    borderRadius: 16
-  }
-}, children);
+const ArrowContainer = props => {
+  const {
+    children,
+    currentSlide,
+    slideCount,
+    visible,
+    ...otherProps
+  } = props;
+  return visible ?
+  /*#__PURE__*/
+  // If root component is not a div, there's no arrow class.
+  React.createElement("div", _extends({}, otherProps, {
+    style: {
+      cursor: 'pointer'
+    }
+  }), /*#__PURE__*/React.createElement(View, {
+    style: {
+      height: '100%',
+      justifyContent: 'center',
+      alignItems: 'center',
+      backgroundColor: 'white',
+      borderRadius: 16
+    }
+  }, children)) : null;
+};
 
-export default function Carousel(props) {
+export default /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     activeSlideScale = defaultActiveSlideScale,
     autoplay = defaultAutoplay,
@@ -113,6 +127,7 @@ export default function Carousel(props) {
     trackStyle = {}
   } = props;
   const slickRef = React.useRef(null);
+  const [visibleArrow, setVisibleArrow] = React.useState(false);
   React.useEffect(() => {
     if (slickRef.current) {
       slickRef.current.slickGoTo(index, false);
@@ -139,12 +154,24 @@ export default function Carousel(props) {
     fixOnClickNotWorkingAfterMobileSwipe();
   };
 
+  const onPointerOver = () => setVisibleArrow(true);
+
+  const onPointerLeave = () => setVisibleArrow(false);
+
+  React.useEffect(() => {
+    if (ref) {
+      //@ts-ignore
+      ref.current = slickRef.current;
+    }
+  }, []);
   return /*#__PURE__*/React.createElement(StyledContainer, {
     activeSlideScale: activeSlideScale,
     inactiveSlideOpacity: inactiveSlideOpacity,
     inactiveSlideScale: inactiveSlideScale,
     arrowsStyle: arrowsStyle,
-    trackStyle: trackStyle
+    trackStyle: trackStyle,
+    onPointerOver: onPointerOver,
+    onPointerLeave: onPointerLeave
   }, /*#__PURE__*/React.createElement(Slick, _extends({}, baseSettings, {
     afterChange: handleAfterChange,
     autoplay: autoplay,
@@ -158,19 +185,18 @@ export default function Carousel(props) {
     slidesToScroll: slidesToScroll,
     slidesToShow: slidesToShow,
     arrows: arrows,
-    prevArrow:
-    /*#__PURE__*/
-    // If root component is not a div, there's no arrow class.
-    React.createElement("div", null, /*#__PURE__*/React.createElement(ArrowContainer, {
+    prevArrow: /*#__PURE__*/React.createElement(ArrowContainer, {
+      visible: visibleArrow,
       children: /*#__PURE__*/React.createElement(ChevronLeft, {
         fill: '#767676'
       })
-    })),
-    nextArrow: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ArrowContainer, {
+    }),
+    nextArrow: /*#__PURE__*/React.createElement(ArrowContainer, {
+      visible: visibleArrow,
       children: /*#__PURE__*/React.createElement(ChevronRight, {
         fill: '#767676'
       })
-    }))
+    })
   }), mapIndexed((item, index) => {
     const child = renderItem({
       item,
@@ -185,6 +211,5 @@ export default function Carousel(props) {
 
     return child;
   }, data)));
-}
-;
+});
 //# sourceMappingURL=CarouselWeb.js.map

package/build/module/Carousel/CarouselWeb.js.map

@@ -1 +1 @@
-{"version":3,"sources":["CarouselWeb.tsx"],"names":["React","View","Slick","styled","ChevronLeft","ChevronRight","mapIndexed","defaultAutoplay","defaultAutoplayInterval","defaultInactiveSlideOpacity","defaultInactiveSlideScale","defaultActiveSlideScale","defaultInfinite","baseSettings","dots","draggable","lazyLoad","pauseOnFocus","pauseOnHover","rows","swipe","slidesPerRow","vertical","noop","StyledContainer","div","props","display","position","userSelect","overflow","margin","padding","outline","cursor","transform","top","left","content","clear","trackStyle","float","height","minHeight","justifyContent","inactiveSlideScale","transition","opacity","inactiveSlideOpacity","activeSlideScale","arrowsStyle","ArrowContainer","children","alignItems","backgroundColor","borderRadius","Carousel","autoplay","autoplayInterval","centerMode","centerSlidePadding","data","index","infinite","onChange","renderItem","slidesToScroll","slidesToShow","arrows","slickRef","useRef","useEffect","current","slickGoTo","fixOnClickNotWorkingAfterMobileSwipe","innerSlider","clickHandler","handleAfterChange","newIndex","handleBeforeChange","item","child","cloneElement","key"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport Slick, { Settings } from 'react-slick';\nimport styled from '@emotion/styled';\nimport { ChevronLeft, ChevronRight } from '@fountain-ui/icons';\nimport { mapIndexed } from '@fountain-ui/utils';\nimport type CarouselProps from './CarouselProps';\nimport {\n    defaultAutoplay,\n    defaultAutoplayInterval,\n    defaultInactiveSlideOpacity,\n    defaultInactiveSlideScale,\n    defaultActiveSlideScale,\n    defaultInfinite,\n} from './utils';\n\nconst baseSettings: Settings = {\n    dots: false,\n    draggable: true,\n    lazyLoad: 'ondemand',\n    pauseOnFocus: true,\n    pauseOnHover: true,\n    rows: 1,\n    swipe: true,\n    slidesPerRow: 1,\n    vertical: false,\n};\n\nconst noop = () => void 0;\n\nconst StyledContainer: any = styled.div((props: any) => ({\n    ['& .slick-slider']: {\n        display: 'block',\n        position: 'relative',\n        userSelect: 'none',\n    },\n    ['& .slick-list']: {\n        display: 'block',\n        position: 'relative',\n        overflow: 'hidden',\n        margin: 0,\n        padding: 0,\n        ['&:focus']: {\n            outline: 'none',\n        },\n        ['&.dragging']: {\n            cursor: 'pointer',\n        },\n    },\n    ['& .slick-slider .slick-track, &.slick-slider .slick-list']: {\n        transform: 'translate3d(0, 0, 0)',\n    },\n    ['& .slick-track']: {\n        display: 'block',\n        position: 'relative',\n        top: 0,\n        left: 0,\n        ['&:before, &:after']: {\n            display: 'table',\n            content: '\\'\\'',\n        },\n        ['&:after']: {\n            clear: 'both',\n        },\n        ...props.trackStyle,\n    },\n    ['& .slick-slide']: {\n        display: 'none',\n        float: 'left',\n        height: '100%',\n        minHeight: 1,\n        ['& > div']: {\n            justifyContent: 'center',\n            display: 'flex',\n            transform: `scale(${props.inactiveSlideScale})`,\n            transition: 'transform .5s',\n            opacity: props.inactiveSlideOpacity,\n        },\n    },\n    ['& .slick-current > div']: {\n        transform: `scale(${props.activeSlideScale})`,\n        opacity: 1,\n    },\n    ['& .slick-initialized .slick-slide']: {\n        display: 'block',\n    },\n    ...props.arrowsStyle,\n}));\n\ninterface ArrowContainerProps {\n    children: React.ReactElement;\n}\n\nconst ArrowContainer = ({ children }: ArrowContainerProps) => (\n    <View\n        style={{\n            height: '100%',\n            justifyContent: 'center',\n            alignItems: 'center',\n            backgroundColor: 'white',\n            borderRadius: 16,\n        }}\n    >\n        {children}\n    </View>\n);\n\nexport default function Carousel<ItemT>(props: CarouselProps<ItemT>) {\n    const {\n        activeSlideScale = defaultActiveSlideScale,\n        autoplay = defaultAutoplay,\n        autoplayInterval = defaultAutoplayInterval,\n        centerMode = false,\n        centerSlidePadding = 0,\n        data,\n        inactiveSlideOpacity = defaultInactiveSlideOpacity,\n        inactiveSlideScale = defaultInactiveSlideScale,\n        index,\n        infinite = defaultInfinite,\n        onChange,\n        renderItem,\n        slidesToScroll = 1,\n        slidesToShow = 1,\n        arrows = false,\n        arrowsStyle = {},\n        trackStyle = {},\n    } = props;\n\n    const slickRef = React.useRef<Slick | null>(null);\n\n    React.useEffect(() => {\n        if (slickRef.current) {\n            slickRef.current.slickGoTo(index, false);\n        }\n    }, [index]);\n\n    const fixOnClickNotWorkingAfterMobileSwipe = () => {\n        // @ts-ignore\n        if (slickRef.current && slickRef.current.innerSlider) {\n            // @ts-ignore\n            slickRef.current.innerSlider.clickHandler = noop;\n        }\n    };\n\n    const handleAfterChange = (newIndex: number) => {\n        fixOnClickNotWorkingAfterMobileSwipe();\n\n        if (onChange) {\n            onChange(newIndex);\n        }\n    };\n\n    const handleBeforeChange = () => {\n        fixOnClickNotWorkingAfterMobileSwipe();\n    };\n\n    return (\n        <StyledContainer\n            activeSlideScale={activeSlideScale}\n            inactiveSlideOpacity={inactiveSlideOpacity}\n            inactiveSlideScale={inactiveSlideScale}\n            arrowsStyle={arrowsStyle}\n            trackStyle={trackStyle}\n        >\n            <Slick\n                {...baseSettings}\n                afterChange={handleAfterChange}\n                autoplay={autoplay}\n                autoplaySpeed={autoplayInterval}\n                beforeChange={handleBeforeChange}\n                centerMode={centerMode}\n                centerPadding={`${centerSlidePadding}px`}\n                infinite={infinite}\n                initialSlide={index}\n                ref={slickRef}\n                slidesToScroll={slidesToScroll}\n                slidesToShow={slidesToShow}\n                arrows={arrows}\n                prevArrow={(\n                    // If root component is not a div, there's no arrow class.\n                    <div>\n                        <ArrowContainer children={<ChevronLeft fill={'#767676'}/>}/>\n                    </div>\n                )}\n                nextArrow={(\n                    <div>\n                        <ArrowContainer children={<ChevronRight fill={'#767676'}/>}/>\n                    </div>\n                )}\n            >\n                {mapIndexed((item, index) => {\n                    const child = renderItem({ item, index });\n\n                    if (child) {\n                        return React.cloneElement(child, { key: index });\n                    }\n                    return child;\n                }, data)}\n            </Slick>\n        </StyledContainer>\n    );\n};\n"]}
+{"version":3,"sources":["CarouselWeb.tsx"],"names":["React","View","Slick","styled","ChevronLeft","ChevronRight","mapIndexed","defaultAutoplay","defaultAutoplayInterval","defaultInactiveSlideOpacity","defaultInactiveSlideScale","defaultActiveSlideScale","defaultInfinite","baseSettings","dots","draggable","lazyLoad","pauseOnFocus","pauseOnHover","rows","swipe","slidesPerRow","vertical","noop","StyledContainer","div","props","display","position","userSelect","overflow","margin","padding","outline","cursor","transform","top","left","content","clear","trackStyle","float","height","minHeight","justifyContent","inactiveSlideScale","transition","opacity","inactiveSlideOpacity","activeSlideScale","arrowsStyle","ArrowContainer","children","currentSlide","slideCount","visible","otherProps","alignItems","backgroundColor","borderRadius","forwardRef","ref","autoplay","autoplayInterval","centerMode","centerSlidePadding","data","index","infinite","onChange","renderItem","slidesToScroll","slidesToShow","arrows","slickRef","useRef","visibleArrow","setVisibleArrow","useState","useEffect","current","slickGoTo","fixOnClickNotWorkingAfterMobileSwipe","innerSlider","clickHandler","handleAfterChange","newIndex","handleBeforeChange","onPointerOver","onPointerLeave","item","child","cloneElement","key"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport Slick, { Settings } from 'react-slick';\nimport styled from '@emotion/styled';\nimport { ChevronLeft, ChevronRight } from '@fountain-ui/icons';\nimport { mapIndexed } from '@fountain-ui/utils';\nimport type CarouselProps from './CarouselProps';\nimport {\n    defaultAutoplay,\n    defaultAutoplayInterval,\n    defaultInactiveSlideOpacity,\n    defaultInactiveSlideScale,\n    defaultActiveSlideScale,\n    defaultInfinite,\n} from './utils';\n\nconst baseSettings: Settings = {\n    dots: false,\n    draggable: true,\n    lazyLoad: 'ondemand',\n    pauseOnFocus: true,\n    pauseOnHover: true,\n    rows: 1,\n    swipe: true,\n    slidesPerRow: 1,\n    vertical: false,\n};\n\nconst noop = () => void 0;\n\nconst StyledContainer: any = styled.div((props: any) => ({\n    ['& .slick-slider']: {\n        display: 'block',\n        position: 'relative',\n        userSelect: 'none',\n    },\n    ['& .slick-list']: {\n        display: 'block',\n        position: 'relative',\n        overflow: 'hidden',\n        margin: 0,\n        padding: 0,\n        ['&:focus']: {\n            outline: 'none',\n        },\n        ['&.dragging']: {\n            cursor: 'pointer',\n        },\n    },\n    ['& .slick-slider .slick-track, &.slick-slider .slick-list']: {\n        transform: 'translate3d(0, 0, 0)',\n    },\n    ['& .slick-track']: {\n        display: 'block',\n        position: 'relative',\n        top: 0,\n        left: 0,\n        ['&:before, &:after']: {\n            display: 'table',\n            content: '\\'\\'',\n        },\n        ['&:after']: {\n            clear: 'both',\n        },\n        ...props.trackStyle,\n    },\n    ['& .slick-slide']: {\n        display: 'none',\n        float: 'left',\n        height: '100%',\n        minHeight: 1,\n        ['& > div']: {\n            justifyContent: 'center',\n            display: 'flex',\n            transform: `scale(${props.inactiveSlideScale})`,\n            transition: 'transform .5s',\n            opacity: props.inactiveSlideOpacity,\n        },\n    },\n    ['& .slick-current > div']: {\n        transform: `scale(${props.activeSlideScale})`,\n        opacity: 1,\n    },\n    ['& .slick-initialized .slick-slide']: {\n        display: 'block',\n    },\n    ...props.arrowsStyle,\n}));\n\ninterface ArrowContainerProps {\n    children: React.ReactElement;\n    visible: boolean;\n    currentSlide?: any;\n    slideCount?: any;\n}\n\nconst ArrowContainer = (props: ArrowContainerProps) => {\n    const {\n        children,\n        currentSlide,\n        slideCount,\n        visible,\n        ...otherProps\n    } = props;\n\n    return visible ? (\n        // If root component is not a div, there's no arrow class.\n        <div {...otherProps} style={{ cursor: 'pointer' }}>\n            <View\n                style={{\n                    height: '100%',\n                    justifyContent: 'center',\n                    alignItems: 'center',\n                    backgroundColor: 'white',\n                    borderRadius: 16,\n                }}\n            >\n                {children}\n            </View>\n        </div>\n    ) : null;\n};\n\nexport default React.forwardRef((props: CarouselProps, ref) => {\n    const {\n        activeSlideScale = defaultActiveSlideScale,\n        autoplay = defaultAutoplay,\n        autoplayInterval = defaultAutoplayInterval,\n        centerMode = false,\n        centerSlidePadding = 0,\n        data,\n        inactiveSlideOpacity = defaultInactiveSlideOpacity,\n        inactiveSlideScale = defaultInactiveSlideScale,\n        index,\n        infinite = defaultInfinite,\n        onChange,\n        renderItem,\n        slidesToScroll = 1,\n        slidesToShow = 1,\n        arrows = false,\n        arrowsStyle = {},\n        trackStyle = {},\n    } = props;\n\n    const slickRef = React.useRef<Slick | null>(null);\n    const [visibleArrow, setVisibleArrow] = React.useState(false);\n\n    React.useEffect(() => {\n        if (slickRef.current) {\n            slickRef.current.slickGoTo(index, false);\n        }\n    }, [index]);\n\n    const fixOnClickNotWorkingAfterMobileSwipe = () => {\n        // @ts-ignore\n        if (slickRef.current && slickRef.current.innerSlider) {\n            // @ts-ignore\n            slickRef.current.innerSlider.clickHandler = noop;\n        }\n    };\n\n    const handleAfterChange = (newIndex: number) => {\n        fixOnClickNotWorkingAfterMobileSwipe();\n\n        if (onChange) {\n            onChange(newIndex);\n        }\n    };\n\n    const handleBeforeChange = () => {\n        fixOnClickNotWorkingAfterMobileSwipe();\n    };\n\n    const onPointerOver = () => setVisibleArrow(true);\n    const onPointerLeave = () => setVisibleArrow(false);\n\n    React.useEffect(() => {\n        if (ref) {\n            //@ts-ignore\n            ref.current = slickRef.current;\n        }\n    }, []);\n\n    return (\n        <StyledContainer\n            activeSlideScale={activeSlideScale}\n            inactiveSlideOpacity={inactiveSlideOpacity}\n            inactiveSlideScale={inactiveSlideScale}\n            arrowsStyle={arrowsStyle}\n            trackStyle={trackStyle}\n            onPointerOver={onPointerOver}\n            onPointerLeave={onPointerLeave}\n        >\n            <Slick\n                {...baseSettings}\n                afterChange={handleAfterChange}\n                autoplay={autoplay}\n                autoplaySpeed={autoplayInterval}\n                beforeChange={handleBeforeChange}\n                centerMode={centerMode}\n                centerPadding={`${centerSlidePadding}px`}\n                infinite={infinite}\n                initialSlide={index}\n                ref={slickRef}\n                slidesToScroll={slidesToScroll}\n                slidesToShow={slidesToShow}\n                arrows={arrows}\n                prevArrow={<ArrowContainer visible={visibleArrow} children={<ChevronLeft fill={'#767676'}/>}/>}\n                nextArrow={<ArrowContainer visible={visibleArrow} children={<ChevronRight fill={'#767676'}/>}/>}\n            >\n                {mapIndexed((item, index) => {\n                    const child = renderItem({ item, index });\n\n                    if (child) {\n                        return React.cloneElement(child, { key: index });\n                    }\n                    return child;\n                }, data)}\n            </Slick>\n        </StyledContainer>\n    );\n});\n"]}

package/build/module/DateTimePicker/DateTimePicker.js

@@ -29,10 +29,12 @@ export default function DateTimePicker(props) {
   } = useDateTimePicker(); //TODO: Need to update arrow components
 
   const LeftArrow = /*#__PURE__*/React.createElement(Typography, {
-    children: '<'
+    children: '<',
+    color: 'textPrimary'
   });
   const RightArrow = /*#__PURE__*/React.createElement(Typography, {
-    children: '>'
+    children: '>',
+    color: 'textPrimary'
   });
 
   const onYearPress = date => {

package/build/module/DateTimePicker/DateTimePicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["DateTimePicker.tsx"],"names":["React","format","Calendar","LocaleConfig","Button","Typography","useTheme","YearPicker","DateTimePickerContext","formatDate","useDateTimePicker","useContext","DateTimePicker","props","currentMonth","Date","locale","markedDate","markedDateProp","maxDate","minDate","onDayPress","onYearPress","onYearPressProp","theme","yearPickerVisible","setYearPickerVisible","useState","locales","LeftArrow","RightArrow","date","defaultLocale","direction","selected","disableTouchEvent","selectedColor","palette","primary","main","selectedTextColor","contrastTextColor","toDate"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { format } from 'date-fns';\n//@ts-ignore\nimport { Calendar, LocaleConfig } from 'react-native-calendars';\nimport { Button, Typography } from '@fountain-ui/core';\nimport { useTheme } from '@fountain-ui/styles';\nimport YearPicker from './YearPicker';\nimport { DateTimePickerContext } from './DateTimePickerProvider';\nimport type DateTimePickerProps from './DateTimePickerProps';\nimport { formatDate } from './utils';\n\nconst useDateTimePicker = () => {\n    return React.useContext(DateTimePickerContext);\n};\n\nexport default function DateTimePicker(props: DateTimePickerProps) {\n    const {\n        currentMonth = new Date(),\n        locale,\n        markedDate: markedDateProp,\n        maxDate,\n        minDate,\n        onDayPress,\n        onYearPress: onYearPressProp,\n    } = props;\n\n    const theme = useTheme();\n\n    const [yearPickerVisible, setYearPickerVisible] = React.useState(false);\n    const { locales } = useDateTimePicker();\n\n    //TODO: Need to update arrow components\n    const LeftArrow = <Typography children={'<'}/>;\n    const RightArrow = <Typography children={'>'}/>;\n\n    const onYearPress = (date: Date) => {\n        setYearPickerVisible(false);\n        onYearPressProp && onYearPressProp(date);\n    };\n\n    if (locale) {\n        LocaleConfig.locales = locales;\n        LocaleConfig.defaultLocale = locale;\n    }\n\n    const markedDate = markedDateProp ? format(markedDateProp, 'yyyy-MM-dd') : '';\n\n    if (yearPickerVisible) {\n        return (\n            <YearPicker\n                date={currentMonth}\n                locale={locale}\n                maxDate={maxDate}\n                minDate={minDate}\n                onYearPress={onYearPress}\n            />\n        );\n    }\n\n    return (\n        <Calendar\n            current={currentMonth}\n            onDayPress={onDayPress}\n            maxDate={maxDate}\n            minDate={minDate}\n            renderArrow={(direction: string) => direction === 'left' ? LeftArrow : RightArrow}\n            markedDates={{\n                [markedDate]: {\n                    selected: true,\n                    disableTouchEvent: true,\n                    selectedColor: theme.palette.primary.main,\n                    selectedTextColor: theme.palette.primary.contrastTextColor,\n                },\n            }}\n            // @ts-ignore\n            renderHeader={(date) => (\n                <Button\n                    children={formatDate(date.toDate(), locale)}\n                    variant={'text'}\n                    size={'small'}\n                    onPress={() => setYearPickerVisible(true)}\n                />\n            )}\n        />\n    );\n};\n"]}
+{"version":3,"sources":["DateTimePicker.tsx"],"names":["React","format","Calendar","LocaleConfig","Button","Typography","useTheme","YearPicker","DateTimePickerContext","formatDate","useDateTimePicker","useContext","DateTimePicker","props","currentMonth","Date","locale","markedDate","markedDateProp","maxDate","minDate","onDayPress","onYearPress","onYearPressProp","theme","yearPickerVisible","setYearPickerVisible","useState","locales","LeftArrow","RightArrow","date","defaultLocale","direction","selected","disableTouchEvent","selectedColor","palette","primary","main","selectedTextColor","contrastTextColor","toDate"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { format } from 'date-fns';\n//@ts-ignore\nimport { Calendar, LocaleConfig } from 'react-native-calendars';\nimport { Button, Typography } from '@fountain-ui/core';\nimport { useTheme } from '@fountain-ui/styles';\nimport YearPicker from './YearPicker';\nimport { DateTimePickerContext } from './DateTimePickerProvider';\nimport type DateTimePickerProps from './DateTimePickerProps';\nimport { formatDate } from './utils';\n\nconst useDateTimePicker = () => {\n    return React.useContext(DateTimePickerContext);\n};\n\nexport default function DateTimePicker(props: DateTimePickerProps) {\n    const {\n        currentMonth = new Date(),\n        locale,\n        markedDate: markedDateProp,\n        maxDate,\n        minDate,\n        onDayPress,\n        onYearPress: onYearPressProp,\n    } = props;\n\n    const theme = useTheme();\n\n    const [yearPickerVisible, setYearPickerVisible] = React.useState(false);\n    const { locales } = useDateTimePicker();\n\n    //TODO: Need to update arrow components\n    const LeftArrow = <Typography children={'<'} color={'textPrimary'}/>;\n    const RightArrow = <Typography children={'>'} color={'textPrimary'}/>;\n\n    const onYearPress = (date: Date) => {\n        setYearPickerVisible(false);\n        onYearPressProp && onYearPressProp(date);\n    };\n\n    if (locale) {\n        LocaleConfig.locales = locales;\n        LocaleConfig.defaultLocale = locale;\n    }\n\n    const markedDate = markedDateProp ? format(markedDateProp, 'yyyy-MM-dd') : '';\n\n    if (yearPickerVisible) {\n        return (\n            <YearPicker\n                date={currentMonth}\n                locale={locale}\n                maxDate={maxDate}\n                minDate={minDate}\n                onYearPress={onYearPress}\n            />\n        );\n    }\n\n    return (\n        <Calendar\n            current={currentMonth}\n            onDayPress={onDayPress}\n            maxDate={maxDate}\n            minDate={minDate}\n            renderArrow={(direction: string) => direction === 'left' ? LeftArrow : RightArrow}\n            markedDates={{\n                [markedDate]: {\n                    selected: true,\n                    disableTouchEvent: true,\n                    selectedColor: theme.palette.primary.main,\n                    selectedTextColor: theme.palette.primary.contrastTextColor,\n                },\n            }}\n            // @ts-ignore\n            renderHeader={(date) => (\n                <Button\n                    children={formatDate(date.toDate(), locale)}\n                    variant={'text'}\n                    size={'small'}\n                    onPress={() => setYearPickerVisible(true)}\n                />\n            )}\n        />\n    );\n};\n"]}

package/build/module/ViewPager/ChildrenMemoizedPage.js

@@ -22,10 +22,6 @@ export default /*#__PURE__*/React.memo(Page, (prevProps, nextProps) => {
     return false;
   }
 
-  if (prevProps.style !== nextProps.style) {
-    return false;
-  }
-
   if (prevProps.rerenderKey !== nextProps.rerenderKey) {
     return false;
   }

package/build/module/ViewPager/ChildrenMemoizedPage.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ChildrenMemoizedPage.tsx"],"names":["React","View","Page","props","isVisible","otherProps","memo","prevProps","nextProps","children","style","rerenderKey"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;;AAGA,MAAMC,IAAI,GAAG,SAASA,IAAT,CAAcC,KAAd,EAAgC;AACzC,QAAM;AAAEC,IAAAA,SAAF;AAAa,OAAGC;AAAhB,MAA+BF,KAArC;AAEA,sBACI,oBAAC,IAAD;AACI,IAAA,WAAW,EAAE;AADjB,KAEQE,UAFR,EADJ;AAMH,CATD;;AAWA,4BAAeL,KAAK,CAACM,IAAN,CAAWJ,IAAX,EAAiB,CAACK,SAAD,EAAYC,SAAZ,KAA0B;AACtD,MAAID,SAAS,CAACE,QAAV,KAAuB,IAAvB,IAA+BD,SAAS,CAACC,QAAV,KAAuB,IAA1D,EAAgE;AAC5D,WAAO,IAAP;AACH;;AAED,MAAIF,SAAS,CAACH,SAAV,KAAwBI,SAAS,CAACJ,SAAtC,EAAiD;AAC7C,WAAO,KAAP;AACH;;AAED,MAAIG,SAAS,CAACG,KAAV,KAAoBF,SAAS,CAACE,KAAlC,EAAyC;AACrC,WAAO,KAAP;AACH;;AAED,MAAIH,SAAS,CAACI,WAAV,KAA0BH,SAAS,CAACG,WAAxC,EAAqD;AACjD,WAAO,KAAP;AACH;;AAED,SAAOJ,SAAS,CAACE,QAAV,KAAuB,IAAvB,IAA+BD,SAAS,CAACC,QAAV,KAAuB,IAA7D;AACH,CAlBc,CAAf","sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport type { PageProps } from './ViewPagerProps';\n\nconst Page = function Page(props: PageProps) {\n    const { isVisible, ...otherProps } = props;\n\n    return (\n        <View\n            collapsable={false}\n            {...otherProps}\n        />\n    );\n};\n\nexport default React.memo(Page, (prevProps, nextProps) => {\n    if (prevProps.children === null && nextProps.children === null) {\n        return true;\n    }\n\n    if (prevProps.isVisible !== nextProps.isVisible) {\n        return false;\n    }\n\n    if (prevProps.style !== nextProps.style) {\n        return false;\n    }\n\n    if (prevProps.rerenderKey !== nextProps.rerenderKey) {\n        return false;\n    }\n\n    return prevProps.children !== null && nextProps.children !== null;\n});\n"]}
+{"version":3,"sources":["ChildrenMemoizedPage.tsx"],"names":["React","View","Page","props","isVisible","otherProps","memo","prevProps","nextProps","children","rerenderKey"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;;AAGA,MAAMC,IAAI,GAAG,SAASA,IAAT,CAAcC,KAAd,EAAgC;AACzC,QAAM;AAAEC,IAAAA,SAAF;AAAa,OAAGC;AAAhB,MAA+BF,KAArC;AAEA,sBACI,oBAAC,IAAD;AACI,IAAA,WAAW,EAAE;AADjB,KAEQE,UAFR,EADJ;AAMH,CATD;;AAWA,4BAAeL,KAAK,CAACM,IAAN,CAAWJ,IAAX,EAAiB,CAACK,SAAD,EAAYC,SAAZ,KAA0B;AACtD,MAAID,SAAS,CAACE,QAAV,KAAuB,IAAvB,IAA+BD,SAAS,CAACC,QAAV,KAAuB,IAA1D,EAAgE;AAC5D,WAAO,IAAP;AACH;;AAED,MAAIF,SAAS,CAACH,SAAV,KAAwBI,SAAS,CAACJ,SAAtC,EAAiD;AAC7C,WAAO,KAAP;AACH;;AAED,MAAIG,SAAS,CAACG,WAAV,KAA0BF,SAAS,CAACE,WAAxC,EAAqD;AACjD,WAAO,KAAP;AACH;;AAED,SAAOH,SAAS,CAACE,QAAV,KAAuB,IAAvB,IAA+BD,SAAS,CAACC,QAAV,KAAuB,IAA7D;AACH,CAdc,CAAf","sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport type { PageProps } from './ViewPagerProps';\n\nconst Page = function Page(props: PageProps) {\n    const { isVisible, ...otherProps } = props;\n\n    return (\n        <View\n            collapsable={false}\n            {...otherProps}\n        />\n    );\n};\n\nexport default React.memo(Page, (prevProps, nextProps) => {\n    if (prevProps.children === null && nextProps.children === null) {\n        return true;\n    }\n\n    if (prevProps.isVisible !== nextProps.isVisible) {\n        return false;\n    }\n\n    if (prevProps.rerenderKey !== nextProps.rerenderKey) {\n        return false;\n    }\n\n    return prevProps.children !== null && nextProps.children !== null;\n});\n"]}

package/build/module/ViewPager/ViewPagerWeb.js

@@ -31,6 +31,7 @@ export default function ViewPager(props) {
   return /*#__PURE__*/React.createElement(View, {
     style: [styles.root, style]
   }, React.Children.map(renderer(children), (child, i) => /*#__PURE__*/React.cloneElement(child, {
+    isVisible: i === index,
     style: i !== index ? styles.none : StyleSheet.absoluteFill
   })));
 }

package/build/module/ViewPager/ViewPagerWeb.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ViewPagerWeb.tsx"],"names":["React","StyleSheet","View","defaultEnableVisibleHint","defaultLoading","defaultPageComponent","usePageRenderer","styles","create","root","overflow","position","none","display","ViewPager","props","children","enableVisibleHint","index","loading","pageComponent","pageForceRerenderKey","style","renderer","Children","map","child","i","cloneElement","absoluteFill"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,UAAT,EAAqBC,IAArB,QAAiC,cAAjC;AAEA,SAASC,wBAAT,EAAmCC,cAAnC,EAAmDC,oBAAnD,EAAyEC,eAAzE,QAAgG,SAAhG;AAEA,MAAMC,MAAM,GAAGN,UAAU,CAACO,MAAX,CAAkB;AAC7BC,EAAAA,IAAI,EAAE;AACF;AACAC,IAAAA,QAAQ,EAAE,MAFR;AAGFC,IAAAA,QAAQ,EAAE;AAHR,GADuB;AAM7BC,EAAAA,IAAI,EAAE;AAAEC,IAAAA,OAAO,EAAE;AAAX;AANuB,CAAlB,CAAf;AASA,eAAe,SAASC,SAAT,CAAmBC,KAAnB,EAA0C;AACrD,QAAM;AACFC,IAAAA,QADE;AAEFC,IAAAA,iBAAiB,GAAGd,wBAFlB;AAGFe,IAAAA,KAHE;AAIFC,IAAAA,OAAO,GAAGf,cAJR;AAKFgB,IAAAA,aAAa,GAAGf,oBALd;AAMFgB,IAAAA,oBANE;AAOFC,IAAAA;AAPE,MAQFP,KARJ;AAUA,QAAMQ,QAAQ,GAAGjB,eAAe,CAAC;AAC7BW,IAAAA,iBAD6B;AAE7BC,IAAAA,KAF6B;AAG7BC,IAAAA,OAH6B;AAI7BC,IAAAA,aAJ6B;AAK7BC,IAAAA;AAL6B,GAAD,CAAhC;AAQA,sBACI,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAE,CAACd,MAAM,CAACE,IAAR,EAAca,KAAd;AAAb,KACKtB,KAAK,CAACwB,QAAN,CAAeC,GAAf,CAAmBF,QAAQ,CAACP,QAAD,CAA3B,EAAuC,CAACU,KAAD,EAAQC,CAAR,kBACpC3B,KAAK,CAAC4B,YAAN,CAAmBF,KAAnB,EAAgD;AAC5CJ,IAAAA,KAAK,EAAEK,CAAC,KAAKT,KAAN,GAAcX,MAAM,CAACK,IAArB,GAA4BX,UAAU,CAAC4B;AADF,GAAhD,CADH,CADL,CADJ;AASH;AAAA","sourcesContent":["import React from 'react';\nimport { StyleSheet, View } from 'react-native';\nimport type ViewPagerProps from './ViewPagerProps';\nimport { defaultEnableVisibleHint, defaultLoading, defaultPageComponent, usePageRenderer } from './utils';\n\nconst styles = StyleSheet.create({\n    root: {\n        // @ts-ignore\n        overflow: 'auto',\n        position: 'relative',\n    },\n    none: { display: 'none' },\n});\n\nexport default function ViewPager(props: ViewPagerProps) {\n    const {\n        children,\n        enableVisibleHint = defaultEnableVisibleHint,\n        index,\n        loading = defaultLoading,\n        pageComponent = defaultPageComponent,\n        pageForceRerenderKey,\n        style,\n    } = props;\n\n    const renderer = usePageRenderer({\n        enableVisibleHint,\n        index,\n        loading,\n        pageComponent,\n        pageForceRerenderKey,\n    });\n\n    return (\n        <View style={[styles.root, style]}>\n            {React.Children.map(renderer(children), (child, i) =>\n                React.cloneElement(child as React.ReactElement, {\n                    style: i !== index ? styles.none : StyleSheet.absoluteFill,\n                }),\n            )}\n        </View>\n    );\n};\n"]}
+{"version":3,"sources":["ViewPagerWeb.tsx"],"names":["React","StyleSheet","View","defaultEnableVisibleHint","defaultLoading","defaultPageComponent","usePageRenderer","styles","create","root","overflow","position","none","display","ViewPager","props","children","enableVisibleHint","index","loading","pageComponent","pageForceRerenderKey","style","renderer","Children","map","child","i","cloneElement","isVisible","absoluteFill"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,UAAT,EAAqBC,IAArB,QAAiC,cAAjC;AAEA,SAASC,wBAAT,EAAmCC,cAAnC,EAAmDC,oBAAnD,EAAyEC,eAAzE,QAAgG,SAAhG;AAEA,MAAMC,MAAM,GAAGN,UAAU,CAACO,MAAX,CAAkB;AAC7BC,EAAAA,IAAI,EAAE;AACF;AACAC,IAAAA,QAAQ,EAAE,MAFR;AAGFC,IAAAA,QAAQ,EAAE;AAHR,GADuB;AAM7BC,EAAAA,IAAI,EAAE;AAAEC,IAAAA,OAAO,EAAE;AAAX;AANuB,CAAlB,CAAf;AASA,eAAe,SAASC,SAAT,CAAmBC,KAAnB,EAA0C;AACrD,QAAM;AACFC,IAAAA,QADE;AAEFC,IAAAA,iBAAiB,GAAGd,wBAFlB;AAGFe,IAAAA,KAHE;AAIFC,IAAAA,OAAO,GAAGf,cAJR;AAKFgB,IAAAA,aAAa,GAAGf,oBALd;AAMFgB,IAAAA,oBANE;AAOFC,IAAAA;AAPE,MAQFP,KARJ;AAUA,QAAMQ,QAAQ,GAAGjB,eAAe,CAAC;AAC7BW,IAAAA,iBAD6B;AAE7BC,IAAAA,KAF6B;AAG7BC,IAAAA,OAH6B;AAI7BC,IAAAA,aAJ6B;AAK7BC,IAAAA;AAL6B,GAAD,CAAhC;AAQA,sBACI,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAE,CAACd,MAAM,CAACE,IAAR,EAAca,KAAd;AAAb,KACKtB,KAAK,CAACwB,QAAN,CAAeC,GAAf,CAAmBF,QAAQ,CAACP,QAAD,CAA3B,EAAuC,CAACU,KAAD,EAAQC,CAAR,kBACpC3B,KAAK,CAAC4B,YAAN,CAAmBF,KAAnB,EAAgD;AAC5CG,IAAAA,SAAS,EAAEF,CAAC,KAAKT,KAD2B;AAE5CI,IAAAA,KAAK,EAAEK,CAAC,KAAKT,KAAN,GAAcX,MAAM,CAACK,IAArB,GAA4BX,UAAU,CAAC6B;AAFF,GAAhD,CADH,CADL,CADJ;AAUH;AAAA","sourcesContent":["import React from 'react';\nimport { StyleSheet, View } from 'react-native';\nimport type ViewPagerProps from './ViewPagerProps';\nimport { defaultEnableVisibleHint, defaultLoading, defaultPageComponent, usePageRenderer } from './utils';\n\nconst styles = StyleSheet.create({\n    root: {\n        // @ts-ignore\n        overflow: 'auto',\n        position: 'relative',\n    },\n    none: { display: 'none' },\n});\n\nexport default function ViewPager(props: ViewPagerProps) {\n    const {\n        children,\n        enableVisibleHint = defaultEnableVisibleHint,\n        index,\n        loading = defaultLoading,\n        pageComponent = defaultPageComponent,\n        pageForceRerenderKey,\n        style,\n    } = props;\n\n    const renderer = usePageRenderer({\n        enableVisibleHint,\n        index,\n        loading,\n        pageComponent,\n        pageForceRerenderKey,\n    });\n\n    return (\n        <View style={[styles.root, style]}>\n            {React.Children.map(renderer(children), (child, i) =>\n                React.cloneElement(child as React.ReactElement, {\n                    isVisible: i === index,\n                    style: i !== index ? styles.none : StyleSheet.absoluteFill,\n                }),\n            )}\n        </View>\n    );\n};\n"]}

package/build/typescript/Carousel/CarouselProps.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { RefObject } from 'react';
 import type { ListRenderItemInfo } from 'react-native';
 import type { ComponentProps } from '@fountain-ui/core';
 export default interface CarouselProps<ItemT = any> extends ComponentProps<{
@@ -82,5 +82,9 @@ export default interface CarouselProps<ItemT = any> extends ComponentProps<{
      * @default object
      */
     trackStyle?: object;
+    /**
+     * Only web. Refer slick object
+     */
+    ref?: RefObject<any>;
 }> {
 }

package/build/typescript/Carousel/CarouselWeb.d.ts

@@ -1,3 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import type CarouselProps from './CarouselProps';
-export default function Carousel<ItemT>(props: CarouselProps<ItemT>): JSX.Element;
+declare const _default: React.ForwardRefExoticComponent<Pick<CarouselProps<any>, "style" | "index" | "onChange" | "data" | "autoplay" | "autoplayInterval" | "centerSlidePadding" | "inactiveSlideOpacity" | "inactiveSlideScale" | "activeSlideScale" | "infinite" | "renderItem" | "slidesToScroll" | "slidesToShow" | "centerMode" | "arrows" | "arrowsStyle" | "trackStyle"> & React.RefAttributes<unknown>>;
+export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/lab",
-  "version": "1.13.0",
+  "version": "1.13.4",
   "private": false,
   "author": "Fountain-UI Team",
   "description": "Incubator for Fountain-UI React components.",
@@ -17,9 +17,9 @@
   "dependencies": {
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.0.0",
-    "@fountain-ui/icons": "^1.12.0",
+    "@fountain-ui/icons": "^1.12.4",
     "@fountain-ui/utils": "^1.1.0",
-    "react-native-calendars": "1.1249.0"
+    "react-native-calendars": "1.1267.0"
   },
   "peerDependencies": {
     "@fountain-ui/core": "^1.0.0-alpha.4",
@@ -53,7 +53,7 @@
     }
   },
   "devDependencies": {
-    "@fountain-ui/core": "^1.11.0",
+    "@fountain-ui/core": "^1.11.3",
     "@gorhom/bottom-sheet": "3.6.6",
     "@react-native-community/viewpager": "^4.2.2",
     "@types/react-native-snap-carousel": "^3.8.4",
@@ -85,5 +85,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d0481b22bb8c9eb5b2aeac92e53ed516a4c3dcac"
+  "gitHead": "d0073b2a3cd04c55c88b1225fa46f37013adf63d"
 }

package/src/Carousel/CarouselProps.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { RefObject } from 'react';
 import type { ListRenderItemInfo } from 'react-native';
 import type { ComponentProps } from '@fountain-ui/core';
 
@@ -99,4 +99,9 @@ export default interface CarouselProps<ItemT = any> extends ComponentProps<{
      * @default object
      */
     trackStyle?: object;
+
+    /**
+     * Only web. Refer slick object
+     */
+    ref?: RefObject<any>;
 }> {}

package/src/Carousel/CarouselWeb.tsx

@@ -89,23 +89,39 @@ const StyledContainer: any = styled.div((props: any) => ({
 
 interface ArrowContainerProps {
     children: React.ReactElement;
+    visible: boolean;
+    currentSlide?: any;
+    slideCount?: any;
 }
 
-const ArrowContainer = ({ children }: ArrowContainerProps) => (
-    <View
-        style={{
-            height: '100%',
-            justifyContent: 'center',
-            alignItems: 'center',
-            backgroundColor: 'white',
-            borderRadius: 16,
-        }}
-    >
-        {children}
-    </View>
-);
-
-export default function Carousel<ItemT>(props: CarouselProps<ItemT>) {
+const ArrowContainer = (props: ArrowContainerProps) => {
+    const {
+        children,
+        currentSlide,
+        slideCount,
+        visible,
+        ...otherProps
+    } = props;
+
+    return visible ? (
+        // If root component is not a div, there's no arrow class.
+        <div {...otherProps} style={{ cursor: 'pointer' }}>
+            <View
+                style={{
+                    height: '100%',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    backgroundColor: 'white',
+                    borderRadius: 16,
+                }}
+            >
+                {children}
+            </View>
+        </div>
+    ) : null;
+};
+
+export default React.forwardRef((props: CarouselProps, ref) => {
     const {
         activeSlideScale = defaultActiveSlideScale,
         autoplay = defaultAutoplay,
@@ -127,6 +143,7 @@ export default function Carousel<ItemT>(props: CarouselProps<ItemT>) {
     } = props;
 
     const slickRef = React.useRef<Slick | null>(null);
+    const [visibleArrow, setVisibleArrow] = React.useState(false);
 
     React.useEffect(() => {
         if (slickRef.current) {
@@ -154,6 +171,16 @@ export default function Carousel<ItemT>(props: CarouselProps<ItemT>) {
         fixOnClickNotWorkingAfterMobileSwipe();
     };
 
+    const onPointerOver = () => setVisibleArrow(true);
+    const onPointerLeave = () => setVisibleArrow(false);
+
+    React.useEffect(() => {
+        if (ref) {
+            //@ts-ignore
+            ref.current = slickRef.current;
+        }
+    }, []);
+
     return (
         <StyledContainer
             activeSlideScale={activeSlideScale}
@@ -161,6 +188,8 @@ export default function Carousel<ItemT>(props: CarouselProps<ItemT>) {
             inactiveSlideScale={inactiveSlideScale}
             arrowsStyle={arrowsStyle}
             trackStyle={trackStyle}
+            onPointerOver={onPointerOver}
+            onPointerLeave={onPointerLeave}
         >
             <Slick
                 {...baseSettings}
@@ -176,17 +205,8 @@ export default function Carousel<ItemT>(props: CarouselProps<ItemT>) {
                 slidesToScroll={slidesToScroll}
                 slidesToShow={slidesToShow}
                 arrows={arrows}
-                prevArrow={(
-                    // If root component is not a div, there's no arrow class.
-                    <div>
-                        <ArrowContainer children={<ChevronLeft fill={'#767676'}/>}/>
-                    </div>
-                )}
-                nextArrow={(
-                    <div>
-                        <ArrowContainer children={<ChevronRight fill={'#767676'}/>}/>
-                    </div>
-                )}
+                prevArrow={<ArrowContainer visible={visibleArrow} children={<ChevronLeft fill={'#767676'}/>}/>}
+                nextArrow={<ArrowContainer visible={visibleArrow} children={<ChevronRight fill={'#767676'}/>}/>}
             >
                 {mapIndexed((item, index) => {
                     const child = renderItem({ item, index });
@@ -199,4 +219,4 @@ export default function Carousel<ItemT>(props: CarouselProps<ItemT>) {
             </Slick>
         </StyledContainer>
     );
-};
+});

package/src/DateTimePicker/DateTimePicker.tsx

@@ -30,8 +30,8 @@ export default function DateTimePicker(props: DateTimePickerProps) {
     const { locales } = useDateTimePicker();
 
     //TODO: Need to update arrow components
-    const LeftArrow = <Typography children={'<'}/>;
-    const RightArrow = <Typography children={'>'}/>;
+    const LeftArrow = <Typography children={'<'} color={'textPrimary'}/>;
+    const RightArrow = <Typography children={'>'} color={'textPrimary'}/>;
 
     const onYearPress = (date: Date) => {
         setYearPickerVisible(false);

package/src/ViewPager/ChildrenMemoizedPage.tsx

@@ -22,10 +22,6 @@ export default React.memo(Page, (prevProps, nextProps) => {
         return false;
     }
 
-    if (prevProps.style !== nextProps.style) {
-        return false;
-    }
-
     if (prevProps.rerenderKey !== nextProps.rerenderKey) {
         return false;
     }

package/src/ViewPager/ViewPagerWeb.tsx

@@ -35,6 +35,7 @@ export default function ViewPager(props: ViewPagerProps) {
         <View style={[styles.root, style]}>
             {React.Children.map(renderer(children), (child, i) =>
                 React.cloneElement(child as React.ReactElement, {
+                    isVisible: i === index,
                     style: i !== index ? styles.none : StyleSheet.absoluteFill,
                 }),
             )}