@fountain-ui/lab 1.16.2 → 1.19.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.19.0](https://github.com/tappytoon/tappytoon/compare/@fountain-ui/lab@1.13.0...@fountain-ui/lab@1.19.0) (2022-03-21)
+
+**Note:** Version bump only for package @fountain-ui/lab
+
+
+
+
+
+# [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

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/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.2",
+  "version": "1.19.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.2",
+    "@fountain-ui/icons": "^1.18.0",
     "@fountain-ui/utils": "^1.1.0",
     "react-native-calendars": "1.1267.0"
   },
@@ -53,7 +53,7 @@
     }
   },
   "devDependencies": {
-    "@fountain-ui/core": "^1.14.2",
+    "@fountain-ui/core": "^1.17.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": "2453b78c3d7ff484fc25ea0663e33a681942f910"
+  "gitHead": "f1c8ecff8e5819a3cf723236e0f626cc921cb9d3"
 }

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';