Added common components #54

ignaciosantise · 2018-01-04T22:17:20Z

Summary

Added Custom text input with showPassword prop
Added Loadable HOC to show a spinner when the data is loading
Added Custom button component
Updated eslint dependencies

Know Issues:

showing/hiding the text with secureTextEntry changes the cursor position:
[TextInput] Dynamic changing of secureTextEntry breaks font and doesn't change cursor position facebook/react-native#5859

Screenshots

Loadable

Android

iOS

Custom text input

Android

iOS

ignaciosantise · 2018-01-04T22:18:35Z

Include common components

mvbattan · 2018-01-04T22:35:40Z

generators/app/templates/src/app/components/CustomButton/index.js

+
+import styles from './styles';
+
+export default class CustomButton extends PureComponent {


Keep export default at the bottom of this file

mvbattan · 2018-01-04T22:39:55Z

generators/app/templates/src/app/components/CustomButton/index.js

+  customStyles = () =>
+    CustomButton.VARIANTS.map(variant => (this.props[variant] ? styles[variant] : null)).filter(
+      style => style !== null
+    );


I'd extract this function and reuse it in customTextStyles

mvbattan · 2018-01-04T22:41:54Z

generators/app/templates/src/app/components/CustomButton/index.js

+  icon: PropTypes.number,
+  iconStyle: ViewPropTypes.style, // eslint-disable-line react/no-typos
+  onPress: PropTypes.func.isRequired,
+  style: ViewPropTypes.style, // eslint-disable-line react/no-typos


If applies, I'd delete this rule. What do you think ? @wfolini @sbalay @IgnacioAbadie @ignaciosantise

mvbattan · 2018-01-04T22:42:19Z

generators/app/templates/src/app/components/CustomButton/styles.js

+  backgroundColor: transparent
+};
+
+export default StyleSheet.create({


export default at the bottom

i think that we have all export default of styles file like @ignaciosantise wrote.
In components maybe, but in style files i like this. Really there is not difference

@mvbattan if we are changing the export position of Stylesheets, we should change all of them in another PR

Agree, let's do it in another PR

mvbattan · 2018-01-04T22:42:47Z

generators/app/templates/src/app/components/CustomText/index.js

-      .filter(style => style !== null);
+    CustomText.VARIANTS.map(variant => (this.props[variant] ? styles[variant] : null)).filter(
+      style => style !== null
+    );


I'd reuse the function extracted from CustomButton

mvbattan · 2018-01-04T22:44:33Z

generators/app/templates/src/app/components/CustomTextInput/components/ShowPassword/styles.js

+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    bottom: -4


Mmm, why this ? This doesn't have issues with Android overflow ?
If so, I'd put marginBottom = -4

mvbattan · 2018-01-04T22:46:16Z

generators/app/templates/src/app/components/CustomTextInput/index.js

+        <View
+          style={[
+            this.props.multiline ? styles.multilineContainer : styles.container,
+            this.props.bottomBorder ? styles.bottomBorder : {},


this.props.bottomBorder && styles.bottomBorder

?

mvbattan · 2018-01-04T22:48:49Z

generators/app/templates/src/app/components/CustomTextInput/index.js

+  multiline: PropTypes.bool,
+  placeholder: PropTypes.string,
+  titleStyles: Text.propTypes.style, // eslint-disable-line react/no-typos
+  textStyles: Text.propTypes.style, // eslint-disable-line react/no-typos


Same comment here.
Mmm isn't this deprecated ? 🤔 I've searched for TextPropTypes but I've found nothing.
For example, View.propTypes.style is deprecated.

View.propTypes.style is deprecated, but there's no info about Text.propTypes. and it doesnt throw a warning or sth

mvbattan · 2018-01-04T22:55:00Z

generators/app/templates/src/app/components/CustomTextInput/styles.js

+
+import { gray, black, transparent } from '../../../constants/colors';
+
+export default StyleSheet.create({


export default

mvbattan · 2018-01-04T22:56:31Z

generators/app/templates/src/app/components/Loadable/styles.js

+
+import { white } from '../../../constants/colors';
+
+export default StyleSheet.create({


export default

IgnacioAbadie · 2018-01-05T14:10:03Z

@ignaciosantise check the conflics

wfolini

Excellent! some comments that I would like to say
I'd use this icons for login text inputs. They are more beautiful and without color
https://material.io/icons/#ic_visibility
https://material.io/icons/#ic_visibility_off

Also, I'd like us to change the way we pass the props to the CustomText component and maybe also CustomButton.
I'd only declare h1, h2, h3, p, etc props, and for that props declare the font family, color, size, weights, etc following the typesetting styles defined by the design department, like this example...

What u think about this? @ignaciosantise @IgnacioAbadie @mvbattan @sbalay
I think that in this way the app design is going to be more neat and with less possibility of design issues.

ignaciosantise · 2018-01-08T14:40:18Z

@wfolini great! Assets changed ;)

About the props, think that configuration will depend on the project. Not all projects follow that design line. I think that colors and sizes should be customizable by props

mvbattan · 2018-01-16T14:10:05Z

generators/app/files.js

+}/[email protected]`;
+module.exports.CUSTOM_TEXT_INPUT_ASSETS_VISIBILITY_3X = `${
+  module.exports.CUSTOM_TEXT_INPUT_ASSETS_PATH
+}/[email protected]`;


Dunno. It's likely this ic_visibility is being repeated over and over

Ignacio added 7 commits January 3, 2018 20:26

Added Loadable HOC and colors file and implemented HOC in login screen

ba463b0

Added loadable component to base files

c5e5517

Lint fix

f9d37fd

Updated eslint and prettier versions

e1cca42

Added custom text input component and implemented it in login screen

bf7f554

Added custom button component

abab86c

Changed comment

96822f0

ignaciosantise requested a review from sbalay January 4, 2018 22:17

ignaciosantise assigned mvbattan, wfolini, IgnacioAbadie and sbalay and unassigned mvbattan, wfolini and IgnacioAbadie Jan 4, 2018

ignaciosantise removed the request for review from sbalay January 4, 2018 22:18

mvbattan reviewed Jan 4, 2018

View reviewed changes

mvbattan assigned ignaciosantise and unassigned mvbattan Jan 4, 2018

IgnacioAbadie approved these changes Jan 5, 2018

View reviewed changes

IgnacioAbadie removed their assignment Jan 5, 2018

Ignacio Santise added 2 commits January 5, 2018 15:18

Code style changes

127e046

Added styleUtils file and moved function to get custom styles

2c2c5ee

wfolini reviewed Jan 8, 2018

View reviewed changes

Solved oneOf error

aa84d95

wfolini removed their assignment Jan 8, 2018

Ignacio Santise added 2 commits January 8, 2018 11:16

Added styleUtils to project, changed some props of text input

a6c91cd

Changed show password asset

60bf1fd

ignaciosantise assigned mvbattan and wfolini Jan 15, 2018

wfolini approved these changes Jan 16, 2018

View reviewed changes

wfolini removed their assignment Jan 16, 2018

mvbattan approved these changes Jan 16, 2018

View reviewed changes

mvbattan removed their assignment Jan 16, 2018

Ignacio Santise added 2 commits January 16, 2018 11:55

Deleted old folders

ef0317b

Merge branch 'master' into common-components

2a72bc7

ignaciosantise merged commit df7effe into master Jan 16, 2018

ignaciosantise deleted the common-components branch January 16, 2018 15:15


		import styles from './styles';

		export default class CustomButton extends PureComponent {


		import { gray, black, transparent } from '../../../constants/colors';

		export default StyleSheet.create({


		import { white } from '../../../constants/colors';

		export default StyleSheet.create({

Added common components #54

Added common components #54

Uh oh!

Conversation

ignaciosantise commented Jan 4, 2018

Summary

Screenshots

Loadable

Android

iOS

Custom text input

Android

iOS

Uh oh!

ignaciosantise commented Jan 4, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ignaciosantise Jan 5, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

IgnacioAbadie commented Jan 5, 2018

Uh oh!

wfolini left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ignaciosantise commented Jan 8, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

ignaciosantise Jan 5, 2018 •

edited

Loading

wfolini left a comment •

edited

Loading