superdesk-ui-framework 3.0.67 → 3.0.68

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

@@ -1,558 +0,0 @@
-"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.Rundowns = 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 RundownEditor_1 = require("./RundownEditor");
-var Nav = __importStar(require("../../../../app-typescript/components/Navigation"));
-var ContentList_1 = require("../../../../app-typescript/components/Lists/ContentList");
-var TableList_1 = require("../../../../app-typescript/components/Lists/TableList");
-var Rundowns = /** @class */ (function (_super) {
-    __extends(Rundowns, _super);
-    function Rundowns(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: true,
-            modalBasic: false,
-            modalSmall: false,
-            modalMedium: false,
-            modalNewTemplate: false,
-            modalNewShow: false,
-            modalNewShowSuccess: false,
-            modalManageTemplate: false,
-            modalManageShow: false,
-            openEditor: false,
-            openShowEditor: false,
-            rightPanel: false,
-            fullEditor: false,
-            previousState: false,
-            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"),
-                    onClick: function () { return false; },
-                },
-                {
-                    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"),
-                    onClick: function () { return false; },
-                },
-                {
-                    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"),
-                    onClick: function () { return false; },
-                },
-                {
-                    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"),
-                    onClick: function () { return false; },
-                },
-                {
-                    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"),
-                    onClick: function () { return false; },
-                },
-            ]
-        };
-        _this.handleFilter = _this.handleFilter.bind(_this);
-        _this.handlePreview = _this.handlePreview.bind(_this);
-        _this.handleTheme = _this.handleTheme.bind(_this);
-        _this.handleShow = _this.handleShow.bind(_this);
-        return _this;
-    }
-    Rundowns.prototype.handleFilter = function () {
-        this.setState(function (state) { return ({
-            openFilter: !state.openFilter,
-        }); });
-    };
-    Rundowns.prototype.handlePreview = function () {
-        this.setState(function (state) { return ({
-            openPreview: !state.openPreview,
-        }); });
-    };
-    Rundowns.prototype.handleShow = function () {
-        this.setState(function (state) { return ({
-            openShowEditor: !state.openShowEditor,
-        }); });
-    };
-    Rundowns.prototype.handleTheme = function (newTheme) {
-        this.setState({
-            theme: newTheme
-        });
-    };
-    Rundowns.prototype.changeStatus = function (item, status) {
-        if (item.status.includes(status)) {
-            item.status.splice(item.status.indexOf(status), 1);
-        }
-        else {
-            item.status.push(status);
-        }
-    };
-    Rundowns.prototype.render = function () {
-        var _this = this;
-        var newShowFooter2 = (React.createElement(index_1.ButtonGroup, { align: "end" },
-            React.createElement(index_1.Button, { text: 'Cancel', onClick: function () { _this.setState({ modalNewShowSuccess: false }); } }),
-            React.createElement(index_1.Button, { type: 'primary', text: 'yes, Create a Template', onClick: function () { _this.setState({ modalNewShowSuccess: false }), _this.setState({ modalNewTemplate: true }); } })));
-        var newShowFooter = (React.createElement(index_1.ButtonGroup, { align: "end" },
-            React.createElement(index_1.Button, { text: 'Cancel', onClick: function () { _this.setState({ modalNewShow: false }); } }),
-            React.createElement(index_1.Button, { type: 'primary', text: 'Save', onClick: function () { _this.setState({ modalNewShowSuccess: true }), _this.setState({ modalNewShow: false }); } })));
-        return (React.createElement(React.Fragment, null,
-            React.createElement(Layout.Layout, { header: 'Rundowns', theme: this.state.theme },
-                React.createElement(Nav.SideBarMenu, { items: [
-                        { icon: 'dashboard', size: 'big' },
-                        { icon: 'view', size: 'big', onCLick: function () { return _this.setState({ openEditor: !_this.state.openEditor }); } },
-                        { icon: 'marked-star', size: 'big' },
-                        { icon: 'spike', size: 'big' },
-                        { icon: 'personal', size: 'big' },
-                        { icon: 'global-search', size: 'big' },
-                        { icon: 'picture', size: 'big' },
-                        { icon: 'rundown', size: 'big', }
-                    ] }),
-                React.createElement(Layout.LayoutContainer, null,
-                    React.createElement(Layout.HeaderPanel, null,
-                        React.createElement(index_1.SubNav, { zIndex: 2 },
-                            React.createElement(index_1.SearchBar, { placeholder: 'Search media' }),
-                            React.createElement(index_1.ButtonGroup, { align: 'end', spaces: 'no-space' },
-                                React.createElement(index_1.Dropdown, { items: [
-                                        {
-                                            type: 'group', label: 'Settings', items: [
-                                                'divider',
-                                                { icon: 'switches', label: 'Manage Shows', onSelect: function () { return _this.setState({ modalManageShow: true }); } },
-                                                { icon: 'switches', label: 'Manage Templates', onSelect: function () { return _this.setState({ modalManageTemplate: true }); } },
-                                            ]
-                                        }
-                                    ] },
-                                    React.createElement(index_1.NavButton, { icon: 'settings', onClick: function () { return false; } })),
-                                React.createElement(index_1.Dropdown, { header: [
-                                        {
-                                            type: 'group', label: 'Create', items: []
-                                        },
-                                        {
-                                            type: 'submenu', label: 'Rundown', icon: 'plus-sign', items: [
-                                                { icon: 'plus-sign', label: 'Rundown', onSelect: function () { return 1; } },
-                                            ]
-                                        },
-                                    ], items: [
-                                        {
-                                            type: 'group', label: 'Recent Templates', items: [
-                                                { icon: 'plus-sign', label: 'Marker Daily', onSelect: function () { return _this.setState({ dropDownState: ' ' }); } },
-                                                { icon: 'plus-sign', label: 'Marker Weekend', onSelect: function () { return _this.setState({ dropDownState: ' ' }); } },
-                                                { icon: 'plus-sign', label: 'Tabu Daily', onSelect: function () { return _this.setState({ dropDownState: ' ' }); } },
-                                                { icon: 'plus-sign', label: 'Tabu Specijal', onSelect: function () { return _this.setState({ dropDownState: ' ' }); } },
-                                            ]
-                                        }
-                                    ], footer: [
-                                        {
-                                            type: 'group', items: [
-                                                { icon: 'list-plus', label: 'Create new Template', onSelect: function () { return _this.setState({ modalNewTemplate: true }); } },
-                                                { icon: 'rundown', label: 'Create new Show', onSelect: function () { return _this.setState({ modalNewShow: true }); } },
-                                            ]
-                                        },
-                                    ] },
-                                    React.createElement(index_1.CreateButton, { ariaValue: 'Create', onClick: function () { return false; } })))),
-                        React.createElement(index_1.SubNav, { zIndex: 1 },
-                            React.createElement(index_1.ButtonGroup, { align: 'start' },
-                                React.createElement(index_1.NavButton, { icon: 'filter-large', onClick: this.handleFilter })),
-                            React.createElement(index_1.ButtonGroup, { align: 'end' },
-                                React.createElement(index_1.ButtonGroup, { align: 'sub', padded: true },
-                                    React.createElement(index_1.Button, { size: "normal", icon: "chevron-left-thin", text: "Previous", shape: "round", iconOnly: true, disabled: true, onClick: function () { return false; } }),
-                                    React.createElement(index_1.Button, { text: 'Today', style: 'hollow', onClick: function () { return false; } }),
-                                    React.createElement(index_1.Button, { size: "normal", icon: "chevron-right-thin", text: "Next", shape: "round", iconOnly: true, onClick: function () { return false; } })),
-                                React.createElement(index_1.RadioButtonGroup, { options: [
-                                        { value: 'test10', label: 'D' },
-                                        { value: 'test11', label: 'W' },
-                                        { value: 'test12', label: 'M' },
-                                    ], group: { padded: false }, value: this.state.itemType, onChange: function (value) { return _this.setState({ itemType: value }); } }),
-                                React.createElement(index_1.ButtonGroup, { align: 'sub', spaces: 'no-space' },
-                                    React.createElement(index_1.Dropdown, { items: [
-                                            {
-                                                type: 'group', label: 'Chose a theme', items: [
-                                                    'divider',
-                                                    { label: 'Light', icon: 'adjust', onSelect: function () { return _this.handleTheme('light-ui'); } },
-                                                    { label: 'Dark', icon: 'adjust', onSelect: function () { return _this.handleTheme('dark-ui'); } },
-                                                    { label: 'Accessible Light', icon: 'adjust', onSelect: function () { return _this.handleTheme('accessible-light-ui'); } },
-                                                ]
-                                            },
-                                        ] },
-                                        React.createElement(index_1.NavButton, { type: 'default', icon: 'adjust', onClick: function () { return false; } })),
-                                    React.createElement(index_1.Dropdown, { items: [
-                                            {
-                                                type: 'group', label: 'Actions', items: [
-                                                    'divider',
-                                                    { label: 'Action one', onSelect: function () { return _this.setState({ dropDownState: ' ' }); } },
-                                                    { label: 'Action two', onSelect: function () { return _this.setState({ dropDownState: ' ' }); } },
-                                                    { label: 'Action three', onSelect: function () { return _this.setState({ dropDownState: ' ' }); } },
-                                                ]
-                                            }
-                                        ] },
-                                        React.createElement(index_1.NavButton, { icon: 'dots-vertical', onClick: function () { return false; } })))))),
-                    React.createElement(Layout.LeftPanel, { open: this.state.openFilter },
-                        React.createElement(Layout.Panel, { side: 'left', background: 'grey' },
-                            React.createElement(Layout.PanelHeader, { title: 'Advanced filters', onClose: function () { return _this.setState({ 'openFilter': false }); } }),
-                            React.createElement(Layout.PanelContent, null,
-                                React.createElement(Layout.PanelContentBlock, null,
-                                    React.createElement(Form.FormGroup, null,
-                                        React.createElement(Form.FormItem, null,
-                                            React.createElement(index_1.Select, { label: 'Shows', labelHidden: true, value: 'This is some value', info: 'This is some hint message', required: true, disabled: false, onChange: function () { return false; } },
-                                                React.createElement(index_1.Option, null, "Marker"),
-                                                React.createElement(index_1.Option, null, "Tabu")))),
-                                    React.createElement("div", { className: "form__group" },
-                                        React.createElement("div", { className: "form__item" },
-                                            React.createElement(index_1.Input, { label: 'Title', type: 'text', value: 'Title', 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...', 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: 'Keyword', 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: 'Dolor in hendrerit.', 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(Layout.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(Layout.MainPanel, null,
-                        React.createElement(ContentList_1.ContentList, { items: [
-                                {
-                                    itemColum: [
-                                        {
-                                            itemRow: [{ content: React.createElement(React.Fragment, null,
-                                                        React.createElement("i", { className: "icon-rundown" })) }],
-                                            border: true
-                                        },
-                                        {
-                                            itemRow: [
-                                                {
-                                                    content: React.createElement(React.Fragment, null,
-                                                        React.createElement("span", { className: "sd-list-item__slugline" }, "19:00 \u2013 19:45"),
-                                                        React.createElement(index_1.IconLabel, { style: 'translucent', innerLabel: 'Duration:', text: '00:38', size: 'small', type: 'warning' }),
-                                                        React.createElement(index_1.IconLabel, { style: 'translucent', innerLabel: 'Planned Duration:', text: '00:45', size: 'small' }),
-                                                        React.createElement("time", { className: 'sd-margin-s--auto', title: "June 01, 2022 11:08 AM" }, "11:08, 01.06.2022"))
-                                                },
-                                                {
-                                                    content: React.createElement(React.Fragment, null,
-                                                        React.createElement(index_1.Label, { text: 'Marker', color: 'blue--800' }),
-                                                        React.createElement("span", { className: 'sd-list-item__compound-text' },
-                                                            React.createElement("span", { className: 'sd-list-item__text-label' }, "Template:"),
-                                                            React.createElement("span", null, "Marker Daily")),
-                                                        React.createElement("span", { className: "sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline" }, "Marker // 01.06.2022"),
-                                                        React.createElement(index_1.Label, { style: 'translucent', text: 'In Progress', type: 'warning' }))
-                                                },
-                                            ],
-                                            fullwidth: true,
-                                        }
-                                    ],
-                                    action: React.createElement(index_1.IconButton, { icon: 'dots-vertical', ariaValue: 'More actions', onClick: function () { return false; } }),
-                                    locked: true,
-                                    onClick: function () { return _this.setState({ openEditor: !_this.state.openEditor }); },
-                                },
-                                {
-                                    itemColum: [
-                                        {
-                                            itemRow: [{ content: React.createElement(React.Fragment, null,
-                                                        React.createElement("i", { className: "icon-rundown" })) }],
-                                            border: true
-                                        },
-                                        {
-                                            itemRow: [
-                                                {
-                                                    content: React.createElement(React.Fragment, null,
-                                                        React.createElement("span", { className: "sd-list-item__slugline" }, "19:00 \u2013 19:45"),
-                                                        React.createElement(index_1.IconLabel, { style: 'translucent', innerLabel: 'Duration:', text: '00:38', size: 'small', type: 'warning' }),
-                                                        React.createElement(index_1.IconLabel, { style: 'translucent', innerLabel: 'Planned Duration:', text: '00:45', size: 'small' }),
-                                                        React.createElement("time", { className: 'sd-margin-s--auto', title: "June 01, 2022 11:08 AM" }, "11:08, 01.06.2022"))
-                                                },
-                                                {
-                                                    content: React.createElement(React.Fragment, null,
-                                                        React.createElement(index_1.Label, { text: 'Tabu', color: 'blue--800' }),
-                                                        React.createElement("span", { className: 'sd-list-item__compound-text' },
-                                                            React.createElement("span", { className: 'sd-list-item__text-label' }, "Template:"),
-                                                            React.createElement("span", null, "Tabu Daily")),
-                                                        React.createElement("span", { className: "sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline" }, "Marker // 01.06.2022"),
-                                                        React.createElement(index_1.Label, { style: 'translucent', text: 'Draft' }))
-                                                },
-                                            ],
-                                            fullwidth: true,
-                                        }
-                                    ],
-                                    action: React.createElement(index_1.IconButton, { icon: 'dots-vertical', ariaValue: 'More actions', onClick: function () { return false; } }),
-                                    onClick: function () { return _this.setState({ openPreview: !_this.state.openPreview }); },
-                                },
-                            ] })),
-                    React.createElement(Layout.RightPanel, { open: this.state.openPreview },
-                        React.createElement(Layout.Panel, { side: 'right' },
-                            React.createElement(Layout.PanelHeader, { title: 'Item preview', onClose: function () { return _this.setState({ 'openPreview': false }); } }),
-                            React.createElement(Layout.PanelContent, null,
-                                React.createElement(Layout.PanelContentBlock, { flex: true },
-                                    React.createElement(index_1.Container, { direction: 'column', gap: 'x-small' },
-                                        React.createElement(index_1.Container, { direction: 'row', gap: 'small' },
-                                            React.createElement(index_1.Text, { color: 'light' }, "Created 09.06.2022 by "),
-                                            React.createElement(index_1.Text, { weight: 'medium' }, "Mika Karapet")),
-                                        React.createElement(index_1.Container, { direction: 'row', gap: 'small' },
-                                            React.createElement(index_1.Text, { color: 'light' }, "Updated 3 hours ago by "),
-                                            React.createElement(index_1.Text, { weight: 'medium' }, "John Doe"))),
-                                    React.createElement(index_1.Container, { className: 'sd-margin-s--auto sd-flex--items-center' })),
-                                React.createElement(Layout.PanelContentBlock, null,
-                                    React.createElement(index_1.Container, { direction: 'row', gap: 'large', className: 'sd-margin-b--3' },
-                                        React.createElement(index_1.Label, { size: 'large', text: 'Tabu', color: 'blue--800' }),
-                                        React.createElement(index_1.Container, { direction: 'row', gap: 'small' },
-                                            React.createElement(index_1.Text, { color: 'light', size: 'small', style: 'italic' }, "Template:"),
-                                            React.createElement(index_1.Text, { size: 'small', style: 'italic', weight: 'medium' }, "Tabu daily"))),
-                                    React.createElement(index_1.Container, { direction: 'column', className: 'sd-margin-y--2' },
-                                        React.createElement(index_1.Heading, { type: 'h2' }, "Tabu // 01.06.2022")),
-                                    React.createElement(index_1.ButtonGroup, null,
-                                        React.createElement(index_1.IconLabel, { style: 'translucent', innerLabel: 'Airtime:', text: '19:45 - 20:45', type: 'primary' }),
-                                        React.createElement(index_1.IconLabel, { style: 'translucent', innerLabel: 'Duration:', text: '00:56', type: 'warning' }),
-                                        React.createElement(index_1.Text, { color: 'light', size: 'small', className: 'sd-margin--0' }, "OF"),
-                                        React.createElement(index_1.IconLabel, { style: 'translucent', innerLabel: 'Planned:', text: '01:00' })),
-                                    React.createElement(TableList_1.TableList, { className: 'sd-margin-y--4', 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.OverlayPanel, null)),
-                React.createElement(Layout.ContentSplitter, { visible: this.state.openEditor }),
-                React.createElement(Layout.AuthoringContainer, { open: this.state.openEditor },
-                    React.createElement(RundownEditor_1.RundownEditor, { rightPanel: this.state.rightPanel, openPanel: function () {
-                            if (_this.state.fullEditor) {
-                                _this.setState({ previousState: true });
-                            }
-                            else {
-                                _this.setState({ previousState: false });
-                            }
-                            _this.setState({ rightPanel: true });
-                        }, closePanel: function () {
-                            if (!_this.state.previousState) {
-                                _this.setState({ rightPanel: false, fullEditor: false });
-                            }
-                            else {
-                                _this.setState({ rightPanel: false });
-                            }
-                        } }))),
-            React.createElement(index_1.Modal, { headerTemplate: "Manage Templates", visible: this.state.modalManageTemplate, zIndex: 1000, contentBg: 'medium', contentPadding: 'none', size: 'x-large', onHide: function () { _this.setState({ modalManageTemplate: false }); } },
-                React.createElement(Layout.LayoutContainer, null,
-                    React.createElement(Layout.LeftPanel, { open: true },
-                        React.createElement(Layout.Panel, { side: 'left', background: 'grey' },
-                            React.createElement(Layout.PanelHeader, null,
-                                React.createElement(index_1.Container, { className: 'sd-padding-x--2' },
-                                    React.createElement(index_1.Select, { label: 'Shows', fullWidth: true, labelHidden: true, inlineLabel: true, value: 'This is some value', required: true, disabled: false, invalid: false, onChange: function () { return false; } },
-                                        React.createElement(index_1.Option, null, "Select show"),
-                                        React.createElement(index_1.Option, null, "Marker"),
-                                        React.createElement(index_1.Option, null, "Tabu")))),
-                            React.createElement(Layout.PanelContent, null,
-                                React.createElement(index_1.EmptyState, { title: 'No show is selected', description: 'Please select a Show from the dropdown at the top.', size: "small", illustration: "1" })))),
-                    React.createElement(Layout.MainPanel, null,
-                        React.createElement(index_1.EmptyState, { title: 'No Template selected', description: 'Please select a Show and Template frome the side panel.', size: "large", illustration: "1" })))),
-            React.createElement(index_1.Modal, { headerTemplate: "Create new Show", visible: this.state.modalNewShow, zIndex: 1000, footerTemplate: newShowFooter, contentBg: 'medium', size: 'medium', onHide: function () { _this.setState({ modalNewShow: false }); } },
-                React.createElement(Form.FormGroup, null,
-                    React.createElement(Form.FormItem, null,
-                        React.createElement(index_1.Input, { label: 'Show name', type: 'text', value: '', required: true, onChange: function () { return false; } }))),
-                React.createElement(Form.FormGroup, null,
-                    React.createElement(Form.FormItem, null,
-                        React.createElement(index_1.Input, { label: 'Description', type: 'text', value: '', required: false, onChange: function () { return false; } })))),
-            React.createElement(index_1.Modal, { headerTemplate: "Create new Show", visible: this.state.modalNewShowSuccess, zIndex: 1000, footerTemplate: newShowFooter2, contentBg: 'medium', size: 'medium', onHide: function () { _this.setState({ modalNewShowSuccess: false }); } },
-                React.createElement(index_1.Container, { direction: 'column', className: 'sd-flex--justify-center sd-flex--items-center sd-padding-y--2', gap: 'medium' },
-                    React.createElement(index_1.Icon, { name: 'checkmark-circle', type: 'success', size: 'big', scale: '3x' }),
-                    React.createElement(index_1.Text, { align: 'center', size: 'medium' },
-                        "The show ",
-                        React.createElement("strong", null, "Marker"),
-                        " has been successfully created.",
-                        React.createElement("br", null),
-                        "Do you want to cretate a template for this show right away?"))),
-            React.createElement(index_1.Modal, { headerTemplate: "Create new Template", visible: this.state.modalNewTemplate, zIndex: 1000, contentBg: 'medium', contentPadding: 'none', size: 'x-large', onHide: function () { _this.setState({ modalNewTemplate: false }); } },
-                React.createElement(Layout.LayoutContainer, null,
-                    React.createElement(Layout.LeftPanel, { open: true },
-                        React.createElement(Layout.Panel, { side: 'left', background: 'grey' },
-                            React.createElement(Layout.PanelHeader, null,
-                                React.createElement(index_1.Container, { className: 'sd-padding-x--2' },
-                                    React.createElement(index_1.Select, { label: 'Shows', fullWidth: true, labelHidden: true, inlineLabel: true, value: 'This is some value', required: true, disabled: false, invalid: false, onChange: function () { return false; } },
-                                        React.createElement(index_1.Option, null, "Marker"),
-                                        React.createElement(index_1.Option, null, "Tabu")))),
-                            React.createElement(Layout.PanelContent, null,
-                                React.createElement(Layout.PanelContentBlock, null,
-                                    React.createElement(index_1.Container, { className: 'sd-margin-b--1-5' },
-                                        React.createElement(index_1.ButtonGroup, { align: 'end' },
-                                            React.createElement(index_1.Tooltip, { text: 'New template', flow: 'left' },
-                                                React.createElement(index_1.Button, { type: "primary", size: 'small', icon: "plus-large", text: "Cretae new Template", shape: "round", iconOnly: true, onClick: function () { return false; } })))),
-                                    React.createElement(index_1.BoxedList, null,
-                                        React.createElement(index_1.BoxedListItem, { alignVertical: 'center', clickable: true, density: 'compact', selected: true, actions: (React.createElement(index_1.IconButton, { icon: "dots-vertical", size: 'small', ariaValue: "More actions", onClick: function () { return false; } })) },
-                                            React.createElement(index_1.Container, { gap: 'small' },
-                                                React.createElement(index_1.Label, { text: 'Marker', color: 'blue--800' }),
-                                                React.createElement("span", null, "Untitled"))),
-                                        React.createElement(index_1.BoxedListItem, { alignVertical: 'center', clickable: true, density: 'compact', actions: (React.createElement(index_1.IconButton, { icon: "dots-vertical", size: 'small', ariaValue: "More actions", onClick: function () { return false; } })) },
-                                            React.createElement(index_1.Container, { gap: 'small' },
-                                                React.createElement(index_1.Label, { text: 'Marker', color: 'blue--800' }),
-                                                React.createElement("span", null, "Marker Daily"))),
-                                        React.createElement(index_1.BoxedListItem, { alignVertical: 'center', clickable: true, density: 'compact', actions: (React.createElement(index_1.IconButton, { icon: "dots-vertical", size: 'small', ariaValue: "More actions", onClick: function () { return false; } })) },
-                                            React.createElement(index_1.Container, { gap: 'small' },
-                                                React.createElement(index_1.Label, { text: 'Marker', color: 'blue--800' }),
-                                                React.createElement("span", null, "Marker Weekend"))),
-                                        React.createElement(index_1.BoxedListItem, { alignVertical: 'center', density: 'compact', clickable: true, actions: (React.createElement(index_1.IconButton, { icon: "dots-vertical", size: 'small', ariaValue: "More actions", onClick: function () { return false; } })) },
-                                            React.createElement(index_1.Container, { gap: 'small' },
-                                                React.createElement(index_1.Label, { text: 'Marker', color: 'blue--800' }),
-                                                React.createElement("span", null, "Marker Special")))))))),
-                    React.createElement(Layout.MainPanel, { padding: 'none' },
-                        React.createElement(RundownEditor_1.RundownEditor, { rightPanel: this.state.rightPanel, openPanel: function () {
-                                if (_this.state.fullEditor) {
-                                    _this.setState({ previousState: true });
-                                }
-                                else {
-                                    _this.setState({ previousState: false });
-                                }
-                                _this.setState({ rightPanel: true });
-                            }, closePanel: function () {
-                                if (!_this.state.previousState) {
-                                    _this.setState({ rightPanel: false, fullEditor: false });
-                                }
-                                else {
-                                    _this.setState({ rightPanel: false });
-                                }
-                            } })))),
-            React.createElement(index_1.Modal, { headerTemplate: "Manage Shows", maximizable: true, visible: this.state.modalManageShow, zIndex: 1000, contentBg: 'medium', contentPadding: 'none', size: 'x-large', onHide: function () { _this.setState({ modalManageShow: false }); } },
-                React.createElement(Layout.LayoutContainer, null,
-                    React.createElement(Layout.HeaderPanel, null,
-                        React.createElement(index_1.SubNav, { zIndex: 2 },
-                            React.createElement(index_1.SearchBar, { placeholder: 'Search shows' }),
-                            React.createElement(index_1.ButtonGroup, { align: 'end', spaces: 'no-space' },
-                                React.createElement(index_1.CreateButton, { ariaValue: 'New show', onClick: function () { return false; } })))),
-                    React.createElement(Layout.MainPanel, null,
-                        React.createElement(index_1.BoxedList, null,
-                            React.createElement(index_1.BoxedListItem, { alignVertical: 'center', clickable: true, density: 'compact', selected: this.state.openShowEditor, onClick: function () { return _this.setState({ openShowEditor: !_this.state.openShowEditor }); }, actions: (React.createElement(index_1.IconButton, { icon: "dots-vertical", size: 'small', ariaValue: "More actions", onClick: function () { return false; } })) },
-                                React.createElement(index_1.Container, { className: 'sd-flex-justify-space-between' },
-                                    React.createElement(index_1.Heading, { type: 'h4' }, "Marker"),
-                                    React.createElement(index_1.Text, { color: 'lighter' }, "3 template"))),
-                            React.createElement(index_1.BoxedListItem, { alignVertical: 'center', clickable: true, density: 'compact', actions: (React.createElement(index_1.IconButton, { icon: "dots-vertical", size: 'small', ariaValue: "More actions", onClick: function () { return false; } })) },
-                                React.createElement(index_1.Container, { className: 'sd-flex-justify-space-between' },
-                                    React.createElement(index_1.Heading, { type: 'h4' }, "Tabu"),
-                                    React.createElement(index_1.Text, { color: 'lighter' }, "3 template"))),
-                            React.createElement(index_1.BoxedListItem, { alignVertical: 'center', clickable: true, density: 'compact', actions: (React.createElement(index_1.IconButton, { icon: "dots-vertical", size: 'small', ariaValue: "More actions", onClick: function () { return false; } })) },
-                                React.createElement(index_1.Container, { className: 'sd-flex-justify-space-between' },
-                                    React.createElement(index_1.Heading, { type: 'h4' }, "\u017Divot u ringu"),
-                                    React.createElement(index_1.Text, { color: 'lighter' }, "1 template"))),
-                            React.createElement(index_1.BoxedListItem, { alignVertical: 'center', density: 'compact', clickable: true, actions: (React.createElement(index_1.IconButton, { icon: "dots-vertical", size: 'small', ariaValue: "More actions", onClick: function () { return false; } })) },
-                                React.createElement(index_1.Container, { className: 'sd-flex-justify-space-between' },
-                                    React.createElement(index_1.Heading, { type: 'h4' }, "Intervju"),
-                                    React.createElement(index_1.Text, { color: 'lighter' }, "3 templates"))))),
-                    React.createElement(Layout.RightPanel, { open: this.state.openShowEditor },
-                        React.createElement(Layout.Panel, { side: 'right', background: 'grey' },
-                            React.createElement(Layout.PanelHeader, { title: 'Show details', onClose: function () { return _this.setState({ 'openShowEditor': false }); } }, this.state.value1 ||
-                                React.createElement(Layout.PanelHeaderSlidingToolbar, null,
-                                    React.createElement(index_1.ButtonGroup, { align: 'start' },
-                                        React.createElement(index_1.IconButton, { ariaValue: "Close", icon: "close-small", onClick: function () { return _this.setState({ openShowEditor: !_this.state.openShowEditor }); } })),
-                                    React.createElement(index_1.ButtonGroup, { align: 'end' },
-                                        React.createElement(index_1.Button, { text: "Save Changes", style: 'hollow', onClick: function () { return _this.setState({ openShowEditor: !_this.state.openShowEditor }); }, type: "primary" })))),
-                            React.createElement(Layout.PanelContent, null,
-                                React.createElement(Layout.PanelContentBlock, { flex: true },
-                                    React.createElement(index_1.Container, { direction: 'column', gap: 'x-small' },
-                                        React.createElement(index_1.Container, { direction: 'row', gap: 'small' },
-                                            React.createElement(index_1.Text, { color: 'light' }, "Created 09.06.2022 by "),
-                                            React.createElement(index_1.Text, { weight: 'medium' }, "Mika Karapet")),
-                                        React.createElement(index_1.Container, { direction: 'row', gap: 'small' },
-                                            React.createElement(index_1.Text, { color: 'light' }, "Updated 3 hours ago by "),
-                                            React.createElement(index_1.Text, { weight: 'medium' }, "John Doe"))),
-                                    React.createElement(index_1.Container, { className: 'sd-margin-s--auto sd-flex--items-center' },
-                                        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(Layout.PanelContentBlock, null,
-                                    React.createElement(index_1.SwitchGroup, { className: 'sd-margin-b--3' },
-                                        React.createElement(index_1.Switch, { label: { content: 'Active' }, value: this.state.value1, onChange: function (value) { return _this.setState(function () { return ({ value1: value }); }); } })),
-                                    React.createElement(Form.FormGroup, null,
-                                        React.createElement(Form.FormItem, null,
-                                            React.createElement(index_1.Input, { type: 'text', label: 'Show name', value: 'Marker', required: true, disabled: false, onChange: function () { return false; } }))),
-                                    React.createElement(Form.FormGroup, null,
-                                        React.createElement(Form.FormItem, null,
-                                            React.createElement(index_1.Input, { type: 'text', label: 'Description', required: false, disabled: false, onChange: function () { return false; } })))),
-                                React.createElement(Layout.PanelContentBlock, null,
-                                    React.createElement(index_1.Heading, { type: 'h3', className: 'sd-margin-b--2' }, "Show templates"),
-                                    React.createElement(index_1.BoxedList, null,
-                                        React.createElement(index_1.BoxedListItem, { alignVertical: 'center', density: 'compact', actions: (React.createElement(index_1.IconButton, { icon: "dots-vertical", size: 'small', ariaValue: "More actions", onClick: function () { return false; } })) },
-                                            React.createElement(index_1.Container, { gap: 'small' },
-                                                React.createElement(index_1.Label, { text: 'Marker', color: 'blue--800' }),
-                                                React.createElement("span", null, "Marker Daily"))),
-                                        React.createElement(index_1.BoxedListItem, { alignVertical: 'center', density: 'compact', actions: (React.createElement(index_1.IconButton, { icon: "dots-vertical", size: 'small', ariaValue: "More actions", onClick: function () { return false; } })) },
-                                            React.createElement(index_1.Container, { gap: 'small' },
-                                                React.createElement(index_1.Label, { text: 'Marker', color: 'blue--800' }),
-                                                React.createElement("span", null, "Marker Weekend"))),
-                                        React.createElement(index_1.BoxedListItem, { alignVertical: 'center', density: 'compact', actions: (React.createElement(index_1.IconButton, { icon: "dots-vertical", size: 'small', ariaValue: "More actions", onClick: function () { return false; } })) },
-                                            React.createElement(index_1.Container, { gap: 'small' },
-                                                React.createElement(index_1.Label, { text: 'Marker', color: 'blue--800' }),
-                                                React.createElement("span", null, "Marker Special"))))))))))));
-    };
-    return Rundowns;
-}(React.Component));
-exports.Rundowns = Rundowns;

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

@@ -1,24 +0,0 @@
-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;
-}
-export declare class SamsPlayground extends React.Component<IProps, IState> {
-    constructor(props: IProps);
-    handleFilter(): void;
-    handlePreview(): void;
-    handleTheme(newTheme: string): void;
-    changeStatus(item: any, status: string): void;
-    render(): JSX.Element;
-}
-export {};