@braineet/ui
Version:
Braineet design system
91 lines (90 loc) • 3.75 kB
JavaScript
var _excluded = ["theme", "children", "user", "onClickCard", "size", "ellipsis", "boxLeftStyle"];
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 _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; }
import React from 'react';
import { withTheme } from 'styled-components';
import Avatar from '../avatar';
import { StyledBox, StyledBoxLeft, StyledBoxRight, StyledBoxInfo, StyledName, TextInfo, StyledInfoBox, StyledInfo, StyledDot } from './styles';
/**
The `CardUserRow` component.
*/
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
export var CardUserRow = function CardUserRow(_ref) {
var _user$icon, _user$icon2;
var theme = _ref.theme,
children = _ref.children,
user = _ref.user,
onClickCard = _ref.onClickCard,
size = _ref.size,
ellipsis = _ref.ellipsis,
boxLeftStyle = _ref.boxLeftStyle,
restProps = _objectWithoutPropertiesLoose(_ref, _excluded);
var infos = [{
title: user && user.jobtitle,
hasDot: user && !!user.jobtitle,
key: 1
}, {
title: user && user.email,
hasDot: user && !!user.phone,
key: 2
}, {
title: user && user.phone,
hasDot: false,
key: 3
}];
var handleMouseDown = function handleMouseDown(e) {
e.preventDefault();
if (restProps.onMouseDown) {
restProps.onMouseDown(e);
}
};
return /*#__PURE__*/_jsxs(StyledBox, _extends({
onClick: onClickCard,
onMouseDown: handleMouseDown,
hasClickCard: children && !children.length
}, restProps, {
children: [/*#__PURE__*/_jsxs(StyledBoxLeft, _extends({
ellipsis: ellipsis
}, boxLeftStyle, {
children: [/*#__PURE__*/_jsx(Avatar, {
src: user.photo,
name: user && user.fullname ? user.fullname : user && user.email,
iconName: (user == null ? void 0 : (_user$icon = user.icon) == null ? void 0 : _user$icon.name) || null,
iconColor: (user == null ? void 0 : (_user$icon2 = user.icon) == null ? void 0 : _user$icon2.color) || null,
size: "md"
}), /*#__PURE__*/_jsxs(StyledBoxInfo, {
ellipsis: ellipsis,
children: [/*#__PURE__*/_jsx(StyledName, {
ellipsis: ellipsis,
size: size === 'medium' ? 'md' : 'xs',
children: user && user.fullname ? user.fullname : user && user.email
}), /*#__PURE__*/_jsx(StyledInfoBox, {
ellipsis: ellipsis,
children: infos.map(function (info) {
return /*#__PURE__*/_jsxs(StyledInfo, {
ellipsis: ellipsis,
children: [/*#__PURE__*/_jsx(TextInfo, {
size: "sm",
ellipsis: ellipsis,
color: size === 'medium' ? theme.colors.black : theme.utils.lighten('black', 0.8),
children: info && info.title
}), info && info.hasDot && /*#__PURE__*/_jsx(StyledDot, {})]
}, info.key);
})
})]
})]
})), /*#__PURE__*/_jsx(StyledBoxRight, {
children: children
})]
}));
};
CardUserRow.defaultProps = {
children: null,
theme: {},
boxLeftStyle: {},
size: 'medium',
ellipsis: false,
onClickCard: function onClickCard() {}
};
export default withTheme(CardUserRow);