grommet
Version:
focus on the essential experience
158 lines (157 loc) • 4.38 kB
JavaScript
"use strict";
exports.__esModule = true;
exports["default"] = exports.Custom = void 0;
var _react = _interopRequireDefault(require("react"));
var _grommet = require("grommet");
var _themes = require("grommet/themes");
var _utils = require("grommet/utils");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
var customTheme = {
global: {
font: {
size: '16px'
},
input: {
weight: 400
}
},
formField: {
label: {
color: 'dark-2',
size: 'small',
margin: 'xsmall',
weight: 600
},
border: {
position: 'outer',
side: 'all'
},
disabled: {
background: {
color: 'status-disabled',
opacity: true
}
},
content: {
pad: 'small'
},
error: {
background: {
color: 'status-critical',
opacity: 'weak'
}
},
margin: 'none'
}
};
var Custom = exports.Custom = function Custom() {
return /*#__PURE__*/_react["default"].createElement(_grommet.Grommet, {
full: true,
theme: (0, _utils.deepMerge)(_themes.grommet, customTheme)
}, /*#__PURE__*/_react["default"].createElement(_grommet.Box, {
fill: true,
align: "center",
justify: "center"
}, /*#__PURE__*/_react["default"].createElement(_grommet.Box, {
width: "medium"
}, /*#__PURE__*/_react["default"].createElement(_grommet.Form, {
onReset: function onReset(event) {
return console.log(event);
},
onSubmit: function onSubmit(_ref) {
var value = _ref.value;
return console.log('Submit', value);
}
}, /*#__PURE__*/_react["default"].createElement(_grommet.FormField, {
htmlFor: "name",
label: "Name",
name: "name",
required: true
}, /*#__PURE__*/_react["default"].createElement(_grommet.TextInput, {
id: "name",
"aria-required": true,
name: "name"
})), /*#__PURE__*/_react["default"].createElement(_grommet.FormField, {
htmlFor: "email",
label: "Email",
name: "email",
required: true
}, /*#__PURE__*/_react["default"].createElement(_grommet.MaskedInput, {
name: "email",
id: "email",
"aria-required": true,
mask: [{
regexp: /^[\w\-_.]+$/,
placeholder: 'example'
}, {
fixed: '@'
}, {
regexp: /^[\w]+$/,
placeholder: 'my'
}, {
fixed: '.'
}, {
regexp: /^[\w]+$/,
placeholder: 'com'
}]
})), /*#__PURE__*/_react["default"].createElement(_grommet.FormField, {
htmlFor: "subscribe",
name: "subscribe"
}, /*#__PURE__*/_react["default"].createElement(_grommet.CheckBox, {
id: "subscribe",
name: "subscribe",
label: "Subscribe?"
})), /*#__PURE__*/_react["default"].createElement(_grommet.FormField, {
label: "Time of day",
htmlFor: "ampm",
name: "ampm"
}, /*#__PURE__*/_react["default"].createElement(_grommet.RadioButtonGroup, {
id: "ampm",
name: "ampm",
options: ['morning', 'evening']
})), /*#__PURE__*/_react["default"].createElement(_grommet.FormField, {
htmlFor: "size",
label: "Size",
name: "size"
}, /*#__PURE__*/_react["default"].createElement(_grommet.Select, {
id: "size",
name: "size",
options: ['small', 'medium', 'large']
})), /*#__PURE__*/_react["default"].createElement(_grommet.FormField, {
htmlFor: "comments",
label: "Comments",
name: "comments",
disabled: true
}, /*#__PURE__*/_react["default"].createElement(_grommet.TextArea, {
id: "comments",
name: "comments",
disabled: true
})), /*#__PURE__*/_react["default"].createElement(_grommet.FormField, {
htmlFor: "age",
label: "Age",
name: "age"
}, /*#__PURE__*/_react["default"].createElement(_grommet.RangeInput, {
id: "age",
name: "age",
min: 15,
max: 75
})), /*#__PURE__*/_react["default"].createElement(_grommet.Box, {
direction: "row",
justify: "between",
margin: {
top: 'medium'
}
}, /*#__PURE__*/_react["default"].createElement(_grommet.Button, {
label: "Cancel"
}), /*#__PURE__*/_react["default"].createElement(_grommet.Button, {
type: "reset",
label: "Reset"
}), /*#__PURE__*/_react["default"].createElement(_grommet.Button, {
type: "submit",
label: "Update",
primary: true
}))))));
};
var _default = exports["default"] = {
title: 'Input/Form/Custom Themed/Custom'
};