Skip to content

Commit 67c1033

Browse files
patrycjakalinskapatrycjakalinska
committed
Replace dropdown
1 parent bdfa17d commit 67c1033

File tree

1 file changed

+61
-147
lines changed

1 file changed

+61
-147
lines changed

‎packages/docs-reanimated/src/examples/LayoutTransitions.tsx

Lines changed: 61 additions & 147 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState, useRef, useEffect } from 'react';
1+
import React, { useState, useRef, Dispatch } from 'react';
22
import {
33
View,
44
Text,
@@ -11,15 +11,9 @@ import Animated, {
1111
SequencedTransition,
1212
FadingTransition,
1313
FadeOut,
14-
useDerivedValue,
15-
withTiming,
16-
useSharedValue,
1714
JumpingTransition,
18-
useAnimatedStyle,
19-
withDelay,
2015
} from 'react-native-reanimated';
21-
22-
const DROPDOWN_OFFSET = 48;
16+
import { FormControl, MenuItem, Select } from '@mui/material';
2317

2418
const INITIAL_LIST = [
2519
{ id: 1, emoji: '🍌', color: '#b58df1' },
@@ -33,6 +27,11 @@ const INITIAL_LIST = [
3327
{ id: 9, emoji: '🍩', color: '#82cab2' },
3428
];
3529

30+
interface TRANSITION {
31+
label: string;
32+
value: any;
33+
}
34+
3635
const LAYOUT_TRANSITIONS = [
3736
{ label: 'Linear Transition', value: LinearTransition },
3837
{ label: 'Sequenced Transition', value: SequencedTransition },
@@ -46,150 +45,53 @@ const LAYOUT_TRANSITIONS = [
4645
// TODO: in the future Curved and Entry/Exit will be available on web, now they don't so we don't use them.
4746
];
4847

49-
const DropdownItems = ({ isExpanded, selected, setSelected }) => {
50-
const selectItem = (item) => {
51-
setSelected(item);
52-
isExpanded.value = !isExpanded.value;
53-
};
54-
return (
55-
<View>
56-
{LAYOUT_TRANSITIONS.filter((item) => item.label != selected.label).map(
57-
(transition) => (
58-
<TouchableOpacity
59-
style={dropdownStyles.item}
60-
onPress={() => selectItem(transition)}>
61-
<Text style={dropdownStyles.label}>{transition.label}</Text>
62-
</TouchableOpacity>
63-
)
64-
)}
65-
</View>
66-
);
67-
};
68-
69-
const DropdownItem = ({ isExpanded, children }) => {
70-
const height = useSharedValue(0);
71-
72-
const derivedHeight = useDerivedValue(() =>
73-
withTiming(height.value * Number(isExpanded.value), {
74-
duration: 500,
75-
})
76-
);
77-
const bodyStyle = useAnimatedStyle(() => ({
78-
height: derivedHeight.value,
79-
}));
48+
interface SelectProps {
49+
value: string;
50+
onChange: any;
51+
options: TRANSITION[];
52+
disabled?: boolean;
53+
disabledOptions?: string[];
54+
}
8055

81-
return (
82-
<Animated.View style={[styles.animatedView, bodyStyle]}>
83-
<View
84-
onLayout={(e) => {
85-
height.value = e.nativeEvent.layout.height;
86-
}}
87-
style={styles.wrapper}>
88-
{children}
89-
</View>
90-
</Animated.View>
91-
);
56+
const SelectStyling = {
57+
fontSize: 14,
58+
color: 'text.secondary',
59+
backgroundColor: 'background.default',
60+
borderRadius: 0,
61+
'& fieldset': {
62+
borderColor: 'text.secondary',
63+
},
9264
};
9365

94-
const DropdownParent = ({ selected, setSelected, isExpanded }) => {
66+
export function SelectOption({
67+
value,
68+
onChange,
69+
options,
70+
disabled,
71+
disabledOptions,
72+
}: SelectProps) {
9573
return (
96-
<View>
97-
<DropdownItem isExpanded={isExpanded}>
98-
<DropdownItems
99-
setSelected={setSelected}
100-
selected={selected}
101-
isExpanded={isExpanded}
102-
/>
103-
</DropdownItem>
74+
<View style={{ width: '30%' }}>
75+
<FormControl sx={{ minWidth: 85 }} size="small">
76+
<Select
77+
value={value}
78+
sx={SelectStyling}
79+
onChange={(e) => onChange(e.target)}
80+
disabled={disabled}>
81+
{options.map((option) => (
82+
<MenuItem
83+
key={option.label}
84+
value={option.value}
85+
disabled={disabledOptions?.includes(option.label)}
86+
sx={{ color: 'text.secondary' }}>
87+
{option.label}
88+
</MenuItem>
89+
))}
90+
</Select>
91+
</FormControl>
10492
</View>
10593
);
106-
};
107-
108-
const Dropdown = ({ selected, onSelect }) => {
109-
const isExpanded = useSharedValue(false);
110-
const onPress = () => {
111-
isExpanded.value = !isExpanded.value;
112-
};
113-
const labelRef = useRef();
114-
115-
const dropdownBackgroundAnimatedStyles = useAnimatedStyle(() => {
116-
const colorValue = isExpanded.value ? '#c1c6e5' : '#eef0ff';
117-
return {
118-
backgroundColor: withDelay(50, withTiming(colorValue)),
119-
};
120-
});
121-
122-
const dropdownListAnimatedStyles = useAnimatedStyle(() => {
123-
const paddingValue = isExpanded.value ? 8 : 0;
124-
return {
125-
paddingBottom: withDelay(50, withTiming(paddingValue)),
126-
};
127-
});
128-
129-
return (
130-
<View style={dropdownStyles.container}>
131-
<TouchableOpacity ref={labelRef} onPress={onPress}>
132-
<Animated.Text
133-
style={[
134-
dropdownBackgroundAnimatedStyles,
135-
dropdownStyles.selectedLabel,
136-
dropdownStyles.label,
137-
]}>
138-
{selected.label}
139-
</Animated.Text>
140-
</TouchableOpacity>
141-
142-
<Animated.View
143-
style={[
144-
{
145-
top: labelRef.current
146-
? labelRef.current.offsetHeight
147-
: DROPDOWN_OFFSET,
148-
},
149-
dropdownStyles.items,
150-
dropdownBackgroundAnimatedStyles,
151-
dropdownListAnimatedStyles,
152-
]}>
153-
<DropdownParent
154-
selected={selected}
155-
isExpanded={isExpanded}
156-
setSelected={onSelect}
157-
/>
158-
</Animated.View>
159-
</View>
160-
);
161-
};
162-
163-
const dropdownStyles = StyleSheet.create({
164-
container: {
165-
display: 'flex',
166-
flexDirection: 'row',
167-
justifyContent: 'center',
168-
zIndex: 2,
169-
position: 'relative',
170-
marginBottom: 8,
171-
},
172-
items: {
173-
flexDirection: 'column',
174-
position: 'absolute',
175-
minWidth: 300,
176-
zIndex: -1,
177-
},
178-
item: {
179-
margin: 8,
180-
},
181-
label: {
182-
fontFamily: 'Aeonik',
183-
color: '#001a72',
184-
fontSize: 16,
185-
textAlign: 'center',
186-
},
187-
selectedLabel: {
188-
fontWeight: '500',
189-
padding: 16,
190-
minWidth: 300,
191-
},
192-
});
94+
}
19395

19496
export default function App() {
19597
const [items, setItems] = useState(INITIAL_LIST);
@@ -207,7 +109,13 @@ export default function App() {
207109

208110
return (
209111
<SafeAreaView style={styles.container}>
210-
<Dropdown selected={selected} onSelect={onSelect} />
112+
<View style={styles.dropdownContainer}>
113+
<SelectOption
114+
value={selected.value}
115+
onChange={onSelect}
116+
options={LAYOUT_TRANSITIONS}
117+
/>
118+
</View>
211119
<View>
212120
<Items selected={selected} items={items} onRemove={removeItem} />
213121
</View>
@@ -254,6 +162,12 @@ const styles = StyleSheet.create({
254162
justifyContent: 'center',
255163
paddingHorizontal: 32,
256164
},
165+
dropdownContainer: {
166+
display: 'flex',
167+
justifyContent: 'center',
168+
alignItems: 'center',
169+
marginBottom: 16,
170+
},
257171
tileContainer: {
258172
width: '20%',
259173
margin: '1%',

0 commit comments

Comments
 (0)