diff --git a/example/ExamplePage.js b/example/ExamplePage.js index 6f1a4f0c..ec3408f2 100644 --- a/example/ExamplePage.js +++ b/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 { { 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" }, { diff --git a/example/data/selectlabel.js b/example/data/selectlabel.js new file mode 100644 index 00000000..31f12224 --- /dev/null +++ b/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" + ] +}; diff --git a/example/data/selectlabel.json b/example/data/selectlabel.json deleted file mode 100644 index 51921141..00000000 --- a/example/data/selectlabel.json +++ /dev/null @@ -1,46 +0,0 @@ -{ - "schema": { - "type": "object", - "required": [ - "name", - "region" - ], - "title": "Create Wallet", - "properties": { - "name": { - "title": "Name", - "type": "string" - }, - "region": { - "title": "Region", - "type": "string", - "enum": [ - "0000", - "0001", - "0002" - ] - } - } - }, - "form": [ - "name", - { - "key": "region", - "type": "select", - "titleMap": [ - { - "value": "0000", - "name": "Americas" - }, - { - "value": "0001", - "name": "Asia, Oceania" - }, - { - "value": "0002", - "name": "Europe, Africa" - } - ] - } - ] -} \ No newline at end of file diff --git a/src/Select.js b/src/Select.js index e656a9ce..b80f7763 100644 --- a/src/Select.js +++ b/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 { } 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 { localization: { getLocalizedString } } = this.props; const { currentValue } = this.state; - const menuItems = form.titleMap.map((item, idx) => ( - // eslint-disable-next-line react/no-array-index-key - - {item.name && getLocalizedString(item.name)} - - )); + let menuItems = []; + if (form.schema.isObject) { + menuItems = form.schema.enum.map((item, idx) => ( + // eslint-disable-next-line react/no-array-index-key + + {this.getLabel(item)} + + )); + } else { + menuItems = form.titleMap.map((item, idx) => ( + // eslint-disable-next-line react/no-array-index-key + + {this.getLabel(item)} + + )); + } return ( diff --git a/src/utils.js b/src/utils.js index ab47ff84..08907253 100644 --- a/src/utils.js +++ b/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;