superdesk-ui-framework 3.0.65 → 3.0.67

package/react/examples/pages/playgrounds/react-playgrounds/components/PanelHeader.js

@@ -0,0 +1,63 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PanelHeader = void 0;
+var React = __importStar(require("react"));
+var index_1 = require("../../../../../app-typescript/index");
+var PanelHeader = /** @class */ (function (_super) {
+    __extends(PanelHeader, _super);
+    function PanelHeader(props) {
+        var _this = _super.call(this, props) || this;
+        _this.handleFilter = _this.handleFilter.bind(_this);
+        return _this;
+    }
+    PanelHeader.prototype.handleFilter = function () {
+        this.props.handleFilterParent();
+    };
+    PanelHeader.prototype.render = function () {
+        return (React.createElement("div", { className: "side-panel__header side-panel__header--border-b" },
+            React.createElement("a", { className: "icn-btn side-panel__close", onClick: this.handleFilter },
+                React.createElement(index_1.Icon, { name: 'close-small' })),
+            React.createElement("h3", { className: "side-panel__heading" }, this.props.title),
+            this.props.children));
+    };
+    return PanelHeader;
+}(React.PureComponent));
+exports.PanelHeader = PanelHeader;

package/react/examples/pages/playgrounds/react-playgrounds/components/RightPanel.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+interface IProps {
+    children?: React.ReactNode;
+    open?: boolean;
+}
+export declare class RightPanel extends React.PureComponent<IProps> {
+    render(): JSX.Element;
+}
+export {};

package/react/examples/pages/playgrounds/react-playgrounds/components/RightPanel.js

@@ -0,0 +1,53 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RightPanel = void 0;
+var React = __importStar(require("react"));
+var RightPanel = /** @class */ (function (_super) {
+    __extends(RightPanel, _super);
+    function RightPanel() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    RightPanel.prototype.render = function () {
+        return (React.createElement("div", { className: 'sd-main-content-grid__preview' + (this.props.open ? ' open-preview' : '') }, this.props.children));
+    };
+    return RightPanel;
+}(React.PureComponent));
+exports.RightPanel = RightPanel;

package/react/examples/pages/playgrounds/react-playgrounds/components/SearchBar.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+interface IProps {
+    value?: string | number;
+    type?: 'expanded' | 'collapsed' | 'boxed';
+    placeholder: string;
+    focused?: boolean;
+    boxed?: boolean;
+    onSubmit?(): void;
+}
+interface IState {
+    inputValue: any;
+    type: string;
+    focused: boolean;
+    boxed?: boolean;
+}
+export declare class SearchBar extends React.PureComponent<IProps, IState> {
+    private inputRef;
+    constructor(props: IProps);
+    componentDidUpdate(prevProps: any): void;
+    componentDidMount: () => void;
+    render(): JSX.Element;
+}
+export {};

package/react/examples/pages/playgrounds/react-playgrounds/components/SearchBar.js

@@ -0,0 +1,92 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchBar = void 0;
+var React = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var index_1 = require("../../../../../app-typescript/index");
+var SearchBar = /** @class */ (function (_super) {
+    __extends(SearchBar, _super);
+    function SearchBar(props) {
+        var _this = _super.call(this, props) || this;
+        _this.componentDidMount = function () {
+            document.addEventListener("mousedown", function (event) {
+                if (_this.inputRef.current && !_this.inputRef.current.contains(event.target)) {
+                    _this.setState({ focused: false });
+                }
+            });
+        };
+        _this.state = {
+            inputValue: _this.props.value ? _this.props.value : '',
+            focused: _this.props.focused ? _this.props.focused : false,
+            type: _this.props.type ? _this.props.type : 'expanded',
+            boxed: _this.props.boxed ? _this.props.boxed : false,
+        };
+        _this.inputRef = React.createRef();
+        return _this;
+    }
+    SearchBar.prototype.componentDidUpdate = function (prevProps) {
+        if (prevProps.value !== this.props.value) {
+            this.setState({ inputValue: this.props.value });
+        }
+    };
+    SearchBar.prototype.render = function () {
+        var _a;
+        var _this = this;
+        var classes = (0, classnames_1.default)('sd-searchbar', (_a = {},
+            _a["sd-searchbar--".concat(this.state.type)] = this.props.type,
+            _a['sd-searchbar--expanded'] = this.state.type === 'expanded' || this.props.type === undefined,
+            _a['sd-searchbar--focused'] = this.state.focused,
+            _a['sd-searchbar--boxed'] = this.state.boxed,
+            _a));
+        return (React.createElement("div", { className: classes, ref: this.inputRef },
+            React.createElement("label", { className: "sd-searchbar__icon" }),
+            React.createElement("input", { id: "search-input", ref: function (input) { return (input && _this.props.focused) && input.focus(); }, className: "sd-searchbar__input", type: "text", placeholder: this.props.placeholder, value: this.state.inputValue, onChange: function (e) { return _this.setState({ inputValue: e.target.value }); }, onFocus: function () { return _this.setState({ focused: true }); } }),
+            this.state.inputValue && (React.createElement("button", { className: "sd-searchbar__cancel", onClick: function () { return _this.setState({ inputValue: '' }); } },
+                React.createElement(index_1.Icon, { name: 'remove-sign' }))),
+            React.createElement("button", { id: "sd-searchbar__search-btn", className: "sd-searchbar__search-btn", onSubmit: function () { return _this.props.onSubmit; } },
+                React.createElement(index_1.Icon, { name: 'chevron-right-thin' }))));
+    };
+    return SearchBar;
+}(React.PureComponent));
+exports.SearchBar = SearchBar;

package/react/examples/pages/playgrounds/react-playgrounds/components/SidebarMenu.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+interface IProps {
+    items: Array<IItem | 'divider'>;
+}
+interface IItem {
+    icon: string;
+    size: 'small' | 'big';
+    tooltip?: string;
+    active?: boolean;
+}
+interface IState {
+    index: number;
+    closeIndex: number;
+}
+export declare class SidebarMenu extends React.PureComponent<IProps, IState> {
+    constructor(props: IProps);
+    handleClick(indexNumber: number): void;
+    render(): JSX.Element;
+}
+export {};

package/react/examples/pages/playgrounds/react-playgrounds/components/SidebarMenu.js

@@ -0,0 +1,83 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarMenu = void 0;
+var React = __importStar(require("react"));
+var Icon_1 = require("../../../../../app-typescript/components/Icon");
+var SidebarMenu = /** @class */ (function (_super) {
+    __extends(SidebarMenu, _super);
+    function SidebarMenu(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            index: -1,
+            closeIndex: -1,
+        };
+        _this.handleClick = _this.handleClick.bind(_this);
+        return _this;
+    }
+    SidebarMenu.prototype.handleClick = function (indexNumber) {
+        this.setState({
+            index: indexNumber,
+        });
+        if (this.state.index === indexNumber) {
+            this.setState({
+                closeIndex: indexNumber,
+            });
+        }
+    };
+    SidebarMenu.prototype.render = function () {
+        var _this = this;
+        return (React.createElement("div", { className: 'sd-sidebar-menu sd-content-wrapper__left-tabs' },
+            React.createElement("ul", { className: 'authoring-active' }, this.props.items.map(function (item, index) {
+                if (item === 'divider') {
+                    return (React.createElement("li", { key: index, className: 'sd-sidebar-menu__spacer' }));
+                }
+                else {
+                    return (React.createElement("li", { key: index, "data-sd-tooltip": item['tooltip'], "data-flow": 'right' },
+                        React.createElement("a", { className: 'sd-sidebar-menu__btn' + (index === _this.state.closeIndex ? ' sd-sidebar-menu__btn--closed ' : '') + (item['active'] ? ' sd-sidebar-menu__btn--active' : (index === _this.state.index ? ' sd-sidebar-menu__btn--active' : '')), onClick: function () { return _this.handleClick(index); } },
+                            React.createElement("span", { className: 'sd-sidebar-menu__main-icon ' },
+                                React.createElement(Icon_1.Icon, { size: item['size'], name: item['icon'] })),
+                            React.createElement("i", { className: 'sd-sidebar-menu__helper-icon big-icon--chevron-left' }))));
+                }
+            }))));
+    };
+    return SidebarMenu;
+}(React.PureComponent));
+exports.SidebarMenu = SidebarMenu;

package/react/examples/pages/playgrounds/react-playgrounds/components/SubNav.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+interface IProps {
+    theme?: 'light' | 'dark';
+    children?: React.ReactNode;
+}
+export declare class SubNav extends React.PureComponent<IProps> {
+    render(): JSX.Element;
+}
+export {};

package/react/examples/pages/playgrounds/react-playgrounds/components/SubNav.js

@@ -0,0 +1,60 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SubNav = void 0;
+var React = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var SubNav = /** @class */ (function (_super) {
+    __extends(SubNav, _super);
+    function SubNav() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    SubNav.prototype.render = function () {
+        var classes = (0, classnames_1.default)('subnav', {
+            'subnav-darker': this.props.theme,
+        });
+        return (React.createElement("div", { className: classes }, this.props.children));
+    };
+    return SubNav;
+}(React.PureComponent));
+exports.SubNav = SubNav;

package/tsconfig.json

@@ -1,5 +1,9 @@
 {
-    "files": ["./app-typescript/index.ts", "./globals.d.ts"],
+    "files": [
+        "./app-typescript/index.ts",
+        "./globals.d.ts",
+        "./examples/pages/playgrounds/react-playgrounds/Index.tsx"
+    ],
     "compilerOptions": {
         "outDir": "./react",
         "module": "commonjs",