choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
349 lines (314 loc) • 12.1 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _get from "@babel/runtime/helpers/get";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import _createSuper from "@babel/runtime/helpers/createSuper";
import { __decorate } from "tslib";
import React from 'react';
import { computed } from 'mobx';
import { observer } from 'mobx-react';
import classNames from 'classnames';
import scrollIntoView from 'scroll-into-view-if-needed';
import ObserverCheckBox from '../check-box/CheckBox';
import { $l } from '../locale-context';
import ObserverTextField from '../text-field/TextField';
import Icon from '../icon';
import { DISABLED_FIELD, getItemKey, Select } from '../select/Select';
import autobind from '../_util/autobind';
import { stopPropagation } from '../_util/EventManager';
import ViewComponent from '../core/ViewComponent';
import CustomArea from './CustomArea';
var TransferList = /*#__PURE__*/function (_Select) {
_inherits(TransferList, _Select);
var _super = _createSuper(TransferList);
function TransferList() {
var _this;
_classCallCheck(this, TransferList);
_this = _super.apply(this, arguments);
_this.wrapperRef = null;
_this.handleRemove = function (value) {
var onRemove = _this.props.onRemove;
if (onRemove) {
onRemove(value);
}
};
return _this;
}
_createClass(TransferList, [{
key: "popup",
get: function get() {
return true;
}
}, {
key: "header",
get: function get() {
var prefixCls = this.prefixCls,
multiple = this.multiple,
header = this.observableProps.header;
if (multiple || header) {
return /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-header")
}, this.getHeaderSelected(), header && /*#__PURE__*/React.createElement("span", {
className: "".concat(prefixCls, "-header-title")
}, header));
}
return undefined;
}
}, {
key: "footer",
get: function get() {
var prefixCls = this.prefixCls,
filteredOptions = this.filteredOptions,
footer = this.observableProps.footer;
if (footer) {
return /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-footer")
}, footer(filteredOptions));
}
return undefined;
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate() {
var currentIndex = this.props.currentIndex; // 在渲染完之后执行
if (this.wrapperRef && typeof currentIndex !== 'undefined') {
var contentDom = this.wrapperRef.getElementsByTagName('ul')[0];
var findSelectedDom = this.wrapperRef.getElementsByTagName('li');
if (contentDom && currentIndex && currentIndex > -1 && currentIndex < this.filteredOptions.length) {
var selectedDom = findSelectedDom[currentIndex];
scrollIntoView(selectedDom, {
block: 'end',
behavior: 'smooth',
scrollMode: 'if-needed',
boundary: contentDom
});
}
this.options.setState('targetFilteredOptions', this.filteredOptions);
}
}
}, {
key: "getOmitPropsKeys",
value: function getOmitPropsKeys() {
return _get(_getPrototypeOf(TransferList.prototype), "getOmitPropsKeys", this).call(this).concat(['autoComplete', 'footer', 'header', 'selected', 'onSelect', 'onSelectAll']);
}
}, {
key: "getOtherProps",
value: function getOtherProps() {
var otherProps = _get(_getPrototypeOf(TransferList.prototype), "getOtherProps", this).call(this);
delete otherProps.ref;
delete otherProps.type;
delete otherProps.onChange;
delete otherProps.onKeyDown;
delete otherProps.currentIndex;
delete otherProps.sortable;
delete otherProps.sortOperations;
delete otherProps.oneWay;
delete otherProps.onRemove;
delete otherProps.targetOption;
delete otherProps.direction;
return otherProps;
}
}, {
key: "getObservableProps",
value: function getObservableProps(props, context) {
return _objectSpread(_objectSpread({}, _get(_getPrototypeOf(TransferList.prototype), "getObservableProps", this).call(this, props, context)), {}, {
header: props.header,
footer: props.footer
});
}
}, {
key: "getMenuPrefixCls",
value: function getMenuPrefixCls() {
return "".concat(this.prefixCls, "-content");
}
}, {
key: "handleSelectAllChange",
value: function handleSelectAllChange(value) {
var onSelectAll = this.props.onSelectAll;
if (onSelectAll) {
onSelectAll(value ? this.filteredOptions.filter(function (record) {
return !record.get(DISABLED_FIELD);
}) : []);
}
}
}, {
key: "handleClear",
value: function handleClear() {
this.setText(undefined);
}
}, {
key: "getHeaderSelected",
value: function getHeaderSelected() {
var length = this.filteredOptions.length,
multiple = this.multiple,
prefixCls = this.prefixCls,
selectedLength = this.props.selected.length;
var selectedText = selectedLength ? "".concat(selectedLength, "/") : '';
var disabledLength = this.filteredOptions.filter(function (record) {
return record.get(DISABLED_FIELD);
}).length;
if (multiple) {
return /*#__PURE__*/React.createElement(ObserverCheckBox, {
disabled: this.disabled,
onChange: this.handleSelectAllChange,
onFocus: stopPropagation,
checked: !!length && disabledLength !== length && (length === selectedLength || length - disabledLength === selectedLength),
indeterminate: !!selectedLength && length - disabledLength !== selectedLength
}, /*#__PURE__*/React.createElement("span", {
className: "".concat(prefixCls, "-header-selected")
}, "".concat(selectedText).concat(length).concat($l('Transfer', 'items'))));
}
return /*#__PURE__*/React.createElement("span", {
className: "".concat(prefixCls, "-header-selected")
}, "".concat(length).concat($l('Transfer', 'items')));
}
}, {
key: "getSearchField",
value: function getSearchField() {
var prefixCls = this.prefixCls;
return /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-body-search-wrapper")
}, /*#__PURE__*/React.createElement(ObserverTextField, {
ref: this.elementReference,
onInput: this.handleChange,
onClear: this.handleClear,
onKeyDown: this.handleKeyDown,
prefix: /*#__PURE__*/React.createElement(Icon, {
type: "search"
}),
clearButton: true
}));
}
}, {
key: "getMenuItem",
value: function getMenuItem(_ref) {
var _this2 = this;
var record = _ref.record,
text = _ref.text,
value = _ref.value;
var prefixCls = this.prefixCls,
multiple = this.multiple,
options = this.options,
_this$props = this.props,
oneWay = _this$props.oneWay,
optionRenderer = _this$props.optionRenderer;
if (oneWay && !multiple) {
var renderer = /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-item-delete")
}, /*#__PURE__*/React.createElement("div", null, text), /*#__PURE__*/React.createElement(Icon, {
type: "delete_black-o",
className: "".concat(prefixCls, "-item-icon"),
onClick: function onClick() {
return _this2.handleRemove(value);
}
}));
return optionRenderer ? optionRenderer({
dataSet: options,
record: record,
text: text,
value: value
}) : renderer;
}
return _get(_getPrototypeOf(TransferList.prototype), "getMenuItem", this).call(this, {
record: record,
text: text,
value: value
});
}
}, {
key: "renderBody",
value: function renderBody() {
var _this3 = this;
var prefixCls = this.prefixCls,
searchable = this.searchable,
textField = this.textField,
valueField = this.valueField,
multiple = this.multiple,
_this$props2 = this.props,
selected = _this$props2.selected,
onSelect = _this$props2.onSelect,
onSelectAll = _this$props2.onSelectAll,
setTargetOption = _this$props2.setTargetOption,
children = _this$props2.children,
targetOption = _this$props2.targetOption,
direction = _this$props2.direction;
var searchField = searchable && this.getSearchField();
var classString = classNames("".concat(prefixCls, "-body"), _defineProperty({}, "".concat(prefixCls, "-body-with-search"), searchable)); // 自定义渲染
if (typeof children === 'function') {
return /*#__PURE__*/React.createElement(CustomArea, {
targetOption: targetOption
}, children({
direction: direction,
targetOption: targetOption,
setTargetOption: setTargetOption,
onItemSelect: onSelectAll
}));
}
var selectedKeys = multiple ? selected.map(function (record) {
return getItemKey(record, record.get(textField), record.get(valueField));
}) : [];
return /*#__PURE__*/React.createElement("div", {
className: classString
}, searchField, /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-content-wrapper"),
ref: function ref(dom) {
_this3.wrapperRef = dom;
},
onFocus: searchable ? stopPropagation : undefined
}, this.getMenu({
selectedKeys: selectedKeys,
onClick: onSelect,
focusable: !this.searchable
})));
}
}, {
key: "getClassName",
value: function getClassName() {
var _get$call;
var prefixCls = this.prefixCls,
header = this.header,
footer = this.footer;
return _get(_getPrototypeOf(TransferList.prototype), "getClassName", this).call(this, (_get$call = {}, _defineProperty(_get$call, "".concat(prefixCls, "-with-header"), header), _defineProperty(_get$call, "".concat(prefixCls, "-with-footer"), footer), _get$call));
}
}, {
key: "removeLastValue",
value: function removeLastValue() {// noop
}
}, {
key: "handleBlur",
value: function handleBlur(e) {
ViewComponent.prototype.handleBlur.call(this, e);
}
}, {
key: "renderHelpMessage",
value: function renderHelpMessage() {
return null;
}
}, {
key: "renderWrapper",
value: function renderWrapper() {
var header = this.header,
footer = this.footer,
_this$props3 = this.props,
style = _this$props3.style,
children = _this$props3.children;
var isCustom = typeof children === 'function';
return /*#__PURE__*/React.createElement("div", _extends({}, this.getOtherProps(), {
style: style
}), !isCustom && header, this.renderBody(), !isCustom && footer);
}
}]);
return TransferList;
}(Select);
__decorate([computed], TransferList.prototype, "header", null);
__decorate([computed], TransferList.prototype, "footer", null);
__decorate([autobind], TransferList.prototype, "handleSelectAllChange", null);
__decorate([autobind], TransferList.prototype, "handleClear", null);
__decorate([autobind], TransferList.prototype, "handleBlur", null);
TransferList = __decorate([observer], TransferList);
export default TransferList;
//# sourceMappingURL=TransferList.js.map