react-proforma/dist/Select.js

React Proforma helps you build simple to complex web forms with ease in React. -- Simplicity where you want it. Flexibility where you need it.

"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;
}
// ==== STANDARD SELECT ====
var _Select = function (props) {
    var name = props.name, value = props.value, handleChange = props.handleChange, handleFocus = props.handleFocus, handleBlur = props.handleBlur, children = props.children, otherProps = __rest(props, ["name", "value", "handleChange", "handleFocus", "handleBlur", "children"]);
    return (react_1.default.createElement("select", __assign({ name: name, value: value, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur }, otherProps), children));
};
var MemoSelect = react_1.default.memo(_Select, memoCompare);
// ==== COMPONENT SELECT ====
var _ComponentSelect = function (props) {
    var name = props.name, value = props.value, Component = props.component, handleChange = props.handleChange, handleFocus = props.handleFocus, handleBlur = props.handleBlur, children = props.children, otherProps = __rest(props, ["name", "value", "component", "handleChange", "handleFocus", "handleBlur", "children"]);
    if (Component) {
        if (!children) {
            return (react_1.default.createElement(Component, __assign({ name: name, value: value, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur }, otherProps)));
        }
        else {
            return (react_1.default.createElement(Component, __assign({ name: name, value: value, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur }, otherProps), children));
        }
    }
    else {
        return null;
    }
};
var MemoComponentSelect = react_1.default.memo(_ComponentSelect, memoCompare);
/**
 * Component to produce a select (drop down) form element, either with
 * a standard select 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 {React.ComponentType=} [component] - Optional custom component to be used instead of a standard select tag.
 * @returns {JSX.Element} JSX.Element
 */
exports.Select = function (props) {
    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, 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, value = props.value, 
    // ****************************************************
    otherProps = __rest(props, ["name", "component", "children", "onChange", "onFocus", "onBlur", "handleChange", "handleFocus", "handleBlur", "value"]);
    if (!values[name] && values[name] !== false)
        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) {
        if (!children) {
            throw new Error('You must pass in child elements (menu options) to use the Select component.');
        }
        return (react_1.default.createElement(MemoSelect, __assign({ name: name, value: values[name], handleChange: _rPHandleChange, handleFocus: _rPHandleFocus, handleBlur: _rPHandleBlur }, otherProps), children));
    }
    else {
        if (!children) {
            return (react_1.default.createElement(MemoComponentSelect, __assign({ component: Component, name: name, value: values[name], handleChange: _rPHandleChange, handleFocus: _rPHandleFocus, handleBlur: _rPHandleBlur }, otherProps)));
        }
        else {
            return (react_1.default.createElement(MemoComponentSelect, __assign({ component: Component, name: name, value: values[name], handleChange: _rPHandleChange, handleFocus: _rPHandleFocus, handleBlur: _rPHandleBlur }, otherProps), children));
        }
    }
};