Skip to content

Commit

Permalink
sdp-tech#77 feat: add toggle component
Browse files Browse the repository at this point in the history
  • Loading branch information
eujin-shin committed Jul 6, 2024
1 parent 6cb3963 commit d85058f
Show file tree
Hide file tree
Showing 3 changed files with 86 additions and 4 deletions.
75 changes: 75 additions & 0 deletions src/common/Toggle.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
import { Dispatch, SetStateAction, useEffect, useRef } from 'react';
import {
Animated,
StyleSheet,
Touchable,
TouchableOpacity,
TouchableWithoutFeedback,
View,
} from 'react-native';
import { PURPLE, PURPLE2 } from '../styles/GlobalColor';

const Toggle = ({
isOn,
setIsOn,
}: {
isOn: boolean;
setIsOn: Dispatch<SetStateAction<boolean>>;
}) => {
const X_COORD_OFF = 0;
const X_COORD_ON = 24;
const ANIMATION_DURATION = 500;

const animationXTrans = useRef(new Animated.Value(0)).current;

const handlePress = () => {
setIsOn(prev => !prev);
};

useEffect(() => {
console.log('animation on');
Animated.timing(animationXTrans, {
toValue: isOn ? X_COORD_ON : X_COORD_OFF,
duration: ANIMATION_DURATION,
useNativeDriver: true,
}).start();
}, [animationXTrans, isOn]);

return (
<View>
<TouchableWithoutFeedback onPress={handlePress}>
<View
style={{
backgroundColor: isOn ? PURPLE : PURPLE2,
...Styles.container,
}}>
<Animated.View
style={{
transform: [{ translateX: animationXTrans }],
...Styles.button,
}}
/>
</View>
</TouchableWithoutFeedback>
</View>
);
};

const Styles = StyleSheet.create({
container: {
width: 50,
height: 26,
borderRadius: 100,
margin: 5,
justifyContent: 'center',
paddingHorizontal: 3,
},
button: {
width: 20,
height: 20,
borderRadius: 100,
backgroundColor: 'white',
},
});

export default Toggle;
1 change: 0 additions & 1 deletion src/components/Lookbook/LookbookAddButton.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { StyleSheet, TouchableOpacity, View } from 'react-native';
import PlusSquare from '../../assets/lookbook/plusSquare.svg';
import { Container } from 'react-native-collapsible-tab-view';

const LookbookAddButton = ({ onPress }: { onPress: () => void }) => {
return (
Expand Down
14 changes: 11 additions & 3 deletions src/pages/ComponentsTest.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import { SafeAreaView, TouchableOpacity, View } from 'react-native';
import Dropdown from '../common/Dropdown';
import { useState } from 'react';
import { Body16M } from '../styles/GlobalText';
import { Body16M, Title20B } from '../styles/GlobalText';
import LookbookButton from '../components/Lookbook/LookbookButton';
import LookbookAddButton from '../components/Lookbook/LookbookAddButton';
import TextToggle from '../common/TextToggle';
import Toggle from '../common/Toggle';

const TestDropdown = ({ index }: { index: number }) => {
const [value, setValue] = useState<string | undefined>(undefined);
Expand All @@ -21,13 +23,19 @@ const TestDropdown = ({ index }: { index: number }) => {
);
};

const TestToggle = () => {
const [isOn, setIsOn] = useState(true);
return <Toggle isOn={isOn} setIsOn={setIsOn} />;
};

export default function ComponentsTest() {
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={{ flex: 1 }}>
<Body16M>테스트용 페이지</Body16M>
<View style={{ flex: 1, padding: 20 }}>
<Title20B>룩북 컴포넌트</Title20B>
<LookbookButton />
<LookbookAddButton onPress={() => {}} />
<TestToggle />
</View>
</SafeAreaView>
);
Expand Down

0 comments on commit d85058f

Please sign in to comment.