Skip to content

Commit 4ffdd82

Browse files
RichardRNStudioRichardRNStudio
authored
Merge pull request #11 from RichardRNStudio/chore/refactor-structure
chore(refactor-structure): structure refactor to use typescript fully
2 parents 9c26a3f + 48bc226 commit 4ffdd82

20 files changed

+179
-171
lines changed

‎example/src/CustomRenderFunctionExample.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { IItem } from 'interfaces/IItem.interface';
1+
import type { IItem } from '../../src/interfaces/IItem.interface';
22
import React from 'react';
33
import {
44
StyleSheet,

‎example/src/ReactNavigationExample.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
// IMPORTANT: Install the react-navigation with its dependencies and create a NavigationContainer around this component for run this component.
44
// Now this component cannot be run, it's just an example code.
55
import { useFocusEffect } from '@react-navigation/native';
6-
import type { ISlide } from 'interfaces/ISlide.interface';
6+
import type { ISlide } from '../../src/interfaces/ISlide.interface';
77
import React from 'react';
88
import { BackHandler } from 'react-native';
99
import SliderIntro from 'react-native-slider-intro';

‎example/src/UsingThirdPartyLibrariesExample.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import {
1717
} from '@fortawesome/free-solid-svg-icons';
1818
import LinearGradient from 'expo-linear-gradient';
1919
import { createShimmerPlaceholder } from 'react-native-shimmer-placeholder';
20-
import type { IItem } from 'interfaces/IItem.interface';
20+
import type { IItem } from '../../src/interfaces/IItem.interface';
2121

2222
const ShimmerPlaceHolder = createShimmerPlaceholder(LinearGradient as any);
2323

‎src/components/Item.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
TouchableOpacity,
88
View,
99
} from 'react-native';
10-
import type { IItem } from 'interfaces/IItem.interface';
10+
import type { IItem } from '../interfaces/IItem.interface';
1111
import React from 'react';
1212

1313
const styles = StyleSheet.create({

‎src/components/SliderIntro.tsx‎

Lines changed: 0 additions & 68 deletions
This file was deleted.

‎src/components/SliderProvider.tsx‎

Lines changed: 7 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,20 @@
11
/* eslint-disable no-void */
22
/* eslint-disable react-hooks/rules-of-hooks */
33
/* eslint-disable react-hooks/exhaustive-deps */
4-
import React from 'react';
5-
import type { ISlide } from 'interfaces/ISlide.interface';
6-
import type {
7-
ISliderContextProps,
8-
ISliderProviderProps,
9-
} from 'interfaces/ISliderProvider.interface';
10-
import { createContext, useEffect, useState } from 'react';
4+
import React, { createContext, useEffect, useState } from 'react';
115
import {
126
Animated,
137
BackHandler,
148
Dimensions,
159
PanResponder,
1610
type PanResponderInstance,
1711
} from 'react-native';
18-
import type { ISliderIntro } from 'interfaces/ISliderIntro.interface';
19-
import type { IItem } from 'interfaces/IItem.interface';
20-
import Item from './Item';
21-
import StatusBarContainer from './StatusBarContainer';
22-
import Button from './Button';
23-
24-
export const defaultProps: ISliderIntro = {
25-
data: [],
26-
renderItem: (item: IItem) => {
27-
const {
28-
index,
29-
title,
30-
text,
31-
image,
32-
backgroundColor,
33-
activeLanguage,
34-
link,
35-
slideMaxHeightPercent,
36-
} = item;
37-
return (
38-
<Item
39-
key={index}
40-
index={index}
41-
title={title}
42-
text={text}
43-
image={image}
44-
backgroundColor={backgroundColor}
45-
activeLanguage={activeLanguage}
46-
link={link}
47-
slideMaxHeightPercent={slideMaxHeightPercent}
48-
/>
49-
);
50-
},
51-
navigationBarBottom: 0,
52-
navigationBarHeight: 70,
53-
animateSlideSpeed: 15,
54-
navContainerMaxSizePercent: 0.5,
55-
dotWidth: 12,
56-
fixDotOpacity: 0.35,
57-
fixDotBackgroundColor: 'grey',
58-
animatedDotBackgroundColor: 'white',
59-
animateDotSpeed: 8,
60-
animateDotBouncing: 2,
61-
backHandlerBehaviour: 'activeMinusOne',
62-
hasReactNavigation: false,
63-
useCustomBackHandlerEffect: () => {},
64-
skipLabel: 'Skip',
65-
nextLabel: 'Next',
66-
doneLabel: 'Done',
67-
renderSkipButton: (skipLabel: string | undefined) => (
68-
<Button label={skipLabel} type="skip" />
69-
),
70-
renderNextButton: (nextLabel: string | undefined) => (
71-
<Button label={nextLabel} type="next" />
72-
),
73-
renderDoneButton: (doneLabel: string | undefined) => (
74-
<Button label={doneLabel} type="done" />
75-
),
76-
onDone: () => {},
77-
onSkip: () => {},
78-
showLeftButton: true,
79-
leftButtonType: 'skip',
80-
columnButtonStyle: false,
81-
showStatusBar: false,
82-
statusBarColor: '#febe29',
83-
renderStatusBar: (backgroundColor: string) => (
84-
<StatusBarContainer backgroundColor={backgroundColor} />
85-
),
86-
};
12+
import defaultProps from '../defaultProps';
13+
import type { ISlide } from '../interfaces/ISlide.interface';
14+
import type {
15+
ISliderContextProps,
16+
ISliderProviderProps,
17+
} from '../interfaces/ISliderProvider.interface';
8718

8819
const defaultSlideState: ISlide = {
8920
active: 0,

‎src/components/StatusBarContainer.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Platform, StatusBar, StyleSheet, View } from 'react-native';
2-
import type { IStatusBar } from 'interfaces/IStatusBar.interface';
2+
import type { IStatusBar } from '../interfaces/IStatusBar.interface';
33
import React from 'react';
44

55
const styles = StyleSheet.create({

‎src/defaultProps.tsx‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import React from 'react';
2+
import Item from './components/Item';
3+
import StatusBarContainer from './components/StatusBarContainer';
4+
import type { IItem } from './interfaces/IItem.interface';
5+
import type { ISliderIntro } from './interfaces/ISliderIntro.interface';
6+
import Button from './components/Button';
7+
import type { ColorValue } from 'react-native';
8+
9+
const defaultProps: ISliderIntro = {
10+
data: [],
11+
renderItem: (item: IItem) => {
12+
const {
13+
index,
14+
title,
15+
text,
16+
image,
17+
backgroundColor,
18+
activeLanguage,
19+
link,
20+
slideMaxHeightPercent,
21+
} = item;
22+
return (
23+
<Item
24+
key={index}
25+
index={index}
26+
title={title}
27+
text={text}
28+
image={image}
29+
backgroundColor={backgroundColor}
30+
activeLanguage={activeLanguage}
31+
link={link}
32+
slideMaxHeightPercent={slideMaxHeightPercent}
33+
/>
34+
);
35+
},
36+
navigationBarBottom: 0,
37+
navigationBarHeight: 70,
38+
animateSlideSpeed: 15,
39+
navContainerMaxSizePercent: 0.5,
40+
dotWidth: 12,
41+
fixDotOpacity: 0.35,
42+
fixDotBackgroundColor: 'grey',
43+
animatedDotBackgroundColor: 'white',
44+
animateDotSpeed: 8,
45+
animateDotBouncing: 2,
46+
backHandlerBehaviour: 'activeMinusOne',
47+
hasReactNavigation: false,
48+
useCustomBackHandlerEffect: () => {},
49+
skipLabel: 'Skip',
50+
nextLabel: 'Next',
51+
doneLabel: 'Done',
52+
renderSkipButton: (skipLabel: string | undefined) => (
53+
<Button label={skipLabel} type="skip" />
54+
),
55+
renderNextButton: (nextLabel: string | undefined) => (
56+
<Button label={nextLabel} type="next" />
57+
),
58+
renderDoneButton: (doneLabel: string | undefined) => (
59+
<Button label={doneLabel} type="done" />
60+
),
61+
onDone: () => {},
62+
onSkip: () => {},
63+
showLeftButton: true,
64+
leftButtonType: 'skip',
65+
columnButtonStyle: false,
66+
showStatusBar: false,
67+
statusBarColor: '#febe29',
68+
renderStatusBar: (backgroundColor: ColorValue) => (
69+
<StatusBarContainer backgroundColor={backgroundColor} />
70+
),
71+
};
72+
73+
export default defaultProps;

‎src/index.tsx‎

Lines changed: 69 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,69 @@
1-
import SliderIntro from './components/SliderIntro';
2-
export * from './interfaces/index.d';
3-
export default SliderIntro;
1+
import React, { useContext } from 'react';
2+
import { Animated, Dimensions, StyleSheet, View } from 'react-native';
3+
import Navigation from './components/Navigation';
4+
import SliderProvider, { SliderContext } from './components/SliderProvider';
5+
import defaultProps from './defaultProps';
6+
import type { IItem } from './interfaces/IItem.interface';
7+
import type { ISliderIntro } from './interfaces/ISliderIntro.interface';
8+
9+
const styles = StyleSheet.create({
10+
container: {
11+
flex: 1,
12+
flexDirection: 'row',
13+
},
14+
});
15+
16+
const deviceMaxWidth = Dimensions.get('window').width;
17+
18+
const SliderIntroContainer = () => {
19+
const {
20+
showStatusBar,
21+
renderStatusBar,
22+
statusBarColor,
23+
panResponderState,
24+
data,
25+
renderItem,
26+
animations: { _moveSlideX },
27+
numberOfSlides,
28+
} = useContext(SliderContext);
29+
const [panResponder] = panResponderState;
30+
return (
31+
<>
32+
{showStatusBar && renderStatusBar(statusBarColor)}
33+
<Animated.View
34+
style={[
35+
styles.container,
36+
{
37+
maxWidth: numberOfSlides * deviceMaxWidth,
38+
marginLeft: _moveSlideX,
39+
},
40+
]}
41+
{...panResponder.panHandlers}
42+
>
43+
{data.map((item: IItem, index: number) => {
44+
return (
45+
<View
46+
key={index}
47+
style={{
48+
width: deviceMaxWidth,
49+
}}
50+
>
51+
{renderItem(item)}
52+
</View>
53+
);
54+
})}
55+
</Animated.View>
56+
<Navigation />
57+
</>
58+
);
59+
};
60+
61+
export default function SliderIntro(props: ISliderIntro) {
62+
return (
63+
<SliderProvider {...props}>
64+
<SliderIntroContainer />
65+
</SliderProvider>
66+
);
67+
}
68+
69+
SliderIntro.defaultProps = defaultProps;

src/interfaces/IAnimatedValues.interface.tsx renamed to src/interfaces/IAnimatedValues.interface.ts

File renamed without changes.

0 commit comments

Comments
 (0)