Merge pull request #252 from galio-org/dev

v0.8.1

Author: palingheorghe

.gitignore

@@ -1,6 +1,5 @@
 node_modules/**/*
 .expo/*
 npm-debug.*
-package-lock.json
 yarn.lock
 .DS_Store

README.md

@@ -72,7 +72,7 @@ Under Galio's belt:
 
 ## Documentation
 
-The documentation for Galio is hosted at our [our website](https://galio.io/docs?ref=galio-repo)
+The documentation for Galio is hosted at [our website](https://galio.io/docs?ref=galio-repo)
 
 ## Resources
 
@@ -88,7 +88,7 @@ The documentation for Galio is hosted at our [our website](https://galio.io/docs
 We use GitHub Issues as the official bug tracker for Galio. Here are some advices for our users that want to report an issue:
 
 1. Make sure that you are using the latest version of Galio. Check for your fork's master branch status and see if it's up to date with the upstream/master (our repository)
-2. Provide us with reproductible steps for the issue.
+2. Provide us with reproducible steps for the issue.
 3. Some issues may be platform specific, so specifying what platform and if it's a simulator or a hardware device will help a lot.
 
 ## Contributors

package-lock.json

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

package.json

@@ -6,19 +6,20 @@ import Text from './atomic/ions/Text';
 import GalioTheme, { withGalio } from './theme';
 
 function Radio({
-  color,
-  containerStyle,
-  disabled,
-  flexDirection,
-  initialValue,
-  label,
-  labelStyle,
-  onChange,
-  radioOuterStyle,
-  radioInnerStyle,
-  styles,
-  theme,
-}) {
+                 color,
+                 containerStyle,
+                 disabled,
+                 flexDirection,
+                 initialValue,
+                 label,
+                 labelStyle,
+                 onChange,
+                 radioOuterStyle,
+                 radioInnerStyle,
+                 styles,
+                 theme,
+                 value
+               }) {
   const [checked, setChecked] = React.useState(initialValue);
 
   // 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
@@ -52,15 +53,15 @@ function Radio({
 
   // O N - P R E S S - H A N D L E R
   function radioPressHandler() {
-    const current = !checked;
+    const current = true;
     onChange(current);
     setChecked(current);
   }
 
   const containerStyles = [styles.container, flexDirection && { flexDirection }, containerStyle];
 
   const whichColor =
-    color && theme.COLORS[color.toUpperCase()] ? theme.COLORS[color.toUpperCase()] : color;
+      color && theme.COLORS[color.toUpperCase()] ? theme.COLORS[color.toUpperCase()] : color;
 
   const radioButtonOuterStyles = [
     styles.radioOuterStyles,
@@ -76,54 +77,60 @@ function Radio({
     radioInnerStyle,
   ];
 
+
+  // O N - V A L U E - P R O P - U P D A T E
+  React.useEffect(() => {
+    setChecked(initialValue || value);
+  }, [value]);
+
   return (
-    <TouchableOpacity
-      onPress={() => radioPressHandler()}
-      style={containerStyles}
-      activeOpacity={0.8}
-      disabled={disabled}>
-      <View style={radioButtonOuterStyles}>
-        {checked ? <View style={radioButtonInnerStyles} /> : null}
-      </View>
-      {renderLabel()}
-    </TouchableOpacity>
+      <TouchableOpacity
+          onPress={() => radioPressHandler()}
+          style={containerStyles}
+          activeOpacity={0.8}
+          disabled={disabled}>
+        <View style={radioButtonOuterStyles}>
+          {checked ? <View style={radioButtonInnerStyles} /> : null}
+        </View>
+        {renderLabel()}
+      </TouchableOpacity>
   );
 }
 
 const styles = theme =>
-  StyleSheet.create({
-    container: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'flex-start',
-    },
-    radioOuterStyles: {
-      height: theme.SIZES.RADIO_HEIGHT,
-      width: theme.SIZES.RADIO_WIDTH,
-      borderRadius: theme.SIZES.RADIO_HEIGHT * 0.5,
-      borderWidth: theme.SIZES.RADIO_THICKNESS,
-      alignItems: 'center',
-      justifyContent: 'center',
-    },
-    radioInnerStyles: {
-      height: theme.SIZES.RADIO_HEIGHT * 0.5,
-      width: theme.SIZES.RADIO_WIDTH * 0.5,
-      borderRadius: theme.SIZES.RADIO_HEIGHT * 0.25,
-    },
-    disabledRadioOuter: {
-      borderColor: theme.COLORS.MUTED,
-    },
-    disabledRadioInner: {
-      backgroundColor: theme.COLORS.MUTED,
-    },
-    textStyles: {
-      color: theme.COLORS.BLACK,
-    },
-    disabledLabel: {
-      color: theme.COLORS.MUTED,
-      opacity: theme.SIZES.OPACITY,
-    },
-  });
+    StyleSheet.create({
+      container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'flex-start',
+      },
+      radioOuterStyles: {
+        height: theme.SIZES.RADIO_HEIGHT,
+        width: theme.SIZES.RADIO_WIDTH,
+        borderRadius: theme.SIZES.RADIO_HEIGHT * 0.5,
+        borderWidth: theme.SIZES.RADIO_THICKNESS,
+        alignItems: 'center',
+        justifyContent: 'center',
+      },
+      radioInnerStyles: {
+        height: theme.SIZES.RADIO_HEIGHT * 0.5,
+        width: theme.SIZES.RADIO_WIDTH * 0.5,
+        borderRadius: theme.SIZES.RADIO_HEIGHT * 0.25,
+      },
+      disabledRadioOuter: {
+        borderColor: theme.COLORS.MUTED,
+      },
+      disabledRadioInner: {
+        backgroundColor: theme.COLORS.MUTED,
+      },
+      textStyles: {
+        color: theme.COLORS.BLACK,
+      },
+      disabledLabel: {
+        color: theme.COLORS.MUTED,
+        opacity: theme.SIZES.OPACITY,
+      },
+    });
 
 Radio.defaultProps = {
   color: 'primary',
@@ -135,6 +142,7 @@ Radio.defaultProps = {
   onChange: () => {},
   styles: {},
   theme: GalioTheme,
+  value: false
 };
 
 Radio.propTypes = {
@@ -153,6 +161,7 @@ Radio.propTypes = {
   onChange: PropTypes.func,
   styles: PropTypes.any,
   theme: PropTypes.any,
+  value: PropTypes.bool
 };
 
 export default withGalio(Radio, styles);

src/Radio.js

@@ -79,8 +79,8 @@ function Input({
       />
     </TouchableOpacity>
   );
-  const labelContent = label && <Text style={[styles.label, labelStyles || {}]}>{label}</Text>;
-  const helpContent = help && <Text style={[styles.helpText, helpStyles || {}]}>{help}</Text>;
+  const labelContent = label?.length > 0 && <Text style={[styles.label, labelStyles || {}]}>{label}</Text>;
+  const helpContent = help?.length > 0 && <Text style={[styles.helpText, helpStyles || {}]}>{help}</Text>;
 
   return (
     <View

src/atomic/atoms/Input.js

@@ -14,36 +14,37 @@ import FA5Icon from 'react-native-vector-icons/FontAwesome5';
 import SimpleLineIcon from 'react-native-vector-icons/SimpleLineIcons';
 import FeatherIcon from 'react-native-vector-icons/Feather';
 import AntIcon from 'react-native-vector-icons/AntDesign';
+import Fontisto from 'react-native-vector-icons/Fontisto';
 
 export default type => {
   switch (type.toLowerCase()) {
     case 'zocial':
       return ZocialIcon;
-    case 'octicon':
+    case 'octicons':
       return OcticonIcon;
-    case 'material':
+    case 'materialicons':
       return MaterialIcon;
-    case 'material-community':
+    case 'materialcommunityicons':
       return MaterialCommunityIcon;
-    case 'ionicon':
+    case 'ionicons':
       return Ionicon;
     case 'foundation':
       return FoundationIcon;
     case 'evilicons':
       return EvilIcon;
     case 'entypo':
       return EntypoIcon;
-    case 'font-awesome':
+    case 'fontawesome':
       return FAIcon;
-    case 'font-awesome-5':
+    case 'fontawesome5':
       return FA5Icon;
-    case 'simple-line-icon':
+    case 'simplelineicons':
       return SimpleLineIcon;
     case 'feather':
       return FeatherIcon;
     case 'antdesign':
       return AntIcon;
     default:
-      return MaterialIcon;
+      return Fontisto;
   }
-};
+};

src/helpers/getIconType.js

@@ -11,20 +11,19 @@ import {
 declare module 'galio-framework' {
   type IconFamilyType =
     | 'Galio'
-    | 'AntDesign'
-    | 'Entypo'
-    | 'EvilIcons'
-    | 'Feather'
-    | 'FontAwesome'
-    | 'FontAwesome5'
-    | 'Fontisto'
-    | 'Foundation'
-    | 'Ionicons'
-    | 'MaterialIcons'
-    | 'MaterialCommunityIcons'
-    | 'Octicons'
-    | 'Zocial'
-    | 'SimpleLineIcons';
+    | 'zocial'
+    | 'octicon'
+    | 'material'
+    | 'material-community'
+    | 'ionicon'
+    | 'foundation'
+    | 'evilicons'
+    | 'entypo'
+    | 'font-awesome'
+    | 'font-awesome-5'
+    | 'simple-line-icon'
+    | 'feather'
+    | 'antdesign';
 
   type BaseColorType = string;
 
@@ -188,6 +187,7 @@ declare module 'galio-framework' {
     label?: string;
     labelStyle?: TextStyle;
     onChange?: () => void;
+    value?: boolean;
   }
   export class Radio extends React.Component<RadioProps> {}