Support objects in selects

example/ExamplePage.js

@@ -10,11 +10,13 @@ import {
     Select
 } from "@material-ui/core";
 import Localizer from "./data/tests/localizer";
+import SelectLabel from "./data/selectlabel";
 import ErrorBoundary from "./ErrorBoundary";
 // RcSelect is still in migrating process so it's excluded for now
 // import RcSelect from 'react-schema-form-rc-select/lib/RcSelect';
 const examples = {
-    localizer: Localizer
+    localizer: Localizer,
+    selectLabel: SelectLabel
 };
 
 type State = {
@@ -48,7 +50,7 @@ class ExamplePage extends React.Component<void, State> {
             { label: "Readonly", value: "data/readonly.json" },
             { label: "Array", value: "data/array.json" },
             { label: "Object", value: "data/object.json" },
-            { label: "Select with label", value: "data/selectlabel.json" },
+            { label: "Select", value: "selectLabel" },
             { label: "ArraySelect", value: "data/arrayselect.json" },
             { label: "Conditional Array", value: "data/conditionalarray.json" },
             {

example/data/selectlabel.js

@@ -0,0 +1,51 @@
+export default {
+    schema: {
+        type: "object",
+        required: ["name", "region"],
+        title: "Create Wallet",
+        properties: {
+            name: {
+                title: "Name",
+                type: "string"
+            },
+            region: {
+                title: "Region",
+                type: "string",
+                enum: ["0000", "0001", "0002"]
+            },
+            bank: {
+                title: "Bank",
+                type: "string",
+                enum: [
+                    { id: 1, name: "First" },
+                    { id: 2, name: "Second" },
+                    { id: 3, name: "Third" }
+                ],
+                isObject: true,
+                displayFn: each => each.name
+            }
+        }
+    },
+    form: [
+        "name",
+        {
+            key: "region",
+            type: "select",
+            titleMap: [
+                {
+                    value: "0000",
+                    name: "Americas"
+                },
+                {
+                    value: "0001",
+                    name: "Asia, Oceania"
+                },
+                {
+                    value: "0002",
+                    name: "Europe, Africa"
+                }
+            ]
+        },
+        "bank"
+    ]
+};

src/Select.js

@@ -12,7 +12,8 @@ type Props = {
     model: any,
     form: any,
     onChangeValidate: any,
-    localization: Localization
+    localization: Localization,
+    onChange: any
 };
 
 type State = {
@@ -39,10 +40,38 @@ class Select extends Component<Props, State> {
     }
 
     onSelected = event => {
-        const { onChangeValidate } = this.props;
+        const {
+            onChangeValidate,
+            onChange,
+            form: {
+                key,
+                schema: { isObject, enum: values, findFn }
+            }
+        } = this.props;
         const currentValue = event.target.value;
         this.setState({ currentValue });
-        onChangeValidate(event);
+        if (isObject) {
+            const item = values.find(each =>
+                findFn ? findFn(each, currentValue) : each === currentValue
+            );
+            onChange(key, item);
+        } else {
+            onChangeValidate(event);
+        }
+    };
+
+    getLabel = each => {
+        const {
+            form: {
+                schema: { displayFn, noLocalization }
+            },
+            localization: { getLocalizedString }
+        } = this.props;
+        if (displayFn) {
+            return displayFn(each);
+        }
+        if (noLocalization) return each.name;
+        return getLocalizedString(each.name);
     };
 
     render() {
@@ -51,12 +80,22 @@ class Select extends Component<Props, State> {
             localization: { getLocalizedString }
         } = this.props;
         const { currentValue } = this.state;
-        const menuItems = form.titleMap.map((item, idx) => (
-            // eslint-disable-next-line react/no-array-index-key
-            <MenuItem key={idx} value={item.value}>
-                {item.name && getLocalizedString(item.name)}
-            </MenuItem>
-        ));
+        let menuItems = [];
+        if (form.schema.isObject) {
+            menuItems = form.schema.enum.map((item, idx) => (
+                // eslint-disable-next-line react/no-array-index-key
+                <MenuItem key={idx} value={item}>
+                    {this.getLabel(item)}
+                </MenuItem>
+            ));
+        } else {
+            menuItems = form.titleMap.map((item, idx) => (
+                // eslint-disable-next-line react/no-array-index-key
+                <MenuItem key={idx} value={item.value}>
+                    {this.getLabel(item)}
+                </MenuItem>
+            ));
+        }
         return (
             <FormControl fullWidth>
                 <InputLabel required={form.required}>

src/utils.js

@@ -169,7 +169,7 @@ const select = (name, schema, options) => {
         const f = stdFormObj(name, schema, options);
         f.key = options.path;
         f.type = "select";
-        if (!f.titleMap) {
+        if (!f.titleMap && !schema.isObject) {
             f.titleMap = enumToTitleMap(schema.enum);
         }
         options.lookup[ObjectPath.stringify(options.path)] = f;