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 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 | 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 { getArticlePath } from '../../article/utils'; import withRouter from '../../hoc/withRouter'; const Date = styled.div` font-size: 11px; color: #aaa; grid-row-start: 2; grid-row-end: 2; grid-column-start: 2; grid-column-end: 2; align-self: center; `; const Text = styled.div` display: -webkit-box; overflow: hidden; margin-top: 5px; text-overflow: ellipsis; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } `; const Head = styled.div` display: grid; grid-template-columns: 50px auto; grid-template-rows: 25px; grid-column-gap: 5px; } `; const Title = styled.h3` text-overflow: ellipsis; overflow: hidden; white-space: nowrap; margin-bottom: 0em; grid-row-start: 1; grid-row-end: 1; grid-column-start: 2; grid-column-end: 2; } `; const Image = styled.div` ${(props: { path: string }) => ` background-image: url(${props.path}); background-size: cover; background-position: center; width: 50px; height: 50px; border-radius: 3px; grid-row-start: 1; grid-row-end: 3; `} `; const Wrapper = styled.div` position: relative; cursor: pointer; height: 150px; overflow: hidden; margin: 0px 5px; `; const Content = styled.div` 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> <Head> <Image path={image} /> <Title>{title}</Title> <Date>{moment(createdDateTime).format('DD.MM.YYYY')}</Date> </Head> <Text>{text ? striptags(text) : null}</Text> </Content> </Wrapper> ); }; export default withRouter(ListItem); |