ukelli-ui
Version:
Base on React's UI lib. Make frontend's dev simpler and faster.
173 lines (172 loc) • 7.89 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __spreadArrays = (this && this.__spreadArrays) || function () {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
};
import React from 'react';
import { RemoveArrayItem } from 'basic-helper';
import SelectorBasic from './selector';
import Checkbox from './checkbox';
import DropdownWrapper from './dropdown-wrapper';
var DropdownGroup = /** @class */ (function (_super) {
__extends(DropdownGroup, _super);
function DropdownGroup(props) {
var _this = _super.call(this, props) || this;
_this.calculateCount = function (group) {
var selectedCount = 0;
if (!group)
return selectedCount;
for (var key in group) {
if (group.hasOwnProperty(key)) {
var item = group[key];
if (Array.isArray(item))
selectedCount += item.length;
}
}
return selectedCount;
};
_this.changeValue = function (groupKey, value) {
_this.setState(function (_a) {
var selectedValue = _a.selectedValue;
var nextValues = __assign({}, selectedValue);
var operatorGroup = nextValues[groupKey] ? __spreadArrays(nextValues[groupKey]) : [];
if (operatorGroup.indexOf(value) !== -1) {
operatorGroup = RemoveArrayItem(operatorGroup, value);
}
else {
operatorGroup.push(value);
}
nextValues[groupKey] = _this.numberValFilter(operatorGroup, groupKey);
_this.emitChange(nextValues);
return {
selectedValue: nextValues,
selectedCount: _this.calculateCount(nextValues)
};
});
};
_this.itemFilter = function (item) {
if (!item)
return item;
var fieldMapper = _this.props.fieldMapper;
var title = fieldMapper.title, values = fieldMapper.values;
return __assign(__assign({}, item), { title: item[title], values: item[values] });
};
_this.getTitle = function (selectedCount) {
return "" + selectedCount + _this.$T_UKE('项已选');
};
var defaultValue = props.defaultValue;
var selectedCount = _this.calculateCount(defaultValue);
_this.state = __assign(__assign({}, _this.state), { selectedValue: defaultValue || {}, selectedCount: selectedCount });
return _this;
}
// getValue = () => {
// return this.state.selectedValue;
// }
DropdownGroup.prototype.numberValFilter = function (numberValues, groupKey) {
var groupData = this.props.groupData;
if (!groupData[groupKey].isNum)
return numberValues;
var res = [];
for (var i = 0; i < numberValues.length; i++) {
var item = numberValues[i];
res[i] = +item;
}
return res;
};
DropdownGroup.prototype.changeGroup = function (groupKey, isNextGroupActive, groupValues) {
var _this = this;
this.setState(function (_a) {
var selectedValue = _a.selectedValue;
var nextValues = __assign({}, selectedValue);
if (isNextGroupActive) {
nextValues[groupKey] = _this.numberValFilter(__spreadArrays(groupValues), groupKey);
}
else {
nextValues[groupKey] = [];
}
_this.emitChange(nextValues);
return {
selectedValue: nextValues,
selectedCount: _this.calculateCount(nextValues)
};
});
};
DropdownGroup.prototype.render = function () {
var _this = this;
var _a = this.props, groupData = _a.groupData, style = _a.style, outside = _a.outside, other = __rest(_a, ["groupData", "style", "outside"]);
var selectedCount = this.state.selectedCount;
var groupDataArr = Object.keys(groupData);
return (React.createElement(DropdownWrapper, __assign({}, other, { outside: outside, overlay: function (helper) {
var selectedValue = _this.getValue();
return (React.createElement("div", { className: "dropdown-group p10", style: style, onClick: function (e) {
/** 阻止 ClickAway 触发回调 */
if (outside)
e.preventDefault();
} }, groupDataArr.map(function (groupKey, idx) {
var currItem = groupData[groupKey];
var _a = _this.itemFilter(currItem), title = _a.title, values = _a.values, isNum = _a.isNum;
var subValues = values;
var subValuesGroup = Object.keys(subValues);
var valueActive = selectedValue[groupKey];
var isActiveGroup = valueActive && valueActive.length === subValuesGroup.length;
var isLastGroup = idx === groupDataArr.length - 1;
return (React.createElement("div", { key: groupKey, className: "item-group" + (isActiveGroup ? ' active' : '') },
React.createElement(Checkbox, { values: {
1: title,
}, value: isActiveGroup, isMultiple: false, onChange: function () { return _this.changeGroup(groupKey, !isActiveGroup, subValuesGroup); } }),
React.createElement(Checkbox, { onChange: function (val, options) {
var targetVal = options.targetVal;
_this.changeValue(groupKey, targetVal);
}, isNum: isNum, value: valueActive, values: subValues }),
!isLastGroup && React.createElement("hr", null)));
})));
} }), this.getTitle(selectedCount)));
};
DropdownGroup.defaultProps = {
isMultiple: true,
defaultValue: {},
fieldMapper: {
title: 'title',
values: 'values',
},
};
return DropdownGroup;
}(SelectorBasic));
export default DropdownGroup;