Skip to content
This repository has been archived by the owner on Jan 15, 2021. It is now read-only.

Commit

Permalink
Merge pull request #18 from Aidurber/dev
Browse files Browse the repository at this point in the history 
refactor(Picky): Moved all selected to state to prevent unneccessary …
  • Loading branch information
@Aidurber
Aidurber authored Dec 29, 2017
2 parents b231f5f + 6c49788 commit 9297f49
Show file tree
Hide file tree
Showing 2 changed files with 65 additions and 45 deletions.
68 changes: 31 additions & 37 deletions dist/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,16 +18,6 @@ function createCommonjsModule(fn, module) {
return module = { exports: {} }, fn(module, module.exports), module.exports;
}

/**
* lodash (Custom Build) <https://lodash.com/>
* Build: `lodash modularize exports="npm" -o ./`
* Copyright jQuery Foundation and other contributors <https://jquery.org/>
* Released under MIT license <https://lodash.com/license>
* Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
* Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
*/

/** Used as the `TypeError` message for "Functions" methods. */
var FUNC_ERROR_TEXT = 'Expected a function';

/** Used as references for various `Number` constants. */
Expand Down Expand Up @@ -396,22 +386,6 @@ function toNumber(value) {

var lodash_debounce = debounce;

/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
/* global Reflect, Promise */

var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
Expand Down Expand Up @@ -2746,9 +2720,6 @@ function stubFalse() {
module.exports = isEqual;
});

// Unique ID creation requires a high quality random # generator. In node.js
// this is pretty straight-forward - we use the crypto API.

var rb = crypto.randomBytes;

function rng() {
Expand Down Expand Up @@ -3015,21 +2986,40 @@ var Picky$1 = function (_React$Component) {
var _this = _possibleConstructorReturn(this, (Picky.__proto__ || Object.getPrototypeOf(Picky)).call(this, props));

_this.state = {
selectedValue: props.value,
selectedValue: props.value || (props.multiple ? [] : null),
open: props.open,
filtered: false,
filteredOptions: [],
id: v4_1()
id: v4_1(),
allSelected: false
};

_this.toggleDropDown = _this.toggleDropDown.bind(_this);
_this.selectAll = _this.selectAll.bind(_this);
_this.onFilterChange = _this.onFilterChange.bind(_this);
_this.selectValue = _this.selectValue.bind(_this);
_this.allSelected = _this.allSelected.bind(_this);
return _this;
}

_createClass(Picky, [{
key: 'componentWillMount',
value: function componentWillMount() {
var allSelected = this.allSelected();
this.setState({
allSelected: allSelected
});
}
}, {
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {
if (this.props.options !== nextProps.options || this.state.selectedValue !== nextProps.value) {
this.setState({
allSelected: this.allSelected()
});
}
}
}, {
key: 'selectValue',
value: function selectValue(value) {
var _this2 = this;
Expand Down Expand Up @@ -3061,8 +3051,11 @@ var Picky$1 = function (_React$Component) {
}, {
key: 'allSelected',
value: function allSelected() {
var copiedOptions = this.props.options.slice(0);
var copiedSelectedValue = this.state.selectedValue.slice(0);
var selectedValue = this.state.selectedValue;
var options = this.props.options;

var copiedOptions = options.slice(0);
var copiedSelectedValue = Array.isArray(selectedValue) ? selectedValue.slice(0) : [];
return lodash_isequal(copiedOptions, copiedSelectedValue);
}
}, {
Expand All @@ -3071,7 +3064,8 @@ var Picky$1 = function (_React$Component) {
var _this3 = this;

this.setState({
selectedValue: !this.allSelected() ? this.props.options : []
selectedValue: !this.state.allSelected ? this.props.options : [],
allSelected: !this.state.allSelected
}, function () {
_this3.props.onChange(_this3.state.selectedValue);
});
Expand Down Expand Up @@ -3238,8 +3232,8 @@ var Picky$1 = function (_React$Component) {
role: 'option',
id: this.state.id + '-option-' + 'selectall',
'data-selectall': 'true',
'aria-selected': this.allSelected(),
className: this.allSelected() ? 'option selected' : 'option',
'aria-selected': this.state.allSelected,
className: this.state.allSelected ? 'option selected' : 'option',
onClick: this.selectAll,
onKeyPress: this.selectAll
},
Expand All @@ -3248,7 +3242,7 @@ var Picky$1 = function (_React$Component) {
readOnly: true,
onClick: this.selectAll,
tabIndex: -1,
checked: this.allSelected(),
checked: this.state.allSelected,
'aria-label': 'select all'
}),
'Select All'
Expand Down
42 changes: 34 additions & 8 deletions src/Picky.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,17 +13,36 @@ class Picky extends React.Component {
constructor(props) {
super(props);
this.state = {
selectedValue: props.value,
selectedValue: props.value || (props.multiple ? [] : null),
open: props.open,
filtered: false,
filteredOptions: [],
id: uuid()
id: uuid(),
allSelected: false
};

this.toggleDropDown = this.toggleDropDown.bind(this);
this.selectAll = this.selectAll.bind(this);
this.onFilterChange = this.onFilterChange.bind(this);
this.selectValue = this.selectValue.bind(this);
this.allSelected = this.allSelected.bind(this);
}
componentWillMount() {
const allSelected = this.allSelected();
this.setState({
allSelected
});
}

componentWillReceiveProps(nextProps) {
if (
this.props.options !== nextProps.options ||
this.state.selectedValue !== nextProps.value
) {
this.setState({
allSelected: this.allSelected()
});
}
}

selectValue(value) {
Expand Down Expand Up @@ -64,14 +83,19 @@ class Picky extends React.Component {
}
}
allSelected() {
const copiedOptions = this.props.options.slice(0);
const copiedSelectedValue = this.state.selectedValue.slice(0);
const { selectedValue } = this.state;
const { options } = this.props;
const copiedOptions = options.slice(0);
const copiedSelectedValue = Array.isArray(selectedValue)
? selectedValue.slice(0)
: [];
return isEqual(copiedOptions, copiedSelectedValue);
}
selectAll() {
this.setState(
{
selectedValue: !this.allSelected() ? this.props.options : []
selectedValue: !this.state.allSelected ? this.props.options : [],
allSelected: !this.state.allSelected
},
() => {
this.props.onChange(this.state.selectedValue);
Expand Down Expand Up @@ -246,8 +270,10 @@ class Picky extends React.Component {
role="option"
id={this.state.id + '-option-' + 'selectall'}
data-selectall="true"
aria-selected={this.allSelected()}
className={this.allSelected() ? 'option selected' : 'option'}
aria-selected={this.state.allSelected}
className={
this.state.allSelected ? 'option selected' : 'option'
}
onClick={this.selectAll}
onKeyPress={this.selectAll}
>
Expand All @@ -256,7 +282,7 @@ class Picky extends React.Component {
readOnly
onClick={this.selectAll}
tabIndex={-1}
checked={this.allSelected()}
checked={this.state.allSelected}
aria-label="select all"
/>
Select All
Expand Down

0 comments on commit 9297f49

Please sign in to comment.