@blueprintjs-formik/core
Version:
Bindings for using Formik and Blueprint.js
392 lines (369 loc) • 15.8 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
var formik = require('formik');
var core = require('@blueprintjs/core');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var React__namespace = /*#__PURE__*/_interopNamespace(React);
/******************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
var __assign = function() {
__assign = Object.assign || function __assign(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);
};
function __rest(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;
}
/**
* Field.
* @param {FieldBaseProps}
*/
function Field(_a) {
var fastField = _a.fastField, props = __rest(_a, ["fastField"]);
return fastField ? (React__default["default"].createElement(formik.FastField, __assign({}, props))) : (React__default["default"].createElement(formik.Field, __assign({}, props)));
}
/**
* Transforms the field props to checkbox props.
* @param {CheckboxToFieldProps}
* @returns {CheckboxProps}
*/
function fieldToCheckbox(_a) {
_a.disabled; var _b = _a.field, fieldOnBlur = _b.onBlur, field = __rest(_b, ["onBlur"]); _a.form; _a.type; var onBlur = _a.onBlur, props = __rest(_a, ["disabled", "field", "form", "type", "onBlur"]);
var indeterminate = !Array.isArray(field.value) && field.value == null;
return __assign(__assign({ indeterminate: indeterminate, onBlur: onBlur !== null && onBlur !== void 0 ? onBlur : function (e) {
fieldOnBlur(e !== null && e !== void 0 ? e : field.name);
} }, field), props);
}
/**
* Transforms the Formik field props to checkbox group component.
* @param {CheckboxToFieldProps}
* @returns {JSX.Element}
*/
function FieldToCheckboxGroup(_a) {
var props = __rest(_a, []);
return React__default["default"].createElement(core.Checkbox, __assign({}, fieldToCheckbox(props)));
}
/**
* Checkbox BP wrappeed component to bind with Formik.
* @param {CheckboxProps}
* @returns {JSX.Element}
*/
function Checkbox(_a) {
var props = __rest(_a, []);
return (React__default["default"].createElement(Field, __assign({}, props, { type: 'checkbox', component: FieldToCheckboxGroup })));
}
/**
* Transforms field props to input group props.
* @param {FieldToInputProps}
* @returns {PBInputGroupProps2}
*/
function fieldToInputGroup(_a) {
var _b = _a.field, onFieldBlur = _b.onBlur, field = __rest(_b, ["onBlur"]), _c = _a.form, touched = _c.touched, errors = _c.errors, onBlur = _a.onBlur, props = __rest(_a, ["field", "form", "onBlur"]);
var fieldError = formik.getIn(errors, field.name);
var showError = formik.getIn(touched, field.name) && !!fieldError;
return __assign(__assign({ id: field.name, intent: showError ? core.Intent.DANGER : core.Intent.NONE, onBlur: onBlur !== null && onBlur !== void 0 ? onBlur : function (e) {
onFieldBlur(e !== null && e !== void 0 ? e : field.name);
} }, field), props);
}
/**
* Transformes field props to input group props.
* @param {FieldToInputProps} props -
* @returns {JSX.Element}
*/
function FieldToInputGroup(_a) {
var children = _a.children, props = __rest(_a, ["children"]);
return React__default["default"].createElement(core.InputGroup, __assign({}, fieldToInputGroup(props), { children: children }));
}
/**
* Input group Blueprint component bound with Formik.
* @param {InputGroupProps}
* @returns {JSX.Element}
*/
function InputGroup(_a) {
var props = __rest(_a, []);
return React__default["default"].createElement(Field, __assign({}, props, { component: FieldToInputGroup }));
}
/**
* Transforms the field props to radio group component.
* @param {FieldToRadioGroupProps}
* @returns {BPRadioGroupProps}
*/
function fieldToRadioGroup(_a) {
var field = _a.field, form = _a.form, onChange = _a.onChange, props = __rest(_a, ["field", "form", "onChange"]);
return __assign({ selectedValue: field.value, onChange: onChange !== null && onChange !== void 0 ? onChange : function (event) {
form.setFieldValue(field.name, event.currentTarget.value);
} }, props);
}
/**
* Transforms the field props to radio group component.
* @param {FieldToRadioGroupProps}
* @returns {JSX.Element}
*/
function FieldToRadioGroup(props) {
return React__namespace.createElement(core.RadioGroup, __assign({}, fieldToRadioGroup(props)));
}
/**
* Radio group wrap BP component to bind with Formik.
* @param {RadioGroupProps}
* @returns {JSX.Element}
*/
function RadioGroup(props) {
return React__namespace.createElement(Field, __assign({}, props, { component: FieldToRadioGroup }));
}
/**
* Transformes field props to form group.
* @param {Omit<FormGroupProps, "children">} props
* @param {FieldInputProps<any>} field
* @param {FieldMetaProps<any>} meta
* @returns {PBFormGroupProps}
*/
var fieldToFormGroup = function (props, field, meta) {
var showError = meta.touched && meta.error;
return __assign({ labelFor: field.name, intent: showError ? core.Intent.DANGER : core.Intent.NONE, helperText: showError ? meta.error : '' }, props);
};
/**
* Form group.
* @param {FormGroupProps}
* @returns {React.JSX}
*/
function FormGroup(_a) {
var children = _a.children, props = __rest(_a, ["children"]);
var _b = formik.useField(props.name), field = _b[0], meta = _b[1];
return (React__default["default"].createElement(core.FormGroup, __assign({}, fieldToFormGroup(props, field, meta), { children: children })));
}
/**
* Transforms field to numeric input.
* @param {FieldToNumericInputProps}
* @returns {BPNumericInputProps}
*/
function transformFieldToNumericInput(_a) {
var _b = _a.field; _b.onBlur; var field = __rest(_b, ["onBlur"]), _c = _a.form, touched = _c.touched, errors = _c.errors, setFieldValue = _c.setFieldValue, props = __rest(_a, ["field", "form"]);
var fieldError = formik.getIn(errors, field.name);
var showError = formik.getIn(touched, field.name) && !!fieldError;
return __assign(__assign({ id: field.name, intent: showError ? core.Intent.DANGER : core.Intent.NONE, onValueChange: function (value) {
setFieldValue(field.name, value);
} }, field), props);
}
/**
* Transforms field to numeric input.
* @param {FieldToNumericInputProps}
* @returns {JSX.Element}
*/
function FieldToNumericInput(_a) {
var props = __rest(_a, []);
return React__default["default"].createElement(core.NumericInput, __assign({}, transformFieldToNumericInput(props)));
}
/**
* Numeric input Blueprint component bounded with Formik field.
* @param {NumericInputProps}
* @returns {JSX.Element}
*/
function NumericInput(_a) {
var props = __rest(_a, []);
return React__default["default"].createElement(Field, __assign({}, props, { component: FieldToNumericInput }));
}
/**
* Transforms the field props to switch props.
* @param {SwitchToFieldProps}
* @returns {SwitchProps}
*/
function fieldToSwitch(_a) {
_a.disabled; var _b = _a.field, fieldOnBlur = _b.onBlur, field = __rest(_b, ["onBlur"]); _a.form; _a.type; var onBlur = _a.onBlur, props = __rest(_a, ["disabled", "field", "form", "type", "onBlur"]);
return __assign(__assign({ id: field.name, onBlur: onBlur !== null && onBlur !== void 0 ? onBlur : function (e) {
fieldOnBlur(e !== null && e !== void 0 ? e : field.name);
} }, field), props);
}
/**
* Transforms the field props to Switch BP properties.
* @param {SwitchToFieldProps}
* @returns {JSX.Element}
*/
function FieldToSwitchGroup(_a) {
var props = __rest(_a, []);
return React__default["default"].createElement(core.Switch, __assign({}, fieldToSwitch(props)));
}
/**
* Switch BP wrapped component to bind with Formik.
* @param {SwitchProps}
* @returns {JSX.Element}
*/
function Switch(_a) {
var props = __rest(_a, []);
return React__default["default"].createElement(Field, __assign({}, props, { type: 'checkbox', component: FieldToSwitchGroup }));
}
/**
* Transforms the field props to textarea props.
* @param {Omit<FieldToTextAreaProps, 'children'>}
* @returns {TextAreaProps}
*/
function fieldToTextarea(_a) {
var _b = _a.field, onFieldBlur = _b.onBlur, field = __rest(_b, ["onBlur"]), _c = _a.form, touched = _c.touched, errors = _c.errors, onBlur = _a.onBlur, props = __rest(_a, ["field", "form", "onBlur"]);
var fieldError = formik.getIn(errors, field.name);
var showError = formik.getIn(touched, field.name) && !!fieldError;
return __assign(__assign({ id: field.name, intent: showError ? core.Intent.DANGER : core.Intent.NONE, onBlur: onBlur !== null && onBlur !== void 0 ? onBlur : function (e) {
onFieldBlur(e !== null && e !== void 0 ? e : field.name);
} }, field), props);
}
/**
* Transforms the field props to textarea props.
* @param {FieldToTextAreaProps}
* @returns {JSX.Element}
*/
function FieldToTextArea(_a) {
var children = _a.children, props = __rest(_a, ["children"]);
return React__default["default"].createElement(core.TextArea, __assign({}, fieldToTextarea(props), { children: children }));
}
/**
* Textarea Blurprint component bound with Formik.
* @param {TextAreaProps}
* @returns {JSX.Element}
*/
function TextArea(_a) {
var props = __rest(_a, []);
return React__default["default"].createElement(Field, __assign({}, props, { component: FieldToTextArea }));
}
/**
* Transforms the field props to slider props.
* @param {SliderToFieldProps}
* @returns {SliderProps}
*/
function fieldToSlider(_a) {
var _b = _a.field; _b.onBlur; var field = __rest(_b, ["onBlur"]), _c = _a.form, setFieldValue = _c.setFieldValue, touched = _c.touched, errors = _c.errors, props = __rest(_a, ["field", "form"]);
var fieldError = formik.getIn(errors, field.name);
var showError = formik.getIn(touched, field.name) && !!fieldError;
return __assign(__assign(__assign({ intent: showError ? core.Intent.DANGER : core.Intent.NONE }, field), { onChange: function (value) {
setFieldValue(field.name, value);
} }), props);
}
/**
* Transforms the field props to slider props.
* @param {SliderToFieldProps}
* @returns {JSX.Element}
*/
function FieldToSlider(_a) {
var props = __rest(_a, []);
return React__default["default"].createElement(core.Slider, __assign({}, fieldToSlider(props)));
}
/**
* Transforms the field props to slider props.
* @param {SliderProps}
* @returns {JSX.Element}
*/
function Slider(_a) {
var props = __rest(_a, []);
return React__default["default"].createElement(Field, __assign({}, props, { component: FieldToSlider }));
}
/**
* Transforms the field props to `HTMLSelect` props.
* @param {FieldToTextAreaProps}
* @returns {HTMLSelectProps}
*/
function fieldToHTMLSelect(_a) {
var _b = _a.field; _b.onBlur; var field = __rest(_b, ["onBlur"]), _c = _a.form; _c.touched; _c.errors; var props = __rest(_a, ["field", "form"]);
return __assign(__assign(__assign({ id: field.name }, field), props), { multiple: undefined });
}
/**
* Transforms field props to `HTMLSelect` props.
* @param {FieldToTextAreaProps}
* @returns {JSX.Element}
*/
function FieldToHTMLSelect(_a) {
var children = _a.children, props = __rest(_a, ["children"]);
return React__default["default"].createElement(core.HTMLSelect, __assign({}, fieldToHTMLSelect(props), { children: children }));
}
/**
* HTML select wrapper for BP component to bind with Formik.
* @param {TextAreaProps} props -
* @returns {JSX.Element}
*/
function HTMLSelect(_a) {
var props = __rest(_a, []);
return React__default["default"].createElement(Field, __assign({}, props, { component: FieldToHTMLSelect }));
}
/**
* Transforms the Formik field props to editable text.
* @param {FieldToEditableTextProps}
* @returns {EditableTextProps}
*/
var fieldToEditableText = function (_a) {
var _b = _a.field; _b.onBlur; var field = __rest(_b, ["onBlur"]), _c = _a.form, touched = _c.touched, errors = _c.errors, setFieldValue = _c.setFieldValue; _a.meta; var props = __rest(_a, ["field", "form", "meta"]);
var fieldError = formik.getIn(errors, field.name);
var showError = formik.getIn(touched, field.name) && !!fieldError;
return __assign(__assign(__assign({ intent: showError ? core.Intent.DANGER : core.Intent.NONE }, field), { onChange: function (value) {
setFieldValue(field.name, value);
} }), props);
};
/**
* Transforms the Formik field props to editable text component.
* @param {FieldToEditableTextProps}
* @returns {JSX.Element}
*/
function FieldToEditableText(_a) {
var props = __rest(_a, []);
return React__default["default"].createElement(core.EditableText, __assign({}, fieldToEditableText(props)));
}
/**
* Editable text bound with Formik.
* @param {EditableTextProps}
* @returns {JSX.Element}
*/
function EditableText(_a) {
var props = __rest(_a, []);
return React__default["default"].createElement(Field, __assign({}, props, { component: FieldToEditableText }));
}
exports.Checkbox = Checkbox;
exports.EditableText = EditableText;
exports.Field = Field;
exports.FieldToRadioGroup = FieldToRadioGroup;
exports.FormGroup = FormGroup;
exports.HTMLSelect = HTMLSelect;
exports.InputGroup = InputGroup;
exports.NumericInput = NumericInput;
exports.RadioGroup = RadioGroup;
exports.Slider = Slider;
exports.Switch = Switch;
exports.TextArea = TextArea;
exports.fieldToRadioGroup = fieldToRadioGroup;
//# sourceMappingURL=index.js.map