tntd
Version:
tntd是基于 TNT Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。
124 lines (122 loc) • 6.45 kB
JavaScript
;
function _typeof(o) {
"@babel/helpers - typeof";
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
return typeof o;
} : function (o) {
return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
}, _typeof(o);
}
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _react = _interopRequireWildcard(require("react"));
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _tntdIcon = _interopRequireDefault(require("../tntd-icon"));
var _HeaderActions = _interopRequireDefault(require("./HeaderActions"));
var _AppList = _interopRequireDefault(require("./AppList"));
var _OrgAppList = _interopRequireDefault(require("./OrgAppList"));
var _templateObject, _templateObject2;
/**
* @file Layout header
* @author zhangyou
*/
function _interopRequireDefault(e) {
return e && e.__esModule ? e : {
"default": e
};
}
function _getRequireWildcardCache(e) {
if ("function" != typeof WeakMap) return null;
var r = new WeakMap(),
t = new WeakMap();
return (_getRequireWildcardCache = function _getRequireWildcardCache(e) {
return e ? t : r;
})(e);
}
function _interopRequireWildcard(e, r) {
if (!r && e && e.__esModule) return e;
if (null === e || "object" != _typeof(e) && "function" != typeof e) return {
"default": e
};
var t = _getRequireWildcardCache(r);
if (t && t.has(e)) return t.get(e);
var n = {
__proto__: null
},
a = Object.defineProperty && Object.getOwnPropertyDescriptor;
for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) {
var i = a ? Object.getOwnPropertyDescriptor(e, u) : null;
i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u];
}
return n["default"] = e, t && t.set(e, n), n;
}
function _taggedTemplateLiteral(e, t) {
return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, {
raw: {
value: Object.freeze(t)
}
}));
}
var Header = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: relative;\n z-index: 201;\n height: ", ";\n display: flex;\n color: rgba(255, 255, 255, 0.85);\n background: #fff;\n .hasHeaderTabs & {\n // background: #191D29;\n background: #fff !important;\n box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.18);\n .tnt-layout-header-content {\n display: none;\n }\n }\n\n // .tnt-themeS3.hasHeaderTabs &{\n // background: ", "; //#1D4295 !important;\n // }\n\n .isInIframe.noAppList &,\n .isEmptyLayout & {\n display: none;\n }\n .tnt-themeS1 & {\n background: #ffffff;\n box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.15);\n }\n .tnt-themeS1.compatible & {\n /* background: #323b4a; */\n }\n padding-right: 20px;\n background: #ffffff;\n box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1);\n .compatible & {\n box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1);\n }\n transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),\n -webkit-box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n\n .sidebar-collapsed-controller {\n text-align: center;\n width: ", ";\n line-height: ", ";\n height: ", ";\n cursor: pointer;\n color: ", ";\n margin-right: 10px;\n\n & > .tnt-icon {\n font-size: 16px;\n .large-size & {\n font-size: 20px;\n }\n }\n\n i {\n position: relative;\n top: -1px;\n vertical-align: sub;\n }\n\n &:hover {\n background-color: rgba(0, 0, 0, 0.06);\n }\n\n .tnt-themeS1 & {\n /* color: rgba(255,255,255,.85); */\n color: ", ";\n }\n .large-size & {\n font-size: 18px;\n }\n .isInIframe & {\n display: none;\n }\n }\n"])), function (props) {
return "".concat(props.theme.headerHeight, "px");
}, function (props) {
return "".concat(props.theme.blueBgColor, " !important");
}, function (props) {
return "".concat(props.theme.headerHeight, "px");
}, function (props) {
return "".concat(props.theme.headerHeight, "px");
}, function (props) {
return "".concat(props.theme.headerHeight, "px");
}, function (props) {
return "".concat(props.theme.primaryTextColor);
}, function (props) {
return "".concat(props.theme.primaryTextColor);
});
var Content = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n flex: 1;\n .isInIframe & {\n display: none;\n }\n"])));
var _default = exports["default"] = (0, _styledComponents.withTheme)(function (props) {
var collapsed = props.collapsed,
_props$collapseIconPl = props.collapseIconPlacement,
collapseIconPlacement = _props$collapseIconPl === void 0 ? 'right' : _props$collapseIconPl,
selectedAppKey = props.selectedAppKey,
appList = props.appList,
orgAppShow = props.orgAppShow,
orgAppList = props.orgAppList,
orgTreeConfig = props.orgTreeConfig,
selectedOrgKey = props.selectedOrgKey,
orgList = props.orgList,
headerTabs = props.headerTabs,
onAppChange = props.onAppChange,
onOrgChange = props.onOrgChange,
onCollapseChange = props.onCollapseChange,
extraActions = props.extraActions;
var headerRef = (0, _react.useRef)();
return _react["default"].createElement(Header, {
className: "tnt-layout-header",
ref: headerRef
}, collapseIconPlacement === 'right' && _react["default"].createElement("div", {
className: "sidebar-collapsed-controller",
onClick: onCollapseChange
}, _react["default"].createElement(_tntdIcon["default"], {
type: "menu-".concat(collapsed ? 'unfold' : 'fold')
})), headerTabs, orgList && _react["default"].createElement(_OrgAppList["default"], {
orgAppShow: orgAppShow,
selectedOrgKey: selectedOrgKey,
orgList: orgList,
selectedAppKey: selectedAppKey,
onOrgChange: onOrgChange,
orgTreeConfig: orgTreeConfig,
orgAppList: orgAppList,
onAppChange: onAppChange,
headerTabs: headerTabs
}), appList && !orgList && _react["default"].createElement(_AppList["default"], {
items: appList,
selectedKey: selectedAppKey,
onChange: onAppChange
}), _react["default"].createElement(Content, {
className: "tnt-layout-header-content"
}, props.children), _react["default"].createElement(_HeaderActions["default"], Object.assign({}, props, {
headerRef: headerRef
}), extraActions));
});