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