[Application configuration support] [Fix component unmount leak]

2018-09-30 11:00:23 -05:00
parent f11ddb6d75
commit 9968116242
17 changed files with 880 additions and 164 deletions
--- a/src/components/ConfigurationItem/ConfigurationItem.js
+++ b/src/components/ConfigurationItem/ConfigurationItem.js
@@ -0,0 +1,107 @@
+import React from 'react';
+import CSSModules from 'react-css-modules';
+import styles from './ConfigurationItem.css';
+
+export default CSSModules((props) => {
+  const handleChanged = (e) => {
+    const target = e.target;
+    if (target.type === 'checkbox') {
+      target.value = e.target.checked ? "true" : "false";
+    }
+    props.changed(target);
+  };
+  
+  let data;
+  switch (props.template.type) {
+    case "bool":
+      data = <input checked={JSON.parse(props.value)}
+                    onChange={e=>handleChanged(e)}
+                    type={'checkbox'}/>;
+    break;
+
+    case "double":
+      data = <input min={0.0}
+                    onChange={e=>handleChanged(e)}
+                    step={"0.01"}
+                    styleName='Input'
+                    type={'number'}
+                    value={parseFloat(props.value).toFixed(2)}/>;
+    break;
+
+    case "list":
+      const options = props.items.map((s, i) => {
+        return (
+          <option styleName='Option' key={i} value={s}>{s}</option>
+        );
+      });
+
+      data = (
+        <select onChange={e=>handleChanged(e)}
+                styleName='Select'
+                value={props.value}>
+          {options}
+        </select>
+      );
+    break;
+
+    case "string":
+      data = <input onChange={e=>handleChanged(e)}
+                    styleName='Input'
+                    type={'text'}
+                    value={props.value}/>;
+    break;
+
+    case "uint8":
+      data = <input max={255}
+                    min={0}
+                    onChange={e=>handleChanged(e)}
+                    styleName='Input'
+                    type={'number'}
+                    value={props.value}/>;
+    break;
+
+    case "uint16":
+      data = <input max={65535}
+                    min={0}
+                    onChange={e=>handleChanged(e)}
+                    styleName='Input'
+                    type={'number'}
+                    value={props.value}/>;
+    break;
+
+    case "uint32":
+      data = <input max={4294967295}
+                    min={0}
+                    onChange={e=>handleChanged(e)}
+                    styleName='Input'
+                    type={'number'}
+                    value={props.value}/>;
+    break;
+
+    case "uint64":
+      data = <input max={18446744073709551615}
+                    min={0}
+                    onChange={e=>handleChanged(e)}
+                    styleName='Input'
+                    type={'number'}
+                    value={props.value}/>;
+    break;
+
+    default:
+      data = <div>{props.value}</div>;
+  }
+
+  return (
+    <div styleName='ConfigurationItem'>
+      <table cellPadding='2'
+             width='100%'>
+        <tbody>
+          <tr>
+            <td width='100%'>{props.label}</td>
+            <td>{data}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  );
+}, styles, {allowMultiple: true});