fastlion-amis
Version:
一种MIS页面生成工具
681 lines (680 loc) • 42.2 kB
JavaScript
"use strict";
/**
* @file Tabs
* @description 选项卡
* @author fex
*/
var _a;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Tabs = exports.Tab = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
var Transition_1 = tslib_1.__importStar(require("react-transition-group/Transition"));
var theme_1 = require("../theme");
var uncontrollable_1 = require("uncontrollable");
var icon_1 = require("../utils/icon");
var helper_1 = require("../utils/helper");
var debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
var index_1 = tslib_1.__importDefault(require("../renderers/Lion/components/LionCopyItem/index"));
var icons_1 = require("./icons");
var antd_1 = require("antd");
var icons_2 = require("@ant-design/icons");
var lodash_1 = require("lodash");
var manager_1 = require("../store/manager");
var Modal_1 = tslib_1.__importDefault(require("./Modal"));
var Drawer_1 = tslib_1.__importDefault(require("./Drawer"));
var transitionStyles = (_a = {},
_a[Transition_1.ENTERING] = 'in',
_a[Transition_1.ENTERED] = 'in',
_a);
var TabComponent = /** @class */ (function (_super) {
tslib_1.__extends(TabComponent, _super);
function TabComponent() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.contentRef = function (ref) { return (_this.contentDom = ref); };
_this.state = {
toolsOpened: false,
visible: false
};
return _this;
}
TabComponent.prototype.render = function () {
var _this = this;
var _a = this.props, cx = _a.classnames, mountOnEnter = _a.mountOnEnter, reload = _a.reload, unmountOnExit = _a.unmountOnExit, eventKey = _a.eventKey, activeKey = _a.activeKey, children = _a.children, className = _a.className, env = _a.env, isTotalMode = _a.isTotalMode, title = _a.title, mode = _a.mode, tabName = _a.tabName, notPrintFieldList = _a.notPrintFieldList;
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(Transition_1.default, { in: mode === 'content-tiled' ? true : activeKey === eventKey, mountOnEnter: mountOnEnter === false ? false : true, unmountOnExit: typeof reload === 'boolean' ? reload : unmountOnExit, timeout: 500 }, function (status) {
if (status === Transition_1.ENTERING) {
_this.contentDom.offsetWidth;
}
return (react_1.default.createElement("div", { ref: _this.contentRef, className: cx(transitionStyles[status], activeKey === eventKey ? 'is-active' : '', (notPrintFieldList === null || notPrintFieldList === void 0 ? void 0 : notPrintFieldList.includes(tabName !== null && tabName !== void 0 ? tabName : '')) ? 'dom-not-print' : '', 'Tabs-pane', className) },
mode === 'content-tiled' &&
react_1.default.createElement("div", { className: cx('Tabs-pane-title') },
react_1.default.createElement(index_1.default, { showItems: [{
value: tabName !== null && tabName !== void 0 ? tabName : 'null',
label: "复制名称",
icon: "fa fa-sticky-note-o"
}], env: env },
react_1.default.createElement("span", { style: { cursor: 'pointer' }, onClick: function () {
var stores = (0, manager_1.getStores)();
var data = {};
Object.values(stores).forEach(function (store) {
if (store.data) {
data = tslib_1.__assign(tslib_1.__assign({}, data), store.data);
}
});
_this.modalData = data;
_this.setState({ visible: true });
} },
title,
react_1.default.createElement(icons_1.Icon, { symbol: true, icon: '#icon-tooltool_max' })))),
isTotalMode ? children(_this.props.setTotalNum, _this.props.totalTab) : children));
}),
(0, helper_1.isMobile)() ?
react_1.default.createElement(Drawer_1.default, { show: this.state.visible, position: 'right', className: "page-link", container: env === null || env === void 0 ? void 0 : env.getTopModalContainer },
react_1.default.createElement("div", { className: cx('Drawer-header') },
react_1.default.createElement(icons_1.Icon, { icon: "title-left", style: { width: 20, height: 20, marginRight: 8 }, onClick: function () { return _this.setState({ visible: false }); } }),
react_1.default.createElement("div", { className: cx('Drawer-title') }, title)),
typeof children == 'function' ? children() : Array.isArray(children) ? react_1.default.cloneElement(children[0], { data: this.modalData }) : null) :
react_1.default.createElement(Modal_1.default, { show: this.state.visible, size: 'full', className: "page-link", container: env === null || env === void 0 ? void 0 : env.getModalContainer },
react_1.default.createElement(Modal_1.default.Header, { onClose: function () { return _this.setState({ visible: false }); } },
react_1.default.createElement(Modal_1.default.Title, null, title)),
react_1.default.createElement(Modal_1.default.Body, null, typeof children == 'function' ? children() : Array.isArray(children) ? react_1.default.cloneElement(children[0], { data: this.modalData }) : null))));
};
return TabComponent;
}(react_1.default.PureComponent));
exports.Tab = (0, theme_1.themeable)(TabComponent);
var Tabs = /** @class */ (function (_super) {
tslib_1.__extends(Tabs, _super);
function Tabs(props) {
var _this = this;
var _a;
_this = _super.call(this, props) || this;
_this.navMain = react_1.default.createRef();
_this.scroll = false;
_this.ulRef = react_1.default.createRef();
// collpaseRef: React.RefObject<HTMLDivElement> = React.createRef();
_this.tabsRef = react_1.default.createRef();
_this.tabContentRef = react_1.default.createRef();
_this.scrollRef = react_1.default.createRef();
_this.scrollRefChildren = react_1.default.createRef();
_this.checkArrowStatus = (0, debounce_1.default)(function () {
var _a = _this.navMain.current
|| {
scrollLeft: 0,
scrollWidth: 0,
clientWidth: 0
}, scrollLeft = _a.scrollLeft, scrollWidth = _a.scrollWidth, clientWidth = _a.clientWidth;
var _b = _this.state, arrowRightDisabled = _b.arrowRightDisabled, arrowLeftDisabled = _b.arrowLeftDisabled;
if (scrollLeft === 0 && !arrowLeftDisabled) {
_this.setState({
arrowRightDisabled: false,
arrowLeftDisabled: true
});
}
else if (scrollWidth === scrollLeft + clientWidth && !arrowRightDisabled) {
_this.setState({
arrowRightDisabled: true,
arrowLeftDisabled: false
});
}
else if (scrollLeft !== 0 && arrowLeftDisabled) {
_this.setState({
arrowLeftDisabled: false
});
}
else if (scrollWidth !== scrollLeft + clientWidth && arrowRightDisabled) {
_this.setState({
arrowRightDisabled: false
});
}
}, 100, {
trailing: true,
leading: false
});
_this.menuItems = [];
_this.tempTabsTotal = {};
_this.openWin = function (child) {
var appShell = window['AppShell'];
var winSchemeData = child === null || child === void 0 ? void 0 : child.props.body[0];
appShell === null || appShell === void 0 ? void 0 : appShell.openNewWin(tslib_1.__assign(tslib_1.__assign({}, winSchemeData), { title: child === null || child === void 0 ? void 0 : child.props.title }), sessionStorage, (0, helper_1.flatSuperData)(_this.props.data));
};
/** 防抖过滤关键词 */
_this.handleFilterItem = (0, debounce_1.default)(function (e) {
var isComposing = e.nativeEvent.isComposing;
if (isComposing)
return;
var matchItems = _this.state.cacheMenuItems.filter(function (item) { return item.label.includes(e.target.value); });
_this.setState({ menuItems: matchItems });
}, 300);
_this.handleComposition = function (e) {
var isEnd = e.type === 'compositionend';
if (isEnd) {
_this.handleFilterItem(e);
}
};
/** 渲染下拉菜单 */
_this.renderMoreItems = function () {
var _a, _b;
var isOverflow = _this.state.isOverflow;
return isOverflow ? (react_1.default.createElement("div", { className: "Tabs-allItems" },
react_1.default.createElement(antd_1.Dropdown, { overlayClassName: 'overlay-allItems', trigger: ['hover'], placement: 'bottomRight', getPopupContainer: function () { return document.getElementById('amis-modal-container'); }, menu: { items: _this.state.menuItems, onClick: _this.handleClickItem, selectable: true, selectedKeys: [].concat("".concat((_b = (_a = _this.props) === null || _a === void 0 ? void 0 : _a.activeKey) !== null && _b !== void 0 ? _b : 0)) }, dropdownRender: function (menu) { return (react_1.default.createElement("div", { className: 'dropdown-wrapper' },
react_1.default.createElement("div", { className: 'filter-wrapper' },
react_1.default.createElement(antd_1.Input, { size: 'small', placeholder: '\u8BF7\u8F93\u5165\u5173\u952E\u8BCD', onChange: _this.handleFilterItem, onCompositionStart: _this.handleComposition, onCompositionEnd: _this.handleComposition, allowClear: true })),
menu)); } },
react_1.default.createElement("div", { className: 'emit-icon' },
react_1.default.createElement(icons_2.EllipsisOutlined, null))))) : null;
};
/** 移动端样式会对工作台切换有影响，且该功能暂时无用，所以先注释 */
// renderReloadTools = () => {
// const { mode, env } = this.props;
// if (mode === 'content-tiled' && isMobile()) {
// return <ActionSheet
// round
// className='tabs-content-tiled-actions'
// isOpened={this.state.toolsOpened}
// container={env?.getModalContainer}
// onHide={(e: any) => {
// e.stopPropagation();
// this.setState({ toolsOpened: false })
// }}
// popupContent={
// <div className='tabs-reload-tool'>
// <div className='toolbar-title'>
// </div>
// <div className='toolbar-body'>
// <div className='toolbar-item-row'>
// <div className='toolbar-item' onClick={() => {
// this.setState({ toolsOpened: false })
// this.props.handleReload?.(this.props.children)
// }}>
// <div className='icon-bar'>
// <Icon icon='reload' className='icon' />
// </div>
// <div className='icon-title'>刷新</div>
// </div>
// </div>
// <div className='toolbar-item-row toolbar-cancel'>
// <div onClick={() => this.setState({ toolsOpened: false })}>
// 取消
// </div>
// </div>
// </div>
// </div>
// }
// >
// <div className={`tabs-reload-tools ${env?.shottcut ? 'tabs-reload-tools-shottcut' : ''}`} onClick={() => { this.setState({ toolsOpened: true }) }}>
// . . .
// </div>
// </ActionSheet>
// }
// return null
// }
_this.tabsSeachTimer = 0;
_this.isDragging = false;
_this.handleMouseDown = function (e) {
if (_this.tabsRef.current && _this.state.navVisible) {
_this.setState({ isHovered: true });
_this.lineStartX = e.clientX;
_this.isDragging = true;
_this.targetThWidth = _this.ulRef.current.getBoundingClientRect().width;
_this.tabsRef.current.addEventListener('mousemove', _this.handleMouseMove);
_this.tabsRef.current.addEventListener('mouseup', _this.handleMouseUp);
}
};
_this.handleMouseMove = function (e) {
var moveX = e.clientX - _this.lineStartX;
if (_this.ulRef.current && _this.isDragging) {
if (_this.targetThWidth + moveX <= 80 || _this.targetThWidth + moveX >= _this.tabsRef.current.getBoundingClientRect().width - 200) {
_this.isDragging = false;
_this.tabsRef.current.removeEventListener('mousemove', _this.handleMouseMove);
_this.tabsRef.current.removeEventListener('mouseup', _this.handleMouseUp);
return;
}
_this.ulRef.current.style.width = _this.targetThWidth + moveX + 'px';
}
};
_this.handleMouseUp = function (e) {
_this.isDragging = false;
_this.setState({ isHovered: false });
if (e.clientX == _this.lineStartX) {
_this.handleClickCollpase();
}
if (_this.tabsRef.current) {
_this.tabsRef.current.removeEventListener('mousemove', _this.handleMouseMove);
_this.tabsRef.current.removeEventListener('mouseup', _this.handleMouseUp);
}
};
_this.handleClickCollpase = function () {
var _a;
var contentHeight = ((_a = _this.tabContentRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight) + 'px';
_this.setState({ navVisible: !_this.state.navVisible }, function () {
_this.ulRef.current.style.width = _this.state.navVisible ? '160px' : '22px';
_this.ulRef.current.style.height = contentHeight;
var ns = _this.props.classPrefix;
_this.ulRef.current.querySelector(".".concat(ns, "Tabs-links-befote")).style.display = _this.state.navVisible ? 'block' : 'none';
_this.scrollRef.current.style.width = _this.state.navVisible ? '8px' : '0px';
});
};
_this.handleClickItem = function (item) {
var key = item.key;
_this.handleSelect(Number(key));
};
var menuItems = ((_a = props === null || props === void 0 ? void 0 : props.children) !== null && _a !== void 0 ? _a : []).filter(Boolean).map(function (item) { return ({ label: item.props.title, key: "".concat(item.props.eventKey) }); });
_this.state = {
isHovered: false,
isOverflow: false,
tabsSearchQuery: '',
arrowLeftDisabled: false,
arrowRightDisabled: false,
/* tab顶部数字 chencicsy */
tabsTotal: Array.isArray(_this.props.children) ? (function (that) {
var _a;
var keysContainer = {};
(_a = that.props) === null || _a === void 0 ? void 0 : _a.children.filter(Boolean).forEach(function (tab, idx) {
keysContainer[idx] = {
key: idx,
totalNum: '0'
};
});
return keysContainer;
})(_this) : { 0: { key: 0, totalNum: '0' } },
navVisible: true,
menuItems: menuItems,
cacheMenuItems: menuItems
};
_this.tempTabsTotal = _this.state.tabsTotal;
return _this;
}
Tabs.prototype.componentDidMount = function () {
var _a, _b;
this.computedWidth();
if (this.navMain) {
(_a = this.navMain.current) === null || _a === void 0 ? void 0 : _a.addEventListener('wheel', this.handleWheel, {
passive: false
});
this.checkArrowStatus();
// 用于解决AI助手固定右侧的时候显示异常
var pageContentDom = helper_1.domUtils.closest(this.navMain.current, '.main-page-content');
var pageContentIdMatch = (_b = pageContentDom === null || pageContentDom === void 0 ? void 0 : pageContentDom.className.split(' ').find(function (item) { return item.includes('page-content-id_'); })) !== null && _b !== void 0 ? _b : '';
this.pageContentId = pageContentIdMatch;
}
};
Tabs.prototype.componentDidUpdate = function () {
// 判断是否是由滚动触发的数据更新，如果是则不需要再次判断容器与内容的关系
if (!this.scroll) {
this.computedWidth();
}
this.scroll = false;
};
Tabs.prototype.componentWillUnmount = function () {
this.checkArrowStatus.cancel();
};
/* 修改tab顶部数字显示 chencicsy */
Tabs.prototype.handleChangeTotal = function (key, totalNum, tableName, statiStics) {
var _a, _b, _c;
var _d;
var tabsTotal = this.state.tabsTotal;
var currentTab = Object.entries(tabsTotal).find(function (tab) {
var _a;
return String(key) === String(tab[0]) && String(key) === String((_a = tab[1]) === null || _a === void 0 ? void 0 : _a.key);
});
if (currentTab && totalNum !== ((_d = currentTab[1]) === null || _d === void 0 ? void 0 : _d.totalNum)) {
// Jay，设置当前tab页的第一个CRUD、主从表的总数，第一次的setState就认为tableName是第一个CRUD、主从表的name值，防止picker弹出的CRUD覆盖了总数
var temp = void 0;
if (!tabsTotal[key].tableName) {
temp = (_a = {},
_a[key] = {
key: key,
totalNum: totalNum,
tableName: tableName
},
_a);
}
else if (tabsTotal[key].key === key && (statiStics && tableName === statiStics)) {
// if (statiStics && tableName === statiStics) {
temp = (_b = {},
_b[key] = {
key: key,
totalNum: totalNum,
tableName: tableName
},
_b);
// }
}
else if (tabsTotal[key].tableName === tableName) {
temp = (_c = {},
_c[key] = {
key: key,
totalNum: totalNum,
tableName: tableName
},
_c);
}
//因为在上一个state还未更新完之前，另一个crud也调用了这个方法，导致覆盖了上一次的值，所以这里使用私有属性记录一下，实时更新
if (temp) {
this.tempTabsTotal[key] = temp[key];
this.setState({
tabsTotal: tslib_1.__assign(tslib_1.__assign({}, this.tempTabsTotal), temp)
});
}
}
};
/**
* 处理内容与容器之间的位置关系
*/
Tabs.prototype.computedWidth = function () {
var _a = this.props, dMode = _a.mode, tabsMode = _a.tabsMode, scrollable = _a.scrollable;
var mode = tabsMode || dMode;
if (!scrollable || mode === 'vertical') {
return;
}
var navMainRef = this.navMain.current;
var clientWidth = (navMainRef === null || navMainRef === void 0 ? void 0 : navMainRef.clientWidth) || 0;
var scrollWidth = (navMainRef === null || navMainRef === void 0 ? void 0 : navMainRef.scrollWidth) || 0;
var isOverflow = scrollWidth > clientWidth;
// 内容超出容器长度标记溢出
if (isOverflow !== this.state.isOverflow) {
this.setState({ isOverflow: isOverflow });
}
if (isOverflow) {
this.showSelected();
}
};
/**
* 保证选中的tab始终显示在可视区域
*/
Tabs.prototype.showSelected = function (key) {
var _a, _b, _c, _d, _e, _f;
var _g = this.props, dMode = _g.mode, tabsMode = _g.tabsMode, scrollable = _g.scrollable;
var isOverflow = this.state.isOverflow;
var mode = tabsMode || dMode;
if (!scrollable || mode === 'vertical' || !isOverflow) {
return;
}
var _h = this.props, activeKey = _h.activeKey, children = _h.children;
var currentKey = key !== undefined ? key : activeKey;
var currentIndex = children === null || children === void 0 ? void 0 : children.filter(Boolean).findIndex(function (item) { return item.props.eventKey === currentKey; });
var li = ((_b = (_a = this.navMain.current) === null || _a === void 0 ? void 0 : _a.children[0]) === null || _b === void 0 ? void 0 : _b.children) || [];
var currentLi = li[currentIndex];
var liOffsetLeft = (currentLi === null || currentLi === void 0 ? void 0 : currentLi.offsetLeft) - 20;
var liClientWidth = currentLi === null || currentLi === void 0 ? void 0 : currentLi.clientWidth;
var scrollLeft = ((_c = this.navMain.current) === null || _c === void 0 ? void 0 : _c.scrollLeft) || 0;
var clientWidth = ((_d = this.navMain.current) === null || _d === void 0 ? void 0 : _d.clientWidth) || 0;
// 左边被遮住了
if (scrollLeft > liOffsetLeft) {
(_e = this.navMain.current) === null || _e === void 0 ? void 0 : _e.scrollTo({
left: liOffsetLeft,
behavior: 'smooth'
});
}
// 右边被遮住了
if (liOffsetLeft + liClientWidth > scrollLeft + clientWidth) {
(_f = this.navMain.current) === null || _f === void 0 ? void 0 : _f.scrollTo({
left: liOffsetLeft + liClientWidth - clientWidth,
behavior: 'smooth'
});
}
};
Tabs.prototype.handleSelect = function (key) {
var _this = this;
var onSelect = this.props.onSelect;
this.showSelected(key);
setTimeout(function () {
_this.checkArrowStatus();
}, 500);
onSelect && onSelect(key);
};
Tabs.prototype.handleArrow = function (type) {
var _a, _b, _c;
var _d = this.navMain.current
|| {
scrollLeft: 0,
scrollWidth: 0,
clientWidth: 0
}, scrollLeft = _d.scrollLeft, scrollWidth = _d.scrollWidth, clientWidth = _d.clientWidth;
if (type === 'left' && scrollLeft > 0) {
(_a = this.navMain.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
left: 0,
behavior: 'smooth'
});
this.setState({
arrowRightDisabled: false,
arrowLeftDisabled: true
});
}
else if (type === 'right' && scrollWidth > scrollLeft + clientWidth) {
(_b = this.navMain.current) === null || _b === void 0 ? void 0 : _b.scrollTo({
left: (_c = this.navMain.current) === null || _c === void 0 ? void 0 : _c.scrollWidth,
behavior: 'smooth'
});
this.setState({
arrowRightDisabled: true,
arrowLeftDisabled: false
});
}
this.scroll = true;
};
/**
* 监听导航上的滚动事件
*/
Tabs.prototype.handleWheel = function (e) {
var _a, _b;
var deltaY = e.deltaY, deltaX = e.deltaX;
var absX = Math.abs(deltaX);
var absY = Math.abs(deltaY);
// 当鼠标上下滚动时转换为左右滚动
if (absY > absX) {
(_a = this.navMain.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
left: ((_b = this.navMain.current) === null || _b === void 0 ? void 0 : _b.scrollLeft) + deltaY
});
e.preventDefault();
}
this.checkArrowStatus();
this.scroll = true;
};
Tabs.prototype.renderNav = function (child, index) {
var _this = this;
var _a, _b, _c, _d, _e, _f, _g;
if (!child) {
return;
}
var _h = this.props, cx = _h.classnames, activeKeyProp = _h.activeKey, mode = _h.mode, ns = _h.classPrefix, env = _h.env;
var tabsTotal = this.state.tabsTotal;
var _j = child.props, eventKey = _j.eventKey, disabled = _j.disabled, icon = _j.icon, iconPosition = _j.iconPosition, title = _j.title, toolbar = _j.toolbar, tabClassName = _j.tabClassName, isTotalMode = _j.isTotalMode;
var activeKey = activeKeyProp === undefined && index === 0 ? eventKey : activeKeyProp;
var iconElement = (0, icon_1.generateIcon)(cx, icon, 'Icon');
var menuItems = [{
value: (_b = (_a = child.props) === null || _a === void 0 ? void 0 : _a.tabName) !== null && _b !== void 0 ? _b : 'null',
label: "复制名称",
icon: "fa fa-sticky-note-o"
}, {
value: 'openNew',
label: "在新标签页打开",
icon: "fa fa-clone",
click: function () {
var _a, _b, _c, _d, _e, _f, _g;
(_a = env === null || env === void 0 ? void 0 : env.onPageLink) === null || _a === void 0 ? void 0 : _a.call(env, (_d = (_c = (_b = child.props.body) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.name) !== null && _d !== void 0 ? _d : '', (_f = (_e = child.props) === null || _e === void 0 ? void 0 : _e.tabName) !== null && _f !== void 0 ? _f : '', child.props.title, { schema: (_g = child.props.body) === null || _g === void 0 ? void 0 : _g[0] }, undefined);
}
}];
var currentDom = this.tabsRef.current;
var needCollect = currentDom && !(currentDom.closest(".".concat(ns, "Modal")) || currentDom.closest(".".concat(ns, "Drawer")) || currentDom.closest(".ant-modal") || currentDom.closest(".ant-drawer")) && child.props.tabName;
if (needCollect) {
var collectStr = (_c = sessionStorage.getItem('collectList')) !== null && _c !== void 0 ? _c : '';
if (collectStr) {
var collectList = JSON.parse(collectStr);
var collectedTabList = (0, lodash_1.flatMap)(collectList !== null && collectList !== void 0 ? collectList : [], function (item) { return item.secondList; }).filter(function (item) { var _a; return item.content && ((_a = item.content) === null || _a === void 0 ? void 0 : _a.isTab); });
var menuStr = sessionStorage.getItem('currentSecondMenu');
var targetItem_1 = undefined;
if (menuStr) {
var currentSecondMenu_1 = JSON.parse(menuStr);
targetItem_1 = collectedTabList === null || collectedTabList === void 0 ? void 0 : collectedTabList.find(function (node) {
var _a, _b, _c, _d;
return ((_a = node.content) === null || _a === void 0 ? void 0 : _a.appId) == sessionStorage.getItem('appId') &&
(currentSecondMenu_1.secMenuId ? ((_b = node.content) === null || _b === void 0 ? void 0 : _b.secMenuId) == (currentSecondMenu_1 === null || currentSecondMenu_1 === void 0 ? void 0 : currentSecondMenu_1.secMenuId) :
((_c = node.content) === null || _c === void 0 ? void 0 : _c.menuId) == (currentSecondMenu_1 === null || currentSecondMenu_1 === void 0 ? void 0 : currentSecondMenu_1.menuId)) &&
((_d = node.content) === null || _d === void 0 ? void 0 : _d.tabName) == child.props.tabName;
});
}
menuItems.push({
value: targetItem_1 ? 'cancel-collect' : 'collect',
label: targetItem_1 ? "取消收藏" : "加入收藏",
icon: "fa fa-star-o",
click: function (val) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
var keyList, menuStr, currentSecondMenu;
var _a, _b, _c, _d, _e;
return tslib_1.__generator(this, function (_f) {
switch (_f.label) {
case 0:
keyList = (_b = (_a = this.props).getTabsActiveKeys) === null || _b === void 0 ? void 0 : _b.call(_a);
//更改这个，因为第一项永远是激活项
keyList === null || keyList === void 0 ? void 0 : keyList.shift();
keyList === null || keyList === void 0 ? void 0 : keyList.unshift(child.props.tabName);
menuStr = sessionStorage.getItem('currentSecondMenu');
if (!menuStr) return [3 /*break*/, 2];
currentSecondMenu = JSON.parse(menuStr);
delete currentSecondMenu.favId;
return [4 /*yield*/, ((_e = (_d = (_c = this.props) === null || _c === void 0 ? void 0 : _c.env) === null || _d === void 0 ? void 0 : _d.handleCollect) === null || _e === void 0 ? void 0 : _e.call(_d, tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, currentSecondMenu), { collected: false }), (targetItem_1 ? tslib_1.__assign(tslib_1.__assign({}, targetItem_1.content), { favId: targetItem_1.favId, collected: true }) : {})), { isTab: true, tabName: child.props.tabName, keyList: keyList, title: child.props.title, tabKey: child.props.eventKey })))];
case 1:
_f.sent();
this.forceUpdate();
_f.label = 2;
case 2: return [2 /*return*/];
}
});
}); }
});
}
}
return (
// chencicsy 用于执行赋值name操作
react_1.default.createElement(index_1.default, { canOpenWin: true, openWin: function () { return _this.openWin(child); }, showItems: menuItems, env: (_d = this.props) === null || _d === void 0 ? void 0 : _d.env },
react_1.default.createElement("li", { className: cx('Tabs-link', activeKey === eventKey ? 'is-active' : '', disabled ? 'is-disabled' : '', tabClassName), key: eventKey !== null && eventKey !== void 0 ? eventKey : index, onClick: function () { return (disabled ? '' : _this.handleSelect(eventKey)); } },
react_1.default.createElement("a", null,
icon ? (iconPosition === 'right' ? (react_1.default.createElement(react_1.default.Fragment, null,
title,
" ",
iconElement)) : (react_1.default.createElement(react_1.default.Fragment, null,
iconElement,
" ",
title))) : (title),
react_1.default.isValidElement(toolbar) ? toolbar : null,
isTotalMode ? (((_e = tabsTotal[index]) === null || _e === void 0 ? void 0 : _e.totalNum) === '0' ? null : react_1.default.createElement("span", null,
"(",
((_f = tabsTotal[index]) === null || _f === void 0 ? void 0 : _f.totalNum) > 99 ? '99+' : (_g = tabsTotal[index]) === null || _g === void 0 ? void 0 : _g.totalNum,
")")) : null),
mode === 'chrome' ? (react_1.default.createElement("div", { className: "chrome-tab-background" },
react_1.default.createElement("svg", { viewBox: "0 0 124 124", className: "chrome-tab-background--right" },
react_1.default.createElement("path", { d: "M0,0 C0,68.483309 55.516691,124 124,124 L0,124 L0,-1 C0.00132103964,-0.667821298 0,-0.334064922 0,0 Z" })),
react_1.default.createElement("svg", { viewBox: "0 0 124 124", className: "chrome-tab-background--left" },
react_1.default.createElement("path", { d: "M124,0 L124,125 L0,125 L0,125 C68.483309,125 124,69.483309 124,1 L123.992,0 L124,0 Z" })))) : null)));
};
Tabs.prototype.renderTab = function (child, index) {
var _this = this;
var _a;
if (!child) {
return;
}
var _b = this.props, activeKeyProp = _b.activeKey, classnames = _b.classnames, mode = _b.mode, mountOnEnter = _b.mountOnEnter, notPrintFieldList = _b.notPrintFieldList;
var eventKey = child.props.eventKey;
var activeKey = activeKeyProp === undefined && index === 0 ? eventKey : activeKeyProp;
return react_1.default.cloneElement(child, tslib_1.__assign(tslib_1.__assign({}, child.props), { env: this.props.env, key: eventKey, totalTab: this.state.tabsTotal[index], setTotalNum: function (key, totalNum, tableName, statiStics) { var _a; if (!((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.isTotalMode))
return; _this.handleChangeTotal(key, totalNum, tableName, statiStics); }, classnames: classnames, activeKey: activeKey, mountOnEnter: mode === 'content-tiled' ? false : (_a = child.props) === null || _a === void 0 ? void 0 : _a.mountOnEnter, mode: mode, notPrintFieldList: notPrintFieldList }));
};
Tabs.prototype.renderArrow = function (type) {
var _this = this;
var _a = this.props, dMode = _a.mode, tabsMode = _a.tabsMode;
var mode = tabsMode || dMode;
if (mode === 'vertical') {
return;
}
var cx = this.props.classnames;
var _b = this.state, isOverflow = _b.isOverflow, arrowLeftDisabled = _b.arrowLeftDisabled, arrowRightDisabled = _b.arrowRightDisabled;
var disabled = type === 'left' ? arrowLeftDisabled : arrowRightDisabled;
return (isOverflow
? (react_1.default.createElement("div", { onClick: function () { return _this.handleArrow(type); }, className: cx('Tabs-linksContainer-arrow', 'Tabs-linksContainer-arrow--' + type, disabled && 'Tabs-linksContainer-arrow--disabled') },
react_1.default.createElement("i", { className: 'fa fa-chevron-' + type })))
: null);
};
Tabs.prototype.render = function () {
var _a;
var _this = this;
var _b = this.props, cx = _b.classnames, contentClassName = _b.contentClassName, className = _b.className, dMode = _b.mode, tabsMode = _b.tabsMode, children = _b.children, additionBtns = _b.additionBtns, toolbar = _b.toolbar, linksClassName = _b.linksClassName, scrollable = _b.scrollable, useMobileUI = _b.useMobileUI;
var isOverflow = this.state.isOverflow;
if (!Array.isArray(children)) {
return null;
}
var mode = tabsMode || dMode;
var mobileUI = (0, helper_1.isMobile)() && useMobileUI;
var filteredChildren = children.filter(Boolean);
var showList = filteredChildren.filter(function (_) {
var _a, _b, _c;
return (_c = (_b = (_a = _ === null || _ === void 0 ? void 0 : _.props) === null || _a === void 0 ? void 0 : _a.title) === null || _b === void 0 ? void 0 : _b.includes) === null || _c === void 0 ? void 0 : _c.call(_b, _this.state.tabsSearchQuery);
});
return (react_1.default.createElement("div", { className: cx("Tabs", (_a = {},
_a["Tabs--".concat(mode)] = mode,
_a), className), ref: this.tabsRef },
scrollable && !['vertical', 'chrome'].includes(mode) ? (react_1.default.createElement("div", { className: cx('Tabs-linksContainer', isOverflow && 'Tabs-linksContainer--overflow') },
!mobileUI && this.renderArrow('left'),
react_1.default.createElement("div", { className: cx('Tabs-linksContainer-main'), ref: this.navMain },
react_1.default.createElement("ul", { className: cx('Tabs-links', linksClassName), role: "tablist" },
filteredChildren.map(function (tab, index) { return _this.renderNav(tab, index); }),
additionBtns,
toolbar)),
!mobileUI && (react_1.default.createElement(react_1.default.Fragment, null,
this.renderMoreItems(),
this.renderArrow('right'))))) : (
//style={{ flex: this.state.showLinks ? 1 : undefined, display: this.state.showLinks == undefined ? undefined : this.state.showLinks ? 'flex' : 'none' }}
react_1.default.createElement("ul", { className: cx('Tabs-links', linksClassName), role: "tablist", ref: this.ulRef },
react_1.default.createElement("div", { className: cx('Tabs-links-befote') },
(mode === 'vertical' && filteredChildren.length > 5) ?
react_1.default.createElement("li", { className: cx('Tabs-links-input') },
react_1.default.createElement(antd_1.Input, { placeholder: '\u8BF7\u8F93\u5165\u5173\u952E\u5B57', type: 'search', allowClear: true, bordered: false, onChange: function (e) {
var value = e.target.value;
clearTimeout(_this.tabsSeachTimer);
_this.tabsSeachTimer = setTimeout(function () {
_this.setState({ tabsSearchQuery: value });
}, 500);
} })) : null,
showList.map(function (tab, index) { return _this.renderNav(tab, index); }),
!showList.length ? react_1.default.createElement("li", { style: {
textAlign: 'center',
fontSize: '13px',
padding: '20px'
} }, "\u8BE5\u5173\u952E\u8BCD\u6682\u65E0\u6570\u636E") : null,
additionBtns,
toolbar),
!(0, helper_1.isMobile)() && mode === 'vertical' && react_1.default.createElement("div", { onClick: function (e) {
e.stopPropagation();
_this.handleClickCollpase();
}, className: "tablinks-collpase ".concat(this.state.navVisible ? '' : 'closed') }, this.state.navVisible ? react_1.default.createElement("span", null,
react_1.default.createElement(icons_2.DoubleLeftOutlined, { style: { fontSize: '11px' } }),
"\u6536\u7F29") : react_1.default.createElement("span", null,
react_1.default.createElement(icons_2.DoubleRightOutlined, { style: { fontSize: '11px' } }),
"\u5C55\u5F00")),
!(0, helper_1.isMobile)() && mode === 'vertical' && react_1.default.createElement("span", { className: cx('Tabs--slider', { 'slider-closed': !this.state.navVisible }), ref: this.scrollRef, onMouseDown: this.handleMouseDown },
react_1.default.createElement("div", { className: cx('Tabs--sliders'), ref: this.scrollRefChildren })))),
react_1.default.createElement("div", { className: cx('Tabs-content', contentClassName), ref: this.tabContentRef }, filteredChildren.map(function (child, index) {
return _this.renderTab(child, index);
}))));
};
var _b;
Tabs.defaultProps = {
mode: '',
contentClassName: '',
isTotalMode: false
};
Tabs.Tab = exports.Tab;
tslib_1.__decorate([
helper_1.autobind,
tslib_1.__metadata("design:type", Function),
tslib_1.__metadata("design:paramtypes", [typeof (_b = typeof WheelEvent !== "undefined" && WheelEvent) === "function" ? _b : Object]),
tslib_1.__metadata("design:returntype", void 0)
], Tabs.prototype, "handleWheel", null);
return Tabs;
}(react_1.default.Component));
exports.Tabs = Tabs;
var ThemedTabs = (0, theme_1.themeable)((0, uncontrollable_1.uncontrollable)(Tabs, {
activeKey: 'onSelect'
}));
exports.default = ThemedTabs;
//# sourceMappingURL=./components/Tabs.js.map