zent
Version:
一套前端设计语言和基于React的实现
164 lines (163 loc) • 7.15 kB
JavaScript
import { __assign, __extends } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Component } from 'react';
import cx from 'classnames';
import Popover from '../popover';
import { I18nReceiver as Receiver } from '../i18n';
import { DisabledContext } from '../disabled';
import TabsContent from './components/TabsContent';
import { CascaderChangeAction, } from './types';
import { getPathLabel, getPathToNode } from './path-fns';
import { SingleTrigger } from './trigger/SingleTrigger';
import { Forest } from './forest';
import { getNodeDepth } from './node-fns';
function isControlled(props) {
return ('visible' in props &&
'onVisibleChange' in props &&
typeof props.onVisibleChange === 'function');
}
function getVisible(props, state) {
if (isControlled(props)) {
return props.visible;
}
return state.visible;
}
var TabsCascader = (function (_super) {
__extends(TabsCascader, _super);
function TabsCascader(props) {
var _this = _super.call(this, props) || this;
_this.onVisibleChange = function (visible) {
if (_this.disabled) {
return;
}
_this.setVisible(visible);
};
_this.onTabsChange = function (activeId) {
_this.setState({
activeTab: activeId,
});
};
_this.onClick = function (node, closePopup) {
var _a = _this.props, loadOptions = _a.loadOptions, changeOnSelect = _a.changeOnSelect;
var needLoading = node.loadChildrenOnExpand && loadOptions;
var selectedOptions = getPathToNode(node);
var newValue = selectedOptions.map(function (n) { return n.value; });
var newState = {
activeValue: newValue,
};
var hasChildren = node.children && node.children.length > 0;
var needClose = !node.loadChildrenOnExpand && !hasChildren;
var needTriggerChange = needClose || changeOnSelect;
var level = getNodeDepth(node);
var nextLevel = level + 1;
if (!needLoading && !needClose) {
newState.activeTab = nextLevel;
}
_this.setState(newState, function () {
if (needLoading) {
_this.setState({
loadingLevel: level,
});
loadOptions(selectedOptions).then(function () {
_this.setState({
activeTab: nextLevel,
loadingLevel: null,
});
}, function () {
_this.setState({
loadingLevel: null,
});
});
}
if (needTriggerChange) {
_this.props.onChange(selectedOptions.map(function (n) { return n.value; }), selectedOptions, {
action: CascaderChangeAction.Change,
});
}
if (needClose) {
closePopup();
}
});
};
_this.onClear = function () {
_this.setVisible(false);
_this.setState({
activeValue: [],
}, function () {
_this.props.onChange([], [], { action: CascaderChangeAction.Clear });
});
};
var value = props.value;
_this.state = {
options: new Forest(props.options),
activeValue: value,
activeTab: value.length || 1,
visible: false,
prevProps: props,
loadingLevel: null,
};
return _this;
}
TabsCascader.getDerivedStateFromProps = function (props, state) {
var newState = {
prevProps: props,
};
var prevProps = state.prevProps;
var visible = getVisible(props, state);
if (!visible) {
var newValue = props.value;
newState.activeValue = newValue;
newState.activeTab = newValue.length || 1;
}
if (props.options !== prevProps.options) {
newState.options = new Forest(props.options);
}
return newState;
};
Object.defineProperty(TabsCascader.prototype, "disabled", {
get: function () {
var _a;
return (_a = this.props.disabled) !== null && _a !== void 0 ? _a : this.context.value;
},
enumerable: false,
configurable: true
});
TabsCascader.prototype.isControlled = function () {
return isControlled(this.props);
};
TabsCascader.prototype.getVisible = function () {
return getVisible(this.props, this.state);
};
TabsCascader.prototype.setVisible = function (visible) {
if (this.isControlled()) {
this.props.onVisibleChange(visible);
}
else {
this.setState({
visible: visible,
});
}
};
TabsCascader.prototype.render = function () {
var _this = this;
var _a = this.props, className = _a.className, popupClassName = _a.popupClassName, placeholder = _a.placeholder, renderValue = _a.renderValue, clearable = _a.clearable, value = _a.value, title = _a.title, renderItemContent = _a.renderItemContent, getItemTooltip = _a.getItemTooltip, renderList = _a.renderList;
var _b = this.state, activeValue = _b.activeValue, loadingLevel = _b.loadingLevel, activeTab = _b.activeTab, options = _b.options;
var visible = this.getVisible();
var selectedPath = options.getPathByValue(value);
return (_jsx(Receiver, __assign({ componentName: "Cascader" }, { children: function (i18n) {
return (_jsxs(Popover, __assign({ className: cx('zent-cascader-v2__popup', popupClassName), position: Popover.Position.CascaderAutoBottomLeft, visible: visible, onVisibleChange: _this.onVisibleChange, cushion: 4 }, { children: [_jsx(Popover.Trigger.Click, __assign({ toggle: true }, { children: _jsx(SingleTrigger, { className: className, placeholder: placeholder, renderValue: renderValue, disabled: _this.disabled, selectedPath: selectedPath, visible: visible, clearable: clearable, i18n: i18n, onClear: _this.onClear }, void 0) }), void 0), _jsx(Popover.Content, { children: _jsx(TabsContent, { i18n: i18n, value: activeValue, loadingLevel: loadingLevel, onClick: _this.onClick, activeId: activeTab, onTabsChange: _this.onTabsChange, title: title, options: options.getTrees(), renderItemContent: renderItemContent, getItemTooltip: getItemTooltip, renderList: renderList }, void 0) }, void 0)] }), void 0));
} }), void 0));
};
TabsCascader.defaultProps = {
value: [],
options: [],
changeOnSelect: false,
renderValue: getPathLabel,
clearable: false,
title: [],
};
TabsCascader.contextType = DisabledContext;
return TabsCascader;
}(Component));
export { TabsCascader };
export default TabsCascader;