multiselect-qa
Version:
Select с мультивыбором
289 lines (237 loc) • 11.6 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = require("react");
var _react2 = _interopRequireDefault(_react);
var _toggleQa = require("toggle-qa");
var _toggleQa2 = _interopRequireDefault(_toggleQa);
var _arrowChangeQa = require("arrow-change-qa");
var _arrowChangeQa2 = _interopRequireDefault(_arrowChangeQa);
var _SimpleOption = require("./SimpleOption.js");
var _SimpleOption2 = _interopRequireDefault(_SimpleOption);
var _CheckboxOption = require("./CheckboxOption.js");
var _CheckboxOption2 = _interopRequireDefault(_CheckboxOption);
var _ColorOption = require("./ColorOption.js");
var _ColorOption2 = _interopRequireDefault(_ColorOption);
require("../less/Multiselect.less");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
/*
* Мультивыбор
*
* Несколько вариантов интерфейса:
* type
* - SimpleOption (default) - обычные options с возможностью накликивания
* - CheckboxOption - надписи с checkbox-ами
* - ColorOption - квадраты с цветами
*
* Поля
* - label - текст над элементом
* - inputLabel - текст внутри элемента (в input-е)
* - showApplyButton - отображать кнопку "Применить"
*
* Формат данных для SimpleOption, CheckboxOption
* data = [{
* label : "Видимый текст",
* value : 4, // значение
* isChecked : true // выбор - устанавливается автоматически
* }]
*
* Формат данных для ColorOption
* data = [{
* value : #f99883, // значение, которое нарисует цвет
* Спец.значения (используются особые иконки):
* - transparent - прозрачный
* - multicolor - цветной (несколько цветов)
* - #ffffff - меняется цвет фоновой галочки выбора
* tooltip : "надпись при наведении на цвет"
* isChecked
* }]
*
*
* События
* - clickOption() - воспроизводится при выборе любого option
* - applyButton() - воспроизводится при нажатии кнопки "Применить"
* - clear() - воспроизводится при нажатии крестика (очистить всё)
*/
var Multiselect = function (_ToggleComponent) {
_inherits(Multiselect, _ToggleComponent);
function Multiselect(props) {
_classCallCheck(this, Multiselect);
var _this = _possibleConstructorReturn(this, (Multiselect.__proto__ || Object.getPrototypeOf(Multiselect)).call(this, props));
_this.state = {
isCheckGlobal: false,
isShowOptions: false
};
_this.type = "SimpleOption";
if (_this.props.type) {
_this.type = _this.props.type;
}
if (props.isShowOptions == true) {
_this.state.isShowOptions = true;
}
_this.showOptions = _this.showOptions.bind(_this);
_this.clickOption = _this.clickOption.bind(_this);
_this.applyButton = _this.applyButton.bind(_this);
_this.clear = _this.clear.bind(_this);
_this.setCheckGlobal();
return _this;
}
// установить главный крест в активное положение (если в массиве данных есть выбранные Option)
// isForceRender - если мы хотим дополнительно перерендерить компонент
_createClass(Multiselect, [{
key: "setCheckGlobal",
value: function setCheckGlobal(isForceRender) {
if (isForceRender == undefined) isForceRender = false;
this.state.isCheckGlobal = false;
if (this.props.data) {
for (var i = 0; i < this.props.data.length; i++) {
if (!this.state.isCheckGlobal) {
if (this.props.data[i].isChecked === true) {
this.state.isCheckGlobal = true;
break;
}
}
}
}
if (isForceRender) {
this.setState(this.state);
}
}
// показать-скрыть выпадашку Option-ов
}, {
key: "showOptions",
value: function showOptions(proxy, isShow) {
if (isShow == undefined) {
this.state.isShowOptions = this.state.isShowOptions ? false : true;
this.setState(this.state);
} else {
this.setState({ isShowOptions: isShow });
}
}
// сокрытие элемента извне - для клика в любом месте окна
}, {
key: "hideOnClick",
value: function hideOnClick() {
this.showOptions(null, false);
}
// клик по любому Option
}, {
key: "clickOption",
value: function clickOption() {
this.setCheckGlobal(true);
if (this.props.clickOption) {
this.props.clickOption();
}
}
// кнопка "Применить"
}, {
key: "applyButton",
value: function applyButton() {
if (this.props.applyButton) {
this.props.applyButton();
}
}
// очистка всех выборов из массива data
}, {
key: "clear",
value: function clear() {
if (this.props.data) {
for (var i = 0; i < this.props.data.length; i++) {
if (this.props.data[i].isChecked == true) {
this.props.data[i].isChecked = false;
}
}
}
this.setState({ isCheckGlobal: false });
// кричим наверх, что очистка закончена
if (this.props.clear) {
this.props.clear();
}
}
}, {
key: "render",
value: function render() {
var _this2 = this;
var className = "Multiselect " + this.state.isShowOptions;
var classArrow = "_arrow " + this.state.isShowOptions;
var classOptions = "options " + this.state.isShowOptions;
var options = void 0;
// CheckboxOption
if (this.type == "CheckboxOption") {
options = this.props.data.map(function (item, i) {
return _react2.default.createElement(_CheckboxOption2.default, { key: i, data: item, clickOption: _this2.clickOption });
});
}
// ColorOption
else if (this.type == "ColorOption") {
options = this.props.data.map(function (item, i) {
return _react2.default.createElement(_ColorOption2.default, { key: i, data: item, clickOption: _this2.clickOption });
});
}
// SimpleOption
else {
options = this.props.data.map(function (item, i) {
return _react2.default.createElement(_SimpleOption2.default, { key: i, data: item, clickOption: _this2.clickOption });
});
}
// Стрелки - галочка или крест
var htmlArrow = void 0;
// - галочка
if (!this.state.isCheckGlobal) {
htmlArrow = _react2.default.createElement(
"div",
{ className: "_arrowChange" },
_react2.default.createElement(_arrowChangeQa2.default, { isUp: this.state.isShowOptions })
);
}
// - крест, когда что-то уже выбрано
else {
htmlArrow = _react2.default.createElement(
"div",
{ className: "_arrowCross", onClick: this.clear },
_react2.default.createElement("span", null),
_react2.default.createElement("span", null)
);
}
return _react2.default.createElement(
"div",
{ className: className, ref: this.setWrapperRef },
_react2.default.createElement(
"div",
{ className: "label" },
this.props.label
),
_react2.default.createElement(
"div",
{ className: "formElement" },
_react2.default.createElement(
"div",
{ className: "input", onClick: this.showOptions },
this.props.inputLabel
),
htmlArrow,
_react2.default.createElement(
"div",
{ className: classOptions },
_react2.default.createElement("div", { className: "up-margin" }),
options,
this.props.showApplyButton && _react2.default.createElement(
"div",
{ className: "_button", onClick: this.applyButton },
"\u041F\u0440\u0438\u043C\u0435\u043D\u0438\u0442\u044C"
),
_react2.default.createElement("div", { className: "cle" })
)
)
);
}
}]);
return Multiselect;
}(_toggleQa2.default);
exports.default = Multiselect;
;