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
101 lines (100 loc) • 5.53 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;
};
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
import React, { memo, useEffect, useState } from "react";
import { useField, useFormikContext } from "formik";
import Select from "react-select";
import { InputField } from "../InputField";
export var SelectField = memo(function (_a) {
var label = _a.label, value = _a.value, name = _a.name, options = _a.options, placeholder = _a.placeholder, readOnly = _a.readOnly, className = _a.className, labelColor = _a.labelColor, component = _a.component, props = __rest(_a, ["label", "value", "name", "options", "placeholder", "readOnly", "className", "labelColor", "component"]);
var _b = useField({
name: name,
value: value,
}), field = _b[0], meta = _b[1];
var setFieldValue = useFormikContext().setFieldValue;
var _c = useState([]), values = _c[0], setValues = _c[1];
var onChangeHandler = function (option) {
if (props.isMulti && Array.isArray(option)) {
var values_1 = [];
option.forEach(function (op) { return (values_1 = __spreadArray(__spreadArray([], values_1, true), [op.value], false)); });
setFieldValue(field.name, values_1);
}
else if (!Array.isArray(option) && option.value) {
setFieldValue(field.name, option.value);
}
else {
setFieldValue(field.name, option);
}
};
useEffect(function () {
if (options) {
var vals_1 = [];
options.find(function (option) {
var _a;
if (props.isMulti &&
field.value !== null &&
((_a = field === null || field === void 0 ? void 0 : field.value) === null || _a === void 0 ? void 0 : _a.length) > 0) {
if (Array.isArray(field.value))
field.value.find(function (v) {
if (v === option.value) {
return (vals_1 = __spreadArray(__spreadArray([], vals_1, true), [option], false));
}
return null;
});
}
if (option.value === field.value)
return (vals_1 = __spreadArray(__spreadArray([], vals_1, true), [option], false));
return null;
});
setValues(vals_1);
}
}, [field.value, options, props.isMulti]);
if (typeof component === "function") {
return component({ field: field, meta: meta, label: label });
}
if (readOnly) {
return React.createElement(InputField, { name: name, label: label, readOnly: true, type: "text" });
}
return (React.createElement(FieldComponent, __assign({ label: label, name: name, options: options, placeholder: placeholder, className: className, labelColor: labelColor, field: field, meta: meta, values: values, onChangeHandler: onChangeHandler }, props)));
});
SelectField.displayName = "SelectField";
export default SelectField;
var FieldComponent = memo(function (_a) {
var label = _a.label, name = _a.name, options = _a.options, placeholder = _a.placeholder, className = _a.className, labelColor = _a.labelColor, field = _a.field, meta = _a.meta, values = _a.values, onChangeHandler = _a.onChangeHandler, props = __rest(_a, ["label", "name", "options", "placeholder", "className", "labelColor", "field", "meta", "values", "onChangeHandler"]);
var error = meta.error, touched = meta.touched;
var errorText = (touched && error) || null;
var hasError = !!error && touched;
return (React.createElement("div", { style: { marginBottom: "2em" } },
React.createElement("label", { htmlFor: name.replace(/\s/g, "-"), style: { color: labelColor } }, label),
React.createElement(Select, __assign({ id: name.replace(/\s/g, "-"), classNamePrefix: "select-control", options: options, placeholder: placeholder ? placeholder : "Select", isClearable: true }, props, field, { value: values, name: field.name, onBlur: field.onBlur, onChange: onChangeHandler, className: "".concat(className, " ").concat(hasError && touched ? "has-error" : "") })),
touched && hasError ? (React.createElement("label", { style: { color: "#b50000" } }, errorText)) : null));
});
FieldComponent.displayName = "SelectFieldComponent";