@krowdy-ui/views
Version:
React components that implement Google's Material Design.
310 lines (293 loc) • 10.8 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import { Button, IconButton, Typography } from '@krowdy-ui/core';
import { Skeleton } from '@material-ui/lab';
import { AvatarUser } from '@krowdy-ui/views';
import { withStyles } from '@krowdy-ui/styles';
import { Assignment as AssignmentIcon, Public as PublicIcon, LinkedIn as LinkedInIcon, Delete as DeleteIcon } from '@material-ui/icons';
import CardExperiencie from './CardExperiencie';
import CardEducation from './CardEducation';
import CardEspecialization from './CardEspecialization';
import CardKnowledge from './CardKnowledge';
var _ref2 = /*#__PURE__*/React.createElement(Skeleton, {
width: 50
});
var _ref3 = /*#__PURE__*/React.createElement(Skeleton, {
width: 68
});
var _ref4 = /*#__PURE__*/React.createElement(DeleteIcon, {
fontSize: "small"
});
var _ref5 = /*#__PURE__*/React.createElement(Skeleton, {
animation: "wave",
variant: "text",
width: 200
});
var _ref6 = /*#__PURE__*/React.createElement(Skeleton, {
animation: "wave",
variant: "text",
width: 200
});
var _ref7 = /*#__PURE__*/React.createElement(Skeleton, {
animation: "wave",
height: 64,
variant: "circle",
width: 64
});
var _ref8 = /*#__PURE__*/React.createElement(AssignmentIcon, null);
var _ref9 = /*#__PURE__*/React.createElement(LinkedInIcon, {
fontSize: "small"
});
var _ref10 = /*#__PURE__*/React.createElement(PublicIcon, {
fontSize: "small"
});
var _ref11 = /*#__PURE__*/React.createElement(Typography, {
align: "center",
color: "secondary",
variant: "h4"
}, "Experiencia");
var _ref13 = /*#__PURE__*/React.createElement(Typography, {
align: "center",
color: "secondary",
variant: "h4"
}, "Educaci\xF3n");
var _ref15 = /*#__PURE__*/React.createElement(Typography, {
align: "center",
color: "secondary",
variant: "h4"
}, "Especializaci\xF3n");
var _ref17 = /*#__PURE__*/React.createElement(Typography, {
align: "center",
color: "secondary",
variant: "h4"
}, "Conocimientos");
var Profile = function Profile(_ref) {
var classes = _ref.classes,
candidate = _ref.candidate,
onClickDeleteCandidate = _ref.onClickDeleteCandidate,
onClickPreviewCV = _ref.onClickPreviewCV,
disableSubHeaderTitle = _ref.disableSubHeaderTitle,
basic = _ref.basic,
status = _ref.status;
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
className: classes.drawerSubHeaderContent
}, !disableSubHeaderTitle ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
className: classes.drawerSubHeaderTitle
}, /*#__PURE__*/React.createElement(Typography, {
variant: "h6"
}, candidate ? candidate.nameTask : _ref2), /*#__PURE__*/React.createElement(Typography, {
variant: "info2"
}, candidate ? status : _ref3)), /*#__PURE__*/React.createElement("div", null, onClickDeleteCandidate ? /*#__PURE__*/React.createElement(IconButton, {
color: "primary",
onClick: onClickDeleteCandidate,
size: "small"
}, _ref4) : null)) : null), /*#__PURE__*/React.createElement("div", {
className: classes.userHeader
}, /*#__PURE__*/React.createElement("div", {
className: classes.userHeaderTitles
}, /*#__PURE__*/React.createElement(Typography, {
className: classes.userName,
variant: "h4"
}, candidate ? "".concat(candidate.firstName, " ").concat(candidate.lastName) : _ref5), /*#__PURE__*/React.createElement(Typography, null, basic ? null : candidate ? "".concat(candidate.email || '', " ").concat(candidate.email && candidate.phone ? '•' : '', " ").concat(candidate.phone || '') : _ref6)), /*#__PURE__*/React.createElement("div", {
className: classes.userAvatarContent
}, candidate ? /*#__PURE__*/React.createElement(AvatarUser, {
classes: {
defaultAvatar: classes.userDefaultAvatar,
imageDefault: classes.userDefaultAvatar
},
user: {
firstName: candidate.firstName,
lastName: candidate.lastName,
photo: candidate.photo
}
}) : _ref7)), /*#__PURE__*/React.createElement("div", {
className: classes.actionsContent
}, !basic ? /*#__PURE__*/React.createElement(React.Fragment, null, onClickPreviewCV ? /*#__PURE__*/React.createElement(Button, {
color: "primary",
disabled: !(candidate && candidate.curriculum),
onClick: onClickPreviewCV,
startIcon: _ref8
}, "Ver CV") : null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(IconButton, {
color: "primary",
component: "a",
disabled: !(candidate && candidate.linkedin),
href: candidate && candidate.linkedin ? candidate.linkedin : '#',
size: "small",
target: "_blank"
}, _ref9), /*#__PURE__*/React.createElement(IconButton, {
color: "primary",
component: "a",
disabled: !(candidate && candidate.website),
href: candidate && candidate.website ? candidate.website : '#',
size: "small",
target: "_blank"
}, _ref10))) : null), /*#__PURE__*/React.createElement("div", {
className: classes.userContent
}, candidate ? /*#__PURE__*/React.createElement(React.Fragment, null, candidate.experience && candidate.experience.length ? /*#__PURE__*/React.createElement(React.Fragment, null, _ref11, candidate.experience.map(function (_ref12, index) {
var area = _ref12.area,
description = _ref12.description,
companyName = _ref12.companyName,
hierarchy = _ref12.hierarchy,
jobPosition = _ref12.jobPosition,
endDate = _ref12.endDate,
location = _ref12.location,
startDate = _ref12.startDate,
workHere = _ref12.workHere;
return /*#__PURE__*/React.createElement(CardExperiencie, {
area: area,
companyName: companyName,
description: description,
endDate: endDate,
hierarchy: hierarchy,
jobPosition: jobPosition,
key: "experiencie-".concat(index),
location: location,
startDate: startDate,
workHere: workHere
});
})) : null, candidate.education && candidate.education.length ? /*#__PURE__*/React.createElement(React.Fragment, null, _ref13, candidate.education.map(function (_ref14, index) {
var _ref14$condition = _ref14.condition,
condition = _ref14$condition === void 0 ? '' : _ref14$condition,
_ref14$description = _ref14.description,
description = _ref14$description === void 0 ? '' : _ref14$description,
institutionName = _ref14.institutionName,
career = _ref14.career,
endDate = _ref14.endDate,
degree = _ref14.degree,
startDate = _ref14.startDate,
studyingHere = _ref14.studyingHere;
return /*#__PURE__*/React.createElement(CardEducation, {
career: career,
condition: condition,
degree: degree,
description: description,
endDate: endDate,
institutionName: institutionName,
key: "education-".concat(index),
startDate: startDate,
studyingHere: studyingHere
});
})) : null, candidate.especialization && candidate.especialization.length ? /*#__PURE__*/React.createElement(React.Fragment, null, _ref15, candidate.especialization.map(function (_ref16, index) {
var especializationName = _ref16.especializationName,
especializationPlace = _ref16.especializationPlace,
endDate = _ref16.endDate,
startDate = _ref16.startDate,
studyingHere = _ref16.studyingHere,
description = _ref16.description;
return /*#__PURE__*/React.createElement(CardEspecialization, {
description: description,
endDate: endDate,
especializationName: especializationName,
especializationPlace: especializationPlace,
key: "especialization-".concat(index),
startDate: startDate,
studyingHere: studyingHere
});
})) : null, candidate.knowledge && candidate.knowledge.length ? /*#__PURE__*/React.createElement(React.Fragment, null, _ref17, candidate.knowledge.map(function (_ref18, index) {
var knowledgeName = _ref18.knowledgeName,
level = _ref18.level;
return /*#__PURE__*/React.createElement(CardKnowledge, {
key: "knowledge-".concat(index),
knowledgeName: knowledgeName,
level: level
});
})) : null) : null));
};
process.env.NODE_ENV !== "production" ? Profile.propTypes = {
basic: PropTypes.bool,
candidate: PropTypes.object,
classes: PropTypes.shape({
actionsContent: PropTypes.string,
drawerHeaderContent: PropTypes.string,
drawerSubHeaderContent: PropTypes.string,
drawerSubHeaderTitle: PropTypes.string,
leaveContent: PropTypes.string,
leaveContentTitle: PropTypes.string,
userAvatarContent: PropTypes.string,
userContent: PropTypes.string,
userDefaultAvatar: PropTypes.string,
userHeader: PropTypes.string,
userHeaderTitles: PropTypes.string,
userName: PropTypes.string
}),
disableSubHeaderTitle: PropTypes.bool,
onClickDeleteCandidate: PropTypes.func,
onClickPreviewCV: PropTypes.func,
status: PropTypes.string
} : void 0;
var styles = function styles(_ref19) {
var palette = _ref19.palette,
spacing = _ref19.spacing,
shadows = _ref19.shadows;
return {
actionsContent: {
display: 'flex',
justifyContent: 'space-between',
padding: spacing(1.5)
},
drawerHeaderContent: {
alignItems: 'center',
backgroundColor: palette.secondary[10],
boxShadow: shadows[1],
// `inset 0px -1px 0px ${palette.getContrastText('#E8E8E8')}`,
display: 'flex',
justifyContent: 'space-between',
padding: spacing(0.5, 1.5)
},
drawerSubHeaderContent: {
alignItems: 'center',
display: 'flex',
justifyContent: 'space-between',
padding: spacing(0.5, 1.5)
},
drawerSubHeaderTitle: {
'& > p': {
marginLeft: spacing(1.5)
},
display: 'flex'
},
leaveContent: {
maxWidth: 330,
padding: spacing(2.5)
},
leaveContentTitle: {
alignItems: 'center',
display: 'flex',
marginBottom: spacing(1)
},
userAvatarContent: {
bottom: 0,
display: 'flex',
left: '50%',
position: 'absolute',
transform: 'translate(-50%, 50%)'
},
userContent: {
overflow: 'auto',
padding: spacing(0, 1.5, 1.5, 1.5)
},
userDefaultAvatar: {
borderColor: 'white',
color: palette.grey[600],
height: 64,
width: 64
},
userHeader: {
backgroundColor: palette.secondary[600],
display: 'flex',
height: 110,
justifyContent: 'center',
position: 'relative'
},
userHeaderTitles: {
color: 'white',
textAlign: 'center'
},
userName: {
marginTop: 20
}
};
};
export default withStyles(styles, {
name: 'ProfileCandidate'
})(Profile);