Add enum renderer (select)

Author: styczynski

src/renderers/StringEnum.tsx

@@ -0,0 +1,64 @@
+import * as React from "react";
+
+import WithDescription from "./utils/WithDescription";
+import WithErrors from "./utils/WithErrors";
+import WithMargins from "./utils/WithMargins";
+
+import { SimpleNode } from "@blinkforms/core/simpleNodes";
+
+import {
+    FormContext,
+    NodeStringSchema,
+} from "@blinkforms/core/schemaTypes";
+
+export default class StringEnum extends SimpleNode<string, NodeStringSchema> {
+    getInitialValue() {
+        return "";
+    }
+
+    renderSimple(value: string, context: FormContext) {
+        const enumLabels = this.getSchema().enumLabels || null;
+        const enumOpts = (this.getSchema().enum || []).map(value => {
+            let oLabel = value;
+            let oVal = value;
+
+            if (enumLabels) {
+                const lbSpec = enumLabels.find(opt => opt.name === value);
+                if (lbSpec) {
+                    oLabel = lbSpec.label;
+                    oVal = lbSpec.name || value;
+                }
+            }
+
+            return ({
+                name: oVal,
+                label: oLabel,
+            });
+        });
+
+        const selectedValue = enumOpts.find(opt => opt.name === value) || null;
+        return (
+            <WithMargins parent={this}>
+                <WithErrors parent={this} context={context}>
+                    <WithDescription parent={this}>
+                        <select
+                            onChange={(event) => this.setState({ value: event.target.value })}
+                        >
+                            {enumOpts.map((item, index) => {
+                                return (
+                                    <option
+                                        key={`opt-${item.name+''}-${index}`}
+                                        value={item.name}
+                                        selected={selectedValue === item.name && item.name !== null && typeof item.name !== 'undefined'}
+                                    >
+                                        {item.label}
+                                    </option>
+                                );
+                            })}
+                        </select>
+                    </WithDescription>
+                </WithErrors>
+            </WithMargins>
+        );
+    }
+}

src/renderers/defaultReactHandlerProvider.tsx

@@ -2,6 +2,7 @@ import ObjectDefault from "./ObjectDefault";
 
 import StringDefault from "./StringDefault";
 import StringNotice from "./StringNotice";
+import StringEnum from "./StringEnum";
 
 import ArrayDefault from "./ArrayDefault";
 import ArrayTuple from "./ArrayTuple";
@@ -13,6 +14,7 @@ export default {
     STRING: {
         default: StringDefault,
         notice: StringNotice,
+        enum: StringEnum,
     },
     OBJECT: {
         default: ObjectDefault,

stories/basicForm.stories.js

@@ -23,8 +23,13 @@ storiesOf('Basic form', module)
                 },
                 "lastName": {
                     type: "string",
+                    ui: "enum",
                     title: "Your last name",
-                    minLength: 3,
+                    enum: [
+                        "Name1",
+                        "Name2",
+                        "Name3",
+                    ],
                 },
                 "notice": {
                     type: "string",