Skip to content

feat(button-group): Adds selectMultiple feature #858

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
iRoachie merged 1 commit into from
Jan 28, 2018
Merged

feat(button-group): Adds selectMultiple feature #858

iRoachie merged 1 commit into from
Jan 28, 2018

Conversation

@iRoachie
Copy link
Collaborator

@iRoachie iRoachie commented Jan 28, 2018

Closes #713

Adds the functionality to select multiple buttons on the button group.

Example:

state = {
  selected: [0]
};

render() {
  return (
    <View style={styles.container}>
      <ButtonGroup
        buttons={['Hey', 'Bop', 'Ha']}
        selectMultiple
        selectedIndexes={this.state.selected}
        onPress={selected => {
          this.setState({ selected });
        }}
      />
    </View>
  );
}

select-multiple

@codecov
Copy link

codecov bot commented Jan 28, 2018

Codecov Report

Merging #858 into next will decrease coverage by 0.31%.
The diff coverage is 28.57%.

Impacted file tree graph

@@            Coverage Diff            @@
##             next    #858      +/-   ##
=========================================
- Coverage   53.02%   52.7%   -0.32%     
=========================================
  Files          29      29              
  Lines         513     518       +5     
  Branches      109     110       +1     
=========================================
+ Hits          272     273       +1     
- Misses        186     189       +3     
- Partials       55      56       +1
Impacted Files Coverage Δ
src/buttons/ButtonGroup.js 64.28% <28.57%> (-24.61%) ⬇️

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 961dbf3...fbb59af. Read the comment docs.

xavier-villelegier
xavier-villelegier approved these changes Jan 28, 2018
View reviewed changes
Copy link
Collaborator

@xavier-villelegier xavier-villelegier left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me 🔥

@iRoachie iRoachie merged commit 52e7117 into next Jan 28, 2018
@iRoachie iRoachie mentioned this pull request Jan 28, 2018
Closed
@xavier-villelegier xavier-villelegier deleted the buttonGroup-multiple branch January 28, 2018 17:03
@Monte9
Copy link
Collaborator

Monte9 commented Jan 28, 2018

Looks great! 💯 Total rockstar for adding an example & working gif in the PR!! @iRoachie 🎉

xavier-villelegier pushed a commit that referenced this pull request Jan 28, 2018
@iRoachie @xavier-villelegier
v1.0.0-beta 2 (#838)
311d3bb 
* Update README.md - fixing typos (#835)

* Pass activeOpacity to TouchableOpacity inside Tile (#839)

* Pass activeOpacity to TouchableOpacity inside Tile

* Update Tile tests

* Comment `LinearGradient` for now (FIXME)

* feat(example): Cleanup remains from example app split

* Fix ListItem (#848)

Fix error on empty rightTitle prop by adding !!

* Separate checkbox single and checkbox with text styling (#850)

* (theming) Unify components under one primary color (#849)

* feat(theming): Remove not-used colors

* feat(theme): Add primary color and use through components

Added in button, button group, badge, and header

* Update snapshots

* Update underColor on buttonGroup to match selectedColor

* Snapshots

* Add color for Checkbox

* fix(Checkbox): Shifting width between checked and unchecked

* chore(packages): Update versions to fix warnings in jest

* added listItem right icon size so that it takes rightIcon size, or 28 (#852)

* uses thumbStyle.transform values in the thumb View (#820)

* [ts] Correct style type for IconObject (#851)

* Add ButtonComponent props and linear gradient props (#857)

* Add ButtonComponent props

* Use `linearGradientProps` + add error on mounting

* feat(button-group): Adds selectMultiple feature (#858)

Closes #713

* Platform specific SearchBar (#837) 🚀

* Add SearchBar wrapper

* Split SearchBar iOS and Android into separate files

* Add back default SearchBar

* Update root import

* Add back Input right/left icon

* Rename loadingIcon to loadingProps

* Specify `platform` PropType

* Add a fallback

* Move tests to `searchbar`

* Remove old Search component

* Fix loading props spreading overriding whole style

* Remove useless things

* Add tests for SearchBar

* Generate snapshots

* Add more tests

* Update tests

* Update documentation

* Fix typo

* Slightly changed the style of SearchBars

* Bump version to `1.0.0-beta2`

* Update snapshots from Searchbar changes

* feat(button): Re-add custom TouchableComponent

* feat(Button): Cleanup button code, update ts definitions (#859)

* Update SearchBars PropTypes

* feat(searchbar-both) Add additional defaultProps

Made tests pass

* Fix PropTypes warnings

* Update snapshots from searchbar android change

* feat(ts): Add definitons for searchbar (#860)

* Fix attributes spreading in platform specific searchbars

* feat(Button) Fix activeOpacity props

* fixed PricingCard to use new Button props

* test(jest): Update PricingCard snapshots
@NYamaguchi415
Copy link

NYamaguchi415 commented Aug 17, 2018

Very new to javascript, so forgive me, but in the example code does it overwrite the state to equal the last selected index instead of creating an array of selected indexes?

@iRoachie
Copy link
Collaborator Author

iRoachie commented Aug 17, 2018

That's fine @NYamaguchi415, welcome to the javascript community! In the example, the selected you see in the onPress actually is an array of indices that are selected.

So it overwrites the state of selected indices and replaces it with the new set of selected indices.

@NYamaguchi415
Copy link

NYamaguchi415 commented Aug 17, 2018 •
edited
Loading

@iRoachie thanks for the response!
If you don't mind.

constructor() {
  super();
  this.state = {
      selected: [0]
  };
}

render() {
  <View>
        <ButtonGroup
          buttons={['Hey', 'Bop', 'Ha']}
          selectMultiple
          selectedIndexes={this.state.selected}
          onPress={selected => {
            this.setState({ selected });
            console.log(this.state.selected);
          }}
        />
  </View>
}

is this right? I have a button that console logs this.state.selected and it only outputs a single number instead of an array. Should i not be doing the constructor?

@iRoachie
Copy link
Collaborator Author

iRoachie commented Aug 19, 2018

Here's the same code you made, but I pulled out the setState to a method. You can see the alert prints out an array of numbers https://snack.expo.io/Hy7rh_U8m

@NYamaguchi415
Copy link

NYamaguchi415 commented Aug 20, 2018

Ohhh thanks @iRoachie , I think it might be a version issue. I just realized prod v1.0.0 wasn't released, so if I want v1.0.0-beta do I need to switch over to yarn?

@iRoachie
Copy link
Collaborator Author

iRoachie commented Aug 20, 2018

Nope you don't have to use yarn! npm install --save react-native-elements@beta

@NYamaguchi415
Copy link

NYamaguchi415 commented Aug 20, 2018

Thanks so much for your help!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@xavier-villelegier xavier-villelegier xavier-villelegier approved these changes

Assignees

No one assigned

Labels

✨ Enhancement

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

5 participants

@iRoachie @Monte9 @NYamaguchi415 @xavier-villelegier