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.
87 lines (86 loc) • 5.98 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.values[prevProps.name] === nextProps.values[prevProps.name];
}
// ==== STANDARD CHECKBOX ====
var _Radio = function (props) {
var name = props.name, value = props.value, values = props.values, handleChange = props.handleChange, handleFocus = props.handleFocus, handleBlur = props.handleBlur, otherProps = __rest(props, ["name", "value", "values", "handleChange", "handleFocus", "handleBlur"]);
return (react_1.default.createElement("input", __assign({ type: "radio", name: name, value: value, checked: values[name] === value, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur }, otherProps)));
};
var MemoRadio = react_1.default.memo(_Radio, memoCompare);
// ==== COMPONENT CHECKBOX ====
var _ComponentRadio = function (props) {
var name = props.name, value = props.value, values = props.values, Component = props.component, handleFocus = props.handleFocus, handleBlur = props.handleBlur, handleChange = props.handleChange, children = props.children, otherProps = __rest(props, ["name", "value", "values", "component", "handleFocus", "handleBlur", "handleChange", "children"]);
if (Component) {
if (!children) {
return (react_1.default.createElement(Component, __assign({ type: "radio", name: name, value: value, checked: values[name] === value, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur }, otherProps)));
}
else {
return (react_1.default.createElement(Component, __assign({ type: "radio", name: name, value: value, checked: values[name] === value, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur }, otherProps), children));
}
}
else {
return null;
}
};
var MemoComponentRadio = react_1.default.memo(_ComponentRadio, memoCompare);
/**
* Component to produce a radio button 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} value - the value to be assigned to this radio button. Note that radio buttons belonging to the same grouping should have the same "name" attribute, and then different "value" attributes for each.
* @param {React.ComponentType=} [component] - Optional custom component to be used instead of a standard input tag.
* @returns {JSX.Element} JSX.Element
*/
exports.Radio = function (props) {
var _a = react_1.default.useContext(ProformaContext_1.ProformaContext), _rPValues = _a.values, _rPHandleChange = _a.handleChange, _rPHandleFocus = _a.handleFocus, _rPHandleBlur = _a.handleBlur;
var name = props.name, value = props.value, Component = props.component, children = props.children,
// 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, checked = props.checked, type = props.type, values = props.values,
// ****************************************************
otherProps = __rest(props, ["name", "value", "component", "children", "onChange", "onFocus", "onBlur", "handleChange", "handleFocus", "handleBlur", "checked", "type", "values"]);
if (_rPValues[name] === undefined || _rPValues[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 (!Component) {
return (react_1.default.createElement(MemoRadio, __assign({ name: name, value: value, values: _rPValues, handleChange: _rPHandleChange, handleFocus: _rPHandleFocus, handleBlur: _rPHandleBlur }, otherProps)));
}
else {
if (!children) {
return (react_1.default.createElement(MemoComponentRadio, __assign({ component: Component, name: name, value: value, values: _rPValues, handleChange: _rPHandleChange, handleFocus: _rPHandleFocus, handleBlur: _rPHandleBlur }, otherProps)));
}
else {
return (react_1.default.createElement(MemoComponentRadio, __assign({ component: Component, name: name, value: value, values: _rPValues, handleChange: _rPHandleChange, handleFocus: _rPHandleFocus, handleBlur: _rPHandleBlur }, otherProps), children));
}
}
};