Demo 3

by tripolskypetr

HTML

<script src="https://theonekit.com/index.js"></script>

<div id="mount-point"></div>

CSS

html, body {background: whitesmoke; }

Babel + JSX

(function () {
    const { createElement: h } = React;

    const { One, FieldType } = form;

    const fields = [
      {
        type: FieldType.Items,
        title: 'A sample field',
        placeholder: 'Multiple selection',
        name: 'items',
        itemList: ['a', 'b', 'c'],
        isVisible: (obj) => obj.visible,
        isDisabled: (obj) => obj.disabled,
      },
      {
        type: FieldType.Checkbox,
        title: 'Mark as visible',
        defaultValue: true,
        name: 'visible',
      },
      {
        type: FieldType.Checkbox,
        title: 'Mark as disabled',
        defaultValue: false,
        name: 'disabled',
      },
    ];

    const change = (obj) => console.log(obj);

    ReactDOM.render(h(One, {fields, change}), document.querySelector("#mount-point"));
  })();