formik-stepper
Version:
Get ready to take your form-building game to the next level with this revolutionary React component. With its seamless integration with the powerful Formik library, you'll be building forms faster and more efficiently than ever before. But that's not all
89 lines (88 loc) • 5.88 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import React, { memo, useCallback, useEffect, useId, useMemo, useState, } from "react";
import classNames from "classnames";
import { useField } from "formik";
export var InputField = memo(function (_a) {
var className = _a.className, _b = _a.inline, inline = _b === void 0 ? false : _b, _c = _a.floating, floating = _c === void 0 ? false : _c, component = _a.component, label = _a.label, placeholder = _a.placeholder, style = _a.style, props = __rest(_a, ["className", "inline", "floating", "component", "label", "placeholder", "style"]);
var Id = useId();
var _d = useField({ name: props.name }), field = _d[0], meta = _d[1];
var error = meta.error, touched = meta.touched;
var errorText = error || null;
var hasError = !!error;
var _e = useState(false), showPassword = _e[0], setShowPassword = _e[1];
var _f = useState(false), isPassword = _f[0], setIsPassword = _f[1];
var togglePassword = useCallback(function () { return setShowPassword(function (prev) { return !prev; }); }, []);
var parentClasses = classNames({
floating: !!floating,
no_floating: !floating,
inline: !!inline && !floating,
no_inline: !inline,
});
var InputCLasses = classNames({
floating__input: !!floating,
});
var LabelClasses = classNames({
floating__label: !!floating,
});
useEffect(function () {
setIsPassword(props.type === "password");
}, [props.type]);
var FieldComponent = useMemo(function () { return (React.createElement("div", { className: "input_group", style: style },
React.createElement("div", { className: parentClasses },
!floating ? (React.createElement("label", { htmlFor: Id, className: LabelClasses, "data-content": placeholder ? placeholder : label }, label)) : null,
React.createElement("input", __assign({ id: Id, placeholder: placeholder ? placeholder : label, className: "".concat(InputCLasses, " ").concat(className ? className : "", " ").concat(hasError && touched ? "has_error" : "") }, field, props, { type: isPassword ? (showPassword ? "text" : "password") : props.type })),
floating ? (React.createElement("label", { htmlFor: Id, className: LabelClasses, "data-content": placeholder ? placeholder : label },
React.createElement("span", { className: floating ? "hidden--visually" : "" }, label))) : null,
isPassword ? (React.createElement("div", { style: { cursor: "pointer" }, className: "password_eye", onClick: togglePassword }, !showPassword ? (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", fill: "currentColor", className: "bi bi-eye", viewBox: "0 0 16 16" },
React.createElement("path", { d: "M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z" }),
React.createElement("path", { d: "M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z" }))) : (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", fill: "currentColor", className: "bi bi-eye-slash", viewBox: "0 0 16 16" },
React.createElement("path", { d: "M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z" }),
React.createElement("path", { d: "M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z" }),
React.createElement("path", { d: "M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708z" }))))) : null),
touched && hasError ? (React.createElement("label", { id: "error-".concat(field.name), htmlFor: Id, className: "input-error" }, errorText)) : null)); }, [
Id,
InputCLasses,
LabelClasses,
className,
errorText,
field,
floating,
hasError,
isPassword,
label,
parentClasses,
placeholder,
props,
showPassword,
style,
togglePassword,
touched,
]);
if (typeof component === "function") {
return component({ field: field, meta: meta, label: label });
}
return FieldComponent;
});
InputField.displayName = "InputField";
export default InputField;