From d118e952adb6ab9b970ffa0939995394e083615f Mon Sep 17 00:00:00 2001 From: shubhamkakkar Date: Thu, 15 Aug 2019 18:27:17 +0530 Subject: [PATCH 01/11] issue #104 resolved --- .idea/.gitignore | 3 + .idea/codeStyles/Project.xml | 38 ++++ .idea/codeStyles/codeStyleConfig.xml | 5 + .idea/galio.iml | 12 ++ .idea/inspectionProfiles/Project_Default.xml | 6 + .idea/misc.xml | 6 + .idea/modules.xml | 8 + .idea/vcs.xml | 6 + src/Block.js | 111 +++++------ src/Button.js | 113 ++++++----- src/Card.js | 59 +++--- src/Checkbox.js | 191 ++++++++----------- src/Icon.js | 56 +++--- src/Input.js | 182 +++++++++--------- src/NavBar.js | 103 +++++----- src/Radio.js | 117 +++++------- src/Slider.js | 159 ++++++++------- src/Switch.js | 62 +++--- src/Text.js | 43 ++--- src/index.js | 8 +- 20 files changed, 677 insertions(+), 611 deletions(-) create mode 100644 .idea/.gitignore create mode 100644 .idea/codeStyles/Project.xml create mode 100644 .idea/codeStyles/codeStyleConfig.xml create mode 100644 .idea/galio.iml create mode 100644 .idea/inspectionProfiles/Project_Default.xml create mode 100644 .idea/misc.xml create mode 100644 .idea/modules.xml create mode 100644 .idea/vcs.xml diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..0e40fe8 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,3 @@ + +# Default ignored files +/workspace.xml \ No newline at end of file diff --git a/.idea/codeStyles/Project.xml b/.idea/codeStyles/Project.xml new file mode 100644 index 0000000..eff9cd8 --- /dev/null +++ b/.idea/codeStyles/Project.xml @@ -0,0 +1,38 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/.idea/codeStyles/codeStyleConfig.xml b/.idea/codeStyles/codeStyleConfig.xml new file mode 100644 index 0000000..79ee123 --- /dev/null +++ b/.idea/codeStyles/codeStyleConfig.xml @@ -0,0 +1,5 @@ + + + + \ No newline at end of file diff --git a/.idea/galio.iml b/.idea/galio.iml new file mode 100644 index 0000000..24643cc --- /dev/null +++ b/.idea/galio.iml @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml new file mode 100644 index 0000000..03d9549 --- /dev/null +++ b/.idea/inspectionProfiles/Project_Default.xml @@ -0,0 +1,6 @@ + + + + \ No newline at end of file diff --git a/.idea/misc.xml b/.idea/misc.xml new file mode 100644 index 0000000..24eb271 --- /dev/null +++ b/.idea/misc.xml @@ -0,0 +1,6 @@ + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..9a26608 --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..94a25f7 --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/src/Block.js b/src/Block.js index 79a8375..ddb7c1f 100644 --- a/src/Block.js +++ b/src/Block.js @@ -1,67 +1,65 @@ -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(props) { + const { + row, + flex, + center, + middle, + top, + bottom, + right, + left, + shadow, + space, + fluid, + height, + shadowColor, + card, + width, + safe, + children, + style, + styles, + ...rest + } = props; - 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 +141,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..4e0acb2 100644 --- a/src/Button.js +++ b/src/Button.js @@ -2,13 +2,13 @@ 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 'galio-framework'; import GalioTheme, { withGalio } from './theme'; const { width } = Dimensions.get('window'); -class Button extends React.Component { - renderContent = () => { +function Button(props) { + function renderContent() { const { loading, loadingSize, @@ -24,7 +24,7 @@ class Button extends React.Component { textStyle, styles, theme, - } = this.props; + } = props; const textStyles = [styles.customText, textStyle]; @@ -37,7 +37,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 +54,58 @@ 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 { + style, + color, + size, + disabled, + round, + radius, + onlyIcon, + iconSize, + opacity, + shadowless, + shadowColor, + styles, + theme, + ...rest + } = 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 ( + + {renderContent()} + + ); } Button.defaultProps = { diff --git a/src/Card.js b/src/Card.js index 5803ce3..e0d6992 100644 --- a/src/Card.js +++ b/src/Card.js @@ -1,13 +1,14 @@ -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 'galio-framework'; import GalioTheme, { withGalio } from './theme'; -class Card extends Component { - renderImage() { - const { image, imageBlockStyle, imageStyle, styles } = this.props; +function Card(props) { + function renderImage() { + const { image, imageBlockStyle, imageStyle, styles } = props; if (!image) return null; return ( @@ -17,15 +18,15 @@ class Card extends Component { ); } - renderAvatar() { - const { avatar, styles } = this.props; + function renderAvatar() { + const { avatar, styles } = props; if (!avatar) return null; return ; } - renderLocation() { - const { location, locationColor, theme } = this.props; + function renderLocation() { + const { location, locationColor, theme } = props; if (!location) return null; if (typeof location !== 'string') { @@ -51,12 +52,12 @@ class Card extends Component { ); } - renderAuthor() { - const { title, titleColor, caption, captionColor, footerStyle, theme, styles } = this.props; + function renderAuthor() { + const { title, titleColor, caption, captionColor, footerStyle, theme, styles } = props; return ( - {this.renderAvatar()} + {renderAvatar()} @@ -69,26 +70,24 @@ class Card extends Component { {caption} - {this.renderLocation()} + {renderLocation()} ); } - render() { - const { card, shadow, borderless, style, ...props } = this.props; + const { card, shadow, borderless, style, children, ...rest } = 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 +96,12 @@ Card.defaultProps = { borderless: false, styles: {}, theme: GalioTheme, + title: '', + titleColor: '', + caption: '', + captionColor: '', + footerStyle: {}, + avatar: '', }; Card.propTypes = { @@ -105,6 +110,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..7535ec5 100644 --- a/src/Checkbox.js +++ b/src/Checkbox.js @@ -1,29 +1,24 @@ -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 'galio-framework'; +import GalioTheme, { withGalio } from './theme'; + +function Checkbox(props) { + const [checked, setchecked] = React.useState(props.initialValue); + React.useEffect(() => { + props.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 +26,112 @@ 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 { label, disabled, flexDirection, image, labelStyle, imageStyle, styles } = props; 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() { + const { iconName, iconFamily, iconColor, iconSize } = props; - 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 { 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 }, + 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 +139,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 +151,7 @@ Checkbox.defaultProps = { labelStyle: null, onChange: () => {}, styles: {}, - theme: GalioTheme + theme: GalioTheme, }; Checkbox.propTypes = { @@ -185,21 +162,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..d2d058f 100644 --- a/src/Icon.js +++ b/src/Icon.js @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; import GalioTheme, { withGalio } from './theme'; import getIconType from './helpers/getIconType'; -import galioConfig from './config/galio.json'; +import galioConfig from './fonts/galio.json'; const Galio = createIconSetFromIcoMoon(galioConfig, 'Galio', './fonts/galio.ttf'); @@ -12,36 +12,34 @@ 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(props) { + const { name, family, size, color, styles, theme, ...rest } = props; + 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 66316c9..d0ad22c 100644 --- a/src/Input.js +++ b/src/Input.js @@ -1,115 +1,110 @@ 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: +// TODO: // 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. -class Input extends React.Component { - state = { - isPassword: false, - }; +function Input(props) { + const [isPassword, setIsPassword] = React.useState(false); + const { password } = props; + React.useEffect(() => { + setIsPassword(password); + }, []); + const { + style, + type, + placeholderTextColor, + label, + color, + help, + bgColor, + borderless, + viewPass, + rounded, + icon, + family, + left, + right, + iconColor, + topHelp, + bottomHelp, + theme, + styles, + iconSize, + iconContent, + ...rest + } = props; - componentDidMount() { - const { password } = this.props; - this.setState({ isPassword: password }); - } + const inputViewStyles = [ + styles.inputStyle, + styles.inputContainer, + bgColor && { backgroundColor: bgColor }, + rounded && styles.rounded, + borderless && styles.borderless, + style, + ]; - render() { - const { - 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 inputStyles = [ + styles.inputView, + borderless && icon && styles.inputIcon, + styles.inputText, + color && { color }, + ]; - const inputViewStyles = [ - styles.inputStyle, - styles.inputContainer, - bgColor && { backgroundColor: bgColor }, - rounded && styles.rounded, - borderless && styles.borderless, - style, - ]; + const iconInstance = icon ? ( + + ) : ( + iconContent + ); - const inputStyles = [ - styles.inputView, - borderless && icon && styles.inputIcon, - styles.inputText, - color && { color }, - ]; - - 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 = { @@ -207,5 +202,4 @@ const styles = theme => borderWidth: 0, }, }); - export default withGalio(Input, styles); diff --git a/src/NavBar.js b/src/NavBar.js index 656a955..29b12f4 100644 --- a/src/NavBar.js +++ b/src/NavBar.js @@ -3,14 +3,14 @@ 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 'galio-framework'; import GalioTheme, { withGalio } from './theme'; const { height } = Dimensions.get('screen'); -class NavBar extends React.Component { - renderTitle = () => { - const { title, titleStyle, styles } = this.props; +function NavBar(props) { + function renderTitle() { + const { title, titleStyle, styles } = props; if (typeof title === 'string') { return ( @@ -23,53 +23,65 @@ class NavBar extends React.Component { if (!title) return null; return title; - }; - - renderLeft = () => { - const { back, left, leftStyle, leftIconColor, onLeftPress, theme, styles } = this.props; + } - if (left) { + function renderLeft() { + const { + back, + left, + leftStyle, + leftIconColor, + onLeftPress, + theme, + styles, + name, + hideLeft, + } = props; + + if (!hideLeft) { + if (name || back) { + return ( + + onLeftPress && onLeftPress()}> + + + + ); + } return {left}; } + return ; + } - return ( - - onLeftPress && onLeftPress()}> - - - - ); - }; - - renderRight = () => { - const { right, rightStyle, styles } = this.props; + function renderRight() { + const { right, rightStyle, styles, hideRight } = props; 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 { transparent, style, styles } = props; + const navStyles = [styles.navBar, transparent && styles.transparent, style]; - return ( - - {this.renderLeft()} - {this.renderTitle()} - {this.renderRight()} - - ); - } + return ( + + {renderLeft()} + {renderTitle()} + {renderRight()} + + ); } NavBar.defaultProps = { @@ -102,6 +114,9 @@ NavBar.propTypes = { style: PropTypes.any, styles: PropTypes.any, theme: PropTypes.any, + name: PropTypes.string, + hideLeft: PropTypes.bool, + hideRight: PropTypes.bool, }; const styles = theme => @@ -135,7 +150,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..aa5b7fa 100644 --- a/src/Radio.js +++ b/src/Radio.js @@ -2,21 +2,14 @@ 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 'galio-framework'; 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(props) { + const [checked, setChecked] = React.useState(props.initialValue); + React.useEffect(() => props.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 +23,69 @@ 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 { label, disabled, flexDirection, labelStyle, styles } = props; 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 { + 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 ( + radioPressHandler()} + style={containerStyles} + activeOpacity={0.8} + disabled={disabled}> + + {checked ? : null} + + {renderLabel()} + + ); } const styles = theme => 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 bdc8bf3..dac3a90 100644 --- a/src/index.js +++ b/src/index.js @@ -1,3 +1,4 @@ +/* eslint-disable import/no-cycle */ import Block from './Block'; import Button from './Button'; import Card from './Card'; @@ -9,9 +10,11 @@ import Radio from './Radio'; import Slider from './Slider'; import Switch from './Switch'; import Text from './Text'; + import theme, { withGalio, GalioProvider } from './theme'; -import galioConfig from './config/galio.json'; +import galioConfig from './fonts/galio.json'; + const GalioFont = require('./fonts/galio.ttf'); export { @@ -30,6 +33,5 @@ export { withGalio, GalioProvider, galioConfig, - GalioFont + GalioFont, }; - From a36cbaa21b105336f708c9643d2f2fe12ebeea81 Mon Sep 17 00:00:00 2001 From: shubhamkakkar Date: Wed, 21 Aug 2019 13:11:42 +0530 Subject: [PATCH 02/11] PR #116, requested changes --- .idea/.gitignore | 3 -- .idea/codeStyles/Project.xml | 38 -------------------- .idea/codeStyles/codeStyleConfig.xml | 5 --- .idea/galio.iml | 12 ------- .idea/inspectionProfiles/Project_Default.xml | 6 ---- .idea/misc.xml | 6 ---- .idea/modules.xml | 8 ----- .idea/vcs.xml | 6 ---- src/Block.js | 2 +- src/Button.js | 2 +- src/Card.js | 2 +- src/Checkbox.js | 2 +- src/NavBar.js | 2 +- src/Radio.js | 35 +++++++++--------- src/index.js | 2 +- 15 files changed, 25 insertions(+), 106 deletions(-) delete mode 100644 .idea/.gitignore delete mode 100644 .idea/codeStyles/Project.xml delete mode 100644 .idea/codeStyles/codeStyleConfig.xml delete mode 100644 .idea/galio.iml delete mode 100644 .idea/inspectionProfiles/Project_Default.xml delete mode 100644 .idea/misc.xml delete mode 100644 .idea/modules.xml delete mode 100644 .idea/vcs.xml diff --git a/.idea/.gitignore b/.idea/.gitignore deleted file mode 100644 index 0e40fe8..0000000 --- a/.idea/.gitignore +++ /dev/null @@ -1,3 +0,0 @@ - -# Default ignored files -/workspace.xml \ No newline at end of file diff --git a/.idea/codeStyles/Project.xml b/.idea/codeStyles/Project.xml deleted file mode 100644 index eff9cd8..0000000 --- a/.idea/codeStyles/Project.xml +++ /dev/null @@ -1,38 +0,0 @@ - - - - - - - - - - - - \ No newline at end of file diff --git a/.idea/codeStyles/codeStyleConfig.xml b/.idea/codeStyles/codeStyleConfig.xml deleted file mode 100644 index 79ee123..0000000 --- a/.idea/codeStyles/codeStyleConfig.xml +++ /dev/null @@ -1,5 +0,0 @@ - - - - \ No newline at end of file diff --git a/.idea/galio.iml b/.idea/galio.iml deleted file mode 100644 index 24643cc..0000000 --- a/.idea/galio.iml +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - \ No newline at end of file diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml deleted file mode 100644 index 03d9549..0000000 --- a/.idea/inspectionProfiles/Project_Default.xml +++ /dev/null @@ -1,6 +0,0 @@ - - - - \ No newline at end of file diff --git a/.idea/misc.xml b/.idea/misc.xml deleted file mode 100644 index 24eb271..0000000 --- a/.idea/misc.xml +++ /dev/null @@ -1,6 +0,0 @@ - - - - - \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml deleted file mode 100644 index 9a26608..0000000 --- a/.idea/modules.xml +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml deleted file mode 100644 index 94a25f7..0000000 --- a/.idea/vcs.xml +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/src/Block.js b/src/Block.js index ddb7c1f..abb2a16 100644 --- a/src/Block.js +++ b/src/Block.js @@ -56,7 +56,7 @@ function Block(props) { } return ( - + {children} ); diff --git a/src/Button.js b/src/Button.js index 4e0acb2..b1c23f0 100644 --- a/src/Button.js +++ b/src/Button.js @@ -2,7 +2,7 @@ import React from 'react'; import { ActivityIndicator, Dimensions, StyleSheet, TouchableOpacity, Text } from 'react-native'; import PropTypes from 'prop-types'; // galio components -import { Icon } from 'galio-framework'; +import { Icon } from './'; import GalioTheme, { withGalio } from './theme'; const { width } = Dimensions.get('window'); diff --git a/src/Card.js b/src/Card.js index e0d6992..6fb8f81 100644 --- a/src/Card.js +++ b/src/Card.js @@ -3,7 +3,7 @@ import React from 'react'; import { Image, StyleSheet } from 'react-native'; import PropTypes from 'prop-types'; -import { Block, Icon, Text } from 'galio-framework'; +import { Block, Icon, Text } from './'; import GalioTheme, { withGalio } from './theme'; function Card(props) { diff --git a/src/Checkbox.js b/src/Checkbox.js index 7535ec5..9415ebf 100644 --- a/src/Checkbox.js +++ b/src/Checkbox.js @@ -3,7 +3,7 @@ import React from 'react'; import { View, TouchableOpacity, StyleSheet, Image } from 'react-native'; import PropTypes from 'prop-types'; // galio dependency -import { Icon, Text } from 'galio-framework'; +import { Icon, Text } from './'; import GalioTheme, { withGalio } from './theme'; function Checkbox(props) { diff --git a/src/NavBar.js b/src/NavBar.js index 29b12f4..055b175 100644 --- a/src/NavBar.js +++ b/src/NavBar.js @@ -3,7 +3,7 @@ import { View, TouchableOpacity, StyleSheet, Dimensions } from 'react-native'; import PropTypes from 'prop-types'; // galio components -import { Block, Text, Icon } from 'galio-framework'; +import { Block, Text, Icon } from './'; import GalioTheme, { withGalio } from './theme'; const { height } = Dimensions.get('screen'); diff --git a/src/Radio.js b/src/Radio.js index aa5b7fa..7e5467d 100644 --- a/src/Radio.js +++ b/src/Radio.js @@ -2,12 +2,26 @@ 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 'galio-framework'; +import { Text } from './'; import GalioTheme, { withGalio } from './theme'; -function Radio(props) { - const [checked, setChecked] = React.useState(props.initialValue); - React.useEffect(() => props.onChange(checked), [checked]); +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 function spaceAround(direction) { switch (direction) { @@ -24,7 +38,6 @@ function Radio(props) { // R E N D E R - L A B E L function renderLabel() { - const { label, disabled, flexDirection, labelStyle, styles } = props; const labelStyles = [ styles.textStyles, @@ -44,16 +57,6 @@ function Radio(props) { setChecked(!checked); } - const { - color, - styles, - disabled, - flexDirection, - containerStyle, - radioOuterStyle, - radioInnerStyle, - theme, - } = props; const containerStyles = [styles.container, flexDirection && { flexDirection }, containerStyle]; @@ -130,7 +133,7 @@ Radio.defaultProps = { initialValue: false, label: null, labelStyle: null, - onChange: () => {}, + onChange: () => { }, styles: {}, theme: GalioTheme, }; diff --git a/src/index.js b/src/index.js index dac3a90..706c271 100644 --- a/src/index.js +++ b/src/index.js @@ -13,7 +13,7 @@ import Text from './Text'; import theme, { withGalio, GalioProvider } from './theme'; -import galioConfig from './fonts/galio.json'; +import galioConfig from './config/galio.json'; const GalioFont = require('./fonts/galio.ttf'); From 7abeeaafe9a3951206aa2cd390e9f0b99be4c4de Mon Sep 17 00:00:00 2001 From: Shubham kakkar Date: Tue, 27 Aug 2019 21:32:53 +0530 Subject: [PATCH 03/11] Update Checkbox.js --- src/Checkbox.js | 28 ++++++++++++++++++++-------- 1 file changed, 20 insertions(+), 8 deletions(-) diff --git a/src/Checkbox.js b/src/Checkbox.js index 9415ebf..061ef66 100644 --- a/src/Checkbox.js +++ b/src/Checkbox.js @@ -6,10 +6,27 @@ import PropTypes from 'prop-types'; import { Icon, Text } from './'; import GalioTheme, { withGalio } from './theme'; -function Checkbox(props) { - const [checked, setchecked] = React.useState(props.initialValue); +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(() => { - props.onChange(checked); + onChange(checked); }, [checked]); // adding the necessary margins depending on the flexDirection function spaceAround(direction) { @@ -27,8 +44,6 @@ function Checkbox(props) { // rendering the image/text for the checkbox function renderLabel() { - const { label, disabled, flexDirection, image, labelStyle, imageStyle, styles } = props; - const labelStyles = [ styles.textStyles, disabled && styles.disabledLabel, @@ -47,7 +62,6 @@ function Checkbox(props) { // adding the check icon function renderChecked() { - const { iconName, iconFamily, iconColor, iconSize } = props; if (checked) { return ; @@ -62,8 +76,6 @@ function Checkbox(props) { return null; } - 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]; From 7f2d7366e8b65549de9b5ef35b37dc7534b126e7 Mon Sep 17 00:00:00 2001 From: Shubham kakkar Date: Tue, 27 Aug 2019 21:33:52 +0530 Subject: [PATCH 04/11] Update Block.js --- src/Block.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/Block.js b/src/Block.js index abb2a16..19eaaf6 100644 --- a/src/Block.js +++ b/src/Block.js @@ -3,8 +3,7 @@ import { View, StyleSheet, SafeAreaView } from 'react-native'; import PropTypes from 'prop-types'; import GalioTheme, { withGalio } from './theme'; -function Block(props) { - const { +function Block({ row, flex, center, @@ -25,7 +24,7 @@ function Block(props) { style, styles, ...rest - } = props; +}) { const styleBlock = [ styles.block, From cd153a51159654c0c2f25f6858c8b6aaf144c3a4 Mon Sep 17 00:00:00 2001 From: Shubham kakkar Date: Tue, 27 Aug 2019 21:38:22 +0530 Subject: [PATCH 05/11] Update Button.js --- src/Button.js | 61 ++++++++++++++++++++++----------------------------- 1 file changed, 26 insertions(+), 35 deletions(-) diff --git a/src/Button.js b/src/Button.js index b1c23f0..7338431 100644 --- a/src/Button.js +++ b/src/Button.js @@ -7,25 +7,33 @@ import GalioTheme, { withGalio } from './theme'; const { width } = Dimensions.get('window'); -function Button(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 { - loading, - loadingSize, - children, - onlyIcon, - icon, - iconFamily, - iconSize, - iconColor, - uppercase, - lowercase, - capitalize, - textStyle, - styles, - theme, - } = props; - const textStyles = [styles.customText, textStyle]; // workaround for textTransform not supported on Expo SDK 29.0.0 or 30.0.0 @@ -61,23 +69,6 @@ function Button(props) { return content; } - const { - style, - color, - size, - disabled, - round, - radius, - onlyIcon, - iconSize, - opacity, - shadowless, - shadowColor, - styles, - theme, - ...rest - } = props; - const colorStyle = styles[color]; const buttonStyles = [ From 1f02587be3ba95b7790863cf38dd6bff73fd7e2e Mon Sep 17 00:00:00 2001 From: Shubham kakkar Date: Tue, 27 Aug 2019 21:43:16 +0530 Subject: [PATCH 06/11] Update Card.js --- src/Card.js | 30 ++++++++++++++++++++---------- 1 file changed, 20 insertions(+), 10 deletions(-) diff --git a/src/Card.js b/src/Card.js index 6fb8f81..6d60a20 100644 --- a/src/Card.js +++ b/src/Card.js @@ -6,11 +6,28 @@ import PropTypes from 'prop-types'; import { Block, Icon, Text } from './'; import GalioTheme, { withGalio } from './theme'; -function Card(props) { +function Card({ + avatar, + borderless, + caption, + captionColor, + card, + children, + footerStyle, + image, + imageBlockStyle, + imageStyle, + location, + locationColor, + shadow, + styles, + title, + titleColor, + theme, + ...rest +}) { function renderImage() { - const { image, imageBlockStyle, imageStyle, styles } = props; if (!image) return null; - return ( @@ -19,16 +36,12 @@ function Card(props) { } function renderAvatar() { - const { avatar, styles } = props; if (!avatar) return null; - return ; } function renderLocation() { - const { location, locationColor, theme } = props; if (!location) return null; - if (typeof location !== 'string') { return location; } @@ -53,8 +66,6 @@ function Card(props) { } function renderAuthor() { - const { title, titleColor, caption, captionColor, footerStyle, theme, styles } = props; - return ( {renderAvatar()} @@ -77,7 +88,6 @@ function Card(props) { ); } - const { card, shadow, borderless, style, children, ...rest } = props; const styleCard = [borderless && { borderWidth: 0 }, style]; From 83194ac0af0ce8883544dfb462e8b7747679e8ed Mon Sep 17 00:00:00 2001 From: Shubham kakkar Date: Tue, 27 Aug 2019 21:44:08 +0530 Subject: [PATCH 07/11] Update Icon.js --- src/Icon.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/Icon.js b/src/Icon.js index d2d058f..ebf7154 100644 --- a/src/Icon.js +++ b/src/Icon.js @@ -12,8 +12,15 @@ 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) -function Icon(props) { - const { name, family, size, color, styles, theme, ...rest } = props; +function Icon({ + name, + family, + size, + color, + styles, + theme, + ...rest +}) { if (family === 'Galio') { if (name) { return ( From ac42c0cf7766c901a3f2aebe29bcaed5065c4e8e Mon Sep 17 00:00:00 2001 From: Shubham kakkar Date: Tue, 27 Aug 2019 21:45:30 +0530 Subject: [PATCH 08/11] Update Input.js --- src/Input.js | 55 ++++++++++++++++++++++++++-------------------------- 1 file changed, 27 insertions(+), 28 deletions(-) diff --git a/src/Input.js b/src/Input.js index d0ad22c..34aa004 100644 --- a/src/Input.js +++ b/src/Input.js @@ -9,36 +9,35 @@ import GalioTheme, { withGalio } from './theme'; // 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(props) { +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); - const { password } = props; React.useEffect(() => { setIsPassword(password); }, []); - const { - style, - type, - placeholderTextColor, - label, - color, - help, - bgColor, - borderless, - viewPass, - rounded, - icon, - family, - left, - right, - iconColor, - topHelp, - bottomHelp, - theme, - styles, - iconSize, - iconContent, - ...rest - } = props; const inputViewStyles = [ styles.inputStyle, @@ -65,8 +64,8 @@ function Input(props) { color={iconColor || placeholderTextColor || theme.COLORS.PLACEHOLDER} /> ) : ( - iconContent - ); + iconContent + ); const viewPassElement = password && viewPass && ( setIsPassword(password)}> From a166c2e2e65794f7b2374841dc9bbdee0637c112 Mon Sep 17 00:00:00 2001 From: Shubham kakkar Date: Tue, 27 Aug 2019 21:48:29 +0530 Subject: [PATCH 09/11] Update NavBar.js --- src/NavBar.js | 37 +++++++++++++++++++------------------ 1 file changed, 19 insertions(+), 18 deletions(-) diff --git a/src/NavBar.js b/src/NavBar.js index 055b175..bc643e3 100644 --- a/src/NavBar.js +++ b/src/NavBar.js @@ -8,10 +8,25 @@ import GalioTheme, { withGalio } from './theme'; const { height } = Dimensions.get('screen'); -function NavBar(props) { +function NavBar({ + back, + hideLeft, + hideRight, + left, + leftStyle, + leftIconColor, + name, + onLeftPress, + right, + rightStyle, + style, + styles, + transparent, + theme, + title, + titleStyle, +}) { function renderTitle() { - const { title, titleStyle, styles } = props; - if (typeof title === 'string') { return ( @@ -26,18 +41,6 @@ function NavBar(props) { } function renderLeft() { - const { - back, - left, - leftStyle, - leftIconColor, - onLeftPress, - theme, - styles, - name, - hideLeft, - } = props; - if (!hideLeft) { if (name || back) { return ( @@ -59,7 +62,6 @@ function NavBar(props) { } function renderRight() { - const { right, rightStyle, styles, hideRight } = props; const hasIcons = React.Children.count(right) > 1; const rightStyles = [styles.right, rightStyle]; if (!hideRight) { @@ -72,7 +74,6 @@ function NavBar(props) { return ; } - const { transparent, style, styles } = props; const navStyles = [styles.navBar, transparent && styles.transparent, style]; return ( @@ -92,7 +93,7 @@ NavBar.defaultProps = { left: null, leftStyle: null, leftIconColor: null, - onLeftPress: () => {}, + onLeftPress: () => { }, right: null, rightStyle: null, style: null, From 1dd31527eeb394f9fdb64e2503c74cda2c9f7997 Mon Sep 17 00:00:00 2001 From: shubhamkakkar Date: Fri, 30 Aug 2019 11:19:06 +0530 Subject: [PATCH 10/11] setchecked -> setChecked --- src/Checkbox.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Checkbox.js b/src/Checkbox.js index 061ef66..ecb2123 100644 --- a/src/Checkbox.js +++ b/src/Checkbox.js @@ -24,7 +24,7 @@ function Checkbox({ style, styles, }) { - const [checked, setchecked] = React.useState(initialValue); + const [checked, setChecked] = React.useState(initialValue); React.useEffect(() => { onChange(checked); }, [checked]); @@ -72,7 +72,7 @@ function Checkbox({ // onPress function that changes the component's state and callbacks the onChange prop function _onPress() { - setchecked(!checked); + setChecked(!checked); return null; } From fb6ab6cb2733d31420de497ce160f2f3d8d9bc73 Mon Sep 17 00:00:00 2001 From: Shubham kakkar Date: Fri, 30 Aug 2019 15:22:51 +0530 Subject: [PATCH 11/11] Update Icon.js --- src/Icon.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Icon.js b/src/Icon.js index ebf7154..43ef204 100644 --- a/src/Icon.js +++ b/src/Icon.js @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; import GalioTheme, { withGalio } from './theme'; import getIconType from './helpers/getIconType'; -import galioConfig from './fonts/galio.json'; +import galioConfig from './config/galio.json'; const Galio = createIconSetFromIcoMoon(galioConfig, 'Galio', './fonts/galio.ttf');