Skip to content

Commit

Permalink
feat: change carousel library in order to work with jitera-fe
Browse files Browse the repository at this point in the history
  • Loading branch information
@justiniruuza
justiniruuza committed Jan 21, 2022
1 parent c9ca648 commit e258523
Show file tree
Hide file tree
Showing 5 changed files with 54 additions and 117 deletions.
10 changes: 9 additions & 1 deletion example/yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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==
Expand Down Expand Up @@ -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"
Expand Down
7 changes: 3 additions & 4 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -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",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
8 changes: 4 additions & 4 deletions src/components/atoms/Icon/Component.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -37,17 +37,17 @@ const Icon: FunctionComponent<IconProps> = forwardRef<any, IconProps>(
const iconSpecificStyle = getIconStyle(type, {});

return (
<View ref={ref} style={style}>
<Text ref={ref} style={style}>
<IconComponent
testID="iconIcon"
style={StyleSheet.flatten([styles.icon])}
style={styles.icon}
size={size}
name={name}
color={color}
{...iconSpecificStyle}
{...props}
/>
</View>
</Text>
);
}
);
Expand Down
74 changes: 30 additions & 44 deletions src/components/molecules/Carousel/Component.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,77 +1,63 @@
import React, { forwardRef, FC, useCallback, useState } from 'react';
import React, { forwardRef, FC } from 'react';
import {
View,
Image,
ViewStyle,
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<SCarouselProps<ImageSourcePropType>, 'renderItem'> & {
SwiperProps & {
data: ImageSourcePropType[];
style?: StyleProp<ViewStyle>;
}
>;

const Carousel: FC<CarouselProps> = forwardRef<any, CarouselProps>(
({ data, style = {}, ...props }, ref) => {
const [sliderWidth, setSliderWidth] = useState(1);
const [activeSlide, setActiveSlide] = useState(0);

const renderItem = useCallback(
({ item }) => (
<Image source={item} style={styles.imageItem} resizeMode="stretch" />
),
[]
);

const onLayout = useCallback((event: LayoutChangeEvent) => {
const { width } = event.nativeEvent.layout;
setSliderWidth(width);
}, []);

return (
<View ref={ref} style={style} onLayout={onLayout}>
<SCarousel
<View ref={ref} style={StyleSheet.flatten([styles.container, style])}>
<Swiper
loop
controlsProps={{
dotsTouchable: true,
prevPos: false,
nextPos: false,
...props?.controlsProps,
}}
{...props}
itemWidth={sliderWidth}
sliderWidth={sliderWidth}
onSnapToItem={(index) => setActiveSlide(index)}
data={data}
renderItem={renderItem}
/>
<Pagination
dotsLength={data.length}
activeDotIndex={activeSlide}
dotStyle={styles.dotStyle}
inactiveDotOpacity={0.4}
inactiveDotScale={0.6}
/>
>
{data.map((source, i) => (
<View key={i}>
<Image
source={source}
style={styles.imageItem}
resizeMode="stretch"
/>
</View>
))}
</Swiper>
</View>
);
}
);

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';
Expand Down
72 changes: 8 additions & 64 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand All @@ -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==
Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand Down Expand Up @@ -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"
Expand Down

0 comments on commit e258523

Please sign in to comment.