superdesk-ui-framework 3.0.67 → 3.0.68

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

@@ -1,350 +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.PersonalProfile = void 0;
-var React = __importStar(require("react"));
-var Components = __importStar(require("./components/Index"));
-var index_1 = require("../../../../app-typescript/index");
-var Layout = __importStar(require("../../../../app-typescript/components/Layouts"));
-var Form = __importStar(require("../../../../app-typescript/components/Form"));
-var PersonalProfile = /** @class */ (function (_super) {
-    __extends(PersonalProfile, _super);
-    function PersonalProfile(props) {
-        var _this = _super.call(this, props) || this;
-        _this.handleClick = function (number) {
-            _this.setState({
-                indexValue: number,
-            });
-        };
-        _this.state = {
-            theme: 'light',
-            itemType: 'itemtype01',
-            dropDownState: '',
-            openPreview: false,
-            openFilter: false,
-            itemSelected1: false,
-            itemSelected2: false,
-            itemSelected3: false,
-            value1: false,
-            value2: true,
-            value3: true,
-            value4: false,
-            value5: true,
-            value6: true,
-            value7: false,
-            value8: false,
-            value9: false,
-            value10: false,
-            value11: true,
-            value12: true,
-            radioValue1: 'list',
-            radioValue2: 'grid',
-            radioValue3: 'list',
-            indexValue: 0,
-        };
-        _this.handleFilter = _this.handleFilter.bind(_this);
-        _this.handlePreview = _this.handlePreview.bind(_this);
-        _this.handleTheme = _this.handleTheme.bind(_this);
-        _this.handleClick = _this.handleClick.bind(_this);
-        return _this;
-    }
-    PersonalProfile.prototype.handleFilter = function () {
-        this.setState(function (state) { return ({
-            openFilter: !state.openFilter,
-        }); });
-    };
-    PersonalProfile.prototype.handlePreview = function () {
-        this.setState(function (state) { return ({
-            openPreview: !state.openPreview,
-        }); });
-    };
-    PersonalProfile.prototype.handleTheme = function (newTheme) {
-        this.setState({
-            theme: newTheme
-        });
-    };
-    PersonalProfile.prototype.changeStatus = function (item, status) {
-        if (item.status.includes(status)) {
-            item.status.splice(item.status.indexOf(status), 1);
-        }
-        else {
-            item.status.push(status);
-        }
-    };
-    PersonalProfile.prototype.render = function () {
-        var _this = this;
-        return (React.createElement(Components.Layout, { header: 'My Profile', theme: this.state.theme },
-            React.createElement(Components.LayoutContainer, null,
-                React.createElement(Components.HeaderPanel, null,
-                    React.createElement(index_1.SubNav, { zIndex: 2 },
-                        React.createElement(index_1.ButtonGroup, { align: 'start', spaces: 'no-space' },
-                            React.createElement(index_1.Tooltip, { text: 'User list', flow: 'right' },
-                                React.createElement(index_1.NavButton, { icon: 'arrow-left', onClick: function () { return false; } }))),
-                        React.createElement(index_1.SubNavDivider, { width: 'medium' }),
-                        React.createElement(index_1.AvatarWrapper, { size: "medium" },
-                            React.createElement(index_1.AvatarContentImage, { imageUrl: "/avatar.jpg", tooltipText: "John Doe" })),
-                        React.createElement("h2", { className: 'subnav__page-title' }, "Jeffrey Lebowski")),
-                    React.createElement(index_1.SubNav, { zIndex: 1 },
-                        React.createElement(index_1.SubNavDivider, { width: 'small' }),
-                        React.createElement(index_1.Tabs, { onClick: this.handleClick },
-                            React.createElement(index_1.TabLabel, { label: 'Overview', indexValue: 0 }),
-                            React.createElement(index_1.TabLabel, { label: 'Personal preferences', indexValue: 1 }),
-                            React.createElement(index_1.TabLabel, { label: 'Privileges', indexValue: 2 })))),
-                React.createElement(index_1.TabContent, { activePanel: this.state.indexValue },
-                    React.createElement(index_1.TabPanel, { indexValue: 0 },
-                        React.createElement(Layout.LeftPanel, { open: true },
-                            React.createElement(Layout.Panel, { background: 'transparent', size: 'xx-small' },
-                                React.createElement(Layout.PanelContent, null,
-                                    React.createElement(index_1.LeftMenu, { ariaLabel: 'Left navigation', scrollSpy: '#scrollContainer', activeItemId: '1', style: 'blanc', groups: [{ label: '', items: [
-                                                    { id: '1', label: 'General info', ref: 'profile' },
-                                                    { id: '2', label: 'Password', ref: 'password' },
-                                                    { id: '3', label: 'Default desk', ref: 'defaultDesk' },
-                                                    { id: '4', label: 'Language', ref: 'language' },
-                                                    { id: '5', label: 'Author info', ref: 'autorInfo' }
-                                                ] }], onSelect: function () { console.log('onSelect triggered'); } })))),
-                        React.createElement(Layout.MainPanel, { className: 'sd-padding--3', id: 'scrollContainer' },
-                            React.createElement(index_1.SimpleList, { density: 'comfortable', width: 'large' },
-                                React.createElement(index_1.SimpleListItem, { stacked: true, id: 'profile' },
-                                    React.createElement(index_1.Container, { id: "profile", direction: 'column', className: 'sd-radius--medium sd-panel-bg--gradient-1 sd-shadow--z2 sd-padding--3 sd-state--focus' },
-                                        React.createElement(index_1.Container, { className: 'sd-flex-justify-space-between sd-margin-b--2' },
-                                            React.createElement(index_1.Label, { text: 'Active', type: 'success', style: 'translucent' }),
-                                            React.createElement(index_1.Switch, { toolTipFlow: 'left', label: { content: 'Toggle active', hidden: true }, value: this.state.value1, onChange: function (value) { return _this.setState(function () { return ({ value1: value }); }); } })),
-                                        React.createElement(index_1.Container, { direction: 'column', className: 'sd-flex-align-items-center sd-margin-x--auto' },
-                                            React.createElement(index_1.AvatarWrapper, { size: "xx-large" },
-                                                React.createElement(index_1.AvatarContentImage, { imageUrl: "/avatar.jpg", tooltipText: "John Doe" })),
-                                            React.createElement(index_1.Heading, { className: 'sd-margin-b--0-5 sd-margin-t--2', align: 'center', type: 'h2' }, "Jeffrey Lebowski"),
-                                            React.createElement(index_1.Text, { className: 'sd-margin-b--1 sd-font-size--medium', align: 'center', color: 'light' }, "the_dude"),
-                                            React.createElement(index_1.Text, { className: 'sd-margin-b--1-5 sd-font-size--x-small', align: 'center', color: 'lighter' }, "Member since 24.04.2011"),
-                                            React.createElement(index_1.ButtonGroup, { spaces: 'compact', align: 'center' },
-                                                React.createElement(index_1.Tag, { text: 'Editor', shade: 'light', readOnly: true, onClick: function () { return false; } }),
-                                                React.createElement(index_1.Tag, { text: 'Author', shade: 'light', readOnly: true, onClick: function () { return false; } }),
-                                                React.createElement(index_1.Tag, { text: 'Administrator', shade: 'highlight1', readOnly: true, onClick: function () { return false; } }))),
-                                        React.createElement(index_1.Container, { direction: 'column', className: 'sd-margin-t--4' },
-                                            React.createElement(Form.FormGroup, { marginBottom: '3' },
-                                                React.createElement(Form.FormItem, null,
-                                                    React.createElement(index_1.Input, { label: 'First Name', type: 'text', value: 'Jeffrey', required: false, disabled: false, onChange: function () { return false; } }))),
-                                            React.createElement(Form.FormGroup, { marginBottom: '3' },
-                                                React.createElement(Form.FormItem, null,
-                                                    React.createElement(index_1.Input, { label: 'Last Name', type: 'text', value: 'Lebowski', required: false, disabled: false, onChange: function () { return false; } }))),
-                                            React.createElement(Form.FormGroup, { marginBottom: '4' },
-                                                React.createElement(Form.FormItem, null,
-                                                    React.createElement(index_1.Input, { label: 'Username', type: 'text', value: 'the_dude', required: false, disabled: false, onChange: function () { return false; } }))),
-                                            React.createElement(Form.FormGroup, { marginBottom: '3' },
-                                                React.createElement(Form.FormItem, null,
-                                                    React.createElement(index_1.Input, { label: 'Email', type: 'text', value: 'jeffrey.lebowski@bloodsimple.org', required: false, disabled: false, onChange: function () { return false; } }))),
-                                            React.createElement(Form.FormGroup, { marginBottom: '3' },
-                                                React.createElement(Form.FormItem, null,
-                                                    React.createElement(index_1.Input, { label: 'Phone number', type: 'text', value: '+381 64 155 22 55', required: false, disabled: false, onChange: function () { return false; } }))),
-                                            React.createElement(Form.FormGroup, { marginBottom: '4' },
-                                                React.createElement(Form.FormItem, null,
-                                                    React.createElement(index_1.Select, { label: 'Role', value: 'Select user role', required: false, disabled: false, onChange: function () { return false; } },
-                                                        React.createElement(index_1.Option, null, "Editor"),
-                                                        React.createElement(index_1.Option, null, "Journalist"),
-                                                        React.createElement(index_1.Option, null, "Photographer"),
-                                                        React.createElement(index_1.Option, null, "Freelancer"),
-                                                        React.createElement(index_1.Option, null, "Journalist Assistant")))),
-                                            React.createElement(index_1.CheckGroup, { orientation: 'vertical' },
-                                                React.createElement(index_1.Checkbox, { checked: this.state.value11, label: { text: 'Administrator' }, onChange: function (value) { return _this.setState(function () { return ({ value11: value }); }); } }),
-                                                React.createElement(index_1.Checkbox, { checked: this.state.value12, label: { text: 'Author' }, onChange: function (value) { return _this.setState(function () { return ({ value12: value }); }); } }))))),
-                                React.createElement(index_1.SimpleListItem, { stacked: true, id: 'password' },
-                                    React.createElement(index_1.Heading, { type: 'h3' }, "Password"),
-                                    React.createElement(index_1.Container, { className: 'sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus' },
-                                        React.createElement(index_1.ButtonGroup, { align: 'center' },
-                                            React.createElement(index_1.Button, { style: 'hollow', type: 'primary', text: 'Change password', onClick: function () { return false; } })))),
-                                React.createElement(index_1.SimpleListItem, { stacked: true, id: 'defaultDesk' },
-                                    React.createElement(index_1.Heading, { type: 'h3' }, "Default desk"),
-                                    React.createElement(index_1.Container, { className: 'sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus' },
-                                        React.createElement(Form.FormGroup, { inlineLabel: true, marginBottom: '0' },
-                                            React.createElement(Form.FormItem, null,
-                                                React.createElement(index_1.Select, { label: 'Default desk', value: 'This is some value', labelHidden: true, required: false, disabled: false, onChange: function () { return false; } },
-                                                    React.createElement(index_1.Option, null, "International"),
-                                                    React.createElement(index_1.Option, null, "Kulture"),
-                                                    React.createElement(index_1.Option, null, "National"),
-                                                    React.createElement(index_1.Option, null, "News"),
-                                                    React.createElement(index_1.Option, null, "Politics"),
-                                                    React.createElement(index_1.Option, null, "Sports")))))),
-                                React.createElement(index_1.SimpleListItem, { stacked: true, id: 'language' },
-                                    React.createElement(index_1.Heading, { type: 'h3' }, "Language"),
-                                    React.createElement(index_1.Container, { className: 'sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus' },
-                                        React.createElement(Form.FormGroup, { inlineLabel: true, marginBottom: '0' },
-                                            React.createElement(Form.FormItem, null,
-                                                React.createElement(index_1.Select, { label: 'Language', value: 'English', labelHidden: true, required: false, disabled: false, onChange: function () { return false; } },
-                                                    React.createElement(index_1.Option, null, "English"),
-                                                    React.createElement(index_1.Option, null, "German"),
-                                                    React.createElement(index_1.Option, null, "French"),
-                                                    React.createElement(index_1.Option, null, "Serbian")))))),
-                                React.createElement(index_1.SimpleListItem, { stacked: true, id: 'autorInfo' },
-                                    React.createElement("h3", { className: 'sd-font-size--medium' }, "Author info"),
-                                    React.createElement(index_1.Container, { direction: 'column', className: 'sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus' },
-                                        React.createElement(Form.FormGroup, { marginBottom: '3' },
-                                            React.createElement(Form.FormItem, null,
-                                                React.createElement(index_1.Input, { label: 'Sign-Off', type: 'text', value: 'the_dude', required: false, disabled: false, onChange: function () { return false; } }))),
-                                        React.createElement(Form.FormGroup, { marginBottom: '3' },
-                                            React.createElement(Form.FormItem, null,
-                                                React.createElement(index_1.Input, { label: 'Byline', type: 'text', value: 'Jeffrey Lebowski', required: false, disabled: false, onChange: function () { return false; } }))),
-                                        React.createElement(Form.FormGroup, { marginBottom: '3' },
-                                            React.createElement(Form.FormItem, null,
-                                                React.createElement(index_1.Input, { label: 'Job Title', type: 'text', value: 'the_dude', required: false, disabled: false, onChange: function () { return false; } }))),
-                                        React.createElement(Form.FormGroup, { marginBottom: '4' },
-                                            React.createElement(Form.FormItem, null,
-                                                React.createElement(index_1.Input, { label: 'Biography', type: 'text', value: 'the_dude', required: false, disabled: false, onChange: function () { return false; } }))),
-                                        React.createElement(index_1.Heading, { className: 'sd-margin-t--3 sd-margin-b--2', type: 'h4' }, "Social media"),
-                                        React.createElement(Form.FormGroup, { marginBottom: '3' },
-                                            React.createElement(Form.FormItem, null,
-                                                React.createElement(index_1.Input, { label: 'Facebook', type: 'text', value: 'the_dude', required: false, disabled: false, onChange: function () { return false; } }))),
-                                        React.createElement(Form.FormGroup, { marginBottom: '3' },
-                                            React.createElement(Form.FormItem, null,
-                                                React.createElement(index_1.Input, { label: 'Instagram', type: 'text', value: 'the_dude', required: false, disabled: false, onChange: function () { return false; } }))),
-                                        React.createElement(Form.FormGroup, { marginBottom: '2' },
-                                            React.createElement(Form.FormItem, null,
-                                                React.createElement(index_1.Input, { label: 'Twitter', type: 'text', value: 'the_dude', required: false, disabled: false, onChange: function () { return false; } }))))))),
-                        React.createElement(Components.RightPanel, { open: this.state.openPreview }),
-                        React.createElement(Components.OverlayPanel, null)),
-                    React.createElement(index_1.TabPanel, { indexValue: 1 },
-                        React.createElement(Layout.LeftPanel, { open: true },
-                            React.createElement(Layout.Panel, { background: 'transparent', size: 'xx-small' },
-                                React.createElement(Layout.PanelContent, null,
-                                    React.createElement(index_1.LeftMenu, { ariaLabel: 'Left navigation', activeItemId: '#1', style: 'blanc', groups: [{ label: '', items: [
-                                                    { id: '1', label: 'Feature preview' },
-                                                    { id: '2', label: 'View formats' },
-                                                    { id: '3', label: 'Notifications' },
-                                                    { id: '4', label: 'Article defaults' },
-                                                    { id: '5', label: 'Categories' },
-                                                    { id: '6', label: 'Desks' },
-                                                    { id: '7', label: 'Vocabulary values' },
-                                                    { id: '8', label: 'Appearance' }
-                                                ] }], onSelect: function () { return false; } })))),
-                        React.createElement(Layout.MainPanel, { className: 'sd-padding--3' },
-                            React.createElement(index_1.SimpleList, { density: 'comfortable', width: 'large' },
-                                React.createElement(index_1.SimpleListItem, { stacked: true },
-                                    React.createElement(index_1.Heading, { type: 'h3' }, "Feature preview"),
-                                    React.createElement(index_1.Container, { className: 'sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus' },
-                                        React.createElement(index_1.Switch, { label: { content: 'Enable Feature Preview' }, value: this.state.value1, onChange: function (value) { return _this.setState(function () { return ({ value1: value }); }); } }))),
-                                React.createElement(index_1.SimpleListItem, { stacked: true },
-                                    React.createElement(index_1.Heading, { type: 'h3' }, "View formats"),
-                                    React.createElement(index_1.Container, { direction: 'column', className: 'sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus' },
-                                        React.createElement(index_1.Text, { color: 'light', className: '' }, "Select the prefered default view format for specific areas of Superdesks interface. The sections will always open in the selected view format, but can be always changed using the view option dropdown in each section."),
-                                        React.createElement(index_1.SimpleList, { density: 'compact', border: true, className: 'sd-margin-t--3 sd-margin-b--0 sd-padding-b--0' },
-                                            React.createElement(index_1.SimpleListItem, { stacked: true },
-                                                React.createElement(index_1.Heading, { type: 'h4' }, "Archive"),
-                                                React.createElement(index_1.RadioButtonGroup, { value: this.state.radioValue1, options: [
-                                                        { label: "Grid view", value: "grid", icon: "th" },
-                                                        { label: "List view", value: "list", icon: "th-list" },
-                                                    ], onChange: function (value) { return _this.setState(function () { return ({ radioValue1: value }); }); } })),
-                                            React.createElement(index_1.SimpleListItem, { stacked: true },
-                                                React.createElement(index_1.Heading, { type: 'h4' }, "Contacts"),
-                                                React.createElement(index_1.RadioButtonGroup, { value: this.state.radioValue2, options: [
-                                                        { label: "Grid view", value: "grid", icon: "th" },
-                                                        { label: "List view", value: "list", icon: "th-list" },
-                                                    ], onChange: function (value) { return _this.setState(function () { return ({ radioValue2: value }); }); } })),
-                                            React.createElement(index_1.SimpleListItem, { stacked: true },
-                                                React.createElement(index_1.Heading, { type: 'h4' }, "Archive"),
-                                                React.createElement(index_1.RadioButtonGroup, { value: this.state.radioValue3, options: [
-                                                        { label: "Grid view", value: "grid", icon: "th" },
-                                                        { label: "List view", value: "list", icon: "th-list" },
-                                                        { label: "Swimlane view", value: "kanban", icon: "kanban-view" },
-                                                    ], onChange: function (value) { return _this.setState(function () { return ({ radioValue3: value }); }); } }))))),
-                                React.createElement(index_1.SimpleListItem, { stacked: true },
-                                    React.createElement(index_1.Heading, { type: 'h3' }, "Notifications"),
-                                    React.createElement(index_1.Container, { className: 'sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus' },
-                                        React.createElement(index_1.SwitchGroup, null,
-                                            React.createElement(index_1.Switch, { label: { content: 'Send notifications via email' }, value: this.state.value2, onChange: function (value) { return _this.setState(function () { return ({ value2: value }); }); } }),
-                                            React.createElement(index_1.Switch, { label: { content: 'Allow Desktop Notifications' }, value: this.state.value3, onChange: function (value) { return _this.setState(function () { return ({ value3: value }); }); } })))),
-                                React.createElement(index_1.SimpleListItem, { stacked: true },
-                                    React.createElement("h3", { className: 'sd-font-size--medium' }, "Article defaults"),
-                                    React.createElement(index_1.Container, { direction: 'column', className: 'sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus' },
-                                        React.createElement(Form.FormGroup, null,
-                                            React.createElement(Form.FormItem, null,
-                                                React.createElement(index_1.Input, { label: 'Dateline / Located', type: 'text', value: '', required: false, disabled: false, onChange: function () { return false; } }))),
-                                        React.createElement(Form.FormGroup, null,
-                                            React.createElement(Form.FormItem, null,
-                                                React.createElement(index_1.Select, { label: 'Place', value: 'This is some value', required: true, disabled: false, onChange: function () { return false; } },
-                                                    React.createElement(index_1.Option, null, "Select place"),
-                                                    React.createElement(index_1.Option, null, "Option 1"),
-                                                    React.createElement(index_1.Option, null, "Option 2")))))),
-                                React.createElement(index_1.SimpleListItem, { stacked: true },
-                                    React.createElement(index_1.Heading, { type: 'h3' }, "Categories"),
-                                    React.createElement(index_1.Container, { direction: 'column', className: 'sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus' },
-                                        React.createElement(index_1.Heading, { type: 'h4' }, "Preferred Categories"),
-                                        React.createElement(index_1.Text, { color: 'light', className: '' }, "By selecting the categories you are interested in, the system will only display these in a menu for setting the content item's categories (along with any of its existing categories)."),
-                                        React.createElement(index_1.ButtonGroup, { className: 'sd-margin-y--2' },
-                                            React.createElement(index_1.Button, { text: 'All', style: 'text-only', type: 'primary', onClick: function () { return false; } }),
-                                            React.createElement(index_1.Divider, { border: true }),
-                                            React.createElement(index_1.Button, { text: 'None', style: 'text-only', type: 'primary', onClick: function () { return false; } }),
-                                            React.createElement(index_1.Divider, { border: true }),
-                                            React.createElement(index_1.Button, { text: 'Default', style: 'text-only', type: 'primary', onClick: function () { return false; } })),
-                                        React.createElement(index_1.CheckButtonGroup, { grid: true },
-                                            React.createElement(index_1.CheckboxButton, { checked: this.state.value1, label: { text: 'Category one' }, onChange: function (value) { return _this.setState(function () { return ({ value1: value }); }); } }),
-                                            React.createElement(index_1.CheckboxButton, { checked: this.state.value2, label: { text: 'Category two' }, onChange: function (value) { return _this.setState(function () { return ({ value2: value }); }); } }),
-                                            React.createElement(index_1.CheckboxButton, { checked: this.state.value3, label: { text: 'Category three' }, onChange: function (value) { return _this.setState(function () { return ({ value3: value }); }); } }),
-                                            React.createElement(index_1.CheckboxButton, { checked: this.state.value4, label: { text: 'Category four' }, onChange: function (value) { return _this.setState(function () { return ({ value4: value }); }); } })))),
-                                React.createElement(index_1.SimpleListItem, { stacked: true },
-                                    React.createElement(index_1.Heading, { type: 'h3' }, "Desks"),
-                                    React.createElement(index_1.Container, { direction: 'column', className: 'sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus' },
-                                        React.createElement(index_1.Heading, { type: 'h4' }, "Preferred Desks"),
-                                        React.createElement(index_1.Text, { color: 'light', className: 'sd-margin-b--2' }, "By selecting the desks as your preferred desks, they appear first in the order when sending or publishing items."),
-                                        React.createElement(index_1.CheckButtonGroup, { grid: true },
-                                            React.createElement(index_1.CheckboxButton, { checked: this.state.value5, label: { text: 'Politics' }, onChange: function (value) { return _this.setState(function () { return ({ value5: value }); }); } }),
-                                            React.createElement(index_1.CheckboxButton, { checked: this.state.value6, label: { text: 'Sports' }, onChange: function (value) { return _this.setState(function () { return ({ value6: value }); }); } }),
-                                            React.createElement(index_1.CheckboxButton, { checked: this.state.value7, label: { text: 'News' }, onChange: function (value) { return _this.setState(function () { return ({ value7: value }); }); } }),
-                                            React.createElement(index_1.CheckboxButton, { checked: this.state.value8, label: { text: 'National' }, onChange: function (value) { return _this.setState(function () { return ({ value8: value }); }); } }),
-                                            React.createElement(index_1.CheckboxButton, { checked: this.state.value9, label: { text: 'International' }, onChange: function (value) { return _this.setState(function () { return ({ value9: value }); }); } }),
-                                            React.createElement(index_1.CheckboxButton, { checked: this.state.value10, label: { text: 'Kulture' }, onChange: function (value) { return _this.setState(function () { return ({ value10: value }); }); } })))),
-                                React.createElement(index_1.SimpleListItem, { stacked: true },
-                                    React.createElement(index_1.Heading, { type: 'h3' }, "Vocabulary values"),
-                                    React.createElement(index_1.Container, { direction: 'column', className: 'sd-radius--medium sd-padding--2 sd-border--medium sd-border-style--dashed' },
-                                        React.createElement(index_1.Text, { color: 'lighter', size: 'medium', className: 'sd-margin--auto', align: 'center' }, "There are no vocabularies configured."))),
-                                React.createElement(index_1.SimpleListItem, { stacked: true },
-                                    React.createElement(index_1.Heading, { type: 'h3' }, "Appearance"),
-                                    React.createElement(index_1.Container, { direction: 'column', className: 'sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus' },
-                                        React.createElement(index_1.Heading, { type: 'h4' }, "Themes"),
-                                        React.createElement(index_1.Text, { color: 'light', className: 'sd-margin-b--2' }, "Change the appearance of Superdesk across the whole application."),
-                                        React.createElement(index_1.ThemeSelector, { size: 'small', options: [
-                                                { label: 'Light', value: 'light-ui', theme: 'light' },
-                                                { label: 'Dark', value: 'dark-ui', theme: 'dark' },
-                                                { label: 'High Contrast', value: 'high-contrast', theme: 'contrast-light', disabled: true },
-                                            ], onChange: function ($event) { _this.setState({ theme: $event }); }, value: this.state.theme }))))),
-                        React.createElement(Layout.RightPanel, { open: this.state.openPreview })),
-                    React.createElement(index_1.TabPanel, { indexValue: 2 },
-                        React.createElement(Layout.MainPanel, null, "Privileges Content goes here"))))));
-    };
-    return PersonalProfile;
-}(React.Component));
-exports.PersonalProfile = PersonalProfile;

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

@@ -1,32 +0,0 @@
-import * as React from 'react';
-interface IProps {
-    children?: React.ReactNode;
-    rightPanel?: boolean;
-    openPanel(): any;
-    closePanel(): void;
-}
-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;
-    array: any;
-    inputValue: string;
-    activeTab: string | null;
-}
-export declare class RundownEditor extends React.Component<IProps, IState> {
-    constructor(props: IProps);
-    handleTheme(newTheme: string): void;
-    changeStatus(item: any, status: string): void;
-    render(): JSX.Element;
-}
-export {};