Skip to content

Commit 6761028

Browse files
imdevanimdevan
authored
Merge pull request #1 from imdevan/update-example-app
2 parents 9205a27 + 940d151 commit 6761028

File tree

1 file changed

+65
-83
lines changed

1 file changed

+65
-83
lines changed

‎examples/App.tsx‎

Lines changed: 65 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import React, { JSX } from 'react';
2-
import { StyleSheet, Text, View } from 'react-native';
1+
import React, { JSX, useState } from 'react';
2+
import { StyleSheet, Text, View, useColorScheme } from 'react-native';
33
import DropDownPicker, { ItemType } from 'react-native-dropdown-picker';
44
import JavascriptClassExample from './example-src-files/javascript-class-example';
55
import JavascriptFunctionExample from './example-src-files/javascript-function-example';
@@ -19,15 +19,19 @@ enum ExampleComponent {
1919
}
2020

2121
const styles = StyleSheet.create({
22-
container: {
22+
page: {
2323
flex: 1,
24-
// backgroundColor: "#fff",
25-
// alignItems: "center",
26-
// justifyContent: "center",
24+
justifyContent: 'center',
25+
alignItems: 'center',
26+
width: '100%',
27+
height: '100%',
28+
},
29+
container: {
2730
flexDirection: 'column',
28-
margin: 3,
31+
margin: 'auto',
2932
marginTop: 20,
3033
padding: 3,
34+
maxWidth: 400,
3135
},
3236
});
3337

@@ -66,98 +70,76 @@ const EXAMPLE_COMPONENT_ITEMS: Array<ItemType<ExampleComponent>> = [
6670
},
6771
];
6872

69-
type Props = Record<string, never>;
70-
71-
interface State {
72-
currentExample: ExampleComponent;
73-
examplePickerOpen: boolean;
74-
exampleComponents: Array<ItemType<ExampleComponent>>;
75-
}
76-
77-
export default class App extends React.Component<Props, State> {
78-
constructor(props: Readonly<Props>) {
79-
super(props);
80-
this.state = {
81-
currentExample: ExampleComponent.JavaScriptClassSingleValue,
82-
exampleComponents: EXAMPLE_COMPONENT_ITEMS,
83-
examplePickerOpen: false,
84-
};
85-
86-
this.setOpen = this.setOpen.bind(this);
87-
this.setCurrentExample = this.setCurrentExample.bind(this);
88-
}
89-
90-
private static getExample(egComponent: ExampleComponent): JSX.Element {
91-
switch (egComponent) {
92-
case ExampleComponent.JavaScriptClassSingleValue:
93-
return <JavascriptClassExample multiple={false} />;
94-
case ExampleComponent.JavaScriptClassMultiValue:
95-
return <JavascriptClassExample multiple />;
96-
case ExampleComponent.JavaScriptFunctionSingleValue:
97-
return <JavascriptFunctionExample multiple={false} />;
98-
case ExampleComponent.JavaScriptFunctionMultiValue:
99-
return <JavascriptFunctionExample multiple />;
100-
case ExampleComponent.TypeScriptClassSingleValue:
101-
return <TypescriptClassExample multiple={false} />;
102-
case ExampleComponent.TypeScriptClassMultiValue:
103-
return <TypescriptClassExample multiple />;
104-
case ExampleComponent.TypeScriptFunctionSingleValue:
105-
return <TypescriptFunctionExample multiple={false} />;
106-
case ExampleComponent.TypeScriptFunctionMultiValue:
107-
return <TypescriptFunctionExample multiple />;
108-
default:
109-
throw new Error(
110-
"couldn't match example component in getExample() in App.tsx. egComponent was: ",
111-
egComponent,
112-
);
113-
}
73+
const getExample = (egComponent: ExampleComponent): JSX.Element => {
74+
switch (egComponent) {
75+
case ExampleComponent.JavaScriptClassSingleValue:
76+
return <JavascriptClassExample multiple={false} />;
77+
case ExampleComponent.JavaScriptClassMultiValue:
78+
return <JavascriptClassExample multiple />;
79+
case ExampleComponent.JavaScriptFunctionSingleValue:
80+
return <JavascriptFunctionExample multiple={false} />;
81+
case ExampleComponent.JavaScriptFunctionMultiValue:
82+
return <JavascriptFunctionExample multiple />;
83+
case ExampleComponent.TypeScriptClassSingleValue:
84+
return <TypescriptClassExample multiple={false} />;
85+
case ExampleComponent.TypeScriptClassMultiValue:
86+
return <TypescriptClassExample multiple />;
87+
case ExampleComponent.TypeScriptFunctionSingleValue:
88+
return <TypescriptFunctionExample multiple={false} />;
89+
case ExampleComponent.TypeScriptFunctionMultiValue:
90+
return <TypescriptFunctionExample multiple />;
91+
default:
92+
throw new Error(
93+
"couldn't match example component in getExample() in App.tsx. egComponent was: ",
94+
egComponent,
95+
);
11496
}
115-
116-
setOpen(examplePickerOpen: boolean): void {
117-
this.setState({ examplePickerOpen });
118-
}
119-
120-
setCurrentExample(
121-
callback: (prevState: ExampleComponent | null) => ExampleComponent | null,
122-
): void {
123-
this.setState((state: Readonly<State>) => ({
124-
currentExample: callback(state.currentExample),
125-
}));
126-
}
127-
128-
// todo: fix picker items being under text
129-
130-
render(): JSX.Element {
131-
const { currentExample, examplePickerOpen, exampleComponents } = this.state;
132-
133-
return (
134-
<GestureHandlerRootView style={{ flex: 1 }}>
97+
};
98+
99+
export default function App(): JSX.Element {
100+
const [currentExample, setCurrentExample] = useState<ExampleComponent>(
101+
ExampleComponent.JavaScriptClassSingleValue
102+
);
103+
const [examplePickerOpen, setOpen] = useState<boolean>(false);
104+
const [exampleComponents] = useState<Array<ItemType<ExampleComponent>>>(
105+
EXAMPLE_COMPONENT_ITEMS
106+
);
107+
108+
const colorScheme = useColorScheme();
109+
const backgroundColor = colorScheme === 'dark' ? '#222' : '#fff';
110+
111+
return (
112+
<GestureHandlerRootView style={{ flex: 1 }}>
113+
<View style={{
114+
...styles.page,
115+
backgroundColor,
116+
}}>
135117
<View style={styles.container}>
136-
<View style={{ flex: 1 }}>
137-
<View style={{ flex: 1 }}>
118+
<View style={{ marginBottom: 32 }}>
119+
<View style={{ marginBottom: 32 }}>
138120
<Text>Choose example:</Text>
139121
</View>
140122

141-
<View style={{ flex: 1 }}>
123+
<View style={{ marginBottom: 32 }}>
142124
<DropDownPicker
143-
setValue={this.setCurrentExample}
125+
setValue={setCurrentExample}
144126
value={currentExample}
145127
items={exampleComponents}
146128
open={examplePickerOpen}
147-
setOpen={this.setOpen}
129+
setOpen={setOpen}
148130
/>
149131
</View>
150132
</View>
151133

152-
<View style={{ flex: 3 }}>
153-
<View style={{ flex: 1 }}>
134+
<View style={{ marginBottom: 32 }}>
135+
<View style={{ marginBottom: 32 }}>
154136
<Text>Example:</Text>
155137
</View>
156138

157-
{App.getExample(currentExample)}
139+
{getExample(currentExample)}
158140
</View>
159141
</View>
160-
</GestureHandlerRootView>
161-
);
162-
}
142+
</View>
143+
</GestureHandlerRootView>
144+
);
163145
}

0 commit comments

Comments
 (0)