@fountain-ui/lab 1.16.1 → 1.18.0

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.18.0](https://github.com/tappytoon/tappytoon/compare/@fountain-ui/lab@1.13.0...@fountain-ui/lab@1.18.0) (2022-03-07)
+
+**Note:** Version bump only for package @fountain-ui/lab
+
+
+
+
+
+# [1.17.0](https://github.com/tappytoon/tappytoon/compare/@fountain-ui/lab@1.13.0...@fountain-ui/lab@1.17.0) (2022-01-25)
+
+**Note:** Version bump only for package @fountain-ui/lab
+
+
+
+
+
+## [1.16.2](https://github.com/tappytoon/tappytoon/compare/@fountain-ui/lab@1.13.0...@fountain-ui/lab@1.16.2) (2022-01-13)
+
+**Note:** Version bump only for package @fountain-ui/lab
+
+
+
+
+
 ## [1.16.1](https://github.com/tappytoon/tappytoon/compare/@fountain-ui/lab@1.13.0...@fountain-ui/lab@1.16.1) (2022-01-07)
 
 **Note:** Version bump only for package @fountain-ui/lab

package/build/commonjs/Carousel/CarouselNative.js

@@ -7,10 +7,10 @@ exports.default = Carousel;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactNative = require("react-native");
-
 var _reactNativeSnapCarousel = _interopRequireDefault(require("react-native-snap-carousel"));
 
+var _core = require("@fountain-ui/core");
+
 var _utils = require("./utils");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -31,7 +31,7 @@ function Carousel(props) {
 
   const carouselRef = _react.default.useRef(null);
 
-  const window = (0, _reactNative.useWindowDimensions)();
+  const window = (0, _core.useValidWindowDimensions)();
   const sliderWidth = window.width;
   const itemWidth = centerSlidePadding !== undefined ? sliderWidth - centerSlidePadding * 2 : sliderWidth;
 

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

@@ -1 +1 @@
-{"version":3,"sources":["CarouselNative.tsx"],"names":["Carousel","props","autoplay","defaultAutoplay","autoplayInterval","defaultAutoplayInterval","centerSlidePadding","data","inactiveSlideOpacity","defaultInactiveSlideOpacity","inactiveSlideScale","defaultInactiveSlideScale","index","infinite","defaultInfinite","onChange","renderItem","carouselRef","React","useRef","window","sliderWidth","width","itemWidth","undefined","useEffect","carousel","current","currentIndex","snapToItem","handleSnapToItem","newIndex"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAEA;;;;AAQe,SAASA,QAAT,CAAyBC,KAAzB,EAAsD;AACjE,QAAM;AACFC,IAAAA,QAAQ,GAAGC,sBADT;AAEFC,IAAAA,gBAAgB,GAAGC,8BAFjB;AAGFC,IAAAA,kBAHE;AAIFC,IAAAA,IAJE;AAKFC,IAAAA,oBAAoB,GAAGC,kCALrB;AAMFC,IAAAA,kBAAkB,GAAGC,gCANnB;AAOFC,IAAAA,KAPE;AAQFC,IAAAA,QAAQ,GAAGC,sBART;AASFC,IAAAA,QATE;AAUFC,IAAAA;AAVE,MAWFf,KAXJ;;AAaA,QAAMgB,WAAW,GAAGC,eAAMC,MAAN,CAA2C,IAA3C,CAApB;;AAEA,QAAMC,MAAM,GAAG,uCAAf;AACA,QAAMC,WAAW,GAAGD,MAAM,CAACE,KAA3B;AACA,QAAMC,SAAS,GAAGjB,kBAAkB,KAAKkB,SAAvB,GACZH,WAAW,GAAIf,kBAAkB,GAAG,CADxB,GAEZe,WAFN;;AAIAH,iBAAMO,SAAN,CAAgB,MAAM;AAClB,UAAMC,QAAQ,GAAGT,WAAW,CAACU,OAA7B;;AACA,QAAID,QAAQ,IAAId,KAAK,KAAKc,QAAQ,CAACE,YAAnC,EAAiD;AAC7CF,MAAAA,QAAQ,CAACG,UAAT,CAAoBjB,KAApB,EAA2B,IAA3B;AACH;AACJ,GALD,EAKG,CAACA,KAAD,CALH;;AAOA,QAAMkB,gBAAgB,GAAIC,QAAD,IAAsB;AAC3C,QAAIhB,QAAJ,EAAc;AACVA,MAAAA,QAAQ,CAACgB,QAAD,CAAR;AACH;AACJ,GAJD;;AAMA,sBACI,6BAAC,gCAAD;AACI,IAAA,QAAQ,EAAE7B,QADd;AAEI,IAAA,gBAAgB,EAAEE,gBAFtB;AAGI,IAAA,IAAI,EAAEG,IAHV;AAII,IAAA,UAAU,EAAE,IAJhB;AAKI,IAAA,oBAAoB,EAAEC,oBAL1B;AAMI,IAAA,kBAAkB,EAAEE,kBANxB;AAOI,IAAA,SAAS,EAAEa,SAPf;AAQI,IAAA,IAAI,EAAEV,QARV;AASI,IAAA,iBAAiB,EAAE,CATvB;AAUI,IAAA,YAAY,EAAEiB,gBAVlB;AAWI,IAAA,GAAG,EAAEb,WAXT;AAYI,IAAA,UAAU,EAAED,UAZhB;AAaI,IAAA,WAAW,EAAEK;AAbjB,IADJ;AAiBH;;AAAA","sourcesContent":["import React from 'react';\nimport { useWindowDimensions } from 'react-native';\nimport RNSnapCarousel from 'react-native-snap-carousel';\nimport type CarouselProps from './CarouselProps';\nimport {\n    defaultAutoplay,\n    defaultAutoplayInterval,\n    defaultInactiveSlideOpacity,\n    defaultInactiveSlideScale,\n    defaultInfinite,\n} from './utils';\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    } = props;\n\n    const carouselRef = React.useRef<RNSnapCarousel<ItemT> | null>(null);\n\n    const window = useWindowDimensions();\n    const sliderWidth = window.width;\n    const itemWidth = centerSlidePadding !== undefined\n        ? sliderWidth - (centerSlidePadding * 2)\n        : sliderWidth;\n\n    React.useEffect(() => {\n        const carousel = carouselRef.current;\n        if (carousel && index !== carousel.currentIndex) {\n            carousel.snapToItem(index, true);\n        }\n    }, [index]);\n\n    const handleSnapToItem = (newIndex: number) => {\n        if (onChange) {\n            onChange(newIndex);\n        }\n    };\n\n    return (\n        <RNSnapCarousel\n            autoplay={autoplay}\n            autoplayInterval={autoplayInterval}\n            data={data}\n            horizontal={true}\n            inactiveSlideOpacity={inactiveSlideOpacity}\n            inactiveSlideScale={inactiveSlideScale}\n            itemWidth={itemWidth}\n            loop={infinite}\n            loopClonesPerSide={2}\n            onSnapToItem={handleSnapToItem}\n            ref={carouselRef}\n            renderItem={renderItem}\n            sliderWidth={sliderWidth}\n        />\n    );\n};\n"]}
+{"version":3,"sources":["CarouselNative.tsx"],"names":["Carousel","props","autoplay","defaultAutoplay","autoplayInterval","defaultAutoplayInterval","centerSlidePadding","data","inactiveSlideOpacity","defaultInactiveSlideOpacity","inactiveSlideScale","defaultInactiveSlideScale","index","infinite","defaultInfinite","onChange","renderItem","carouselRef","React","useRef","window","sliderWidth","width","itemWidth","undefined","useEffect","carousel","current","currentIndex","snapToItem","handleSnapToItem","newIndex"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAEA;;;;AAQe,SAASA,QAAT,CAAyBC,KAAzB,EAAsD;AACjE,QAAM;AACFC,IAAAA,QAAQ,GAAGC,sBADT;AAEFC,IAAAA,gBAAgB,GAAGC,8BAFjB;AAGFC,IAAAA,kBAHE;AAIFC,IAAAA,IAJE;AAKFC,IAAAA,oBAAoB,GAAGC,kCALrB;AAMFC,IAAAA,kBAAkB,GAAGC,gCANnB;AAOFC,IAAAA,KAPE;AAQFC,IAAAA,QAAQ,GAAGC,sBART;AASFC,IAAAA,QATE;AAUFC,IAAAA;AAVE,MAWFf,KAXJ;;AAaA,QAAMgB,WAAW,GAAGC,eAAMC,MAAN,CAA2C,IAA3C,CAApB;;AAEA,QAAMC,MAAM,GAAG,qCAAf;AACA,QAAMC,WAAW,GAAGD,MAAM,CAACE,KAA3B;AACA,QAAMC,SAAS,GAAGjB,kBAAkB,KAAKkB,SAAvB,GACZH,WAAW,GAAIf,kBAAkB,GAAG,CADxB,GAEZe,WAFN;;AAIAH,iBAAMO,SAAN,CAAgB,MAAM;AAClB,UAAMC,QAAQ,GAAGT,WAAW,CAACU,OAA7B;;AACA,QAAID,QAAQ,IAAId,KAAK,KAAKc,QAAQ,CAACE,YAAnC,EAAiD;AAC7CF,MAAAA,QAAQ,CAACG,UAAT,CAAoBjB,KAApB,EAA2B,IAA3B;AACH;AACJ,GALD,EAKG,CAACA,KAAD,CALH;;AAOA,QAAMkB,gBAAgB,GAAIC,QAAD,IAAsB;AAC3C,QAAIhB,QAAJ,EAAc;AACVA,MAAAA,QAAQ,CAACgB,QAAD,CAAR;AACH;AACJ,GAJD;;AAMA,sBACI,6BAAC,gCAAD;AACI,IAAA,QAAQ,EAAE7B,QADd;AAEI,IAAA,gBAAgB,EAAEE,gBAFtB;AAGI,IAAA,IAAI,EAAEG,IAHV;AAII,IAAA,UAAU,EAAE,IAJhB;AAKI,IAAA,oBAAoB,EAAEC,oBAL1B;AAMI,IAAA,kBAAkB,EAAEE,kBANxB;AAOI,IAAA,SAAS,EAAEa,SAPf;AAQI,IAAA,IAAI,EAAEV,QARV;AASI,IAAA,iBAAiB,EAAE,CATvB;AAUI,IAAA,YAAY,EAAEiB,gBAVlB;AAWI,IAAA,GAAG,EAAEb,WAXT;AAYI,IAAA,UAAU,EAAED,UAZhB;AAaI,IAAA,WAAW,EAAEK;AAbjB,IADJ;AAiBH;;AAAA","sourcesContent":["import React from 'react';\nimport RNSnapCarousel from 'react-native-snap-carousel';\nimport { useValidWindowDimensions } from '@fountain-ui/core';\nimport type CarouselProps from './CarouselProps';\nimport {\n    defaultAutoplay,\n    defaultAutoplayInterval,\n    defaultInactiveSlideOpacity,\n    defaultInactiveSlideScale,\n    defaultInfinite,\n} from './utils';\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    } = props;\n\n    const carouselRef = React.useRef<RNSnapCarousel<ItemT> | null>(null);\n\n    const window = useValidWindowDimensions();\n    const sliderWidth = window.width;\n    const itemWidth = centerSlidePadding !== undefined\n        ? sliderWidth - (centerSlidePadding * 2)\n        : sliderWidth;\n\n    React.useEffect(() => {\n        const carousel = carouselRef.current;\n        if (carousel && index !== carousel.currentIndex) {\n            carousel.snapToItem(index, true);\n        }\n    }, [index]);\n\n    const handleSnapToItem = (newIndex: number) => {\n        if (onChange) {\n            onChange(newIndex);\n        }\n    };\n\n    return (\n        <RNSnapCarousel\n            autoplay={autoplay}\n            autoplayInterval={autoplayInterval}\n            data={data}\n            horizontal={true}\n            inactiveSlideOpacity={inactiveSlideOpacity}\n            inactiveSlideScale={inactiveSlideScale}\n            itemWidth={itemWidth}\n            loop={infinite}\n            loopClonesPerSide={2}\n            onSnapToItem={handleSnapToItem}\n            ref={carouselRef}\n            renderItem={renderItem}\n            sliderWidth={sliderWidth}\n        />\n    );\n};\n"]}

package/build/commonjs/FlipCard/FlipCard.js

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = FlipCard;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactNative = require("react-native");
+
+var _reactNativeReanimated = _interopRequireDefault(require("react-native-reanimated"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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, 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; }
+
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    height: 32,
+    width: 24
+  },
+  animatedCard: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'absolute'
+  }
+});
+
+const PERSPECTIVE = 100;
+const Z_INDEX_CHANGE_ANGLE = 90;
+
+function FlipCard(props) {
+  const {
+    backCard,
+    frontCard,
+    reanimationKey,
+    style
+  } = props;
+
+  const sharedAngle = _reactNativeReanimated.default.useSharedValue(0);
+
+  const animatedFrontCardStyle = _reactNativeReanimated.default.useAnimatedStyle(() => {
+    return {
+      zIndex: sharedAngle.value < Z_INDEX_CHANGE_ANGLE ? 2 : 1,
+      transform: [{
+        perspective: PERSPECTIVE
+      }, {
+        rotateX: `${sharedAngle.value}deg`
+      }]
+    };
+  });
+
+  const animatedBackCardStyle = _reactNativeReanimated.default.useAnimatedStyle(() => {
+    return {
+      zIndex: sharedAngle.value <= Z_INDEX_CHANGE_ANGLE ? 1 : 2,
+      transform: [{
+        perspective: PERSPECTIVE
+      }, {
+        rotateX: `${sharedAngle.value + 180}deg`
+      }]
+    };
+  });
+
+  (0, _react.useEffect)(() => {
+    sharedAngle.value = 0;
+    sharedAngle.value = _reactNativeReanimated.default.withTiming(180, {
+      duration: 500
+    });
+  }, [reanimationKey]);
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.container, style]
+  }, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
+    style: [styles.animatedCard, animatedFrontCardStyle]
+  }, frontCard), /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
+    style: [styles.animatedCard, animatedBackCardStyle]
+  }, backCard));
+}
+
+;
+//# sourceMappingURL=FlipCard.js.map

package/build/commonjs/FlipCard/FlipCard.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["FlipCard.tsx"],"names":["styles","StyleSheet","create","container","height","width","animatedCard","alignItems","justifyContent","position","PERSPECTIVE","Z_INDEX_CHANGE_ANGLE","FlipCard","props","backCard","frontCard","reanimationKey","style","sharedAngle","Animated","useSharedValue","animatedFrontCardStyle","useAnimatedStyle","zIndex","value","transform","perspective","rotateX","animatedBackCardStyle","withTiming","duration"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;;;AAGA,MAAMA,MAAM,GAAGC,wBAAWC,MAAX,CAAkB;AAC7BC,EAAAA,SAAS,EAAE;AACPC,IAAAA,MAAM,EAAE,EADD;AAEPC,IAAAA,KAAK,EAAE;AAFA,GADkB;AAK7BC,EAAAA,YAAY,EAAE;AACVC,IAAAA,UAAU,EAAE,QADF;AAEVC,IAAAA,cAAc,EAAE,QAFN;AAGVC,IAAAA,QAAQ,EAAE;AAHA;AALe,CAAlB,CAAf;;AAYA,MAAMC,WAAW,GAAG,GAApB;AACA,MAAMC,oBAAoB,GAAG,EAA7B;;AAEe,SAASC,QAAT,CAAkBC,KAAlB,EAAwC;AACnD,QAAM;AACFC,IAAAA,QADE;AAEFC,IAAAA,SAFE;AAGFC,IAAAA,cAHE;AAIFC,IAAAA;AAJE,MAKFJ,KALJ;;AAOA,QAAMK,WAAW,GAAGC,+BAASC,cAAT,CAAwB,CAAxB,CAApB;;AAEA,QAAMC,sBAAsB,GAAGF,+BAASG,gBAAT,CAA0B,MAAM;AAC3D,WAAO;AACHC,MAAAA,MAAM,EAAEL,WAAW,CAACM,KAAZ,GAAoBb,oBAApB,GAA2C,CAA3C,GAA+C,CADpD;AAEHc,MAAAA,SAAS,EAAE,CACP;AAAEC,QAAAA,WAAW,EAAEhB;AAAf,OADO,EAEP;AAAEiB,QAAAA,OAAO,EAAG,GAAET,WAAW,CAACM,KAAM;AAAhC,OAFO;AAFR,KAAP;AAOH,GAR8B,CAA/B;;AAUA,QAAMI,qBAAqB,GAAGT,+BAASG,gBAAT,CAA0B,MAAM;AAC1D,WAAO;AACHC,MAAAA,MAAM,EAAEL,WAAW,CAACM,KAAZ,IAAqBb,oBAArB,GAA4C,CAA5C,GAAgD,CADrD;AAEHc,MAAAA,SAAS,EAAE,CACP;AAAEC,QAAAA,WAAW,EAAEhB;AAAf,OADO,EAEP;AAAEiB,QAAAA,OAAO,EAAG,GAAGT,WAAW,CAACM,KAAZ,GAAoB,GAAK;AAAxC,OAFO;AAFR,KAAP;AAOH,GAR6B,CAA9B;;AAUA,wBAAU,MAAM;AACZN,IAAAA,WAAW,CAACM,KAAZ,GAAoB,CAApB;AACAN,IAAAA,WAAW,CAACM,KAAZ,GAAoBL,+BAASU,UAAT,CAAoB,GAApB,EAAyB;AAAEC,MAAAA,QAAQ,EAAE;AAAZ,KAAzB,CAApB;AACH,GAHD,EAGG,CAACd,cAAD,CAHH;AAKA,sBACI,6BAAC,iBAAD;AAAM,IAAA,KAAK,EAAE,CAAChB,MAAM,CAACG,SAAR,EAAmBc,KAAnB;AAAb,kBACI,6BAAC,8BAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAE,CAACjB,MAAM,CAACM,YAAR,EAAsBe,sBAAtB;AAAtB,KACKN,SADL,CADJ,eAKI,6BAAC,8BAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAE,CAACf,MAAM,CAACM,YAAR,EAAsBsB,qBAAtB;AAAtB,KACKd,QADL,CALJ,CADJ;AAWH;;AAAA","sourcesContent":["import React, { useEffect } from 'react';\nimport { StyleSheet, View } from 'react-native';\nimport Animated from 'react-native-reanimated';\nimport type FlipCardProps from './FlipCardProps';\n\nconst styles = StyleSheet.create({\n    container: {\n        height: 32,\n        width: 24,\n    },\n    animatedCard: {\n        alignItems: 'center',\n        justifyContent: 'center',\n        position: 'absolute',\n    },\n});\n\nconst PERSPECTIVE = 100;\nconst Z_INDEX_CHANGE_ANGLE = 90;\n\nexport default function FlipCard(props: FlipCardProps) {\n    const {\n        backCard,\n        frontCard,\n        reanimationKey,\n        style,\n    } = props;\n\n    const sharedAngle = Animated.useSharedValue(0);\n\n    const animatedFrontCardStyle = Animated.useAnimatedStyle(() => {\n        return {\n            zIndex: sharedAngle.value < Z_INDEX_CHANGE_ANGLE ? 2 : 1,\n            transform: [\n                { perspective: PERSPECTIVE },\n                { rotateX: `${sharedAngle.value}deg` },\n            ],\n        };\n    });\n\n    const animatedBackCardStyle = Animated.useAnimatedStyle(() => {\n        return {\n            zIndex: sharedAngle.value <= Z_INDEX_CHANGE_ANGLE ? 1 : 2,\n            transform: [\n                { perspective: PERSPECTIVE },\n                { rotateX: `${(sharedAngle.value + 180)}deg` },\n            ],\n        };\n    });\n\n    useEffect(() => {\n        sharedAngle.value = 0;\n        sharedAngle.value = Animated.withTiming(180, { duration: 500 });\n    }, [reanimationKey]);\n\n    return (\n        <View style={[styles.container, style]}>\n            <Animated.View style={[styles.animatedCard, animatedFrontCardStyle]}>\n                {frontCard}\n            </Animated.View>\n\n            <Animated.View style={[styles.animatedCard, animatedBackCardStyle]}>\n                {backCard}\n            </Animated.View>\n        </View>\n    );\n};"]}

package/build/commonjs/FlipCard/FlipCardProps.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=FlipCardProps.js.map

package/build/commonjs/FlipCard/FlipCardProps.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}

package/build/commonjs/FlipCard/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _FlipCard.default;
+  }
+});
+
+var _FlipCard = _interopRequireDefault(require("./FlipCard"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+//# sourceMappingURL=index.js.map

package/build/commonjs/FlipCard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA","sourcesContent":["export { default } from './FlipCard';\nexport type { default as FlipCardProps } from './FlipCardProps';"]}

package/build/commonjs/index.js

@@ -7,6 +7,7 @@ var _exportNames = {
   BottomSheet: true,
   Carousel: true,
   DateTimePicker: true,
+  FlipCard: true,
   ViewPager: true,
   StatusBarProvider: true,
   useStatusBarContext: true
@@ -29,6 +30,12 @@ Object.defineProperty(exports, "DateTimePicker", {
     return _DateTimePicker.default;
   }
 });
+Object.defineProperty(exports, "FlipCard", {
+  enumerable: true,
+  get: function () {
+    return _FlipCard.default;
+  }
+});
 Object.defineProperty(exports, "ViewPager", {
   enumerable: true,
   get: function () {
@@ -90,6 +97,20 @@ Object.keys(_DateTimePicker).forEach(function (key) {
   });
 });
 
+var _FlipCard = _interopRequireWildcard(require("./FlipCard"));
+
+Object.keys(_FlipCard).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _FlipCard[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _FlipCard[key];
+    }
+  });
+});
+
 var _ViewPager = _interopRequireWildcard(require("./ViewPager"));
 
 Object.keys(_ViewPager).forEach(function (key) {

package/build/commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAEA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAEA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAEA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAEA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAEA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export { default as BottomSheet } from './BottomSheet';\nexport * from './BottomSheet';\n\nexport { default as Carousel } from './Carousel';\nexport * from './Carousel';\n\nexport { default as DateTimePicker } from './DateTimePicker';\nexport * from './DateTimePicker';\n\nexport { default as ViewPager } from './ViewPager';\nexport * from './ViewPager';\n\nexport { default as StatusBarProvider, useStatusBarContext } from './StatusBarProvider';\nexport * from './StatusBarProvider';\n\nexport * from './hooks';\n"]}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAEA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAEA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAEA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAEA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAEA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAEA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export { default as BottomSheet } from './BottomSheet';\nexport * from './BottomSheet';\n\nexport { default as Carousel } from './Carousel';\nexport * from './Carousel';\n\nexport { default as DateTimePicker } from './DateTimePicker';\nexport * from './DateTimePicker';\n\nexport { default as FlipCard } from './FlipCard';\nexport * from './FlipCard';\n\nexport { default as ViewPager } from './ViewPager';\nexport * from './ViewPager';\n\nexport { default as StatusBarProvider, useStatusBarContext } from './StatusBarProvider';\nexport * from './StatusBarProvider';\n\nexport * from './hooks';\n"]}

package/build/module/Carousel/CarouselNative.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { useWindowDimensions } from 'react-native';
 import RNSnapCarousel from 'react-native-snap-carousel';
+import { useValidWindowDimensions } from '@fountain-ui/core';
 import { defaultAutoplay, defaultAutoplayInterval, defaultInactiveSlideOpacity, defaultInactiveSlideScale, defaultInfinite } from './utils';
 export default function Carousel(props) {
   const {
@@ -16,7 +16,7 @@ export default function Carousel(props) {
     renderItem
   } = props;
   const carouselRef = React.useRef(null);
-  const window = useWindowDimensions();
+  const window = useValidWindowDimensions();
   const sliderWidth = window.width;
   const itemWidth = centerSlidePadding !== undefined ? sliderWidth - centerSlidePadding * 2 : sliderWidth;
   React.useEffect(() => {

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

@@ -1 +1 @@
-{"version":3,"sources":["CarouselNative.tsx"],"names":["React","useWindowDimensions","RNSnapCarousel","defaultAutoplay","defaultAutoplayInterval","defaultInactiveSlideOpacity","defaultInactiveSlideScale","defaultInfinite","Carousel","props","autoplay","autoplayInterval","centerSlidePadding","data","inactiveSlideOpacity","inactiveSlideScale","index","infinite","onChange","renderItem","carouselRef","useRef","window","sliderWidth","width","itemWidth","undefined","useEffect","carousel","current","currentIndex","snapToItem","handleSnapToItem","newIndex"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,mBAAT,QAAoC,cAApC;AACA,OAAOC,cAAP,MAA2B,4BAA3B;AAEA,SACIC,eADJ,EAEIC,uBAFJ,EAGIC,2BAHJ,EAIIC,yBAJJ,EAKIC,eALJ,QAMO,SANP;AAQA,eAAe,SAASC,QAAT,CAAyBC,KAAzB,EAAsD;AACjE,QAAM;AACFC,IAAAA,QAAQ,GAAGP,eADT;AAEFQ,IAAAA,gBAAgB,GAAGP,uBAFjB;AAGFQ,IAAAA,kBAHE;AAIFC,IAAAA,IAJE;AAKFC,IAAAA,oBAAoB,GAAGT,2BALrB;AAMFU,IAAAA,kBAAkB,GAAGT,yBANnB;AAOFU,IAAAA,KAPE;AAQFC,IAAAA,QAAQ,GAAGV,eART;AASFW,IAAAA,QATE;AAUFC,IAAAA;AAVE,MAWFV,KAXJ;AAaA,QAAMW,WAAW,GAAGpB,KAAK,CAACqB,MAAN,CAA2C,IAA3C,CAApB;AAEA,QAAMC,MAAM,GAAGrB,mBAAmB,EAAlC;AACA,QAAMsB,WAAW,GAAGD,MAAM,CAACE,KAA3B;AACA,QAAMC,SAAS,GAAGb,kBAAkB,KAAKc,SAAvB,GACZH,WAAW,GAAIX,kBAAkB,GAAG,CADxB,GAEZW,WAFN;AAIAvB,EAAAA,KAAK,CAAC2B,SAAN,CAAgB,MAAM;AAClB,UAAMC,QAAQ,GAAGR,WAAW,CAACS,OAA7B;;AACA,QAAID,QAAQ,IAAIZ,KAAK,KAAKY,QAAQ,CAACE,YAAnC,EAAiD;AAC7CF,MAAAA,QAAQ,CAACG,UAAT,CAAoBf,KAApB,EAA2B,IAA3B;AACH;AACJ,GALD,EAKG,CAACA,KAAD,CALH;;AAOA,QAAMgB,gBAAgB,GAAIC,QAAD,IAAsB;AAC3C,QAAIf,QAAJ,EAAc;AACVA,MAAAA,QAAQ,CAACe,QAAD,CAAR;AACH;AACJ,GAJD;;AAMA,sBACI,oBAAC,cAAD;AACI,IAAA,QAAQ,EAAEvB,QADd;AAEI,IAAA,gBAAgB,EAAEC,gBAFtB;AAGI,IAAA,IAAI,EAAEE,IAHV;AAII,IAAA,UAAU,EAAE,IAJhB;AAKI,IAAA,oBAAoB,EAAEC,oBAL1B;AAMI,IAAA,kBAAkB,EAAEC,kBANxB;AAOI,IAAA,SAAS,EAAEU,SAPf;AAQI,IAAA,IAAI,EAAER,QARV;AASI,IAAA,iBAAiB,EAAE,CATvB;AAUI,IAAA,YAAY,EAAEe,gBAVlB;AAWI,IAAA,GAAG,EAAEZ,WAXT;AAYI,IAAA,UAAU,EAAED,UAZhB;AAaI,IAAA,WAAW,EAAEI;AAbjB,IADJ;AAiBH;AAAA","sourcesContent":["import React from 'react';\nimport { useWindowDimensions } from 'react-native';\nimport RNSnapCarousel from 'react-native-snap-carousel';\nimport type CarouselProps from './CarouselProps';\nimport {\n    defaultAutoplay,\n    defaultAutoplayInterval,\n    defaultInactiveSlideOpacity,\n    defaultInactiveSlideScale,\n    defaultInfinite,\n} from './utils';\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    } = props;\n\n    const carouselRef = React.useRef<RNSnapCarousel<ItemT> | null>(null);\n\n    const window = useWindowDimensions();\n    const sliderWidth = window.width;\n    const itemWidth = centerSlidePadding !== undefined\n        ? sliderWidth - (centerSlidePadding * 2)\n        : sliderWidth;\n\n    React.useEffect(() => {\n        const carousel = carouselRef.current;\n        if (carousel && index !== carousel.currentIndex) {\n            carousel.snapToItem(index, true);\n        }\n    }, [index]);\n\n    const handleSnapToItem = (newIndex: number) => {\n        if (onChange) {\n            onChange(newIndex);\n        }\n    };\n\n    return (\n        <RNSnapCarousel\n            autoplay={autoplay}\n            autoplayInterval={autoplayInterval}\n            data={data}\n            horizontal={true}\n            inactiveSlideOpacity={inactiveSlideOpacity}\n            inactiveSlideScale={inactiveSlideScale}\n            itemWidth={itemWidth}\n            loop={infinite}\n            loopClonesPerSide={2}\n            onSnapToItem={handleSnapToItem}\n            ref={carouselRef}\n            renderItem={renderItem}\n            sliderWidth={sliderWidth}\n        />\n    );\n};\n"]}
+{"version":3,"sources":["CarouselNative.tsx"],"names":["React","RNSnapCarousel","useValidWindowDimensions","defaultAutoplay","defaultAutoplayInterval","defaultInactiveSlideOpacity","defaultInactiveSlideScale","defaultInfinite","Carousel","props","autoplay","autoplayInterval","centerSlidePadding","data","inactiveSlideOpacity","inactiveSlideScale","index","infinite","onChange","renderItem","carouselRef","useRef","window","sliderWidth","width","itemWidth","undefined","useEffect","carousel","current","currentIndex","snapToItem","handleSnapToItem","newIndex"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,cAAP,MAA2B,4BAA3B;AACA,SAASC,wBAAT,QAAyC,mBAAzC;AAEA,SACIC,eADJ,EAEIC,uBAFJ,EAGIC,2BAHJ,EAIIC,yBAJJ,EAKIC,eALJ,QAMO,SANP;AAQA,eAAe,SAASC,QAAT,CAAyBC,KAAzB,EAAsD;AACjE,QAAM;AACFC,IAAAA,QAAQ,GAAGP,eADT;AAEFQ,IAAAA,gBAAgB,GAAGP,uBAFjB;AAGFQ,IAAAA,kBAHE;AAIFC,IAAAA,IAJE;AAKFC,IAAAA,oBAAoB,GAAGT,2BALrB;AAMFU,IAAAA,kBAAkB,GAAGT,yBANnB;AAOFU,IAAAA,KAPE;AAQFC,IAAAA,QAAQ,GAAGV,eART;AASFW,IAAAA,QATE;AAUFC,IAAAA;AAVE,MAWFV,KAXJ;AAaA,QAAMW,WAAW,GAAGpB,KAAK,CAACqB,MAAN,CAA2C,IAA3C,CAApB;AAEA,QAAMC,MAAM,GAAGpB,wBAAwB,EAAvC;AACA,QAAMqB,WAAW,GAAGD,MAAM,CAACE,KAA3B;AACA,QAAMC,SAAS,GAAGb,kBAAkB,KAAKc,SAAvB,GACZH,WAAW,GAAIX,kBAAkB,GAAG,CADxB,GAEZW,WAFN;AAIAvB,EAAAA,KAAK,CAAC2B,SAAN,CAAgB,MAAM;AAClB,UAAMC,QAAQ,GAAGR,WAAW,CAACS,OAA7B;;AACA,QAAID,QAAQ,IAAIZ,KAAK,KAAKY,QAAQ,CAACE,YAAnC,EAAiD;AAC7CF,MAAAA,QAAQ,CAACG,UAAT,CAAoBf,KAApB,EAA2B,IAA3B;AACH;AACJ,GALD,EAKG,CAACA,KAAD,CALH;;AAOA,QAAMgB,gBAAgB,GAAIC,QAAD,IAAsB;AAC3C,QAAIf,QAAJ,EAAc;AACVA,MAAAA,QAAQ,CAACe,QAAD,CAAR;AACH;AACJ,GAJD;;AAMA,sBACI,oBAAC,cAAD;AACI,IAAA,QAAQ,EAAEvB,QADd;AAEI,IAAA,gBAAgB,EAAEC,gBAFtB;AAGI,IAAA,IAAI,EAAEE,IAHV;AAII,IAAA,UAAU,EAAE,IAJhB;AAKI,IAAA,oBAAoB,EAAEC,oBAL1B;AAMI,IAAA,kBAAkB,EAAEC,kBANxB;AAOI,IAAA,SAAS,EAAEU,SAPf;AAQI,IAAA,IAAI,EAAER,QARV;AASI,IAAA,iBAAiB,EAAE,CATvB;AAUI,IAAA,YAAY,EAAEe,gBAVlB;AAWI,IAAA,GAAG,EAAEZ,WAXT;AAYI,IAAA,UAAU,EAAED,UAZhB;AAaI,IAAA,WAAW,EAAEI;AAbjB,IADJ;AAiBH;AAAA","sourcesContent":["import React from 'react';\nimport RNSnapCarousel from 'react-native-snap-carousel';\nimport { useValidWindowDimensions } from '@fountain-ui/core';\nimport type CarouselProps from './CarouselProps';\nimport {\n    defaultAutoplay,\n    defaultAutoplayInterval,\n    defaultInactiveSlideOpacity,\n    defaultInactiveSlideScale,\n    defaultInfinite,\n} from './utils';\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    } = props;\n\n    const carouselRef = React.useRef<RNSnapCarousel<ItemT> | null>(null);\n\n    const window = useValidWindowDimensions();\n    const sliderWidth = window.width;\n    const itemWidth = centerSlidePadding !== undefined\n        ? sliderWidth - (centerSlidePadding * 2)\n        : sliderWidth;\n\n    React.useEffect(() => {\n        const carousel = carouselRef.current;\n        if (carousel && index !== carousel.currentIndex) {\n            carousel.snapToItem(index, true);\n        }\n    }, [index]);\n\n    const handleSnapToItem = (newIndex: number) => {\n        if (onChange) {\n            onChange(newIndex);\n        }\n    };\n\n    return (\n        <RNSnapCarousel\n            autoplay={autoplay}\n            autoplayInterval={autoplayInterval}\n            data={data}\n            horizontal={true}\n            inactiveSlideOpacity={inactiveSlideOpacity}\n            inactiveSlideScale={inactiveSlideScale}\n            itemWidth={itemWidth}\n            loop={infinite}\n            loopClonesPerSide={2}\n            onSnapToItem={handleSnapToItem}\n            ref={carouselRef}\n            renderItem={renderItem}\n            sliderWidth={sliderWidth}\n        />\n    );\n};\n"]}

package/build/module/FlipCard/FlipCard.js

@@ -0,0 +1,60 @@
+import React, { useEffect } from 'react';
+import { StyleSheet, View } from 'react-native';
+import Animated from 'react-native-reanimated';
+const styles = StyleSheet.create({
+  container: {
+    height: 32,
+    width: 24
+  },
+  animatedCard: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'absolute'
+  }
+});
+const PERSPECTIVE = 100;
+const Z_INDEX_CHANGE_ANGLE = 90;
+export default function FlipCard(props) {
+  const {
+    backCard,
+    frontCard,
+    reanimationKey,
+    style
+  } = props;
+  const sharedAngle = Animated.useSharedValue(0);
+  const animatedFrontCardStyle = Animated.useAnimatedStyle(() => {
+    return {
+      zIndex: sharedAngle.value < Z_INDEX_CHANGE_ANGLE ? 2 : 1,
+      transform: [{
+        perspective: PERSPECTIVE
+      }, {
+        rotateX: `${sharedAngle.value}deg`
+      }]
+    };
+  });
+  const animatedBackCardStyle = Animated.useAnimatedStyle(() => {
+    return {
+      zIndex: sharedAngle.value <= Z_INDEX_CHANGE_ANGLE ? 1 : 2,
+      transform: [{
+        perspective: PERSPECTIVE
+      }, {
+        rotateX: `${sharedAngle.value + 180}deg`
+      }]
+    };
+  });
+  useEffect(() => {
+    sharedAngle.value = 0;
+    sharedAngle.value = Animated.withTiming(180, {
+      duration: 500
+    });
+  }, [reanimationKey]);
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles.container, style]
+  }, /*#__PURE__*/React.createElement(Animated.View, {
+    style: [styles.animatedCard, animatedFrontCardStyle]
+  }, frontCard), /*#__PURE__*/React.createElement(Animated.View, {
+    style: [styles.animatedCard, animatedBackCardStyle]
+  }, backCard));
+}
+;
+//# sourceMappingURL=FlipCard.js.map

package/build/module/FlipCard/FlipCard.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["FlipCard.tsx"],"names":["React","useEffect","StyleSheet","View","Animated","styles","create","container","height","width","animatedCard","alignItems","justifyContent","position","PERSPECTIVE","Z_INDEX_CHANGE_ANGLE","FlipCard","props","backCard","frontCard","reanimationKey","style","sharedAngle","useSharedValue","animatedFrontCardStyle","useAnimatedStyle","zIndex","value","transform","perspective","rotateX","animatedBackCardStyle","withTiming","duration"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,SAAhB,QAAiC,OAAjC;AACA,SAASC,UAAT,EAAqBC,IAArB,QAAiC,cAAjC;AACA,OAAOC,QAAP,MAAqB,yBAArB;AAGA,MAAMC,MAAM,GAAGH,UAAU,CAACI,MAAX,CAAkB;AAC7BC,EAAAA,SAAS,EAAE;AACPC,IAAAA,MAAM,EAAE,EADD;AAEPC,IAAAA,KAAK,EAAE;AAFA,GADkB;AAK7BC,EAAAA,YAAY,EAAE;AACVC,IAAAA,UAAU,EAAE,QADF;AAEVC,IAAAA,cAAc,EAAE,QAFN;AAGVC,IAAAA,QAAQ,EAAE;AAHA;AALe,CAAlB,CAAf;AAYA,MAAMC,WAAW,GAAG,GAApB;AACA,MAAMC,oBAAoB,GAAG,EAA7B;AAEA,eAAe,SAASC,QAAT,CAAkBC,KAAlB,EAAwC;AACnD,QAAM;AACFC,IAAAA,QADE;AAEFC,IAAAA,SAFE;AAGFC,IAAAA,cAHE;AAIFC,IAAAA;AAJE,MAKFJ,KALJ;AAOA,QAAMK,WAAW,GAAGlB,QAAQ,CAACmB,cAAT,CAAwB,CAAxB,CAApB;AAEA,QAAMC,sBAAsB,GAAGpB,QAAQ,CAACqB,gBAAT,CAA0B,MAAM;AAC3D,WAAO;AACHC,MAAAA,MAAM,EAAEJ,WAAW,CAACK,KAAZ,GAAoBZ,oBAApB,GAA2C,CAA3C,GAA+C,CADpD;AAEHa,MAAAA,SAAS,EAAE,CACP;AAAEC,QAAAA,WAAW,EAAEf;AAAf,OADO,EAEP;AAAEgB,QAAAA,OAAO,EAAG,GAAER,WAAW,CAACK,KAAM;AAAhC,OAFO;AAFR,KAAP;AAOH,GAR8B,CAA/B;AAUA,QAAMI,qBAAqB,GAAG3B,QAAQ,CAACqB,gBAAT,CAA0B,MAAM;AAC1D,WAAO;AACHC,MAAAA,MAAM,EAAEJ,WAAW,CAACK,KAAZ,IAAqBZ,oBAArB,GAA4C,CAA5C,GAAgD,CADrD;AAEHa,MAAAA,SAAS,EAAE,CACP;AAAEC,QAAAA,WAAW,EAAEf;AAAf,OADO,EAEP;AAAEgB,QAAAA,OAAO,EAAG,GAAGR,WAAW,CAACK,KAAZ,GAAoB,GAAK;AAAxC,OAFO;AAFR,KAAP;AAOH,GAR6B,CAA9B;AAUA1B,EAAAA,SAAS,CAAC,MAAM;AACZqB,IAAAA,WAAW,CAACK,KAAZ,GAAoB,CAApB;AACAL,IAAAA,WAAW,CAACK,KAAZ,GAAoBvB,QAAQ,CAAC4B,UAAT,CAAoB,GAApB,EAAyB;AAAEC,MAAAA,QAAQ,EAAE;AAAZ,KAAzB,CAApB;AACH,GAHQ,EAGN,CAACb,cAAD,CAHM,CAAT;AAKA,sBACI,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAE,CAACf,MAAM,CAACE,SAAR,EAAmBc,KAAnB;AAAb,kBACI,oBAAC,QAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAE,CAAChB,MAAM,CAACK,YAAR,EAAsBc,sBAAtB;AAAtB,KACKL,SADL,CADJ,eAKI,oBAAC,QAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAE,CAACd,MAAM,CAACK,YAAR,EAAsBqB,qBAAtB;AAAtB,KACKb,QADL,CALJ,CADJ;AAWH;AAAA","sourcesContent":["import React, { useEffect } from 'react';\nimport { StyleSheet, View } from 'react-native';\nimport Animated from 'react-native-reanimated';\nimport type FlipCardProps from './FlipCardProps';\n\nconst styles = StyleSheet.create({\n    container: {\n        height: 32,\n        width: 24,\n    },\n    animatedCard: {\n        alignItems: 'center',\n        justifyContent: 'center',\n        position: 'absolute',\n    },\n});\n\nconst PERSPECTIVE = 100;\nconst Z_INDEX_CHANGE_ANGLE = 90;\n\nexport default function FlipCard(props: FlipCardProps) {\n    const {\n        backCard,\n        frontCard,\n        reanimationKey,\n        style,\n    } = props;\n\n    const sharedAngle = Animated.useSharedValue(0);\n\n    const animatedFrontCardStyle = Animated.useAnimatedStyle(() => {\n        return {\n            zIndex: sharedAngle.value < Z_INDEX_CHANGE_ANGLE ? 2 : 1,\n            transform: [\n                { perspective: PERSPECTIVE },\n                { rotateX: `${sharedAngle.value}deg` },\n            ],\n        };\n    });\n\n    const animatedBackCardStyle = Animated.useAnimatedStyle(() => {\n        return {\n            zIndex: sharedAngle.value <= Z_INDEX_CHANGE_ANGLE ? 1 : 2,\n            transform: [\n                { perspective: PERSPECTIVE },\n                { rotateX: `${(sharedAngle.value + 180)}deg` },\n            ],\n        };\n    });\n\n    useEffect(() => {\n        sharedAngle.value = 0;\n        sharedAngle.value = Animated.withTiming(180, { duration: 500 });\n    }, [reanimationKey]);\n\n    return (\n        <View style={[styles.container, style]}>\n            <Animated.View style={[styles.animatedCard, animatedFrontCardStyle]}>\n                {frontCard}\n            </Animated.View>\n\n            <Animated.View style={[styles.animatedCard, animatedBackCardStyle]}>\n                {backCard}\n            </Animated.View>\n        </View>\n    );\n};"]}

package/build/module/FlipCard/FlipCardProps.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=FlipCardProps.js.map

package/build/module/FlipCard/FlipCardProps.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}

package/build/module/FlipCard/index.js

@@ -0,0 +1,2 @@
+export { default } from './FlipCard';
+//# sourceMappingURL=index.js.map

package/build/module/FlipCard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":["default"],"mappings":"AAAA,SAASA,OAAT,QAAwB,YAAxB","sourcesContent":["export { default } from './FlipCard';\nexport type { default as FlipCardProps } from './FlipCardProps';"]}

package/build/module/index.js

@@ -4,6 +4,8 @@ export { default as Carousel } from './Carousel';
 export * from './Carousel';
 export { default as DateTimePicker } from './DateTimePicker';
 export * from './DateTimePicker';
+export { default as FlipCard } from './FlipCard';
+export * from './FlipCard';
 export { default as ViewPager } from './ViewPager';
 export * from './ViewPager';
 export { default as StatusBarProvider, useStatusBarContext } from './StatusBarProvider';

package/build/module/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":["default","BottomSheet","Carousel","DateTimePicker","ViewPager","StatusBarProvider","useStatusBarContext"],"mappings":"AAAA,SAASA,OAAO,IAAIC,WAApB,QAAuC,eAAvC;AACA,cAAc,eAAd;AAEA,SAASD,OAAO,IAAIE,QAApB,QAAoC,YAApC;AACA,cAAc,YAAd;AAEA,SAASF,OAAO,IAAIG,cAApB,QAA0C,kBAA1C;AACA,cAAc,kBAAd;AAEA,SAASH,OAAO,IAAII,SAApB,QAAqC,aAArC;AACA,cAAc,aAAd;AAEA,SAASJ,OAAO,IAAIK,iBAApB,EAAuCC,mBAAvC,QAAkE,qBAAlE;AACA,cAAc,qBAAd;AAEA,cAAc,SAAd","sourcesContent":["export { default as BottomSheet } from './BottomSheet';\nexport * from './BottomSheet';\n\nexport { default as Carousel } from './Carousel';\nexport * from './Carousel';\n\nexport { default as DateTimePicker } from './DateTimePicker';\nexport * from './DateTimePicker';\n\nexport { default as ViewPager } from './ViewPager';\nexport * from './ViewPager';\n\nexport { default as StatusBarProvider, useStatusBarContext } from './StatusBarProvider';\nexport * from './StatusBarProvider';\n\nexport * from './hooks';\n"]}
+{"version":3,"sources":["index.ts"],"names":["default","BottomSheet","Carousel","DateTimePicker","FlipCard","ViewPager","StatusBarProvider","useStatusBarContext"],"mappings":"AAAA,SAASA,OAAO,IAAIC,WAApB,QAAuC,eAAvC;AACA,cAAc,eAAd;AAEA,SAASD,OAAO,IAAIE,QAApB,QAAoC,YAApC;AACA,cAAc,YAAd;AAEA,SAASF,OAAO,IAAIG,cAApB,QAA0C,kBAA1C;AACA,cAAc,kBAAd;AAEA,SAASH,OAAO,IAAII,QAApB,QAAoC,YAApC;AACA,cAAc,YAAd;AAEA,SAASJ,OAAO,IAAIK,SAApB,QAAqC,aAArC;AACA,cAAc,aAAd;AAEA,SAASL,OAAO,IAAIM,iBAApB,EAAuCC,mBAAvC,QAAkE,qBAAlE;AACA,cAAc,qBAAd;AAEA,cAAc,SAAd","sourcesContent":["export { default as BottomSheet } from './BottomSheet';\nexport * from './BottomSheet';\n\nexport { default as Carousel } from './Carousel';\nexport * from './Carousel';\n\nexport { default as DateTimePicker } from './DateTimePicker';\nexport * from './DateTimePicker';\n\nexport { default as FlipCard } from './FlipCard';\nexport * from './FlipCard';\n\nexport { default as ViewPager } from './ViewPager';\nexport * from './ViewPager';\n\nexport { default as StatusBarProvider, useStatusBarContext } from './StatusBarProvider';\nexport * from './StatusBarProvider';\n\nexport * from './hooks';\n"]}

package/build/typescript/FlipCard/FlipCard.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type FlipCardProps from './FlipCardProps';
+export default function FlipCard(props: FlipCardProps): JSX.Element;

package/build/typescript/FlipCard/FlipCardProps.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ComponentProps } from '@fountain-ui/core';
+export default interface FlipCardProps extends ComponentProps<{
+    /**
+     * Element placed on backSide
+     */
+    backCard: React.ReactElement;
+    /**
+     * Element placed on frontSide
+     */
+    frontCard: React.ReactElement;
+    /**
+     * The key to reanimate Component, usually includes card content
+     */
+    reanimationKey?: string;
+}> {
+}

package/build/typescript/FlipCard/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './FlipCard';
+export type { default as FlipCardProps } from './FlipCardProps';

package/build/typescript/index.d.ts

@@ -4,6 +4,8 @@ export { default as Carousel } from './Carousel';
 export * from './Carousel';
 export { default as DateTimePicker } from './DateTimePicker';
 export * from './DateTimePicker';
+export { default as FlipCard } from './FlipCard';
+export * from './FlipCard';
 export { default as ViewPager } from './ViewPager';
 export * from './ViewPager';
 export { default as StatusBarProvider, useStatusBarContext } from './StatusBarProvider';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/lab",
-  "version": "1.16.1",
+  "version": "1.18.0",
   "private": false,
   "author": "Fountain-UI Team",
   "description": "Incubator for Fountain-UI React components.",
@@ -17,7 +17,7 @@
   "dependencies": {
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.0.0",
-    "@fountain-ui/icons": "^1.15.1",
+    "@fountain-ui/icons": "^1.17.0",
     "@fountain-ui/utils": "^1.1.0",
     "react-native-calendars": "1.1267.0"
   },
@@ -53,7 +53,7 @@
     }
   },
   "devDependencies": {
-    "@fountain-ui/core": "^1.14.1",
+    "@fountain-ui/core": "^1.16.0",
     "@gorhom/bottom-sheet": "4.1.3",
     "@react-native-community/viewpager": "^4.2.2",
     "@types/react-native-snap-carousel": "^3.8.4",
@@ -85,5 +85,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "db43f98577b3009518570d7b9b3df42f4fe16a51"
+  "gitHead": "0738cec018c008c9993b8d432ca8aaa44d7c3f77"
 }

package/src/Carousel/CarouselNative.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { useWindowDimensions } from 'react-native';
 import RNSnapCarousel from 'react-native-snap-carousel';
+import { useValidWindowDimensions } from '@fountain-ui/core';
 import type CarouselProps from './CarouselProps';
 import {
     defaultAutoplay,
@@ -26,7 +26,7 @@ export default function Carousel<ItemT>(props: CarouselProps<ItemT>) {
 
     const carouselRef = React.useRef<RNSnapCarousel<ItemT> | null>(null);
 
-    const window = useWindowDimensions();
+    const window = useValidWindowDimensions();
     const sliderWidth = window.width;
     const itemWidth = centerSlidePadding !== undefined
         ? sliderWidth - (centerSlidePadding * 2)

package/src/FlipCard/FlipCard.tsx

@@ -0,0 +1,67 @@
+import React, { useEffect } from 'react';
+import { StyleSheet, View } from 'react-native';
+import Animated from 'react-native-reanimated';
+import type FlipCardProps from './FlipCardProps';
+
+const styles = StyleSheet.create({
+    container: {
+        height: 32,
+        width: 24,
+    },
+    animatedCard: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        position: 'absolute',
+    },
+});
+
+const PERSPECTIVE = 100;
+const Z_INDEX_CHANGE_ANGLE = 90;
+
+export default function FlipCard(props: FlipCardProps) {
+    const {
+        backCard,
+        frontCard,
+        reanimationKey,
+        style,
+    } = props;
+
+    const sharedAngle = Animated.useSharedValue(0);
+
+    const animatedFrontCardStyle = Animated.useAnimatedStyle(() => {
+        return {
+            zIndex: sharedAngle.value < Z_INDEX_CHANGE_ANGLE ? 2 : 1,
+            transform: [
+                { perspective: PERSPECTIVE },
+                { rotateX: `${sharedAngle.value}deg` },
+            ],
+        };
+    });
+
+    const animatedBackCardStyle = Animated.useAnimatedStyle(() => {
+        return {
+            zIndex: sharedAngle.value <= Z_INDEX_CHANGE_ANGLE ? 1 : 2,
+            transform: [
+                { perspective: PERSPECTIVE },
+                { rotateX: `${(sharedAngle.value + 180)}deg` },
+            ],
+        };
+    });
+
+    useEffect(() => {
+        sharedAngle.value = 0;
+        sharedAngle.value = Animated.withTiming(180, { duration: 500 });
+    }, [reanimationKey]);
+
+    return (
+        <View style={[styles.container, style]}>
+            <Animated.View style={[styles.animatedCard, animatedFrontCardStyle]}>
+                {frontCard}
+            </Animated.View>
+
+            <Animated.View style={[styles.animatedCard, animatedBackCardStyle]}>
+                {backCard}
+            </Animated.View>
+        </View>
+    );
+};

package/src/FlipCard/FlipCardProps.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ComponentProps } from '@fountain-ui/core';
+
+export default interface FlipCardProps extends ComponentProps<{
+    /**
+     * Element placed on backSide
+     */
+    backCard: React.ReactElement;
+
+    /**
+     * Element placed on frontSide
+     */
+    frontCard: React.ReactElement;
+
+    /**
+     * The key to reanimate Component, usually includes card content
+     */
+    reanimationKey?: string;
+}> {}

package/src/FlipCard/index.ts

@@ -0,0 +1,2 @@
+export { default } from './FlipCard';
+export type { default as FlipCardProps } from './FlipCardProps';

package/src/index.ts

@@ -7,6 +7,9 @@ export * from './Carousel';
 export { default as DateTimePicker } from './DateTimePicker';
 export * from './DateTimePicker';
 
+export { default as FlipCard } from './FlipCard';
+export * from './FlipCard';
+
 export { default as ViewPager } from './ViewPager';
 export * from './ViewPager';