Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
value: { fields: [{
component: componentTypes.TIME_PICKER,
label: 'Time Picker',
name: 'time-picker',
}]},
variants: [{
name: 'label',
title: 'Label',
component: 'input',
value: 'Time Picker',
},
],
},
{
component: componentTypes.TABS,
link: `?component=${componentTypes.TABS}`,
linkText: 'Tabs / Tab item',
ContentText: TabsText,
value: { fields: [{
component: componentTypes.TABS,
name: 'tabs',
fields: [
{
component: componentTypes.TAB_ITEM,
validateFields: [ 'apple' ],
name: '1',
title: 'Fruits',
description: 'Here you can find fruits',
fields: [
{
name: 'apple',
label: 'Apple',
DatePickerField,
TimePickerField,
SwitchField,
PlainTextField,
} from './form-fields';
import Wizard from './wizard/wizard';
import { Select } from './select/select';
const mapper = {
[componentTypes.TEXT_FIELD]: TextField,
[componentTypes.TEXTAREA_FIELD]: TextAreaField,
[componentTypes.SELECT_COMPONENT]: SelectField,
[componentTypes.CHECKBOX]: CheckboxField,
[componentTypes.SUB_FORM]: SubForm,
[componentTypes.RADIO]: RadioField,
[componentTypes.TABS]: Tabs,
[componentTypes.DATE_PICKER]: DatePickerField,
[componentTypes.TIME_PICKER]: TimePickerField,
[componentTypes.TAG_CONTROL]: props => <div>Unsupported tag control</div>,
[componentTypes.WIZARD]: Wizard,
[componentTypes.SWITCH]: SwitchField,
[componentTypes.PLAIN_TEXT]: PlainTextField,
};
export default mapper;
export const components = {
TextField,
TextAreaField,
CheckboxField,
RadioField,
SelectField,
}]},
variants: [{
name: 'label',
title: 'Label',
component: 'input',
value: 'Time Picker',
},
],
},
{
component: componentTypes.TABS,
link: componentTypes.TABS,
linkText: 'Tabs / Tab item',
ContentText: TabsText,
value: { fields: [{
component: componentTypes.TABS,
name: 'tabs',
fields: [
{
component: componentTypes.TAB_ITEM,
validateFields: [ 'apple' ],
name: '1',
title: 'Fruits',
description: 'Here you can find fruits',
fields: [
{
name: 'apple',
label: 'Apple',
title: 'Apple',
component: componentTypes.TEXT_FIELD,
validate: [{
type: validatorTypes.REQUIRED,
],
},
{
name: 'date_time_control_3',
label: 'Timepicker',
title: 'Timepicker',
component: components.TIME_PICKER,
},
],
component: components.SUB_FORM,
},
],
component: components.TAB_ITEM,
},
],
component: components.TABS,
key: '57',
},
],
};
const LiveEditor = () => {
const [ state, setState ] = useState({
value: JSON.stringify(baseStructure, null, 2),
parsedSchema: baseStructure,
});
const mappers = useContext(MapperContext);
const onChange = value => {
let schema;
try {
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 => <div>time picker</div>,
[componentTypes.SWITCH]: SwitchField,
[componentTypes.WIZARD]: Wizard,
[componentTypes.PLAIN_TEXT]: PlainTextField,
};
export default mapper;
export const components = {
TextField,
TextareaField,
SelectField,
CheckboxGroup,
SubForm,
Radio,
}]},
variants: [{
name: 'label',
title: 'Label',
component: 'input',
value: 'Time Picker',
},
],
},
{
component: componentTypes.TABS,
link: `?component=${componentTypes.TABS}`,
linkText: 'Tabs / Tab item',
ContentText: TabsText,
value: { fields: [{
component: componentTypes.TABS,
name: 'tabs',
fields: [
{
component: componentTypes.TAB_ITEM,
validateFields: [ 'apple' ],
name: '1',
title: 'Fruits',
description: 'Here you can find fruits',
fields: [
{
name: 'apple',
label: 'Apple',
title: 'Apple',
component: componentTypes.TEXT_FIELD,
validate: [{
type: validatorTypes.REQUIRED,
value: { fields: [{
component: componentTypes.TIME_PICKER,
label: 'Time Picker',
name: 'time-picker',
}]},
variants: [{
name: 'label',
title: 'Label',
component: 'input',
value: 'Time Picker',
},
],
},
{
component: componentTypes.TABS,
link: componentTypes.TABS,
linkText: 'Tabs / Tab item',
ContentText: TabsText,
value: { fields: [{
component: componentTypes.TABS,
name: 'tabs',
fields: [
{
component: componentTypes.TAB_ITEM,
validateFields: [ 'apple' ],
name: '1',
title: 'Fruits',
description: 'Here you can find fruits',
fields: [
{
name: 'apple',
label: 'Apple',
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;
],
},
{
name: 'date_time_control_3',
label: 'Timepicker',
title: 'Timepicker',
component: components.TIME_PICKER,
},
],
component: components.SUB_FORM,
},
],
component: components.TAB_ITEM,
},
],
component: components.TABS,
key: '57',
},
],
};
export const defaultValues = {
text_box_5: '"hello"', check_box_2: 'true', radio_button_4: '2', dropdown_list_2: '2',
};
export default output;
],
},
{
name: 'date_time_control_3',
label: 'Timepicker',
title: 'Timepicker',
component: components.TIME_PICKER,
},
],
component: components.SUB_FORM,
},
],
component: components.TAB_ITEM,
},
],
component: components.TABS,
key: '57',
},
],
};
export const defaultValues = {
text_box_5: '"hello"', check_box_2: 'true', radio_button_4: '2', dropdown_list_2: '2',
};
export default output;