@skbkontur/ui-kit
Version:
121 lines • 6.4 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var Button_1 = tslib_1.__importDefault(require("../Button"));
var PopupMenu_1 = tslib_1.__importDefault(require("../internal/PopupMenu/PopupMenu"));
var MenuItem_1 = tslib_1.__importDefault(require("../MenuItem/MenuItem"));
var MenuSeparator_1 = tslib_1.__importDefault(require("../MenuSeparator"));
var SelectView_1 = require("./SelectView");
var Select = /** @class */ (function (_super) {
tslib_1.__extends(Select, _super);
function Select(props) {
var _this = _super.call(this, props) || this;
_this.getPopupPozitions = function () {
if (_this.props.menuAlign === 'right') {
return ['bottom right', 'bottom left', 'top right', 'top left'];
}
return ['bottom left', 'bottom right', 'top left', 'top right'];
};
_this.getCaption = function () {
var _a = _this.props, disabled = _a.disabled, placeholder = _a.placeholder, renderValue = _a.renderValue, renderItem = _a.renderItem, value = _a.value, defaultValue = _a.defaultValue, items = _a.items, areValuesEqual = _a.areValuesEqual, onChange = _a.onChange, menuMaxHeight = _a.menuMaxHeight, menuWidth = _a.menuWidth, width = _a.width, maxWidth = _a.maxWidth, menuAlign = _a.menuAlign, rest = tslib_1.__rest(_a, ["disabled", "placeholder", "renderValue", "renderItem", "value", "defaultValue", "items", "areValuesEqual", "onChange", "menuMaxHeight", "menuWidth", "width", "maxWidth", "menuAlign"]);
return (React.createElement(SelectView_1.SelectCaptionWrapper, null,
React.createElement(Button_1.default, tslib_1.__assign({ style: { width: width, maxWidth: maxWidth }, disabled: disabled }, rest),
React.createElement(SelectView_1.SelectCaptionInner, null,
_this.renderLabel(),
React.createElement(SelectView_1.SelectArrowWrapper, null,
React.createElement(SelectView_1.SelectArrow, null))))));
};
_this.renderLabel = function () {
var value = _this.getValue();
var item = _this.getItemByValue(value);
if (item !== null || value !== null) {
return _this.props.renderValue && _this.props.renderValue(value, item);
}
var _a = _this.props.placeholder, placeholder = _a === void 0 ? Select.defaultProps.placeholder : _a;
return React.createElement(SelectView_1.SelectPlaceholder, null, placeholder);
};
_this.renderItems = function () {
var renderValue = _this.props.renderValue || Select.defaultProps.renderValue;
var currentValue = _this.getValue();
return (_this.props.items &&
_this.props.items.map(function (entry, index) {
if (React.isValidElement(entry)) {
return React.cloneElement(entry, { key: index });
}
if (typeof entry === 'function') {
var entryElement = entry();
if (React.isValidElement(entryElement)) {
return React.cloneElement(entryElement, { key: index });
}
}
var _a = _this.normalizeEntry(entry), value = _a[0], item = _a[1], comment = _a[2];
var areValuesEqual = _this.props.areValuesEqual || Select.defaultProps.areValuesEqual;
return (React.createElement(MenuItem_1.default, { key: index, comment: comment, state: areValuesEqual(value, currentValue) ? 'selected' : null, onClick: _this.handleClick.bind(_this, value) }, renderValue(value, item)));
}));
};
_this.getValue = function () {
if (_this.props.value !== undefined) {
return _this.props.value;
}
return _this.state.value;
};
_this.getItemByValue = function (value) {
if (value === undefined) {
return null;
}
var items = _this.props.items || [];
for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {
var entry = items_1[_i];
var _a = _this.normalizeEntry(entry), itemValue = _a[0], item = _a[1];
var areValuesEqual = _this.props.areValuesEqual || Select.defaultProps.areValuesEqual;
if (itemValue !== undefined && areValuesEqual(itemValue, value)) {
return item;
}
}
return null;
};
_this.normalizeEntry = function (entry) {
if (Array.isArray(entry)) {
return entry;
}
return [entry, entry, undefined];
};
_this.handleClick = function (value) {
_this.setState({
value: value
}, function () {
if (_this.props.onChange) {
_this.props.onChange({ target: { value: value } }, value);
}
});
};
_this.state = {
value: _this.props.defaultValue || null
};
return _this;
}
Select.prototype.render = function () {
return (React.createElement(PopupMenu_1.default, { caption: this.getCaption(), menuMaxHeight: this.props.menuMaxHeight, menuWidth: this.props.menuWidth || this.props.width, popupHasPin: false, popupMargin: 0, positions: this.getPopupPozitions(), disabled: this.props.disabled }, this.renderItems()));
};
Select.defaultProps = {
areValuesEqual: function (value1, value2) {
return value1 === value2;
},
renderValue: function (value, item) {
return item;
},
placeholder: 'ничего не выбрано'
};
Select.SEP = function () { return React.createElement(MenuSeparator_1.default, null); };
Select.static = function (element) {
return element;
};
Select.Item = function (_a) {
var children = _a.children;
return React.createElement(MenuItem_1.default, null, children);
};
return Select;
}(React.Component));
exports.default = Select;
//# sourceMappingURL=Select.js.map