Refactor and make uniform all SearchBars #1135

xavier-villelegier · 2018-04-24T08:32:36Z

Description

The default searchbar had to be refactored to have the same props as the platform specific ones
Moreover, I think it's still good to support the object icons as we had in < 1.0.0.

`renderIcon`

The renderIcon helper (inspired by @martinezguillaume in the ListItem) should help to handle icons in every components.

Usage

renderIcon(iconProps, { ...yourDefaultIcon })

Behavior

iconProps={false}: default icon won't be rendered
iconProps={null}: default icon won't be rendered
iconProps or nothing: default icon will be rendered with all default props
iconProps={{ size: 20 }} icon will be rendered with an overridden size
iconProps={{ type: 'material', name: 'close' }} icon will be rendered with a custom type and name (keep the default color and size)
iconProps={<CustomComponent />} CustomComponent will be rendered

Ideally, we should use this helper everywhere to be consistent on the Icon usage across all components.

SearchBars

Default searchbar now uses the Input of RNE, as the other searchbars
Same look and feel as before
You can now customize all icons for all searchbars

clearIcon (all searchbars)
searchIcon (all searchbars)
cancelIcon (Android searchbar only)

Examples

Code	Preview
`searchIcon={{ color: 'red' }}`
`searchIcon={false}` or `searchIcon={null}`
`clearIcon={{ size: '30' }}`
`cancelIcon={{ type: 'font-awesome', name: 'chevron-left' }}` (Android only)

TODO

Docs
Tests

react-native-elements-ci · 2018-04-24T08:41:06Z

Example app for the last commit (51fe65e):

https://exp.host/@rn-elements/react-native-elements-app?release-channel=51fe65ea8625d614dc21cacefacfe2e7f358a0df

codecov · 2018-04-24T09:58:00Z

Codecov Report

Merging #1135 into next will increase coverage by 6.59%.
The diff coverage is 72%.

@@            Coverage Diff             @@
##             next    #1135      +/-   ##
==========================================
+ Coverage   56.44%   63.03%   +6.59%     
==========================================
  Files          33       30       -3     
  Lines         590      533      -57     
  Branches      104       84      -20     
==========================================
+ Hits          333      336       +3     
+ Misses        207      163      -44     
+ Partials       50       34      -16

Impacted Files	Coverage Δ
src/input/Input.js	`13.33% <ø> (-5.42%)`	⬇️
src/searchbar/SearchBar-ios.js	`64.7% <100%> (+2.94%)`	⬆️
src/searchbar/SearchBar-android.js	`63.63% <100%> (+4.26%)`	⬆️
src/searchbar/SearchBar-default.js	`65.38% <65%> (-7.35%)`	⬇️
src/form/FormLabel.js
src/form/FormInput.js
src/form/FormValidationMessage.js

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 020a321...51fe65e. Read the comment docs.

iRoachie

Fantastic work man 😎

iRoachie · 2018-04-25T01:33:05Z

docs/searchbar.md

 <SearchBar
-  noIcon
+  clearIcon={{ color: 'red' }}
+  searchIcon={null} // You could have passed `false` too


Pref we put false in the docs

iRoachie · 2018-04-25T01:34:36Z

docs/searchbar.md

 ### Props

-> This component inherits [all native TextInput props that come with a standard React Native TextInput element](https://facebook.github.io/react-native/docs/textinput.html), along with the following:
+> This component inherits all React Native Elements props, which means [all native TextInput props that come with a standard React Native TextInput element](https://facebook.github.io/react-native/docs/textinput.html), along with the following:


Unclear what you mean by all React Native Elements props. Did you mean to say all React Native <TextInput /> props?

I forgot the Input word lol, should be "all React Native Elements Input props…"

iRoachie · 2018-04-25T01:35:32Z

src/helpers/renderIcon.js

+  // if `content` is undefined the icon will be only defined by defaultIconProps
+  const iconProps = { ...defaultIconProps, ...content };
+  return <Icon {...iconProps} />;
+};


Loveeee 🔥

iRoachie · 2018-04-25T01:36:42Z

src/input/Input.js

  }
 }

+const elementOrObject = PropTypes.oneOfType([


Make we can make this a helper too? I think we use it pretty often. Duplicated in ListItem as well. https://github.com/react-native-training/react-native-elements/blob/master/src/list/ListItem.js#L268

Yea sure, good point

iRoachie · 2018-04-25T01:37:41Z

src/searchbar/SearchBar-android.js


 const SCREEN_WIDTH = Dimensions.get('window').width;
 const ANDROID_GRAY = 'rgba(0, 0, 0, 0.54)';
+const defaultSearchIcon = {


Maybe move this into defaultProps? Since its default for searchIcon

If we move this to defaultProps then as long as the user passes a searchIcon you'll lose the whole object, so you won't be able to override just one key (ex: searchIcon={{ size: 30 }})

Ahh kk fair point

iRoachie · 2018-04-25T01:38:15Z

src/searchbar/SearchBar-android.js

-      />
-    );
+
+    const defaultCancelIcon = {


defaultProps here too, same for defaultClearIcon

https://github.com/react-native-training/react-native-elements/pull/1135#discussion_r183971163

iRoachie · 2018-04-25T01:40:08Z

src/searchbar/SearchBar-default.js

+import Input from '../input/Input';
+
+const SCREEN_WIDTH = Dimensions.get('window').width;
+const defaultSearchIcon = {


Same as above for defaultProps

https://github.com/react-native-training/react-native-elements/pull/1135#discussion_r183971163

iRoachie · 2018-04-25T01:40:53Z

src/searchbar/SearchBar-default.js

-  inputStyle: NativeText.propTypes.style,
-  round: PropTypes.bool,
-  showLoading: PropTypes.bool,
+const elementOrObject = PropTypes.oneOfType([


Yea let's definitely make this a helper and reuse it

iRoachie

LGTM

Monte9 · 2018-04-29T06:05:49Z

Solid PR! 💯Nicely done @xavier-villelegier! 👏

@default

* Remove any occurence of `isRequired` #960 * fix(Title) Move disabled style (#1070) * fix(Title) Move disabled style * reorder styles * fix(types): ButtonGroup - Add selectedButtonStyle Replace selectedBackgroundColor with selectedButtonStyle * Run prettier on some stray files * Fix typo in listitem.md (#1078) * Fix typo in listitem.md 'checkbox' corrected to 'checkBox' * fix checkBox typo in versioned docs listitem.md * Allowed Badge to accept any component as the Container component (#1061) * Button group use platform touchable (#1087) * buttongroup platform specific touchable * move component prop logic defaultprops * Add WeChat color to SocialIcon (#1092) * (ListItem) Fix checkmark platform sizing (#1090) * Fix Overlay children typing * docs(Avatar): Add size props small, medium, large, xlarge * docs(ListItem): Change avatar to leftAvatar Add props descriptions to beta4 docs. Fixes #1069 * fix(Avatar): Re-add missing `imageProps` prop * Dismiss overlay by touching backdrop (#1094) * Dismiss Overlay by clicking outside of Overlay Modal * updated overlay docs * rename overlayBackgroundpress to onBackdropPress * updated overlay snapshot * fix overlay prop type * Add `onBackdropPress` to Overlay * Fix Icon style when using TouchableNativeFeedback (#1104) * add encasing view and update test * add encasing view and update test * Refactor Avatar Size props (#1098) * rewrite avatar size prop * updated docs * updated typescript definitions * updated docs, ts and size prop logic * fallback for icon dimension * @default docs * Add raised prop back to Button component (#1108) * Bump docusarus version * docs(website): Fix small bug in listitem docs header * docs(website): Set default version shown as 0.19.0 * docs(website): Replace main icon with svg * Add backdropPress example to docs (#1116) * Use v0.19.0 as default version (#1101) * Revert website default version (#1103) * Use v0.19.0 as default version * Revert "Use v0.19.0 as default version" This reverts commit 1caeefd. * Revert "Use v0.19.0 as default version" This reverts commit 1caeefd. * Add descriptions for ListItem props in v1.0.0-beta4 docs (#1118) * Remove weird duplicate in beta4 docs [ci skip] * button opacity layer border on button press (#1107) * Opacity layer borderRadius on Button press * borderRadius to containerStyle.borderRadius * containerStyle.borderRadius -> buttonStyle.borderRadadius😄 * docs(Card) Button icon needs to be a component (#1132) * Button icon needs to be a component * Use icon element instead of object for Card docs * ci(travis) Pin version of node Node 10 currently breaks builds cause of missing whitelist console in react native jest setup. jestjs/jest#2567 (comment) Pinning node version until react-native/jest bumps * Cleanup definitons [ci-skip] * Bounce Form elements (#1146) * Refactor and make uniform all SearchBars (#1135) * Remove useless flex * Refactor default SearchBar * Add renderIcon helper * Use helper for default SearchBar * Use renderIcon in Input * Add back input icons containers * Improve renderIcon helper * Remove useless import * Use renderIcon for iOS searchbar * Use renderIcon for Android searchbar * Update SearchBar and Input docs * Update this.clear call * Remove useless onCancel on default searchbar * Remove useless hasFocus on default props * Update tests * Fix tests with new props * Use renderNode + refactor nodeType * Fix typo + link to Input props * Use `false` instead of `null` [ci-skip] * docs(Input) Typo it should be labelStyle not labelString * docs(ListItem) onPress component should be TouchableOpacity (#1152) * Typo? It seems that a touchableopacity is added - not a touchablehighlight. shouldn't a touchablehighlight be used here? * https://medium.com/differential/better-cross-platform-react-native-components-cb8aadeba472 * https://stackoverflow.com/questions/39123357/when-to-use-touchablenativefeedback-touchablehighlight-or-touchableopacity thanks! * typo * Fix depth collision with Button and Overlay (#1113) * Update Overlay snapshots * Add Cancel Button Props Object for iOS (#1159) * docs(website): Set default version shown as 0.19.0 (#1156) * ci(travis) Pin version of node (#1158) Node 10 currently breaks builds cause of missing whitelist console in react native jest setup. jestjs/jest#2567 (comment) Pinning node version until react-native/jest bumps * enhancment(searchBar): add 'cancelButtonColor' to search bar component This give a user the abilty to change the color of the text for iOS cancel button * enhancement(searchBar) add 'cancelButtonProps' prop Users can now pass the normal React Native Button props to the cancel button. * Add iOS only to docs * Fix typo in input docs #1041 * Add FormValidationMessage in imports #1144 * (Button) Doc improvement: remove duplicate item (#1167) for 0.19.0 `Button` the `loading` item in props list is duplicate * Create helpers export * Cleanup SearchBar typings and docs (#1169) * (types) Cleanup searchbar definitions * docs(SearchBar): Add inputContainerStyle Closes #1123 * types (SearchBar) SearchBarAndroid should extend from SearchBarPlatform * Fix yarn merge conflict [ci-skip] * Apply renderNode for Button (#1170) * Update docs * Use renderNode helper * Update button icon type * Update types * docs(website): Add Troubleshooting section (#1171) * docs(website): Add Troubleshooting section * Add more complex steps for font issues * Bump version to v1.0.0-beta5 * Create new website version

xavier-villelegier added 10 commits April 23, 2018 12:08

Remove useless flex

45488b7

Refactor default SearchBar

2cbb766

Add renderIcon helper

fad3d90

Use helper for default SearchBar

af55991

Use renderIcon in Input

44953ec

Add back input icons containers

7541520

Improve renderIcon helper

de63784

Remove useless import

a37c018

Use renderIcon for iOS searchbar

7263fa8

Use renderIcon for Android searchbar

463d483

xavier-villelegier requested a review from iRoachie April 24, 2018 08:32

xavier-villelegier added 6 commits April 24, 2018 10:50

Update SearchBar and Input docs

c7a8ad8

Update this.clear call

06e36da

Remove useless onCancel on default searchbar

63a675a

Remove useless hasFocus on default props

da003f4

Update tests

bd328ba

Fix tests with new props

bf3c154

xavier-villelegier added the ✨ Enhancement label Apr 24, 2018

iRoachie reviewed Apr 25, 2018

View reviewed changes

xavier-villelegier mentioned this pull request Apr 25, 2018

Fix SearchBar clearIcon propTypes #1140

Closed

xavier-villelegier added 3 commits April 27, 2018 11:44

Use renderNode + refactor nodeType

ab91828

Fix typo + link to Input props

11c07cc

Use false instead of null [ci-skip]

51fe65e

iRoachie approved these changes Apr 27, 2018

View reviewed changes

xavier-villelegier merged commit 96b13f7 into next Apr 27, 2018

xavier-villelegier deleted the default-searchbar branch April 27, 2018 13:26

Uh oh!

Refactor and make uniform all SearchBars #1135

Refactor and make uniform all SearchBars #1135

Uh oh!

Conversation

xavier-villelegier commented Apr 24, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

renderIcon

Ideally, we should use this helper everywhere to be consistent on the Icon usage across all components.

SearchBars

Examples

TODO

Uh oh!

react-native-elements-ci commented Apr 24, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Apr 24, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

iRoachie left a comment

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!

xavier-villelegier Apr 25, 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!

iRoachie left a comment

Choose a reason for hiding this comment

Uh oh!

Monte9 commented Apr 29, 2018

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

xavier-villelegier commented Apr 24, 2018 •

edited

Loading

`renderIcon`

react-native-elements-ci commented Apr 24, 2018 •

edited

Loading

codecov bot commented Apr 24, 2018 •

edited

Loading

xavier-villelegier Apr 25, 2018 •

edited

Loading