superdesk-ui-framework 3.0.14 → 3.0.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.mocharc.json +5 -0
- package/app-typescript/components/ResizablePanels.tsx +97 -0
- package/app-typescript/components/WithPagination.tsx +231 -0
- package/app-typescript/components/with-pagination.spec.tsx +146 -0
- package/app-typescript/index.ts +2 -0
- package/dist/examples.bundle.js +2900 -1032
- package/dist/react/Index.tsx +11 -0
- package/dist/react/ResizablePanels.tsx +49 -0
- package/dist/react/WithPaginationDocs.tsx +57 -0
- package/dist/superdesk-ui.bundle.js +2498 -795
- package/dist/vendor.bundle.js +20 -20
- package/examples/pages/react/Index.tsx +11 -0
- package/examples/pages/react/ResizablePanels.tsx +49 -0
- package/examples/pages/react/WithPaginationDocs.tsx +57 -0
- package/mocha-setup.ts +5 -0
- package/package.json +16 -3
- package/react/components/ResizablePanels.d.ts +34 -0
- package/react/components/ResizablePanels.js +101 -0
- package/react/components/WithPagination.d.ts +26 -0
- package/react/components/WithPagination.js +191 -0
- package/react/index.d.ts +2 -0
- package/react/index.js +7 -2
- package/tsconfig.json +1 -1
- package/spec/scenarios.js +0 -13
|
@@ -0,0 +1,191 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __extends = (this && this.__extends) || (function () {
|
|
3
|
+
var extendStatics = function (d, b) {
|
|
4
|
+
extendStatics = Object.setPrototypeOf ||
|
|
5
|
+
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
|
6
|
+
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
|
|
7
|
+
return extendStatics(d, b);
|
|
8
|
+
};
|
|
9
|
+
return function (d, b) {
|
|
10
|
+
if (typeof b !== "function" && b !== null)
|
|
11
|
+
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
|
|
12
|
+
extendStatics(d, b);
|
|
13
|
+
function __() { this.constructor = d; }
|
|
14
|
+
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
15
|
+
};
|
|
16
|
+
})();
|
|
17
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
18
|
+
if (k2 === undefined) k2 = k;
|
|
19
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
20
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
21
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
22
|
+
}
|
|
23
|
+
Object.defineProperty(o, k2, desc);
|
|
24
|
+
}) : (function(o, m, k, k2) {
|
|
25
|
+
if (k2 === undefined) k2 = k;
|
|
26
|
+
o[k2] = m[k];
|
|
27
|
+
}));
|
|
28
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
29
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
30
|
+
}) : function(o, v) {
|
|
31
|
+
o["default"] = v;
|
|
32
|
+
});
|
|
33
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
34
|
+
if (mod && mod.__esModule) return mod;
|
|
35
|
+
var result = {};
|
|
36
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
37
|
+
__setModuleDefault(result, mod);
|
|
38
|
+
return result;
|
|
39
|
+
};
|
|
40
|
+
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
41
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
42
|
+
if (ar || !(i in from)) {
|
|
43
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
44
|
+
ar[i] = from[i];
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
48
|
+
};
|
|
49
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
50
|
+
exports.WithPagination = exports.getPagination = void 0;
|
|
51
|
+
var React = __importStar(require("react"));
|
|
52
|
+
var Icon_1 = require("../components/Icon");
|
|
53
|
+
function getPagination(currentPage, totalPages) {
|
|
54
|
+
if (currentPage <= 0 || totalPages <= 0 || currentPage > totalPages) {
|
|
55
|
+
return [];
|
|
56
|
+
}
|
|
57
|
+
var basePages = [
|
|
58
|
+
currentPage - 2,
|
|
59
|
+
currentPage - 1,
|
|
60
|
+
currentPage,
|
|
61
|
+
currentPage + 1,
|
|
62
|
+
currentPage + 2,
|
|
63
|
+
].filter(function (page) { return page >= 1 && page <= totalPages; });
|
|
64
|
+
if (!basePages.includes(1)) { // include first and maybe dots
|
|
65
|
+
var firstInCurrentList = basePages[0];
|
|
66
|
+
if (firstInCurrentList !== 1) {
|
|
67
|
+
basePages = __spreadArray([
|
|
68
|
+
'dots'
|
|
69
|
+
], basePages, true);
|
|
70
|
+
}
|
|
71
|
+
basePages = __spreadArray([
|
|
72
|
+
1
|
|
73
|
+
], basePages, true);
|
|
74
|
+
}
|
|
75
|
+
if (!basePages.includes(totalPages)) { // include last and maybe dots
|
|
76
|
+
var lastInCurrentList = basePages[basePages.length - 1];
|
|
77
|
+
if (lastInCurrentList !== totalPages - 1) { // add dots if we're skipping some numbers
|
|
78
|
+
basePages = basePages.concat('dots');
|
|
79
|
+
}
|
|
80
|
+
basePages = __spreadArray(__spreadArray([], basePages, true), [
|
|
81
|
+
totalPages,
|
|
82
|
+
], false);
|
|
83
|
+
}
|
|
84
|
+
return basePages;
|
|
85
|
+
}
|
|
86
|
+
exports.getPagination = getPagination;
|
|
87
|
+
function getScrollParent(element) {
|
|
88
|
+
var _a;
|
|
89
|
+
if (element == null) {
|
|
90
|
+
return null;
|
|
91
|
+
}
|
|
92
|
+
var parentElement = element;
|
|
93
|
+
var overflowY = window.getComputedStyle(parentElement).overflowY;
|
|
94
|
+
var hasScrollbar = overflowY === 'auto' || overflowY === 'scroll';
|
|
95
|
+
while (parentElement !== null && !hasScrollbar) {
|
|
96
|
+
parentElement = (_a = parentElement.parentElement) !== null && _a !== void 0 ? _a : null;
|
|
97
|
+
}
|
|
98
|
+
return parentElement;
|
|
99
|
+
}
|
|
100
|
+
var WithPagination = /** @class */ (function (_super) {
|
|
101
|
+
__extends(WithPagination, _super);
|
|
102
|
+
function WithPagination(props) {
|
|
103
|
+
var _this = _super.call(this, props) || this;
|
|
104
|
+
_this.state = {
|
|
105
|
+
currentPage: 1,
|
|
106
|
+
items: null,
|
|
107
|
+
};
|
|
108
|
+
_this.switchPage = _this.switchPage.bind(_this);
|
|
109
|
+
_this.getPageSize = _this.getPageSize.bind(_this);
|
|
110
|
+
_this.pageCount = 0;
|
|
111
|
+
_this.abortController = new window.AbortController(); // window. needed for unit tests
|
|
112
|
+
_this.ref = null;
|
|
113
|
+
_this.inProgress = false;
|
|
114
|
+
return _this;
|
|
115
|
+
}
|
|
116
|
+
WithPagination.prototype.getPageSize = function () {
|
|
117
|
+
var _a;
|
|
118
|
+
return (_a = this.props.pageSize) !== null && _a !== void 0 ? _a : 20;
|
|
119
|
+
};
|
|
120
|
+
WithPagination.prototype.switchPage = function (page) {
|
|
121
|
+
var _this = this;
|
|
122
|
+
if (this.inProgress) {
|
|
123
|
+
this.abortController.abort();
|
|
124
|
+
}
|
|
125
|
+
this.inProgress = true;
|
|
126
|
+
this.props.getItems(page, this.abortController.signal).then(function (res) {
|
|
127
|
+
_this.inProgress = false;
|
|
128
|
+
_this.setState({ items: res.items, currentPage: page }, function () {
|
|
129
|
+
var _a;
|
|
130
|
+
var scrollableEl = getScrollParent(_this.ref);
|
|
131
|
+
var diff = scrollableEl != null && ((_a = _this.ref) === null || _a === void 0 ? void 0 : _a.scrollHeight) != null
|
|
132
|
+
? scrollableEl.offsetHeight - _this.ref.scrollHeight
|
|
133
|
+
: null;
|
|
134
|
+
if (scrollableEl != null) {
|
|
135
|
+
scrollableEl.scrollTop = diff != null ? diff : 0;
|
|
136
|
+
}
|
|
137
|
+
});
|
|
138
|
+
});
|
|
139
|
+
};
|
|
140
|
+
WithPagination.prototype.componentDidMount = function () {
|
|
141
|
+
var _this = this;
|
|
142
|
+
this.props.getItems(1, this.abortController.signal).then(function (res) {
|
|
143
|
+
_this.pageCount = Math.ceil(res.itemCount / _this.getPageSize());
|
|
144
|
+
_this.setState({ items: res.items });
|
|
145
|
+
});
|
|
146
|
+
};
|
|
147
|
+
WithPagination.prototype.render = function () {
|
|
148
|
+
var _this = this;
|
|
149
|
+
if (this.state.items == null) {
|
|
150
|
+
return null;
|
|
151
|
+
}
|
|
152
|
+
var pageElements = getPagination(this.state.currentPage, this.pageCount).map(function (el, i) {
|
|
153
|
+
if (el === 'dots') {
|
|
154
|
+
return (React.createElement("span", { "data-test-id": "more-pages", className: 'sd-pagination__item sd-pagination__item--more' }, "..."));
|
|
155
|
+
}
|
|
156
|
+
else {
|
|
157
|
+
return (React.createElement("button", { "data-test-id": "page-button-".concat(i), className: _this.state.currentPage === el
|
|
158
|
+
? 'sd-pagination__item sd-pagination__item--active'
|
|
159
|
+
: 'sd-pagination__item', onClick: function () { return _this.switchPage(el); } }, el));
|
|
160
|
+
}
|
|
161
|
+
});
|
|
162
|
+
pageElements.unshift(React.createElement(React.Fragment, null,
|
|
163
|
+
React.createElement("button", { "data-test-id": "btn-1", className: 'sd-pagination__item sd-pagination__item--start', disabled: this.state.currentPage === 1, onClick: function () { return _this.switchPage(1); } },
|
|
164
|
+
React.createElement(Icon_1.Icon, { name: 'backward-thin' })),
|
|
165
|
+
React.createElement("button", { "data-test-id": "btn-2", className: 'sd-pagination__item sd-pagination__item--start', disabled: this.state.currentPage <= 1, onClick: function () { return _this.switchPage(_this.state.currentPage - 1); } },
|
|
166
|
+
React.createElement(Icon_1.Icon, { name: 'chevron-left-thin' }))));
|
|
167
|
+
pageElements.push(React.createElement(React.Fragment, null,
|
|
168
|
+
React.createElement("button", { "data-test-id": "btn-3", className: 'sd-pagination__item sd-pagination__item--forward', onClick: function () { return _this.switchPage(_this.state.currentPage + 1); }, disabled: this.state.currentPage === this.pageCount },
|
|
169
|
+
React.createElement(Icon_1.Icon, { name: 'chevron-right-thin' })),
|
|
170
|
+
React.createElement("button", { "data-test-id": "btn-4", className: 'sd-pagination__item sd-pagination__item--end', onClick: function () { return _this.switchPage(_this.pageCount); }, disabled: this.state.currentPage === this.pageCount },
|
|
171
|
+
React.createElement(Icon_1.Icon, { name: 'forward-thin' }))));
|
|
172
|
+
var StyledPagination = function () { return (React.createElement("div", { style: {
|
|
173
|
+
display: 'flex',
|
|
174
|
+
flexDirection: 'row',
|
|
175
|
+
justifyContent: 'center',
|
|
176
|
+
} }, pageElements)); };
|
|
177
|
+
return (React.createElement("div", { style: {
|
|
178
|
+
height: '100%',
|
|
179
|
+
width: '100%',
|
|
180
|
+
display: 'flex',
|
|
181
|
+
flexDirection: 'column',
|
|
182
|
+
}, ref: function (element) {
|
|
183
|
+
_this.ref = element;
|
|
184
|
+
} },
|
|
185
|
+
React.createElement(StyledPagination, null),
|
|
186
|
+
this.props.children(this.state.items),
|
|
187
|
+
React.createElement(StyledPagination, null)));
|
|
188
|
+
};
|
|
189
|
+
return WithPagination;
|
|
190
|
+
}(React.PureComponent));
|
|
191
|
+
exports.WithPagination = WithPagination;
|
package/react/index.d.ts
CHANGED
|
@@ -3,6 +3,7 @@ export { Button } from './components/Button';
|
|
|
3
3
|
export { Input } from './components/Input';
|
|
4
4
|
export { Select, Option } from './components/Select';
|
|
5
5
|
export { SelectWithTemplate } from './components/SelectWithTemplate';
|
|
6
|
+
export { WithPagination } from './components/WithPagination';
|
|
6
7
|
export { Popover } from './components/Popover';
|
|
7
8
|
export { Label } from './components/Label';
|
|
8
9
|
export { Badge } from './components/Badge';
|
|
@@ -82,5 +83,6 @@ export { TreeSelect } from './components/TreeSelect';
|
|
|
82
83
|
export { TableList, TableListItem } from './components/Lists/TableList';
|
|
83
84
|
export { ContentListItem } from './components/Lists/ContentList';
|
|
84
85
|
export { MultiSelect } from './components/MultiSelect';
|
|
86
|
+
export { ResizablePanels } from './components/ResizablePanels';
|
|
85
87
|
export declare const ToggleBoxNext: any;
|
|
86
88
|
export declare const reactToAngular1: any;
|
package/react/index.js
CHANGED
|
@@ -16,8 +16,9 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
|
16
16
|
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
17
17
|
};
|
|
18
18
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
19
|
-
exports.
|
|
20
|
-
exports.
|
|
19
|
+
exports.DropdownItem = exports.DropdownFirst = exports.HeadingText = exports.ContentDivider = exports.Divider = exports.Icon = exports.Prop = exports.PropsList = exports.StrechBar = exports.SlidingToolbar = exports.SubNavDivider = exports.SubNav = exports.LeftMenu = exports.TabList = exports.Tab = exports.NavButton = exports.CheckButtonGroup = exports.CheckGroup = exports.CheckboxButton = exports.RadioButtonGroup = exports.Checkbox = exports.RadioGroup = exports.Loader = exports.ButtonGroup = exports.SwitchGroup = exports.Switch = exports.FormLabel = exports.TimePicker = exports.DatePickerISO = exports.DatePicker = exports.getDurationString = exports.DurationInput = exports.Tooltip = exports.IconLabel = exports.IconButton = exports.AvatarGroup = exports.AvatarContentImage = exports.AvatarContentText = exports.AvatarWrapper = exports.Alert = exports.Badge = exports.Label = exports.Popover = exports.WithPagination = exports.SelectWithTemplate = exports.Option = exports.Select = exports.Input = exports.Button = exports.HelloWorld = void 0;
|
|
20
|
+
exports.ContentListItem = exports.TableListItem = exports.TableList = exports.TreeSelect = exports.BottomNav = exports.Heading = exports.Time = exports.Text = exports.LoadingOverlay = exports.Spinner = exports.ListItemLoader = exports.Skeleton = exports.WithSizeObserver = exports.SearchBar = exports.CreateButton = exports.DropZone = exports.ThemeSelector = exports.IconPicker = exports.SelectGrid = exports.ToggleBox = exports.Menu = exports.toasted = exports.GridItemCheckWrapper = exports.GridItemTopActions = exports.GridItemFooterActions = exports.GridItemFooterBlock = exports.GridItemSlug = exports.GridItemText = exports.GridItemTitle = exports.GridItemTime = exports.GridItemContentBlock = exports.GridItemFooter = exports.GridItemMedia = exports.GridItemContent = exports.GridItem = exports.GridList = exports.Modal = exports.Carousel = exports.DonutChart = exports.Autocomplete = exports.EmptyState = exports.Tabs = exports.TabContent = exports.TabPanel = exports.TabLabel = exports.TagInput = exports.Tag = exports.Dropdown = exports.DropdownDivider = exports.DropdownLabel = void 0;
|
|
21
|
+
exports.ResizablePanels = exports.MultiSelect = void 0;
|
|
21
22
|
var HelloWorld_1 = require("./components/HelloWorld");
|
|
22
23
|
Object.defineProperty(exports, "HelloWorld", { enumerable: true, get: function () { return HelloWorld_1.HelloWorld; } });
|
|
23
24
|
var Button_1 = require("./components/Button");
|
|
@@ -29,6 +30,8 @@ Object.defineProperty(exports, "Select", { enumerable: true, get: function () {
|
|
|
29
30
|
Object.defineProperty(exports, "Option", { enumerable: true, get: function () { return Select_1.Option; } });
|
|
30
31
|
var SelectWithTemplate_1 = require("./components/SelectWithTemplate");
|
|
31
32
|
Object.defineProperty(exports, "SelectWithTemplate", { enumerable: true, get: function () { return SelectWithTemplate_1.SelectWithTemplate; } });
|
|
33
|
+
var WithPagination_1 = require("./components/WithPagination");
|
|
34
|
+
Object.defineProperty(exports, "WithPagination", { enumerable: true, get: function () { return WithPagination_1.WithPagination; } });
|
|
32
35
|
var Popover_1 = require("./components/Popover");
|
|
33
36
|
Object.defineProperty(exports, "Popover", { enumerable: true, get: function () { return Popover_1.Popover; } });
|
|
34
37
|
var Label_1 = require("./components/Label");
|
|
@@ -201,3 +204,5 @@ var ContentList_1 = require("./components/Lists/ContentList");
|
|
|
201
204
|
Object.defineProperty(exports, "ContentListItem", { enumerable: true, get: function () { return ContentList_1.ContentListItem; } });
|
|
202
205
|
var MultiSelect_1 = require("./components/MultiSelect");
|
|
203
206
|
Object.defineProperty(exports, "MultiSelect", { enumerable: true, get: function () { return MultiSelect_1.MultiSelect; } });
|
|
207
|
+
var ResizablePanels_1 = require("./components/ResizablePanels");
|
|
208
|
+
Object.defineProperty(exports, "ResizablePanels", { enumerable: true, get: function () { return ResizablePanels_1.ResizablePanels; } });
|
package/tsconfig.json
CHANGED
package/spec/scenarios.js
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
describe('superdesk ui framework', function () {
|
|
4
|
-
|
|
5
|
-
beforeEach(function () {
|
|
6
|
-
browser.get('/examples/');
|
|
7
|
-
});
|
|
8
|
-
|
|
9
|
-
it('open modal', function () {
|
|
10
|
-
element(by.css('[ng-click="openModal(\'modalActive\')"] ')).click();
|
|
11
|
-
expect(element(by.className('modal__dialog')).isDisplayed()).toBeTruthy();
|
|
12
|
-
});
|
|
13
|
-
});
|