Skip to content

add select all button to multiple option dropdown #144

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
merged 6 commits into from
Nov 22, 2017
Merged

add select all button to multiple option dropdown #144

merged 6 commits into from
Nov 22, 2017

Conversation

antnascimento
Copy link
Contributor

@antnascimento antnascimento commented Nov 17, 2017 •
edited
Loading

Add select all button to multiple option dropdown

Pull request for issue: #135

Another pull request is open for scss repo:
fabric-design/scss#96

Component Screenshot:
image
After triggering:
image

Description :
On the multiple ws-dropdown component there is a new property "selectAll". If addded it shows a "ALL" button in the dropdown menu. If user clicks it selects all items and button becomes in triggered state and by clicking again deactives the trigger state and unchecks all items too.

fragsalat
fragsalat requested changes Nov 20, 2017
View reviewed changes
Copy link
Contributor

@fragsalat fragsalat left a comment

Choose a reason for hiding this comment

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

Pls change your IDE to 120 characters and remove all of your formatting changes.

demo/demo_app.js Outdated
@@ -49,7 +49,7 @@ render(
<br />
<br />
<WSDropdown
text="Multiple" type="button" width="500px" placeholder="Filter values.." filterable multiple items={[
text="Multiple" type="button" width="500px" placeholder="Filter values.."selectAll filterable multiple items={[
Copy link
Contributor

Choose a reason for hiding this comment

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

Does this work? there is a space missing

Copy link
Contributor Author

Choose a reason for hiding this comment

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

it was working fine when I run the demo

doc/api/ws-dropdown.md
@@ -196,8 +196,9 @@ additional wrapping markup and functionality, you SHOULD NOT use this component
- `props.value` **([Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object) \| [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)&lt;[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)>)** Selected dropdown item(s)
- `props.filterable` **[Boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Flag if the dropdown menu is filterable
- `props.filter` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** Default filter value
- `props.limit` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** Limit visible dropdown items. Use together with filterable flag.
Copy link
Contributor

Choose a reason for hiding this comment

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

This folder is autogenerated. You don't have to commit it.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thanks! I didn't know

package.json Outdated
@@ -72,6 +72,7 @@
"gulp-bump": "2.7.0",
"gulp-conventional-changelog": "1.1.3",
"gulp-eslint": "3.0.1",
"i": "0.3.6",
Copy link
Contributor

Choose a reason for hiding this comment

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

What is this for?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

it seems to have been updated when I run npm install

package.json Outdated
@@ -83,6 +84,8 @@
"mocha": "3.2.0",
"mocha-webpack": "0.7.0",
"node-sass": "4.5.2",
"npm": "5.5.1",
"or": "0.2.0",
Copy link
Contributor

Choose a reason for hiding this comment

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

What is this for?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

it seems to have been updated when I run npm install

src/ws-dropdown/dropdown-menu.js Outdated
@@ -1,8 +1,10 @@
import {React, Component, PropTypes} from '../imports';
import {DropdownMenuItem} from './dropdown-menu-item';

const ANIMATION_START_EVENTS = ['oAnimationStart', 'MSAnimationStart', 'animationstart'];
const ANIMATION_END_EVENTS = ['oAnimationEnd', 'MSAnimationEnd', 'animationend'];
const ANIMATION_START_EVENTS = ['oAnimationStart', 'MSAnimationStart',
Copy link
Contributor

Choose a reason for hiding this comment

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

This is not the way we wrap and it doesn't seem to be a to long line. Pls configure your IDE for 120 characters

src/ws-dropdown/dropdown-menu.js Outdated
@@ -223,7 +255,8 @@ export class DropdownMenu extends Component {
* @returns {Object}
*/
getItemAtIndex(index) {
const limit = this.props.filterable ? this.props.limit : this.state.items.length;
const limit = this.props.filterable ? this.props.limit
: this.state.items.length;
Copy link
Contributor

Choose a reason for hiding this comment

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

Pls revert this formatting change.

src/ws-dropdown/dropdown-menu.js Outdated
@@ -244,11 +277,15 @@ export class DropdownMenu extends Component {
// Check if the index points to value items when it is in this range
if (valueLength && correctedIndex < valueLength && correctedIndex >= 0) {
return {
item: Array.isArray(this.state.value) ? this.state.value[correctedIndex] : this.state.value,
item: Array.isArray(this.state.value) ? this.state.value[correctedIndex]
: this.state.value,
Copy link
Contributor

Choose a reason for hiding this comment

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

same

src/ws-dropdown/dropdown-menu.js Outdated
return {
item: filteredItems[correctedIndex - valueLength],
index: correctedIndex
};
Copy link
Contributor

Choose a reason for hiding this comment

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

Even if this was not necessary this is a good formatting :D

src/ws-dropdown/dropdown-menu.js Outdated
item.addEventListener(eventName, () => { eventCounter += 1; });
item.addEventListener(eventName, () => {
eventCounter += 1;
});
Copy link
Contributor

Choose a reason for hiding this comment

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

Looks like you used intellij code formatter :(

src/ws-dropdown/dropdown-menu.js Outdated
ref={element => { this.input = element; }}
/>
</li>
<li className="dropdown-input" key="filter">
Copy link
Contributor

Choose a reason for hiding this comment

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

There is missing one indent

@fragsalat fragsalat merged commit 8913004 into master Nov 22, 2017
@fragsalat fragsalat deleted the ws-dropdown-select-all-button branch November 22, 2017 09:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@fragsalat fragsalat fragsalat approved these changes

Assignees

@szafranek szafranek

@inanda inanda

@schluchter schluchter

@fragsalat fragsalat

@tonysaad tonysaad

@fokusferit fokusferit

@antnascimento antnascimento

@faboweb faboweb

@jordi-rubio jordi-rubio

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
9 participants
@antnascimento @fragsalat @szafranek @inanda @schluchter @tonysaad @fokusferit @faboweb @jordi-rubio