1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 | exports.CellExpander = undefined;
|
7 |
|
8 | var _react = require('react');
|
9 |
|
10 | var _react2 = _interopRequireDefault(_react);
|
11 |
|
12 | var _propTypes = require('prop-types');
|
13 |
|
14 | var _propTypes2 = _interopRequireDefault(_propTypes);
|
15 |
|
16 | var _Popover = require('react-bootstrap/lib/Popover');
|
17 |
|
18 | var _Popover2 = _interopRequireDefault(_Popover);
|
19 |
|
20 | var _OverlayTrigger = require('react-bootstrap/lib/OverlayTrigger');
|
21 |
|
22 | var _OverlayTrigger2 = _interopRequireDefault(_OverlayTrigger);
|
23 |
|
24 | var _constants = require('./constants');
|
25 |
|
26 | var Constants = _interopRequireWildcard(_constants);
|
27 |
|
28 | var _aphrodite = require('aphrodite');
|
29 |
|
30 | function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
|
31 |
|
32 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
33 |
|
34 | function getExpanderStyle() {
|
35 | var expanderOnSameline = Constants.CELL_EXPANDER_SAMELINE;
|
36 | var expanderStyle = {};
|
37 |
|
38 | if (expanderOnSameline) {
|
39 |
|
40 | expanderStyle = _aphrodite.StyleSheet.create({
|
41 | cellStyle: {
|
42 | position: 'absolute',
|
43 | top: 'calc(100% - 23px)',
|
44 | right: '4px',
|
45 | cursor: 'pointer',
|
46 | 'margin-right': '5px',
|
47 | 'background-color': '#ccc'
|
48 | },
|
49 | labelStyle: {
|
50 | display: 'inline',
|
51 | padding: '.3em .6em .2em',
|
52 | 'font-size': '75%',
|
53 | 'font-weight': 'bold',
|
54 | 'line-height': '1',
|
55 | color: '#333333',
|
56 | 'text-align': 'center',
|
57 | 'white-space': 'nowrap',
|
58 | 'vertical-align': 'baseline',
|
59 | 'border-radius': '.25em'
|
60 | },
|
61 | cellContentStyle: {
|
62 | 'margin-left': '0px'
|
63 | }
|
64 | });
|
65 | } else {
|
66 |
|
67 | expanderStyle = _aphrodite.StyleSheet.create({
|
68 | cellStyle: {
|
69 | position: 'absolute',
|
70 | top: 'calc(100% - 23px)',
|
71 | left: '4px',
|
72 | cursor: 'pointer'
|
73 | },
|
74 | labelStyle: {
|
75 | display: 'inline',
|
76 | padding: '.2em .6em .3em',
|
77 | 'font-size': '75%',
|
78 | 'font-weight': 'bold',
|
79 | 'line-height': '1',
|
80 | color: '#fff',
|
81 | 'text-align': 'center',
|
82 | 'white-space': 'nowrap',
|
83 | 'vertical-align': 'baseline',
|
84 | 'border-radius': '.25em'
|
85 | },
|
86 | cellContentStyle: {
|
87 | 'margin-left': '0px'
|
88 | }
|
89 | });
|
90 | }
|
91 |
|
92 | return expanderStyle;
|
93 | };
|
94 |
|
95 | var CellExpander = exports.CellExpander = function CellExpander(_ref) {
|
96 | var firstElement = _ref.firstElement,
|
97 | children = _ref.children,
|
98 | totalRows = _ref.totalRows,
|
99 | rowIndex = _ref.rowIndex;
|
100 |
|
101 | var innerText = '+ ' + (Array.isArray(children) ? children.length - 1 : 0) + ' items';
|
102 | var expanderOnSameline = Constants.CELL_EXPANDER_SAMELINE;
|
103 | var expanderStyle = getExpanderStyle();
|
104 | var popover_placement = rowIndex <= (totalRows - 1) / 2 ? 'bottom' : 'top';
|
105 |
|
106 | if (expanderOnSameline) {
|
107 | return _react2.default.createElement(
|
108 | 'div',
|
109 | null,
|
110 | _react2.default.createElement(
|
111 | 'span',
|
112 | { className: (0, _aphrodite.css)(expanderStyle.cellContentStyle) },
|
113 | firstElement
|
114 | ),
|
115 | _react2.default.createElement(
|
116 | _OverlayTrigger2.default,
|
117 | {
|
118 | rootClose: true,
|
119 | trigger: 'click',
|
120 | placement: popover_placement,
|
121 | overlay: _react2.default.createElement(
|
122 | _Popover2.default,
|
123 | { id: 'details-popover' },
|
124 | children.map(function (c, id) {
|
125 | return _react2.default.createElement(
|
126 | 'div',
|
127 | { key: id },
|
128 | c,
|
129 | _react2.default.createElement('br', null)
|
130 | );
|
131 | })
|
132 | ) },
|
133 | _react2.default.createElement(
|
134 | 'span',
|
135 | { className: (0, _aphrodite.css)(expanderStyle.cellStyle, expanderStyle.labelStyle) },
|
136 | innerText
|
137 | )
|
138 | )
|
139 | );
|
140 | } else {
|
141 | return _react2.default.createElement(
|
142 | 'div',
|
143 | null,
|
144 | _react2.default.createElement(
|
145 | 'span',
|
146 | { className: (0, _aphrodite.css)(expanderStyle.cellContentStyle) },
|
147 | firstElement
|
148 | ),
|
149 | _react2.default.createElement(
|
150 | _OverlayTrigger2.default,
|
151 | {
|
152 | rootClose: true,
|
153 | trigger: 'click',
|
154 | placement: popover_placement,
|
155 | overlay: _react2.default.createElement(
|
156 | _Popover2.default,
|
157 | { id: 'details-popover' },
|
158 | children.map(function (c, id) {
|
159 | return _react2.default.createElement(
|
160 | 'div',
|
161 | { key: id },
|
162 | c,
|
163 | _react2.default.createElement('br', null)
|
164 | );
|
165 | })
|
166 | ) },
|
167 | _react2.default.createElement(
|
168 | 'span',
|
169 | { className: (0, _aphrodite.css)(expanderStyle.cellStyle, expanderStyle.labelStyle) },
|
170 | innerText
|
171 | )
|
172 | )
|
173 | );
|
174 | }
|
175 | };
|
176 |
|
177 | CellExpander.propTypes = {
|
178 | children: _propTypes2.default.any,
|
179 | expanderOnSameline: _propTypes2.default.bool
|
180 | }; |
\ | No newline at end of file |