superdesk-ui-framework 3.0.66 → 3.0.67

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

@@ -0,0 +1,267 @@
+"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.RundownEditor = void 0;
+var React = __importStar(require("react"));
+var index_1 = require("../../../../app-typescript/index");
+var Layout = __importStar(require("../../../../app-typescript/components/Layouts"));
+var Form = __importStar(require("../../../../app-typescript/components/Form"));
+var Nav = __importStar(require("../../../../app-typescript/components/Navigation"));
+var TableList_1 = require("../../../../app-typescript/components/Lists/TableList");
+var RundownEditor = /** @class */ (function (_super) {
+    __extends(RundownEditor, _super);
+    function RundownEditor(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            theme: 'light',
+            itemType: 'itemtype01',
+            dropDownState: '',
+            itemSelected1: false,
+            itemSelected2: false,
+            itemSelected3: false,
+            value1: false,
+            value2: false,
+            value3: false,
+            leftPanelOpen: false,
+            rightPanelOpen: _this.props.rightPanel ? _this.props.rightPanel : false,
+            rightPanelPinned: false,
+            sideOverlayOpen: false,
+            inputValue: 'string',
+            array: [
+                {
+                    start: React.createElement(React.Fragment, null,
+                        React.createElement(index_1.Label, { style: 'translucent', text: 'aacc' }),
+                        React.createElement(index_1.Label, { style: 'translucent', type: 'primary', text: 'prlg' })),
+                    center: React.createElement("span", null, "Duis mollis est non commodo"),
+                    end: React.createElement(React.Fragment, null,
+                        React.createElement(index_1.IconLabel, { style: 'translucent', innerLabel: 'Planned:', text: '00:20' }),
+                        React.createElement(index_1.IconLabel, { style: 'translucent', innerLabel: 'Duration:', text: '00:20', type: 'success' })),
+                    action: React.createElement(index_1.IconButton, { icon: 'dots-vertical', size: 'small', ariaValue: 'More actions', onClick: function () { return false; } }),
+                    onClick: function () { _this.props.openPanel(); }
+                },
+                {
+                    start: React.createElement(React.Fragment, null,
+                        React.createElement(index_1.Label, { style: 'translucent', type: 'warning', text: 'pokr' }),
+                        React.createElement(index_1.Label, { style: 'translucent', text: 'slika' })),
+                    center: React.createElement("span", null, "Nullam id dolor id nibh ultricies"),
+                    end: React.createElement(React.Fragment, null,
+                        React.createElement(index_1.IconLabel, { style: 'translucent', innerLabel: 'Planned:', text: '00:12' }),
+                        React.createElement(index_1.IconLabel, { style: 'translucent', innerLabel: 'Duration:', text: '00:11', type: 'warning' })),
+                    action: React.createElement(index_1.IconButton, { icon: 'dots-vertical', size: 'small', ariaValue: 'More actions', onClick: function () { return false; } }),
+                    onClick: function () { _this.props.openPanel(); }
+                },
+                {
+                    start: React.createElement(React.Fragment, null,
+                        React.createElement(index_1.Label, { style: 'translucent', text: 'aacc' }),
+                        React.createElement(index_1.Label, { style: 'translucent', type: 'primary', text: 'prlg' })),
+                    center: React.createElement("span", null, "Duis mollis est non commodo"),
+                    end: React.createElement(React.Fragment, null,
+                        React.createElement(index_1.IconLabel, { style: 'translucent', innerLabel: 'Planned:', text: '00:20' }),
+                        React.createElement(index_1.IconLabel, { style: 'translucent', innerLabel: 'Duration:', text: '00:20', type: 'success' })),
+                    action: React.createElement(index_1.IconButton, { icon: 'dots-vertical', size: 'small', ariaValue: 'More actions', onClick: function () { return false; } }),
+                    onClick: function () { _this.props.openPanel(); }
+                },
+                {
+                    start: React.createElement(React.Fragment, null,
+                        React.createElement(index_1.Label, { style: 'translucent', type: 'warning', text: 'pokr' }),
+                        React.createElement(index_1.Label, { style: 'translucent', text: 'slika' })),
+                    center: React.createElement("span", null, "Cras mattis consectetur purus"),
+                    end: React.createElement(React.Fragment, null,
+                        React.createElement(index_1.IconLabel, { style: 'translucent', innerLabel: 'Planned:', text: '00:14' }),
+                        React.createElement(index_1.IconLabel, { style: 'translucent', innerLabel: 'Duration:', text: '00:15', type: 'alert' })),
+                    action: React.createElement(index_1.IconButton, { icon: 'dots-vertical', size: 'small', ariaValue: 'More actions', onClick: function () { return false; } }),
+                    onClick: function () { _this.props.openPanel(); }
+                },
+                {
+                    start: React.createElement(React.Fragment, null,
+                        React.createElement(index_1.Label, { style: 'translucent', text: 'aacc' }),
+                        React.createElement(index_1.Label, { style: 'translucent', type: 'primary', text: 'prlg' })),
+                    center: React.createElement("span", null, "Duis mollis est non commodo"),
+                    end: React.createElement(React.Fragment, null,
+                        React.createElement(index_1.IconLabel, { style: 'translucent', innerLabel: 'Planned:', text: '00:20' }),
+                        React.createElement(index_1.IconLabel, { style: 'translucent', innerLabel: 'Duration:', text: '00:20', type: 'success' })),
+                    action: React.createElement(index_1.IconButton, { icon: 'dots-vertical', size: 'small', ariaValue: 'More actions', onClick: function () { return false; } }),
+                    onClick: function () { _this.props.openPanel(); }
+                },
+            ],
+            activeTab: null,
+        };
+        _this.handleTheme = _this.handleTheme.bind(_this);
+        return _this;
+    }
+    RundownEditor.prototype.handleTheme = function (newTheme) {
+        this.setState({
+            theme: newTheme
+        });
+    };
+    RundownEditor.prototype.changeStatus = function (item, status) {
+        if (item.status.includes(status)) {
+            item.status.splice(item.status.indexOf(status), 1);
+        }
+        else {
+            item.status.push(status);
+        }
+    };
+    RundownEditor.prototype.render = function () {
+        var _this = this;
+        return (React.createElement(Layout.LayoutContainer, null,
+            React.createElement(Layout.HeaderPanel, null,
+                React.createElement(index_1.SubNav, null,
+                    React.createElement(index_1.ButtonGroup, { align: 'end' },
+                        React.createElement(index_1.Button, { text: "Cancel", onClick: function () { return false; }, type: "default" }),
+                        React.createElement(index_1.Button, { text: "Save Rundown", onClick: function () { return false; }, type: "primary" }),
+                        React.createElement(index_1.Divider, { size: "mini" }),
+                        React.createElement(index_1.ButtonGroup, { subgroup: true, spaces: "no-space" },
+                            React.createElement(index_1.Tooltip, { text: 'Minimize', flow: 'left' },
+                                React.createElement(index_1.NavButton, { type: 'default', icon: 'minimize', iconSize: 'big', text: 'Minimize', onClick: function () { return false; } })),
+                            React.createElement(index_1.Tooltip, { text: 'More actions', flow: 'left' },
+                                React.createElement(index_1.NavButton, { type: 'default', icon: 'dots-vertical', text: 'More actions', onClick: function () { return false; } })),
+                            React.createElement(index_1.Tooltip, { text: 'Send to / Publish', flow: 'left' },
+                                React.createElement(index_1.NavButton, { type: 'highlight', icon: 'send-to', iconSize: 'big', text: 'Send to / Publish', onClick: function () { return false; } })))))),
+            React.createElement(Layout.MainPanel, { padding: 'none' },
+                React.createElement(Layout.AuthoringMain, { headerPadding: 'medium', toolBar: (React.createElement(React.Fragment, null,
+                        React.createElement("div", { className: "sd-editor-toolbar__content" },
+                            React.createElement("dl", null,
+                                React.createElement("dt", null, "Created"),
+                                React.createElement("dd", null,
+                                    React.createElement("time", { title: "July 29, 2021 3:58 PM" }, "07/29")),
+                                React.createElement("dt", null, "by"),
+                                React.createElement("dt", null, "Nareg Asmarian")),
+                            React.createElement("dl", null,
+                                React.createElement("dt", null, "Modified"),
+                                React.createElement("dd", null,
+                                    React.createElement("time", { title: "July 29, 2021 3:58 PM" }, "07/29")))))), authoringHeader: (React.createElement(React.Fragment, null,
+                        React.createElement(Form.FormGroup, null,
+                            React.createElement(Form.FormItem, null,
+                                React.createElement(index_1.Select, { label: 'Type', value: 'Type value', required: true, disabled: false, onChange: function () { return false; } },
+                                    React.createElement(index_1.Option, null, "Type 1"),
+                                    React.createElement(index_1.Option, null, "Type 2"))),
+                            React.createElement(Form.FormItem, null,
+                                React.createElement(index_1.Select, { label: 'Show', value: 'show value', required: true, disabled: false, onChange: function () { return false; } },
+                                    React.createElement(index_1.Option, null, "Marker"),
+                                    React.createElement(index_1.Option, null, "Tabu"))),
+                            React.createElement(Form.FormItem, null,
+                                React.createElement(index_1.Select, { label: 'Show section', value: 'Some value', required: true, disabled: false, onChange: function () { return false; } },
+                                    React.createElement(index_1.Option, null, "Section 1"),
+                                    React.createElement(index_1.Option, null, "Section 2")))),
+                        React.createElement(Form.FormGroup, null,
+                            React.createElement(Form.FormItem, null,
+                                React.createElement(index_1.Input, { type: 'text', label: 'Slugline', value: '', required: false, disabled: false, onChange: function () { return false; } })),
+                            React.createElement(Form.FormItem, null,
+                                React.createElement(index_1.Input, { type: 'text', label: 'Category', value: '', required: false, disabled: false, onChange: function () { return false; } }))),
+                        React.createElement(Form.FormGroup, null,
+                            React.createElement(Form.FormItem, null,
+                                React.createElement(index_1.Input, { type: 'text', label: 'Author', value: 'This is some value', required: true, disabled: false, onChange: function () { return false; } }))),
+                        React.createElement(Form.FormGroup, { marginBottom: '2' },
+                            React.createElement(Form.FormItem, null,
+                                React.createElement(index_1.Input, { type: 'text', label: 'Start Time', value: '', required: true, disabled: false, onChange: function () { return false; } })),
+                            React.createElement(Form.FormItem, null,
+                                React.createElement(index_1.Input, { type: 'text', label: 'End Time', value: '', required: true, disabled: false, onChange: function () { return false; } })),
+                            React.createElement(Form.FormItem, null,
+                                React.createElement(index_1.Input, { type: 'text', label: 'Duration', value: '', required: true, disabled: false, onChange: function () { return false; } }))))) },
+                    React.createElement(index_1.Container, { direction: 'column', className: 'sd-margin-y--2' },
+                        React.createElement(index_1.Input, { label: 'Rundown title', value: 'Marker // 01.06.2022', boxedStyle: true, boxedLable: true, size: 'x-large', placeholder: 'Rundown title', labelHidden: true, type: 'text', tabindex: 0, onChange: function (value) { return _this.setState({ inputValue: value }); } })),
+                    React.createElement(index_1.ButtonGroup, null,
+                        React.createElement(index_1.IconLabel, { style: 'translucent', innerLabel: 'Airtime:', text: '19:00 - 19:45', size: 'large', type: 'primary', icon: 'time' }),
+                        React.createElement(index_1.IconLabel, { style: 'translucent', innerLabel: 'Duration:', text: '00:38', size: 'large', type: 'warning' }),
+                        React.createElement(index_1.Text, { color: 'light', size: 'medium', className: 'sd-margin--0' }, "OF"),
+                        React.createElement(index_1.IconLabel, { style: 'translucent', innerLabel: 'Planned:', text: '00:45', size: 'large' })),
+                    React.createElement(TableList_1.TableList, { className: 'sd-margin-y--4', dragAndDrop: true, addItem: true, array: this.state.array, itemsDropdown: function () { return [
+                            { label: React.createElement(index_1.Label, { style: 'translucent', type: 'primary', text: 'aacc' }), onSelect: function () { return 1; } },
+                            { label: React.createElement(index_1.Label, { style: 'translucent', text: 'prlg' }), onSelect: function () { return 1; } },
+                            { label: React.createElement(index_1.Label, { style: 'translucent', type: 'primary', text: 'prlg' }), onSelect: function () { return 1; } },
+                        ]; } }))),
+            React.createElement(Layout.RightPanel, { open: this.props.rightPanel },
+                React.createElement(Layout.Panel, { size: 'x-large', side: 'right' },
+                    React.createElement(Layout.PanelContent, null,
+                        React.createElement(Layout.AuthoringFrame, { main: React.createElement(Layout.AuthoringMain, { headerPadding: 'medium', toolbarCustom: true, headerCollapsed: true, toolBar: (React.createElement(React.Fragment, null,
+                                    React.createElement(index_1.SubNav, { className: 'sd-shadow--z0' },
+                                        React.createElement(index_1.SlidingToolbar, null,
+                                            React.createElement(index_1.ButtonGroup, { align: 'start' },
+                                                React.createElement(index_1.IconButton, { ariaValue: "Close", icon: "close-small", onClick: function () { return _this.props.closePanel(); } })),
+                                            React.createElement(index_1.ButtonGroup, { align: 'end' },
+                                                React.createElement(index_1.Button, { text: "Save Changes", style: 'hollow', onClick: function () { return _this.props.closePanel(); }, type: "primary" })))),
+                                    React.createElement("div", { className: 'sd-editor-content__toolbar-inner' },
+                                        React.createElement("div", { className: "sd-editor-toolbar__content" },
+                                            React.createElement("dl", null,
+                                                React.createElement("dt", null, "Created"),
+                                                React.createElement("dd", null,
+                                                    React.createElement("time", { title: "July 29, 2021 3:58 PM" }, "07/29")),
+                                                React.createElement("dt", null, "by"),
+                                                React.createElement("dt", null, "Nareg Asmarian")),
+                                            React.createElement("dl", null,
+                                                React.createElement("dt", null, "Modified"),
+                                                React.createElement("dd", null,
+                                                    React.createElement("time", { title: "July 29, 2021 3:58 PM" }, "07/29"))))))), authoringHeader: (React.createElement(React.Fragment, null,
+                                    React.createElement(Form.FormGroup, { inlineLabel: false },
+                                        React.createElement(Form.FormItem, null,
+                                            React.createElement(index_1.Select, { label: 'Type', value: 'Type value', required: true, disabled: false, onChange: function () { return false; } },
+                                                React.createElement(index_1.Option, null, "Type 1"),
+                                                React.createElement(index_1.Option, null, "Type 2"))),
+                                        React.createElement(Form.FormItem, null,
+                                            React.createElement(index_1.Select, { label: 'Show section', value: 'Some value', required: true, disabled: false, onChange: function () { return false; } },
+                                                React.createElement(index_1.Option, null, "Section 1"),
+                                                React.createElement(index_1.Option, null, "Section 2")))),
+                                    React.createElement(Form.FormGroup, { inlineLabel: false },
+                                        React.createElement(Form.FormItem, null,
+                                            React.createElement(index_1.Select, { label: 'Duration', value: 'Some value', required: true, disabled: false, onChange: function () { return false; } },
+                                                React.createElement(index_1.Option, null, "Option 1"),
+                                                React.createElement(index_1.Option, null, "Option 2"))),
+                                        React.createElement(Form.FormItem, null,
+                                            React.createElement(index_1.Input, { type: 'text', label: 'Category', value: ' ', required: false, disabled: false, onChange: function () { return false; } }))),
+                                    React.createElement(Form.FormGroup, { inlineLabel: false },
+                                        React.createElement(Form.FormItem, null,
+                                            React.createElement(index_1.Input, { type: 'text', label: 'Author', value: 'This is some value', required: false, disabled: false, onChange: function () { return false; } }))))) }), sideBar: (React.createElement(Nav.SideBarTabs, { items: [
+                                    { icon: 'info', size: 'big', tooltip: 'Info', id: '1' },
+                                    { icon: 'chat', size: 'big', tooltip: 'Comments', id: '2' },
+                                    { icon: 'history', size: 'big', tooltip: 'History', id: '3' },
+                                    { icon: 'package', size: 'big', tooltip: 'Packages', id: '4' },
+                                    { icon: 'attachment', size: 'big', tooltip: 'Attachments', id: '5' },
+                                    { icon: 'comments', size: 'big', tooltip: 'Inline Comments', badgeValue: '5', id: '6' },
+                                    { icon: 'suggestion', size: 'big', tooltip: 'Suggestions', id: '7' }
+                                ], activeTab: this.state.activeTab, onActiveTabChange: function (id) {
+                                    _this.setState({
+                                        activeTab: id,
+                                    });
+                                } })) }))))));
+    };
+    return RundownEditor;
+}(React.Component));
+exports.RundownEditor = RundownEditor;

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

@@ -0,0 +1,39 @@
+import * as React from 'react';
+interface IProps {
+    children?: React.ReactNode;
+}
+interface IState {
+    theme: 'dark' | 'light' | string;
+    itemType: string;
+    dropDownState: string;
+    openPreview: boolean;
+    openFilter: boolean;
+    itemSelected1: boolean;
+    itemSelected2: boolean;
+    itemSelected3: boolean;
+    value1: boolean;
+    modalBasic: boolean;
+    modalSmall: boolean;
+    modalMedium: boolean;
+    modalNewTemplate: boolean;
+    modalNewShow: boolean;
+    modalNewShowSuccess: boolean;
+    modalManageTemplate: boolean;
+    modalManageShow: boolean;
+    openEditor: boolean;
+    openShowEditor: boolean;
+    array: any;
+    rightPanel: boolean;
+    fullEditor: boolean;
+    previousState: boolean;
+}
+export declare class Rundowns extends React.Component<IProps, IState> {
+    constructor(props: IProps);
+    handleFilter(): void;
+    handlePreview(): void;
+    handleShow(): void;
+    handleTheme(newTheme: string): void;
+    changeStatus(item: any, status: string): void;
+    render(): JSX.Element;
+}
+export {};