styled-hook-form
Version:
React form library for styled-components based on grommet and react-hook-form
60 lines (59 loc) • 3.44 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.PasswordEditor = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const react_hook_form_1 = require("react-hook-form");
const grommet_1 = require("grommet");
const styled_components_1 = __importDefault(require("styled-components"));
const password_strength_1 = __importDefault(require("./password-strength"));
const context_1 = require("../../../../context");
const grommet_icons_1 = require("grommet-icons");
//@ts-ignore
const styles_1 = require("grommet/utils/styles");
const PasswordBoxWrap = styled_components_1.default.div `
display: flex;
flex-direction: column;
`;
const PasswordBox = styled_components_1.default(grommet_1.Box) `
${styles_1.inputStyle}
${(props) => props.theme.textInput && props.theme.textInput.extend};
${(props) => props.disabled &&
styles_1.disabledStyle(props.theme.textInput.disabled && props.theme.textInput.disabled.opacity)}
& input{
border:none!important;
}
`;
exports.PasswordEditor = react_1.forwardRef((props, ref) => {
let vrules = props.validationRules || {};
const { translate: T } = context_1.useFormBuilderContext();
const [passStrength, setPassStrength] = react_1.useState(0);
let { name, label, defaultValue: initialValue, methods, required, showPasswordStrength, minPasswordStrength, visibilityToggle = true, inputProps, shouldUnregister } = props;
const [reveal, setReveal] = react_1.useState(false);
let control = methods === null || methods === void 0 ? void 0 : methods.control;
if (required) {
vrules.required = {
value: required,
message: T("required-msg", { name: label }),
};
}
if (minPasswordStrength) {
vrules.validate = () => {
return passStrength >= minPasswordStrength
? true
: T("password-input-weak-password");
};
}
const handlePassStrengthChange = (strength) => {
setPassStrength(strength);
};
return (jsx_runtime_1.jsx(react_hook_form_1.Controller, { name: name, defaultValue: initialValue, shouldUnregister: shouldUnregister, rules: vrules, control: control, render: ({ field }) => {
var _a;
return (jsx_runtime_1.jsxs(PasswordBoxWrap, { children: [jsx_runtime_1.jsxs(PasswordBox, Object.assign({ direction: "row", align: "center", pad: { horizontal: "small" } }, inputProps, { children: [jsx_runtime_1.jsx(grommet_1.TextInput, Object.assign({}, inputProps, { ref: ref, type: reveal ? "text" : "password", onChange: (e) => field.onChange(e), defaultValue: (_a = field.value) !== null && _a !== void 0 ? _a : "", focusIndicator: false, plain: "full" }), void 0),
visibilityToggle && (jsx_runtime_1.jsx(grommet_1.Button, { plain: true, focusIndicator: false, icon: reveal ? jsx_runtime_1.jsx(grommet_icons_1.View, { size: "medium" }, void 0) : jsx_runtime_1.jsx(grommet_icons_1.Hide, { size: "medium" }, void 0), onClick: () => setReveal(!reveal) }, void 0))] }), void 0),
showPasswordStrength && (jsx_runtime_1.jsx(password_strength_1.default, { password: field.value, onChange: handlePassStrengthChange }, void 0))] }, void 0));
} }, void 0));
});