superdesk-ui-framework 3.0.65 → 3.0.67

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

@@ -0,0 +1,454 @@
+"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.CoreLayout = void 0;
+var React = __importStar(require("react"));
+var index_1 = require("../../../../app-typescript/index");
+var Layout = __importStar(require("../../../../app-typescript/components/Layouts"));
+var Form = __importStar(require("../../../../app-typescript/components/Form"));
+var Nav = __importStar(require("../../../../app-typescript/components/Navigation"));
+var BottomNav_1 = require("../../../../app-typescript/components/Navigation/BottomNav");
+var lodash_1 = require("lodash");
+var RundownEditor_1 = require("./RundownEditor");
+var ContentList_1 = require("../../../../app-typescript/components/Lists/ContentList");
+var TableList_1 = require("../../../../app-typescript/components/Lists/TableList");
+var Index_1 = require("./components/Index");
+var CoreLayout = /** @class */ (function (_super) {
+    __extends(CoreLayout, _super);
+    function CoreLayout(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            theme: 'light',
+            mainMenuOpen: false,
+            notificationsOpen: false,
+            botNavArray: [
+                { icon: 'photo', title: 'Sed posuere consectetur est at lobortis.', onClick: function () { return false; }, onRemove: function (e) { return _this.handleDelete(e); } },
+                { title: 'Nullam id dolor id nibh ultricies.', onClick: function () { return false; }, onRemove: function (e) { return _this.handleDelete(e); } },
+                { icon: 'video', title: 'Nulla vitae elit libero, a pharetra augue.', onClick: function () { return false; }, onRemove: function (e) { return _this.handleDelete(e); } },
+                { title: 'Donec sed odio dui.', onClick: function () { return false; }, onRemove: function (e) { return _this.handleDelete(e); } },
+            ],
+            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,
+            fullEditor: false,
+            openPanel: false,
+            rightPanel: 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.handleMainMenu = _this.handleMainMenu.bind(_this);
+        _this.handleNotifications = _this.handleNotifications.bind(_this);
+        _this.handleDelete = _this.handleDelete.bind(_this);
+        _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;
+    }
+    CoreLayout.prototype.handleMainMenu = function () {
+        this.setState(function (state) { return ({
+            mainMenuOpen: !state.mainMenuOpen,
+        }); });
+    };
+    CoreLayout.prototype.handleNotifications = function () {
+        this.setState(function (state) { return ({
+            notificationsOpen: !state.notificationsOpen,
+        }); });
+    };
+    CoreLayout.prototype.handleDelete = function (indexNumber) {
+        var newItems = (0, lodash_1.clone)(this.state.botNavArray);
+        newItems.splice(indexNumber, 1);
+        this.setState({
+            botNavArray: newItems,
+        });
+    };
+    CoreLayout.prototype.handleFilter = function () {
+        this.setState(function (state) { return ({
+            openFilter: !state.openFilter,
+        }); });
+    };
+    CoreLayout.prototype.handlePreview = function () {
+        this.setState(function (state) { return ({
+            openPreview: !state.openPreview,
+        }); });
+    };
+    CoreLayout.prototype.handleShow = function () {
+        this.setState(function (state) { return ({
+            openShowEditor: !state.openShowEditor,
+        }); });
+    };
+    CoreLayout.prototype.handleTheme = function (newTheme) {
+        this.setState({
+            theme: newTheme
+        });
+    };
+    CoreLayout.prototype.changeStatus = function (item, status) {
+        if (item.status.includes(status)) {
+            item.status.splice(item.status.indexOf(status), 1);
+        }
+        else {
+            item.status.push(status);
+        }
+    };
+    CoreLayout.prototype.render = function () {
+        var _this = this;
+        return (React.createElement(Layout.CoreLayout, { heading: 'Core Layout', menuOpen: this.state.mainMenuOpen, onClick: this.handleMainMenu, active: this.state.mainMenuOpen, ariaControls: 'main-menu', menuId: 'main-menu', editorFullWidth: this.state.fullEditor, openPanel: this.state.rightPanel, slideInMenu: (React.createElement(Layout.MainMenu, { headerTitle: 'Main Menu', poweredBy: 'Powered by Superdesk technology', header: (null), footerContent: true, footer: (React.createElement("p", null, "Menu footer testing")) },
+                React.createElement(index_1.LeftMenu, { style: 'blanc', reverseItemBorder: true, size: 'large', ariaLabel: 'Left navigation', activeItemId: '1', groups: [
+                        { label: 'MAIN SECTIONS', items: [
+                                { id: '1', label: 'Section 1', ref: 'section1' },
+                                { id: '2', label: 'Section 2', ref: 'section2' },
+                                { id: '3', label: 'Section 3', ref: 'section3' },
+                            ] },
+                        { label: 'OTHER SECTIONS', items: [
+                                { id: '4', label: 'Section 4', ref: 'section4' },
+                                { id: '5', label: 'Section 5', ref: 'section5' },
+                            ] },
+                        { label: 'OTHER SECTIONS', items: [
+                                { id: '6', label: 'Section 6', ref: 'section6' },
+                                { id: '7', label: 'Section 7', ref: 'section7' },
+                            ] }
+                    ], onSelect: function () { return false; } }))), topMenu: (React.createElement(index_1.NavButton, { badgeValue: '6', icon: 'bell', text: 'Show notifications', onClick: this.handleNotifications })), footer: (React.createElement(React.Fragment, null,
+                React.createElement(Layout.BottomBarAction, { onClick: function () { return false; } }),
+                React.createElement(BottomNav_1.BottomNav, { items: this.state.botNavArray }))), overlay: (React.createElement(Layout.NotificationPanel, { header: (null), headerTitle: 'Notifications', open: this.state.notificationsOpen, onClick: this.handleNotifications, theme: 'dark' },
+                React.createElement(index_1.BoxedList, null,
+                    React.createElement(index_1.BoxedListItem, { unread: true },
+                        React.createElement(index_1.Time, { datetime: '29.06.2022' }, "29.06.2022"),
+                        React.createElement(index_1.BoxedListContentRow, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.")),
+                    React.createElement(index_1.BoxedListItem, null,
+                        React.createElement(index_1.Time, { datetime: '29.06.2022' }, "29.06.2022"),
+                        React.createElement(index_1.BoxedListContentRow, null, "Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper.")),
+                    React.createElement(index_1.BoxedListItem, null,
+                        React.createElement(index_1.Time, { datetime: '29.06.2022' }, "29.06.2022"),
+                        React.createElement(index_1.BoxedListContentRow, null, "Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet."))))) },
+            React.createElement(Nav.SideBarMenu, { items: [
+                    { icon: 'dashboard', size: 'big', hover: this.state.openEditor && !this.state.rightPanel, },
+                    { icon: 'view', size: 'big', hover: this.state.openEditor && !this.state.rightPanel, onCLick: function () { return _this.setState({ fullEditor: !_this.state.fullEditor }); } },
+                    { icon: 'marked-star', size: 'big', hover: this.state.openEditor && !this.state.rightPanel, onCLick: function () { return _this.setState({ fullEditor: !_this.state.fullEditor }); } },
+                    { icon: 'spike', size: 'big', hover: this.state.openEditor && !this.state.rightPanel, onCLick: function () { return _this.setState({ fullEditor: !_this.state.fullEditor }); } },
+                    { icon: 'personal', size: 'big', hover: this.state.openEditor && !this.state.rightPanel, onCLick: function () { return _this.setState({ fullEditor: !_this.state.fullEditor }); } },
+                    { icon: 'global-search', size: 'big', hover: this.state.openEditor && !this.state.rightPanel, onCLick: function () { return _this.setState({ fullEditor: !_this.state.fullEditor }); } },
+                    { icon: 'picture', size: 'big', hover: this.state.openEditor && !this.state.rightPanel, onCLick: function () { return _this.setState({ fullEditor: !_this.state.fullEditor }); } },
+                    { icon: 'rundown', size: 'big', hover: this.state.openEditor && !this.state.rightPanel, onCLick: function () { return _this.setState({ fullEditor: !_this.state.fullEditor }); } }
+                ] }),
+            !this.state.fullEditor && !this.state.rightPanel
+                && 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(Layout.Container, { direction: 'column', gap: 'x-small' },
+                                        React.createElement(Layout.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(Layout.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(Layout.Container, { className: 'sd-margin-s--auto sd-flex--items-center' })),
+                                React.createElement(Layout.PanelContentBlock, null,
+                                    React.createElement(Layout.Container, { direction: 'row', gap: 'large', className: 'sd-margin-b--3' },
+                                        React.createElement(index_1.Label, { size: 'large', text: 'Tabu', color: 'blue--800' }),
+                                        React.createElement(Layout.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(Layout.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 });
+                        }
+                    } }))));
+    };
+    return CoreLayout;
+}(React.Component));
+exports.CoreLayout = CoreLayout;

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

@@ -0,0 +1,27 @@
+import * as React from 'react';
+interface IProps {
+    children?: React.ReactNode;
+}
+interface IState {
+    theme: 'dark' | 'light' | string;
+    itemType: string;
+    dropDownState: string;
+    itemSelected1: boolean;
+    itemSelected2: boolean;
+    itemSelected3: boolean;
+    value1: boolean;
+    value2: boolean;
+    value3: boolean;
+    leftPanelOpen: boolean;
+    rightPanelOpen: boolean;
+    rightPanelPinned: boolean;
+    sideOverlayOpen: boolean;
+    activeTab: string | null;
+}
+export declare class EditorTest extends React.Component<IProps, IState> {
+    constructor(props: IProps);
+    handleTheme(newTheme: string): void;
+    changeStatus(item: any, status: string): void;
+    render(): JSX.Element;
+}
+export {};