All files / components/table styledTable.js

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import styled from 'styled-components'
import PropTypes from 'prop-types'
 
const StyledTable = styled.div`  
  
  .rowListHeader {
    font-size: 0.7rem;
    color: #9ba2ac;
    background: #FFF;
    padding: 10px 0;
    border-bottom: 1px dashed #c5d0e1;
    padding-left: 4px;
    ${props => props.withBorder && `
      box-shadow: inset 4px 0 ${props.borderColor};
    `}
  }
 
  .rowList {
    font-size: 0.8rem;
    background: #FFFFFF;
    padding: 5px 0;
    
    ${props => props.withHover && `
      cursor: pointer;
    `}
    
    min-height: 60px;
    max-height: 60px;
 
    display: flex;
    align-items: center;
    justify-content: center;
 
    padding-left: 4px;
    border-bottom: 1px dashed #c5d0e1;
    ${props => props.withBorder && `
      box-shadow: inset 4px 0 ${props.borderColor};
    `}
    
    ${props => props.withHover && `
      &:hover {
        background: #f4f5f8;
        ${props.withBorder && `
          box-shadow: inset 4px 0 ${props.borderColorHover};
        `}
      }
    `}
  }
 
  .hintList:hover .hintListComponent {
    display: block;
  }
`
 
StyledTable.defaultProps = {
  withBorder: true,
  withHover: true,
  borderColor: '#afcef3',
  borderColorHover: '#2870b2'
}
 
StyledTable.propTypes = {
  withBorder: PropTypes.bool,
  withHover: PropTypes.bool,
  borderColor: PropTypes.string,
  borderColorHover: PropTypes.string
}
 
export default StyledTable