Dismiss overlay by touching overlaybackground #1094

Gregjarvez · 2018-04-10T14:08:04Z

iRoachie

callbacks should follow the on{eventName} format. Can you change it to onBackdropPress

codecov · 2018-04-10T14:11:31Z

Codecov Report

Merging #1094 into next will decrease coverage by 0.09%.
The diff coverage is 0%.

@@            Coverage Diff            @@
##             next    #1094     +/-   ##
=========================================
- Coverage   55.66%   55.57%   -0.1%     
=========================================
  Files          33       33             
  Lines         609      610      +1     
  Branches      110      110             
=========================================
  Hits          339      339             
- Misses        216      217      +1     
  Partials       54       54

Impacted Files	Coverage Δ
src/overlay/Overlay.js	`90.9% <0%> (-9.1%)`	⬇️
src/avatar/Avatar.js	`10.41% <0%> (ø)`	⬆️

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 564b2eb...942ff34. Read the comment docs.

iRoachie · 2018-04-10T14:12:00Z

onBackdropPress

Gregjarvez · 2018-04-10T14:21:02Z

@iRoachie rename to onBackdropPress ?

iRoachie · 2018-04-10T14:22:45Z

Yea

xavier-villelegier · 2018-04-10T14:23:48Z

@iRoachie We really need to rename props from this component lol, it's a mess

iRoachie · 2018-04-10T14:26:01Z

Yea lol, probably in another PR

Gregjarvez · 2018-04-10T14:26:53Z

@iRoachie onBackdropPress is it just me or that leaves me no clue as to what this prop does

iRoachie · 2018-04-10T14:32:12Z

backdrop is a fairly common term around modals and overlays. It's used in the libraries I posted early. Each prop also has a description on the website that can also be used to explain what it is.

iRoachie

Last change. Right now this will throw a red screen if the user taps on it, since there's no default callback assigned.

To fix this, add a definition in defaultProps that creates an example handler - () => null

Gregjarvez · 2018-04-10T14:58:48Z

@iRoachie oh yeah my careless self left the defaultProps :) sorry

iRoachie · 2018-04-10T15:11:35Z

src/overlay/Overlay.js

  overlayBackgroundColor: 'white',
  width: windowWidth - 80,
  height: windowHeight - 180,
+  onBackdropPress: () => {},


This will fail eslint since it's an empty function body. That's why I suggested you use () => null. See https://github.com/react-native-training/react-native-elements/blob/master/src/searchbar/SearchBar-ios.js#L172 for example

makes sense

xavier-villelegier

Looks good to me, nice job @Gregjarvez 💯

Monte9 · 2018-04-12T05:22:20Z

Good job @Gregjarvez for taking the lead on this and submitting a PR.

I am putting a $20 bounty on this PR. 😃 So feel free to submit an invoice for it when you get a chance.

And thanks for facilitating the conversation and giving him feedback on the PR @xavier-villelegier and @iRoachie! 👏

Gregjarvez · 2018-04-12T11:23:56Z

another $20 😄fabulous

iRoachie · 2018-04-13T11:28:18Z

Hey @Gregjarvez! Do you want to add a simple demo on tapping on the backdrop to close? It'll be on the doc page

iRoachie · 2018-04-13T11:28:39Z

In this area

Gregjarvez · 2018-04-13T11:37:46Z

@iRoachie sure I will do that. I am starting my job soon😃 . relocating today ,you mind if i do it tonight 9pm british time

iRoachie · 2018-04-13T12:57:20Z

Awesomeeee man! Where are you going to?

Gregjarvez · 2018-04-13T13:10:32Z

I am moving from Wolverhampton to Leicester still in England though

iRoachie · 2018-04-13T13:13:09Z

Which company are you moving to?

Gregjarvez · 2018-04-13T14:11:14Z

Mindera 😀

@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 · 2018-05-07T08:10:34Z

Hey @Gregjarvez, did you submit your expense on OpenCollective yet ?

Gregjarvez · 2018-05-07T14:46:37Z

@xavier-villelegier oh snap I forgot that. 😀

xavier-villelegier · 2018-05-07T16:26:53Z

@Gregjarvez Please submit $40. You've done like 4 or 5 other PRs since this one, you've been doing a great job, thank you for helping us on these tasks ! 🔥 💯
If you don't remember how to submit an expense just reach me on the React Native Training Slack 👍

Gregjarvez · 2018-05-08T15:11:45Z

@xavier-villelegier I am happy I have been helpful. submitted
😉

Gregjarvez added 2 commits April 10, 2018 15:04

Dismiss Overlay by clicking outside of Overlay Modal

3d9e728

updated overlay docs

46dff4f

iRoachie requested changes Apr 10, 2018

View reviewed changes

rename overlayBackgroundpress to onBackdropPress

e465dd0

iRoachie approved these changes Apr 10, 2018

View reviewed changes

iRoachie requested changes Apr 10, 2018

View reviewed changes

iRoachie added the ✨ Enhancement label Apr 10, 2018

updated overlay snapshot

5ecad2e

iRoachie requested changes Apr 10, 2018

View reviewed changes

fix overlay prop type

5a61b84

iRoachie approved these changes Apr 10, 2018

View reviewed changes

iRoachie requested a review from xavier-villelegier April 10, 2018 15:36

xavier-villelegier approved these changes Apr 10, 2018

View reviewed changes

Add onBackdropPress to Overlay

942ff34

iRoachie merged commit d906775 into react-native-elements:next Apr 10, 2018

Gregjarvez deleted the overlayBackgroundPress branch April 10, 2018 17:49

Uh oh!

Dismiss overlay by touching overlaybackground #1094

Dismiss overlay by touching overlaybackground #1094

Uh oh!

Conversation

Gregjarvez commented Apr 10, 2018

Uh oh!

iRoachie 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!

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

Uh oh!

Codecov Report

Uh oh!

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

Uh oh!

Uh oh!

Gregjarvez commented Apr 10, 2018

Uh oh!

iRoachie commented Apr 10, 2018

Uh oh!

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

Uh oh!

Uh oh!

iRoachie commented Apr 10, 2018

Uh oh!

Gregjarvez commented Apr 10, 2018

Uh oh!

iRoachie commented Apr 10, 2018

Uh oh!

iRoachie left a comment

Choose a reason for hiding this comment

Uh oh!

Gregjarvez commented Apr 10, 2018

Uh oh!

iRoachie Apr 10, 2018

Choose a reason for hiding this comment

Uh oh!

Gregjarvez Apr 10, 2018

Choose a reason for hiding this comment

Uh oh!

xavier-villelegier 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!

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

Uh oh!

Uh oh!

Gregjarvez commented Apr 12, 2018

Uh oh!

iRoachie commented Apr 13, 2018

Uh oh!

iRoachie commented Apr 13, 2018

Uh oh!

Gregjarvez commented Apr 13, 2018

Uh oh!

iRoachie commented Apr 13, 2018

Uh oh!

Gregjarvez commented Apr 13, 2018

Uh oh!

iRoachie commented Apr 13, 2018

Uh oh!

Gregjarvez commented Apr 13, 2018

Uh oh!

xavier-villelegier commented May 7, 2018

Uh oh!

Gregjarvez commented May 7, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

Gregjarvez commented May 8, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

iRoachie left a comment •

edited

Loading

codecov bot commented Apr 10, 2018 •

edited

Loading

iRoachie commented Apr 10, 2018 •

edited

Loading

xavier-villelegier commented Apr 10, 2018 •

edited

Loading

xavier-villelegier left a comment •

edited

Loading

Monte9 commented Apr 12, 2018 •

edited

Loading

Gregjarvez commented May 7, 2018 •

edited

Loading

xavier-villelegier commented May 7, 2018 •

edited

Loading

Gregjarvez commented May 8, 2018 •

edited

Loading