import React, {useState} from "react"; import styled, {keyframes} from "styled-components"; import PropTypes from "prop-types"; import {Divider, Layout, Tooltip} from 'antd'; import CustomTag from './components/tag'; const { Header, Footer, Content } = Layout; const Container = styled.div` left: 50%; position: relative; top: 50%; transform: translateY(-50%) translateX(-50%); width: 500px; display: flex; flex-flow: row wrap; justify-content: flex-start; `; const ContainerTags = styled.div` position: relative; top: 50%; width: 500px; display: flex; flex-flow: row wrap; justify-content: flex-start; margin: auto; `; const BoxContainer = styled.div` display: flex; flex-flow: row wrap; justify-content: center; margin: 0 auto; `; const FadeIn = keyframes` 0% { opacity: 0; transform: scale(0); } 50% { transform: scale(1.5); } 100% { opacity: 1; transform: scale(1); } ` const Box = styled.div` flex-grow: 0; border-radius: 4px; position: relative; padding: 10px; box-sizing: border-box; height: 30px; margin: 4px; width: 30px; cursor: pointer; background-color: #fff; animation: 0.1s ease-in-out both ${FadeIn}; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); transition: all 0.25s ease-in-out; animation-delay: ${props => props.delay * 0.1}s; &:hover { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); } `; const PassedBox = styled(Box)` background-color: red; `; const Title = styled(Divider)` font-size: 20px !important; `; const DeadlineVisualizer = ({ deadline }) => { document.title = `${deadline.name} - ${deadline.summary}`; const [currentTagBox, setCurrentTagBox] = useState(null); return ( <Layout style={{ height: '100vh', width: '100vw' }}> <Header style={{ backgroundColor: '#fff' }}> <Title>{deadline.name}</Title> </Header> <Content> <Container> <BoxContainer> {deadline.boxes.map((item, index) => item.passed ? <Tooltip title={item.info} color="red"> <PassedBox onMouseEnter={()=>{setCurrentTagBox({item, index})}} key={index} delay={index + 1}/> </Tooltip> : <Tooltip title={item.info}> <Box key={index} delay={index + 1} onMouseEnter={()=>{setCurrentTagBox({item, index})}} /> </Tooltip>)} </BoxContainer> </Container> <ContainerTags> <BoxContainer> <CustomTag deadlineTag = {deadline != null ? deadline : null} tagItem = {currentTagBox} ></CustomTag> </BoxContainer> </ContainerTags> </Content> <Footer style={{ backgroundColor: '#fff' }}> <Divider>{deadline.summary}</Divider> </Footer> </Layout> ); } DeadlineVisualizer.propTypes = { deadline: PropTypes.shape({ name: PropTypes.string.isRequired, summary: PropTypes.string.isRequired, boxes: PropTypes.arrayOf(PropTypes.shape({ info: PropTypes.string.isRequired, passed: PropTypes.bool.isRequired })).isRequired }).isRequired } export default DeadlineVisualizer;