From 3258d827815008de72658fb6a43bd0d1796aa954 Mon Sep 17 00:00:00 2001 From: Niklas Baumstark Date: Sun, 15 May 2016 19:14:19 +0200 Subject: [PATCH 1/6] fix select-box --- lib/select-box.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/select-box.js b/lib/select-box.js index 70d1400..6c8ed4d 100644 --- a/lib/select-box.js +++ b/lib/select-box.js @@ -101,7 +101,7 @@ module.exports = React.createClass({displayName: 'exports', } else { this.updatePendingValue(val, cb) || this.props.onChange(val) this.handleClose() - this.refs.button.getDOMNode().focus() + this.refs.button.focus() } }.bind(this) }, @@ -141,7 +141,7 @@ module.exports = React.createClass({displayName: 'exports', handleOpen: function (event) { interceptEvent(event) this.setState({open: true}, function () { - this.refs.menu.getDOMNode().focus() + this.refs.menu.focus() }) }, From b0a13417f0d83150daf203ff7162c33f72218ac9 Mon Sep 17 00:00:00 2001 From: dungsaga Date: Tue, 2 Aug 2016 11:20:54 +0700 Subject: [PATCH 2/6] use className to allow each Option to have a distinct style --- lib/select-box.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/lib/select-box.js b/lib/select-box.js index 6c8ed4d..0b7d7b8 100644 --- a/lib/select-box.js +++ b/lib/select-box.js @@ -223,6 +223,7 @@ module.exports = React.createClass({displayName: 'exports', var options = [] React.Children.forEach(this.props.children, function (option) { options.push({ + className: option.props.className, value: option.props.value, label: option.props.children }) @@ -350,6 +351,9 @@ module.exports = React.createClass({displayName: 'exports', if (this.isSelected(option.value)) { className += ' react-select-box-option-selected' } + if (option.className) { + className += ' ' + option.className + } return a( { id: this.state.id + '-' + i, From 49f060267079cd89ac0abc6acf51f79fcd496c33 Mon Sep 17 00:00:00 2001 From: dungsaga Date: Tue, 2 Aug 2016 11:23:54 +0700 Subject: [PATCH 3/6] use className to render each selected Option with a distinct style --- lib/select-box.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/select-box.js b/lib/select-box.js index 0b7d7b8..067a1a0 100644 --- a/lib/select-box.js +++ b/lib/select-box.js @@ -210,9 +210,9 @@ module.exports = React.createClass({displayName: 'exports', return this.isSelected(option.value) }.bind(this)) .map(function (option) { - return option.label + return label({ className: option.className }, option.label) }) - return selected.length > 0 ? selected.join(', ') : this.props.label + return selected.length > 0 ? selected : this.props.label }, isMultiple: function () { From fcb05ac1ea82b5a7a0c326001894fafec9b611a2 Mon Sep 17 00:00:00 2001 From: dungsaga Date: Tue, 2 Aug 2016 11:27:07 +0700 Subject: [PATCH 4/6] describe new improvements --- README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/README.md b/README.md index cd44ff0..d88fa3c 100644 --- a/README.md +++ b/README.md @@ -4,6 +4,10 @@ An accessible select box component for React. +Improvements: +* allow each Option to have a distinct style (using className) +* render each selected Option with a distinct style (using className) + ## Demo [http://instructure-react.github.io/react-select-box/](http://instructure-react.github.io/react-select-box/) From 4745aeeb9d170f3e6701df1e4058cc3875728248 Mon Sep 17 00:00:00 2001 From: dungsaga Date: Thu, 4 Aug 2016 10:10:27 +0700 Subject: [PATCH 5/6] fix warning about each child in an array or iterator should have a unique "key" prop --- lib/select-box.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/select-box.js b/lib/select-box.js index 067a1a0..a727f7c 100644 --- a/lib/select-box.js +++ b/lib/select-box.js @@ -209,8 +209,8 @@ module.exports = React.createClass({displayName: 'exports', .filter(function (option) { return this.isSelected(option.value) }.bind(this)) - .map(function (option) { - return label({ className: option.className }, option.label) + .map(function (option, i) { + return label({ key: i, className: option.className }, option.label) }) return selected.length > 0 ? selected : this.props.label }, From 6b8e619437cd22f363b527e52104dd4a34cbccf0 Mon Sep 17 00:00:00 2001 From: DungSaga Date: Thu, 4 Aug 2016 15:12:06 +0700 Subject: [PATCH 6/6] add screenshot --- README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/README.md b/README.md index d88fa3c..f41b4d7 100644 --- a/README.md +++ b/README.md @@ -8,6 +8,10 @@ Improvements: * allow each Option to have a distinct style (using className) * render each selected Option with a distinct style (using className) +## Screenshots + +![screenshot](https://github.com/dungsaga/react-select-box/raw/gh-pages/screenshots/Notable-operating-systems.png) + ## Demo [http://instructure-react.github.io/react-select-box/](http://instructure-react.github.io/react-select-box/)