formik_typescript_ui
Version:
[](https://www.npmjs.com/package/formik_typescript_ui) [](https://github.com/RominaManzano/formik_typescript_ui/blob/master/LICEN
44 lines (43 loc) • 2.09 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
// tslint:disable: no-any
var react_1 = __importDefault(require("react"));
var react_select_1 = __importDefault(require("react-select"));
var formik_1 = require("formik");
var SelectField = function (_a) {
var autoFocus = _a.autoFocus, className = _a.className, id = _a.id, isDisabled = _a.isDisabled, isLoading = _a.isLoading, isMulti = _a.isMulti, isSearchable = _a.isSearchable, name = _a.name, options = _a.options, placeholder = _a.placeholder, style = _a.style;
var renderSelect = function (fieldProps) {
var form = fieldProps.form;
var getValue = function () {
var field = fieldProps.field;
if (options) {
return isMulti
? options.filter(function (option) { return field.value.indexOf(option.value) >= 0; })
: options.find(function (option) { return option.value === field.value; });
}
return isMulti ? [] : '';
};
var handleChange = function (option) {
form.setFieldValue(name, isMulti
? option.map(function (item) { return item.value; })
: option.value);
};
return (react_1.default.createElement(react_select_1.default, { autoFocus: autoFocus, className: className || '', id: id || name, isDisabled: isDisabled, isLoading: isLoading, isMulti: isMulti, isSearchable: isSearchable, name: name, onChange: handleChange, options: options, placeholder: placeholder || '', styles: style, value: getValue() }));
};
return (react_1.default.createElement(formik_1.Field, { name: name, render: renderSelect }));
};
SelectField.defaultProps = {
autoFocus: false,
className: null,
id: null,
isDisabled: false,
isLoading: false,
isMulti: false,
isSearchable: false,
placeholder: null,
style: {},
};
exports.default = SelectField;