Prettify common files
This commit is contained in:
@@ -14,17 +14,17 @@ const AppIcon = ({ color, name, style, ...props }) => {
|
|||||||
AppIcon.propTypes = {
|
AppIcon.propTypes = {
|
||||||
color: PropTypes.string,
|
color: PropTypes.string,
|
||||||
name: PropTypes.string.isRequired,
|
name: PropTypes.string.isRequired,
|
||||||
style: PropTypes.object
|
style: PropTypes.object,
|
||||||
}
|
}
|
||||||
|
|
||||||
AppIcon.defaultProps = {
|
AppIcon.defaultProps = {
|
||||||
color: 'black'
|
color: 'black',
|
||||||
}
|
}
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
icon: {
|
icon: {
|
||||||
fontSize: Sizes.subtitle
|
fontSize: Sizes.subtitle,
|
||||||
}
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
export default AppIcon
|
export default AppIcon
|
||||||
|
|||||||
@@ -17,8 +17,8 @@ const AppLoadingView = () => {
|
|||||||
|
|
||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
container: {
|
container: {
|
||||||
...Containers.centerItems
|
...Containers.centerItems,
|
||||||
}
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
export default AppLoadingView
|
export default AppLoadingView
|
||||||
|
|||||||
@@ -3,9 +3,9 @@ import { Modal, StyleSheet, TouchableOpacity } from 'react-native'
|
|||||||
import PropTypes from 'prop-types'
|
import PropTypes from 'prop-types'
|
||||||
|
|
||||||
const AppModal = ({ children, onClose }) => {
|
const AppModal = ({ children, onClose }) => {
|
||||||
return(
|
return (
|
||||||
<Modal
|
<Modal
|
||||||
animationType='fade'
|
animationType="fade"
|
||||||
onRequestClose={onClose}
|
onRequestClose={onClose}
|
||||||
transparent={true}
|
transparent={true}
|
||||||
visible={true}
|
visible={true}
|
||||||
@@ -18,7 +18,7 @@ const AppModal = ({ children, onClose }) => {
|
|||||||
|
|
||||||
AppModal.propTypes = {
|
AppModal.propTypes = {
|
||||||
children: PropTypes.node,
|
children: PropTypes.node,
|
||||||
onClose: PropTypes.func
|
onClose: PropTypes.func,
|
||||||
}
|
}
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
@@ -26,7 +26,7 @@ const styles = StyleSheet.create({
|
|||||||
backgroundColor: 'black',
|
backgroundColor: 'black',
|
||||||
flex: 1,
|
flex: 1,
|
||||||
opacity: 0.5,
|
opacity: 0.5,
|
||||||
}
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
export default AppModal
|
export default AppModal
|
||||||
|
|||||||
@@ -13,7 +13,7 @@ const AppPage = ({
|
|||||||
title,
|
title,
|
||||||
...props
|
...props
|
||||||
}) => {
|
}) => {
|
||||||
return(
|
return (
|
||||||
<View style={styles.container}>
|
<View style={styles.container}>
|
||||||
<ScrollView
|
<ScrollView
|
||||||
contentContainerStyle={[styles.scrollView, contentContainerStyle]}
|
contentContainerStyle={[styles.scrollView, contentContainerStyle]}
|
||||||
@@ -31,21 +31,21 @@ AppPage.propTypes = {
|
|||||||
children: PropTypes.node,
|
children: PropTypes.node,
|
||||||
contentContainerStyle: PropTypes.object,
|
contentContainerStyle: PropTypes.object,
|
||||||
scrollViewStyle: PropTypes.object,
|
scrollViewStyle: PropTypes.object,
|
||||||
title: PropTypes.string
|
title: PropTypes.string,
|
||||||
}
|
}
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
container: {
|
container: {
|
||||||
backgroundColor: Colors.turquoiseLight,
|
backgroundColor: Colors.turquoiseLight,
|
||||||
flex: 1
|
flex: 1,
|
||||||
},
|
},
|
||||||
scrollView: {
|
scrollView: {
|
||||||
backgroundColor: Colors.turquoiseLight,
|
backgroundColor: Colors.turquoiseLight,
|
||||||
flexGrow: 1
|
flexGrow: 1,
|
||||||
},
|
},
|
||||||
title: {
|
title: {
|
||||||
...Typography.title
|
...Typography.title,
|
||||||
}
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
export default AppPage
|
export default AppPage
|
||||||
|
|||||||
@@ -23,7 +23,7 @@ const styles = StyleSheet.create({
|
|||||||
statusBar: {
|
statusBar: {
|
||||||
backgroundColor: Colors.purple,
|
backgroundColor: Colors.purple,
|
||||||
height: STATUSBAR_HEIGHT,
|
height: STATUSBAR_HEIGHT,
|
||||||
}
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
export default AppStatusBar
|
export default AppStatusBar
|
||||||
|
|||||||
@@ -20,19 +20,19 @@ const AppSwitch = ({ onToggle, text, value }) => {
|
|||||||
AppSwitch.propTypes = {
|
AppSwitch.propTypes = {
|
||||||
onToggle: PropTypes.func.isRequired,
|
onToggle: PropTypes.func.isRequired,
|
||||||
text: PropTypes.string,
|
text: PropTypes.string,
|
||||||
value: PropTypes.bool
|
value: PropTypes.bool,
|
||||||
}
|
}
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
container: {
|
container: {
|
||||||
...Containers.rowContainer
|
...Containers.rowContainer,
|
||||||
},
|
},
|
||||||
switch: {
|
switch: {
|
||||||
flex: 1,
|
flex: 1,
|
||||||
},
|
},
|
||||||
textContainer: {
|
textContainer: {
|
||||||
flex: 4,
|
flex: 4,
|
||||||
}
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
export default AppSwitch
|
export default AppSwitch
|
||||||
|
|||||||
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types'
|
|||||||
import { Colors, Spacing, Typography } from '../../styles'
|
import { Colors, Spacing, Typography } from '../../styles'
|
||||||
|
|
||||||
const AppTextInput = ({ style, isKeyboardOffset, ...props }) => {
|
const AppTextInput = ({ style, isKeyboardOffset, ...props }) => {
|
||||||
const behavior = isKeyboardOffset ? "padding" : "height"
|
const behavior = isKeyboardOffset ? 'padding' : 'height'
|
||||||
const keyboardVerticalOffset = isKeyboardOffset ? 300 : 0
|
const keyboardVerticalOffset = isKeyboardOffset ? 300 : 0
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -39,8 +39,8 @@ const styles = StyleSheet.create({
|
|||||||
minWidth: '80%',
|
minWidth: '80%',
|
||||||
paddingHorizontal: Spacing.base,
|
paddingHorizontal: Spacing.base,
|
||||||
paddingVertical: Spacing.tiny,
|
paddingVertical: Spacing.tiny,
|
||||||
...Typography.mainText
|
...Typography.mainText,
|
||||||
}
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
export default AppTextInput
|
export default AppTextInput
|
||||||
|
|||||||
@@ -26,8 +26,8 @@ AppText.propTypes = {
|
|||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
text: {
|
text: {
|
||||||
color: Colors.greyDark,
|
color: Colors.greyDark,
|
||||||
...Typography.mainText
|
...Typography.mainText,
|
||||||
}
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
export default AppText
|
export default AppText
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ import { StyleSheet, TouchableOpacity } from 'react-native'
|
|||||||
|
|
||||||
import AppIcon from './app-icon'
|
import AppIcon from './app-icon'
|
||||||
|
|
||||||
import { HIT_SLOP} from '../../config'
|
import { HIT_SLOP } from '../../config'
|
||||||
import { Colors, Sizes } from '../../styles'
|
import { Colors, Sizes } from '../../styles'
|
||||||
|
|
||||||
const CloseIcon = ({ onClose, color, ...props }) => {
|
const CloseIcon = ({ onClose, color, ...props }) => {
|
||||||
@@ -15,21 +15,21 @@ const CloseIcon = ({ onClose, color, ...props }) => {
|
|||||||
style={styles.container}
|
style={styles.container}
|
||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
<AppIcon name='cross' color={color ? color : Colors.orange} />
|
<AppIcon name="cross" color={color ? color : Colors.orange} />
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
CloseIcon.propTypes = {
|
CloseIcon.propTypes = {
|
||||||
onClose: PropTypes.func.isRequired,
|
onClose: PropTypes.func.isRequired,
|
||||||
color: PropTypes.string
|
color: PropTypes.string,
|
||||||
}
|
}
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
container: {
|
container: {
|
||||||
alignSelf: 'flex-start',
|
alignSelf: 'flex-start',
|
||||||
marginBottom: Sizes.base,
|
marginBottom: Sizes.base,
|
||||||
}
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
export default CloseIcon
|
export default CloseIcon
|
||||||
|
|||||||
@@ -21,7 +21,7 @@ const Link = ({ children, style }) => {
|
|||||||
|
|
||||||
Link.propTypes = {
|
Link.propTypes = {
|
||||||
children: PropTypes.node,
|
children: PropTypes.node,
|
||||||
style: PropTypes.object
|
style: PropTypes.object,
|
||||||
}
|
}
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
@@ -29,12 +29,12 @@ const styles = StyleSheet.create({
|
|||||||
color: Colors.purple,
|
color: Colors.purple,
|
||||||
textDecorationLine: 'underline',
|
textDecorationLine: 'underline',
|
||||||
...Typography.mainText,
|
...Typography.mainText,
|
||||||
}
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
function replaceUrlWithText(url) {
|
function replaceUrlWithText(url) {
|
||||||
const link = Object.values(links).find(l => l.url === url)
|
const link = Object.values(links).find((l) => l.url === url)
|
||||||
return (link && link.text) || url
|
return (link && link.text) || url
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Link
|
export default Link
|
||||||
|
|||||||
@@ -15,7 +15,7 @@ const MenuIcon = ({ isActive, name }) => {
|
|||||||
|
|
||||||
MenuIcon.propTypes = {
|
MenuIcon.propTypes = {
|
||||||
isActive: PropTypes.bool,
|
isActive: PropTypes.bool,
|
||||||
name: PropTypes.string.isRequired
|
name: PropTypes.string.isRequired,
|
||||||
}
|
}
|
||||||
|
|
||||||
export default MenuIcon
|
export default MenuIcon
|
||||||
|
|||||||
@@ -43,7 +43,7 @@ const styles = StyleSheet.create({
|
|||||||
},
|
},
|
||||||
title: {
|
title: {
|
||||||
...Typography.subtitle,
|
...Typography.subtitle,
|
||||||
}
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
export default Segment
|
export default Segment
|
||||||
|
|||||||
+11
-11
@@ -7,17 +7,17 @@ import AppText from './app-text'
|
|||||||
import { Sizes, Spacing, Typography } from '../../styles'
|
import { Sizes, Spacing, Typography } from '../../styles'
|
||||||
|
|
||||||
const Table = ({ tableContent }) => {
|
const Table = ({ tableContent }) => {
|
||||||
return (
|
return tableContent.map((rowContent, i) => (
|
||||||
tableContent.map((rowContent, i) => <Row key={i} rowContent={rowContent} />)
|
<Row key={i} rowContent={rowContent} />
|
||||||
)
|
))
|
||||||
}
|
}
|
||||||
|
|
||||||
Table.propTypes = {
|
Table.propTypes = {
|
||||||
tableContent: PropTypes.array.isRequired
|
tableContent: PropTypes.array.isRequired,
|
||||||
}
|
}
|
||||||
|
|
||||||
const Row = ({ rowContent }) => {
|
const Row = ({ rowContent }) => {
|
||||||
return(
|
return (
|
||||||
<View style={styles.row}>
|
<View style={styles.row}>
|
||||||
<Cell content={rowContent[0]} isLeft />
|
<Cell content={rowContent[0]} isLeft />
|
||||||
<Cell content={rowContent[1]} />
|
<Cell content={rowContent[1]} />
|
||||||
@@ -26,7 +26,7 @@ const Row = ({ rowContent }) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
Row.propTypes = {
|
Row.propTypes = {
|
||||||
rowContent: PropTypes.array.isRequired
|
rowContent: PropTypes.array.isRequired,
|
||||||
}
|
}
|
||||||
|
|
||||||
const Cell = ({ content, isLeft }) => {
|
const Cell = ({ content, isLeft }) => {
|
||||||
@@ -35,7 +35,7 @@ const Cell = ({ content, isLeft }) => {
|
|||||||
const numberOfLines = isLeft ? 1 : 2
|
const numberOfLines = isLeft ? 1 : 2
|
||||||
const ellipsizeMode = isLeft ? 'clip' : 'tail'
|
const ellipsizeMode = isLeft ? 'clip' : 'tail'
|
||||||
|
|
||||||
return(
|
return (
|
||||||
<View style={styleContainer}>
|
<View style={styleContainer}>
|
||||||
<AppText
|
<AppText
|
||||||
numberOfLines={numberOfLines}
|
numberOfLines={numberOfLines}
|
||||||
@@ -61,7 +61,7 @@ const styles = StyleSheet.create({
|
|||||||
},
|
},
|
||||||
accentPurpleBig: {
|
accentPurpleBig: {
|
||||||
...Typography.accentPurpleBig,
|
...Typography.accentPurpleBig,
|
||||||
marginRight: Spacing.tiny
|
marginRight: Spacing.tiny,
|
||||||
},
|
},
|
||||||
cellLeft: {
|
cellLeft: {
|
||||||
alignItems: 'flex-end',
|
alignItems: 'flex-end',
|
||||||
@@ -75,8 +75,8 @@ const styles = StyleSheet.create({
|
|||||||
row: {
|
row: {
|
||||||
flexDirection: 'row',
|
flexDirection: 'row',
|
||||||
marginBottom: Spacing.tiny,
|
marginBottom: Spacing.tiny,
|
||||||
marginLeft: Spacing.tiny
|
marginLeft: Spacing.tiny,
|
||||||
}
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
export default Table
|
export default Table
|
||||||
|
|||||||
Reference in New Issue
Block a user