feat(Picky): keepOpen logic

Auto close single select if keepOpen is false. Stays open if true. closes #23
Aidurber · Dec 30, 2017 · a01b7d9 · a01b7d9
1 parent 7b77afe
commit a01b7d9
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -82,7 +82,8 @@ Picky.defaultProps = {
   dropdownHeight: 300,
   onChange: () => {},
   itemHeight: 35,
-  tabIndex: 0
+  tabIndex: 0,
+  keepOpen: true
 };
 Picky.propTypes = {
   placeholder: PropTypes.string,
@@ -108,7 +109,8 @@ Picky.propTypes = {
   labelKey: PropTypes.string,
   render: PropTypes.func,
   itemHeight: PropTypes.number,
-  tabIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  tabIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  keepOpen: PropTypes.bool
 };
 ```
 
@@ -133,6 +135,7 @@ Picky.propTypes = {
 * `render` - Used for custom rendering of items in the dropdown. More info below.
 * `itemHeight` - Used when dropdown item height is larger than 35px. This is so the virtualised list can calculate correctly.
 * `tabIndex` - Pass tabIndex to component for accessibility. Defaults to 0
+* `keepOpen` - Default true. Single selects close automatically when selecting a value unless this is set to true.
 
 ## Custom rendering
 
@@ -169,8 +172,7 @@ You can render out custom items for the dropdown.
         key={item[valueKey]} // required
         onClick={() => selectValue(item)}
       >
-        {' '}
-        // required to select item
+        {/* required to select item */}
         <input type="checkbox" checked={isSelected} readOnly />
         <span style={{ fontSize: '30px' }}>{item[labelKey]}</span>
       </li>

diff --git a/dist/index.js b/dist/index.js
@@ -3198,7 +3198,8 @@ var Picky$1 = function (_React$Component) {
   }, {
     key: 'handleOutsideClick',
     value: function handleOutsideClick(e) {
-      if (this.node && this.node.contains(e.target)) {
+      var keepOpen = this.props.keepOpen || this.props.multiple;
+      if (this.node && this.node.contains(e.target) && keepOpen) {
         return;
       }
       this.toggleDropDown();
@@ -3324,7 +3325,8 @@ Picky$1.defaultProps = {
   dropdownHeight: 300,
   onChange: function onChange() {},
   itemHeight: 35,
-  tabIndex: 0
+  tabIndex: 0,
+  keepOpen: true
 };
 Picky$1.propTypes = {
   placeholder: PropTypes__default.string,
@@ -3345,7 +3347,8 @@ Picky$1.propTypes = {
   labelKey: PropTypes__default.string,
   render: PropTypes__default.func,
   itemHeight: PropTypes__default.number,
-  tabIndex: PropTypes__default.oneOfType([PropTypes__default.string, PropTypes__default.number])
+  tabIndex: PropTypes__default.oneOfType([PropTypes__default.string, PropTypes__default.number]),
+  keepOpen: PropTypes__default.bool
 };
 
 module.exports = Picky$1;
diff --git a/docs/README.md b/docs/README.md
@@ -82,7 +82,8 @@ Picky.defaultProps = {
   dropdownHeight: 300,
   onChange: () => {},
   itemHeight: 35,
-  tabIndex: 0
+  tabIndex: 0,
+  keepOpen: true
 };
 Picky.propTypes = {
   placeholder: PropTypes.string,
@@ -108,7 +109,8 @@ Picky.propTypes = {
   labelKey: PropTypes.string,
   render: PropTypes.func,
   itemHeight: PropTypes.number,
-  tabIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  tabIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  keepOpen: PropTypes.bool
 };
 ```
 
@@ -133,6 +135,7 @@ Picky.propTypes = {
 * `render` - Used for custom rendering of items in the dropdown. More info below.
 * `itemHeight` - Used when dropdown item height is larger than 35px. This is so the virtualised list can calculate correctly.
 * `tabIndex` - Pass tabIndex to component for accessibility. Defaults to 0
+* `keepOpen` - Default true. Single selects close automatically when selecting a value unless this is set to true.
 
 ## Custom rendering
 
@@ -169,8 +172,7 @@ You can render out custom items for the dropdown.
         key={item[valueKey]} // required
         onClick={() => selectValue(item)}
       >
-        {' '}
-        // required to select item
+        {/* required to select item */}
         <input type="checkbox" checked={isSelected} readOnly />
         <span style={{ fontSize: '30px' }}>{item[labelKey]}</span>
       </li>

diff --git a/src/Picky.js b/src/Picky.js
@@ -209,7 +209,8 @@ class Picky extends React.Component {
   }
 
   handleOutsideClick(e) {
-    if (this.node && this.node.contains(e.target)) {
+    const keepOpen = this.props.keepOpen || this.props.multiple;
+    if (this.node && this.node.contains(e.target) && keepOpen) {
       return;
     }
     this.toggleDropDown();
@@ -336,7 +337,8 @@ Picky.defaultProps = {
   dropdownHeight: 300,
   onChange: () => {},
   itemHeight: 35,
-  tabIndex: 0
+  tabIndex: 0,
+  keepOpen: true
 };
 Picky.propTypes = {
   placeholder: PropTypes.string,
@@ -362,7 +364,8 @@ Picky.propTypes = {
   labelKey: PropTypes.string,
   render: PropTypes.func,
   itemHeight: PropTypes.number,
-  tabIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  tabIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  keepOpen: PropTypes.bool
 };
 
 export default Picky;