superdesk-ui-framework 3.0.13 → 3.0.15

package/react/components/TreeSelect.js

@@ -16,7 +16,11 @@ var __extends = (this && this.__extends) || (function () {
 })();
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/react/components/WithPagination.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+interface IProps<T> {
+    getItems(pageNo: number, signal: AbortSignal): Promise<{
+        items: Array<T>;
+        itemCount: number;
+    }>;
+    children: (items: Array<T>) => JSX.Element;
+    pageSize?: number;
+}
+interface IState<T> {
+    currentPage: number;
+    items: Array<T> | null;
+}
+export declare function getPagination(currentPage: number, totalPages: number): Array<number | 'dots'>;
+export declare class WithPagination<T> extends React.PureComponent<IProps<T>, IState<T>> {
+    private pageCount;
+    private abortController;
+    private ref;
+    private inProgress;
+    constructor(props: IProps<T>);
+    getPageSize(): number;
+    switchPage(page: number): void;
+    componentDidMount(): void;
+    render(): JSX.Element | null;
+}
+export {};

package/react/components/WithPagination.js

@@ -0,0 +1,191 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WithPagination = exports.getPagination = void 0;
+var React = __importStar(require("react"));
+var Icon_1 = require("../components/Icon");
+function getPagination(currentPage, totalPages) {
+    if (currentPage <= 0 || totalPages <= 0 || currentPage > totalPages) {
+        return [];
+    }
+    var basePages = [
+        currentPage - 2,
+        currentPage - 1,
+        currentPage,
+        currentPage + 1,
+        currentPage + 2,
+    ].filter(function (page) { return page >= 1 && page <= totalPages; });
+    if (!basePages.includes(1)) { // include first and maybe dots
+        var firstInCurrentList = basePages[0];
+        if (firstInCurrentList !== 1) {
+            basePages = __spreadArray([
+                'dots'
+            ], basePages, true);
+        }
+        basePages = __spreadArray([
+            1
+        ], basePages, true);
+    }
+    if (!basePages.includes(totalPages)) { // include last and maybe dots
+        var lastInCurrentList = basePages[basePages.length - 1];
+        if (lastInCurrentList !== totalPages - 1) { // add dots if we're skipping some numbers
+            basePages = basePages.concat('dots');
+        }
+        basePages = __spreadArray(__spreadArray([], basePages, true), [
+            totalPages,
+        ], false);
+    }
+    return basePages;
+}
+exports.getPagination = getPagination;
+function getScrollParent(element) {
+    var _a;
+    if (element == null) {
+        return null;
+    }
+    var parentElement = element;
+    var overflowY = window.getComputedStyle(parentElement).overflowY;
+    var hasScrollbar = overflowY === 'auto' || overflowY === 'scroll';
+    while (parentElement !== null && !hasScrollbar) {
+        parentElement = (_a = parentElement.parentElement) !== null && _a !== void 0 ? _a : null;
+    }
+    return parentElement;
+}
+var WithPagination = /** @class */ (function (_super) {
+    __extends(WithPagination, _super);
+    function WithPagination(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            currentPage: 1,
+            items: null,
+        };
+        _this.switchPage = _this.switchPage.bind(_this);
+        _this.getPageSize = _this.getPageSize.bind(_this);
+        _this.pageCount = 0;
+        _this.abortController = new window.AbortController(); // window. needed for unit tests
+        _this.ref = null;
+        _this.inProgress = false;
+        return _this;
+    }
+    WithPagination.prototype.getPageSize = function () {
+        var _a;
+        return (_a = this.props.pageSize) !== null && _a !== void 0 ? _a : 20;
+    };
+    WithPagination.prototype.switchPage = function (page) {
+        var _this = this;
+        if (this.inProgress) {
+            this.abortController.abort();
+        }
+        this.inProgress = true;
+        this.props.getItems(page, this.abortController.signal).then(function (res) {
+            _this.inProgress = false;
+            _this.setState({ items: res.items, currentPage: page }, function () {
+                var _a;
+                var scrollableEl = getScrollParent(_this.ref);
+                var diff = scrollableEl != null && ((_a = _this.ref) === null || _a === void 0 ? void 0 : _a.scrollHeight) != null
+                    ? scrollableEl.offsetHeight - _this.ref.scrollHeight
+                    : null;
+                if (scrollableEl != null) {
+                    scrollableEl.scrollTop = diff != null ? diff : 0;
+                }
+            });
+        });
+    };
+    WithPagination.prototype.componentDidMount = function () {
+        var _this = this;
+        this.props.getItems(1, this.abortController.signal).then(function (res) {
+            _this.pageCount = Math.ceil(res.itemCount / _this.getPageSize());
+            _this.setState({ items: res.items });
+        });
+    };
+    WithPagination.prototype.render = function () {
+        var _this = this;
+        if (this.state.items == null) {
+            return null;
+        }
+        var pageElements = getPagination(this.state.currentPage, this.pageCount).map(function (el, i) {
+            if (el === 'dots') {
+                return (React.createElement("span", { "data-test-id": "more-pages", className: 'sd-pagination__item sd-pagination__item--more' }, "..."));
+            }
+            else {
+                return (React.createElement("button", { "data-test-id": "page-button-".concat(i), className: _this.state.currentPage === el
+                        ? 'sd-pagination__item sd-pagination__item--active'
+                        : 'sd-pagination__item', onClick: function () { return _this.switchPage(el); } }, el));
+            }
+        });
+        pageElements.unshift(React.createElement(React.Fragment, null,
+            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); } },
+                React.createElement(Icon_1.Icon, { name: 'backward-thin' })),
+            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); } },
+                React.createElement(Icon_1.Icon, { name: 'chevron-left-thin' }))));
+        pageElements.push(React.createElement(React.Fragment, null,
+            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 },
+                React.createElement(Icon_1.Icon, { name: 'chevron-right-thin' })),
+            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 },
+                React.createElement(Icon_1.Icon, { name: 'forward-thin' }))));
+        var StyledPagination = function () { return (React.createElement("div", { style: {
+                display: 'flex',
+                flexDirection: 'row',
+                justifyContent: 'center',
+            } }, pageElements)); };
+        return (React.createElement("div", { style: {
+                height: '100%',
+                width: '100%',
+                display: 'flex',
+                flexDirection: 'column',
+            }, ref: function (element) {
+                _this.ref = element;
+            } },
+            React.createElement(StyledPagination, null),
+            this.props.children(this.state.items),
+            React.createElement(StyledPagination, null)));
+    };
+    return WithPagination;
+}(React.PureComponent));
+exports.WithPagination = WithPagination;

package/react/components/WithSizeObserver.js

@@ -27,7 +27,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/react/components/_Positioner.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { PopperOptions } from 'popper.js';
-declare type ICloseOthersEvent = CustomEvent<{
+type ICloseOthersEvent = CustomEvent<{
     triggerElement: HTMLElement;
 }>;
 interface IPropsPositioner {

package/react/components/_Positioner.js

@@ -27,7 +27,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/react/index.d.ts

@@ -3,6 +3,7 @@ export { Button } from './components/Button';
 export { Input } from './components/Input';
 export { Select, Option } from './components/Select';
 export { SelectWithTemplate } from './components/SelectWithTemplate';
+export { WithPagination } from './components/WithPagination';
 export { Popover } from './components/Popover';
 export { Label } from './components/Label';
 export { Badge } from './components/Badge';
@@ -82,5 +83,6 @@ export { TreeSelect } from './components/TreeSelect';
 export { TableList, TableListItem } from './components/Lists/TableList';
 export { ContentListItem } from './components/Lists/ContentList';
 export { MultiSelect } from './components/MultiSelect';
+export { ResizablePanels } from './components/ResizablePanels';
 export declare const ToggleBoxNext: any;
 export declare const reactToAngular1: any;

package/react/index.js

@@ -3,7 +3,11 @@
 // all exports in this file must also be exported from ../app/index.js
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -12,8 +16,9 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DropdownLabel = 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.SelectWithTemplate = exports.Option = exports.Select = exports.Input = exports.Button = exports.HelloWorld = void 0;
-exports.MultiSelect = 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 = void 0;
+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;
+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;
+exports.ResizablePanels = exports.MultiSelect = void 0;
 var HelloWorld_1 = require("./components/HelloWorld");
 Object.defineProperty(exports, "HelloWorld", { enumerable: true, get: function () { return HelloWorld_1.HelloWorld; } });
 var Button_1 = require("./components/Button");
@@ -25,6 +30,8 @@ Object.defineProperty(exports, "Select", { enumerable: true, get: function () {
 Object.defineProperty(exports, "Option", { enumerable: true, get: function () { return Select_1.Option; } });
 var SelectWithTemplate_1 = require("./components/SelectWithTemplate");
 Object.defineProperty(exports, "SelectWithTemplate", { enumerable: true, get: function () { return SelectWithTemplate_1.SelectWithTemplate; } });
+var WithPagination_1 = require("./components/WithPagination");
+Object.defineProperty(exports, "WithPagination", { enumerable: true, get: function () { return WithPagination_1.WithPagination; } });
 var Popover_1 = require("./components/Popover");
 Object.defineProperty(exports, "Popover", { enumerable: true, get: function () { return Popover_1.Popover; } });
 var Label_1 = require("./components/Label");
@@ -197,3 +204,5 @@ var ContentList_1 = require("./components/Lists/ContentList");
 Object.defineProperty(exports, "ContentListItem", { enumerable: true, get: function () { return ContentList_1.ContentListItem; } });
 var MultiSelect_1 = require("./components/MultiSelect");
 Object.defineProperty(exports, "MultiSelect", { enumerable: true, get: function () { return MultiSelect_1.MultiSelect; } });
+var ResizablePanels_1 = require("./components/ResizablePanels");
+Object.defineProperty(exports, "ResizablePanels", { enumerable: true, get: function () { return ResizablePanels_1.ResizablePanels; } });

package/tsconfig.json

@@ -30,4 +30,4 @@
         "allowSyntheticDefaultImports": true,
         "esModuleInterop": true
     },
-}
+}

package/spec/scenarios.js

@@ -1,13 +0,0 @@
-'use strict';
-
-describe('superdesk ui framework', function () {
-
-    beforeEach(function () {
-        browser.get('/examples/');
-    });
-
-    it('open modal', function () {
-        element(by.css('[ng-click="openModal(\'modalActive\')"] ')).click();
-        expect(element(by.className('modal__dialog')).isDisplayed()).toBeTruthy();
-    });
-});