superdesk-ui-framework 3.0.14 → 3.0.15

package/dist/vendor.bundle.js

@@ -7,7 +7,7 @@
 		var a = typeof exports === 'object' ? factory(require("react"), require("react-dom")) : factory(root["react"], root["react-dom"]);
 		for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
 	}
-})(typeof self !== 'undefined' ? self : this, function(__WEBPACK_EXTERNAL_MODULE_0__, __WEBPACK_EXTERNAL_MODULE_8__) {
+})(typeof self !== 'undefined' ? self : this, function(__WEBPACK_EXTERNAL_MODULE_0__, __WEBPACK_EXTERNAL_MODULE_9__) {
 return /******/ (function(modules) { // webpackBootstrap
 /******/ 	// The module cache
 /******/ 	var installedModules = {};
@@ -70,7 +70,7 @@ return /******/ (function(modules) { // webpackBootstrap
 /******/ 	__webpack_require__.p = "";
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 538);
+/******/ 	return __webpack_require__(__webpack_require__.s = 553);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -82,7 +82,7 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_0__;
 
 /***/ }),
 
-/***/ 34:
+/***/ 33:
 /***/ (function(module, exports, __webpack_require__) {
 
 /* WEBPACK VAR INJECTION */(function(global, module) {var __WEBPACK_AMD_DEFINE_RESULT__;/**
@@ -28246,29 +28246,29 @@ module.exports = function(module) {
 
 /***/ }),
 
-/***/ 538:
+/***/ 553:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-__webpack_require__(34);
+__webpack_require__(33);
 
 __webpack_require__(42);
 
-__webpack_require__(539);
+__webpack_require__(554);
 
-__webpack_require__(541);
+__webpack_require__(556);
 
-__webpack_require__(543);
+__webpack_require__(558);
 
 __webpack_require__(0);
 
-__webpack_require__(8);
+__webpack_require__(9);
 
 /***/ }),
 
-/***/ 539:
+/***/ 554:
 /***/ (function(module, exports, __webpack_require__) {
 
 var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
@@ -28292,7 +28292,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
 	if ( true ) {
 
 		// AMD. Register as an anonymous module.
-		!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(42), __webpack_require__(540) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
+		!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(42), __webpack_require__(555) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
 				__WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?
 				(__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__),
 				__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
@@ -29030,7 +29030,7 @@ return $.widget;
 
 /***/ }),
 
-/***/ 540:
+/***/ 555:
 /***/ (function(module, exports, __webpack_require__) {
 
 var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;( function( factory ) {
@@ -29060,16 +29060,16 @@ return $.ui.version = "1.13.0";
 
 /***/ }),
 
-/***/ 541:
+/***/ 556:
 /***/ (function(module, exports, __webpack_require__) {
 
-__webpack_require__(542);
+__webpack_require__(557);
 module.exports = angular;
 
 
 /***/ }),
 
-/***/ 542:
+/***/ 557:
 /***/ (function(module, exports, __webpack_require__) {
 
 /* WEBPACK VAR INJECTION */(function(__webpack_provided_window_dot_jQuery) {/**
@@ -65676,16 +65676,16 @@ $provide.value("$locale", {
 
 /***/ }),
 
-/***/ 543:
+/***/ 558:
 /***/ (function(module, exports, __webpack_require__) {
 
-__webpack_require__(544);
+__webpack_require__(559);
 module.exports = 'ngAnimate';
 
 
 /***/ }),
 
-/***/ 544:
+/***/ 559:
 /***/ (function(module, exports) {
 
 /**
@@ -69964,10 +69964,10 @@ angular.module('ngAnimate', [], function initAngularHelpers() {
 
 /***/ }),
 
-/***/ 8:
+/***/ 9:
 /***/ (function(module, exports) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_8__;
+module.exports = __WEBPACK_EXTERNAL_MODULE_9__;
 
 /***/ })
 

package/examples/pages/react/Index.tsx

@@ -62,9 +62,11 @@ import { SelectWithTemplateDocs } from './SelectWithTemplate';
 import { MultiselectDocs } from './MultiSelect';
 import { TreeSelectDocs } from './TreeSelect';
 import DurationInputDoc from './DurationInput';
+import {WithPaginationDocs} from './WithPaginationDocs';
 import { PopoverDoc } from './Popover';
 import { MenuDocs } from './Menu';
 import {WithSizeObserverDocs} from './WithSizeObserver';
+import {ResizablePanelsDoc} from './ResizablePanels';
 
 const pages = {
     basicComponents: {
@@ -166,6 +168,9 @@ const pages = {
             "togglebox": {
                 name: "Togglebox"
             },
+            "resizable-panels": {
+                name: "Resizable panels"
+            },
         }
     },
     textComponents: {
@@ -200,6 +205,9 @@ const pages = {
             'content-list': {
                 name: 'Content list'
             },
+            'with-pagination': {
+                name: 'With pagination'
+            },
         }
     },
     formComponents: {
@@ -342,6 +350,7 @@ class ReactDoc extends React.Component<IProps, IState> {
                         <Route path="/react/multiselect" component={MultiselectDocs} />
                         <Route path="/react/treeselect" component={TreeSelectDocs} />
                         <Route path="/react/duration-input" component={DurationInputDoc} />
+                        <Route path="/react/with-pagination" component={WithPaginationDocs} />
                         <Route path="/react/popover" component={PopoverDoc} />
                         <Route path="/react/date-picker" component={DatePickerDoc} />
                         <Route path="/react/time-picker" component={TimePickerDoc} />
@@ -379,6 +388,7 @@ class ReactDoc extends React.Component<IProps, IState> {
                         <Route path="/react/container" component={ContainerDoc} />
                         <Route path="/react/dropzone" component={DropZoneDoc} />
                         <Route path="/react/create-button" component={CreateButtonDoc} />
+                        <Route path="/react/resizable-panels" component={ResizablePanelsDoc} />
                         <Route path="/" component={ReactDefault} />
                     </Switch>
                 </main>
@@ -409,3 +419,4 @@ const parsePlayground = ({ match }, playgrounds) => {
 };
 
 export { ReactDoc, ReactPlayground };
+

package/examples/pages/react/ResizablePanels.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+
+import * as Markup from '../../js/react';
+
+import {ResizablePanels} from '../../../app-typescript';
+import {repeat} from 'lodash';
+
+export class ResizablePanelsDoc extends React.Component {
+    render() {
+        return (
+            <section className='docs-page__container'>
+
+                <h2 className='docs-page__h2'>Resizable panels</h2>
+
+                <p className='docs-page__paragraph'></p>
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <div className='docs-page__content-row docs-page__content-row--no-margin'>
+                            <div className='form__row'>
+                                <ResizablePanels direction="horizontal" secondarySize={{default: 20}}>
+                                    <div>
+                                        {repeat('Lorem ipsum dolor sit amet ', 50)}
+                                    </div>
+
+                                    <div>
+                                        {repeat('Lorem ipsum dolor sit amet ', 50)}
+                                    </div>
+                                </ResizablePanels>
+                            </div>
+                        </div>
+
+                    </Markup.ReactMarkupPreview>
+
+                    <Markup.ReactMarkupCode>{`
+                        <ResizablePanels direction="horizontal" secondarySize={{default: 20}}>
+                            <div>
+                                {repeat('Lorem ipsum dolor sit amet', 50)}
+                            </div>
+
+                            <div>
+                                {repeat('Lorem ipsum dolor sit amet', 50)}
+                            </div>
+                        </ResizablePanels>
+                    `}</Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
+            </section>
+        )
+    }
+}

package/examples/pages/react/WithPaginationDocs.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+
+import * as Markup from '../../js/react';
+
+import {WithPagination} from '../../../app-typescript';
+import {range} from 'lodash';
+
+function getItems(pageNo: number): Promise<{items: Array<number>, itemCount: number}> {
+    return new Promise((resolve) => {
+        setTimeout(() => {
+            return resolve({items: range(1, 500).slice((pageNo - 1) * 20, (pageNo - 1) * 20 + 20), itemCount: 500});
+        }, 1000);
+    });
+};
+
+export class WithPaginationDocs extends React.Component {
+    render() {
+        const wrapperStyle: React.CSSProperties = {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center'
+        };
+
+        return (
+            <section className='docs-page__container'>
+                <h2 className='docs-page__h2'>With pagination</h2>
+                <p className='docs-page__paragraph'></p>
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <WithPagination
+                            getItems={(pageNo) => getItems(pageNo)}
+                        >
+                            {
+                                (items) =>
+                                    <div style={wrapperStyle}>
+                                        {items.map((x, i) => <div key={i}>{x}</div>)}
+                                    </div>
+                            }
+                        </WithPagination>
+                    </Markup.ReactMarkupPreview>
+                    <Markup.ReactMarkupCode>{`
+                        <WithPagination
+                            getItems={(pageNo) => getItems(pageNo)}
+                        >
+                            {
+                                (items) =>
+                                    <div style={wrapperStyle}>
+                                        {items.map((x, i) => <div key={i}>{x}</div>)}
+                                    </div>
+                            }
+                        </WithPagination>
+                    `}</Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
+            </section>
+        )
+    }
+}

package/mocha-setup.ts

@@ -0,0 +1,5 @@
+import 'jsdom-global/register';
+import Enzyme from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
+
+Enzyme.configure({ adapter: new Adapter() })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "superdesk-ui-framework",
-  "version": "3.0.14",
+  "version": "3.0.15",
   "license": "AGPL-3.0",
   "repository": {
     "type": "git",
@@ -23,12 +23,17 @@
     "build-ui": "webpack && tsc && npm run lint",
     "lint": "eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}'",
     "lint-fix": "tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "unit-test": "mocha",
+    "debug-unit-tests": "mocha --inspect-brk"
   },
   "devDependencies": {
+    "@types/assert": "^1.5.6",
     "@types/chart.js": "^2.9.24",
     "@types/classnames": "^2.2.9",
+    "@types/enzyme": "^3.10.12",
     "@types/lodash": "^4.14.161",
+    "@types/mocha": "^9.1.1",
     "@types/react": "16.8.23",
     "@types/react-beautiful-dnd": "^13.1.2",
     "@types/react-dom": "16.8.0",
@@ -58,7 +63,10 @@
     "html-webpack-plugin": "^2.30.1",
     "jquery": "^3.1.1",
     "jquery-ui": "^1.12.1",
+    "jsdom": "20.0.3",
+    "jsdom-global": "3.0.2",
     "lodash": "4.17.21",
+    "mocha": "^8.4.0",
     "node-sass": "6.0",
     "prismjs": "^1.28.0",
     "prop-types": "^15.6.0",
@@ -73,6 +81,7 @@
     "style-loader": "^0.18.2",
     "superdesk-code-style": "^1.1.2",
     "ts-loader": "^6.0.2",
+    "ts-node": "^10.9.1",
     "tslint": "^5.18.0",
     "typescript": "4.9.5",
     "url-loader": "^1.1.2",
@@ -85,9 +94,13 @@
     "@material-ui/lab": "^4.0.0-alpha.56",
     "@popperjs/core": "^2.4.0",
     "@superdesk/primereact": "^5.0.2-10",
+    "@superdesk/react-resizable-panels": "0.0.39",
+    "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/node": "^14.10.2",
     "chart.js": "^2.9.3",
     "date-fns": "2.7.0",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.7",
     "moment": "^2.29.3",
     "popper.js": "1.14.4",
     "primeicons": "2.0.0",

package/react/components/ResizablePanels.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+interface IPanelSize {
+    min?: number;
+    max?: number;
+    default?: number;
+}
+interface IProps {
+    /**
+     * component will set primary dimension(width when horizontal, height when vertical) to 100%
+     * parent component has to support this
+     */
+    direction: 'horizontal' | 'vertical';
+    primarySize?: IPanelSize;
+    secondarySize?: IPanelSize;
+    /**
+     * Only 2 items are supported to keep API surface minimal so it's easy to switch to another library if needed.
+     */
+    children: [React.ReactNode, React.ReactNode];
+}
+/**
+ Features:
+ * No absolute positioning is used
+ * Component height is fully dynamic and adjusts according to children inside panes
+ * Library supports an arbitrary number of panes. We are not using it to keep API minimal.
+ * Drawback: only works with percent units. Can be made to work with pixels
+ * by creating a wrapper that measures available space and converts to percent.
+ */
+export declare class ResizablePanels extends React.PureComponent<IProps> {
+    private primaryPanelRef;
+    private secondaryPanelRef;
+    constructor(props: IProps);
+    render(): React.ReactNode;
+}
+export {};

package/react/components/ResizablePanels.js

@@ -0,0 +1,101 @@
+"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 __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResizablePanels = void 0;
+var React = __importStar(require("react"));
+var react_resizable_panels_1 = require("@superdesk/react-resizable-panels");
+/**
+ Features:
+ * No absolute positioning is used
+ * Component height is fully dynamic and adjusts according to children inside panes
+ * Library supports an arbitrary number of panes. We are not using it to keep API minimal.
+ * Drawback: only works with percent units. Can be made to work with pixels
+ * by creating a wrapper that measures available space and converts to percent.
+ */
+var ResizablePanels = /** @class */ (function (_super) {
+    __extends(ResizablePanels, _super);
+    function ResizablePanels(props) {
+        var _this = _super.call(this, props) || this;
+        _this.primaryPanelRef = null;
+        _this.secondaryPanelRef = null;
+        return _this;
+    }
+    ResizablePanels.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, direction = _a.direction, primarySize = _a.primarySize, secondarySize = _a.secondarySize, children = _a.children;
+        var separatorDimensions = direction === 'horizontal'
+            ? { width: 3, height: '100%' }
+            : { height: 3, width: '100%' };
+        // Sometimes second panel is conditional. Checking here is more convenient.
+        if (children.some(function (child) { return child === false || child == null; })) {
+            return children;
+        }
+        return (React.createElement(react_resizable_panels_1.PanelGroup, { direction: direction },
+            React.createElement(react_resizable_panels_1.Panel, { id: "primary", minSize: primarySize === null || primarySize === void 0 ? void 0 : primarySize.min, maxSize: primarySize === null || primarySize === void 0 ? void 0 : primarySize.max, defaultSize: primarySize === null || primarySize === void 0 ? void 0 : primarySize.default, ref: function (panelRef) {
+                    _this.primaryPanelRef = panelRef;
+                } }, children[0]),
+            React.createElement(react_resizable_panels_1.PanelResizeHandle, null,
+                React.createElement("div", { style: __assign({ background: 'var(--color-text-lighter)' }, separatorDimensions), onDoubleClick: function () {
+                        var _a, _b;
+                        if ((primarySize === null || primarySize === void 0 ? void 0 : primarySize.default) != null) {
+                            (_a = _this.primaryPanelRef) === null || _a === void 0 ? void 0 : _a.resize(primarySize.default);
+                        }
+                        else if ((secondarySize === null || secondarySize === void 0 ? void 0 : secondarySize.default) != null) {
+                            (_b = _this.secondaryPanelRef) === null || _b === void 0 ? void 0 : _b.resize(secondarySize.default);
+                        }
+                    } })),
+            React.createElement(react_resizable_panels_1.Panel, { id: "secondary", minSize: secondarySize === null || secondarySize === void 0 ? void 0 : secondarySize.min, maxSize: secondarySize === null || secondarySize === void 0 ? void 0 : secondarySize.max, defaultSize: secondarySize === null || secondarySize === void 0 ? void 0 : secondarySize.default, ref: function (panelRef) {
+                    _this.secondaryPanelRef = panelRef;
+                } }, children[1])));
+    };
+    return ResizablePanels;
+}(React.PureComponent));
+exports.ResizablePanels = ResizablePanels;

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 {};