react-proforma
Version:
React Proforma helps you build simple to complex web forms with ease in React. -- Simplicity where you want it. Flexibility where you need it.
89 lines (88 loc) • 6.4 kB
JavaScript
"use strict";
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 __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importDefault(require("react"));
var ProformaContext_1 = require("./ProformaContext");
function memoCompare(prevProps, nextProps) {
return (prevProps.value === nextProps.value && prevProps.type === nextProps.type);
}
// ==== STANDARD INPUT ====
var _Field = function (props) {
var name = props.name, type = props.type, value = props.value, handleChange = props.handleChange, handleFocus = props.handleFocus, handleBlur = props.handleBlur, parentRef = props.parentRef, otherProps = __rest(props, ["name", "type", "value", "handleChange", "handleFocus", "handleBlur", "parentRef"]);
return (react_1.default.createElement("input", __assign({ name: name, value: value, ref: parentRef, type: type, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur }, otherProps)));
};
var MemoField = react_1.default.memo(_Field, memoCompare);
// ==== COMPONENT INPUT ====
var _ComponentField = function (props) {
var name = props.name, value = props.value, type = props.type, Component = props.component, handleChange = props.handleChange, handleFocus = props.handleFocus, handleBlur = props.handleBlur, children = props.children, parentRef = props.parentRef, otherProps = __rest(props, ["name", "value", "type", "component", "handleChange", "handleFocus", "handleBlur", "children", "parentRef"]);
if (Component) {
if (!children) {
return (react_1.default.createElement(Component, __assign({ name: name, value: value, ref: parentRef, type: type, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur }, otherProps)));
}
else {
return (react_1.default.createElement(Component, __assign({ name: name, value: value, ref: parentRef, type: type, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur }, otherProps), children));
}
}
else {
return null;
}
};
var MemoComponentField = react_1.default.memo(_ComponentField, memoCompare);
/**
* Component to produce an input form element, either with
* a standard input tag, or with your own custom component.
*
* @param {string} name - name of the form element, which MUST be the same string value as the corresponding value in your "initialValues" object.
* @param {string=} [type] - input type of the form element (i.e. "text", "password", "email", "date", etc.). Defaults to 'text'. NOTES: 1) For checkboxes and radio button inputs, use the Checkbox and Radio components. 2) input type="file" is read-only, so cannot be a controlled component.
* @param {React.ComponentType=} [component] - Optional custom component to be used instead of a standard textarea tag.
* @returns {JSX.Element} JSX.Element
*/
exports.Field = react_1.default.forwardRef(function (props, ref) {
var _a = react_1.default.useContext(ProformaContext_1.ProformaContext), values = _a.values, _rPHandleChange = _a.handleChange, _rPHandleFocus = _a.handleFocus, _rPHandleBlur = _a.handleBlur;
var name = props.name, type = props.type, Component = props.component, children = props.children, customOnChange = props.customOnChange, customValue = props.customValue,
// strip away and discard the following props if present
onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, handleChange = props.handleChange, handleFocus = props.handleFocus, handleBlur = props.handleBlur, value = props.value,
// ****************************************************
otherProps = __rest(props, ["name", "type", "component", "children", "customOnChange", "customValue", "onChange", "onFocus", "onBlur", "handleChange", "handleFocus", "handleBlur", "value"]);
if (values[name] === undefined || values[name] === null)
throw new Error('The "name" prop you passed in does not exist on the values object initialized by the "initialState" prop on the config object passed to the Proforma component.');
if (!name)
throw new Error('This component will not function without a "name" prop passed to it. Please provide a "name" prop that corresponds with one of the properties on your "initialValues" object.');
if (type && type === 'file')
throw new Error('Input type="file" is read-only, and so cannot be a controlled component.');
if (!Component) {
return (react_1.default.createElement(MemoField, __assign({ name: name, type: type || 'text', value: values[name], parentRef: ref, handleChange: _rPHandleChange, handleFocus: _rPHandleFocus, handleBlur: _rPHandleBlur }, otherProps)));
}
else {
if (!children) {
return (react_1.default.createElement(MemoComponentField, __assign({ component: Component, name: name, type: type || 'text', value: customValue || values[name], parentRef: ref, handleChange: customOnChange || _rPHandleChange, handleFocus: _rPHandleFocus, handleBlur: _rPHandleBlur }, otherProps)));
}
else {
return (react_1.default.createElement(MemoComponentField, __assign({ component: Component, name: name, type: type || 'text', value: customValue || values[name], parentRef: ref, handleChange: customOnChange || _rPHandleChange, handleFocus: _rPHandleFocus, handleBlur: _rPHandleBlur }, otherProps), children));
}
}
});