zent
Version:
一套前端设计语言和基于React的实现
60 lines (59 loc) • 2.85 kB
JavaScript
import { __assign, __extends } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import classnames from 'classnames';
import Icon from '../../icon';
import { Component } from 'react';
var BaseTrigger = (function (_super) {
__extends(BaseTrigger, _super);
function BaseTrigger() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
active: false,
};
_this.onClearClick = function (e) {
e.preventDefault();
e.stopPropagation();
if (!_this.props.keyword) {
_this.setState({ active: false });
_this.props.onClear();
}
else {
_this.props.onKeywordChange('');
}
};
_this.onMouseEnter = function () {
_this.setState({ active: true });
};
_this.onMouseLeave = function () {
_this.setState({ active: false });
};
return _this;
}
BaseTrigger.prototype.render = function () {
var _a = this.props, className = _a.className, visible = _a.visible, clearable = _a.clearable, selectedPaths = _a.selectedPaths, keyword = _a.keyword, disabled = _a.disabled, children = _a.children, onClick = _a.onClick, renderValue = _a.renderValue, searchable = _a.searchable, i18n = _a.i18n, placeholder = _a.placeholder, showLabels = _a.showLabels;
var active = this.state.active;
var hasValue = selectedPaths.length > 0;
var cascaderCls = classnames('zent-cascader-v2', className, {
'zent-cascader-v2--disabled': disabled,
'zent-cascader-v2--active': visible || active,
'zent-cascader-v2--visible': visible,
});
var triggerTextCls = classnames('zent-cascader-v2--text', {
'zent-cascader-v2--placeholder': !hasValue,
});
var triggerText;
if (hasValue) {
triggerText = renderValue(selectedPaths[0]);
}
else if (searchable) {
triggerText = placeholder || i18n.searchPlaceholder;
}
else {
triggerText = placeholder || i18n.placeholder;
}
var showClear = clearable && (visible || active) && (hasValue || keyword) && !disabled;
return (_jsxs("div", __assign({ className: cascaderCls, onClick: onClick, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, "data-zv": '10.0.17' }, { children: [children, showLabels && _jsx("span", __assign({ className: triggerTextCls, "data-zv": '10.0.17' }, { children: triggerText }), void 0), showClear ? (_jsx(Icon, { type: "close-circle", onClick: this.onClearClick }, void 0)) : (_jsx(Icon, { type: "down" }, void 0))] }), void 0));
};
return BaseTrigger;
}(Component));
export { BaseTrigger };