1. Advisor
  2. @data-driven-forms/react-form-renderer
  3. functions
  4. @data-driven-forms/react-form-renderer.componentTypes.SELECT_COMPONENT
View all @data-driven-forms/react-form-renderer analysis

How to use the @data-driven-forms/react-form-renderer.componentTypes.SELECT_COMPONENT function in @data-driven-forms/react-form-renderer

To help you get started, we’ve selected a few @data-driven-forms/react-form-renderer examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github data-driven-forms / react-forms / packages / pf4-component-mapper / demo / demo-schemas / sandbox.js View on Github external
dataType: 'string',
                  isSearchable: true,
                  isClearable: true,
                  multi: true,
                  component: components.SELECT_COMPONENT,
                  loadOptions: asyncLoadOptions,
                },
                {
                  name: 'dropdown_list_1',
                  label: 'Dropdown',
                  title: 'Dropdown',
                  dataType: 'string',
                  isSearchable: true,
                  isClearable: false,
                  multi: true,
                  component: components.SELECT_COMPONENT,
                  options: [
                    {
                      label: 'dropdown_list_1 dropdown_list_1 dropdown_list_1 dropdown_list_1 dropdown_list_1 dropdown_list_1 dropdown_list_1 dropdown_list_1 dropdown_list_1 dropdown_list_1 ',
                      value: 'foo',
                    },
                    {
                      label: 'One',
                      value: '1',
                    },
                    {
                      label: 'Three',
                      value: '3',
                    },
                    {
                      label: 'Two',
                      value: '2',
github data-driven-forms / react-forms / packages / react-renderer-demo / src / app / pages / live-editor.js View on Github external
{
                      label: 'Three',
                      value: '3',
                    },
                    {
                      label: 'Two',
                      value: '2',
                    },
                  ],
                },
                {
                  name: 'dropdown_list_2',
                  label: 'Dropdown default value',
                  title: 'Dropdown default value',
                  dataType: 'string',
                  component: components.SELECT_COMPONENT,
                  options: [
                    {
                      label: '',
                      value: null,
                    },
                    {
                      label: 'One',
                      value: '1',
                    },
                    {
                      label: 'Three',
                      value: '3',
                    },
                    {
                      label: 'Two',
                      value: '2',
github data-driven-forms / react-forms / packages / pf4-component-mapper / demo / demo-schemas / sandbox.js View on Github external
description: '',
          key: '555',
          fields: [
            {
              title: 'Dropdowns',
              key: '641',
              fields: [
                {
                  name: 'async-drop-down',
                  label: 'Async dropdown',
                  title: 'Dropdown',
                  dataType: 'string',
                  isSearchable: true,
                  isClearable: true,
                  multi: true,
                  component: components.SELECT_COMPONENT,
                  loadOptions: asyncLoadOptions,
                },
                {
                  name: 'dropdown_list_1',
                  label: 'Dropdown',
                  title: 'Dropdown',
                  dataType: 'string',
                  isSearchable: true,
                  isClearable: false,
                  multi: true,
                  component: components.SELECT_COMPONENT,
                  options: [
                    {
                      label: 'dropdown_list_1 dropdown_list_1 dropdown_list_1 dropdown_list_1 dropdown_list_1 dropdown_list_1 dropdown_list_1 dropdown_list_1 dropdown_list_1 dropdown_list_1 ',
                      value: 'foo',
                    },
github data-driven-forms / react-forms / packages / react-renderer-demo / src / app / src / components / navigation / examples-definitions.js View on Github external
{ label: 'Cats', value: '2' },
      { label: 'Hamsters', value: '3' },
    ],
  }]},
  variants: [{
    name: 'isDisabled',
    title: 'Disabled',
  }, {
    name: 'label',
    title: 'Label',
    component: 'input',
    value: 'Radio',
  }],
},
{
  component: componentTypes.SELECT_COMPONENT,
  link: `?component=${componentTypes.SELECT_COMPONENT}`,
  linkText: 'Select',
  ContentText: GenericComponentText,
  canBeRequired: true,
  value: { fields: [{
    component: componentTypes.SELECT_COMPONENT,
    label: 'Select',
    name: 'select',
    simpleValue: true,
    options: [
      { label: 'Dogs', value: '1' },
      { label: 'Cats', value: '2' },
      { label: 'Hamsters', value: '3' },
    ],
  }]},
  variants: [{
github data-driven-forms / react-forms / packages / mui-component-mapper / src / form-fields / component-mapper.js View on Github external
TextareaField,
  SelectField,
  CheckboxGroup,
  Radio,
  SwitchField,
  DatePickerField,
  TimePickerField,
  PlainTextField,
} from './form-fields';
import SubForm from './sub-form';
import Tabs from './tabs';

const mapper = {
  [componentTypes.TEXT_FIELD]: TextField,
  [componentTypes.TEXTAREA_FIELD]: TextareaField,
  [componentTypes.SELECT_COMPONENT]: SelectField,
  [componentTypes.CHECKBOX]: CheckboxGroup,
  [componentTypes.SUB_FORM]: SubForm,
  [componentTypes.RADIO]: Radio,
  [componentTypes.TABS]: Tabs,
  [componentTypes.DATE_PICKER]: DatePickerField,
  [componentTypes.TIME_PICKER]: TimePickerField,
  [componentTypes.SWITCH]: SwitchField,
  [componentTypes.PLAIN_TEXT]: PlainTextField,
};

export default mapper;
github data-driven-forms / react-forms / packages / pf4-component-mapper / demo / demo-schemas / wizard-schema.js View on Github external
name: 'step-1',
      stepKey: 1,
      nextStep: {
        when: 'source.source-type',
        stepMapper: {
          aws: 'aws',
          google: 'google',
        },
      },
      fields: [{
        component: componentTypes.TEXTAREA_FIELD,
        name: 'source.source-name',
        type: 'text',
        label: 'Source name',
      }, {
        component: componentTypes.SELECT_COMPONENT,
        name: 'source.source-type',
        label: 'Source type',
        isRequired: true,
        options: [{
          label: 'Please Choose',
        }, {
          value: 'aws',
          label: 'Aws',
        }, {
          value: 'google',
          label: 'Google',
        }],
        validate: [{
          type: validatorTypes.REQUIRED,
        }],
      }],
github data-driven-forms / react-forms / packages / mui-component-mapper / demo / demo-schemas / sandbox.js View on Github external
},
        {
          title: 'Tab 3',
          description: '',
          key: '555',
          fields: [
            {
              title: 'Dropdowns',
              key: '641',
              fields: [
                {
                  name: 'dropdown_list_1',
                  label: 'Dropdown',
                  title: 'Dropdown',
                  dataType: 'string',
                  component: components.SELECT_COMPONENT,
                  isSearchable: true,
                  options: [
                    {
                      label: '',
                      value: null,
                    },
                    {
                      label: 'One',
                      value: '1',
                    },
                    {
                      label: 'Three',
                      value: '3',
                    },
                    {
                      label: 'Two',
github data-driven-forms / react-forms / packages / pf3-component-mapper / src / form-fields / component-mapper.js View on Github external
SelectField,
  CheckboxGroup,
  Radio,
  SwitchField,
  DatePickerField,
  PlainTextField,
} from './form-fields';
import SubForm from './sub-form';
import Tabs from './tabs';
import Wizard from './wizzard/wizzard';
import Select from './select';

const mapper = {
  [componentTypes.TEXT_FIELD]: TextField,
  [componentTypes.TEXTAREA_FIELD]: TextareaField,
  [componentTypes.SELECT_COMPONENT]: SelectField,
  [componentTypes.CHECKBOX]: CheckboxGroup,
  [componentTypes.SUB_FORM]: SubForm,
  [componentTypes.RADIO]: Radio,
  [componentTypes.TABS]: Tabs,
  [componentTypes.DATE_PICKER]: DatePickerField,
  [componentTypes.TIME_PICKER]: props =&gt; <div>time picker</div>,
  [componentTypes.SWITCH]: SwitchField,
  [componentTypes.WIZARD]: Wizard,
  [componentTypes.PLAIN_TEXT]: PlainTextField,
};

export default mapper;

export const components = {
  TextField,
  TextareaField,
github data-driven-forms / react-forms / packages / pf3-component-mapper / src / form-fields / form-fields.js View on Github external
[componentTypes.TEXTAREA_FIELD]: () =&gt;
    ,
  [componentTypes.CHECKBOX]: () =&gt;(
    { label }
    { helperText &amp;&amp;  }
  ),
  [componentTypes.RADIO]: () =&gt; (
    
  ),
  [componentTypes.SELECT_COMPONENT]: () =&gt; <div>
    <select placeholder="{">
  ,
  [componentTypes.SWITCH]: () =&gt;
    </select></div>
github data-driven-forms / react-forms / packages / react-renderer-demo / src / app / src / components / navigation / examples-definitions.js View on Github external
{ label: 'Hamsters', value: '3' },
    ],
  }]},
  variants: [{
    name: 'isDisabled',
    title: 'Disabled',
  }, {
    name: 'label',
    title: 'Label',
    component: 'input',
    value: 'Radio',
  }],
},
{
  component: componentTypes.SELECT_COMPONENT,
  link: `?component=${componentTypes.SELECT_COMPONENT}`,
  linkText: 'Select',
  ContentText: GenericComponentText,
  canBeRequired: true,
  value: { fields: [{
    component: componentTypes.SELECT_COMPONENT,
    label: 'Select',
    name: 'select',
    simpleValue: true,
    options: [
      { label: 'Dogs', value: '1' },
      { label: 'Cats', value: '2' },
      { label: 'Hamsters', value: '3' },
    ],
  }]},
  variants: [{
    name: 'isDisabled',

@data-driven-forms/react-form-renderer

React Form Renderer. Data Driven Forms converts JSON form definitions into fully functional React forms.

GitHub
Apache-2.0
Latest version published 9 days ago

Package Health Score

79 / 100
Full package analysis

Popular @data-driven-forms/react-form-renderer functions

Similar packages