Changes to allow <select> to have a value/label hash

epigenesys · Jun 17, 2020 · acab03c · acab03c
1 parent cc977b6
commit acab03c
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 17 deletions.
diff --git a/dist/editable.js b/dist/editable.js
@@ -247,10 +247,13 @@ var Select = /*#__PURE__*/function (_TextField) {
 
     _this = _super.call(this, props);
 
-    var options = _this.props.options.map(function (value, index) {
+    var options = _this.props.options.map(function (option, index) {
+      var value = option.value;
+      var label = option.label;
       return /*#__PURE__*/React.createElement("option", {
-        key: index + value
-      }, value);
+        key: index + value,
+        value: value
+      }, label);
     });
 
     _this.state = {
@@ -558,7 +561,10 @@ var Editable = /*#__PURE__*/function (_React$Component) {
           if (this.props.disabled) {
             p = value;
           } else {
-            a = value;
+            var selectedOption = this.props.options.filter(function (option) {
+              return option.value === value;
+            });
+            a = this.props.type === "select" ? selectedOption[0].label : value;
           }
         } else {
           p = value;

diff --git a/package.json b/package.json
@@ -8,7 +8,7 @@
     "edit",
     "ajax"
   ],
-  "version": "0.6.5-1",
+  "version": "0.6.5-2",
   "main": "dist/editable.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

diff --git a/src/Editable.js b/src/Editable.js
@@ -173,7 +173,8 @@ export default class Editable extends React.Component{
                 if(this.props.disabled){
                     p = value
                 }else{
-                    a = value
+                    const selectedOption = this.props.options.filter((option) => { return option.value === value });
+                    a = (this.props.type === "select" ? selectedOption[0].label : value)
                 }
             }else{
                 p = value

diff --git a/src/components/Select.js b/src/components/Select.js
@@ -4,9 +4,11 @@ import TextField from './TextField';
 export default class Select extends TextField {
     constructor(props){
         super(props)
-        const options = this.props.options.map((value, index) => {
-            return <option key={index + value}>{value}</option>
-        })
+        const options = this.props.options.map((option, index) => {
+            const value = option.value;
+            const label = option.label;
+            return <option key={index + value} value={value}>{label}</option>
+        });
         this.state = {
             componentClass: 'select',
             type: null,

diff --git a/src/components/TextField.js b/src/components/TextField.js
@@ -10,13 +10,16 @@ export default class TextField extends React.Component {
         return (
             <React.Fragment>
                 <FormGroup validationState={this.props.validationText ? 'error' : null} >
-                    <FormControl autoFocus
+                    <FormControl
+                        autoFocus
                         value={this.props.value ? this.props.value : ""}
                         onChange={e => this.props.setNewValue(e.target.value)}
-                        componentClass={this.state.componentClass} type={this.state.type}
-                        bsSize="sm" className="mr-1">
-                            {this.state.options}
-                        </FormControl>
+                        componentClass={this.state.componentClass}
+                        type={this.state.type}
+                        bsSize="sm" className="mr-1"
+                    >
+                        {this.state.options}
+                    </FormControl>
                     <FormControl.Feedback />
                     <HelpBlock>{this.props.validationText}</HelpBlock>
                 </FormGroup>

diff --git a/stories/0-Welcome.stories.js b/stories/0-Welcome.stories.js
@@ -38,10 +38,11 @@ export const TextArea = () => <Editable
 export const Select = () => <Editable
   {...sharedProps}
   type="select"
+  initialValue="hello"
   options={[
-    'Hello',
-    'Mellow',
-    'Yellow'
+    { label: 'Hello', value: 'hello' },
+    { label: 'Mellow', value: 'mellow' },
+    { label: 'Yellow', value: 'yell' }
   ]}
 />;