superdesk-ui-framework 3.0.67 → 3.0.68

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

@@ -1,454 +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.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

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