superdesk-ui-framework 2.4.19 → 2.4.20

package/react/components/Spinner.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import './../../app/styles/_spinner.scss';
+declare class LoadingOverlay extends React.PureComponent {
+    render(): JSX.Element;
+}
+interface IProps {
+    size?: 'mini' | 'small' | 'medium' | 'large';
+}
+declare class Spinner extends React.PureComponent<IProps> {
+    render(): JSX.Element;
+}
+export { Spinner, LoadingOverlay };

package/react/components/Spinner.js

@@ -0,0 +1,70 @@
+"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 (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        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;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoadingOverlay = exports.Spinner = void 0;
+var React = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+require("./../../app/styles/_spinner.scss");
+var LoadingOverlay = /** @class */ (function (_super) {
+    __extends(LoadingOverlay, _super);
+    function LoadingOverlay() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    LoadingOverlay.prototype.render = function () {
+        return (React.createElement("div", { className: "sd-loading-overlay--plain" }, this.props.children));
+    };
+    return LoadingOverlay;
+}(React.PureComponent));
+exports.LoadingOverlay = LoadingOverlay;
+var Spinner = /** @class */ (function (_super) {
+    __extends(Spinner, _super);
+    function Spinner() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Spinner.prototype.render = function () {
+        var _a;
+        var classes = classnames_1.default('sd-spinner', (_a = {
+                'sd-spinner--small': this.props.size === undefined
+            },
+            _a["sd-spinner--" + this.props.size] = this.props.size || this.props.size !== undefined,
+            _a));
+        return (React.createElement("svg", { role: "progressbar", className: classes, viewBox: "0 0 50 50" },
+            React.createElement("circle", { className: "sd-spinner__path", cx: "25", cy: "25", r: "20", fill: "none", "stroke-width": "5" })));
+    };
+    return Spinner;
+}(React.PureComponent));
+exports.Spinner = Spinner;

package/react/components/TabCustom.d.ts

@@ -1,26 +1,36 @@
-/// <reference types="react" />
+import * as React from 'react';
 interface ITabs {
     size?: 'normal' | 'large' | 'small';
     theme?: 'light' | 'dark';
     ariaLabel?: string;
     children: Array<any>;
-    onClick(i: number): void;
+    onClick(id: string): void;
+    tabs?: Array<{
+        label: string;
+        id: string;
+    }>;
+    activePanel: string;
 }
 interface ITabLabel {
-    label: string;
-    indexValue: number;
+    label?: string;
+    id: string;
+    children: Array<any>;
 }
 interface ITabContent {
     theme?: 'light' | 'dark';
-    children: any;
-    activePanel: number;
+    children: Array<any>;
+    activePanel: string;
+    tabs?: Array<{
+        content: React.ReactNode | string;
+        id: string;
+    }>;
 }
 interface ITabPanel {
-    indexValue: number;
-    children: any;
+    id: string;
+    children: Array<any>;
 }
-export declare const TabLabel: ({ label }: ITabLabel) => JSX.Element;
-export declare const Tabs: ({ size, theme, ariaLabel, children, onClick }: ITabs) => JSX.Element;
-export declare const TabContent: ({ theme, children, activePanel }: ITabContent) => JSX.Element;
-export declare const TabPanel: ({ children, indexValue }: ITabPanel) => JSX.Element;
+export declare const TabNav: ({ size, theme, ariaLabel, children, onClick, tabs, activePanel }: ITabs) => JSX.Element;
+export declare const TabContent: ({ theme, children, activePanel, tabs }: ITabContent) => JSX.Element;
+export declare const TabItem: ({ children }: ITabLabel) => JSX.Element;
+export declare const TabPanel: ({ children, id }: ITabPanel) => JSX.Element;
 export {};

package/react/components/TabCustom.js

@@ -22,41 +22,70 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TabPanel = exports.TabContent = exports.Tabs = exports.TabLabel = void 0;
+exports.TabPanel = exports.TabItem = exports.TabContent = exports.TabNav = void 0;
 var React = __importStar(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
-exports.TabLabel = function (_a) {
-    var label = _a.label;
-    return (React.createElement("span", null, label));
-};
-exports.Tabs = function (_a) {
+exports.TabNav = function (_a) {
     var _b;
-    var size = _a.size, theme = _a.theme, ariaLabel = _a.ariaLabel, children = _a.children, onClick = _a.onClick;
+    var size = _a.size, theme = _a.theme, ariaLabel = _a.ariaLabel, children = _a.children, onClick = _a.onClick, tabs = _a.tabs, activePanel = _a.activePanel;
     var _c = React.useState(0), index = _c[0], setIndex = _c[1];
-    function handleSelected(i) {
-        setIndex(i);
-        handleClick(i);
+    function goTo(id) {
+        if (tabs) {
+            var refLabel = tabs === null || tabs === void 0 ? void 0 : tabs.find(function (item) { return item.id === id; });
+            if (refLabel) {
+                setIndex(tabs.indexOf(refLabel));
+            }
+        }
+        else {
+            var refLabel = children.find(function (item) { return item.props.id === id; });
+            setIndex(children.indexOf(refLabel));
+        }
+    }
+    React.useEffect(function () {
+        goTo(activePanel ? activePanel : (tabs ? tabs[0].id : children[0].props.id));
+    }, []);
+    function handleSelected(id) {
+        goTo(id);
+        onClick(id);
     }
-    var handleClick = function (i) {
-        onClick(i);
-    };
     var classes = classnames_1.default('sd-nav-tabs', (_b = {},
         _b["sd-nav-tabs--" + size] = size && size !== undefined,
         _b['sd-nav-tabs--ui-dark'] = theme === 'dark',
         _b));
-    return (React.createElement("div", { className: classes, role: 'tablist', "aria-label": ariaLabel ? ariaLabel : 'tabs' }, children.map(function (item, i) {
-        return React.createElement("button", { key: i, "aria-controls": 'tabpanel-' + i, className: 'sd-nav-tabs__tab' + (index === i ? ' sd-nav-tabs__tab--active' : ''), onClick: function () { return handleSelected(i); }, role: 'tab', "aria-selected": index === i ? 'true' : 'false' }, item);
-    })));
+    return (React.createElement("div", { className: classes, role: 'tablist', "aria-label": ariaLabel ? ariaLabel : 'tabs' }, tabs ?
+        tabs.map(function (item, i) {
+            return React.createElement("button", { id: "tab-" + item.id, key: i, "aria-controls": 'tabpanel-' + item.id, className: 'sd-nav-tabs__tab' + (index === i ? ' sd-nav-tabs__tab--active' : ''), onClick: function () { return handleSelected(item.id); }, role: 'tab', "aria-selected": index === i ? 'true' : 'false' }, item.label);
+        })
+        :
+            children.map(function (item, i) {
+                return React.createElement("button", { id: "tab-" + item.props.id, key: i, "aria-controls": 'tabpanel-' + item.props.id, className: 'sd-nav-tabs__tab' + (index === i ? ' sd-nav-tabs__tab--active' : ''), onClick: function () { return handleSelected(item.props.id); }, role: 'tab', "aria-selected": index === i ? 'true' : 'false' }, item);
+            })));
 };
 exports.TabContent = function (_a) {
-    var theme = _a.theme, children = _a.children, activePanel = _a.activePanel;
+    var theme = _a.theme, children = _a.children, activePanel = _a.activePanel, tabs = _a.tabs;
+    if (!activePanel && tabs) {
+        activePanel = tabs[0].id;
+    }
+    else if (!activePanel && children) {
+        activePanel = children[0].props.id;
+    }
     return (React.createElement("div", { className: 'sd-nav-tabs__content' +
-            (theme === 'dark' ? ' sd-nav-tabs__content--ui-dark' : '') }, children.map(function (panel, i) {
-        return panel.props.indexValue === activePanel ?
-            React.createElement("div", { className: 'sd-nav-tabs__pane', role: 'tabpanel', "aria-labelledby": 'tab-' + activePanel, key: i }, panel) : null;
-    })));
+            (theme === 'dark' ? ' sd-nav-tabs__content--ui-dark' : '') }, tabs ?
+        tabs.map(function (panel, i) {
+            return panel.id === activePanel ?
+                React.createElement("div", { className: 'sd-nav-tabs__pane', role: 'tabpanel', "aria-labelledby": "tab-" + panel.id, key: i }, panel.content) : null;
+        })
+        :
+            children.map(function (panel, i) {
+                return panel.props.id === activePanel ?
+                    React.createElement("div", { className: 'sd-nav-tabs__pane', role: 'tabpanel', "aria-labelledby": "tab-" + panel.props.id, key: i }, panel) : null;
+            })));
+};
+exports.TabItem = function (_a) {
+    var children = _a.children;
+    return (React.createElement("span", null, children));
 };
 exports.TabPanel = function (_a) {
-    var children = _a.children, indexValue = _a.indexValue;
-    return (React.createElement(React.Fragment, { key: indexValue }, children));
+    var children = _a.children, id = _a.id;
+    return (React.createElement(React.Fragment, { key: id }, children));
 };

package/react/components/TabList.d.ts

@@ -3,20 +3,29 @@ interface ITabList {
     size?: 'normal' | 'large' | 'small';
     theme?: 'light' | 'dark';
     children: Array<any>;
+    selected?: string;
+    tabs?: Array<{
+        label: string;
+        content: React.ReactNode | string;
+        id?: string;
+    }>;
 }
 interface IState {
     index: number;
 }
 interface ITab {
-    label: string;
+    id?: string;
+    label?: string;
 }
 declare class Tab extends React.PureComponent<ITab> {
     render(): JSX.Element;
 }
 declare class TabList extends React.PureComponent<ITabList, IState> {
     constructor(props: ITabList);
+    componentDidMount(): void;
     private handleChange;
-    goTo(label: string): void;
+    goTo(index: string): void;
+    private navBar;
     render(): JSX.Element;
 }
 export { Tab, TabList };

package/react/components/TabList.js

@@ -60,31 +60,52 @@ var TabList = /** @class */ (function (_super) {
         _this.goTo = _this.goTo.bind(_this);
         return _this;
     }
+    TabList.prototype.componentDidMount = function () {
+        var _a;
+        if (this.props.selected) {
+            this.goTo((_a = this.props.selected) !== null && _a !== void 0 ? _a : '');
+        }
+    };
     TabList.prototype.handleChange = function (index) {
         this.setState({
             index: index,
         });
     };
-    TabList.prototype.goTo = function (label) {
-        var refLabel = this.props.children.find(function (item) { return item.props.label === label; });
-        this.setState({
-            index: this.props.children.indexOf(refLabel),
+    TabList.prototype.goTo = function (index) {
+        var _a, _b;
+        if (this.props.tabs) {
+            var refLabel = (_a = this.props.tabs) === null || _a === void 0 ? void 0 : _a.find(function (item) { return item.id === index; });
+            this.setState({
+                index: refLabel ? (_b = this.props.tabs) === null || _b === void 0 ? void 0 : _b.indexOf(refLabel) : 0,
+            });
+        }
+        else {
+            var refLabel = this.props.children.find(function (item) { return item.props.id === index; });
+            this.setState({
+                index: this.props.children.indexOf(refLabel),
+            });
+        }
+    };
+    TabList.prototype.navBar = function (arr) {
+        var _this = this;
+        return arr.map(function (item, index) {
+            var label = _this.props.tabs ? item.label : item.props.label;
+            return React.createElement("button", { id: "TabList-" + index, key: index, onClick: function () { return _this.handleChange(index); }, role: 'tab', "aria-selected": _this.state.index === index ? 'true' : 'false', className: 'sd-nav-tabs__tab' + (_this.state.index === index ? ' sd-nav-tabs__tab--active' : '') },
+                React.createElement("span", null, label));
         });
     };
     TabList.prototype.render = function () {
         var _a;
-        var _this = this;
         var classes = classnames_1.default('sd-nav-tabs', (_a = {},
             _a["sd-nav-tabs--" + this.props.size] = this.props.size && this.props.size !== undefined,
             _a['sd-nav-tabs--ui-dark'] = this.props.theme === 'dark',
             _a));
         return (React.createElement(React.Fragment, null,
-            React.createElement("div", { className: classes, role: 'tablist' }, this.props.children.map(function (item, index) {
-                return React.createElement("button", { key: index, onClick: function () { return _this.handleChange(index); }, role: 'tab', "aria-selected": _this.state.index === index ? 'true' : 'false', className: 'sd-nav-tabs__tab' + (_this.state.index === index ? ' sd-nav-tabs__tab--active' : '') },
-                    React.createElement("span", null, item.props.label));
-            })),
-            React.createElement("div", { className: 'sd-nav-tabs__content' +
-                    (this.props.theme === 'dark' ? ' sd-nav-tabs__content--ui-dark' : '') }, this.props.children[this.state.index])));
+            React.createElement("div", { className: classes, role: 'tablist' }, this.props.tabs ? this.navBar(this.props.tabs) : this.navBar(this.props.children)),
+            React.createElement("div", { "aria-labelledby": "TabList-" + this.state.index, role: 'tabpanel', className: 'sd-nav-tabs__content' +
+                    (this.props.theme === 'dark' ? ' sd-nav-tabs__content--ui-dark' : '') }, this.props.tabs
+                ? React.createElement(Tab, { id: this.props.tabs[this.state.index].id }, this.props.tabs[this.state.index].content)
+                : this.props.children[this.state.index])));
     };
     return TabList;
 }(React.PureComponent));

package/react/index.d.ts

@@ -44,7 +44,7 @@ export { DropdownLabel } from './components/DropdownFirst';
 export { DropdownDivider } from './components/DropdownFirst';
 export { Dropdown } from './components/Dropdown';
 export { Tag } from './components/Tag';
-export { TabLabel, TabPanel, TabContent, Tabs } from './components/TabCustom';
+export { TabItem, TabPanel, TabContent, TabNav } from './components/TabCustom';
 export { EmptyState } from './components/EmptyState';
 export { Autocomplete } from './components/Autocomplete';
 export { DonutChart } from './components/DonutChart';

package/react/index.js

@@ -96,10 +96,10 @@ Object.defineProperty(exports, "Dropdown", { enumerable: true, get: function ()
 var Tag_1 = require("./components/Tag");
 Object.defineProperty(exports, "Tag", { enumerable: true, get: function () { return Tag_1.Tag; } });
 var TabCustom_1 = require("./components/TabCustom");
-Object.defineProperty(exports, "TabLabel", { enumerable: true, get: function () { return TabCustom_1.TabLabel; } });
+Object.defineProperty(exports, "TabItem", { enumerable: true, get: function () { return TabCustom_1.TabItem; } });
 Object.defineProperty(exports, "TabPanel", { enumerable: true, get: function () { return TabCustom_1.TabPanel; } });
 Object.defineProperty(exports, "TabContent", { enumerable: true, get: function () { return TabCustom_1.TabContent; } });
-Object.defineProperty(exports, "Tabs", { enumerable: true, get: function () { return TabCustom_1.Tabs; } });
+Object.defineProperty(exports, "TabNav", { enumerable: true, get: function () { return TabCustom_1.TabNav; } });
 var EmptyState_1 = require("./components/EmptyState");
 Object.defineProperty(exports, "EmptyState", { enumerable: true, get: function () { return EmptyState_1.EmptyState; } });
 var Autocomplete_1 = require("./components/Autocomplete");