zoriya/expo-vector-icons
1
0
Fork 0
mirror of https://github.com/zoriya/expo-vector-icons.git synced 2025-12-06 06:36:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

A bit of cleanup

Browse Source
This commit is contained in:
Brent Vatne
2020-05-06 14:42:09 -07:00
parent 6c7f9e28b5
commit 9e703816a2
3 changed files with 121 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
website/App.js
View File

@@ -7,6 +7,12 @@ import List from "./screens/List";
import Detail from "./screens/Detail"; import Detail from "./screens/Detail";
import Help from "./screens/Help"; import Help from "./screens/Help";
const IsPwa = !!["fullscreen", "standalone", "minimal-ui"].some((displayMode) =>
window.matchMedia("(display-mode: " + displayMode + ")")
).matches;
const IsSmallScreen = Dimensions.get("window").width <= 900;
const ShowHeader = IsPwa || !IsSmallScreen;
const linking = { const linking = {
config: { config: {
Index: { Index: {
@@ -24,70 +30,48 @@ const linking = {
}; };
const BrowsingStack = createStackNavigator(); const BrowsingStack = createStackNavigator();
const IsPwa = !!["fullscreen", "standalone", "minimal-ui"].some((displayMode) =>
window.matchMedia("(display-mode: " + displayMode + ")")
).matches;
const IsSmallScreen = Dimensions.get("window").width <= 900;
const ShowHeader = IsPwa || !IsSmallScreen;
function Browsing() { function Browsing() {
return ( return (
<BrowsingStack.Navigator <BrowsingStack.Navigator
mode="modal" mode="modal"
headerMode={ShowHeader ? "float" : "none"} headerMode={ShowHeader ? "float" : "none"}
screenOptions={{
headerStyle: {
backgroundColor: "#000",
borderBottomColor: "#000",
},
headerTintColor: "#ccc",
}}
> >
<BrowsingStack.Screen <BrowsingStack.Screen
name="List" name="List"
component={List} component={List}
options={{ options={{
title: `@expo/vector-icons@${version}`, title: `@expo/vector-icons@${version}`,
headerStyle: {
backgroundColor: "#000",
borderBottomColor: "#000",
},
headerTintColor: "#CCCCCC",
}}
/>
<BrowsingStack.Screen
name="Details"
component={Detail}
options={{
headerStyle: {
backgroundColor: "#000",
borderBottomColor: "#000",
},
headerTintColor: "#CCCCCC",
}}
/>
<Stack.Screen
name="Help"
component={Help}
options={{
headerStyle: {
backgroundColor: "#000",
borderBottomColor: "#000",
},
headerTintColor: "#CCCCCC",
}} }}
/> />
<BrowsingStack.Screen name="Details" component={Detail} />
<BrowsingStack.Screen name="Help" component={Help} />
</BrowsingStack.Navigator> </BrowsingStack.Navigator>
); );
} }
const Stack = createStackNavigator(); const Stack = createStackNavigator();
function Navigation() {
return (
<NavigationContainer linking={linking}>
<Stack.Navigator headerMode="none">
<Stack.Screen name="Index" component={Browsing} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default function App() { export default function App() {
return ( return (
<View style={{ backgroundColor: "#FAFAFA", flex: 1 }}> <View style={{ backgroundColor: "#fafafa", flex: 1 }}>
<StatusBar barStyle="light-content" /> <StatusBar barStyle="light-content" />
<NavigationContainer linking={linking}> <Navigation />
<Stack.Navigator headerMode="none">
<Stack.Screen name="Index" component={Browsing} />
</Stack.Navigator>
</NavigationContainer>
</View> </View>
); );
} }

80
website/components/Display.js
View File

@@ -1,80 +0,0 @@
import React, { Component } from 'react';
import { Dimensions } from 'react-native';
import * as Animatable from 'react-native-animatable';
const { DEVICE_WIDTH, DEVICE_HEIGHT } = Dimensions.get('window');
const DEFAULT_DURATION = 250;
export default class Display extends Component {
constructor(props) {
super(props);
this.state = { enable: this.props.enable };
}
onEndAnimation(endState) {
if (endState.finished == true) this.setState({ enable: false });
}
shouldComponentUpdate(nextProps) {
return true;
}
UNSAFE_componentWillUpdate(nextProps, nextState) {
if (nextProps.enable != this.props.enable) {
if (nextProps.enable == false) {
let duration =
nextProps.exitDuration ||
nextProps.defaultDuration ||
DEFAULT_DURATION;
if (nextProps.exit != null) {
this.refs.display[nextProps.exit](duration).then((endState) =>
this.onEndAnimation(endState)
);
} else nextState.enable = false;
} else nextState.enable = true;
}
}
enableStyle() {
if (this.state.enable) return {};
return {
position: 'absolute',
top: DEVICE_HEIGHT,
left: DEVICE_WIDTH,
height: 0,
width: 0,
};
}
render() {
if (this.state.enable == false && this.props.keepAlive != true) return null;
return (
<Animatable.View
ref="display"
style={[this.props.style, this.enableStyle.bind(this)()]}>
{this.props.children}
</Animatable.View>
);
}
componentDidUpdate(prevProps, prevState) {
if (prevProps.enable != this.props.enable)
if (this.props.enable == true) {
this.refs.display.stopAnimation();
let duration =
this.props.enterDuration ||
this.props.defaultDuration ||
DEFAULT_DURATION;
if (this.props.enter != null) {
this.refs.display[this.props.enter](duration).then((endState) => {});
}
}
}
}

176
website/screens/List.js
View File

@@ -4,7 +4,6 @@ import { useDebouncedCallback } from "use-debounce";
import { useMediaQuery } from "react-responsive"; import { useMediaQuery } from "react-responsive";
import { IconsArray } from "../IconConstants"; import { IconsArray } from "../IconConstants";
import ListItem from "../components/ListItem"; import ListItem from "../components/ListItem";
import Display from "../components/Display";
import FilterButton from "../components/FilterButton"; import FilterButton from "../components/FilterButton";
import ClearButton from "../components/ClearButton"; import ClearButton from "../components/ClearButton";
import HelpButton from "../components/HelpButton"; import HelpButton from "../components/HelpButton";
@@ -153,9 +152,7 @@ const List = ({ navigation }) => {
/> />
</View> </View>
{/* Filter section */}
<View style={styles.filterContainer}> <View style={styles.filterContainer}>
{/* Filter & Clear button */}
<View style={{ flexDirection: "row" }}> <View style={{ flexDirection: "row" }}>
<FilterButton <FilterButton
buttonColor={barOpen ? "#447181" : "#515460"} buttonColor={barOpen ? "#447181" : "#515460"}
@@ -172,99 +169,116 @@ const List = ({ navigation }) => {
</View> </View>
</View> </View>
<Display enable={barOpen}> <View
<View style={styles.displayContainer}> style={[
<View style={styles.familySection}> styles.displayContainer,
<View> { display: barOpen ? "block" : "none" },
<View style={styles.checkDisplay}> ]}
<CheckBox >
label="AntDesign" <View style={styles.familySection}>
icon={ant ? "checkbox-marked" : "checkbox-blank-outline"} <View>
onPress={() => setAnt(!ant)} <View style={styles.checkDisplay}>
/> <CheckBox
key="AntDesign"
label="AntDesign"
icon={ant ? "checkbox-marked" : "checkbox-blank-outline"}
onPress={() => setAnt(!ant)}
/>
<CheckBox <CheckBox
label="Entypo" key="Entypo"
icon={ent ? "checkbox-marked" : "checkbox-blank-outline"} label="Entypo"
onPress={() => setEnt(!ent)} icon={ent ? "checkbox-marked" : "checkbox-blank-outline"}
/> onPress={() => setEnt(!ent)}
/>
<CheckBox <CheckBox
label="EvilIcons" key="EvilIcons"
icon={evil ? "checkbox-marked" : "checkbox-blank-outline"} label="EvilIcons"
onPress={() => setEvil(!evil)} icon={evil ? "checkbox-marked" : "checkbox-blank-outline"}
/> onPress={() => setEvil(!evil)}
/>
<CheckBox <CheckBox
label="Feather" key="Feather"
icon={feather ? "checkbox-marked" : "checkbox-blank-outline"} label="Feather"
onPress={() => setFeather(!feather)} icon={feather ? "checkbox-marked" : "checkbox-blank-outline"}
/> onPress={() => setFeather(!feather)}
/>
<CheckBox <CheckBox
label="FontAwesome" key="FontAwesome"
icon={fontawe ? "checkbox-marked" : "checkbox-blank-outline"} label="FontAwesome"
onPress={() => setFontawe(!fontawe)} icon={fontawe ? "checkbox-marked" : "checkbox-blank-outline"}
/> onPress={() => setFontawe(!fontawe)}
/>
<CheckBox <CheckBox
label="FontAwesome5" key="FontAwesome5"
icon={fontawe5 ? "checkbox-marked" : "checkbox-blank-outline"} label="FontAwesome5"
onPress={() => setFontawe5(!fontawe5)} icon={fontawe5 ? "checkbox-marked" : "checkbox-blank-outline"}
/> onPress={() => setFontawe5(!fontawe5)}
/>
<CheckBox <CheckBox
label="Foundation" key="Foundation"
icon={found ? "checkbox-marked" : "checkbox-blank-outline"} label="Foundation"
onPress={() => setFound(!found)} icon={found ? "checkbox-marked" : "checkbox-blank-outline"}
/> onPress={() => setFound(!found)}
/>
<CheckBox <CheckBox
label="Ionicons" key="Ionicons"
icon={ioni ? "checkbox-marked" : "checkbox-blank-outline"} label="Ionicons"
onPress={() => setIoni(!ioni)} icon={ioni ? "checkbox-marked" : "checkbox-blank-outline"}
/> onPress={() => setIoni(!ioni)}
/>
<CheckBox <CheckBox
label="MaterialIcons" key="MaterialIcons"
icon={material ? "checkbox-marked" : "checkbox-blank-outline"} label="MaterialIcons"
onPress={() => setMaterial(!material)} icon={material ? "checkbox-marked" : "checkbox-blank-outline"}
/> onPress={() => setMaterial(!material)}
/>
<CheckBox <CheckBox
label="MaterialCommunityIcons" key="MaterialCommunityIcons"
icon={matcom ? "checkbox-marked" : "checkbox-blank-outline"} label="MaterialCommunityIcons"
onPress={() => setMatcom(!matcom)} icon={matcom ? "checkbox-marked" : "checkbox-blank-outline"}
/> onPress={() => setMatcom(!matcom)}
/>
<CheckBox <CheckBox
label="SimpleLineIcons" key="SimpleLineIcons"
icon={sim ? "checkbox-marked" : "checkbox-blank-outline"} label="SimpleLineIcons"
onPress={() => setSim(!sim)} icon={sim ? "checkbox-marked" : "checkbox-blank-outline"}
/> onPress={() => setSim(!sim)}
/>
<CheckBox <CheckBox
label="Octicons" key="Octicons"
icon={octi ? "checkbox-marked" : "checkbox-blank-outline"} label="Octicons"
onPress={() => setOcti(!octi)} icon={octi ? "checkbox-marked" : "checkbox-blank-outline"}
/> onPress={() => setOcti(!octi)}
/>
<CheckBox <CheckBox
label="Zocial" key="Zocial"
icon={zocial ? "checkbox-marked" : "checkbox-blank-outline"} label="Zocial"
onPress={() => setZocial(!zocial)} icon={zocial ? "checkbox-marked" : "checkbox-blank-outline"}
/> onPress={() => setZocial(!zocial)}
/>
<CheckBox <CheckBox
label="Fontisto" key="Fontisto"
icon={fontisto ? "checkbox-marked" : "checkbox-blank-outline"} label="Fontisto"
onPress={() => setFontisto(!fontisto)} icon={fontisto ? "checkbox-marked" : "checkbox-blank-outline"}
/> onPress={() => setFontisto(!fontisto)}
</View> />
</View> </View>
</View> </View>
</View> </View>
</Display> </View>
<FlatList <FlatList
data={listIcons} data={listIcons}
@@ -315,7 +329,7 @@ const styles = StyleSheet.create({
}, },
filterContainer: { filterContainer: {
height: 40, height: 40,
alignItems: 'flex-end', alignItems: "flex-end",
backgroundColor: "#2A2C33", backgroundColor: "#2A2C33",
paddingHorizontal: 20, paddingHorizontal: 20,
}, },