superdesk-ui-framework 3.0.65 → 3.0.67

package/react/examples/pages/playgrounds/react-playgrounds/SamsPlayground.js

@@ -0,0 +1,241 @@
+"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.SamsPlayground = void 0;
+var React = __importStar(require("react"));
+var Components = __importStar(require("./components/Index"));
+var index_1 = require("../../../../app-typescript/index");
+var GridElements = __importStar(require("../../../../app-typescript/components/GridItem"));
+var items_1 = __importDefault(require("../dummy-data/items"));
+var SamsPlayground = /** @class */ (function (_super) {
+    __extends(SamsPlayground, _super);
+    function SamsPlayground(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            theme: 'light',
+            itemType: 'itemtype01',
+            dropDownState: '',
+            openPreview: false,
+            openFilter: false,
+            itemSelected1: false,
+            itemSelected2: false,
+            itemSelected3: false,
+            value1: false,
+        };
+        _this.handleFilter = _this.handleFilter.bind(_this);
+        _this.handlePreview = _this.handlePreview.bind(_this);
+        _this.handleTheme = _this.handleTheme.bind(_this);
+        return _this;
+    }
+    SamsPlayground.prototype.handleFilter = function () {
+        this.setState(function (state) { return ({
+            openFilter: !state.openFilter,
+        }); });
+    };
+    SamsPlayground.prototype.handlePreview = function () {
+        this.setState(function (state) { return ({
+            openPreview: !state.openPreview,
+        }); });
+    };
+    SamsPlayground.prototype.handleTheme = function (newTheme) {
+        this.setState({
+            theme: newTheme,
+        });
+    };
+    SamsPlayground.prototype.changeStatus = function (item, status) {
+        if (item.status.includes(status)) {
+            item.status.splice(item.status.indexOf(status), 1);
+        }
+        else {
+            item.status.push(status);
+        }
+    };
+    SamsPlayground.prototype.render = function () {
+        var _this = this;
+        return (React.createElement(Components.Layout, { header: 'SAMS playground', theme: this.state.theme },
+            React.createElement(Components.SidebarMenu, { items: [
+                    { icon: 'dashboard', size: 'big' },
+                    { icon: 'view', size: 'big' },
+                    { icon: 'marked-star', size: 'big' },
+                    { icon: 'spike', size: 'big' },
+                    { icon: 'personal', size: 'big' },
+                    { icon: 'global-search', size: 'big' },
+                    { icon: 'picture', size: 'big', active: true }
+                ] }),
+            React.createElement(Components.LayoutContainer, null,
+                React.createElement(Components.HeaderPanel, null,
+                    React.createElement(index_1.SubNav, { zIndex: 2 },
+                        React.createElement(index_1.ButtonGroup, { align: 'inline' },
+                            React.createElement(index_1.Dropdown, { items: [
+                                    {
+                                        type: 'group', label: 'Archives', items: [
+                                            'divider',
+                                            { label: 'All archives', onSelect: function () { return _this.setState({ dropDownState: 'All archives' }); } },
+                                            { label: 'Media archive', onSelect: function () { return _this.setState({ dropDownState: 'Media archive' }); } },
+                                            { label: 'File archive', onSelect: function () { return _this.setState({ dropDownState: 'File archive' }); } },
+                                            { label: 'AP images', onSelect: function () { return _this.setState({ dropDownState: 'AP archive' }); } },
+                                        ]
+                                    }
+                                ] },
+                                React.createElement(index_1.NavButton, { text: this.state.dropDownState ? this.state.dropDownState : 'All Archives', onClick: function () { return false; } }))),
+                        React.createElement(Components.SearchBar, { placeholder: 'Search media' }),
+                        React.createElement(index_1.ButtonGroup, { align: 'end' },
+                            React.createElement(index_1.NavButton, { icon: 'dots-vertical', onClick: function () { return false; } }))),
+                    React.createElement(index_1.SubNav, { zIndex: 1 },
+                        React.createElement(index_1.ButtonGroup, { align: 'inline' },
+                            React.createElement(index_1.NavButton, { icon: 'filter-large', onClick: this.handleFilter })),
+                        React.createElement(index_1.RadioButtonGroup, { value: this.state.itemType, onChange: function (value) { return _this.setState({ itemType: value }); }, options: [
+                                { value: 'itemtype01', label: 'All item types' },
+                                { value: 'itemtype02', label: 'Images only' },
+                                { value: 'itemtype03', label: 'Videos only' },
+                                { value: 'itemtype04', label: 'Documents only' }
+                            ], group: { padded: true } }),
+                        React.createElement(index_1.ButtonGroup, { align: 'end', spaces: 'no-space' },
+                            React.createElement(index_1.Dropdown, { items: [
+                                    {
+                                        type: 'group', label: 'Chose a theme', items: [
+                                            'divider',
+                                            { label: 'Light', onSelect: function () { return _this.handleTheme('light-ui'); } },
+                                            { label: 'Dark', onSelect: function () { return _this.handleTheme('dark-ui'); } },
+                                        ]
+                                    },
+                                ] },
+                                React.createElement(index_1.NavButton, { type: 'default', icon: 'adjust', onClick: function () { return false; } })),
+                            React.createElement(index_1.NavButton, { icon: 'th-list', onClick: function () { return false; } })))),
+                React.createElement(Components.LeftPanel, { open: this.state.openFilter },
+                    React.createElement(Components.Panel, { side: 'left', background: 'grey' },
+                        React.createElement(Components.PanelHeader, { handleFilterParent: this.handleFilter, title: 'Advanced filters' }),
+                        React.createElement(Components.PanelContent, null,
+                            React.createElement(Components.PanelContentBlock, null,
+                                React.createElement("div", { className: "form__group" },
+                                    React.createElement("div", { className: "form__item" },
+                                        React.createElement(index_1.Input, { label: 'Title', type: 'text', value: '', info: 'This is info message', inlineLabel: false, disabled: false, onChange: function () { return false; } }))),
+                                React.createElement("div", { className: "form__group" },
+                                    React.createElement("div", { className: "form__item" },
+                                        React.createElement(index_1.Select, { label: 'Source', value: 'Select ingest source...', info: 'This is info message', inlineLabel: false, disabled: false, onChange: function () { return false; } },
+                                            React.createElement(index_1.Option, { value: "option-1" }, "Select ingest source..."),
+                                            React.createElement(index_1.Option, { value: "option-2" }, "Associated Press"),
+                                            React.createElement(index_1.Option, { value: "option-3" }, "Reuters")))),
+                                React.createElement("div", { className: "form__group" },
+                                    React.createElement("div", { className: "form__item" },
+                                        React.createElement(index_1.Input, { label: 'Keyword', type: 'text', value: '', info: 'This is info message', inlineLabel: false, disabled: false, onChange: function () { return false; } }))),
+                                React.createElement("div", { className: "form__group" },
+                                    React.createElement("div", { className: "form__item" },
+                                        React.createElement(index_1.Select, { label: 'Usage right', value: '--- Not selected ---', info: 'This is info message', inlineLabel: false, disabled: false, onChange: function () { return false; } },
+                                            React.createElement(index_1.Option, { value: "" }, "--- Not selected ---"),
+                                            React.createElement(index_1.Option, { value: "single" }, "Single usage"),
+                                            React.createElement(index_1.Option, { value: "time" }, "Time restricted"),
+                                            React.createElement(index_1.Option, { value: "bananas" }, "Indefinite usage"),
+                                            React.createElement(index_1.Option, { value: "indefinite" }, "Pears")))))),
+                        React.createElement(Components.PanelFooter, null,
+                            React.createElement(index_1.Button, { text: 'Clear', style: 'hollow', onClick: function () { return false; } }),
+                            React.createElement(index_1.Button, { text: 'Submit', type: 'primary', onClick: function () { return false; } })))),
+                React.createElement(Components.MainPanel, null,
+                    React.createElement(index_1.GridList, { size: "small", gap: "medium", margin: "1" }, items_1.default.map(function (item, index) {
+                        return React.createElement(GridElements.GridItem, { locked: item.locked, status: item.status, onClick: _this.handlePreview, itemtype: item.type, key: index },
+                            React.createElement(GridElements.GridItemCheckWrapper, null,
+                                React.createElement(index_1.Checkbox, { checked: item.selected, label: { text: '' }, onChange: function (value) {
+                                        item.selected = value;
+                                        _this.changeStatus(item, 'selected');
+                                    } })),
+                            React.createElement(GridElements.GridItemTopActions, null,
+                                React.createElement(index_1.IconButton, { icon: 'fullscreen', ariaValue: 'More actions', onClick: function () { return false; } })),
+                            React.createElement(GridElements.GridItemMedia, null, item.image ? React.createElement("img", { src: item.image, alt: item.imageAlt }) : null),
+                            React.createElement(GridElements.GridItemContent, null,
+                                React.createElement(GridElements.GridItemTime, { time: item.date }),
+                                React.createElement(GridElements.GridItemTitle, null, item.title),
+                                React.createElement(GridElements.GridItemText, null, item.description)),
+                            React.createElement(GridElements.GridItemFooter, null,
+                                React.createElement(GridElements.GridItemFooterBlock, { align: 'left' },
+                                    React.createElement(index_1.Icon, { name: item.type, className: 'sd-grid-item__type-icn' }),
+                                    React.createElement(index_1.Badge, { text: item.urgency, color: item.urgencyColor }),
+                                    React.createElement(index_1.Badge, { text: item.priority, shape: 'square', color: item.priorityColor })),
+                                React.createElement(GridElements.GridItemFooterBlock, { align: 'right' },
+                                    React.createElement(index_1.Label, { type: 'success', style: 'translucent', text: 'In progress' })),
+                                React.createElement(GridElements.GridItemFooterActions, null,
+                                    React.createElement(index_1.IconButton, { size: 'small', icon: 'dots-vertical', ariaValue: 'More actions', onClick: function () { return _this.changeStatus(item, 'archived'); } }))));
+                    }))),
+                React.createElement(Components.RightPanel, { open: this.state.openPreview },
+                    React.createElement(Components.Panel, { side: 'right' },
+                        React.createElement(Components.PanelHeader, { title: 'Item details', handleFilterParent: this.handlePreview }),
+                        React.createElement(Components.PanelContent, null,
+                            React.createElement(Components.PanelContentBlock, { flex: true },
+                                React.createElement("div", { className: "side-panel__content-block-inner side-panel__content-block-inner--grow" },
+                                    React.createElement("p", { className: "sd-text__date-and-author" },
+                                        React.createElement("time", null, "Created 19.06.2020 by "),
+                                        " ",
+                                        React.createElement("span", { className: "sd-text__author" }, "Mika Karapet")),
+                                    React.createElement("p", { className: "sd-text__date-and-author" },
+                                        React.createElement("time", null, "Updated 3 hours ago by"),
+                                        " ",
+                                        React.createElement("span", { className: "sd-text__author" }, "John Doe"))),
+                                React.createElement("div", { className: "side-panel__content-block-inner side-panel__content-block-inner--right" },
+                                    React.createElement(index_1.Dropdown, { align: 'right', append: true, items: [
+                                            {
+                                                type: 'group', label: 'Actions', items: [
+                                                    'divider',
+                                                    { label: 'Edit', icon: 'pencil', onSelect: function () { return _this.setState({ dropDownState: 'Edit ' }); } },
+                                                    { label: 'Download', icon: 'download', onSelect: function () { return _this.setState({ dropDownState: 'Download' }); } },
+                                                    { label: 'Delete', icon: 'trash', onSelect: function () { return _this.setState({ dropDownState: 'Delete' }); } },
+                                                ]
+                                            }
+                                        ] },
+                                        React.createElement(index_1.IconButton, { ariaValue: 'dropdown-more-options', icon: 'dots-vertical', onClick: function () { return false; } })))),
+                            React.createElement(Components.PanelContentBlock, { padding: '0', className: 'side-panel__content-block--image' },
+                                React.createElement("span", { className: "side-panel__image-actions" },
+                                    React.createElement(index_1.IconButton, { ariaValue: 'button-fullscreen', icon: 'fullscreen', onClick: function () { return false; } })),
+                                React.createElement("img", { src: "/d_trump.jpg", alt: "test" })),
+                            React.createElement(Components.PanelContentBlock, null,
+                                React.createElement("div", { className: "form__row" },
+                                    React.createElement("label", { className: "form-label form-label--light" }, "Title"),
+                                    React.createElement("p", { className: "sd-text__title" }, "Cursus Aenean")),
+                                React.createElement("div", { className: "form__row" },
+                                    React.createElement("label", { className: "form-label form-label--light" }, "Description"),
+                                    React.createElement("p", { className: "sd-text sd-text--medium" }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur, vestibulum eros.")),
+                                React.createElement("div", { className: "form__row" },
+                                    React.createElement(index_1.Label, { text: 'Public', type: 'success', style: 'hollow', size: 'large' })))))),
+                React.createElement(Components.OverlayPanel, null))));
+    };
+    return SamsPlayground;
+}(React.Component));
+exports.SamsPlayground = SamsPlayground;

package/react/examples/pages/playgrounds/react-playgrounds/TestGround.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+interface IProps {
+    children?: React.ReactNode;
+}
+interface IState {
+    itemType: string;
+    itemSelected1: boolean;
+    itemSelected2: boolean;
+    itemSelected3: boolean;
+    value1?: string;
+    value2?: string;
+    value3?: string;
+    value4?: string;
+    value5?: string;
+    value6?: string;
+    selctedTheme: string;
+    invalid: boolean;
+    date: any;
+    time: string;
+    modalPlanningTemplates: boolean;
+}
+export declare class TestGround extends React.Component<IProps, IState> {
+    constructor(props: IProps);
+    changeStatus(item: any, status: string): void;
+    render(): JSX.Element;
+}
+export {};