superdesk-ui-framework 3.0.65 → 3.0.67

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

@@ -0,0 +1,558 @@
+"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

@@ -0,0 +1,24 @@
+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 {};