Merge pull request #252 from galio-org/dev

v0.8.1

.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.json

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

src/Radio.js

@@ -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/atomic/atoms/Input.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/helpers/getIconType.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/index.d.ts

@@ -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> {}