feat(customOptionLabels): Added support for creating custom option label rendering. Updated index handling for better support of any value type but also making override of rendering simple and ignorant of the component internals

Author: shaefer

README.md

@@ -28,7 +28,7 @@ const onChange = (event, val, fullOption) => {
 
 ## 2. Easy Custom Styling
 
-A few basic props for those that fear or despise CSS.
+A few basic props for those that fear or despise CSS. (I love CSS, so I'm happy to share.)
 ```html
 <SimpleSelect options={options} width='200px'/> //Fixed Width (Fluid by default)
 <SimpleSelect options={options} fixedHeight/> //Fixed Height - assumes single line of text with ellipsis (Fluid by default)
@@ -54,6 +54,24 @@ div.mySelectDefault .fieldset .legend {
 }
 ```
 
+The component pieces: The outer wrapper (.mySelectDefault), The div made to look like a fieldset(.fieldset), the legend(.legend), the currently displayed option (.selectedDisplay), the option list(.mySelectDefaultOptions), the dropdown arrow, the cancel button. 
+```html
+<div class="mySelectDefault">
+    <div class="fieldset">
+        <div class="legend"></div>
+        <div class="mainSectionWrapper">
+          <div class="selectedDisplay"></div>
+          <div class="cancelContainer"></div>
+          <div class="downArrowContainer"></div>
+        </div>
+        <div class="mySelectDefaultOptions"></div>
+    </div>
+</div>
+```
+
+
+
+
 ## 3. Mobile
 It works out of the box...
 

src/SimpleSelect.js

@@ -17,13 +17,22 @@ class SimpleSelect extends React.Component {
     this.openSelect = this.openSelect.bind(this);
     this.handleOutsideOptionsClick = this.handleOutsideOptionsClick.bind(this);
     this.renderOption = this.renderOption.bind(this);
+    this.renderOptionLabel = this.renderOptionLabel.bind(this);
 
     const optionValidation = this.checkOptionType(props.options);
+
+
+    //add index to each option for ease of rendering and value retrieval (this is what allows us to let value be any data type)
+    const initialOptions = props.options ? props.options : [];
+    const optionsWithIndexProp = initialOptions.map((x, idx) => {
+      x._idx = idx;
+      return x;
+    });
     const blankValue = { value: "", label: "" };
     const defaultValue =
       props.defaultValue &&
-      props.options.find(x => x.value === props.defaultValue)
-        ? props.options.find(x => x.value === props.defaultValue)
+      optionsWithIndexProp.find(x => x.value === props.defaultValue)
+        ? optionsWithIndexProp.find(x => x.value === props.defaultValue)
         : blankValue;
 
     this.state = {
@@ -34,7 +43,7 @@ class SimpleSelect extends React.Component {
       currentOptionSelected: defaultValue,
       legendLabel: props.legendLabel ? props.legendLabel : "Select...",
       selectOpen: false,
-      options: props.options ? props.options : [],
+      options: optionsWithIndexProp,
       width: props.width ? props.width : "",
     };
   }
@@ -95,9 +104,14 @@ class SimpleSelect extends React.Component {
     }
   }
 
+  findOptionWrapper(el) {
+    if (el.getAttribute("index")) return el;
+    return this.findOptionWrapper(el.parentNode);
+  }
+
   optionSelected(e) {
-    console.log(e.target);
-    const optionIndex = parseInt(e.target.getAttribute("index"), 10);
+    const optionWrapper = this.findOptionWrapper(e.target)
+    const optionIndex = parseInt(optionWrapper.getAttribute("index"), 10);
     const optionByIndex = this.state.options[optionIndex];
     if (this.props.onChange) {
       this.props.onChange(e, optionByIndex.value, optionByIndex);
@@ -119,7 +133,6 @@ class SimpleSelect extends React.Component {
   }
 
   cancelSelection(e) {
-    console.log("cancel button");
     if (this.props.onChange) {
       this.props.onChange(e);
     }
@@ -131,24 +144,32 @@ class SimpleSelect extends React.Component {
     e.stopPropagation(); //since cancel and dropdown are part of same dom tree we don't want the open/close to fire as well.
   }
 
-  /* We could eliminate the need for the index if we just matched the first option that has the exact value... */
-  renderOption(opt, idx) {
+  renderOptionLabel(opt) {
+    if (this.props.renderOptionLabel && opt != this.state.blankValue) {
+      return this.props.renderOptionLabel(opt);
+    } else {
+      return opt.label;
+    }
+  }
+
+  renderOption(opt) {
     return (
       <div
         onClick={this.optionSelected}
-        key={`_select_opts${idx}`}
-        index={idx}
+        key={`_select_opts${opt._idx}`}
+        index={opt._idx}
+        className={`select_option`}
       >
-        {opt.label}
+        {this.renderOptionLabel(opt)}
       </div>
     );
   }
 
   render() {
     if (!this.state.validOptions)
       return <div>Invalid Options: {this.state.invalidReason}</div>;
-    const opts = this.state.options.map((x, idx) => {
-      return this.renderOption(x, idx);
+    const opts = this.state.options.map(x => {
+      return this.renderOption(x);
     });
 
     const style = {
@@ -181,7 +202,7 @@ class SimpleSelect extends React.Component {
           <div className="legend">{this.state.legendLabel}</div>
           <div className="mainSectionWrapper" onClick={this.openSelect} ref={this.dropdownButton}>
             <div className="selectedDisplay">
-              {this.state.currentOptionSelected.label}
+              {this.renderOptionLabel(this.state.currentOptionSelected)}
             </div>
             {cancelSection}
             <div className="downArrowContainer">

src/flags.css

@@ -4,6 +4,7 @@ import ReactDOM from "react-dom";
 import SimpleSelect from "./SimpleSelect";
 
 import "./styles.css";
+import "./flags.css"
 
 function App() {
   const specialVal = { test: "valueObject" };
@@ -19,12 +20,20 @@ function App() {
     { label: "Something Else", value: "Something Else" },
     { label: "New Option", value: specialVal }
   ];
+  const flagOptions = [
+    {label: "United States", value: "US", flag: "flag-us"},
+    {label: "United Kingdom", value: "UK", flag: "flag-gb"}
+  ];
   const lotsOfOpts = [...Array(1000).keys()].map(x => {
     return { value: x, label: "Label" + x };
   });
   const onChange = (e, value, fullOption) => {
     console.log("Component val and fullOpt", value, fullOption);
   };
+  const flagOptionLabelRender = (opt) => {
+    const flagClass = `flag ${opt.flag}`;
+    return <React.Fragment><span className={flagClass}></span><span>{opt.label}</span></React.Fragment>;
+  }
   return (
     <div className="App">
       <h1>Simple, Stylable, React Select Component</h1>
@@ -67,6 +76,9 @@ function App() {
         nonCancelable defaultValue={2} legendLabel="Select nonCancelable" 
         width="200px"//Non-cancelable 
       />
+      <SimpleSelect id="5" options={flagOptions} onChange={onChange} width="300px" legendLabel="Custom Option Label Render"
+        renderOptionLabel={flagOptionLabelRender}
+      />
     </div>
   );
 }