superdesk-ui-framework 4.0.46 → 4.0.48

package/examples/pages/playgrounds/react-playgrounds/components/GraphicButton.tsx

@@ -9,24 +9,24 @@ interface IGraphicButton {
 }
 
 export class GraphicButton extends React.PureComponent<IGraphicButton> {
-    constructor(props: IGraphicButton){
+    constructor(props: IGraphicButton) {
         super(props);
-        this.onSubmit=this.onSubmit.bind(this);
+        this.onSubmit = this.onSubmit.bind(this);
     }
-    onSubmit=() => {
+    onSubmit = () => {
         if (this.props.link != null) {
-            window.location.href = this.props.link; 
+            window.location.href = this.props.link;
         }
-    }
+    };
     render() {
         return (
-            <a className='docs-page__graphic-btn' onClick={this.onSubmit}>
-                <figure className='docs-page__graphic-btn-graphic'>
-                    <img src={'/illustration-small--' + this.props.graphic +'.svg'} />
+            <a className="docs-page__graphic-btn" onClick={this.onSubmit}>
+                <figure className="docs-page__graphic-btn-graphic">
+                    <img src={'/illustration-small--' + this.props.graphic + '.svg'} />
                 </figure>
-                <label className='docs-page__graphic-btn-label'>
-                    <span className='docs-page__text'>{this.props.text}</span>
-                    <span className='docs-page__small-text'>{this.props.smallText}</span>
+                <label className="docs-page__graphic-btn-label">
+                    <span className="docs-page__text">{this.props.text}</span>
+                    <span className="docs-page__small-text">{this.props.smallText}</span>
                 </label>
             </a>
         );

package/examples/pages/playgrounds/react-playgrounds/components/GraphicButtonsGroup.tsx

@@ -6,10 +6,6 @@ interface IProps {
 
 export class GraphicButtonsGroup extends React.PureComponent<IProps> {
     render() {
-        return (
-            <div className='docs-page__button-grid'>
-                {this.props.children}
-            </div>
-        );
+        return <div className="docs-page__button-grid">{this.props.children}</div>;
     }
-}
+}

package/examples/pages/playgrounds/react-playgrounds/components/HeaderPanel.tsx

@@ -6,10 +6,6 @@ interface IProps {
 
 export class HeaderPanel extends React.PureComponent<IProps> {
     render() {
-        return (
-            <div className='sd-main-content-grid__header'>
-                {this.props.children}
-            </div>
-        );
+        return <div className="sd-main-content-grid__header">{this.props.children}</div>;
     }
 }

package/examples/pages/playgrounds/react-playgrounds/components/Index.tsx

@@ -1,22 +1,20 @@
-export { Layout } from './Layout';
-export { LayoutContainer } from './LayoutContainer';
-export { HeaderPanel } from './HeaderPanel';
-export { MainPanel } from './MainPanel';
-export { OverlayPanel } from './OverlayPanel';
-export { RightPanel } from './RightPanel';
-export { LeftPanel } from './LeftPanel';
-export { AuthoringContainer } from './AuthoringContainer';
-export { ContentSplitter } from './ContentSplitter';
-
-export { SubNav } from './SubNav';
-export { GraphicButtonsGroup } from './GraphicButtonsGroup';
-export { GraphicButton } from './GraphicButton';
-export { Panel } from './Panel';
-export { PanelContent } from './PanelContent';
-export { PanelContentBlock } from './PanelContentBlock';
-export { PanelHeader } from './PanelHeader';
-export { PanelFooter } from './PanelFooter';
-export { SearchBar } from './SearchBar';
-export { SidebarMenu } from './SidebarMenu';
-
+export {Layout} from './Layout';
+export {LayoutContainer} from './LayoutContainer';
+export {HeaderPanel} from './HeaderPanel';
+export {MainPanel} from './MainPanel';
+export {OverlayPanel} from './OverlayPanel';
+export {RightPanel} from './RightPanel';
+export {LeftPanel} from './LeftPanel';
+export {AuthoringContainer} from './AuthoringContainer';
+export {ContentSplitter} from './ContentSplitter';
 
+export {SubNav} from './SubNav';
+export {GraphicButtonsGroup} from './GraphicButtonsGroup';
+export {GraphicButton} from './GraphicButton';
+export {Panel} from './Panel';
+export {PanelContent} from './PanelContent';
+export {PanelContentBlock} from './PanelContentBlock';
+export {PanelHeader} from './PanelHeader';
+export {PanelFooter} from './PanelFooter';
+export {SearchBar} from './SearchBar';
+export {SidebarMenu} from './SidebarMenu';

package/examples/pages/playgrounds/react-playgrounds/components/Layout.tsx

@@ -6,28 +6,22 @@ interface IProps {
     theme?: string;
 }
 
-export const Layout = ({
-    header,
-    children,
-    theme,
-}: IProps) => {
+export const Layout = ({header, children, theme}: IProps) => {
     return (
-        <div className='sd-page-grid--test docs-page__full-width-helper' data-theme={theme}>
-            <div className='sd-main-menu'>
-                <div className='sd-main-menu__inner'></div>
+        <div className="sd-page-grid--test docs-page__full-width-helper" data-theme={theme}>
+            <div className="sd-main-menu">
+                <div className="sd-main-menu__inner"></div>
             </div>
-            <header className='sd-top-menu'>
-                <a className='sd-top-menu__collapse-nav'>
-                    <i className='icon-collapse icon--white'></i>
+            <header className="sd-top-menu">
+                <a className="sd-top-menu__collapse-nav">
+                    <i className="icon-collapse icon--white"></i>
                 </a>
-                <p className='sd-top-menu__header'>{header}</p>
+                <p className="sd-top-menu__header">{header}</p>
             </header>
-            <section id='1' className='sd-content sd-content-wrapper'>
+            <section id="1" className="sd-content sd-content-wrapper">
                 {children}
             </section>
-            <footer className='sd-bottom-bar'>
-                Footer
-            </footer>
+            <footer className="sd-bottom-bar">Footer</footer>
         </div>
     );
-}
+};

package/examples/pages/playgrounds/react-playgrounds/components/LayoutContainer.tsx

@@ -7,7 +7,7 @@ interface IProps {
 export class LayoutContainer extends React.PureComponent<IProps> {
     render() {
         return (
-            <div className='sd-content-wrapper__main-content-area sd-main-content-grid comfort'>
+            <div className="sd-content-wrapper__main-content-area sd-main-content-grid comfort">
                 {this.props.children}
             </div>
         );

package/examples/pages/playgrounds/react-playgrounds/components/MainPanel.tsx

@@ -8,18 +8,17 @@ interface IProps {
 }
 
 export class MainPanel extends React.PureComponent<IProps> {
-    
-    render() { 
-        let classes = classNames('sd-main-content-grid__content', {
-            'sd-padding--2': !this.props.padding || this.props.padding === 'small',
-            'sd-padding--3': this.props.padding === 'medium',
-            'sd-padding--4': this.props.padding === 'large',
-            'sd-padding--0': this.props.padding === 'none',
-        }, this.props.className);
-        return (
-            <div className={classes}>
-                {this.props.children}
-            </div>
+    render() {
+        let classes = classNames(
+            'sd-main-content-grid__content',
+            {
+                'sd-padding--2': !this.props.padding || this.props.padding === 'small',
+                'sd-padding--3': this.props.padding === 'medium',
+                'sd-padding--4': this.props.padding === 'large',
+                'sd-padding--0': this.props.padding === 'none',
+            },
+            this.props.className,
         );
+        return <div className={classes}>{this.props.children}</div>;
     }
 }

package/examples/pages/playgrounds/react-playgrounds/components/OverlayPanel.tsx

@@ -7,11 +7,9 @@ interface IProps {
 export class OverlayPanel extends React.PureComponent<IProps> {
     render() {
         return (
-            <div className='sd-main-content-grid__overlay'>
-                <div className='sd-overlay-panel sd-overlay-panel--dark-ui'>
-                    <div className='side-panel side-panel--shadow-right side-panel--dark-ui'>
-                        {this.props.children}
-                    </div>
+            <div className="sd-main-content-grid__overlay">
+                <div className="sd-overlay-panel sd-overlay-panel--dark-ui">
+                    <div className="side-panel side-panel--shadow-right side-panel--dark-ui">{this.props.children}</div>
                 </div>
             </div>
         );

package/examples/pages/playgrounds/react-playgrounds/components/Panel.tsx

@@ -4,20 +4,19 @@ import classNames from 'classnames';
 interface IProps {
     children?: React.ReactNode;
     side?: 'left' | 'right';
-    background?: 'transparent' | 'light' | 'grey' | 'dark'; // defaults to light (white) 
+    background?: 'transparent' | 'light' | 'grey' | 'dark'; // defaults to light (white)
 }
 
 export class Panel extends React.PureComponent<IProps> {
     render() {
         let classes = classNames('side-panel', {
-            [`side-panel--${this.props.side}`] : this.props.side,
-            [`side-panel--${this.props.background}`]: this.props.background !== 'light' && this.props.background !== undefined,
+            [`side-panel--${this.props.side}`]: this.props.side,
+            [`side-panel--${this.props.background}`]:
+                this.props.background !== 'light' && this.props.background !== undefined,
         });
         return (
-            <div className='side-panel__container'>
-                <div className={classes}>
-                    {this.props.children}
-                </div>
+            <div className="side-panel__container">
+                <div className={classes}>{this.props.children}</div>
             </div>
         );
     }

package/examples/pages/playgrounds/react-playgrounds/components/PanelContent.tsx

@@ -6,10 +6,6 @@ interface IProps {
 
 export class PanelContent extends React.PureComponent<IProps> {
     render() {
-        return (
-            <div className="side-panel__content">
-                {this.props.children}
-            </div>
-        );
+        return <div className="side-panel__content">{this.props.children}</div>;
     }
 }

package/examples/pages/playgrounds/react-playgrounds/components/PanelContentBlock.tsx

@@ -14,11 +14,6 @@ export class PanelContentBlock extends React.PureComponent<IProps> {
             'side-panel__content-block--flex': this.props.flex,
             [`side-panel__content-block--padding-${this.props.padding}`]: this.props.padding,
         });
-        return (
-            <div className={classes}>
-                {this.props.children}
-            </div>
-        );
+        return <div className={classes}>{this.props.children}</div>;
     }
 }
-

package/examples/pages/playgrounds/react-playgrounds/components/PanelHeader.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Icon } from '../../../../../app-typescript/index';
+import {Icon} from '../../../../../app-typescript/index';
 
 interface IProps {
     children?: React.ReactNode;
@@ -11,7 +11,7 @@ export class PanelHeader extends React.PureComponent<IProps> {
     constructor(props: IProps) {
         super(props);
 
-        this.handleFilter=this.handleFilter.bind(this);
+        this.handleFilter = this.handleFilter.bind(this);
     }
 
     handleFilter() {
@@ -21,7 +21,7 @@ export class PanelHeader extends React.PureComponent<IProps> {
         return (
             <div className="side-panel__header side-panel__header--border-b">
                 <a className="icn-btn side-panel__close" onClick={this.handleFilter}>
-                    <Icon name='close-small' />
+                    <Icon name="close-small" />
                 </a>
                 <h3 className="side-panel__heading">{this.props.title}</h3>
                 {this.props.children}

package/examples/pages/playgrounds/react-playgrounds/components/SearchBar.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import {Icon}  from '../../../../../app-typescript/index';
+import {Icon} from '../../../../../app-typescript/index';
 
 interface IProps {
     value?: string | number;
     type?: 'expanded' | 'collapsed' | 'boxed';
     placeholder: string;
-    focused? : boolean;
+    focused?: boolean;
     boxed?: boolean;
     onSubmit?(): void;
 }
@@ -23,11 +23,11 @@ export class SearchBar extends React.PureComponent<IProps, IState> {
     constructor(props: IProps) {
         super(props);
         this.state = {
-            inputValue: this.props.value ? this.props.value : '', 
+            inputValue: this.props.value ? this.props.value : '',
             focused: this.props.focused ? this.props.focused : false,
             type: this.props.type ? this.props.type : 'expanded',
             boxed: this.props.boxed ? this.props.boxed : false,
-        }
+        };
         this.inputRef = React.createRef();
     }
 
@@ -38,18 +38,18 @@ export class SearchBar extends React.PureComponent<IProps, IState> {
     }
 
     componentDidMount = () => {
-        document.addEventListener("mousedown", (event) => {
+        document.addEventListener('mousedown', (event) => {
             if (this.inputRef.current && !this.inputRef.current.contains(event.target)) {
                 this.setState({focused: false});
             }
         });
-    }
+    };
 
     render() {
         const classes = classNames('sd-searchbar', {
-            [`sd-searchbar--${this.state.type}`] : this.props.type,
+            [`sd-searchbar--${this.state.type}`]: this.props.type,
             'sd-searchbar--expanded': this.state.type === 'expanded' || this.props.type === undefined,
-            'sd-searchbar--focused' : this.state.focused,
+            'sd-searchbar--focused': this.state.focused,
             'sd-searchbar--boxed': this.state.boxed,
         });
 
@@ -59,7 +59,7 @@ export class SearchBar extends React.PureComponent<IProps, IState> {
 
                 <input
                     id="search-input"
-                    ref={(input: any) => (input && this.props.focused) && input.focus()}
+                    ref={(input: any) => input && this.props.focused && input.focus()}
                     className="sd-searchbar__input"
                     type="text"
                     placeholder={this.props.placeholder}
@@ -70,12 +70,16 @@ export class SearchBar extends React.PureComponent<IProps, IState> {
 
                 {this.state.inputValue && (
                     <button className="sd-searchbar__cancel" onClick={() => this.setState({inputValue: ''})}>
-                        <Icon name='remove-sign' />
+                        <Icon name="remove-sign" />
                     </button>
                 )}
 
-                <button id="sd-searchbar__search-btn" className="sd-searchbar__search-btn" onSubmit={() => this.props.onSubmit}>
-                    <Icon name='chevron-right-thin' />
+                <button
+                    id="sd-searchbar__search-btn"
+                    className="sd-searchbar__search-btn"
+                    onSubmit={() => this.props.onSubmit}
+                >
+                    <Icon name="chevron-right-thin" />
                 </button>
             </div>
         );

package/examples/pages/playgrounds/react-playgrounds/components/SidebarMenu.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import { Icon } from '../../../../../app-typescript/components/Icon';
+import {Icon} from '../../../../../app-typescript/components/Icon';
 
 interface IProps {
     items: Array<IItem | 'divider'>;
 }
 
 interface IItem {
-    icon: string,
+    icon: string;
     size: 'small' | 'big'; // defaults to 'small'
     tooltip?: string;
     active?: boolean;
@@ -23,7 +23,7 @@ export class SidebarMenu extends React.PureComponent<IProps, IState> {
         this.state = {
             index: -1,
             closeIndex: -1,
-        }
+        };
         this.handleClick = this.handleClick.bind(this);
     }
 
@@ -40,24 +40,33 @@ export class SidebarMenu extends React.PureComponent<IProps, IState> {
 
     render() {
         return (
-            <div className='sd-sidebar-menu sd-content-wrapper__left-tabs'>
-                <ul className='authoring-active'>
+            <div className="sd-sidebar-menu sd-content-wrapper__left-tabs">
+                <ul className="authoring-active">
                     {this.props.items.map((item, index) => {
                         if (item === 'divider') {
-                            return (
-                                <li key={index} className='sd-sidebar-menu__spacer'></li>
-                            )
+                            return <li key={index} className="sd-sidebar-menu__spacer"></li>;
                         } else {
                             return (
-                                <li key={index} data-sd-tooltip={item['tooltip']} data-flow='right'>
-                                    <a className={'sd-sidebar-menu__btn' + (index === this.state.closeIndex ? ' sd-sidebar-menu__btn--closed ' : '') + (item['active'] ? ' sd-sidebar-menu__btn--active' : (index === this.state.index ? ' sd-sidebar-menu__btn--active' : ''))}
-                                        onClick={() => this.handleClick(index)}>
-                                        <span className='sd-sidebar-menu__main-icon '>
+                                <li key={index} data-sd-tooltip={item['tooltip']} data-flow="right">
+                                    <a
+                                        className={
+                                            'sd-sidebar-menu__btn' +
+                                            (index === this.state.closeIndex ? ' sd-sidebar-menu__btn--closed ' : '') +
+                                            (item['active']
+                                                ? ' sd-sidebar-menu__btn--active'
+                                                : index === this.state.index
+                                                  ? ' sd-sidebar-menu__btn--active'
+                                                  : '')
+                                        }
+                                        onClick={() => this.handleClick(index)}
+                                    >
+                                        <span className="sd-sidebar-menu__main-icon ">
                                             <Icon size={item['size']} name={item['icon']} />
                                         </span>
-                                        <i className='sd-sidebar-menu__helper-icon big-icon--chevron-left'></i>
+                                        <i className="sd-sidebar-menu__helper-icon big-icon--chevron-left"></i>
                                     </a>
-                                </li>)
+                                </li>
+                            );
                         }
                     })}
                 </ul>

package/examples/pages/playgrounds/react-playgrounds/components/SubNav.tsx

@@ -12,10 +12,6 @@ export class SubNav extends React.PureComponent<IProps> {
             'subnav-darker': this.props.theme,
         });
 
-        return (
-            <div className={classes}>
-                {this.props.children}
-            </div>
-        );
+        return <div className={classes}>{this.props.children}</div>;
     }
 }

package/examples/pages/playgrounds/react-playgrounds/components/ThemeDropdown.tsx

@@ -5,34 +5,34 @@ interface IProps {
 }
 
 interface IState {
-    checked: boolean,
+    checked: boolean;
 }
 
 export class ThemeDropdown extends React.PureComponent<IProps, IState> {
     constructor(props) {
         super(props);
-        this.state = { checked: false};
+        this.state = {checked: false};
         this.handleClick = this.handleClick.bind(this);
         this.handleTheme = this.handleTheme.bind(this);
     }
 
     handleClick() {
-        this.setState(state => ({
-            checked: !state.checked
+        this.setState((state) => ({
+            checked: !state.checked,
         }));
     }
 
     handleTheme(newTheme) {
         this.setState({
             checked: !this.state.checked,
-        })
+        });
         this.props.handleThemeParent(newTheme);
     }
 
     render() {
-        let classes = classNames("dropdown", {
-            "open" : this.state.checked,
-        })
+        let classes = classNames('dropdown', {
+            open: this.state.checked,
+        });
 
         let themes = ['light', 'dark'];
         return (
@@ -45,10 +45,13 @@ export class ThemeDropdown extends React.PureComponent<IProps, IState> {
                         <div className="dropdown__menu-label">Themes</div>
                     </li>
                     <li className="dropdown__menu-divider"></li>
-                    {themes.map((theme, index)=>
-                    <li key={index}><button onClick={()=>this.handleTheme(theme)}>{theme}</button></li>)}
+                    {themes.map((theme, index) => (
+                        <li key={index}>
+                            <button onClick={() => this.handleTheme(theme)}>{theme}</button>
+                        </li>
+                    ))}
                 </ul>
             </div>
-        )
+        );
     }
 }

package/examples/pages/playgrounds/react-playgrounds/tsconfig.json

@@ -1,4 +1,4 @@
 {
     "extends": "../../../../tsconfig.json",
     "files": ["Index.tsx", "../../../../globals.d.ts"]
-}
+}

package/globals.d.ts

@@ -1,4 +1,4 @@
-declare module "*.svg" {
+declare module '*.svg' {
     const content: string;
     export default content;
 }

package/mocha-setup.ts

@@ -1,5 +1,5 @@
 import 'jsdom-global/register';
-import Enzyme from 'enzyme'
-import Adapter from 'enzyme-adapter-react-16'
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
 
-Enzyme.configure({ adapter: new Adapter() })
+Enzyme.configure({adapter: new Adapter()});