superdesk-ui-framework 3.0.67 → 3.0.68

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

@@ -1,256 +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.EditorTest = 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 Lists_1 = require("../../../../app-typescript/components/Lists");
-var Lists_2 = require("../../../../app-typescript/components/Lists");
-var EditorTest = /** @class */ (function (_super) {
-    __extends(EditorTest, _super);
-    function EditorTest(props) {
-        var _this = _super.call(this, props) || this;
-        _this.state = {
-            theme: 'light',
-            itemType: 'itemtype01',
-            dropDownState: '',
-            itemSelected1: false,
-            itemSelected2: false,
-            itemSelected3: false,
-            value1: false,
-            value2: false,
-            value3: false,
-            leftPanelOpen: false,
-            rightPanelOpen: false,
-            rightPanelPinned: false,
-            sideOverlayOpen: false,
-            activeTab: '1',
-        };
-        _this.handleTheme = _this.handleTheme.bind(_this);
-        return _this;
-    }
-    EditorTest.prototype.handleTheme = function (newTheme) {
-        this.setState({
-            theme: newTheme
-        });
-    };
-    EditorTest.prototype.changeStatus = function (item, status) {
-        if (item.status.includes(status)) {
-            item.status.splice(item.status.indexOf(status), 1);
-        }
-        else {
-            item.status.push(status);
-        }
-    };
-    EditorTest.prototype.render = function () {
-        var _this = this;
-        return (React.createElement(Layout.AuthoringFrame, { header: (React.createElement(index_1.SubNav, { zIndex: 2 },
-                React.createElement(index_1.ButtonGroup, { align: 'end' },
-                    React.createElement(index_1.Button, { text: "Open pinned", style: "hollow", onClick: function () { return _this.setState({ 'rightPanelOpen': !_this.state.rightPanelOpen }); } }),
-                    React.createElement(index_1.Divider, { size: "mini" }),
-                    React.createElement(index_1.ButtonGroup, { subgroup: true, spaces: "no-space" },
-                        React.createElement(index_1.Dropdown, { items: [
-                                {
-                                    type: 'group', label: 'Chose a theme', items: [
-                                        'divider',
-                                        { label: 'Light', onSelect: function () { return _this.handleTheme('light-ui'); } },
-                                        { label: 'Dark', onSelect: function () { return _this.handleTheme('dark-ui'); } },
-                                    ]
-                                },
-                            ] },
-                            React.createElement(index_1.NavButton, { type: 'default', icon: 'adjust', onClick: function () { return false; } })),
-                        React.createElement(index_1.Tooltip, { text: 'Minimize', flow: 'left' },
-                            React.createElement(index_1.NavButton, { type: 'default', icon: 'minimize', iconSize: 'big', text: 'Minimize', onClick: function () { return false; } })),
-                        React.createElement(index_1.Tooltip, { text: 'More actions', flow: 'left' },
-                            React.createElement(index_1.NavButton, { type: 'default', icon: 'dots-vertical', text: 'More actions', onClick: function () { return false; } })),
-                        React.createElement(index_1.Tooltip, { text: 'Send to / Publish', flow: 'left' },
-                            React.createElement(index_1.NavButton, { type: 'highlight', icon: 'send-to', iconSize: 'big', text: 'Send to / Publish', onClick: function () { return false; } })))))), leftPanel: (React.createElement(Nav.SideBarTabs, { items: [
-                    { icon: 'semantics', size: 'big', tooltip: 'Semantics', id: '1' },
-                    { icon: 'create-list', size: 'big', tooltip: 'Create list', id: '2' },
-                    { icon: 'picture', size: 'big', tooltip: 'Pictures', id: '3' },
-                    { icon: 'annotation', size: 'big', tooltip: 'Annotations', id: '4' },
-                    { icon: 'export', size: 'big', tooltip: 'Export', id: '5' }
-                ], activeTab: this.state.activeTab, onActiveTabChange: function (val) {
-                    _this.setState({
-                        activeTab: val,
-                    });
-                } })), main: (React.createElement(Layout.AuthoringMain, { headerPadding: 'medium', toolBar: (React.createElement(React.Fragment, null,
-                    React.createElement("div", { className: "sd-editor-toolbar__content" },
-                        React.createElement("dl", null,
-                            React.createElement("dt", null, "Created"),
-                            React.createElement("dd", null,
-                                React.createElement("time", { title: "July 29, 2021 3:58 PM" }, "07/29")),
-                            React.createElement("dt", null, "by"),
-                            React.createElement("dt", null, "Nareg Asmarian")),
-                        React.createElement("dl", null,
-                            React.createElement("dt", null, "Modified"),
-                            React.createElement("dd", null,
-                                React.createElement("time", { title: "July 29, 2021 3:58 PM" }, "07/29")))),
-                    React.createElement(index_1.ButtonGroup, { align: 'end' },
-                        React.createElement(index_1.IconButton, { icon: "preview-mode", toolTipAppend: true, ariaValue: "Print preview", onClick: function () { return false; } }),
-                        React.createElement(index_1.IconButton, { icon: "adjust", ariaValue: "Toogle theme", onClick: function () { return false; } }),
-                        React.createElement(index_1.IconButton, { icon: "switches", ariaValue: "Theme settings", onClick: function () { return false; } })))), authoringHeader: (React.createElement(React.Fragment, null,
-                    React.createElement(Form.FormGroup, { inlineLabel: true },
-                        React.createElement(Form.FormItem, null,
-                            React.createElement(index_1.Input, { type: 'text', label: 'Slugline', value: 'This is some value', maxLength: 30, info: 'This is some hint message', required: false, disabled: false, onChange: function () { return false; } })),
-                        React.createElement(Form.FormItem, null,
-                            React.createElement(index_1.Input, { type: 'text', label: 'Slugline', value: 'This is some value', maxLength: 30, info: 'This is some hint message', required: false, disabled: false, onChange: function () { return false; } }))),
-                    React.createElement(Form.FormGroup, { inlineLabel: true },
-                        React.createElement(Form.FormItem, null,
-                            React.createElement(index_1.Input, { type: 'text', label: 'Genre', value: 'This is some value', maxLength: 30, info: 'This is some hint message', required: false, disabled: false, onChange: function () { return false; } }))),
-                    React.createElement(Form.FormGroup, { marginBottom: '0', inlineLabel: true },
-                        React.createElement(Form.FormItem, null,
-                            React.createElement(index_1.Input, { type: 'text', label: 'Subject', value: 'This is some value', maxLength: 30, info: 'This is some hint message', required: true, disabled: false, onChange: function () { return false; } })),
-                        React.createElement(Form.FormItem, { autoWidth: true },
-                            React.createElement(Form.FormText, null, "Just testing:")),
-                        React.createElement(Form.FormItem, null,
-                            React.createElement(index_1.Select, { label: 'Categories', 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, "Option 1"),
-                                React.createElement(index_1.Option, null, "Option 2"))),
-                        React.createElement(Form.FormItem, { autoWidth: true },
-                            React.createElement(index_1.ButtonGroup, null,
-                                React.createElement(index_1.IconButton, { ariaValue: "Submit", icon: "picture", onClick: function () { return false; } }),
-                                React.createElement(index_1.Button, { text: "Cancel", onClick: function () { return false; }, type: "default", style: "hollow" }),
-                                React.createElement(index_1.Button, { text: "Submit", onClick: function () { return false; }, type: "primary" })))))), authoringBookmarks: (React.createElement(Nav.QuickNavBar, { scrollSpy: '#scroll', offset: -300, items: [
-                        { icon: 'heading-1', tooltip: 'Headline', onClick: function () { return false; }, id: 'section1' },
-                        { icon: 'align-left', tooltip: 'Body', onClick: function () { return false; }, id: 'section2' },
-                        { icon: 'picture', tooltip: 'Media', onClick: function () { return false; }, id: 'section3' },
-                        { icon: 'attachment-large', tooltip: 'Attachments', onClick: function () { return false; }, id: 'section4' }
-                    ] })) },
-                React.createElement("div", { id: 'scroll', style: { overflow: 'scroll', height: 600 } },
-                    React.createElement("div", { id: 'section1' },
-                        React.createElement(index_1.Heading, { type: 'h1', className: 'sd-padding--5' }, "Section 1"),
-                        React.createElement("p", { className: 'sd-margin-b--3' }, "Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit."),
-                        React.createElement("p", { className: 'sd-margin-b--3' }, "Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Morbi leo risus, porta ac consectetur ac, vestibulum at eros."),
-                        React.createElement("p", { className: 'sd-margin-b--3' }, "Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna."),
-                        React.createElement("p", null, "Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum."),
-                        React.createElement(Layout.Container, { gap: "large", className: 'sd-border--medium sd-font-size--medium sd-padding--2 sd-radius--large' },
-                            React.createElement("span", null, "Curabitur blandit tempus porttitor."),
-                            React.createElement(index_1.Button, { text: "Test button", type: "primary", onClick: function () { return false; } }),
-                            React.createElement(index_1.Button, { text: "Test button", type: "highlight", onClick: function () { return false; } }),
-                            React.createElement(index_1.ButtonGroup, { align: "end" },
-                                React.createElement(index_1.Button, { text: "Cancel", onClick: function () { return false; }, type: "default", style: "hollow" }),
-                                React.createElement(index_1.Button, { text: "Submit", onClick: function () { return false; }, type: "primary" })))),
-                    React.createElement("div", { id: 'section2' },
-                        React.createElement(index_1.Heading, { type: 'h1', className: 'sd-padding--5' }, "Section 2"),
-                        React.createElement("p", { className: 'sd-margin-b--3' }, "Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit."),
-                        React.createElement("p", { className: 'sd-margin-b--3' }, "Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Morbi leo risus, porta ac consectetur ac, vestibulum at eros."),
-                        React.createElement("p", { className: 'sd-margin-b--3' }, "Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna."),
-                        React.createElement("p", null, "Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum."),
-                        React.createElement(Layout.Container, { gap: "large", className: 'sd-border--medium sd-font-size--medium sd-padding--2 sd-radius--large' },
-                            React.createElement("span", null, "Curabitur blandit tempus porttitor."),
-                            React.createElement(index_1.Button, { text: "Test button", type: "primary", onClick: function () { return false; } }),
-                            React.createElement(index_1.Button, { text: "Test button", type: "highlight", onClick: function () { return false; } }),
-                            React.createElement(index_1.ButtonGroup, { align: "end" },
-                                React.createElement(index_1.Button, { text: "Cancel", onClick: function () { return false; }, type: "default", style: "hollow" }),
-                                React.createElement(index_1.Button, { text: "Submit", onClick: function () { return false; }, type: "primary" })))),
-                    React.createElement("div", { id: 'section3' },
-                        React.createElement(index_1.Heading, { type: 'h1', className: 'sd-padding--5' }, "Section 3"),
-                        React.createElement("p", { className: 'sd-margin-b--3' }, "Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit."),
-                        React.createElement("p", { className: 'sd-margin-b--3' }, "Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Morbi leo risus, porta ac consectetur ac, vestibulum at eros."),
-                        React.createElement("p", { className: 'sd-margin-b--3' }, "Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna."),
-                        React.createElement("p", null, "Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum."),
-                        React.createElement(Layout.Container, { gap: "large", className: 'sd-border--medium sd-font-size--medium sd-padding--2 sd-radius--large' },
-                            React.createElement("span", null, "Curabitur blandit tempus porttitor."),
-                            React.createElement(index_1.Button, { text: "Test button", type: "primary", onClick: function () { return false; } }),
-                            React.createElement(index_1.Button, { text: "Test button", type: "highlight", onClick: function () { return false; } }),
-                            React.createElement(index_1.ButtonGroup, { align: "end" },
-                                React.createElement(index_1.Button, { text: "Cancel", onClick: function () { return false; }, type: "default", style: "hollow" }),
-                                React.createElement(index_1.Button, { text: "Submit", onClick: function () { return false; }, type: "primary" })))),
-                    React.createElement("div", { id: 'section4' },
-                        React.createElement(index_1.Heading, { type: 'h1', className: 'sd-padding--5' }, "Section 4"),
-                        React.createElement("p", { className: 'sd-margin-b--3' }, "Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit."),
-                        React.createElement("p", { className: 'sd-margin-b--3' }, "Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Morbi leo risus, porta ac consectetur ac, vestibulum at eros."),
-                        React.createElement("p", { className: 'sd-margin-b--3' }, "Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna."),
-                        React.createElement("p", null, "Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum."),
-                        React.createElement(Layout.Container, { gap: "large", className: 'sd-border--medium sd-font-size--medium sd-padding--2 sd-radius--large' },
-                            React.createElement("span", null, "Curabitur blandit tempus porttitor."),
-                            React.createElement(index_1.Button, { text: "Test button", type: "primary", onClick: function () { return false; } }),
-                            React.createElement(index_1.Button, { text: "Test button", type: "highlight", onClick: function () { return false; } }),
-                            React.createElement(index_1.ButtonGroup, { align: "end" },
-                                React.createElement(index_1.Button, { text: "Cancel", onClick: function () { return false; }, type: "default", style: "hollow" }),
-                                React.createElement(index_1.Button, { text: "Submit", onClick: function () { return false; }, type: "primary" }))))))), sidePanelPinned: this.state.rightPanelOpen, sidePanel: (React.createElement(Layout.Panel, { side: 'right', background: 'grey', open: this.state.rightPanelOpen, size: 'x-small' },
-                React.createElement(Layout.PanelHeader, { title: 'Pinned content', onClose: function () { return _this.setState({ 'rightPanelOpen': false }); } }),
-                React.createElement(Layout.PanelContent, null,
-                    React.createElement(Layout.PanelContentBlock, null,
-                        React.createElement(Lists_1.BoxedList, { density: 'comfortable' },
-                            React.createElement(Lists_1.BoxedListItem, { type: "success", clickable: true, media: (React.createElement(index_1.Icon, { name: 'slideshow' })), actions: (React.createElement(index_1.IconButton, { icon: "dots-vertical", ariaValue: "More actions", onClick: function () { return false; } })) },
-                                React.createElement(Lists_1.BoxedListContentRow, null, "Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper."),
-                                React.createElement(Lists_1.BoxedListContentRow, null, "Praesent commodo cursus magna, vel scelerisque nisl consectetur et.")),
-                            React.createElement(Lists_1.BoxedListItem, { type: "warning", media: (React.createElement(index_1.AvatarWrapper, { size: "medium" },
-                                    React.createElement(index_1.AvatarContentText, { text: "JL", tooltipText: "Jeffrey Lebowski" }))), footer: (React.createElement(index_1.ButtonGroup, { align: "end" },
-                                    React.createElement(index_1.Button, { text: "cancel", size: "small", style: "hollow", onClick: function () { return false; } }),
-                                    React.createElement(index_1.Button, { text: "yes", size: "small", style: "hollow", type: "primary", onClick: function () { return false; } }))), actions: (React.createElement(index_1.IconButton, { icon: "dots-vertical", ariaValue: "More actions", onClick: function () { return false; } })) },
-                                React.createElement(Lists_1.BoxedListContentRow, null, "Maecenas sed diam eget risus varius blandit sit amet magna.")),
-                            React.createElement(Lists_1.BoxedListItem, { selected: true, actions: (React.createElement(index_1.IconButton, { icon: "dots-vertical", ariaValue: "More actions", onClick: function () { return false; } })) },
-                                React.createElement(Lists_1.BoxedListContentRow, null, "Maecenas sed diam eget risus varius blandit sit amet magna. Vestibulum id ligula porta felis euismod semper."))))))), sideOverlayOpen: this.state.sideOverlayOpen, sideOverlay: (React.createElement(Layout.Panel, { background: 'light', open: this.state.sideOverlayOpen, size: 'x-small' },
-                React.createElement(Layout.PanelHeader, { title: "Metadata (overlay pannel)", onClose: function () { return _this.setState({ 'sideOverlayOpen': false }); } }),
-                React.createElement(Layout.PanelContent, { loading: false, empty: false, emptyTemplate: (React.createElement(index_1.EmptyState, { title: "test" })) },
-                    React.createElement(Layout.PanelContentBlock, null,
-                        React.createElement(Lists_2.SimpleList, { border: true },
-                            React.createElement(Lists_2.SimpleListItem, { justify: "space-between" },
-                                React.createElement(Form.FormLabel, { text: "My label" }),
-                                React.createElement(index_1.Switch, { toolTipFlow: 'left', label: { content: 'My label', hidden: true }, value: this.state.value1, onChange: function (value) { return _this.setState(function () { return ({ value1: value }); }); } })),
-                            React.createElement(Lists_2.SimpleListItem, { justify: "space-between" },
-                                React.createElement(Form.FormLabel, { text: "Form label" }),
-                                React.createElement(index_1.Switch, { toolTipFlow: 'left', label: { content: 'Form label', hidden: true }, value: this.state.value2, onChange: function (value) { return _this.setState(function () { return ({ value2: value }); }); } })),
-                            React.createElement(Lists_2.SimpleListItem, { stacked: true },
-                                React.createElement(Form.FormLabel, { text: "Label two" }),
-                                React.createElement(index_1.Text, { size: "small", weight: "light" }, "Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo."))))))), sideBar: (React.createElement(Nav.SideBarTabs, { items: [
-                    { icon: 'info', size: 'big', tooltip: 'Info', id: '1' },
-                    { icon: 'chat', size: 'big', tooltip: 'Comments', id: '2' },
-                    { icon: 'history', size: 'big', tooltip: 'History', id: '3' },
-                    { icon: 'package', size: 'big', tooltip: 'Packages', id: '4' },
-                    { icon: 'attachment', size: 'big', tooltip: 'Attachments', id: '5' },
-                    { icon: 'comments', size: 'big', tooltip: 'Inline Comments', id: '6' },
-                    { icon: 'suggestion', size: 'big', tooltip: 'Suggestions', id: '7' }
-                ], activeTab: this.state.activeTab, onActiveTabChange: function (val) {
-                    _this.setState({
-                        activeTab: val,
-                        sideOverlayOpen: !_this.state.sideOverlayOpen,
-                    });
-                } })), overlayPanel: (React.createElement("div", null)) }));
-    };
-    return EditorTest;
-}(React.Component));
-exports.EditorTest = EditorTest;

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

@@ -1,19 +0,0 @@
-import * as React from 'react';
-interface IProps {
-    children?: React.ReactNode;
-}
-interface IState {
-    theme: 'dark' | 'light';
-    itemType: string;
-    dropDownState: string;
-    openPreview: boolean;
-    openFilter: boolean;
-}
-export declare class FirstPlayground extends React.Component<IProps, IState> {
-    constructor(props: IProps);
-    handleFilter(): void;
-    handlePreview(): void;
-    handleTheme(): void;
-    render(): JSX.Element;
-}
-export {};

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

@@ -1,160 +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.FirstPlayground = void 0;
-var React = __importStar(require("react"));
-var Components = __importStar(require("./components/Index"));
-var index_1 = require("../../../../app-typescript/index");
-var FirstPlayground = /** @class */ (function (_super) {
-    __extends(FirstPlayground, _super);
-    function FirstPlayground(props) {
-        var _this = _super.call(this, props) || this;
-        _this.state = {
-            theme: 'light',
-            itemType: 'itemtype01',
-            dropDownState: '',
-            openPreview: false,
-            openFilter: false,
-        };
-        _this.handleFilter = _this.handleFilter.bind(_this);
-        _this.handlePreview = _this.handlePreview.bind(_this);
-        _this.handleTheme = _this.handleTheme.bind(_this);
-        return _this;
-    }
-    FirstPlayground.prototype.handleFilter = function () {
-        this.setState(function (state) { return ({
-            openFilter: !state.openFilter,
-        }); });
-    };
-    FirstPlayground.prototype.handlePreview = function () {
-        this.setState(function (state) { return ({
-            openPreview: !state.openPreview,
-        }); });
-    };
-    FirstPlayground.prototype.handleTheme = function () {
-        if (this.state.theme === 'light') {
-            this.setState({
-                theme: 'dark'
-            });
-        }
-        else {
-            this.setState({
-                theme: 'light'
-            });
-        }
-    };
-    FirstPlayground.prototype.render = function () {
-        var _this = this;
-        return (React.createElement(Components.Layout, { header: 'First playground', theme: this.state.theme },
-            React.createElement(Components.SidebarMenu, { items: [
-                    { icon: 'dashboard', size: 'big', tooltip: 'Dashboard' },
-                    { icon: 'view', size: 'big' },
-                    { icon: 'marked-star', size: 'big' },
-                    { icon: 'spike', size: 'big' },
-                    'divider',
-                    { icon: 'personal', size: 'big' },
-                    { icon: 'global-search', size: 'big' },
-                    { icon: 'picture', size: 'big' }
-                ] }),
-            React.createElement("div", { className: 'sd-content-wrapper__main-content-area sd-main-content-grid comfort' },
-                React.createElement(Components.HeaderPanel, null,
-                    React.createElement(index_1.SubNav, null,
-                        React.createElement(index_1.ButtonGroup, { align: 'inline' },
-                            React.createElement(index_1.Dropdown, { items: [
-                                    {
-                                        type: 'group', label: 'Archives', items: [
-                                            'divider',
-                                            { label: 'All archives', onSelect: function () { return _this.setState({ dropDownState: 'All archives' }); } },
-                                            { label: 'Media archive', onSelect: function () { return _this.setState({ dropDownState: 'Media archive' }); } },
-                                            { label: 'File archive', onSelect: function () { return _this.setState({ dropDownState: 'File archive' }); } },
-                                            { label: 'AP images', onSelect: function () { return _this.setState({ dropDownState: 'AP archive' }); } },
-                                        ]
-                                    }
-                                ] },
-                                React.createElement(index_1.NavButton, { onClick: function () { return false; } }))),
-                        React.createElement(index_1.ButtonGroup, { align: 'end' },
-                            React.createElement(index_1.NavButton, { icon: 'dots-vertical', onClick: function () { return false; } }))),
-                    React.createElement(index_1.SubNav, null,
-                        React.createElement(index_1.ButtonGroup, null,
-                            React.createElement(index_1.NavButton, { icon: 'filter-large', onClick: this.handleFilter })),
-                        React.createElement(index_1.ButtonGroup, { align: 'end' },
-                            React.createElement(index_1.NavButton, { icon: 'adjust', onClick: this.handleTheme }),
-                            React.createElement(index_1.NavButton, { icon: 'th-list', onClick: function () { return false; } })))),
-                React.createElement(Components.LeftPanel, { open: this.state.openFilter },
-                    React.createElement(Components.Panel, null,
-                        React.createElement(Components.PanelHeader, { handleFilterParent: this.handleFilter, title: 'Advanced filters' }),
-                        React.createElement(Components.PanelContent, null,
-                            React.createElement(Components.PanelContentBlock, null,
-                                React.createElement("div", { className: "form__group" },
-                                    React.createElement("div", { className: "form__item" },
-                                        React.createElement(index_1.Input, { type: 'text', label: '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, { type: 'text', label: 'LOCATION', inlineLabel: false, disabled: false, onChange: function () { return false; } }))),
-                                React.createElement("div", { className: "form__group" },
-                                    React.createElement("div", { className: "form__item" },
-                                        React.createElement(index_1.Input, { type: 'text', label: 'CATEGORY', inlineLabel: false, disabled: false, onChange: function () { return false; } }))),
-                                React.createElement("div", { className: "form__group" },
-                                    React.createElement("div", { className: "form__item" },
-                                        React.createElement(index_1.Input, { type: 'text', label: 'SUBJECT', 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(Components.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(Components.MainPanel, null),
-                React.createElement(Components.RightPanel, { open: this.state.openPreview }),
-                React.createElement(Components.OverlayPanel, null))));
-    };
-    return FirstPlayground;
-}(React.Component));
-exports.FirstPlayground = FirstPlayground;

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

@@ -1,11 +0,0 @@
-export { FirstPlayground } from './FirstPlayground';
-export { SamsPlayground } from './SamsPlayground';
-export { TestGround } from './TestGround';
-export { UiPlayground } from './UiPlayground';
-export { PageLayoutTest } from './PageLayoutTest';
-export { EditorTest } from './EditorTest';
-export { Multiedit } from './Multiedit';
-export { RundownEditor } from './RundownEditor';
-export { PersonalProfile } from './PersonalProfile';
-export { Rundowns } from './Rundowns';
-export { CoreLayout } from './CoreLayout';

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

@@ -1,25 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CoreLayout = exports.Rundowns = exports.PersonalProfile = exports.RundownEditor = exports.Multiedit = exports.EditorTest = exports.PageLayoutTest = exports.UiPlayground = exports.TestGround = exports.SamsPlayground = exports.FirstPlayground = void 0;
-var FirstPlayground_1 = require("./FirstPlayground");
-Object.defineProperty(exports, "FirstPlayground", { enumerable: true, get: function () { return FirstPlayground_1.FirstPlayground; } });
-var SamsPlayground_1 = require("./SamsPlayground");
-Object.defineProperty(exports, "SamsPlayground", { enumerable: true, get: function () { return SamsPlayground_1.SamsPlayground; } });
-var TestGround_1 = require("./TestGround");
-Object.defineProperty(exports, "TestGround", { enumerable: true, get: function () { return TestGround_1.TestGround; } });
-var UiPlayground_1 = require("./UiPlayground");
-Object.defineProperty(exports, "UiPlayground", { enumerable: true, get: function () { return UiPlayground_1.UiPlayground; } });
-var PageLayoutTest_1 = require("./PageLayoutTest");
-Object.defineProperty(exports, "PageLayoutTest", { enumerable: true, get: function () { return PageLayoutTest_1.PageLayoutTest; } });
-var EditorTest_1 = require("./EditorTest");
-Object.defineProperty(exports, "EditorTest", { enumerable: true, get: function () { return EditorTest_1.EditorTest; } });
-var Multiedit_1 = require("./Multiedit");
-Object.defineProperty(exports, "Multiedit", { enumerable: true, get: function () { return Multiedit_1.Multiedit; } });
-var RundownEditor_1 = require("./RundownEditor");
-Object.defineProperty(exports, "RundownEditor", { enumerable: true, get: function () { return RundownEditor_1.RundownEditor; } });
-var PersonalProfile_1 = require("./PersonalProfile");
-Object.defineProperty(exports, "PersonalProfile", { enumerable: true, get: function () { return PersonalProfile_1.PersonalProfile; } });
-var Rundowns_1 = require("./Rundowns");
-Object.defineProperty(exports, "Rundowns", { enumerable: true, get: function () { return Rundowns_1.Rundowns; } });
-var CoreLayout_1 = require("./CoreLayout");
-Object.defineProperty(exports, "CoreLayout", { enumerable: true, get: function () { return CoreLayout_1.CoreLayout; } });

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

@@ -1,36 +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;
-    sideBarOpen: boolean;
-    arr: any;
-}
-export declare class Multiedit extends React.Component<IProps, IState> {
-    constructor(props: IProps);
-    handleTheme(newTheme: string): void;
-    changeStatus(item: any, status: string): void;
-    render(): JSX.Element;
-}
-interface IEditor {
-    sideBarOpen?: boolean;
-    activeTab: string | null;
-}
-export declare class Editor extends React.Component<{}, IEditor> {
-    constructor(props: IEditor);
-    render(): JSX.Element;
-}
-export {};