Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
}), _react["default"].createElement(_grommet.FormField, {
label: "Email",
name: "email",
type: "email",
required: true
}), _react["default"].createElement(_grommet.FormField, {
label: "Employee ID",
name: "employeeId",
required: true,
validate: {
regexp: /^[0-9]{4,6}$/,
message: '4-6 digits'
}
}), _react["default"].createElement(_grommet.FormField, {
name: "subscribe",
component: _grommet.CheckBox,
pad: true,
label: "Subscribe?"
}), _react["default"].createElement(_grommet.FormField, {
name: "ampm",
component: _grommet.RadioButtonGroup,
pad: true,
options: ['morning', 'evening']
}), _react["default"].createElement(_grommet.FormField, {
label: "Size",
name: "size",
component: _grommet.Select,
onChange: function onChange(event) {
return console.log(event);
},
options: ['small', 'medium', 'large', 'xlarge']
}), _react["default"].createElement(_grommet.FormField, {
}), _react["default"].createElement(_grommet.FormField, {
label: "Email",
name: "email",
type: "email",
required: true
}), _react["default"].createElement(_grommet.FormField, {
label: "Employee ID",
name: "employeeId",
required: true,
validate: {
regexp: /^[0-9]{4,6}$/,
message: '4-6 digits'
}
}), _react["default"].createElement(_grommet.FormField, {
name: "subscribe",
component: _grommet.CheckBox,
pad: true,
label: "Subscribe?"
}), _react["default"].createElement(_grommet.FormField, {
name: "ampm",
component: _grommet.RadioButtonGroup,
pad: true,
options: ['morning', 'evening']
}), _react["default"].createElement(_grommet.FormField, {
label: "Size",
name: "size",
component: _grommet.Select,
onChange: function onChange(event) {
return console.log(event);
},
options: ['small', 'medium', 'large', 'xlarge']
}), _react["default"].createElement(_grommet.FormField, {
}), checkboxes.map(function (item) {
return _react["default"].createElement(_grommet.CheckBox, {
key: item,
checked: checked.includes(item),
label: item,
onChange: function onChange(e) {
return onCheck(e, item);
}
});
}))));
};
_proto.render = function render() {
var _this$props = this.props,
value = _this$props.value,
selected = _this$props.selected;
return _react["default"].createElement(_grommet.Box, {
direction: "row",
gap: "small",
align: "center",
pad: "xsmall"
}, _react["default"].createElement(_grommet.CheckBox, {
tabIndex: "-1",
checked: selected,
onChange: function onChange() {}
}), value);
};
var FormFieldToggle = function FormFieldToggle(props) {
return _react["default"].createElement(_grommet.Grommet, {
theme: _grommet.grommet
}, _react["default"].createElement(_grommet.Box, {
align: "center",
pad: "large"
}, _react["default"].createElement(_grommet.FormField, _extends({
label: "Label",
htmlFor: "check-box"
}, props), _react["default"].createElement(_grommet.Box, {
pad: {
horizontal: 'small',
vertical: 'xsmall'
}
}, _react["default"].createElement(_grommet.CheckBox, {
id: "check-box",
label: "CheckBox",
toggle: true
})))));
};
var FormFieldCheckBox = function FormFieldCheckBox(props) {
return _react["default"].createElement(_grommet.Grommet, {
theme: _grommet.grommet
}, _react["default"].createElement(_grommet.Box, {
align: "center",
pad: "large"
}, _react["default"].createElement(_grommet.FormField, _extends({
label: "Label",
htmlFor: "check-box"
}, props), _react["default"].createElement(_grommet.Box, {
pad: {
horizontal: 'small',
vertical: 'xsmall'
}
}, _react["default"].createElement(_grommet.CheckBox, {
id: "check-box",
label: "CheckBox"
})))));
};
var ThemedCheckBox = function ThemedCheckBox(props) {
var _useState = (0, _react.useState)(false),
checked = _useState[0],
setChecked = _useState[1];
return _react["default"].createElement(_grommet.Grommet, {
theme: (0, _utils.deepMerge)(_themes.grommet, customCheckBoxTheme)
}, _react["default"].createElement(_grommet.Box, {
align: "center",
pad: "large"
}, _react["default"].createElement(_grommet.CheckBox, _extends({}, props, {
label: "Choice",
checked: checked,
onChange: function onChange(event) {
return setChecked(event.target.checked);
}
}))));
};
}, "Click & Scroll"), checkboxes.map(function (item) {
return _react["default"].createElement(_grommet.CheckBox, {
key: item,
checked: checks.includes(item),
label: item,
onChange: onCheck(item)
});
}))));
};
direction: "row-responsive",
gap: "medium",
justify: "end",
align: "center",
margin: "small"
}, _react["default"].createElement(_grommet.Box, {
basis: "small"
}, _react["default"].createElement(_grommet.Select, {
plain: true,
size: "small",
options: ['grommet', 'dark', 'hpe', 'aruba', 'hp', 'dxc', 'v1'],
value: themeName,
onChange: function onChange(event) {
return setThemeName(event.option);
}
})), themeCanMode && _react["default"].createElement(_grommet.CheckBox, {
label: "dark",
checked: themeMode === 'dark',
onChange: function onChange() {
return setThemeMode(themeMode === 'dark' ? 'light' : 'dark');
}
}), !themeCanMode && _react["default"].createElement(_grommet.Box, {
basis: "small"
}, _react["default"].createElement(_grommet.Select, {
plain: true,
placeholder: "background",
size: "small",
options: ['default', 'dark-1', 'light-1'],
value: background,
onChange: function onChange(event) {
return setBackground(event.option);
}
var onButtonClick = function onButtonClick() {
return setChecked(!checked);
};
var onCheckboxChange = function onCheckboxChange() {};
return _react["default"].createElement(_grommet.Grommet, {
theme: _themes.grommet
}, _react["default"].createElement(_grommet.Box, {
align: "center",
pad: "large"
}, _react["default"].createElement(_grommet.Button, {
hoverIndicator: "background",
onClick: onButtonClick
}, _react["default"].createElement(_grommet.CheckBox, {
tabIndex: "-1",
checked: checked,
label: _react["default"].createElement(_grommet.Text, null, "Hi"),
onChange: onCheckboxChange
}))));
};