calcite-react
Version:
Calcite components for React
212 lines (172 loc) • 9.5 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _styledComponents = require("styled-components");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _AccountTileStyled = require("./AccountTile-styled");
var _Avatar = _interopRequireDefault(require("../Avatar"));
var _Tooltip = _interopRequireDefault(require("../Tooltip"));
var _Menu = _interopRequireWildcard(require("../Menu"));
var _Popover = _interopRequireDefault(require("../Popover"));
var _CheckCircleIcon = _interopRequireDefault(require("calcite-ui-icons-react/CheckCircleIcon"));
var _ExclamationMarkTriangleIcon = _interopRequireDefault(require("calcite-ui-icons-react/ExclamationMarkTriangleIcon"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
var AccountTile = function AccountTile(_ref) {
var actions = _ref.actions,
user = _ref.user,
isAuthenticated = _ref.isAuthenticated,
orgName = _ref.orgName,
userThumbnail = _ref.userThumbnail,
orgThumbnail = _ref.orgThumbnail,
width = _ref.width,
expiredText = _ref.expiredText,
authenticatedText = _ref.authenticatedText,
clickable = _ref.clickable,
hideAuthentication = _ref.hideAuthentication,
other = _objectWithoutProperties(_ref, ["actions", "user", "isAuthenticated", "orgName", "userThumbnail", "orgThumbnail", "width", "expiredText", "authenticatedText", "clickable", "hideAuthentication"]);
var _useState = (0, _react.useState)(false),
_useState2 = _slicedToArray(_useState, 2),
isOpen = _useState2[0],
setIsOpen = _useState2[1];
var themeContext = (0, _react.useContext)(_styledComponents.ThemeContext);
user.fullName = user.fullName || "".concat(user.firstName, " ").concat(user.lastName);
var close = function close() {
isOpen && setIsOpen(false);
};
var toggleIsOpen = function toggleIsOpen(event) {
if (event.key === 'Enter' || event.key == null) {
setIsOpen(!isOpen);
}
};
var menuItemHandler = function menuItemHandler(func) {
var event = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
if (event && event.key) {
if (event.key === 'Enter') {
func();
} else {
return;
}
} else {
func();
}
setIsOpen(!isOpen);
};
var menuItems = actions.map(function (item) {
return _react.default.createElement(_Menu.MenuItem, {
key: item.label,
tabIndex: "0",
onClick: function onClick() {
menuItemHandler(item.onClick);
},
onKeyPress: function onKeyPress(event) {
menuItemHandler(item.onClick, event);
}
}, item.label);
});
return _react.default.createElement(_Popover.default, {
open: isOpen,
onRequestClose: close,
targetContainerStyles: {
width: width,
display: 'block'
},
placement: "bottom-end",
targetEl: // ---------- Account Tile ----------
_react.default.createElement(_AccountTileStyled.StyledAccountTile, _extends({
open: isOpen,
clickable: clickable
}, clickable && {
onClick: toggleIsOpen,
onKeyPress: toggleIsOpen,
tabIndex: 0
}, other), _react.default.createElement(_AccountTileStyled.StyledContentWrapper, null, _react.default.createElement(_AccountTileStyled.StyledAvatarContainer, null, _react.default.createElement(_Avatar.default, {
src: userThumbnail.url,
size: 60
}, !userThumbnail.url && userThumbnail.letters), orgName && orgThumbnail && _react.default.createElement(_AccountTileStyled.StyledOrgAvatar, {
src: orgThumbnail.url,
size: 30
}, !orgThumbnail.url && orgThumbnail.letters)), _react.default.createElement(_AccountTileStyled.StyledTextWrapper, null, orgName && _react.default.createElement(_AccountTileStyled.StyledP, {
title: orgName,
demi: true
}, orgName), _react.default.createElement(_AccountTileStyled.StyledP, {
title: user.fullName
}, user.fullName), _react.default.createElement(_AccountTileStyled.StyledP, {
title: user.username,
small: true
}, user.username))), _react.default.createElement(_AccountTileStyled.StyledIconWrapper, null, !hideAuthentication && _react.default.createElement(_Tooltip.default, {
title: isAuthenticated ? authenticatedText : expiredText,
placement: "top",
targetWrapperStyle: {
alignItems: 'center',
display: 'flex'
}
}, isAuthenticated ? _react.default.createElement(_CheckCircleIcon.default, {
color: themeContext.palette.green,
size: 16,
alt: authenticatedText
}) : _react.default.createElement(_ExclamationMarkTriangleIcon.default, {
color: themeContext.palette.darkGray,
size: 16,
alt: expiredText
})), clickable && actions.length !== 0 && _react.default.createElement(_AccountTileStyled.StyledHandleVerticalIcon, {
scale: 16,
marginLeft: !hideAuthentication
})))
}, _react.default.createElement(_Menu.default, null, actions.length !== 0 && menuItems));
};
AccountTile.propTypes = {
/** Actions to be included in the dropdown. Each action should describe a label and an onClick method. */
actions: _propTypes.default.arrayOf(_propTypes.default.shape({
label: _propTypes.default.string,
onClick: _propTypes.default.func
})),
/** The ArcGIS user object.*/
user: _propTypes.default.object.isRequired,
/** Is the user currently logged in or has their authentication expired? */
isAuthenticated: _propTypes.default.bool,
/** Name of the user's organization. */
orgName: _propTypes.default.string,
/** Style prop to define the width of the tile.*/
width: _propTypes.default.string,
/** Text to show when the account is authenticated.*/
authenticatedText: _propTypes.default.string,
/** Text to show when the account has expired (is not authenticated).*/
expiredText: _propTypes.default.string,
/** Object containing thumbnail url and fallback letters for the avatar. If url is falsy, the avatar will show letters instead.*/
userThumbnail: _propTypes.default.shape({
url: _propTypes.default.string,
letters: _propTypes.default.string
}).isRequired,
/** Object containing thumbnail url and fallback letters for the avatar. If url is falsy, the avatar will show letters instead. If orgThumbnail or orgName are not given, no org avatar will be shown.*/
orgThumbnail: _propTypes.default.shape({
url: _propTypes.default.string,
letters: _propTypes.default.string
}),
/** Can the time be clicked (false will disable hover effects and pointer events) */
clickable: _propTypes.default.bool,
/** Should the account tile authentication be hidden */
hideAuthentication: _propTypes.default.bool
};
AccountTile.defaultProps = {
actions: [],
isAuthenticated: false,
width: '100%',
authenticatedText: 'Signed in',
expiredText: 'Session expired',
clickable: true,
hideAuthentication: false
};
AccountTile.displayName = 'AccountTile';
var _default = AccountTile;
exports.default = _default;