1 | "use strict";
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 | Object.defineProperty(exports, "__esModule", { value: true });
|
18 | exports.CollapsibleList = void 0;
|
19 | var tslib_1 = require("tslib");
|
20 |
|
21 |
|
22 |
|
23 |
|
24 |
|
25 | var classnames_1 = tslib_1.__importDefault(require("classnames"));
|
26 | var React = tslib_1.__importStar(require("react"));
|
27 | var boundary_1 = require("../../common/boundary");
|
28 | var Classes = tslib_1.__importStar(require("../../common/classes"));
|
29 | var Errors = tslib_1.__importStar(require("../../common/errors"));
|
30 | var position_1 = require("../../common/position");
|
31 | var props_1 = require("../../common/props");
|
32 | var utils_1 = require("../../common/utils");
|
33 | var menu_1 = require("../menu/menu");
|
34 | var menuItem_1 = require("../menu/menuItem");
|
35 | var popover_1 = require("../popover/popover");
|
36 |
|
37 |
|
38 |
|
39 |
|
40 |
|
41 |
|
42 | var CollapsibleList = (function (_super) {
|
43 | tslib_1.__extends(CollapsibleList, _super);
|
44 | function CollapsibleList() {
|
45 | return _super !== null && _super.apply(this, arguments) || this;
|
46 | }
|
47 | CollapsibleList.prototype.render = function () {
|
48 | var _this = this;
|
49 | var collapseFrom = this.props.collapseFrom;
|
50 | var childrenLength = React.Children.count(this.props.children);
|
51 | var _a = this.partitionChildren(), visibleChildren = _a[0], collapsedChildren = _a[1];
|
52 | var visibleItems = visibleChildren.map(function (child, index) {
|
53 | var absoluteIndex = collapseFrom === boundary_1.Boundary.START ? childrenLength - 1 - index : index;
|
54 | return (React.createElement("li", { className: _this.props.visibleItemClassName, key: absoluteIndex }, _this.props.visibleItemRenderer(child.props, absoluteIndex)));
|
55 | });
|
56 | if (collapseFrom === boundary_1.Boundary.START) {
|
57 |
|
58 | visibleItems.reverse();
|
59 | }
|
60 |
|
61 | var collapsedPopover;
|
62 | if (collapsedChildren.length > 0) {
|
63 | var position = collapseFrom === boundary_1.Boundary.END ? position_1.Position.BOTTOM_RIGHT : position_1.Position.BOTTOM_LEFT;
|
64 | collapsedPopover = (React.createElement("li", { className: this.props.visibleItemClassName },
|
65 | React.createElement(popover_1.Popover, tslib_1.__assign({ content: React.createElement(menu_1.Menu, null, collapsedChildren), position: position }, this.props.dropdownProps), this.props.dropdownTarget)));
|
66 | }
|
67 | return (React.createElement("ul", { className: (0, classnames_1.default)(Classes.COLLAPSIBLE_LIST, this.props.className) },
|
68 | collapseFrom === boundary_1.Boundary.START ? collapsedPopover : null,
|
69 | visibleItems,
|
70 | collapseFrom === boundary_1.Boundary.END ? collapsedPopover : null));
|
71 | };
|
72 |
|
73 | CollapsibleList.prototype.partitionChildren = function () {
|
74 | var childrenArray = React.Children.map(this.props.children, function (child, index) {
|
75 | if (!(0, utils_1.isElementOfType)(child, menuItem_1.MenuItem)) {
|
76 | throw new Error(Errors.COLLAPSIBLE_LIST_INVALID_CHILD);
|
77 | }
|
78 | return React.cloneElement(child, { key: "visible-".concat(index) });
|
79 | });
|
80 | if (childrenArray == null) {
|
81 | return [[], []];
|
82 | }
|
83 | if (this.props.collapseFrom === boundary_1.Boundary.START) {
|
84 |
|
85 | childrenArray.reverse();
|
86 | }
|
87 | var visibleItemCount = this.props.visibleItemCount;
|
88 | return [childrenArray.slice(0, visibleItemCount), childrenArray.slice(visibleItemCount)];
|
89 | };
|
90 | CollapsibleList.displayName = "".concat(props_1.DISPLAYNAME_PREFIX, ".CollapsibleList");
|
91 | CollapsibleList.defaultProps = {
|
92 | collapseFrom: boundary_1.Boundary.START,
|
93 | visibleItemCount: 3,
|
94 | };
|
95 | return CollapsibleList;
|
96 | }(React.Component));
|
97 | exports.CollapsibleList = CollapsibleList;
|
98 |
|
\ | No newline at end of file |