@fountain-ui/lab 1.18.0 → 1.21.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +24 -0
- package/build/commonjs/Carousel/CarouselNative.js +14 -12
- package/build/commonjs/Carousel/CarouselNative.js.map +1 -1
- package/build/commonjs/FlipCard/FlipCard.js +1 -0
- package/build/commonjs/FlipCard/FlipCard.js.map +1 -1
- package/build/module/Carousel/CarouselNative.js +9 -8
- package/build/module/Carousel/CarouselNative.js.map +1 -1
- package/build/module/FlipCard/FlipCard.js +1 -0
- package/build/module/FlipCard/FlipCard.js.map +1 -1
- package/package.json +4 -4
- package/src/Carousel/CarouselNative.tsx +23 -21
- package/src/FlipCard/FlipCard.tsx +1 -0
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,30 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [1.21.0](https://github.com/tappytoon/tappytoon/compare/@fountain-ui/lab@1.13.0...@fountain-ui/lab@1.21.0) (2022-05-12)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @fountain-ui/lab
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
# [1.20.0](https://github.com/tappytoon/tappytoon/compare/@fountain-ui/lab@1.13.0...@fountain-ui/lab@1.20.0) (2022-03-25)
|
|
15
|
+
|
|
16
|
+
**Note:** Version bump only for package @fountain-ui/lab
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
# [1.19.0](https://github.com/tappytoon/tappytoon/compare/@fountain-ui/lab@1.13.0...@fountain-ui/lab@1.19.0) (2022-03-21)
|
|
23
|
+
|
|
24
|
+
**Note:** Version bump only for package @fountain-ui/lab
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
6
30
|
# [1.18.0](https://github.com/tappytoon/tappytoon/compare/@fountain-ui/lab@1.13.0...@fountain-ui/lab@1.18.0) (2022-03-07)
|
|
7
31
|
|
|
8
32
|
**Note:** Version bump only for package @fountain-ui/lab
|
|
@@ -5,16 +5,20 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = Carousel;
|
|
7
7
|
|
|
8
|
-
var _react =
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
9
|
|
|
10
|
-
var
|
|
10
|
+
var _reactNative = require("react-native");
|
|
11
11
|
|
|
12
|
-
var
|
|
12
|
+
var _reactNativeSnapCarousel = _interopRequireDefault(require("react-native-snap-carousel"));
|
|
13
13
|
|
|
14
14
|
var _utils = require("./utils");
|
|
15
15
|
|
|
16
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
17
|
|
|
18
|
+
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); }
|
|
19
|
+
|
|
20
|
+
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; }
|
|
21
|
+
|
|
18
22
|
function Carousel(props) {
|
|
19
23
|
const {
|
|
20
24
|
autoplay = _utils.defaultAutoplay,
|
|
@@ -28,14 +32,10 @@ function Carousel(props) {
|
|
|
28
32
|
onChange,
|
|
29
33
|
renderItem
|
|
30
34
|
} = props;
|
|
31
|
-
|
|
32
|
-
const
|
|
33
|
-
|
|
34
|
-
const window = (0, _core.useValidWindowDimensions)();
|
|
35
|
-
const sliderWidth = window.width;
|
|
35
|
+
const carouselRef = (0, _react.useRef)(null);
|
|
36
|
+
const [sliderWidth, setSliderWidth] = (0, _react.useState)(() => _reactNative.Dimensions.get('window').width);
|
|
36
37
|
const itemWidth = centerSlidePadding !== undefined ? sliderWidth - centerSlidePadding * 2 : sliderWidth;
|
|
37
|
-
|
|
38
|
-
_react.default.useEffect(() => {
|
|
38
|
+
(0, _react.useEffect)(() => {
|
|
39
39
|
const carousel = carouselRef.current;
|
|
40
40
|
|
|
41
41
|
if (carousel && index !== carousel.currentIndex) {
|
|
@@ -49,7 +49,9 @@ function Carousel(props) {
|
|
|
49
49
|
}
|
|
50
50
|
};
|
|
51
51
|
|
|
52
|
-
return /*#__PURE__*/_react.default.createElement(
|
|
52
|
+
return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
53
|
+
onLayout: event => setSliderWidth(event.nativeEvent.layout.width)
|
|
54
|
+
}, /*#__PURE__*/_react.default.createElement(_reactNativeSnapCarousel.default, {
|
|
53
55
|
autoplay: autoplay,
|
|
54
56
|
autoplayInterval: autoplayInterval,
|
|
55
57
|
data: data,
|
|
@@ -63,7 +65,7 @@ function Carousel(props) {
|
|
|
63
65
|
ref: carouselRef,
|
|
64
66
|
renderItem: renderItem,
|
|
65
67
|
sliderWidth: sliderWidth
|
|
66
|
-
});
|
|
68
|
+
}));
|
|
67
69
|
}
|
|
68
70
|
|
|
69
71
|
;
|
|
@@ -1 +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","
|
|
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","sliderWidth","setSliderWidth","Dimensions","get","width","itemWidth","undefined","carousel","current","currentIndex","snapToItem","handleSnapToItem","newIndex","event","nativeEvent","layout"],"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,GAAG,mBAAqC,IAArC,CAApB;AAEA,QAAM,CAACC,WAAD,EAAcC,cAAd,IAAgC,qBAAS,MAAMC,wBAAWC,GAAX,CAAe,QAAf,EAAyBC,KAAxC,CAAtC;AAEA,QAAMC,SAAS,GAAGjB,kBAAkB,KAAKkB,SAAvB,GACZN,WAAW,GAAIZ,kBAAkB,GAAG,CADxB,GAEZY,WAFN;AAIA,wBAAU,MAAM;AACZ,UAAMO,QAAQ,GAAGR,WAAW,CAACS,OAA7B;;AACA,QAAID,QAAQ,IAAIb,KAAK,KAAKa,QAAQ,CAACE,YAAnC,EAAiD;AAC7CF,MAAAA,QAAQ,CAACG,UAAT,CAAoBhB,KAApB,EAA2B,IAA3B;AACH;AACJ,GALD,EAKG,CAACA,KAAD,CALH;;AAOA,QAAMiB,gBAAgB,GAAIC,QAAD,IAAsB;AAC3C,QAAIf,QAAJ,EAAc;AACVA,MAAAA,QAAQ,CAACe,QAAD,CAAR;AACH;AACJ,GAJD;;AAMA,sBACI,6BAAC,iBAAD;AAAM,IAAA,QAAQ,EAAGC,KAAD,IAAWZ,cAAc,CAACY,KAAK,CAACC,WAAN,CAAkBC,MAAlB,CAAyBX,KAA1B;AAAzC,kBACI,6BAAC,gCAAD;AACI,IAAA,QAAQ,EAAEpB,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,EAAEgB,gBAVlB;AAWI,IAAA,GAAG,EAAEZ,WAXT;AAYI,IAAA,UAAU,EAAED,UAZhB;AAaI,IAAA,WAAW,EAAEE;AAbjB,IADJ,CADJ;AAmBH;;AAAA","sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { Dimensions, View } 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 = useRef<RNSnapCarousel<ItemT> | null>(null);\n\n const [sliderWidth, setSliderWidth] = useState(() => Dimensions.get('window').width);\n\n const itemWidth = centerSlidePadding !== undefined\n ? sliderWidth - (centerSlidePadding * 2)\n : sliderWidth;\n\n 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 <View onLayout={(event) => setSliderWidth(event.nativeEvent.layout.width)}>\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 </View>\n );\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
1
|
+
{"version":3,"sources":["FlipCard.tsx"],"names":["styles","StyleSheet","create","container","height","width","animatedCard","alignItems","backfaceVisibility","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,kBAAkB,EAAE,QAFV;AAGVC,IAAAA,cAAc,EAAE,QAHN;AAIVC,IAAAA,QAAQ,EAAE;AAJA;AALe,CAAlB,CAAf;;AAaA,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,CAACjB,MAAM,CAACG,SAAR,EAAmBe,KAAnB;AAAb,kBACI,6BAAC,8BAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAE,CAAClB,MAAM,CAACM,YAAR,EAAsBgB,sBAAtB;AAAtB,KACKN,SADL,CADJ,eAKI,6BAAC,8BAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAE,CAAChB,MAAM,CAACM,YAAR,EAAsBuB,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 backfaceVisibility: 'hidden',\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};"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { useEffect, useRef, useState } from 'react';
|
|
2
|
+
import { Dimensions, View } from 'react-native';
|
|
2
3
|
import RNSnapCarousel from 'react-native-snap-carousel';
|
|
3
|
-
import { useValidWindowDimensions } from '@fountain-ui/core';
|
|
4
4
|
import { defaultAutoplay, defaultAutoplayInterval, defaultInactiveSlideOpacity, defaultInactiveSlideScale, defaultInfinite } from './utils';
|
|
5
5
|
export default function Carousel(props) {
|
|
6
6
|
const {
|
|
@@ -15,11 +15,10 @@ export default function Carousel(props) {
|
|
|
15
15
|
onChange,
|
|
16
16
|
renderItem
|
|
17
17
|
} = props;
|
|
18
|
-
const carouselRef =
|
|
19
|
-
const
|
|
20
|
-
const sliderWidth = window.width;
|
|
18
|
+
const carouselRef = useRef(null);
|
|
19
|
+
const [sliderWidth, setSliderWidth] = useState(() => Dimensions.get('window').width);
|
|
21
20
|
const itemWidth = centerSlidePadding !== undefined ? sliderWidth - centerSlidePadding * 2 : sliderWidth;
|
|
22
|
-
|
|
21
|
+
useEffect(() => {
|
|
23
22
|
const carousel = carouselRef.current;
|
|
24
23
|
|
|
25
24
|
if (carousel && index !== carousel.currentIndex) {
|
|
@@ -33,7 +32,9 @@ export default function Carousel(props) {
|
|
|
33
32
|
}
|
|
34
33
|
};
|
|
35
34
|
|
|
36
|
-
return /*#__PURE__*/React.createElement(
|
|
35
|
+
return /*#__PURE__*/React.createElement(View, {
|
|
36
|
+
onLayout: event => setSliderWidth(event.nativeEvent.layout.width)
|
|
37
|
+
}, /*#__PURE__*/React.createElement(RNSnapCarousel, {
|
|
37
38
|
autoplay: autoplay,
|
|
38
39
|
autoplayInterval: autoplayInterval,
|
|
39
40
|
data: data,
|
|
@@ -47,7 +48,7 @@ export default function Carousel(props) {
|
|
|
47
48
|
ref: carouselRef,
|
|
48
49
|
renderItem: renderItem,
|
|
49
50
|
sliderWidth: sliderWidth
|
|
50
|
-
});
|
|
51
|
+
}));
|
|
51
52
|
}
|
|
52
53
|
;
|
|
53
54
|
//# sourceMappingURL=CarouselNative.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["CarouselNative.tsx"],"names":["React","
|
|
1
|
+
{"version":3,"sources":["CarouselNative.tsx"],"names":["React","useEffect","useRef","useState","Dimensions","View","RNSnapCarousel","defaultAutoplay","defaultAutoplayInterval","defaultInactiveSlideOpacity","defaultInactiveSlideScale","defaultInfinite","Carousel","props","autoplay","autoplayInterval","centerSlidePadding","data","inactiveSlideOpacity","inactiveSlideScale","index","infinite","onChange","renderItem","carouselRef","sliderWidth","setSliderWidth","get","width","itemWidth","undefined","carousel","current","currentIndex","snapToItem","handleSnapToItem","newIndex","event","nativeEvent","layout"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,SAAhB,EAA2BC,MAA3B,EAAmCC,QAAnC,QAAmD,OAAnD;AACA,SAASC,UAAT,EAAqBC,IAArB,QAAiC,cAAjC;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,GAAGtB,MAAM,CAA+B,IAA/B,CAA1B;AAEA,QAAM,CAACuB,WAAD,EAAcC,cAAd,IAAgCvB,QAAQ,CAAC,MAAMC,UAAU,CAACuB,GAAX,CAAe,QAAf,EAAyBC,KAAhC,CAA9C;AAEA,QAAMC,SAAS,GAAGb,kBAAkB,KAAKc,SAAvB,GACZL,WAAW,GAAIT,kBAAkB,GAAG,CADxB,GAEZS,WAFN;AAIAxB,EAAAA,SAAS,CAAC,MAAM;AACZ,UAAM8B,QAAQ,GAAGP,WAAW,CAACQ,OAA7B;;AACA,QAAID,QAAQ,IAAIX,KAAK,KAAKW,QAAQ,CAACE,YAAnC,EAAiD;AAC7CF,MAAAA,QAAQ,CAACG,UAAT,CAAoBd,KAApB,EAA2B,IAA3B;AACH;AACJ,GALQ,EAKN,CAACA,KAAD,CALM,CAAT;;AAOA,QAAMe,gBAAgB,GAAIC,QAAD,IAAsB;AAC3C,QAAId,QAAJ,EAAc;AACVA,MAAAA,QAAQ,CAACc,QAAD,CAAR;AACH;AACJ,GAJD;;AAMA,sBACI,oBAAC,IAAD;AAAM,IAAA,QAAQ,EAAGC,KAAD,IAAWX,cAAc,CAACW,KAAK,CAACC,WAAN,CAAkBC,MAAlB,CAAyBX,KAA1B;AAAzC,kBACI,oBAAC,cAAD;AACI,IAAA,QAAQ,EAAEd,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,EAAEc,gBAVlB;AAWI,IAAA,GAAG,EAAEX,WAXT;AAYI,IAAA,UAAU,EAAED,UAZhB;AAaI,IAAA,WAAW,EAAEE;AAbjB,IADJ,CADJ;AAmBH;AAAA","sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { Dimensions, View } 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 = useRef<RNSnapCarousel<ItemT> | null>(null);\n\n const [sliderWidth, setSliderWidth] = useState(() => Dimensions.get('window').width);\n\n const itemWidth = centerSlidePadding !== undefined\n ? sliderWidth - (centerSlidePadding * 2)\n : sliderWidth;\n\n 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 <View onLayout={(event) => setSliderWidth(event.nativeEvent.layout.width)}>\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 </View>\n );\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
1
|
+
{"version":3,"sources":["FlipCard.tsx"],"names":["React","useEffect","StyleSheet","View","Animated","styles","create","container","height","width","animatedCard","alignItems","backfaceVisibility","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,kBAAkB,EAAE,QAFV;AAGVC,IAAAA,cAAc,EAAE,QAHN;AAIVC,IAAAA,QAAQ,EAAE;AAJA;AALe,CAAlB,CAAf;AAaA,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,GAAGnB,QAAQ,CAACoB,cAAT,CAAwB,CAAxB,CAApB;AAEA,QAAMC,sBAAsB,GAAGrB,QAAQ,CAACsB,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,GAAG5B,QAAQ,CAACsB,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;AAUA3B,EAAAA,SAAS,CAAC,MAAM;AACZsB,IAAAA,WAAW,CAACK,KAAZ,GAAoB,CAApB;AACAL,IAAAA,WAAW,CAACK,KAAZ,GAAoBxB,QAAQ,CAAC6B,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,CAAChB,MAAM,CAACE,SAAR,EAAmBe,KAAnB;AAAb,kBACI,oBAAC,QAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAE,CAACjB,MAAM,CAACK,YAAR,EAAsBe,sBAAtB;AAAtB,KACKL,SADL,CADJ,eAKI,oBAAC,QAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAE,CAACf,MAAM,CAACK,YAAR,EAAsBsB,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 backfaceVisibility: 'hidden',\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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fountain-ui/lab",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.21.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "Fountain-UI Team",
|
|
6
6
|
"description": "Incubator for Fountain-UI React components.",
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
"dependencies": {
|
|
18
18
|
"@emotion/react": "^11.4.1",
|
|
19
19
|
"@emotion/styled": "^11.0.0",
|
|
20
|
-
"@fountain-ui/icons": "^1.
|
|
20
|
+
"@fountain-ui/icons": "^1.20.0",
|
|
21
21
|
"@fountain-ui/utils": "^1.1.0",
|
|
22
22
|
"react-native-calendars": "1.1267.0"
|
|
23
23
|
},
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
}
|
|
54
54
|
},
|
|
55
55
|
"devDependencies": {
|
|
56
|
-
"@fountain-ui/core": "^1.
|
|
56
|
+
"@fountain-ui/core": "^1.19.0",
|
|
57
57
|
"@gorhom/bottom-sheet": "4.1.3",
|
|
58
58
|
"@react-native-community/viewpager": "^4.2.2",
|
|
59
59
|
"@types/react-native-snap-carousel": "^3.8.4",
|
|
@@ -85,5 +85,5 @@
|
|
|
85
85
|
"publishConfig": {
|
|
86
86
|
"access": "public"
|
|
87
87
|
},
|
|
88
|
-
"gitHead": "
|
|
88
|
+
"gitHead": "471da1539616fd885a946692a80d94533e10ce02"
|
|
89
89
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { useEffect, useRef, useState } from 'react';
|
|
2
|
+
import { Dimensions, View } from 'react-native';
|
|
2
3
|
import RNSnapCarousel from 'react-native-snap-carousel';
|
|
3
|
-
import { useValidWindowDimensions } from '@fountain-ui/core';
|
|
4
4
|
import type CarouselProps from './CarouselProps';
|
|
5
5
|
import {
|
|
6
6
|
defaultAutoplay,
|
|
@@ -24,15 +24,15 @@ export default function Carousel<ItemT>(props: CarouselProps<ItemT>) {
|
|
|
24
24
|
renderItem,
|
|
25
25
|
} = props;
|
|
26
26
|
|
|
27
|
-
const carouselRef =
|
|
27
|
+
const carouselRef = useRef<RNSnapCarousel<ItemT> | null>(null);
|
|
28
|
+
|
|
29
|
+
const [sliderWidth, setSliderWidth] = useState(() => Dimensions.get('window').width);
|
|
28
30
|
|
|
29
|
-
const window = useValidWindowDimensions();
|
|
30
|
-
const sliderWidth = window.width;
|
|
31
31
|
const itemWidth = centerSlidePadding !== undefined
|
|
32
32
|
? sliderWidth - (centerSlidePadding * 2)
|
|
33
33
|
: sliderWidth;
|
|
34
34
|
|
|
35
|
-
|
|
35
|
+
useEffect(() => {
|
|
36
36
|
const carousel = carouselRef.current;
|
|
37
37
|
if (carousel && index !== carousel.currentIndex) {
|
|
38
38
|
carousel.snapToItem(index, true);
|
|
@@ -46,20 +46,22 @@ export default function Carousel<ItemT>(props: CarouselProps<ItemT>) {
|
|
|
46
46
|
};
|
|
47
47
|
|
|
48
48
|
return (
|
|
49
|
-
<
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
49
|
+
<View onLayout={(event) => setSliderWidth(event.nativeEvent.layout.width)}>
|
|
50
|
+
<RNSnapCarousel
|
|
51
|
+
autoplay={autoplay}
|
|
52
|
+
autoplayInterval={autoplayInterval}
|
|
53
|
+
data={data}
|
|
54
|
+
horizontal={true}
|
|
55
|
+
inactiveSlideOpacity={inactiveSlideOpacity}
|
|
56
|
+
inactiveSlideScale={inactiveSlideScale}
|
|
57
|
+
itemWidth={itemWidth}
|
|
58
|
+
loop={infinite}
|
|
59
|
+
loopClonesPerSide={2}
|
|
60
|
+
onSnapToItem={handleSnapToItem}
|
|
61
|
+
ref={carouselRef}
|
|
62
|
+
renderItem={renderItem}
|
|
63
|
+
sliderWidth={sliderWidth}
|
|
64
|
+
/>
|
|
65
|
+
</View>
|
|
64
66
|
);
|
|
65
67
|
};
|