zent
Version:
一套前端设计语言和基于React的实现
54 lines (53 loc) • 3.44 kB
JavaScript
import { __assign, __extends } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import cx from 'classnames';
import { Component, createRef } from 'react';
import { SearchInput } from './Search';
import Tags from './Tags';
import { BaseTrigger } from './BaseTrigger';
var TagsTrigger = (function (_super) {
__extends(TagsTrigger, _super);
function TagsTrigger() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.searchInputRef = createRef();
_this.onKeywordChange = function (e) {
_this.props.onKeywordChange(e.target.value);
};
return _this;
}
TagsTrigger.prototype.focus = function () {
var _a;
(_a = this.searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
};
TagsTrigger.prototype.renderTagsContent = function () {
var _a = this.props, selectedPaths = _a.selectedPaths, renderValue = _a.renderValue, onRemove = _a.onRemove, selectionMap = _a.selectionMap, simplifyPaths = _a.simplifyPaths, maxLine = _a.maxLine, lineHeight = _a.lineHeight;
var tagEl = (_jsx(Tags, { list: selectedPaths, selectionMap: selectionMap, simplifyPaths: simplifyPaths, renderValue: renderValue, collapse: maxLine === 1, onRemove: onRemove }, void 0));
var maxHeightStyle = {};
if (maxLine > 1) {
maxHeightStyle.maxHeight = maxLine * lineHeight + 'px';
maxHeightStyle.overflowY = 'auto';
return (_jsx("div", __assign({ style: maxHeightStyle, className: "zent-cascader-v2-tag__list", "data-zv": '10.0.17' }, { children: tagEl }), void 0));
}
return tagEl;
};
TagsTrigger.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, i18n = _a.i18n, searchable = _a.searchable, placeholder = _a.placeholder, onClick = _a.onClick, onClear = _a.onClear, onKeywordChange = _a.onKeywordChange, renderValue = _a.renderValue, renderTags = _a.renderTags, onRemove = _a.onRemove, maxLine = _a.maxLine;
var showTags = selectedPaths.length > 0;
var showSearch = visible && searchable;
return (_jsxs(BaseTrigger, __assign({ placeholder: placeholder, disabled: disabled, className: cx(className, 'zent-cascader-v2--multiple', {
'zent-cascader-v2--multiple--collapsed': maxLine === 1,
}), clearable: clearable, visible: visible, onClear: onClear, selectedPaths: selectedPaths, keyword: keyword, onKeywordChange: onKeywordChange, onClick: onClick, i18n: i18n, renderValue: renderValue, searchable: searchable, showLabels: !showTags && !showSearch }, { children: [showTags &&
(typeof renderTags === 'function'
? renderTags({
list: selectedPaths,
renderValue: renderValue,
onRemove: onRemove,
})
: this.renderTagsContent()), showSearch && (_jsx(SearchInput, { placeholder: i18n.searchPlaceholder, value: keyword, onChange: this.onKeywordChange, ref: this.searchInputRef }, void 0))] }), void 0));
};
TagsTrigger.defaultProps = {
selectedPaths: [],
};
return TagsTrigger;
}(Component));
export { TagsTrigger };