Merge pull request #216 from galio-org/dev

v0.7.0

package.json

@@ -1,7 +1,7 @@
 {
   "name": "galio-framework",
   "main": "src/index.js",
-  "version": "0.6.3",
+  "version": "0.7.0",
   "files": [
     "src/"
   ],

src/Accordion.js

@@ -9,8 +9,8 @@ import {
 import PropTypes from "prop-types";
 
 import Block from "./Block";
-import Icon from "./Icon";
-import Text from "./Text";
+import Icon from "./atomic/ions/Icon";
+import Text from "./atomic/ions/Text";
 import GalioTheme from "./theme";
 
 const { width } = Dimensions.get("screen");

src/Avatar.js

@@ -0,0 +1,109 @@
+import React from 'react';
+import { View, Text, StyleSheet, Image, ViewPropTypes } from 'react-native';
+import PropTypes from 'prop-types';
+import { withGalio } from 'theme';
+
+const Avatar = ({
+  source,
+  size,
+  label,
+  labelColor,
+  backgroundColor,
+  labelStyle,
+  imageProps,
+  imageStyle,
+  containerStyle,
+  styles,
+  theme,
+}) => {
+  const getContainerStyle = () => {
+    return {
+      width: size,
+      height: size,
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: size / 2,
+    };
+  };
+
+  const getLabelContainerStyle = () => {
+    return {
+      ...StyleSheet.absoluteFillObject,
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: size / 2,
+    };
+  };
+
+  const renderImage = () => {
+    if (source) {
+      return (
+        <Image
+          style={[getContainerStyle(), StyleSheet.absoluteFillObject, imageStyle]}
+          {...{ source }}
+          {...imageProps}
+        />
+      );
+    }
+    return null;
+  };
+
+  const labelContainerStyle = [
+    getLabelContainerStyle(),
+    source && styles.labelContainerWithInset,
+    { backgroundColor: backgroundColor || theme.COLORS.MUTED },
+  ];
+
+  const labelTextStyle = [
+    { fontSize: size * 0.32 },
+    styles.labelText,
+    labelColor && { color: labelColor },
+    labelStyle || {},
+  ];
+
+  return (
+    <View style={[getContainerStyle(), containerStyle]}>
+      <View style={labelContainerStyle}>
+        {label && (
+          <Text numberOfLines={1} style={labelTextStyle}>
+            {label}
+          </Text>
+        )}
+      </View>
+      {renderImage()}
+    </View>
+  );
+};
+
+Avatar.defaultProps = {
+  size: 50,
+};
+
+Avatar.propTypes = {
+  label: PropTypes.string,
+  labelColor: PropTypes.string,
+  size: PropTypes.number,
+  source: PropTypes.oneOfType([PropTypes.object, PropTypes.number]),
+  backgroundColor: PropTypes.string,
+  imageProps: PropTypes.object,
+  imageStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array, PropTypes.number]),
+  containerStyle: ViewPropTypes.style,
+  styles: PropTypes.any,
+  theme: PropTypes.any,
+};
+
+const styles = theme =>
+  StyleSheet.create({
+    labelContainerWithInset: {
+      top: 1,
+      right: 1,
+      bottom: 1,
+      left: 1,
+    },
+    labelText: {
+      color: theme.COLORS.BLACK,
+      backgroundColor: 'transparent',
+    },
+  });
+
+export default withGalio(Avatar, styles);

src/Card.js

@@ -2,8 +2,10 @@
 import React from 'react';
 import { Image, StyleSheet } from 'react-native';
 import PropTypes from 'prop-types';
-
-import { Block, Icon, Text } from './';
+// galio components
+import Block from './Block';
+import Text from './Text';
+import Icon from './Icon';
 import GalioTheme, { withGalio } from './theme';
 
 function Card({

src/Checkbox.js

@@ -3,7 +3,8 @@ import React from 'react';
 import { View, TouchableOpacity, StyleSheet, Image } from 'react-native';
 import PropTypes from 'prop-types';
 // galio dependency
-import { Icon, Text } from './';
+import Icon from './Icon';
+import Text from './Text';
 import GalioTheme, { withGalio } from './theme';
 
 function Checkbox({
@@ -26,9 +27,7 @@ function Checkbox({
   theme,
 }) {
   const [checked, setChecked] = React.useState(initialValue);
-  React.useEffect(() => {
-    onChange(checked);
-  }, [checked]);
+
   // adding the necessary margins depending on the flexDirection
   function spaceAround(direction) {
     switch (direction) {
@@ -73,8 +72,9 @@ function Checkbox({
 
   // onPress function that changes the component's state and callbacks the onChange prop
   function _onPress() {
-    setChecked(!checked);
-    return null;
+    const current = !checked;
+    onChange(current);
+    setChecked(current);
   }
 
   const colorStyle = theme.COLORS[color.toUpperCase()]; // this sets the correct color for the theme file

src/NavBar.js

@@ -3,7 +3,9 @@ import { View, TouchableOpacity, StyleSheet, Dimensions } from 'react-native';
 import PropTypes from 'prop-types';
 
 // galio components
-import { Block, Text, Icon } from './';
+import Block from './Block';
+import Text from './Text';
+import Icon from './Icon';
 import GalioTheme, { withGalio } from './theme';
 
 const { height } = Dimensions.get('screen');
@@ -16,6 +18,7 @@ function NavBar({
   leftStyle,
   leftIconColor,
   leftHitSlop,
+  leftIconSize,
   leftIconName,
   leftIconFamily,
   onLeftPress,
@@ -44,14 +47,14 @@ function NavBar({
 
   function renderLeft() {
     if (!hideLeft) {
-      if (leftIconName || back) {
+      if (leftIconName || back && !left) {
         return (
           <View style={[styles.left, leftStyle]}>
             <TouchableOpacity onPress={() => onLeftPress && onLeftPress()} hitSlop={leftHitSlop}>
               <Icon
                 family={leftIconFamily || "evilicons"}
                 color={leftIconColor || theme.COLORS.ICON}
-                size={theme.SIZES.BASE * 1.0625}
+                size={leftIconSize || theme.SIZES.BASE * 1.0625}
                 name={leftIconName || (back ? 'chevron-left' : 'navicon')}
               />
             </TouchableOpacity>

src/Radio.js

@@ -2,7 +2,7 @@ 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 './Text';
 import GalioTheme, { withGalio } from './theme';
 
 function Radio({
@@ -20,7 +20,7 @@ function Radio({
   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) {
@@ -53,7 +53,9 @@ function Radio({
 
   // O N - P R E S S - H A N D L E R
   function radioPressHandler() {
-    setChecked(!checked);
+    const current = !checked;
+    onChange(current);
+    setChecked(current);
   }
 
 

src/Switch.js

@@ -13,9 +13,6 @@ function Switch({
   ...rest
 }) {
   const [switchValue, setSwitchValue] = React.useState(initialValue);
-  React.useEffect(() => {
-    onChange(switchValue);
-  }, [switchValue]);
   function onPressSwitch() {
     setSwitchValue(!switchValue);
     return null;
@@ -27,11 +24,12 @@ function Switch({
     <Switcher
       disabled={disabled}
       trackColor={{ ...trackColor }}
-      ios_backgroundColor={ios_backgroundColor}
+      ios_backgroundColor={trackColor.false || ios_backgroundColor}
       value={switchValue}
       onValueChange={() => {
         onPressSwitch();
       }}
+      onChange={() => onChange()}
       {...rest}
     />
   );

src/Toast.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { Dimensions, StyleSheet, Animated, ViewPropTypes } from 'react-native';
 import PropTypes from 'prop-types';
 // galio components
-import { Text } from '.';
+import Text from './Text';
 import GalioTheme, { withGalio } from './theme';
 
 const { height } = Dimensions.get('screen');