Skip to content

Commit 78f2436

Browse files
kuraydevkuraydev
committed
chore: library is ready to test
1 parent 274bad1 commit 78f2436

5 files changed

Lines changed: 78 additions & 61 deletions

File tree

‎.husky/commit-msg‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
11
#!/bin/sh
22
. "$(dirname "$0")/_/husky.sh"
33

4-
npx --no-install commitlint --edit
5-
npx --no-install commitlint --edit
6-
npx --no-install commitlint --edit
7-
npx --no-install commitlint --edit
8-
npx --no-install commitlint --edit
4+
npx --no-install commitlint --edit

‎.husky/pre-commit‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
#!/bin/sh
22
. "$(dirname "$0")/_/husky.sh"
33

4-
npm test
54
npm run prettier

‎example/App.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,11 @@ const App = () => {
1313
backgroundColor: "#161918",
1414
}}
1515
>
16-
<ToggleButton onPress={() => {}} />
16+
<ToggleButton
17+
onPress={(value: boolean) => {
18+
console.log(value);
19+
}}
20+
/>
1721
</SafeAreaView>
1822
);
1923
};

‎example/lib/ToggleButton.tsx‎

Lines changed: 36 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {
44
Text,
55
StyleProp,
66
ViewStyle,
7+
TextStyle,
78
TouchableWithoutFeedback,
89
} from "react-native";
910
/**
@@ -13,14 +14,28 @@ import styles from "./ToggleButton.style";
1314
import useStateWithCallback from "./helpers/useStateWithCallback";
1415

1516
type CustomStyleProp = StyleProp<ViewStyle> | Array<StyleProp<ViewStyle>>;
17+
type CustomTextStyleProp = StyleProp<TextStyle> | Array<StyleProp<TextStyle>>;
1618

1719
interface IToggleButtonProps {
1820
style?: CustomStyleProp;
21+
activeButtonStyle?: CustomStyleProp;
22+
activeTextStyle?: CustomTextStyleProp;
23+
inactiveButtonStyle?: CustomStyleProp;
24+
inactiveTextStyle?: CustomTextStyleProp;
1925
backgroundColor?: string;
26+
TouchableComponent?: any;
2027
onPress: (isToggled: boolean) => void;
2128
}
2229

23-
const ToggleButton: React.FC<IToggleButtonProps> = ({ style, onPress }) => {
30+
const ToggleButton: React.FC<IToggleButtonProps> = ({
31+
style,
32+
activeButtonStyle,
33+
activeTextStyle,
34+
inactiveButtonStyle,
35+
inactiveTextStyle,
36+
TouchableComponent = TouchableWithoutFeedback,
37+
onPress,
38+
}) => {
2439
const [isToggled, setToggled] = useStateWithCallback<boolean>(false);
2540

2641
const handlePress = () => {
@@ -29,38 +44,32 @@ const ToggleButton: React.FC<IToggleButtonProps> = ({ style, onPress }) => {
2944
});
3045
};
3146

47+
const onToggleButtonStyle = isToggled
48+
? [styles.activeButtonStyle, activeButtonStyle]
49+
: [styles.inactiveButtonStyle, inactiveButtonStyle];
50+
const onToggleTextStyle = isToggled
51+
? [styles.activeTextStyle, activeTextStyle]
52+
: [styles.inactiveTextStyle, inactiveTextStyle];
53+
54+
const offToggleButtonStyle = !isToggled
55+
? [styles.activeButtonStyle, activeButtonStyle]
56+
: [styles.inactiveButtonStyle, inactiveButtonStyle];
57+
const offToggleTextStyle = !isToggled
58+
? [styles.activeTextStyle, activeTextStyle]
59+
: [styles.inactiveTextStyle, inactiveTextStyle];
60+
3261
return (
3362
<View style={[styles.container, style]}>
34-
<TouchableWithoutFeedback style={{}} onPress={handlePress}>
63+
<TouchableComponent style={{}} onPress={handlePress}>
3564
<View style={styles.containerGlue}>
36-
<View
37-
style={
38-
isToggled ? styles.activeButtonStyle : styles.inactiveButtonStyle
39-
}
40-
>
41-
<Text
42-
style={
43-
isToggled ? styles.activeTextStyle : styles.inactiveTextStyle
44-
}
45-
>
46-
On
47-
</Text>
65+
<View style={onToggleButtonStyle}>
66+
<Text style={onToggleTextStyle}>On</Text>
4867
</View>
49-
<View
50-
style={
51-
!isToggled ? styles.activeButtonStyle : styles.inactiveButtonStyle
52-
}
53-
>
54-
<Text
55-
style={
56-
!isToggled ? styles.activeTextStyle : styles.inactiveTextStyle
57-
}
58-
>
59-
Off
60-
</Text>
68+
<View style={offToggleButtonStyle}>
69+
<Text style={offToggleTextStyle}>Off</Text>
6170
</View>
6271
</View>
63-
</TouchableWithoutFeedback>
72+
</TouchableComponent>
6473
</View>
6574
);
6675
};

‎lib/ToggleButton.tsx‎

Lines changed: 36 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {
44
Text,
55
StyleProp,
66
ViewStyle,
7+
TextStyle,
78
TouchableWithoutFeedback,
89
} from "react-native";
910
/**
@@ -13,14 +14,28 @@ import styles from "./ToggleButton.style";
1314
import useStateWithCallback from "./helpers/useStateWithCallback";
1415

1516
type CustomStyleProp = StyleProp<ViewStyle> | Array<StyleProp<ViewStyle>>;
17+
type CustomTextStyleProp = StyleProp<TextStyle> | Array<StyleProp<TextStyle>>;
1618

1719
interface IToggleButtonProps {
1820
style?: CustomStyleProp;
21+
activeButtonStyle?: CustomStyleProp;
22+
activeTextStyle?: CustomTextStyleProp;
23+
inactiveButtonStyle?: CustomStyleProp;
24+
inactiveTextStyle?: CustomTextStyleProp;
1925
backgroundColor?: string;
26+
TouchableComponent?: any;
2027
onPress: (isToggled: boolean) => void;
2128
}
2229

23-
const ToggleButton: React.FC<IToggleButtonProps> = ({ style, onPress }) => {
30+
const ToggleButton: React.FC<IToggleButtonProps> = ({
31+
style,
32+
activeButtonStyle,
33+
activeTextStyle,
34+
inactiveButtonStyle,
35+
inactiveTextStyle,
36+
TouchableComponent = TouchableWithoutFeedback,
37+
onPress,
38+
}) => {
2439
const [isToggled, setToggled] = useStateWithCallback<boolean>(false);
2540

2641
const handlePress = () => {
@@ -29,38 +44,32 @@ const ToggleButton: React.FC<IToggleButtonProps> = ({ style, onPress }) => {
2944
});
3045
};
3146

47+
const onToggleButtonStyle = isToggled
48+
? [styles.activeButtonStyle, activeButtonStyle]
49+
: [styles.inactiveButtonStyle, inactiveButtonStyle];
50+
const onToggleTextStyle = isToggled
51+
? [styles.activeTextStyle, activeTextStyle]
52+
: [styles.inactiveTextStyle, inactiveTextStyle];
53+
54+
const offToggleButtonStyle = !isToggled
55+
? [styles.activeButtonStyle, activeButtonStyle]
56+
: [styles.inactiveButtonStyle, inactiveButtonStyle];
57+
const offToggleTextStyle = !isToggled
58+
? [styles.activeTextStyle, activeTextStyle]
59+
: [styles.inactiveTextStyle, inactiveTextStyle];
60+
3261
return (
3362
<View style={[styles.container, style]}>
34-
<TouchableWithoutFeedback style={{}} onPress={handlePress}>
63+
<TouchableComponent style={{}} onPress={handlePress}>
3564
<View style={styles.containerGlue}>
36-
<View
37-
style={
38-
isToggled ? styles.activeButtonStyle : styles.inactiveButtonStyle
39-
}
40-
>
41-
<Text
42-
style={
43-
isToggled ? styles.activeTextStyle : styles.inactiveTextStyle
44-
}
45-
>
46-
On
47-
</Text>
65+
<View style={onToggleButtonStyle}>
66+
<Text style={onToggleTextStyle}>On</Text>
4867
</View>
49-
<View
50-
style={
51-
!isToggled ? styles.activeButtonStyle : styles.inactiveButtonStyle
52-
}
53-
>
54-
<Text
55-
style={
56-
!isToggled ? styles.activeTextStyle : styles.inactiveTextStyle
57-
}
58-
>
59-
Off
60-
</Text>
68+
<View style={offToggleButtonStyle}>
69+
<Text style={offToggleTextStyle}>Off</Text>
6170
</View>
6271
</View>
63-
</TouchableWithoutFeedback>
72+
</TouchableComponent>
6473
</View>
6574
);
6675
};

0 commit comments

Comments
 (0)