diff --git a/src/Block.js b/src/Block.js index 79a8375..19eaaf6 100644 --- a/src/Block.js +++ b/src/Block.js @@ -1,67 +1,64 @@ -import React, { Component } from 'react'; +import React from 'react'; import { View, StyleSheet, SafeAreaView } from 'react-native'; import PropTypes from 'prop-types'; import GalioTheme, { withGalio } from './theme'; -class Block extends Component { - render() { - const { - row, - flex, - center, - middle, - top, - bottom, - right, - left, - shadow, - space, - fluid, - height, - shadowColor, - card, - width, - safe, - children, - style, - styles, - ...props - } = this.props; +function Block({ + row, + flex, + center, + middle, + top, + bottom, + right, + left, + shadow, + space, + fluid, + height, + shadowColor, + card, + width, + safe, + children, + style, + styles, + ...rest +}) { - const styleBlock = [ - styles.block, - row && styles.row, - flex && { flex: flex === true ? 1 : flex }, - center && styles.center, - middle && styles.middle, - top && styles.top, - bottom && styles.bottom, - right && styles.right, - left && styles.left, - space && { justifyContent: `space-${space}` }, - shadow && styles.shadow, - fluid && styles.fluid, - card && styles.card, - height && { height }, - width && { width }, - shadowColor && { shadowColor }, - style, - ]; - - if (safe) { - return ( - - {children} - - ); - } + const styleBlock = [ + styles.block, + row && styles.row, + flex && { flex: flex === true ? 1 : flex }, + center && styles.center, + middle && styles.middle, + top && styles.top, + bottom && styles.bottom, + right && styles.right, + left && styles.left, + space && { justifyContent: `space-${space}` }, + shadow && styles.shadow, + fluid && styles.fluid, + card && styles.card, + height && { height }, + width && { width }, + shadowColor && { shadowColor }, + style, + ]; + if (safe) { return ( - + {children} - + ); } + + return ( + + {children} + + ); } Block.defaultProps = { @@ -143,7 +140,10 @@ const styles = theme => }, shadow: { shadowColor: theme.COLORS.BLOCK, - shadowOffset: { width: 0, height: 3 }, + shadowOffset: { + width: 0, + height: 3, + }, shadowOpacity: theme.SIZES.BLOCK_SHADOW_OPACITY, shadowRadius: theme.SIZES.BLOCK_SHADOW_RADIUS, elevation: theme.SIZES.ANDROID_ELEVATION, diff --git a/src/Button.js b/src/Button.js index 2a9b9e7..7338431 100644 --- a/src/Button.js +++ b/src/Button.js @@ -2,30 +2,38 @@ import React from 'react'; import { ActivityIndicator, Dimensions, StyleSheet, TouchableOpacity, Text } from 'react-native'; import PropTypes from 'prop-types'; // galio components -import { Icon } from '.'; +import { Icon } from './'; import GalioTheme, { withGalio } from './theme'; const { width } = Dimensions.get('window'); -class Button extends React.Component { - renderContent = () => { - const { - loading, - loadingSize, - children, - onlyIcon, - icon, - iconFamily, - iconSize, - iconColor, - uppercase, - lowercase, - capitalize, - textStyle, - styles, - theme, - } = this.props; - +function Button({ + color, + children, + capitalize, + disabled, + iconSize, + icon, + iconFamily, + iconColor, + loading, + loadingSize, + lowercase, + onlyIcon, + opacity, + round, + radius, + style, + size, + shadowless, + shadowColor, + styles, + theme, + textStyle, + uppercase, + ...rest +}) { + function renderContent() { const textStyles = [styles.customText, textStyle]; // workaround for textTransform not supported on Expo SDK 29.0.0 or 30.0.0 @@ -37,7 +45,9 @@ class Button extends React.Component { if (uppercase && isString) content = children.toUpperCase(); if (lowercase && isString) content = children.toLowerCase(); - if (capitalize && isString) content = `${children.charAt(0).toUpperCase()}${children.slice(1)}`; + if (capitalize && isString) { + content = `${children.charAt(0).toUpperCase()}${children.slice(1)}`; + } if (onlyIcon) { content = ( @@ -52,61 +62,41 @@ class Button extends React.Component { content = {content}; } - if (loading) content = ; + if (loading) { + content = ; + } return content; - }; - - render() { - const { - style, - color, - size, - children, - disabled, - round, - border, - radius, - textStyle, - onlyIcon, - iconSize, - opacity, - shadowless, - shadowColor, - styles, - theme, - ...rest - } = this.props; - - const colorStyle = styles[color]; - - const buttonStyles = [ - styles.defaultButton, - color && colorStyle, - color && !colorStyle && { backgroundColor: color }, // color set & no styles for that color - color === 'transparent' || styles.androidShadow, - color === 'transparent' && !shadowless && { borderWidth: 1, borderColor: theme.COLORS.WHITE }, - size === 'large' ? { width: width * 0.9 } : { width: width * 0.5 }, - round && { borderRadius: theme.SIZES.BASE * 2 }, - onlyIcon && { - width: iconSize * 1.25, - height: iconSize * 2, - borderWidth: 0, - borderRadius: iconSize, - }, - radius && { borderRadius: radius }, - !shadowless && styles.shadow, - { shadowColor: shadowColor || theme.COLORS[color.toUpperCase()] }, - { zIndex: 2 }, - style, - ]; - - return ( - - {this.renderContent()} - - ); } + + const colorStyle = styles[color]; + + const buttonStyles = [ + styles.defaultButton, + color && colorStyle, + color && !colorStyle && { backgroundColor: color }, // color set & no styles for that color + color === 'transparent' || styles.androidShadow, + color === 'transparent' && !shadowless && { borderWidth: 1, borderColor: theme.COLORS.WHITE }, + size === 'large' ? { width: width * 0.9 } : { width: width * 0.5 }, + round && { borderRadius: theme.SIZES.BASE * 2 }, + onlyIcon && { + width: iconSize * 1.25, + height: iconSize * 2, + borderWidth: 0, + borderRadius: iconSize, + }, + radius && { borderRadius: radius }, + !shadowless && styles.shadow, + { shadowColor: shadowColor || theme.COLORS[color.toUpperCase()] }, + { zIndex: 2 }, + style, + ]; + + return ( + + {renderContent()} + + ); } Button.defaultProps = { diff --git a/src/Card.js b/src/Card.js index 5803ce3..6d60a20 100644 --- a/src/Card.js +++ b/src/Card.js @@ -1,15 +1,33 @@ -import React, { Component } from 'react'; +/* eslint-disable object-curly-newline */ +import React from 'react'; import { Image, StyleSheet } from 'react-native'; import PropTypes from 'prop-types'; -import { Block, Icon, Text } from '.'; +import { Block, Icon, Text } from './'; import GalioTheme, { withGalio } from './theme'; -class Card extends Component { - renderImage() { - const { image, imageBlockStyle, imageStyle, styles } = this.props; +function Card({ + avatar, + borderless, + caption, + captionColor, + card, + children, + footerStyle, + image, + imageBlockStyle, + imageStyle, + location, + locationColor, + shadow, + styles, + title, + titleColor, + theme, + ...rest +}) { + function renderImage() { if (!image) return null; - return ( @@ -17,17 +35,13 @@ class Card extends Component { ); } - renderAvatar() { - const { avatar, styles } = this.props; + function renderAvatar() { if (!avatar) return null; - return ; } - renderLocation() { - const { location, locationColor, theme } = this.props; + function renderLocation() { if (!location) return null; - if (typeof location !== 'string') { return location; } @@ -51,12 +65,10 @@ class Card extends Component { ); } - renderAuthor() { - const { title, titleColor, caption, captionColor, footerStyle, theme, styles } = this.props; - + function renderAuthor() { return ( - {this.renderAvatar()} + {renderAvatar()} @@ -69,26 +81,23 @@ class Card extends Component { {caption} - {this.renderLocation()} + {renderLocation()} ); } - render() { - const { card, shadow, borderless, style, ...props } = this.props; - const styleCard = [borderless && { borderWidth: 0 }, style]; + const styleCard = [borderless && { borderWidth: 0 }, style]; - return ( - - {this.renderImage()} - {this.renderAuthor()} - {props.children} - - ); - } + return ( + + {renderImage()} + {renderAuthor()} + {children} + + ); } Card.defaultProps = { @@ -97,6 +106,12 @@ Card.defaultProps = { borderless: false, styles: {}, theme: GalioTheme, + title: '', + titleColor: '', + caption: '', + captionColor: '', + footerStyle: {}, + avatar: '', }; Card.propTypes = { @@ -105,6 +120,12 @@ Card.propTypes = { borderless: PropTypes.bool, styles: PropTypes.any, theme: PropTypes.any, + title: PropTypes.string, + titleColor: PropTypes.string, + caption: PropTypes.string, + captionColor: PropTypes.string, + avatar: PropTypes.string, + footerStyle: PropTypes.object, }; const styles = theme => diff --git a/src/Checkbox.js b/src/Checkbox.js index 89235c9..ecb2123 100644 --- a/src/Checkbox.js +++ b/src/Checkbox.js @@ -1,29 +1,41 @@ -import React from "react"; -import { View, TouchableOpacity, StyleSheet, Image } from "react-native"; -import PropTypes from "prop-types"; +/* eslint-disable object-curly-newline */ +import React from 'react'; +import { View, TouchableOpacity, StyleSheet, Image } from 'react-native'; +import PropTypes from 'prop-types'; // galio dependency -import { Icon, Text } from "."; -import GalioTheme, { withGalio } from "./theme"; - -class Checkbox extends React.Component { - constructor(props) { - super(props); - this.state = { - checked: props.initialValue - }; - - this.renderChecked = this.renderChecked.bind(this); - this.spaceAround = this.spaceAround.bind(this); - } - +import { Icon, Text } from './'; +import GalioTheme, { withGalio } from './theme'; + +function Checkbox({ + checkboxStyle, + color, + disabled, + flexDirection, + image, + imageStyle, + iconColor, + iconFamily, + iconName, + iconSize, + initialValue, + label, + labelStyle, + onChange, + style, + styles, +}) { + const [checked, setChecked] = React.useState(initialValue); + React.useEffect(() => { + onChange(checked); + }, [checked]); // adding the necessary margins depending on the flexDirection - spaceAround(direction) { + function spaceAround(direction) { switch (direction) { - case "row-reverse": + case 'row-reverse': return { marginRight: 10 }; - case "column": + case 'column': return { marginTop: 10 }; - case "column-reverse": + case 'column-reverse': return { marginBottom: 10 }; default: return { marginLeft: 10 }; @@ -31,130 +43,107 @@ class Checkbox extends React.Component { } // rendering the image/text for the checkbox - renderLabel() { - const { - label, - disabled, - flexDirection, - image, - labelStyle, - imageStyle, - styles - } = this.props; - + function renderLabel() { const labelStyles = [ styles.textStyles, disabled && styles.disabledLabel, labelStyle, - flexDirection && this.spaceAround(flexDirection) - ]; - const imageStyles = [ - styles.imgStyles, - imageStyle, - flexDirection && this.spaceAround(flexDirection) + flexDirection && spaceAround(flexDirection), ]; + const imageStyles = [styles.imgStyles, imageStyle, flexDirection && spaceAround(flexDirection)]; - if (image && !label) + if (image && !label) { return ; + } if (!image && label) return {label}; - if (!label && !image) return null; + // if (!label && !image) return null; + return null; } // adding the check icon - renderChecked() { - const { iconName, iconFamily, iconColor, iconSize } = this.props; + function renderChecked() { - if (this.state.checked) + if (checked) { return ; - + } + return null; } // onPress function that changes the component's state and callbacks the onChange prop - _onPress() { - this.setState({ checked: !this.state.checked }, () => - this.props.onChange(this.state.checked) - ); + function _onPress() { + setChecked(!checked); + return null; } - render() { - const { props, state } = this; - const { style, styles, disabled, flexDirection, checkboxStyle, color, theme } = props; - - const colorStyle = theme.COLORS[color.toUpperCase()]; //this sets the correct color for the theme file - - const checkBoxContainerStyle = [ - styles.container, - flexDirection && { flexDirection }, - style - ]; - - const checkedInnerStyles = [ - styles.checked, - color && { backgroundColor: colorStyle, borderColor: colorStyle }, - color && !colorStyle && { backgroundColor: color, borderColor: color } - ]; - - const checkBoxViewStyles = [ - styles.checkBoxView, - styles.uncheckedBoxView, - color && { borderColor: colorStyle}, - color && !colorStyle && { borderColor: color }, - state.checked && checkedInnerStyles, //apply the ckecked styling - disabled && styles.disabled, - checkboxStyle - ]; - - return ( - this._onPress()} - style={checkBoxContainerStyle} - activeOpacity={0.8} - disabled={disabled} - > - {this.renderChecked()} - {this.renderLabel()} - - ); - } + const colorStyle = theme.COLORS[color.toUpperCase()]; // this sets the correct color for the theme file + + const checkBoxContainerStyle = [styles.container, flexDirection && { flexDirection }, style]; + + const checkedInnerStyles = [ + styles.checked, + color && { backgroundColor: colorStyle, borderColor: colorStyle }, + color && !colorStyle && { backgroundColor: color, borderColor: color }, + ]; + + const checkBoxViewStyles = [ + styles.checkBoxView, + styles.uncheckedBoxView, + color && { borderColor: colorStyle }, + color && !colorStyle && { borderColor: color }, + checked && checkedInnerStyles, // apply the ckecked styling + disabled && styles.disabled, + checkboxStyle, + ]; + + return ( + _onPress()} + style={checkBoxContainerStyle} + activeOpacity={0.8} + disabled={disabled}> + {renderChecked()} + {renderLabel()} + + ); } const styles = theme => StyleSheet.create({ container: { - flexDirection: "row", - alignItems: "center", - justifyContent: "flex-start" + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'flex-start', }, checkBoxView: { width: theme.SIZES.CHECKBOX_WIDTH, height: theme.SIZES.CHECKBOX_HEIGHT, borderWidth: theme.SIZES.BORDER_WIDTH, - alignItems: "center", - justifyContent: "center", - borderRadius: theme.SIZES.BORDER_RADIUS + alignItems: 'center', + justifyContent: 'center', + borderRadius: theme.SIZES.BORDER_RADIUS, }, uncheckedBoxView: { backgroundColor: theme.COLORS.TRANSPARENT, - borderColor: theme.COLORS.GREY + borderColor: theme.COLORS.GREY, }, checked: { backgroundColor: theme.COLORS.THEME, - borderColor: theme.COLORS.THEME + borderColor: theme.COLORS.THEME, }, disabled: { borderColor: theme.COLORS.MUTED, }, textStyles: { - color: theme.COLORS.BLACK + color: theme.COLORS.BLACK, }, disabledLabel: { color: theme.COLORS.MUTED, - opacity: theme.SIZES.OPACITY + opacity: theme.SIZES.OPACITY, }, imgStyles: { width: 200, - height: 200 + height: 200, }, }); @@ -162,9 +151,9 @@ Checkbox.defaultProps = { checkboxStyle: null, color: 'theme', disabled: false, - flexDirection: "row", + flexDirection: 'row', iconColor: '#fff', - iconName: "check", + iconName: 'check', iconSize: 15, iconFamily: 'FontAwesome', image: null, @@ -174,7 +163,7 @@ Checkbox.defaultProps = { labelStyle: null, onChange: () => {}, styles: {}, - theme: GalioTheme + theme: GalioTheme, }; Checkbox.propTypes = { @@ -185,21 +174,21 @@ Checkbox.propTypes = { ]), disabled: PropTypes.bool, flexDirection: PropTypes.oneOfType([ - PropTypes.oneOf(["row", "row-reverse", "column", "column-reverse"]), - PropTypes.string + PropTypes.oneOf(['row', 'row-reverse', 'column', 'column-reverse']), + PropTypes.string, ]), iconColor: PropTypes.string, iconName: PropTypes.string, iconSize: PropTypes.number, iconFamily: PropTypes.string, image: PropTypes.string, - imageStyle: PropTypes.any, //style the image + imageStyle: PropTypes.any, // style the image initialValue: PropTypes.bool, label: PropTypes.string.isRequired, - labelStyle: PropTypes.any, //style the text + labelStyle: PropTypes.any, // style the text onChange: PropTypes.func, - styles: PropTypes.any, //style the whole View element, - theme: PropTypes.any + styles: PropTypes.any, // style the whole View element, + theme: PropTypes.any, }; export default withGalio(Checkbox, styles); diff --git a/src/Icon.js b/src/Icon.js index e9e5804..43ef204 100644 --- a/src/Icon.js +++ b/src/Icon.js @@ -12,36 +12,41 @@ const Galio = createIconSetFromIcoMoon(galioConfig, 'Galio', './fonts/galio.ttf' // Galio Fonts have to loaded with Fonts.loadAsync if you're // using Expo (you can export GalioFont from index in order to import it) -class Icon extends React.Component { - render() { - const { name, family, size, color, styles, theme, ...rest } = this.props; - if (family == 'Galio') { - if (name) { - return ( - - ); - } - } else { - const IconInstance = getIconType(family); - if (name && IconInstance) { - return ( - - ); - } +function Icon({ + name, + family, + size, + color, + styles, + theme, + ...rest +}) { + if (family === 'Galio') { + if (name) { + return ( + + ); + } + } else { + const IconInstance = getIconType(family); + if (name && IconInstance) { + return ( + + ); } - - return null; } + + return null; } Icon.defaultProps = { diff --git a/src/Input.js b/src/Input.js index 48c36a1..9d08c8b 100644 --- a/src/Input.js +++ b/src/Input.js @@ -1,117 +1,105 @@ import React from 'react'; import { View, Text, TextInput, StyleSheet, TouchableOpacity } from 'react-native'; import PropTypes from 'prop-types'; -// galio components -import { Icon } from '.'; +import Icon from './Icon'; import GalioTheme, { withGalio } from './theme'; -// TO-DO: -// 1. State functionality for Redux/Context/basic state stuff -// 2. Maybe options for changind the View text for the viewPass button -// 3. Idk. What else should we do in order to make this even more reusable. +function Input({ + style, + type, + placeholderTextColor, + label, + color, + help, + bgColor, + borderless, + viewPass, + rounded, + icon, + family, + left, + right, + iconColor, + topHelp, + bottomHelp, + theme, + styles, + iconSize, + iconContent, + password, + ...rest +}) { + const [isPassword, setIsPassword] = React.useState(false); + React.useEffect(() => { + setIsPassword(password); + }, []); -class Input extends React.Component { - state = { - isPassword: false, - }; + const inputViewStyles = [ + styles.inputStyle, + styles.inputContainer, + bgColor && { backgroundColor: bgColor }, + rounded && styles.rounded, + borderless && styles.borderless, + style, + ]; - componentDidMount() { - const { password } = this.props; - this.setState({ isPassword: password }); - } - render() { - const { - onRef, - style, - type, - password, - placeholderTextColor, - label, - color, - help, - bgColor, - borderless, - viewPass, - rounded, - icon, - family, - left, - right, - iconColor, - topHelp, - bottomHelp, - theme, - styles, - iconSize, - iconContent, - ...props - } = this.props; - - const inputViewStyles = [ - styles.inputStyle, - styles.inputContainer, - bgColor && { backgroundColor: bgColor }, - rounded && styles.rounded, - borderless && styles.borderless, - style, - ]; - - const inputStyles = [ - styles.inputView, - borderless && icon && styles.inputIcon, - styles.inputText, - color && { color }, - ]; + const inputStyles = [ + styles.inputView, + borderless && icon && styles.inputIcon, + styles.inputText, + color && { color }, + ]; + + const iconInstance = icon ? ( + + ) : ( + iconContent + ); - const iconInstance = icon ? ( + const viewPassElement = password && viewPass && ( + setIsPassword(password)}> - ) : iconContent; + + ); + const lebelContent = label && {label}; + const helpContent = help && {help}; - const { isPassword } = this.state; - const viewPassElement = password && viewPass && ( - this.setState({ isPassword: !isPassword })}> - + {lebelContent} + {topHelp && !bottomHelp && helpContent} + + {left && !right && iconInstance} + - - ); - const lebelContent = label && {label}; - const helpContent = help && {help}; - - return ( - - {lebelContent} - {topHelp && !bottomHelp && helpContent} - - {left && !right && iconInstance} - - {right && iconInstance} - {viewPassElement} - - {bottomHelp && helpContent} + {right && iconInstance} + {viewPassElement} - ); - } + {bottomHelp && helpContent} + + ); } Input.defaultProps = { @@ -211,5 +199,4 @@ const styles = theme => borderWidth: 0, }, }); - export default withGalio(Input, styles); diff --git a/src/NavBar.js b/src/NavBar.js index 5fd7523..21c9296 100644 --- a/src/NavBar.js +++ b/src/NavBar.js @@ -3,15 +3,31 @@ import { View, TouchableOpacity, StyleSheet, Dimensions } from 'react-native'; import PropTypes from 'prop-types'; // galio components -import { Block, Text, Icon } from '.'; +import { Block, Text, Icon } from './'; import GalioTheme, { withGalio } from './theme'; const { height } = Dimensions.get('screen'); -class NavBar extends React.Component { - renderTitle = () => { - const { title, titleStyle, styles } = this.props; - +function NavBar({ + back, + hideLeft, + hideRight, + left, + leftStyle, + leftIconColor, + leftHitSlop, + name, + onLeftPress, + right, + rightStyle, + style, + styles, + transparent, + theme, + title, + titleStyle, +}) { + function renderTitle() { if (typeof title === 'string') { return ( @@ -23,62 +39,51 @@ class NavBar extends React.Component { if (!title) return null; return title; - }; - - renderLeft = () => { - const { - back, - left, - leftStyle, - leftIconColor, - onLeftPress, - theme, - styles, - leftHitSlop, - } = this.props; + } - if (left) { + function renderLeft() { + if (!hideLeft) { + if (name || back) { + return ( + + onLeftPress && onLeftPress()} hitSlop={leftHitSlop}> + + + + ); + } return {left}; } + return ; + } - return ( - - onLeftPress && onLeftPress()} hitSlop={leftHitSlop}> - - - - ); - }; - - renderRight = () => { - const { right, rightStyle, styles } = this.props; + function renderRight() { const hasIcons = React.Children.count(right) > 1; const rightStyles = [styles.right, rightStyle]; + if (!hideRight) { + return ( + + {right} + + ); + } + return ; + } - return ( - - {right} - - ); - }; - - render() { - const { transparent, style, styles } = this.props; - const navStyles = [styles.navBar, transparent && styles.transparent, style]; + const navStyles = [styles.navBar, transparent && styles.transparent, style]; - return ( - - {this.renderLeft()} - {this.renderTitle()} - {this.renderRight()} - - ); - } + return ( + + {renderLeft()} + {renderTitle()} + {renderRight()} + + ); } NavBar.defaultProps = { @@ -113,6 +118,9 @@ NavBar.propTypes = { style: PropTypes.any, styles: PropTypes.any, theme: PropTypes.any, + name: PropTypes.string, + hideLeft: PropTypes.bool, + hideRight: PropTypes.bool, }; const styles = theme => @@ -146,7 +154,7 @@ const styles = theme => right: { flex: 0.5, height: height * 0.07, - alignItems: 'flex-end', + alignItems: 'center', justifyContent: 'center', marginRight: theme.SIZES.BASE, }, diff --git a/src/Radio.js b/src/Radio.js index 39a831d..7e5467d 100644 --- a/src/Radio.js +++ b/src/Radio.js @@ -2,21 +2,28 @@ import React from 'react'; import { View, TouchableOpacity, StyleSheet } from 'react-native'; import PropTypes from 'prop-types'; // G A L I O - D E P E N D E N C Y -import { Text } from '.'; +import { Text } from './'; import GalioTheme, { withGalio } from './theme'; -class Radio extends React.Component { - constructor(props) { - super(props); - this.state = { - checked: props.initialValue, - }; - - this.spaceAround = this.spaceAround.bind(this); - } - +function Radio({ + color, + containerStyle, + disabled, + flexDirection, + initialValue, + label, + labelStyle, + onChange, + radioOuterStyle, + radioInnerStyle, + styles, + theme, + +}) { + const [checked, setChecked] = React.useState(initialValue); + React.useEffect(() => onChange(checked), [checked]); // A D D I N G - R E Q U I R E D - S P A C E (S) - B A S E D - O N - F L E X - D I R E C T I O N - spaceAround(direction) { + function spaceAround(direction) { switch (direction) { case 'row-reverse': return { marginRight: 10 }; @@ -30,73 +37,58 @@ class Radio extends React.Component { } // R E N D E R - L A B E L - renderLabel() { - const { label, disabled, flexDirection, labelStyle, styles } = this.props; + function renderLabel() { const labelStyles = [ styles.textStyles, disabled && styles.disabledLabel, labelStyle, - flexDirection && this.spaceAround(flexDirection), + flexDirection && spaceAround(flexDirection), ]; if (label) { return {label}; - } else { - return null; } + return null; } // O N - P R E S S - H A N D L E R - radioPressHandler() { - this.setState({ checked: !this.state.checked }, () => this.props.onChange(this.state.checked)); + function radioPressHandler() { + setChecked(!checked); } - render() { - const { props, state } = this; - const { - color, - styles, - disabled, - flexDirection, - containerStyle, - radioOuterStyle, - radioInnerStyle, - theme, - } = props; - - const containerStyles = [styles.container, flexDirection && { flexDirection }, containerStyle]; - - const whichColor = - color && theme.COLORS[color.toUpperCase()] ? theme.COLORS[color.toUpperCase()] : color; - - const radioButtonOuterStyles = [ - styles.radioOuterStyles, - { borderColor: whichColor }, - disabled && styles.disabledRadioOuter, - radioOuterStyle, - ]; - const radioButtonInnerStyles = [ - styles.radioInnerStyles, - { backgroundColor: whichColor }, - disabled && styles.disabledRadioInner, - radioInnerStyle, - ]; - - return ( - this.radioPressHandler()} - style={containerStyles} - activeOpacity={0.8} - disabled={disabled}> - - {state.checked ? : null} - - {this.renderLabel()} - - ); - } + const containerStyles = [styles.container, flexDirection && { flexDirection }, containerStyle]; + + const whichColor = + color && theme.COLORS[color.toUpperCase()] ? theme.COLORS[color.toUpperCase()] : color; + + const radioButtonOuterStyles = [ + styles.radioOuterStyles, + { borderColor: whichColor }, + disabled && styles.disabledRadioOuter, + radioOuterStyle, + ]; + + const radioButtonInnerStyles = [ + styles.radioInnerStyles, + { backgroundColor: whichColor }, + disabled && styles.disabledRadioInner, + radioInnerStyle, + ]; + + return ( + radioPressHandler()} + style={containerStyles} + activeOpacity={0.8} + disabled={disabled}> + + {checked ? : null} + + {renderLabel()} + + ); } const styles = theme => @@ -141,7 +133,7 @@ Radio.defaultProps = { initialValue: false, label: null, labelStyle: null, - onChange: () => {}, + onChange: () => { }, styles: {}, theme: GalioTheme, }; diff --git a/src/Slider.js b/src/Slider.js index 849ea9c..60bd90f 100644 --- a/src/Slider.js +++ b/src/Slider.js @@ -1,9 +1,8 @@ -import React, { PureComponent } from "react"; -import { View, Animated, StyleSheet, PanResponder } from "react-native"; -import PropTypes from "prop-types"; +import React, { PureComponent } from 'react'; +import { View, Animated, StyleSheet, PanResponder } from 'react-native'; +import PropTypes from 'prop-types'; import GalioTheme, { withGalio } from './theme'; - class Slider extends PureComponent { constructor(props) { super(props); @@ -27,30 +26,30 @@ class Slider extends PureComponent { } this._setCurrentValue(this._getValue(gestureState)); - this._fireChangeEvent('onValueChange') + this._fireChangeEvent('onValueChange'); }, onPanResponderRelease: (e, gestureState) => { - if (props.disabled) { - return; - } + if (props.disabled) { + return; + } - this._setCurrentValue(this._getValue(gestureState)); - this._fireChangeEvent('onSlidingComplete'); - } + this._setCurrentValue(this._getValue(gestureState)); + this._fireChangeEvent('onSlidingComplete'); + }, }); } - _getRatio = (value) => - (value - this.props.minimumValue) / - (this.props.maximumValue - this.props.minimumValue); + _getRatio = value => + (value - this.props.minimumValue) / (this.props.maximumValue - this.props.minimumValue); - _getThumbLeft = (value) => this._getRatio(value) * (this.state.containerSize.width - this.state.thumbSize.width) + _getThumbLeft = value => + this._getRatio(value) * (this.state.containerSize.width - this.state.thumbSize.width); _getCurrentVal = () => this.position.__getValue(); - _setCurrentValue = (value) => this.position.setValue(value); + _setCurrentValue = value => this.position.setValue(value); - _getValue = (gestureState) => { + _getValue = gestureState => { const length = this.state.containerSize.width - this.state.thumbSize.width; const thumbLeft = this._previousLeft + gestureState.dx; @@ -63,34 +62,31 @@ class Slider extends PureComponent { this.props.maximumValue, this.props.minimumValue + Math.round( - ratio * - (this.props.maximumValue - this.props.minimumValue) / - this.props.step, + (ratio * (this.props.maximumValue - this.props.minimumValue)) / this.props.step ) * - this.props.step, - ), + this.props.step + ) ); } return Math.max( this.props.minimumValue, Math.min( this.props.maximumValue, - ratio * (this.props.maximumValue - this.props.minimumValue) + - this.props.minimumValue, - ), + ratio * (this.props.maximumValue - this.props.minimumValue) + this.props.minimumValue + ) ); - } + }; // container size _measureContainer = x => { - this._handleMeasure("containerSize", x); + this._handleMeasure('containerSize', x); }; // track size _measureTrack = x => { - this._handleMeasure("trackSize", x); + this._handleMeasure('trackSize', x); }; // thumb size _measureThumb = x => { - this._handleMeasure("thumbSize", x); + this._handleMeasure('thumbSize', x); }; // calculate all of them _handleMeasure = (name, x) => { @@ -99,11 +95,7 @@ class Slider extends PureComponent { const storeName = `_${name}`; const currentSize = this[storeName]; - if ( - currentSize && - width === currentSize.width && - height === currentSize.height - ) { + if (currentSize && width === currentSize.width && height === currentSize.height) { return; } this[storeName] = size; // initialize a new var with the current sizes @@ -112,7 +104,7 @@ class Slider extends PureComponent { containerSize: this._containerSize, trackSize: this._trackSize, thumbSize: this._thumbSize, - measured: true + measured: true, }); } }; @@ -124,17 +116,26 @@ class Slider extends PureComponent { }; render() { - const { minimumValue, maximumValue, trackStyle, thumbStyle, activeColor, disabled, theme, styles } = this.props; + const { + minimumValue, + maximumValue, + trackStyle, + thumbStyle, + activeColor, + disabled, + theme, + styles, + } = this.props; const { containerSize, thumbSize, measured } = this.state; const thumbLeft = this.position.interpolate({ inputRange: [minimumValue, maximumValue], - outputRange: [0, containerSize.width - thumbSize.width] + outputRange: [0, containerSize.width - thumbSize.width], }); const minimumTrackWidth = this.position.interpolate({ inputRange: [minimumValue, maximumValue], - outputRange: [0, containerSize.width - thumbSize.width] + outputRange: [0, containerSize.width - thumbSize.width], }); const visibleStyle = {}; @@ -144,8 +145,8 @@ class Slider extends PureComponent { position: 'absolute', width: Animated.add(minimumTrackWidth, thumbSize.width / 2), backgroundColor: activeColor || theme.COLORS.PRIMARY, - ...visibleStyle - } + ...visibleStyle, + }; const containerStyles = [styles.container, styles]; @@ -156,22 +157,18 @@ class Slider extends PureComponent { style={[styles.track, trackStyle]} onLayout={this._measureTrack} /> - + @@ -187,13 +184,12 @@ Slider.defaultProps = { trackStyle: {}, thumbStyle: {}, value: 0, - disabled: false, step: 0, style: null, theme: GalioTheme, onSlidingComplete: () => {}, onSlidingStart: () => {}, - onValueChange: () => {} + onValueChange: () => {}, }; Slider.propTypes = { @@ -207,32 +203,33 @@ Slider.propTypes = { styles: PropTypes.any, onSlidingComplete: PropTypes.func, onSlidingStart: PropTypes.func, - onValueChange: PropTypes.func + onValueChange: PropTypes.func, }; -const styles = theme => StyleSheet.create({ - container: { - height: 40, - justifyContent: "center" - }, - track: { - height: theme.SIZES.TRACK_SIZE, - width: "100%", - borderRadius: theme.SIZES.TRACK_SIZE / 2, - position: "absolute", - backgroundColor: theme.COLORS.GREY - }, - thumb: { - width: theme.SIZES.THUMB_SIZE, - height: theme.SIZES.THUMB_SIZE, - borderRadius: theme.SIZES.THUMB_SIZE / 2, - borderWidth: 2, - borderColor: theme.COLORS.PRIMARY, - backgroundColor: theme.COLORS.WHITE - }, - disabled: { - backgroundColor: theme.COLORS.MUTED - } -}); +const styles = theme => + StyleSheet.create({ + container: { + height: 40, + justifyContent: 'center', + }, + track: { + height: theme.SIZES.TRACK_SIZE, + width: '100%', + borderRadius: theme.SIZES.TRACK_SIZE / 2, + position: 'absolute', + backgroundColor: theme.COLORS.GREY, + }, + thumb: { + width: theme.SIZES.THUMB_SIZE, + height: theme.SIZES.THUMB_SIZE, + borderRadius: theme.SIZES.THUMB_SIZE / 2, + borderWidth: 2, + borderColor: theme.COLORS.PRIMARY, + backgroundColor: theme.COLORS.WHITE, + }, + disabled: { + backgroundColor: theme.COLORS.MUTED, + }, + }); export default withGalio(Slider, styles); diff --git a/src/Switch.js b/src/Switch.js index 693292a..614a9eb 100644 --- a/src/Switch.js +++ b/src/Switch.js @@ -1,40 +1,40 @@ -import React, { Component } from 'react'; +import React from 'react'; import { Switch as Switcher } from 'react-native'; import PropTypes from 'prop-types'; import GalioTheme, { withGalio } from './theme'; -class Switch extends Component { - constructor(props) { - super(props); - this.state = { - switchValue: props.initialValue, - }; +function Switch({ + initialValue, + onChange, + color, + disabled, + trackColor, + ios_backgroundColor, + ...rest +}) { + const [switchValue, setSwitchValue] = React.useState(initialValue); + React.useEffect(() => { + onChange(switchValue); + }, [switchValue]); + function onPressSwitch() { + setSwitchValue(!switchValue); + return null; } - onPressSwitch() { - this.setState({ switchValue: !this.state.switchValue }, () => - this.props.onChange(this.state.switchValue) - ); - } - - render() { - const { initialValue, color, disabled, trackColor, ios_backgroundColor, ...rest } = this.props; - - trackColor.true = color === 'primary' ? GalioTheme.COLORS.PRIMARY : color; - - return ( - { - this.onPressSwitch(); - }} - {...rest} - /> - ); - } + // trackColor.true = color === 'primary' ? GalioTheme.COLORS.PRIMARY : color; + + return ( + { + onPressSwitch(); + }} + {...rest} + /> + ); } Switch.defaultProps = { diff --git a/src/Text.js b/src/Text.js index 91215c4..2e93d4f 100644 --- a/src/Text.js +++ b/src/Text.js @@ -5,27 +5,26 @@ import PropTypes from 'prop-types'; import normalize from './helpers/normalize'; import GalioTheme, { withGalio } from './theme'; -const Typography = props => { - const { - style, - h1, - h2, - h3, - h4, - h5, - p, - muted, - neutral, - size, - color, - bold, - italic, - center, - children, - styles, - theme, - ...rest - } = props; +function Typography({ + style, + h1, + h2, + h3, + h4, + h5, + p, + muted, + neutral, + size, + color, + bold, + italic, + center, + children, + styles, + theme, + ...rest +}) { return ( { {children} ); -}; +} Typography.defaultProps = { children: null, diff --git a/src/index.js b/src/index.js index d81444f..0a6004b 100644 --- a/src/index.js +++ b/src/index.js @@ -1,3 +1,6 @@ + +/* eslint-disable import/no-cycle */ + import Accordion from './Accordion'; import Block from './Block'; import Button from './Button'; @@ -12,9 +15,11 @@ import Slider from './Slider'; import Switch from './Switch'; import Text from './Text'; import Toast from './Toast'; + import theme, { withGalio, GalioProvider } from './theme'; import galioConfig from './config/galio.json'; + const GalioFont = require('./fonts/galio.ttf'); export { @@ -32,10 +37,9 @@ export { Text, Toast, Switch, - Toast, theme, withGalio, GalioProvider, galioConfig, - GalioFont + GalioFont, };