mirror of
https://github.com/zoriya/react-native-web.git
synced 2026-06-01 01:59:10 +00:00
Remove MediaQueryWidget from examples
This commit is contained in:
@@ -1,11 +1,9 @@
|
|||||||
import GridView from './GridView'
|
import GridView from './GridView'
|
||||||
import Heading from './Heading'
|
import Heading from './Heading'
|
||||||
import MediaQueryWidget from './MediaQueryWidget'
|
|
||||||
import React, { Image, StyleSheet, ScrollView, Text, TextInput, TouchableHighlight, View } from 'react-native'
|
import React, { Image, StyleSheet, ScrollView, Text, TextInput, TouchableHighlight, View } from 'react-native'
|
||||||
|
|
||||||
export default class App extends React.Component {
|
export default class App extends React.Component {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
mediaQuery: React.PropTypes.object,
|
|
||||||
style: View.propTypes.style
|
style: View.propTypes.style
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -17,11 +15,8 @@ export default class App extends React.Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { mediaQuery } = this.props
|
|
||||||
const finalRootStyles = [
|
const finalRootStyles = [
|
||||||
rootStyles.common,
|
rootStyles.common
|
||||||
mediaQuery.small.matches && rootStyles.mqSmall,
|
|
||||||
mediaQuery.large.matches && rootStyles.mqLarge
|
|
||||||
]
|
]
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -35,8 +30,6 @@ export default class App extends React.Component {
|
|||||||
scroll views – from which more complex components and apps can be
|
scroll views – from which more complex components and apps can be
|
||||||
constructed.</Text>
|
constructed.</Text>
|
||||||
|
|
||||||
<MediaQueryWidget mediaQuery={mediaQuery} />
|
|
||||||
|
|
||||||
<Heading size='large'>Image</Heading>
|
<Heading size='large'>Image</Heading>
|
||||||
<Image
|
<Image
|
||||||
accessibilityLabel='accessible image'
|
accessibilityLabel='accessible image'
|
||||||
|
|||||||
@@ -1,39 +0,0 @@
|
|||||||
import React, { StyleSheet, Text, View } from 'react-native'
|
|
||||||
|
|
||||||
const MediaQueryWidget = ({ mediaQuery = {} }) => {
|
|
||||||
const active = Object.keys(mediaQuery).reduce((active, alias) => {
|
|
||||||
if (mediaQuery[alias].matches) {
|
|
||||||
active = {
|
|
||||||
alias,
|
|
||||||
mql: mediaQuery[alias]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return active
|
|
||||||
}, {})
|
|
||||||
|
|
||||||
return (
|
|
||||||
<View style={styles.root}>
|
|
||||||
<Text style={styles.heading}>Active Media Query</Text>
|
|
||||||
<Text style={styles.text}>{`"${active.alias}"`} {active.mql && active.mql.media}</Text>
|
|
||||||
</View>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
root: {
|
|
||||||
alignItems: 'center',
|
|
||||||
borderWidth: 1,
|
|
||||||
marginVertical: 10,
|
|
||||||
padding: 10
|
|
||||||
},
|
|
||||||
heading: {
|
|
||||||
fontWeight: 'bold',
|
|
||||||
padding: 5,
|
|
||||||
textAlign: 'center'
|
|
||||||
},
|
|
||||||
text: {
|
|
||||||
textAlign: 'center'
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
export default MediaQueryWidget
|
|
||||||
Reference in New Issue
Block a user