@fountain-ui/lab 1.9.2 → 1.12.0

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.12.0](https://github.com/tappytoon/tappytoon/compare/@fountain-ui/lab@1.9.2...@fountain-ui/lab@1.12.0) (2021-09-27)
+
+**Note:** Version bump only for package @fountain-ui/lab
+
+
+
+
+
+# [1.11.0](https://github.com/tappytoon/tappytoon/compare/@fountain-ui/lab@1.9.2...@fountain-ui/lab@1.11.0) (2021-09-23)
+
+**Note:** Version bump only for package @fountain-ui/lab
+
+
+
+
+
+## [1.10.1](https://github.com/tappytoon/tappytoon/compare/@fountain-ui/lab@1.9.2...@fountain-ui/lab@1.10.1) (2021-09-10)
+
+**Note:** Version bump only for package @fountain-ui/lab
+
+
+
+
+
+# [1.10.0](https://github.com/tappytoon/tappytoon/compare/@fountain-ui/lab@1.9.2...@fountain-ui/lab@1.10.0) (2021-09-09)
+
+**Note:** Version bump only for package @fountain-ui/lab
+
+
+
+
+
 ## [1.9.2](https://github.com/tappytoon/tappytoon/compare/@fountain-ui/lab@1.9.1...@fountain-ui/lab@1.9.2) (2021-09-01)
 
 **Note:** Version bump only for package @fountain-ui/lab

package/build/commonjs/AnimatedY/AnimatedY.js

@@ -9,9 +9,9 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 

package/build/commonjs/Carousel/CarouselWeb.js

@@ -7,10 +7,14 @@ exports.default = Carousel;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _reactNative = require("react-native");
+
 var _reactSlick = _interopRequireDefault(require("react-slick"));
 
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 
+var _icons = require("@fountain-ui/icons");
+
 var _utils = require("@fountain-ui/utils");
 
 var _utils2 = require("./utils");
@@ -20,7 +24,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 const baseSettings = {
-  arrows: false,
   dots: false,
   draggable: true,
   lazyLoad: 'ondemand',
@@ -35,66 +38,41 @@ const baseSettings = {
 const noop = () => void 0;
 
 const StyledContainer = _styled.default.div(props => ({
-  ['& .slick-slider']: {
-    display: 'block',
-    position: 'relative',
-    userSelect: 'none'
-  },
-  ['& .slick-list']: {
-    display: 'block',
-    position: 'relative',
-    overflow: 'hidden',
-    margin: 0,
-    padding: 0,
-    ['&:focus']: {
-      outline: 'none'
-    },
-    ['&.dragging']: {
-      cursor: 'pointer'
-    }
-  },
-  ['& .slick-slider .slick-track, &.slick-slider .slick-list']: {
-    transform: 'translate3d(0, 0, 0)'
-  },
   ['& .slick-track']: {
-    display: 'block',
-    position: 'relative',
-    top: 0,
-    left: 0,
-    ['&:before, &:after']: {
-      display: 'table',
-      content: '\'\''
-    },
-    ['&:after']: {
-      clear: 'both'
-    }
+    display: 'flex'
   },
-  ['& .slick-slide']: {
-    display: 'none',
-    float: 'left',
-    height: '100%',
-    minHeight: 1,
-    ['& > div']: {
-      display: 'flex',
-      transform: "scale(".concat(props.inactiveSlideScale, ")"),
-      transition: 'transform .5s',
-      opacity: props.inactiveSlideOpacity
-    }
+  ['& .slick-slide > div']: {
+    display: 'flex',
+    opacity: 0.2,
+    transform: `scale(${props.inactiveSlideScale})`,
+    transition: 'transform .5s'
   },
-  ['& .slick-current > div']: {
-    transform: 'none',
+  [`& .slick-active.slick-current > div`]: {
+    transform: `scale(${props.activeSlideScale})`,
     opacity: 1
   },
-  ['& .slick-initialized .slick-slide']: {
-    display: 'block'
-  }
+  ...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 {
+    activeSlideScale = _utils2.defaultActiveSlideScale,
     autoplay = _utils2.defaultAutoplay,
     autoplayInterval = _utils2.defaultAutoplayInterval,
-    centerSlidePadding,
+    centerMode = true,
+    centerSlidePadding = 0,
     data,
     inactiveSlideOpacity = _utils2.defaultInactiveSlideOpacity,
     inactiveSlideScale = _utils2.defaultInactiveSlideScale,
@@ -103,7 +81,9 @@ function Carousel(props) {
     onChange,
     renderItem,
     slidesToScroll = 1,
-    slidesToShow = 1
+    slidesToShow = 1,
+    arrows = false,
+    arrowsStyle = {}
   } = props;
 
   const slickRef = _react.default.useRef(null);
@@ -135,20 +115,36 @@ function Carousel(props) {
   };
 
   return /*#__PURE__*/_react.default.createElement(StyledContainer, {
+    activeSlideScale: activeSlideScale,
     inactiveSlideOpacity: inactiveSlideOpacity,
-    inactiveSlideScale: inactiveSlideScale
+    inactiveSlideScale: inactiveSlideScale,
+    arrowsStyle: arrowsStyle
   }, /*#__PURE__*/_react.default.createElement(_reactSlick.default, _extends({}, baseSettings, {
     afterChange: handleAfterChange,
     autoplay: autoplay,
     autoplaySpeed: autoplayInterval,
     beforeChange: handleBeforeChange,
-    centerMode: centerSlidePadding !== undefined,
-    centerPadding: centerSlidePadding !== undefined ? "".concat(centerSlidePadding, "px") : undefined,
+    centerMode: centerMode,
+    centerPadding: `${centerSlidePadding}px`,
     infinite: infinite,
     initialSlide: index,
     ref: slickRef,
-    slidesToScroll: centerSlidePadding !== undefined ? 1 : slidesToScroll,
-    slidesToShow: centerSlidePadding !== undefined ? 1 : slidesToShow
+    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, {
+      children: /*#__PURE__*/_react.default.createElement(_icons.ChevronLeft, {
+        fill: '#767676'
+      })
+    })),
+    nextArrow: /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(ArrowContainer, {
+      children: /*#__PURE__*/_react.default.createElement(_icons.ChevronRight, {
+        fill: '#767676'
+      })
+    }))
   }), (0, _utils.mapIndexed)((item, index) => {
     const child = renderItem({
       item,

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

@@ -1 +1 @@
-{"version":3,"sources":["CarouselWeb.tsx"],"names":["baseSettings","arrows","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","float","height","minHeight","inactiveSlideScale","transition","opacity","inactiveSlideOpacity","Carousel","autoplay","defaultAutoplay","autoplayInterval","defaultAutoplayInterval","centerSlidePadding","data","defaultInactiveSlideOpacity","defaultInactiveSlideScale","index","infinite","defaultInfinite","onChange","renderItem","slidesToScroll","slidesToShow","slickRef","React","useRef","useEffect","current","slickGoTo","fixOnClickNotWorkingAfterMobileSwipe","innerSlider","clickHandler","handleAfterChange","newIndex","handleBeforeChange","undefined","item","child","cloneElement","key"],"mappings":"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","sourcesContent":["import React from 'react';\nimport Slick, { Settings } from 'react-slick';\nimport styled from '@emotion/styled';\nimport { mapIndexed } from '@fountain-ui/utils';\nimport type CarouselProps from './CarouselProps';\nimport {\n    defaultAutoplay,\n    defaultAutoplayInterval,\n    defaultInactiveSlideOpacity,\n    defaultInactiveSlideScale,\n    defaultInfinite,\n} from './utils';\n\nconst baseSettings: Settings = {\n    arrows: false,\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    },\n    ['& .slick-slide']: {\n        display: 'none',\n        float: 'left',\n        height: '100%',\n        minHeight: 1,\n        ['& > div']: {\n            display: 'flex',\n            transform: `scale(${props.inactiveSlideScale})`,\n            transition: 'transform .5s',\n            opacity: props.inactiveSlideOpacity,\n        },\n    },\n    ['& .slick-current > div']: {\n        transform: 'none',\n        opacity: 1,\n    },\n    ['& .slick-initialized .slick-slide']: {\n        display: 'block',\n    },\n}));\n\nexport default function Carousel<ItemT>(props: CarouselProps<ItemT>) {\n    const {\n        autoplay = defaultAutoplay,\n        autoplayInterval = defaultAutoplayInterval,\n        centerSlidePadding,\n        data,\n        inactiveSlideOpacity = defaultInactiveSlideOpacity,\n        inactiveSlideScale = defaultInactiveSlideScale,\n        index,\n        infinite = defaultInfinite,\n        onChange,\n        renderItem,\n        slidesToScroll = 1,\n        slidesToShow = 1,\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            inactiveSlideOpacity={inactiveSlideOpacity}\n            inactiveSlideScale={inactiveSlideScale}\n        >\n            <Slick\n                {...baseSettings}\n                afterChange={handleAfterChange}\n                autoplay={autoplay}\n                autoplaySpeed={autoplayInterval}\n                beforeChange={handleBeforeChange}\n                centerMode={centerSlidePadding !== undefined}\n                centerPadding={centerSlidePadding !== undefined ? `${centerSlidePadding}px` : undefined}\n                infinite={infinite}\n                initialSlide={index}\n                ref={slickRef}\n                slidesToScroll={centerSlidePadding !== undefined ? 1 : slidesToScroll}\n                slidesToShow={centerSlidePadding !== undefined ? 1 : slidesToShow}\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","opacity","transform","inactiveSlideScale","transition","activeSlideScale","arrowsStyle","ArrowContainer","children","height","justifyContent","alignItems","backgroundColor","borderRadius","Carousel","defaultActiveSlideScale","autoplay","defaultAutoplay","autoplayInterval","defaultAutoplayInterval","centerMode","centerSlidePadding","data","inactiveSlideOpacity","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-track']: {\n        display: 'flex',\n    },\n    ['& .slick-slide > div']: {\n        display: 'flex',\n        opacity: 0.2,\n        transform: `scale(${props.inactiveSlideScale})`,\n        transition: 'transform .5s',\n    },\n    [`& .slick-active.slick-current > div`]: {\n        transform: `scale(${props.activeSlideScale})`,\n        opacity: 1,\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 = true,\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    } = 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        >\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"]}

package/build/commonjs/Carousel/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.defaultInfinite = exports.defaultInactiveSlideScale = exports.defaultInactiveSlideOpacity = exports.defaultAutoplayInterval = exports.defaultAutoplay = void 0;
+exports.defaultInfinite = exports.defaultActiveSlideScale = exports.defaultInactiveSlideScale = exports.defaultInactiveSlideOpacity = exports.defaultAutoplayInterval = exports.defaultAutoplay = void 0;
 const defaultAutoplay = false;
 exports.defaultAutoplay = defaultAutoplay;
 const defaultAutoplayInterval = 3000;
@@ -12,6 +12,8 @@ const defaultInactiveSlideOpacity = 0.7;
 exports.defaultInactiveSlideOpacity = defaultInactiveSlideOpacity;
 const defaultInactiveSlideScale = 0.9;
 exports.defaultInactiveSlideScale = defaultInactiveSlideScale;
+const defaultActiveSlideScale = 0.990;
+exports.defaultActiveSlideScale = defaultActiveSlideScale;
 const defaultInfinite = false;
 exports.defaultInfinite = defaultInfinite;
 //# sourceMappingURL=utils.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["utils.ts"],"names":["defaultAutoplay","defaultAutoplayInterval","defaultInactiveSlideOpacity","defaultInactiveSlideScale","defaultInfinite"],"mappings":";;;;;;AAAO,MAAMA,eAAe,GAAG,KAAxB;;AAEA,MAAMC,uBAAuB,GAAG,IAAhC;;AAEA,MAAMC,2BAA2B,GAAG,GAApC;;AAEA,MAAMC,yBAAyB,GAAG,GAAlC;;AAEA,MAAMC,eAAe,GAAG,KAAxB","sourcesContent":["export const defaultAutoplay = false;\n\nexport const defaultAutoplayInterval = 3000;\n\nexport const defaultInactiveSlideOpacity = 0.7;\n\nexport const defaultInactiveSlideScale = 0.9;\n\nexport const defaultInfinite = false;"]}
+{"version":3,"sources":["utils.ts"],"names":["defaultAutoplay","defaultAutoplayInterval","defaultInactiveSlideOpacity","defaultInactiveSlideScale","defaultActiveSlideScale","defaultInfinite"],"mappings":";;;;;;AAAO,MAAMA,eAAe,GAAG,KAAxB;;AAEA,MAAMC,uBAAuB,GAAG,IAAhC;;AAEA,MAAMC,2BAA2B,GAAG,GAApC;;AAEA,MAAMC,yBAAyB,GAAG,GAAlC;;AAEA,MAAMC,uBAAuB,GAAG,KAAhC;;AAEA,MAAMC,eAAe,GAAG,KAAxB","sourcesContent":["export const defaultAutoplay = false;\n\nexport const defaultAutoplayInterval = 3000;\n\nexport const defaultInactiveSlideOpacity = 0.7;\n\nexport const defaultInactiveSlideScale = 0.9;\n\nexport const defaultActiveSlideScale = 0.990;\n\nexport const defaultInfinite = false;\n"]}

package/build/commonjs/StatusBarProvider/StatusBarProvider.js

@@ -72,7 +72,7 @@ function StatusBarProvider(props) {
     position: 'absolute',
     right: 0,
     top: 0,
-    zIndex: 10
+    zIndex: theme.zIndex.statusBar
   }]);
   return /*#__PURE__*/_react.default.createElement(_Provider.default, {
     value: {

package/build/commonjs/StatusBarProvider/StatusBarProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["StatusBarProvider.tsx"],"names":["initialVisible","Platform","select","ios","android","StatusBarProvider","props","children","theme","defaultColor","palette","background","default","visible","setVisible","React","useState","backgroundViewColor","setBackgroundViewColor","setBackgroundColor","value","OS","RNStatusBar","setBarStyle","animated","setHidden","setTranslucent","shouldRenderBackgroundView","inset","backgroundViewStyle","backgroundColor","height","top","left","position","right","zIndex"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;AACA;;;;AAGA,MAAMA,cAAc,GAAGC,sBAASC,MAAT,CAAgB;AACnCC,EAAAA,GAAG,EAAE,IAD8B;AAEnCC,EAAAA,OAAO,EAAE;AAF0B,CAAhB,CAAvB;;AAKe,SAASC,iBAAT,CAA2BC,KAA3B,EAA0D;AACrE,QAAM;AAAEC,IAAAA;AAAF,MAAeD,KAArB;AAEA,QAAME,KAAK,GAAG,qBAAd;AACA,QAAMC,YAAY,GAAGD,KAAK,CAACE,OAAN,CAAcC,UAAd,CAAyBC,OAA9C;;AAEA,QAAM,CAACC,OAAD,EAAUC,UAAV,IAAwBC,eAAMC,QAAN,CAAehB,cAAf,CAA9B;;AACA,QAAM,CAACiB,mBAAD,EAAsBC,sBAAtB,IAAgDH,eAAMC,QAAN,CAAeP,YAAf,CAAtD;;AAEA,QAAMU,kBAAkB,GAAIC,KAAD,IAAmB;AAC1C,QAAInB,sBAASoB,EAAT,KAAgB,SAApB,EAA+B;AAC3BC,6BAAYH,kBAAZ,CAA+BC,KAA/B;AACH;;AAED,QAAInB,sBAASoB,EAAT,KAAgB,KAApB,EAA2B;AACvBH,MAAAA,sBAAsB,CAACE,KAAD,CAAtB;AACH;AACJ,GARD;;AAUA,QAAMG,WAAW,GAAG,CAACH,KAAD,EAAwBI,QAAxB,KAA+C;AAC/DF,2BAAYC,WAAZ,CAAwBH,KAAxB,EAA+BI,QAA/B;AACH,GAFD;;AAIA,QAAMC,SAAS,GAAIL,KAAD,IAAoB;AAClC,QAAInB,sBAASoB,EAAT,KAAgB,KAApB,EAA2B;AACvBP,MAAAA,UAAU,CAAC,CAACM,KAAF,CAAV;AACH;;AAEDE,2BAAYG,SAAZ,CAAsBL,KAAtB;AACH,GAND;;AAQA,QAAMM,cAAc,GAAIN,KAAD,IAAoB;AACvC,QAAInB,sBAASoB,EAAT,KAAgB,SAApB,EAA+B;AAC3BC,6BAAYI,cAAZ,CAA2BN,KAA3B;AACH;AACJ,GAJD;;AAMA,QAAMO,0BAA0B,GAAG1B,sBAASoB,EAAT,KAAgB,KAAhB,IAAyBR,OAA5D;AAEA,QAAMe,KAAK,GAAG,oDAAd;AACA,QAAMC,mBAAmB,GAAG,iBAAI,CAC5B;AACIC,IAAAA,eAAe,EAAEb,mBADrB;AAEIc,IAAAA,MAAM,EAAEH,KAAK,CAACI,GAFlB;AAGIC,IAAAA,IAAI,EAAE,CAHV;AAIIC,IAAAA,QAAQ,EAAE,UAJd;AAKIC,IAAAA,KAAK,EAAE,CALX;AAMIH,IAAAA,GAAG,EAAE,CANT;AAOII,IAAAA,MAAM,EAAE;AAPZ,GAD4B,CAAJ,CAA5B;AAYA,sBACI,6BAAC,iBAAD;AAAU,IAAA,KAAK,EAAE;AACbjB,MAAAA,kBADa;AAEbI,MAAAA,WAFa;AAGbE,MAAAA,SAHa;AAIbC,MAAAA;AAJa;AAAjB,KAMKC,0BAA0B,gBACvB,6BAAC,iBAAD;AAAM,IAAA,KAAK,EAAEE;AAAb,IADuB,GAEvB,IARR,EASKtB,QATL,CADJ;AAaH","sourcesContent":["import React from 'react';\nimport type { StatusBarStyle } from 'react-native';\nimport { Platform, StatusBar as RNStatusBar, View } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { useTheme } from '@fountain-ui/core';\nimport { css } from '@fountain-ui/styles';\nimport Provider from './Provider';\nimport type StatusBarProviderProps from './StatusBarProviderProps';\n\nconst initialVisible = Platform.select({\n    ios: true,\n    android: false,\n});\n\nexport default function StatusBarProvider(props: StatusBarProviderProps) {\n    const { children } = props;\n\n    const theme = useTheme();\n    const defaultColor = theme.palette.background.default;\n\n    const [visible, setVisible] = React.useState(initialVisible);\n    const [backgroundViewColor, setBackgroundViewColor] = React.useState(defaultColor);\n\n    const setBackgroundColor = (value: string) => {\n        if (Platform.OS === 'android') {\n            RNStatusBar.setBackgroundColor(value);\n        }\n\n        if (Platform.OS === 'ios') {\n            setBackgroundViewColor(value);\n        }\n    };\n\n    const setBarStyle = (value: StatusBarStyle, animated?: boolean) => {\n        RNStatusBar.setBarStyle(value, animated);\n    };\n\n    const setHidden = (value: boolean) => {\n        if (Platform.OS === 'ios') {\n            setVisible(!value);\n        }\n\n        RNStatusBar.setHidden(value);\n    };\n\n    const setTranslucent = (value: boolean) => {\n        if (Platform.OS === 'android') {\n            RNStatusBar.setTranslucent(value);\n        }\n    };\n\n    const shouldRenderBackgroundView = Platform.OS === 'ios' && visible;\n\n    const inset = useSafeAreaInsets();\n    const backgroundViewStyle = css([\n        {\n            backgroundColor: backgroundViewColor,\n            height: inset.top,\n            left: 0,\n            position: 'absolute',\n            right: 0,\n            top: 0,\n            zIndex: 10,\n        },\n    ]);\n\n    return (\n        <Provider value={{\n            setBackgroundColor,\n            setBarStyle,\n            setHidden,\n            setTranslucent,\n        }}>\n            {shouldRenderBackgroundView ? (\n                <View style={backgroundViewStyle}/>\n            ) : null}\n            {children}\n        </Provider>\n    );\n}"]}
+{"version":3,"sources":["StatusBarProvider.tsx"],"names":["initialVisible","Platform","select","ios","android","StatusBarProvider","props","children","theme","defaultColor","palette","background","default","visible","setVisible","React","useState","backgroundViewColor","setBackgroundViewColor","setBackgroundColor","value","OS","RNStatusBar","setBarStyle","animated","setHidden","setTranslucent","shouldRenderBackgroundView","inset","backgroundViewStyle","backgroundColor","height","top","left","position","right","zIndex","statusBar"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;AACA;;;;AAGA,MAAMA,cAAc,GAAGC,sBAASC,MAAT,CAAgB;AACnCC,EAAAA,GAAG,EAAE,IAD8B;AAEnCC,EAAAA,OAAO,EAAE;AAF0B,CAAhB,CAAvB;;AAKe,SAASC,iBAAT,CAA2BC,KAA3B,EAA0D;AACrE,QAAM;AAAEC,IAAAA;AAAF,MAAeD,KAArB;AAEA,QAAME,KAAK,GAAG,qBAAd;AACA,QAAMC,YAAY,GAAGD,KAAK,CAACE,OAAN,CAAcC,UAAd,CAAyBC,OAA9C;;AAEA,QAAM,CAACC,OAAD,EAAUC,UAAV,IAAwBC,eAAMC,QAAN,CAAehB,cAAf,CAA9B;;AACA,QAAM,CAACiB,mBAAD,EAAsBC,sBAAtB,IAAgDH,eAAMC,QAAN,CAAeP,YAAf,CAAtD;;AAEA,QAAMU,kBAAkB,GAAIC,KAAD,IAAmB;AAC1C,QAAInB,sBAASoB,EAAT,KAAgB,SAApB,EAA+B;AAC3BC,6BAAYH,kBAAZ,CAA+BC,KAA/B;AACH;;AAED,QAAInB,sBAASoB,EAAT,KAAgB,KAApB,EAA2B;AACvBH,MAAAA,sBAAsB,CAACE,KAAD,CAAtB;AACH;AACJ,GARD;;AAUA,QAAMG,WAAW,GAAG,CAACH,KAAD,EAAwBI,QAAxB,KAA+C;AAC/DF,2BAAYC,WAAZ,CAAwBH,KAAxB,EAA+BI,QAA/B;AACH,GAFD;;AAIA,QAAMC,SAAS,GAAIL,KAAD,IAAoB;AAClC,QAAInB,sBAASoB,EAAT,KAAgB,KAApB,EAA2B;AACvBP,MAAAA,UAAU,CAAC,CAACM,KAAF,CAAV;AACH;;AAEDE,2BAAYG,SAAZ,CAAsBL,KAAtB;AACH,GAND;;AAQA,QAAMM,cAAc,GAAIN,KAAD,IAAoB;AACvC,QAAInB,sBAASoB,EAAT,KAAgB,SAApB,EAA+B;AAC3BC,6BAAYI,cAAZ,CAA2BN,KAA3B;AACH;AACJ,GAJD;;AAMA,QAAMO,0BAA0B,GAAG1B,sBAASoB,EAAT,KAAgB,KAAhB,IAAyBR,OAA5D;AAEA,QAAMe,KAAK,GAAG,oDAAd;AACA,QAAMC,mBAAmB,GAAG,iBAAI,CAC5B;AACIC,IAAAA,eAAe,EAAEb,mBADrB;AAEIc,IAAAA,MAAM,EAAEH,KAAK,CAACI,GAFlB;AAGIC,IAAAA,IAAI,EAAE,CAHV;AAIIC,IAAAA,QAAQ,EAAE,UAJd;AAKIC,IAAAA,KAAK,EAAE,CALX;AAMIH,IAAAA,GAAG,EAAE,CANT;AAOII,IAAAA,MAAM,EAAE5B,KAAK,CAAC4B,MAAN,CAAaC;AAPzB,GAD4B,CAAJ,CAA5B;AAYA,sBACI,6BAAC,iBAAD;AAAU,IAAA,KAAK,EAAE;AACblB,MAAAA,kBADa;AAEbI,MAAAA,WAFa;AAGbE,MAAAA,SAHa;AAIbC,MAAAA;AAJa;AAAjB,KAMKC,0BAA0B,gBACvB,6BAAC,iBAAD;AAAM,IAAA,KAAK,EAAEE;AAAb,IADuB,GAEvB,IARR,EASKtB,QATL,CADJ;AAaH","sourcesContent":["import React from 'react';\nimport type { StatusBarStyle } from 'react-native';\nimport { Platform, StatusBar as RNStatusBar, View } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { useTheme } from '@fountain-ui/core';\nimport { css } from '@fountain-ui/styles';\nimport Provider from './Provider';\nimport type StatusBarProviderProps from './StatusBarProviderProps';\n\nconst initialVisible = Platform.select({\n    ios: true,\n    android: false,\n});\n\nexport default function StatusBarProvider(props: StatusBarProviderProps) {\n    const { children } = props;\n\n    const theme = useTheme();\n    const defaultColor = theme.palette.background.default;\n\n    const [visible, setVisible] = React.useState(initialVisible);\n    const [backgroundViewColor, setBackgroundViewColor] = React.useState(defaultColor);\n\n    const setBackgroundColor = (value: string) => {\n        if (Platform.OS === 'android') {\n            RNStatusBar.setBackgroundColor(value);\n        }\n\n        if (Platform.OS === 'ios') {\n            setBackgroundViewColor(value);\n        }\n    };\n\n    const setBarStyle = (value: StatusBarStyle, animated?: boolean) => {\n        RNStatusBar.setBarStyle(value, animated);\n    };\n\n    const setHidden = (value: boolean) => {\n        if (Platform.OS === 'ios') {\n            setVisible(!value);\n        }\n\n        RNStatusBar.setHidden(value);\n    };\n\n    const setTranslucent = (value: boolean) => {\n        if (Platform.OS === 'android') {\n            RNStatusBar.setTranslucent(value);\n        }\n    };\n\n    const shouldRenderBackgroundView = Platform.OS === 'ios' && visible;\n\n    const inset = useSafeAreaInsets();\n    const backgroundViewStyle = css([\n        {\n            backgroundColor: backgroundViewColor,\n            height: inset.top,\n            left: 0,\n            position: 'absolute',\n            right: 0,\n            top: 0,\n            zIndex: theme.zIndex.statusBar,\n        },\n    ]);\n\n    return (\n        <Provider value={{\n            setBackgroundColor,\n            setBarStyle,\n            setHidden,\n            setTranslucent,\n        }}>\n            {shouldRenderBackgroundView ? (\n                <View style={backgroundViewStyle}/>\n            ) : null}\n            {children}\n        </Provider>\n    );\n}"]}

package/build/commonjs/ViewPager/ChildrenMemoizedPage.js

@@ -32,6 +32,10 @@ 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","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"]}
+{"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"]}

package/build/commonjs/ViewPager/ViewPagerWeb.js

@@ -15,6 +15,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 const styles = _reactNative.StyleSheet.create({
   root: {
+    // @ts-ignore
+    overflow: 'auto',
     position: 'relative'
   },
   none: {
@@ -41,10 +43,8 @@ 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.createElement(_reactNative.View, {
-    key: i,
-    style: i !== index ? styles.none : _reactNative.StyleSheet.absoluteFill,
-    children: child
+  }, _react.default.Children.map(renderer(children), (child, i) => /*#__PURE__*/_react.default.cloneElement(child, {
+    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","position","none","display","ViewPager","props","children","enableVisibleHint","defaultEnableVisibleHint","index","loading","defaultLoading","pageComponent","defaultPageComponent","pageForceRerenderKey","style","renderer","React","Children","map","child","i","absoluteFill"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;;;AAEA,MAAMA,MAAM,GAAGC,wBAAWC,MAAX,CAAkB;AAC7BC,EAAAA,IAAI,EAAE;AAAEC,IAAAA,QAAQ,EAAE;AAAZ,GADuB;AAE7BC,EAAAA,IAAI,EAAE;AAAEC,IAAAA,OAAO,EAAE;AAAX;AAFuB,CAAlB,CAAf;;AAKe,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,CAACjB,MAAM,CAACG,IAAR,EAAce,KAAd;AAAb,KACKE,eAAMC,QAAN,CAAeC,GAAf,CAAmBH,QAAQ,CAACV,QAAD,CAA3B,EAAuC,CAACc,KAAD,EAAQC,CAAR,kBACpC,6BAAC,iBAAD;AACI,IAAA,GAAG,EAAEA,CADT;AAEI,IAAA,KAAK,EAAEA,CAAC,KAAKZ,KAAN,GAAcZ,MAAM,CAACK,IAArB,GAA4BJ,wBAAWwB,YAFlD;AAGI,IAAA,QAAQ,EAAEF;AAHd,IADH,CADL,CADJ;AAWH;;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: { position: 'relative' },\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                <View\n                    key={i}\n                    style={i !== index ? styles.none : StyleSheet.absoluteFill}\n                    children={child}\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","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"]}

package/build/commonjs/index.js

@@ -118,7 +118,7 @@ Object.keys(_StatusBarProvider).forEach(function (key) {
   });
 });
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 //# sourceMappingURL=index.js.map

package/build/module/Carousel/CarouselWeb.js

@@ -1,12 +1,13 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React from 'react';
+import { View } from 'react-native';
 import Slick from 'react-slick';
 import styled from '@emotion/styled';
+import { ChevronLeft, ChevronRight } from '@fountain-ui/icons';
 import { mapIndexed } from '@fountain-ui/utils';
-import { defaultAutoplay, defaultAutoplayInterval, defaultInactiveSlideOpacity, defaultInactiveSlideScale, defaultInfinite } from './utils';
+import { defaultAutoplay, defaultAutoplayInterval, defaultInactiveSlideOpacity, defaultInactiveSlideScale, defaultActiveSlideScale, defaultInfinite } from './utils';
 const baseSettings = {
-  arrows: false,
   dots: false,
   draggable: true,
   lazyLoad: 'ondemand',
@@ -21,65 +22,41 @@ const baseSettings = {
 const noop = () => void 0;
 
 const StyledContainer = styled.div(props => ({
-  ['& .slick-slider']: {
-    display: 'block',
-    position: 'relative',
-    userSelect: 'none'
-  },
-  ['& .slick-list']: {
-    display: 'block',
-    position: 'relative',
-    overflow: 'hidden',
-    margin: 0,
-    padding: 0,
-    ['&:focus']: {
-      outline: 'none'
-    },
-    ['&.dragging']: {
-      cursor: 'pointer'
-    }
-  },
-  ['& .slick-slider .slick-track, &.slick-slider .slick-list']: {
-    transform: 'translate3d(0, 0, 0)'
-  },
   ['& .slick-track']: {
-    display: 'block',
-    position: 'relative',
-    top: 0,
-    left: 0,
-    ['&:before, &:after']: {
-      display: 'table',
-      content: '\'\''
-    },
-    ['&:after']: {
-      clear: 'both'
-    }
+    display: 'flex'
   },
-  ['& .slick-slide']: {
-    display: 'none',
-    float: 'left',
-    height: '100%',
-    minHeight: 1,
-    ['& > div']: {
-      display: 'flex',
-      transform: "scale(".concat(props.inactiveSlideScale, ")"),
-      transition: 'transform .5s',
-      opacity: props.inactiveSlideOpacity
-    }
+  ['& .slick-slide > div']: {
+    display: 'flex',
+    opacity: 0.2,
+    transform: `scale(${props.inactiveSlideScale})`,
+    transition: 'transform .5s'
   },
-  ['& .slick-current > div']: {
-    transform: 'none',
+  [`& .slick-active.slick-current > div`]: {
+    transform: `scale(${props.activeSlideScale})`,
     opacity: 1
   },
-  ['& .slick-initialized .slick-slide']: {
-    display: 'block'
-  }
+  ...props.arrowsStyle
 }));
+
+const ArrowContainer = ({
+  children
+}) => /*#__PURE__*/React.createElement(View, {
+  style: {
+    height: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'white',
+    borderRadius: 16
+  }
+}, children);
+
 export default function Carousel(props) {
   const {
+    activeSlideScale = defaultActiveSlideScale,
     autoplay = defaultAutoplay,
     autoplayInterval = defaultAutoplayInterval,
-    centerSlidePadding,
+    centerMode = true,
+    centerSlidePadding = 0,
     data,
     inactiveSlideOpacity = defaultInactiveSlideOpacity,
     inactiveSlideScale = defaultInactiveSlideScale,
@@ -88,7 +65,9 @@ export default function Carousel(props) {
     onChange,
     renderItem,
     slidesToScroll = 1,
-    slidesToShow = 1
+    slidesToShow = 1,
+    arrows = false,
+    arrowsStyle = {}
   } = props;
   const slickRef = React.useRef(null);
   React.useEffect(() => {
@@ -118,20 +97,36 @@ export default function Carousel(props) {
   };
 
   return /*#__PURE__*/React.createElement(StyledContainer, {
+    activeSlideScale: activeSlideScale,
     inactiveSlideOpacity: inactiveSlideOpacity,
-    inactiveSlideScale: inactiveSlideScale
+    inactiveSlideScale: inactiveSlideScale,
+    arrowsStyle: arrowsStyle
   }, /*#__PURE__*/React.createElement(Slick, _extends({}, baseSettings, {
     afterChange: handleAfterChange,
     autoplay: autoplay,
     autoplaySpeed: autoplayInterval,
     beforeChange: handleBeforeChange,
-    centerMode: centerSlidePadding !== undefined,
-    centerPadding: centerSlidePadding !== undefined ? "".concat(centerSlidePadding, "px") : undefined,
+    centerMode: centerMode,
+    centerPadding: `${centerSlidePadding}px`,
     infinite: infinite,
     initialSlide: index,
     ref: slickRef,
-    slidesToScroll: centerSlidePadding !== undefined ? 1 : slidesToScroll,
-    slidesToShow: centerSlidePadding !== undefined ? 1 : slidesToShow
+    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, {
+      children: /*#__PURE__*/React.createElement(ChevronLeft, {
+        fill: '#767676'
+      })
+    })),
+    nextArrow: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ArrowContainer, {
+      children: /*#__PURE__*/React.createElement(ChevronRight, {
+        fill: '#767676'
+      })
+    }))
   }), mapIndexed((item, index) => {
     const child = renderItem({
       item,