superdesk-ui-framework 3.0.65 → 3.0.67

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

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

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