From e258523a11c78a72c7b0374f5071fa8244a1d599 Mon Sep 17 00:00:00 2001 From: Justin Phan Date: Fri, 21 Jan 2022 13:38:36 +0700 Subject: [PATCH] feat: change carousel library in order to work with jitera-fe --- example/yarn.lock | 10 ++- package.json | 7 +- src/components/atoms/Icon/Component.tsx | 8 +- .../molecules/Carousel/Component.tsx | 74 ++++++++----------- yarn.lock | 72 ++---------------- 5 files changed, 54 insertions(+), 117 deletions(-) diff --git a/example/yarn.lock b/example/yarn.lock index a9a7fac..2c074ae 100644 --- a/example/yarn.lock +++ b/example/yarn.lock @@ -1037,6 +1037,7 @@ react-native-size-matters "^0.4.0" react-native-snap-carousel "^3.9.1" react-native-vector-icons "^9.0.0" + react-native-web-swiper "^2.2.2" "@nodelib/fs.scandir@2.1.5": version "2.1.5" @@ -5678,7 +5679,7 @@ prompts@^2.0.1, prompts@^2.4.0: kleur "^3.0.3" sisteransi "^1.0.5" -prop-types@^15.6.1, prop-types@^15.7.2: +prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2: version "15.8.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== @@ -5815,6 +5816,13 @@ react-native-vector-icons@^9.0.0: prop-types "^15.7.2" yargs "^16.1.1" +react-native-web-swiper@^2.2.2: + version "2.2.2" + resolved "https://registry.yarnpkg.com/react-native-web-swiper/-/react-native-web-swiper-2.2.2.tgz#5a3bf2df3b1d692d81d9ab5e57609b399d2f7eeb" + integrity sha512-w3ZcJAulo8FmGpLJ3OA+0ZctHpZR4JLL9Rv7kVLeA3JSTIPoJZZA5MVdWksIXy6MUT2UbBVCZYTzSK7mE+x9/g== + dependencies: + prop-types "^15.6.2" + react-native-webview@^11.17.0: version "11.17.0" resolved "https://registry.yarnpkg.com/react-native-webview/-/react-native-webview-11.17.0.tgz#318ee8314662866148ca2b8db07549038e1c0c64" diff --git a/package.json b/package.json index 6224656..4523c36 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@jitera/jitera-rn-ui-library", - "version": "0.0.13-alpha", + "version": "0.0.14-alpha", "description": "atoms and component for rn template project and web", "main": "lib/commonjs/index", "module": "lib/module/index", @@ -57,7 +57,6 @@ "@types/jest": "^26.0.0", "@types/react": "^16.9.19", "@types/react-native": "0.62.13", - "@types/react-native-snap-carousel": "^3.8.5", "babel-loader": "^8.2.3", "commitlint": "^11.0.0", "eslint": "^7.2.0", @@ -168,8 +167,8 @@ "react-native-fast-image": "^8.5.11", "react-native-safe-area-context": "^3.3.2", "react-native-size-matters": "^0.4.0", - "react-native-snap-carousel": "^3.9.1", - "react-native-vector-icons": "^9.0.0" + "react-native-vector-icons": "^9.0.0", + "react-native-web-swiper": "^2.2.2" }, "directories": { "example": "example", diff --git a/src/components/atoms/Icon/Component.tsx b/src/components/atoms/Icon/Component.tsx index 48d3a0f..69f63b3 100644 --- a/src/components/atoms/Icon/Component.tsx +++ b/src/components/atoms/Icon/Component.tsx @@ -1,5 +1,5 @@ import React, { FunctionComponent, forwardRef } from 'react'; -import { StyleSheet, View } from 'react-native'; +import { StyleSheet, Text } from 'react-native'; import type { IconProps as VectorIconProps } from 'react-native-vector-icons'; import getIconType from './getIconType'; import getIconStyle from './getIconStyle'; @@ -37,17 +37,17 @@ const Icon: FunctionComponent = forwardRef( const iconSpecificStyle = getIconStyle(type, {}); return ( - + - + ); } ); diff --git a/src/components/molecules/Carousel/Component.tsx b/src/components/molecules/Carousel/Component.tsx index af2bf92..2f2f110 100644 --- a/src/components/molecules/Carousel/Component.tsx +++ b/src/components/molecules/Carousel/Component.tsx @@ -1,4 +1,4 @@ -import React, { forwardRef, FC, useCallback, useState } from 'react'; +import React, { forwardRef, FC } from 'react'; import { View, Image, @@ -6,72 +6,58 @@ import { StyleSheet, ImageSourcePropType, StyleProp, - LayoutChangeEvent, } from 'react-native'; import type { PropsWithRef } from '../../../type'; -import SCarousel, { - CarouselProps as SCarouselProps, - Pagination, -} from 'react-native-snap-carousel'; +import Swiper, { SwiperProps } from 'react-native-web-swiper'; export type CarouselProps = PropsWithRef< - Omit, 'renderItem'> & { + SwiperProps & { + data: ImageSourcePropType[]; style?: StyleProp; } >; const Carousel: FC = forwardRef( ({ data, style = {}, ...props }, ref) => { - const [sliderWidth, setSliderWidth] = useState(1); - const [activeSlide, setActiveSlide] = useState(0); - - const renderItem = useCallback( - ({ item }) => ( - - ), - [] - ); - - const onLayout = useCallback((event: LayoutChangeEvent) => { - const { width } = event.nativeEvent.layout; - setSliderWidth(width); - }, []); - return ( - - + setActiveSlide(index)} - data={data} - renderItem={renderItem} - /> - + > + {data.map((source, i) => ( + + + + ))} + ); } ); const styles = StyleSheet.create({ + container: { + flex: 1, + }, + slideContainer: { + flex: 1, + }, imageItem: { width: '100%', height: '100%', }, - dotStyle: { - width: 10, - height: 10, - borderRadius: 5, - marginHorizontal: 8, - backgroundColor: '#000000', - }, }); Carousel.displayName = 'Carousel'; diff --git a/yarn.lock b/yarn.lock index 3e50f2f..5b0a250 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1986,21 +1986,6 @@ resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11" integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ== -"@types/react-native-snap-carousel@^3.8.5": - version "3.8.5" - resolved "https://registry.yarnpkg.com/@types/react-native-snap-carousel/-/react-native-snap-carousel-3.8.5.tgz#5b3cb208119e3599d5537b5fc83653a155c6275d" - integrity sha512-EMBwQo/om2HZM/J6u8Bvz7i0BEO/v6frrpmlvUQ579CMsgYQPlYzQ1ne4KDdRq08+yDSG8/8AwIi1R+185ROsg== - dependencies: - "@types/react" "*" - "@types/react-native" "*" - -"@types/react-native@*": - version "0.66.13" - resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.66.13.tgz#90f0c828c6267af8648649f90c02c92fbb596d68" - integrity sha512-Yp8hiCvez9HdaSNx1xKMog8uzXEugk47nmfWvXLnyERchjcnaF4VZwi9NmZMU5ETrx7apN+aynBdC+64JM9o2g== - dependencies: - "@types/react" "*" - "@types/react-native@0.62.13": version "0.62.13" resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.62.13.tgz#c688c5ae03e426f927f7e1fa1a59cd067f35d1c2" @@ -3438,11 +3423,6 @@ core-js-compat@^3.16.0, core-js-compat@^3.16.2: browserslist "^4.17.3" semver "7.0.0" -core-js@^1.0.0: - version "1.2.7" - resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636" - integrity sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY= - core-js@^2.4.1: version "2.6.12" resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec" @@ -4375,19 +4355,6 @@ fbjs-scripts@^1.1.0: semver "^5.1.0" through2 "^2.0.0" -fbjs@^0.8.4: - version "0.8.18" - resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.18.tgz#9835e0addb9aca2eff53295cd79ca1cfc7c9662a" - integrity sha512-EQaWFK+fEPSoibjNy8IxUtaFOMXcWsY0JaVrQoZR9zC8N2Ygf9iDITPWjUTVIax95b6I742JFLqASHfsag/vKA== - dependencies: - core-js "^1.0.0" - isomorphic-fetch "^2.1.1" - loose-envify "^1.0.0" - object-assign "^4.1.0" - promise "^7.1.1" - setimmediate "^1.0.5" - ua-parser-js "^0.7.30" - fbjs@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-1.0.0.tgz#52c215e0883a3c86af2a7a776ed51525ae8e0a5a" @@ -7774,15 +7741,6 @@ prompts@^2.0.1, prompts@^2.4.0: kleur "^3.0.3" sisteransi "^1.0.5" -prop-types@^15.6.1: - version "15.8.1" - resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" - integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== - dependencies: - loose-envify "^1.4.0" - object-assign "^4.1.1" - react-is "^16.13.1" - prop-types@^15.6.2, prop-types@^15.7.2: version "15.7.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" @@ -7879,14 +7837,6 @@ rc@^1.2.8: minimist "^1.2.0" strip-json-comments "~2.0.1" -react-addons-shallow-compare@15.6.2: - version "15.6.2" - resolved "https://registry.yarnpkg.com/react-addons-shallow-compare/-/react-addons-shallow-compare-15.6.2.tgz#198a00b91fc37623db64a28fd17b596ba362702f" - integrity sha1-GYoAuR/DdiPbZKKP0XtZa6NicC8= - dependencies: - fbjs "^0.8.4" - object-assign "^4.1.0" - react-devtools-core@^4.6.0: version "4.20.1" resolved "https://registry.yarnpkg.com/react-devtools-core/-/react-devtools-core-4.20.1.tgz#77e8aacd93ca34cf908c11e6c72151b79217b618" @@ -7895,7 +7845,7 @@ react-devtools-core@^4.6.0: shell-quote "^1.6.1" ws "^7" -react-is@^16.12.0, react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4: +react-is@^16.12.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== @@ -7952,14 +7902,6 @@ react-native-size-matters@^0.4.0: resolved "https://registry.yarnpkg.com/react-native-size-matters/-/react-native-size-matters-0.4.0.tgz#01bfd0d59454318f4e0b13fe9c1eb0523d70f2e0" integrity sha512-8/C0htHrFWeUm9N8JegmadovUfgTWkGBkDPZ1N3YkXtDWb+98Ya2gThiKcu445r8c7YhcrBfnHz/mYsXIusaOQ== -react-native-snap-carousel@^3.9.1: - version "3.9.1" - resolved "https://registry.yarnpkg.com/react-native-snap-carousel/-/react-native-snap-carousel-3.9.1.tgz#6fd9bd8839546c2c6043a41d2035afbc6fe0443e" - integrity sha512-xWEGusacIgK1YaDXLi7Gao2+ISLoGPVEBR8fcMf4tOOJQufutlNwkoLu0l6B8Qgsrre0nTxoVZikRgGRDWlLaQ== - dependencies: - prop-types "^15.6.1" - react-addons-shallow-compare "15.6.2" - react-native-vector-icons@^9.0.0: version "9.0.0" resolved "https://registry.yarnpkg.com/react-native-vector-icons/-/react-native-vector-icons-9.0.0.tgz#ab38ec6941f3f340d39846f1e8300e59863e2fb1" @@ -7974,6 +7916,13 @@ react-native-vector-icons@^9.0.0: prop-types "^15.7.2" yargs "^16.1.1" +react-native-web-swiper@^2.2.2: + version "2.2.2" + resolved "https://registry.yarnpkg.com/react-native-web-swiper/-/react-native-web-swiper-2.2.2.tgz#5a3bf2df3b1d692d81d9ab5e57609b399d2f7eeb" + integrity sha512-w3ZcJAulo8FmGpLJ3OA+0ZctHpZR4JLL9Rv7kVLeA3JSTIPoJZZA5MVdWksIXy6MUT2UbBVCZYTzSK7mE+x9/g== + dependencies: + prop-types "^15.6.2" + react-native-webview@^11.17.0: version "11.17.0" resolved "https://registry.yarnpkg.com/react-native-webview/-/react-native-webview-11.17.0.tgz#318ee8314662866148ca2b8db07549038e1c0c64" @@ -9313,11 +9262,6 @@ ua-parser-js@^0.7.18: resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.28.tgz#8ba04e653f35ce210239c64661685bf9121dec31" integrity sha512-6Gurc1n//gjp9eQNXjD9O3M/sMwVtN5S8Lv9bvOYBfKfDNiIIhqiyi01vMBO45u4zkDE420w/e0se7Vs+sIg+g== -ua-parser-js@^0.7.30: - version "0.7.31" - resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.31.tgz#649a656b191dffab4f21d5e053e27ca17cbff5c6" - integrity sha512-qLK/Xe9E2uzmYI3qLeOmI0tEOt+TBBQyUIAh4aAgU05FVYzeZrKUdkAZfBNVGRaHVgV0TDkdEngJSw/SyQchkQ== - uglify-es@^3.1.9: version "3.3.9" resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.3.9.tgz#0c1c4f0700bed8dbc124cdb304d2592ca203e677"