From 3310a7c7c99cc202d1f30dc0211d2fc3bf0dd859 Mon Sep 17 00:00:00 2001 From: Sandro Lutz <code@temparus.ch> Date: Wed, 29 Aug 2018 00:09:25 +0200 Subject: [PATCH] Fix issues with label not showing on JSON schema form --- src/components/form/inputGroup.js | 5 +- src/components/form/selectGroup.js | 74 +++++++++++++++--------------- 2 files changed, 39 insertions(+), 40 deletions(-) diff --git a/src/components/form/inputGroup.js b/src/components/form/inputGroup.js index 8bc2df00..c693f785 100644 --- a/src/components/form/inputGroup.js +++ b/src/components/form/inputGroup.js @@ -1,4 +1,5 @@ import m from 'mithril'; +import { i18n } from '../../models/language'; export default class InputGroup { constructor(vnode) { @@ -33,7 +34,7 @@ export default class InputGroup { if (['radio', 'checkbox'].includes(args.type)) { return m('div', { class: groupClasses }, [ m(`input[name=${vnode.attrs.name}][id=${vnode.attrs.name}]`, args), - m(`label[for=${vnode.attrs.name}]`, vnode.attrs.title), + m(`label[for=${vnode.attrs.name}]`, i18n(vnode.attrs.name)), errorField, ]); } @@ -51,7 +52,7 @@ export default class InputGroup { } return m('div', { class: groupClasses }, [ - m(`label[for=${vnode.attrs.name}]`, vnode.attrs.title), + m(`label[for=${vnode.attrs.name}]`, i18n(vnode.attrs.name)), m(`input[name=${vnode.attrs.name}][id=${vnode.attrs.name}]`, args), m('datalist', { id: args.list }, this.suggestions.map(item => m('option', item))), errorField, diff --git a/src/components/form/selectGroup.js b/src/components/form/selectGroup.js index 34510e2b..2efffa1e 100644 --- a/src/components/form/selectGroup.js +++ b/src/components/form/selectGroup.js @@ -1,6 +1,8 @@ import m from 'mithril'; import inputGroup from './inputGroup'; +import Dropdown from '../Dropdown'; +import { i18n } from '../../models/language'; export default class SelectGroup { oninit() { @@ -20,20 +22,20 @@ export default class SelectGroup { if (typeof option === 'object') { return option; } - return { value: option, text: option }; + return { value: option, label: option }; }); switch (vnode.attrs.type) { case 'buttons': { if (args.multipleSelect) { return m('div', { class: vnode.attrs.classes }, [ - m(`label[for=${vnode.attrs.name}]`, vnode.attrs.title), + m(`label[for=${vnode.attrs.name}]`, i18n(vnode.attrs.name)), m( 'div', options.map(option => m(inputGroup, { name: vnode.attrs.name, - title: option.text, + title: i18n(option.label), value: option.value, onchange: e => { if (e.target.checked) { @@ -63,59 +65,55 @@ export default class SelectGroup { options.map(option => m(inputGroup, { name: vnode.attrs.name, - title: option.text, + title: i18n(option.label), value: option.value, onchange: vnode.attrs.onchange, args: { type: 'radio' }, }) ) ), - m(`label[for=${vnode.attrs.name}]`, vnode.attrs.title), + m(`label[for=${vnode.attrs.name}]`, vnode.attrs.name), ]); } case 'select': default: { if (args.multipleSelect) { return m('div', { class: vnode.attrs.classes }, [ - m(`label[for=${vnode.attrs.name}]`, vnode.attrs.title), - m( - `select[name=${vnode.attrs.name}][id=${vnode.attrs.name}]`, - { - args, - onchange: e => { - const value = []; - let opt; - for (let i = 0; i < e.target.options.length; i += 1) { - opt = e.target.options[i]; - if (opt.selected) { - value.push(opt); - } + m(`label[for=${vnode.attrs.name}]`, i18n(vnode.attrs.name)), + m(Dropdown, { + ...args, + onchange: e => { + const value = []; + let opt; + for (let i = 0; i < e.target.options.length; i += 1) { + opt = e.target.options[i]; + if (opt.selected) { + value.push(opt); } - vnode.attrs.onchange({ target: { name: e.target.name, value } }); - }, - oninput: e => { - const value = []; - let opt; - for (let i = 0; i < e.target.options.length; i += 1) { - opt = e.target.options[i]; - if (opt.selected) { - value.push(opt); - } + } + vnode.attrs.onchange({ target: { name: e.target.name, value } }); + }, + oninput: e => { + const value = []; + let opt; + for (let i = 0; i < e.target.options.length; i += 1) { + opt = e.target.options[i]; + if (opt.selected) { + value.push(opt); } - vnode.attrs.oninput({ target: { name: e.target.name, value } }); - }, + } + vnode.attrs.oninput({ target: { name: e.target.name, value } }); }, - options.map(option => m('option', { value: option.value }, option.text)) - ), + data: options, + }), ]); } return m('div', { class: vnode.attrs.classes }, [ - m(`label[for=${vnode.attrs.name}]`, vnode.attrs.title), - m( - `select[name=${vnode.attrs.name}][id=${vnode.attrs.name}]`, - args, - options.map(option => m('option', { value: option.value }, option.text)) - ), + m(`label[for=${vnode.attrs.name}]`, i18n(vnode.attrs.name)), + m(Dropdown, { + ...args, + data: options, + }), ]); } } -- GitLab