synapse-react-client
Version:
[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps
49 lines • 3.24 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CustomSelectWidget = void 0;
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var creatable_1 = (0, tslib_1.__importDefault)(require("react-select/creatable"));
var react_select_1 = require("react-select");
/**
* We want to apply the 'form-control' bootstrap class to react-select's Control component, and the easiest way to do that is to make a custom version
*/
var Control = function (_a) {
var children = _a.children, rest = (0, tslib_1.__rest)(_a, ["children"]);
return (react_1.default.createElement(react_select_1.components.Control, (0, tslib_1.__assign)({}, rest, { className: "form-control" }), children));
};
/**
* react-select's value prop should be an EnumOption (see custom type defined above)
*
* This function finds the enum option that has the corresponding value and returns it.
*
* If value is nullish, this fn returns undefined. If there is no corresponding option, then a new object is returned
* where the label and value are set to the provided value.
*/
function findValueOption(value, options) {
if (value == null) {
return undefined;
}
var correspondingOption = options.filter(function (option) { return option.value === value; });
if (correspondingOption.length > 0) {
return correspondingOption[0];
}
else {
return { value: value, label: value };
}
}
/**
* Select widget compatible with react-jsonschema-form enumerations
*/
var CustomSelectWidget = function (props) {
var id = props.id, options = props.options, value = props.value, required = props.required, disabled = props.disabled, readonly = props.readonly, multiple = props.multiple, autofocus = props.autofocus, onChange = props.onChange, onBlur = props.onBlur, onFocus = props.onFocus, placeholder = props.placeholder;
var enumOptions = options.enumOptions;
return (react_1.default.createElement(creatable_1.default, { className: "react-select-container", inputId: id, multiple: multiple, placeholder: placeholder, value: findValueOption(value, enumOptions), required: required, isDisabled: disabled || readonly, autoFocus: autofocus, onBlur: onBlur && (function () { return onBlur(id, value === null || value === void 0 ? void 0 : value.value); }), options: enumOptions, onFocus: onFocus && (function () { return onFocus(id, value === null || value === void 0 ? void 0 : value.value); }), onChange: function (option) { var _a; return onChange((_a = option) === null || _a === void 0 ? void 0 : _a.value); }, isClearable: true, components: { Control: Control }, formatCreateLabel: function (currentInput) {
return "Set to custom value \"" + currentInput + "\"";
}, styles: {
control: function (provided) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, provided), { border: 'unset', borderColor: 'unset', boxShadow: 'unset', '&:hover': {} })); },
valueContainer: function (provided) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, provided), { padding: '0px' })); },
} }));
};
exports.CustomSelectWidget = CustomSelectWidget;
//# sourceMappingURL=CustomSelectWidget.js.map