cosmo-ui
Version:
Common React components
89 lines • 4.07 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var react_redux_1 = require("react-redux");
var _1 = require(".");
var reducers_1 = require("../reducers");
var selectors_1 = require("../selectors");
var actions_1 = require("../actions");
var styles = require('../../src/styles/components/forms.scss');
var borderStyles = require('../../src/styles/common/borders.scss');
/**
* WARNING: React provides no support for using an object as the value of an option.
* The SelectOption interface has been provided to handle this issue.
* If you pass an array of objects as options, then each option must implement the
* SelectOption interface. The label will be the text that is visible to the user
*/
var SelectComponent = (function (_super) {
tslib_1.__extends(SelectComponent, _super);
function SelectComponent(props) {
var _this = _super.call(this, props) || this;
_this.setOptionType();
return _this;
}
SelectComponent.prototype.renderField = function () {
var _a = this.props, name = _a.name, disabled = _a.disabled, placeholder = _a.placeholder;
return (React.createElement("select", { ref: this.setFieldRef, value: this.getSelectedValue(), name: name, id: name + "Field", disabled: disabled, className: this.classNames(styles.select), onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderOptions()));
};
SelectComponent.prototype.getValueFromEvent = function (e) {
var selectedOption = e.currentTarget.value;
// if the options are objects
if (this.optionsAreObjects) {
// then return the entire object associated with this label
selectedOption = this.props.options.find(function (o) {
return o.label === e.currentTarget.value;
});
}
return selectedOption;
};
SelectComponent.prototype.getSelectedValue = function () {
var value = this.getValueFromState();
if (this.optionsAreObjects) {
return value && value.label ? value.label : '';
}
return value;
};
SelectComponent.prototype.renderOptions = function () {
var options = this.props.options;
var res;
if (this.optionsAreObjects) {
res = options.map(function (o) {
return React.createElement("option", { value: o.label, key: o.label }, o.label);
});
}
else {
res = options.map(function (o) {
return React.createElement("option", { value: o, key: o }, o);
});
}
// add a "Please select" option to the start
if (!this.props.value && !this.props.field.value) {
res.unshift(React.createElement("option", { value: '', key: this.props.name + "StarterKey" }, "Please select"));
}
return res;
};
SelectComponent.prototype.setOptionType = function () {
var options = this.props.options;
this.optionsAreObjects = options[0] && (typeof options[0] === 'object');
};
return SelectComponent;
}(_1.BaseFormField));
var mapStateToProps = function (state, ownProps) { return (tslib_1.__assign({}, ownProps, { field: selectors_1.mapStateToField(state[reducers_1.FORM_REDUCER_KEY], ownProps) })); };
var mapDispatchToProps = {
setFormField: actions_1.setFormField,
};
// TODO - there's a type issue here because options is compoulsory on SelectProps
var ConnectedSelect = react_redux_1.connect(mapStateToProps, mapDispatchToProps)(SelectComponent);
var Select = (function (_super) {
tslib_1.__extends(Select, _super);
function Select() {
return _super !== null && _super.apply(this, arguments) || this;
}
Select.prototype.render = function () {
return React.createElement(ConnectedSelect, tslib_1.__assign({}, this.props, { formName: this.formName }));
};
return Select;
}(_1.FormFieldWrapper));
exports.Select = Select;
//# sourceMappingURL=select.js.map