1 | import React from 'react';
|
2 | import PropTypes from 'prop-types';
|
3 | import Popover from 'react-bootstrap/lib/Popover';
|
4 | import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
|
5 | import * as Constants from './constants';
|
6 | import { StyleSheet, css } from 'aphrodite';
|
7 |
|
8 | function getExpanderStyle () {
|
9 | const expanderOnSameline = Constants.CELL_EXPANDER_SAMELINE;
|
10 | let expanderStyle = {};
|
11 |
|
12 | if (expanderOnSameline) {
|
13 |
|
14 | expanderStyle = StyleSheet.create({
|
15 | cellStyle: {
|
16 | position: 'absolute',
|
17 | top: 'calc(100% - 23px)',
|
18 | right: '4px',
|
19 | cursor: 'pointer',
|
20 | 'margin-right': '5px',
|
21 | 'background-color': '#ccc',
|
22 | },
|
23 | labelStyle: {
|
24 | display: 'inline',
|
25 | padding: '.3em .6em .2em',
|
26 | 'font-size': '75%',
|
27 | 'font-weight': 'bold',
|
28 | 'line-height': '1',
|
29 | color: '#333333',
|
30 | 'text-align': 'center',
|
31 | 'white-space': 'nowrap',
|
32 | 'vertical-align': 'baseline',
|
33 | 'border-radius': '.25em',
|
34 | },
|
35 | cellContentStyle: {
|
36 | 'margin-left': '0px',
|
37 | },
|
38 | });
|
39 | } else {
|
40 |
|
41 | expanderStyle = StyleSheet.create({
|
42 | cellStyle: {
|
43 | position: 'absolute',
|
44 | top: 'calc(100% - 23px)',
|
45 | left: '4px',
|
46 | cursor: 'pointer',
|
47 | },
|
48 | labelStyle: {
|
49 | display: 'inline',
|
50 | padding: '.2em .6em .3em',
|
51 | 'font-size': '75%',
|
52 | 'font-weight': 'bold',
|
53 | 'line-height': '1',
|
54 | color: '#fff',
|
55 | 'text-align': 'center',
|
56 | 'white-space': 'nowrap',
|
57 | 'vertical-align': 'baseline',
|
58 | 'border-radius': '.25em',
|
59 | },
|
60 | cellContentStyle: {
|
61 | 'margin-left': '0px',
|
62 | },
|
63 | });
|
64 | }
|
65 |
|
66 | return (expanderStyle);
|
67 | };
|
68 |
|
69 | export const CellExpander = ({firstElement, children, totalRows, rowIndex}) => {
|
70 | const innerText = `+ ${Array.isArray(children) ? children.length-1 : 0} items`;
|
71 | const expanderOnSameline = Constants.CELL_EXPANDER_SAMELINE;
|
72 | const expanderStyle = getExpanderStyle();
|
73 | const popover_placement = rowIndex<=(totalRows-1)/2 ? 'bottom': 'top';
|
74 |
|
75 | if (expanderOnSameline) {
|
76 | return (
|
77 | <div>
|
78 | <span className={css(expanderStyle.cellContentStyle)}>
|
79 | {firstElement}
|
80 | </span>
|
81 | <OverlayTrigger
|
82 | rootClose
|
83 | trigger="click"
|
84 | placement= {popover_placement}
|
85 | overlay={(
|
86 | <Popover id="details-popover">
|
87 | {children.map((c, id) => (
|
88 | <div key={id}>
|
89 | {c}
|
90 | <br/>
|
91 | </div>
|
92 | ))}
|
93 | </Popover>
|
94 | )}>
|
95 | <span className={css(expanderStyle.cellStyle, expanderStyle.labelStyle)}>
|
96 | {innerText}
|
97 | </span>
|
98 | </OverlayTrigger>
|
99 | </div>
|
100 | );
|
101 | } else {
|
102 | return (
|
103 | <div>
|
104 | <span className={css(expanderStyle.cellContentStyle)}>
|
105 | {firstElement}
|
106 | </span>
|
107 | <OverlayTrigger
|
108 | rootClose
|
109 | trigger="click"
|
110 | placement= {popover_placement}
|
111 | overlay={(
|
112 | <Popover id="details-popover">
|
113 | {children.map((c, id) => (
|
114 | <div key={id}>
|
115 | {c}
|
116 | <br/>
|
117 | </div>
|
118 | ))}
|
119 | </Popover>
|
120 | )}>
|
121 | <span className={css(expanderStyle.cellStyle, expanderStyle.labelStyle)}>
|
122 | {innerText}
|
123 | </span>
|
124 | </OverlayTrigger>
|
125 | </div>
|
126 | );
|
127 | }
|
128 | };
|
129 |
|
130 | CellExpander.propTypes = {
|
131 | children: PropTypes.any,
|
132 | expanderOnSameline: PropTypes.bool,
|
133 | };
|