All files / web/modules/article/list ListItem.tsx

96.3% Statements 26/27
87.5% Branches 14/16
66.67% Functions 2/3
100% Lines 21/21

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 1012x   2x 2x 2x 2x   2x 2x 2x   2x         2x                 2x 2x                   2x             2x                 2x                               2x 1x 1x   1x   1x                                                 2x  
import Icon from 'antd/lib/icon';
import { Push } from 'connected-react-router';
import * as moment from 'moment';
import * as React from 'react';
import * as striptags from 'striptags';
import styled from 'styled-components';
import { IArticle } from '../../../../shared';
import { useBoolean } from '../../../customHooks';
import withRouter from '../../hoc/withRouter';
import { getArticlePath } from '../utils';
 
const Date = styled.div`
  font-size: 11px;
  color: #aaa;
`;
 
const Text = styled.div`
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
`;
 
const Image = styled.div`
  ${(props: { path: string }) => `
      background-image: url(${props.path});
      background-size: cover;
      background-position: center;
      width: 15%;
      border-radius: 3px;
      margin: 0 20px 0px 0;
      
  `};
`;
const Wrapper = styled.div`
  position: relative;
  cursor: pointer;
  height: 150px;
  overflow: hidden;
`;
 
const Content = styled.div`
  display: flex;
  margin: auto;
  padding: 10px;
  height: 100%;
  width: 100%;
  border-bottom: 1px solid #e4e4e4;
`;
 
const Overlay = styled.div`
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  flex-direction: column;
`;
 
interface IProps extends IArticle {
  push: Push;
}
 
export const ListItem = ({ push, ...article }: IProps) => {
  const { title, image, text, createdDateTime } = article;
  const hovered = useBoolean(false);
 
  const handleClick = () => push(getArticlePath(article));
 
  return (
    <Wrapper
      onMouseEnter={hovered.setTrue}
      onMouseLeave={hovered.setFalse}
      onClick={handleClick}
    >
      {hovered.value ? (
        <Overlay>
          <div>
            <Icon type="plus" />
          </div>
          <div>Přečíst článek</div>
        </Overlay>
      ) : null}
      <Content>
        <Image path={image} />
        <div style={{ width: '100%' }}>
          <h3>{title}</h3>
          <Date>{moment(createdDateTime).format('DD.MM.YYYY')}</Date>
          <Text>{text ? striptags(text) : null}</Text>
        </div>
      </Content>
    </Wrapper>
  );
};
export default withRouter(ListItem);