jobiqo-cl
Version:
[](https://circleci.com/gh/jobiqo/jobiqo-cl)
72 lines (69 loc) • 4.69 kB
JavaScript
import React__default, { useRef, useState } from 'react';
import { MapMarkerIcon } from '../../../../icons/MapMarker.js';
import { OfficeIcon } from '../../../../icons/Office.js';
import { TagsIcon } from '../../../../icons/Tags.js';
import { useIntersectionObserver } from '../../../../hooks/useIntersectionObserver.js';
import { JobDetailWrapper, DetailInfo, PictureWrapper, JobLogo, CardTitleWrapper, CardTitle, JobInfo, JobInfoItem, JobIcon, CardOcccupations, EditWrapp, JobActions, ShrinkedHeader, ShrinkedCardTitle, ShrinkedCardCompanyName, FlexSpace, ShrinkedHeaderActions, DetailDescription } from './styles.js';
/**
* @file index.test.tsx
*
* @fileoverview The JobDetail component.
*/
/**
* The job detail presents information about a job when
* the user clicks on a job in the search to visit it.
*/
const JobDetail = ({ picture, title, company, location, occupation, children, edit, actions, titleElement = 'h1', fullContainer = false }) => {
const root = useRef(); // We need a ref to our "root" or our parent,
const target = useRef(); // We need a ref to our "target" or our child-to-watch,
// Let's use a bit of state.
const [isInfoVisible, setInfoVisible] = useState(false);
// Here's our hook! Let's give it some configuration...
useIntersectionObserver({
root,
target,
threshold: 0,
// What do we do when it intersects?
// The signature of this callback is (collectionOfIntersections, observerElement).
onIntersect: ([{ isIntersecting }]) => setInfoVisible(isIntersecting)
});
const TitleElement = titleElement;
return (React__default.createElement(React__default.Fragment, null,
React__default.createElement(JobDetailWrapper, { fullContainer: fullContainer, "data-testid": "job-detail-wrapper" },
React__default.createElement(DetailInfo, { ref: target, "data-testid": "job-detail-info" },
picture && (React__default.createElement(PictureWrapper, null,
React__default.createElement(JobLogo, { src: picture.url, alt: picture.title, title: picture.title }))),
React__default.createElement("div", null,
React__default.createElement(CardTitleWrapper, null,
React__default.createElement(TitleElement, null,
React__default.createElement(CardTitle, null, title))),
React__default.createElement(JobInfo, null,
company && (React__default.createElement(JobInfoItem, null,
React__default.createElement(JobIcon, null,
React__default.createElement(OfficeIcon, { color: "secondary", title: "company" })),
company)),
location && (React__default.createElement(JobInfoItem, null,
React__default.createElement(JobIcon, null,
React__default.createElement(MapMarkerIcon, { color: "secondary", title: "location" })),
location))),
occupation && (React__default.createElement(CardOcccupations, null,
React__default.createElement(JobIcon, null,
React__default.createElement(TagsIcon, { color: "secondary", title: "location" })),
' ',
occupation))),
edit && React__default.createElement(EditWrapp, null, edit),
actions && React__default.createElement(JobActions, null, actions)),
!isInfoVisible && (React__default.createElement(ShrinkedHeader, null,
picture && (React__default.createElement("div", null,
React__default.createElement(JobLogo, { src: picture.url, alt: picture.title, title: picture.title }))),
React__default.createElement("div", null,
React__default.createElement(ShrinkedCardTitle, null, title),
React__default.createElement(ShrinkedCardCompanyName, null,
React__default.createElement(JobIcon, null,
React__default.createElement(OfficeIcon, { color: "secondary", title: "company" })),
company)),
React__default.createElement(FlexSpace, null),
React__default.createElement(ShrinkedHeaderActions, null, actions))),
children && (React__default.createElement(DetailDescription, { "data-testid": "job-detail-description" }, children)))));
};
export { JobDetail };