1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 |
|
7 | var _extends2 = require('babel-runtime/helpers/extends');
|
8 |
|
9 | var _extends3 = _interopRequireDefault(_extends2);
|
10 |
|
11 | var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');
|
12 |
|
13 | var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);
|
14 |
|
15 | var _taggedTemplateLiteral2 = require('babel-runtime/helpers/taggedTemplateLiteral');
|
16 |
|
17 | var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2);
|
18 |
|
19 | var _templateObject = (0, _taggedTemplateLiteral3.default)(['\n display: flex;\n justify-content: space-between;\n'], ['\n display: flex;\n justify-content: space-between;\n']),
|
20 | _templateObject2 = (0, _taggedTemplateLiteral3.default)([''], ['']),
|
21 | _templateObject3 = (0, _taggedTemplateLiteral3.default)(['\n margin-top: 1rem;\n'], ['\n margin-top: 1rem;\n']),
|
22 | _templateObject4 = (0, _taggedTemplateLiteral3.default)(['\n height: 25rem;\n overflow: hidden scroll;\n'], ['\n height: 25rem;\n overflow: hidden scroll;\n']),
|
23 | _templateObject5 = (0, _taggedTemplateLiteral3.default)(['\n width: 4rem;\n'], ['\n width: 4rem;\n']);
|
24 |
|
25 | var _react = require('react');
|
26 |
|
27 | var _react2 = _interopRequireDefault(_react);
|
28 |
|
29 | var _dateFns = require('date-fns');
|
30 |
|
31 | var _styledComponents = require('styled-components');
|
32 |
|
33 | var _styledComponents2 = _interopRequireDefault(_styledComponents);
|
34 |
|
35 | var _SlotfulCTCMercury = require('./SlotfulCTCMercury');
|
36 |
|
37 | var _SlotfulCTCMercury2 = _interopRequireDefault(_SlotfulCTCMercury);
|
38 |
|
39 | var _Button = require('./Button');
|
40 |
|
41 | var _Button2 = _interopRequireDefault(_Button);
|
42 |
|
43 | var _CTCPopover = require('./CTCPopover');
|
44 |
|
45 | var _CTCPopover2 = _interopRequireDefault(_CTCPopover);
|
46 |
|
47 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
48 |
|
49 | var _MONTHNAMEFORMAT_ = 'MMM';
|
50 | var _YEARNAMEFORMAT_ = 'YYYY';
|
51 |
|
52 | var FLEX = _styledComponents2.default.div(_templateObject);
|
53 | var DATE_HEADING = _styledComponents2.default.div(_templateObject2);
|
54 | var CONTAINER = _styledComponents2.default.div(_templateObject3);
|
55 | var DROPDOWN = _styledComponents2.default.div(_templateObject4);
|
56 | var DROPDOWN_BUTTON = (0, _styledComponents2.default)(_Button2.default)(_templateObject5);
|
57 |
|
58 | var defaultSharedCTCMercuryProps = {
|
59 | colors: 'lightsmoke',
|
60 | subcolors: 'smoke',
|
61 | size: 22.5,
|
62 | sizeFontRatio: 0.6,
|
63 | mercuryRatio: [10, 20],
|
64 | sideTransform: 0.8
|
65 | };
|
66 |
|
67 | var compare = function compare(a, b, sortOrder) {
|
68 | if (a > b) return sortOrder * -1;
|
69 | if (a < b) return sortOrder;
|
70 | return 0;
|
71 | };
|
72 |
|
73 | var _BIG_ = 10000000000000000;
|
74 | var _SMALL_ = -10000000000000000;
|
75 | var _LONG_ = 'zzzzzzzzzzzzzzzzzzzzzzzz';
|
76 | var _SHORT_ = '';
|
77 |
|
78 | var OrderedList = function OrderedList(_ref) {
|
79 | var externallySetPageSize = _ref.pageSize,
|
80 | externallySetPageNumber = _ref.pageNumber,
|
81 | _ref$falsyValueSortPr = _ref.falsyValueSortPriority,
|
82 | falsyValueSortPriority = _ref$falsyValueSortPr === undefined ? -1 : _ref$falsyValueSortPr,
|
83 | sortBy = _ref.sortBy,
|
84 | _ref$locale = _ref.locale,
|
85 | locale = _ref$locale === undefined ? {
|
86 | nextPage: 'Next Page',
|
87 | prevPage: 'Previous Page',
|
88 | emptyList: 'No items'
|
89 | } : _ref$locale,
|
90 | sortOrder = _ref.sortOrder,
|
91 | _ref$sharedCTCMercury = _ref.sharedCTCMercuryProps,
|
92 | sharedCTCMercuryProps = _ref$sharedCTCMercury === undefined ? defaultSharedCTCMercuryProps : _ref$sharedCTCMercury,
|
93 | items = _ref.items,
|
94 | headers = _ref.headers,
|
95 | itemToSlotsConvertFunction = _ref.itemToSlotsConvertFunction,
|
96 | children = _ref.children,
|
97 | externalSortingFunction = _ref.sortingFunction;
|
98 |
|
99 | var localCompare = function localCompare(a, b) {
|
100 | return compare(a, b, sortOrder);
|
101 | };
|
102 | var sortingFunction = void 0;
|
103 | var activeHeader = headers.find(function (header) {
|
104 | return header.key === sortBy;
|
105 | });
|
106 | var type = activeHeader ? activeHeader.type : 'string';
|
107 | if (typeof externalSortingFunction !== 'function') {
|
108 | sortingFunction = function sortingFunction(a, b) {
|
109 | var aValue = void 0,
|
110 | bValue = void 0;
|
111 |
|
112 | if (sortBy.includes('.')) {
|
113 | var keys = sortBy.split('.');
|
114 | aValue = a;
|
115 | bValue = b;
|
116 | keys.forEach(function (v) {
|
117 | aValue = aValue[v];
|
118 | bValue = bValue[v];
|
119 | });
|
120 | } else {
|
121 | aValue = a[sortBy];
|
122 | bValue = b[sortBy];
|
123 | }
|
124 |
|
125 | if (type === 'string') {
|
126 | var A = aValue ? aValue.toLowerCase() : sortOrder === falsyValueSortPriority ? _LONG_ : _SHORT_;
|
127 | var B = bValue ? bValue.toLowerCase() : sortOrder === falsyValueSortPriority ? _LONG_ : _SHORT_;
|
128 | return localCompare(A, B);
|
129 | }
|
130 |
|
131 | if (type === 'number') {
|
132 | var _A = aValue ? aValue : sortOrder === falsyValueSortPriority ? _BIG_ : _SMALL_;
|
133 | var _B = bValue ? bValue : sortOrder === falsyValueSortPriority ? _BIG_ : _SMALL_;
|
134 | return localCompare(_A, _B);
|
135 | }
|
136 | };
|
137 | } else {
|
138 | sortingFunction = externalSortingFunction;
|
139 | }
|
140 |
|
141 | var _useState = (0, _react.useState)(15),
|
142 | _useState2 = (0, _slicedToArray3.default)(_useState, 2),
|
143 | pageSize = _useState2[0],
|
144 | setPageSizeTo = _useState2[1];
|
145 |
|
146 | var _useState3 = (0, _react.useState)(0),
|
147 | _useState4 = (0, _slicedToArray3.default)(_useState3, 2),
|
148 | pageNumber = _useState4[0],
|
149 | setPageNumberTo = _useState4[1];
|
150 |
|
151 | if (externallySetPageSize) {
|
152 | pageSize = externallySetPageSize;
|
153 | }
|
154 |
|
155 | if (externallySetPageNumber) {
|
156 | pageNumber = externallySetPageNumber;
|
157 | }
|
158 |
|
159 | var pageCount = Math.ceil(items.length / pageSize);
|
160 |
|
161 | var goToPageButtons = [];
|
162 |
|
163 | var _loop = function _loop(i) {
|
164 | goToPageButtons.push(_react2.default.createElement(
|
165 | DROPDOWN_BUTTON,
|
166 | { key: i, colors: 'neutral', onClick: function onClick() {
|
167 | return setPageNumberTo(i);
|
168 | } },
|
169 | i + 1
|
170 | ));
|
171 | };
|
172 |
|
173 | for (var i = 0; i < pageCount; i++) {
|
174 | _loop(i);
|
175 | }
|
176 | var setPageSizeButtons = [];
|
177 |
|
178 | var _loop2 = function _loop2(i) {
|
179 | setPageSizeButtons.push(_react2.default.createElement(
|
180 | DROPDOWN_BUTTON,
|
181 | { key: i, colors: 'neutral', onClick: function onClick() {
|
182 | return setPageSizeTo(i);
|
183 | } },
|
184 | i
|
185 | ));
|
186 | };
|
187 |
|
188 | for (var i = 0; i < 100; i = i + 10) {
|
189 | _loop2(i);
|
190 | }
|
191 |
|
192 | var sortedItems = items.sort(sortingFunction);
|
193 | var paginatedItems = sortedItems.slice(pageNumber * pageSize, (pageNumber + 1) * pageSize);
|
194 |
|
195 | var renderGoToPage = function renderGoToPage() {
|
196 | return _react2.default.createElement(
|
197 | _CTCPopover2.default,
|
198 | {
|
199 | pivotFrom: 'UPLEFT',
|
200 | renderTrigger: function renderTrigger(_ref2) {
|
201 | var getTriggerProps = _ref2.getTriggerProps;
|
202 | return _react2.default.createElement(
|
203 | _Button2.default,
|
204 | (0, _extends3.default)({}, getTriggerProps()),
|
205 | pageNumber + 1,
|
206 | ' out of ',
|
207 | pageCount
|
208 | );
|
209 | }
|
210 | },
|
211 | function (_ref3) {
|
212 | var getChildrenProps = _ref3.getChildrenProps;
|
213 | return _react2.default.createElement(
|
214 | DROPDOWN,
|
215 | (0, _extends3.default)({}, getChildrenProps()),
|
216 | goToPageButtons
|
217 | );
|
218 | }
|
219 | );
|
220 | };
|
221 |
|
222 | var renderPageSize = function renderPageSize() {
|
223 | return _react2.default.createElement(
|
224 | _CTCPopover2.default,
|
225 | {
|
226 | pivotFrom: 'UPLEFT',
|
227 | renderTrigger: function renderTrigger(_ref4) {
|
228 | var getTriggerProps = _ref4.getTriggerProps;
|
229 | return _react2.default.createElement(
|
230 | _Button2.default,
|
231 | (0, _extends3.default)({}, getTriggerProps()),
|
232 | '(showing ',
|
233 | pageNumber * pageSize,
|
234 | ' -',
|
235 | ' ',
|
236 | (pageNumber + 1) * pageSize < items.length ? (pageNumber + 1) * pageSize : items.length,
|
237 | ' ',
|
238 | 'out of ',
|
239 | items.length,
|
240 | ')'
|
241 | );
|
242 | }
|
243 | },
|
244 | function (_ref5) {
|
245 | var getChildrenProps = _ref5.getChildrenProps;
|
246 | return _react2.default.createElement(
|
247 | DROPDOWN,
|
248 | (0, _extends3.default)({}, getChildrenProps()),
|
249 | setPageSizeButtons
|
250 | );
|
251 | }
|
252 | );
|
253 | };
|
254 |
|
255 | var renderNextPageButton = function renderNextPageButton() {
|
256 | return _react2.default.createElement(
|
257 | _Button2.default,
|
258 | {
|
259 | isDisabled: pageNumber + 1 >= pageCount,
|
260 | onClick: function onClick() {
|
261 | return setPageNumberTo(pageNumber + 1);
|
262 | }
|
263 | },
|
264 | locale.nextPage
|
265 | );
|
266 | };
|
267 |
|
268 | var renderPrevPageButton = function renderPrevPageButton() {
|
269 | return _react2.default.createElement(
|
270 | _Button2.default,
|
271 | {
|
272 | isDisabled: pageNumber === 0,
|
273 | onClick: function onClick() {
|
274 | return setPageNumberTo(pageNumber - 1);
|
275 | }
|
276 | },
|
277 | locale.prevPage
|
278 | );
|
279 | };
|
280 |
|
281 | var isDate = headers.find(function (header) {
|
282 | return header.key === sortBy;
|
283 | }).isDate;
|
284 |
|
285 | return paginatedItems.length > 0 ? _react2.default.createElement(
|
286 | _react.Fragment,
|
287 | null,
|
288 | _react2.default.createElement(_SlotfulCTCMercury2.default, (0, _extends3.default)({}, sharedCTCMercuryProps, {
|
289 | isDisabled: true,
|
290 | marginLock: true,
|
291 | slots: headers
|
292 | })),
|
293 | _react2.default.createElement(
|
294 | CONTAINER,
|
295 | { className: 'orderedlist__container' },
|
296 | paginatedItems.map(function (item, i) {
|
297 | var slotfulButtons = itemToSlotsConvertFunction(item);
|
298 |
|
299 | var monthName = (0, _dateFns.format)(item[sortBy], _MONTHNAMEFORMAT_);
|
300 | var yearName = (0, _dateFns.format)(item[sortBy], _YEARNAMEFORMAT_);
|
301 |
|
302 | var monthNumber = (0, _dateFns.format)(item[sortBy], 'MM');
|
303 |
|
304 | var prevItem = paginatedItems[i - 1];
|
305 |
|
306 | var prevMonthName = prevItem && (0, _dateFns.format)(prevItem[sortBy], _MONTHNAMEFORMAT_);
|
307 | var prevYearName = prevItem && (0, _dateFns.format)(prevItem[sortBy], _YEARNAMEFORMAT_);
|
308 |
|
309 | var renderDate = function renderDate() {
|
310 | var isAvailable = typeof item[sortBy] === 'number';
|
311 | var renderDate = function renderDate(placeholder, value) {
|
312 | return isAvailable ? _react2.default.createElement(
|
313 | DATE_HEADING,
|
314 | null,
|
315 | value
|
316 | ) : placeholder ? _react2.default.createElement(
|
317 | DATE_HEADING,
|
318 | null,
|
319 | 'pending dates'
|
320 | ) : null;
|
321 | };
|
322 | var yearValue = renderDate(true, yearName);
|
323 | var monthValue = renderDate(false, monthNumber + '.' + yearName + ' [' + monthName + ']');
|
324 | return _react2.default.createElement(
|
325 | _react.Fragment,
|
326 | null,
|
327 | i === 0 && yearValue,
|
328 | i === 0 && monthValue,
|
329 | paginatedItems[i - 1] && prevYearName !== yearName && yearValue,
|
330 | paginatedItems[i - 1] && prevMonthName !== monthName && monthValue
|
331 | );
|
332 | };
|
333 |
|
334 | return _react2.default.createElement(
|
335 | 'div',
|
336 | { key: i + '_' + item.id, className: 'orderedlist__item' },
|
337 | isDate === true && renderDate(),
|
338 | children({ item: item, slotfulButtons: slotfulButtons })
|
339 | );
|
340 | })
|
341 | ),
|
342 | _react2.default.createElement(
|
343 | FLEX,
|
344 | null,
|
345 | renderPrevPageButton(),
|
346 | renderGoToPage(),
|
347 | renderPageSize(),
|
348 | renderNextPageButton()
|
349 | )
|
350 | ) : _react2.default.createElement(
|
351 | 'div',
|
352 | null,
|
353 | locale.emptyList
|
354 | );
|
355 | };
|
356 |
|
357 | exports.default = _react2.default.memo(OrderedList); |
\ | No newline at end of file |