ukelli-ui
Version:
Base on React's UI lib. Make frontend's dev simpler and faster.
156 lines (155 loc) • 6.67 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);
};
import React from 'react';
import { HasValue, Call } from 'basic-helper';
import classnames from 'classnames';
import { tuple } from 'basic-helper/utils/type';
import SelectorBasic from './selector';
import DropdownWrapper from './dropdown-wrapper';
import { MenuItem } from '../menu';
import { $T, $T_UKE } from '../config';
// import Radio from './radio';
var positionList = tuple('button', 'top', 'left', 'right', 'button,left', 'button,right', 'top,left', 'top,right');
var itemActiveFilter = function (val, targetVal) {
var has = HasValue(val);
if (!has)
return false;
var isInclueVal = false;
switch (true) {
case Array.isArray(val):
isInclueVal = val.indexOf(targetVal) !== -1;
break;
case typeof val === 'string':
isInclueVal = val === targetVal;
break;
case typeof val === 'number':
isInclueVal = val === targetVal;
break;
}
return isInclueVal;
};
/**
* 下拉菜单组件，带有输入搜索功能
*
* @export
* @class DropdownMenu
* @extends {SelectorBasic}
*/
var DropdownMenu = /** @class */ (function (_super) {
__extends(DropdownMenu, _super);
function DropdownMenu() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this._error = false;
return _this;
}
DropdownMenu.prototype.handleClick = function (dataItem, idx, callback) {
var onClickItem = this.props.onClickItem;
Call(onClickItem, dataItem);
this.changeValue(dataItem.value, idx);
Call(callback);
};
DropdownMenu.prototype.getActiveTitle = function () {
var _a = this.props, isMultiple = _a.isMultiple, defaultTitle = _a.defaultTitle, invalidTip = _a.invalidTip;
var value = this.getValue();
var hasVal = Array.isArray(value) ? value.length > 0 : value;
var resTitle = '';
this._error = false;
switch (true) {
case !hasVal:
resTitle = $T_UKE(defaultTitle);
break;
case !!isMultiple:
resTitle = value.length + $T_UKE('项已选');
break;
case typeof this.valuesObj[value] == 'undefined':
resTitle = $T_UKE(invalidTip);
this._error = true;
break;
default:
var title = this.valuesObj[value];
if (HasValue(title)) {
resTitle = title;
}
else if (typeof title == 'undefined') {
resTitle = $T_UKE(defaultTitle);
}
else {
resTitle = $T_UKE(invalidTip);
this._error = true;
}
break;
}
return resTitle;
};
DropdownMenu.prototype.getValuesLength = function () {
var values = this.values;
return Array.isArray(values) ? values.length : Object.keys(values).length;
};
DropdownMenu.prototype.render = function () {
var _this = this;
var _a = this.props, isMultiple = _a.isMultiple, needAction = _a.needAction, cancelTitle = _a.cancelTitle, withInput = _a.withInput;
var _selectedValue = this.getValue();
var hasVal = Array.isArray(_selectedValue) ? _selectedValue.length > 0 : !!_selectedValue;
var isSelectedAll = this.checkIsSelectedAll();
var canSelectAll = isMultiple && !isSelectedAll;
var menuTitle = this.getActiveTitle();
return (React.createElement(DropdownWrapper, __assign({}, this.props, { menuTitle: $T(menuTitle), overlay: function (_a) {
var hide = _a.hide, searchValue = _a.searchValue;
return (React.createElement("div", { className: "action-group" },
needAction && (React.createElement("div", { className: "action-btn", onClick: function (e) {
canSelectAll ? _this.selectAll() : _this.clearAll();
hide();
} }, $T_UKE(canSelectAll ? '全选' : cancelTitle))),
React.createElement("div", { className: "items-group" }, _this.values.map(function (dataItem, idx) {
var text = dataItem.text, value = dataItem.value, icon = dataItem.icon, img = dataItem.img;
var isActive = itemActiveFilter(_selectedValue, value);
var renderable = !searchValue
? true
: (text.toString().indexOf(searchValue) !== -1
|| value.toString().toLowerCase().indexOf(searchValue) !== -1);
return renderable ? (React.createElement(MenuItem, __assign({ key: value, isActive: isActive, onClick: function (e) {
if (e && isMultiple)
e.preventDefault();
_this.handleClick(dataItem, idx, isMultiple ? null : hide);
} }, dataItem))) : null;
}))));
}, withInput: !withInput ? withInput : !isMultiple, error: this._error, className: classnames({
multiple: isMultiple,
single: !isMultiple,
"has-val": hasVal
}) })));
};
DropdownMenu.defaultProps = {
withInput: true,
needAction: true,
outside: true,
defaultTitle: '请选择',
invalidTip: '无效值',
cancelTitle: '取消',
position: 'bottom,left',
};
return DropdownMenu;
}(SelectorBasic));
export default DropdownMenu;