styled-hook-form
Version:
React form library for styled-components based on grommet and react-hook-form
48 lines (47 loc) • 3.01 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.StyledEditorWrap = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const error_message_1 = require("@hookform/error-message");
const grommet_1 = require("grommet");
const react_hook_form_1 = require("react-hook-form");
const styled_components_1 = __importDefault(require("styled-components"));
const grommet_icons_1 = require("grommet-icons");
const utils_1 = require("grommet/utils");
const react_1 = require("react");
const types_1 = require("../../../types");
exports.StyledEditorWrap = styled_components_1.default.div `
display: flex;
flex-direction: column;
margin: 0.5em 0;
`;
const ValidationMessage = styled_components_1.default.span `
color: ${(props) => { var _a, _b, _c; return (_c = (_b = (_a = props.theme.validation) === null || _a === void 0 ? void 0 : _a.error) === null || _b === void 0 ? void 0 : _b.color) !== null && _c !== void 0 ? _c : "#f00"; }};
`;
const Label = styled_components_1.default.label `
width: 15em;
`;
const inlineLabelControlTypes = [
types_1.FormFieldType.Boolean,
];
const WithEditorWrap = (props) => {
const { children, name, label, tip, renderLabel, editorType, plain } = props;
const { errors } = react_hook_form_1.useFormState();
let baseTheme = react_1.useContext(grommet_1.ThemeContext);
let theme = utils_1.deepMerge(baseTheme, {
formField: {
border: { position: "none" },
},
});
let isInlineControl = inlineLabelControlTypes.indexOf(editorType) === -1;
return (jsx_runtime_1.jsx(grommet_1.ThemeContext.Extend, Object.assign({ value: theme }, { children: jsx_runtime_1.jsx(grommet_1.FormField, Object.assign({ margin: plain ? "0" : undefined, error: react_hook_form_1.get(errors, name) ? (jsx_runtime_1.jsx(error_message_1.ErrorMessage, { errors: errors, name: name, as: jsx_runtime_1.jsx(ValidationMessage, {}, void 0) }, void 0)) : undefined, contentProps: {
focusIndicator: false,
}, label: label && renderLabel && isInlineControl ? (jsx_runtime_1.jsxs(Label, { children: [label, tip && (jsx_runtime_1.jsx(grommet_1.Tip, Object.assign({ plain: true, content: jsx_runtime_1.jsx(grommet_1.Box, Object.assign({ focusIndicator: false, background: "light-3", pad: "small", round: "small", border: {
color: "dark-4",
size: "small",
} }, { children: tip }), void 0), dropProps: { align: { left: "right" } } }, { children: jsx_runtime_1.jsx(grommet_1.Button, { focusIndicator: false, tabIndex: -1, icon: jsx_runtime_1.jsx(grommet_icons_1.CircleInformation, { size: "medium", color: "neutral-3" }, void 0) }, void 0) }), void 0))] }, void 0)) : undefined }, { children: children }), void 0) }), void 0));
};
exports.default = WithEditorWrap;