tntd
Version:
tntd是基于 TNT Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。
162 lines (160 loc) • 8.2 kB
JavaScript
"use strict";
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 _get2 = _interopRequireDefault(require("lodash/get"));
var _react = _interopRequireWildcard(require("react"));
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _images = _interopRequireDefault(require("../images"));
var _ActionsContext = _interopRequireDefault(require("../ActionsContext"));
var _Language = _interopRequireDefault(require("./Language"));
var _Theme = _interopRequireDefault(require("./Theme"));
var _storage = require("../storage");
var _divider = _interopRequireDefault(require("../../divider"));
var _popover = _interopRequireDefault(require("../../popover"));
var _row = _interopRequireDefault(require("../../row"));
var _templateObject, _templateObject2, _templateObject3;
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 _interopRequireDefault(e) {
return e && e.__esModule ? e : {
"default": e
};
}
function _taggedTemplateLiteral(e, t) {
return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, {
raw: {
value: Object.freeze(t)
}
}));
}
var Avatar = _styledComponents["default"].li(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n margin-right: 0;\n font-size: 0;\n img {\n width: 26px;\n height: 26px;\n border-radius: 50%;\n cursor: pointer;\n .large-size & {\n width: 32px;\n height: 32px;\n }\n }\n"])));
var GlobalStyle = (0, _styledComponents.createGlobalStyle)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n .tnt-layout-personal-popover {\n .ant-popover-inner-content {\n padding: 0;\n }\n }\n"])));
var UserInfoWrapper = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n width: 330px;\n z-index: 1;\n background-color: #fff;\n border-radius: 4px;\n box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);\n .isInIframe & {\n display: none;\n }\n\n .user-info-body {\n padding: 20px 15px;\n line-height: 16px;\n list-style: none;\n margin: 0;\n .user-info-body-username {\n margin-top: 0px;\n font-family: PingFangSC-Regular;\n font-weight: normal;\n font-size: 14px;\n color: ", ";\n line-height: 14px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .user-info-body-account {\n margin-top: 0px;\n font-family: PingFangSC-Regular;\n font-size: 12px;\n color: #8b919e;\n margin-bottom: 14px;\n line-height: 14px;\n margin-left: 10px;\n }\n }\n .user-info-footer {\n border-top: ", ";\n background-color: #fff;\n height: 36px;\n line-height: 36px;\n padding: 0 15px;\n font-size: 12px;\n color: ", ";\n a {\n flex: 1;\n text-align: center;\n color: ", ";\n }\n }\n"])), function (props) {
return "".concat(props.theme.primaryTextColor);
}, function (props) {
return "1px solid ".concat(props.theme.dividerColor);
}, function (props) {
return "".concat(props.theme.primaryColor);
}, function (props) {
return "".concat(props.theme.primaryColor);
});
var UserInfoContent = function UserInfoContent(props) {
var userInfo = props.userInfo,
_props$config = props.config,
config = _props$config === void 0 ? {} : _props$config,
onLogout = props.onLogout,
_props$onChangePasswo = props.onChangePassword,
onChangePassword = _props$onChangePasswo === void 0 ? function () {
return true;
} : _props$onChangePasswo,
_props$onPersonalSett = props.onPersonalSetting,
onPersonalSetting = _props$onPersonalSett === void 0 ? function () {
return true;
} : _props$onPersonalSett,
onLanguageChange = props.onLanguageChange,
onThemeChange = props.onThemeChange;
var _useContext = (0, _react.useContext)(_ActionsContext["default"]),
getText = _useContext.getText;
var _ref = config || {},
_ref$language = _ref.language,
language = _ref$language === void 0 ? true : _ref$language;
return _react["default"].createElement(UserInfoWrapper, {
className: "user-info-setting-wrap"
}, _react["default"].createElement("ul", {
className: "user-info-body"
}, _react["default"].createElement("li", {
className: "user-info-body-username"
}, userInfo.userName || getText('nameNull'), _react["default"].createElement("span", {
className: "user-info-body-account"
}, userInfo.account)), language && _react["default"].createElement(_Language["default"], {
language: userInfo.lang,
onChange: onLanguageChange
}), _react["default"].createElement(_Theme["default"], {
theme: userInfo.theme,
onChange: onThemeChange
})), _react["default"].createElement(_row["default"], {
className: "user-info-footer",
type: "flex",
justify: "space-between",
align: "middle"
}, _react["default"].createElement("a", {
onClick: onPersonalSetting,
href: "/bridge/userCenter?currentTab=1"
}, getText('personalSettings')), _react["default"].createElement(_divider["default"], {
type: "vertical"
}), _react["default"].createElement("a", {
onClick: onChangePassword,
href: "/bridge/userCenter?currentTab=2",
style: (0, _storage.getLanguageStore)() === 'en' ? {
flex: 2
} : {}
}, getText('changePwd')), _react["default"].createElement(_divider["default"], {
type: "vertical"
}), _react["default"].createElement("a", {
className: "user-info-footer-signout",
onClick: function onClick() {
if (onLogout) {
onLogout();
(0, _storage.clearLoginCookie)();
} else {
(0, _storage.clearLoginCookie)();
window.location.href = "/user/login?callbackUrl=".concat(window.encodeURI(location.href));
}
}
}, getText('signOut'))));
};
var _default = exports["default"] = function _default(props) {
var _a;
var _props$userInfo = props.userInfo,
userInfo = _props$userInfo === void 0 ? {} : _props$userInfo;
var avatar = userInfo.avatar;
return _react["default"].createElement(Avatar, null, _react["default"].createElement(_popover["default"], {
popupClassName: "tnt-layout-personal-popover",
placement: "bottomRight",
title: null,
content: _react["default"].createElement(UserInfoContent, Object.assign({}, props)),
trigger: "click"
}, avatar ? _react["default"].createElement("img", {
src: avatar.indexOf('base64') > 0 ? avatar : (0, _get2["default"])(_images["default"][avatar], 'default', _images["default"][avatar]),
onError: function onError(e) {
var _a;
e.target.onerror = null;
e.target.src = ((_a = _images["default"].empty) === null || _a === void 0 ? void 0 : _a["default"]) || _images["default"].empty;
}
}) : _react["default"].createElement("img", {
src: ((_a = _images["default"].empty) === null || _a === void 0 ? void 0 : _a["default"]) || _images["default"].empty
})), _react["default"].createElement(GlobalStyle, null));
};