Added CodeExample5 for Async Loading

Added polyfill for Object.entries for Safari Updated dependencies Added infos to README
Sharlaan · Mar 27, 2017 · 33d6f58 · 33d6f58
1 parent e2a745f
commit 33d6f58
Show file tree

Hide file tree

Showing 10 changed files with 3,707 additions and 181 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,11 @@
-# material-ui-superSelectField
+# material-ui-superSelectField [![npm][npm-image]][npm-url] [![downloads][downloads-image]][downloads-url] [![javascript style guide][standard-image]][standard-url]
+                               
+[npm-image]: https://img.shields.io/npm/v/material-ui-superselectfield.svg
+[npm-url]: https://npmjs.org/package/material-ui-superselectfield
+[downloads-image]: https://img.shields.io/npm/dm/material-ui-superselectfield.svg
+[downloads-url]: https://npmjs.org/package/material-ui-superselectfield
+[standard-image]: https://img.shields.io/badge/code_style-standard-brightgreen.svg
+[standard-url]: https://standardjs.com
 
 ## Table of Contents
 - [Preview](#preview)
@@ -49,7 +56,7 @@ injectTapEventPlugin()
 | children | any | [] | Datasource is an array of any type of nodes, styled at your convenience.<br>/!\ REQUIRED: each node must expose a `value` property. This value property will be used by default for both option's value and label.<br>A `label` property can be provided to specify a different value than `value`. |
 | nb2show | number | 5 | Number of options displayed from the menu. |
 | elementHeight | number, number[] | 36 | Height in pixels of each option element. If elements have different heights, you can provide them in an array. |
-| showAutocompleteThreshold | number | 10 | Maximum number of options from which to display the autocomplete search field. |
+| showAutocompleteThreshold | number | 10 | Maximum number of options from which to display the autocomplete search field.<br> For example, if autoComplete textfield need to be disabled, just set this prop with a value higher than children length. |
 | autocompleteFilter | function | see below | Provide your own filtering parser. Default: case insensitive.<br>The search field will appear only if there are more than 10 children (see `showAutocompleteThreshold`).<br>By default, the parser will check for `label` props, 'value' otherwise. |
 ##### Note when setting value :
 if multiple is set, value must be at least an empty Array.  

diff --git a/lib/SuperSelectField.js b/lib/SuperSelectField.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "material-ui-superselectfield",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "description": "original Material-UI's SelectField component enhanced with autocompletion, multiselection, custom renderers, and infinite loading.",
   "private": false,
   "author": "Raphaël Morineau <[email protected]>",
@@ -22,8 +22,8 @@
     "babel-plugin-transform-class-properties": "^6.23.0",
     "babel-plugin-transform-object-entries": "^1.0.0",
     "babel-plugin-transform-object-rest-spread": "^6.23.0",
-    "babel-preset-env": "^1.2.1",
-    "enzyme": "^2.7.1",
+    "babel-preset-env": "^1.2.2",
+    "enzyme": "^2.8.0",
     "flag-icon-css": "^2.8.0",
     "gh-pages": "^0.12.0",
     "material-ui": "^0.17.1",
@@ -33,7 +33,7 @@
     "react-router-dom": "^4.0.0",
     "react-scripts": "^0.9.5",
     "react-tap-event-plugin": "^2.0.1",
-    "standard": "^9.0.1"
+    "standard": "^9.0.2"
   },
   "peerDependencies": {
     "material-ui": ">= 0.15 < 1",
@@ -71,6 +71,7 @@
       "camelcase": "off",
       "brace-style": "off",
       "no-trailing-spaces": "off",
+      "no-multiple-empty-lines": "off",
       "no-unused-vars": "warn"
     }
   },

diff --git a/src/App.js b/src/App.js
@@ -8,6 +8,7 @@ import CodeExample1 from './CodeExample1'
 import CodeExample2 from './CodeExample2'
 import CodeExample3 from './CodeExample3'
 import CodeExample4 from './CodeExample4'
+import CodeExample5 from './CodeExample5'
 import './App.css'
 
 export default () => (
@@ -27,6 +28,7 @@ export default () => (
         <Route path='/example2' component={CodeExample2} />
         <Route path='/example3' component={CodeExample3} />
         <Route path='/example4' component={CodeExample4} />
+        <Route path='/example5' component={CodeExample5} />
         <Route component={Home} />
       </Switch>
     </section>

diff --git a/src/CodeExample5.js b/src/CodeExample5.js
@@ -1,37 +1,79 @@
 import React, { Component } from 'react'
 import SuperSelectField from './SuperSelectField'
-
-const datasource = [
-  { id: 1, name: 'name1' },
-  { id: 2, name: 'name2' },
-  { id: 3, name: 'name3' },
-  { id: 4, name: 'name4' }
-]
+import data from './assets/states'
 
 class CodeExample extends Component {
-  state = { value: null }
+  state = {
+    selectedStates: [],
+    stateNodes: [],
+    selectedCounties: [],
+    countyNodes: []
+  }
 
-  handleSelection = (value) => this.setState({ value })
+  componentDidMount = () => {
+    // Ideally should be externalized in a HoC,
+    // with stateNodes && countyNodes in props
+    window.setTimeout(() => {
+      const stateNodes = data.states.map(({code, name, capital}) =>
+        <div key={code} value={name}>{name}</div>
+      )
+      this.setState({ stateNodes })
+      console.log('States updated')
+    }, 5000)
+  }
+
+  handleStateSelection = (selectedStates, name) => {
+    console.debug('selectedStates', selectedStates)
+    this.setState({ selectedStates }, () => {
+      const countyNodes = data.counties
+        .reduce((nodes, {INCITS, county, state}) => {
+          if (!selectedStates.find(({value}) => value === state)) return nodes
+          return [ ...nodes, <div key={INCITS} value={county}>{county}</div> ]
+        }, [])
+      // must also check if previous selections are still consistent with new selectedStates
+      const selectedCounties = this.state.selectedCounties.filter(({value}) =>
+        countyNodes.find(node => node.props.value === value)
+      )
+      this.setState({ countyNodes, selectedCounties })
+      console.log('Counties updated')
+    })
+  }
+
+  handleCountySelection = (selectedCounties, name) => this.setState({ selectedCounties })
 
   render () {
-    const { value } = this.state
+    const { selectedStates, stateNodes, selectedCounties, countyNodes } = this.state
 
-    const options = datasource.map(({ id, name }) => (
-      <div value={id} key={id} label={name}>
-        {name}
-      </div>
-    ))
+    console.debug('countyNodes', countyNodes)
 
     return (
       <section style={{ margin: 40 }}>
 
-        <SuperSelectField
-          value={value}
-          onChange={this.handleSelection}
-          style={{ width: 150 }}
-        >
-          {options}
-        </SuperSelectField>
+        <div style={{ display: 'flex', justifyContent: 'center' }}>
+          <SuperSelectField
+            name='states'
+            hintText='Select a state...'
+            multiple
+            value={selectedStates}
+            onChange={this.handleStateSelection}
+            checkPosition='left'
+            style={{ width: 300, marginRight: 60 }}
+          >
+            {stateNodes}
+          </SuperSelectField>
+
+          <SuperSelectField
+            name='counties'
+            hintText='Select a county...'
+            multiple
+            value={selectedCounties}
+            onChange={this.handleCountySelection}
+            checkPosition='left'
+            style={{ width: 300 }}
+          >
+            {countyNodes}
+          </SuperSelectField>
+        </div>
 
       </section>
     )

diff --git a/src/Nav.css b/src/Nav.css
@@ -8,15 +8,21 @@
    text-decoration: none;
    color: #222;
    height: 100%;
-   width: calc(100% - 32px);
+   width: calc(100% - 64px);
    display: inline-block;
  }
 
+.multiLine {
+    display: inline-block;
+    line-height: normal;
+    vertical-align: middle;
+}
+
 .active {
   font-weight: bold;
   color: #00BCD4;
 }
 
 .verticallyCenter { line-height: 68px; }
 
-.morePadding { padding-left: 32px; }
+.morePadding { padding: 0 32px; }
diff --git a/src/Nav.js b/src/Nav.js
@@ -14,9 +14,14 @@ export default () => (
       { route: '/example1', label: 'Basic' },
       { route: '/example2', label: 'Multiple' },
       { route: '/example3', label: 'Autocomplete' },
-      { route: '/example4', label: 'Options grouping' }
+      { route: '/example4', label: 'Options grouping' },
+      { route: '/example5', label: <span className='multiLine'>Asynchronous loading</span> }
     ].map(({ route, label }) => (
-      <MenuItem key={route} innerDivStyle={{ padding: 0 }}>
+      <MenuItem
+        key={route}
+        style={{ whiteSpace: 'normal' }}
+        innerDivStyle={{ padding: 0 }}
+      >
         <NavLink to={route} className='base morePadding'>{label}</NavLink>
       </MenuItem>
     ))}