superdesk-ui-framework 4.0.46 → 4.0.48

package/examples/js/doc.js

@@ -1,9 +1,9 @@
 /* eslint-disable */
 /* global _, PR */
 
-import { ReactDoc, ReactPlayground, ReactThemePicker } from './../pages/components/Index';
-import { DesignPatternsDoc } from './../pages/design-patterns/Index';
-import { HashRouter } from 'react-router-dom';
+import {ReactDoc, ReactPlayground, ReactThemePicker} from './../pages/components/Index';
+import {DesignPatternsDoc} from './../pages/design-patterns/Index';
+import {HashRouter} from 'react-router-dom';
 
 import React from 'react';
 import ReactDOM from 'react-dom';
@@ -38,7 +38,7 @@ function docPrettyPrint() {
             }
 
             element.html(PR.prettyPrintOne(_.escape(element.html()), langExtension, true));
-        }
+        },
     };
 }
 
@@ -53,19 +53,14 @@ function docPlayground(components, design, playgrounds, $route) {
 
             scope.page = $route.current.params.name;
 
-            scope.items = [
-                { name: 'just' },
-                { name: 'some' },
-                { name: 'cool' },
-                { name: 'tags' }
-            ];
+            scope.items = [{name: 'just'}, {name: 'some'}, {name: 'cool'}, {name: 'tags'}];
 
             scope.freeItems = ['Audi', 'BMW', 'Opel', 'Hyundai'];
 
             scope.console = function (...data) {
                 console.log(...data);
-            }
-        }
+            };
+        },
     };
 }
 
@@ -73,17 +68,18 @@ docTabs.$inject = [];
 function docTabs() {
     return {
         link: function link(scope, elem, attr, ctrl) {
-            elem.find('.docs-page__window-bar').children('a').click(function (e) {
-                e.preventDefault();
-                $(this).addClass('active')
-                    .siblings()
-                    .removeClass('active');
-
-                elem.find('.docs-page__code-' + $(this).attr('id')).show()
-                    .siblings()
-                    .hide();
-            });
-        }
+            elem.find('.docs-page__window-bar')
+                .children('a')
+                .click(function (e) {
+                    e.preventDefault();
+                    $(this).addClass('active').siblings().removeClass('active');
+
+                    elem.find('.docs-page__code-' + $(this).attr('id'))
+                        .show()
+                        .siblings()
+                        .hide();
+                });
+        },
     };
 }
 
@@ -93,8 +89,8 @@ function docNav(components, $rootScope) {
         link: function link(scope, elem, attr, ctrl) {
             scope.isActive = (route) => {
                 return $rootScope.$route.current && $rootScope.$route.current.params.name === route;
-            }
-        }
+            };
+        },
     };
 }
 
@@ -118,7 +114,7 @@ function docModal($modal) {
                 modal = $modal.open({
                     template: require('../pages/components_deprecated/modal-template.html'),
                     controller: docModalController,
-                    size: 'large'
+                    size: 'large',
                 });
             };
 
@@ -137,7 +133,7 @@ function docModal($modal) {
             scope.hideCarousel = function () {
                 scope.carouselActive = false;
             };
-        }
+        },
     };
 }
 
@@ -148,8 +144,10 @@ function docReact() {
             ReactDOM.render(
                 <HashRouter>
                     <ReactDoc />
-                </HashRouter>, elem[0]);
-        }
+                </HashRouter>,
+                elem[0],
+            );
+        },
     };
 }
 
@@ -160,8 +158,10 @@ function docDesignPatterns() {
             ReactDOM.render(
                 <HashRouter>
                     <DesignPatternsDoc />
-                </HashRouter>, elem[0]);
-        }
+                </HashRouter>,
+                elem[0],
+            );
+        },
     };
 }
 
@@ -172,8 +172,10 @@ function docReactPlayground(playgrounds) {
             ReactDOM.render(
                 <HashRouter>
                     <ReactPlayground playgrounds={playgrounds.react} />
-                </HashRouter>, elem[0]);
-        }
+                </HashRouter>,
+                elem[0],
+            );
+        },
     };
 }
 
@@ -181,10 +183,8 @@ docThemePicker.$inject = [];
 function docThemePicker() {
     return {
         link: function (scope, elem) {
-            ReactDOM.render(
-                <ReactThemePicker />, elem[0]
-            )
-        }
+            ReactDOM.render(<ReactThemePicker />, elem[0]);
+        },
     };
 }
 
@@ -192,7 +192,7 @@ docGifImg.$inject = [];
 function docGifImg() {
     return {
         scope: {
-            src: '@'
+            src: '@',
         },
         template: '<img src="{{activeImage}}" ng-click="playGif()" />',
         link: function (scope) {
@@ -212,11 +212,12 @@ function docGifImg() {
                     scope.played = true;
                 }
             };
-        }
+        },
     };
 }
 
-export default angular.module('ui-docs.directives', [])
+export default angular
+    .module('ui-docs.directives', [])
     .directive('prettyprint', docPrettyPrint)
     .directive('docPlayground', docPlayground)
     .directive('docTabs', docTabs)

package/examples/js/react.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { NavLink } from 'react-router-dom';
+import {NavLink} from 'react-router-dom';
 
 import Prism from 'prismjs';
 import NormalizeWhitespace from 'prismjs/plugins/normalize-whitespace/prism-normalize-whitespace';
@@ -24,12 +24,11 @@ class ReactNav extends React.PureComponent {
         this.toggleSection = this.toggleSection.bind(this);
     }
 
-
     componentDidMount() {
         if (this.activeRef.current) {
             this.activeRef.current.scrollIntoView({
                 block: 'center',
-                inline: 'nearest'
+                inline: 'nearest',
             });
         }
     }
@@ -40,33 +39,33 @@ class ReactNav extends React.PureComponent {
             expandedSections: Object.keys(this.props.pages).reduce((sections, key) => {
                 sections[key] = true;
                 return sections;
-            }, {})
+            }, {}),
         });
     }
 
     toggleSection(section) {
-        this.setState(prevState => ({
+        this.setState((prevState) => ({
             expandedSections: {
                 ...prevState.expandedSections,
                 [section]: !prevState.expandedSections[section],
             },
         }));
-    };
+    }
 
     render() {
-        const { pages, base = 'components' } = this.props;
-        const { searchTerm } = this.state;
+        const {pages, base = 'components'} = this.props;
+        const {searchTerm} = this.state;
 
         const filteredPages = Object.keys(pages).reduce((filtered, section) => {
             const filteredItems = Object.keys(pages[section].items)
-                .filter(item => pages[section].items[item].name.toLowerCase().includes(searchTerm.toLowerCase()))
+                .filter((item) => pages[section].items[item].name.toLowerCase().includes(searchTerm.toLowerCase()))
                 .reduce((obj, key) => {
                     obj[key] = pages[section].items[key];
                     return obj;
                 }, {});
 
             if (Object.keys(filteredItems).length > 0) {
-                filtered[section] = { ...pages[section], items: filteredItems };
+                filtered[section] = {...pages[section], items: filteredItems};
             }
 
             return filtered;
@@ -78,18 +77,27 @@ class ReactNav extends React.PureComponent {
                     className={`docs-page__nav-title ${this.state.expandedSections[group] ? 'docs-page__nav-title--open' : ''}`}
                     onClick={() => this.toggleSection(group)}
                 >
-                    <span className='docs-page__nav-title-caret'>
+                    <span className="docs-page__nav-title-caret">
                         <i className="icon-chevron-right-thin" aria-label="chevron-right-thin" />
                     </span>
                     {filteredPages[group].name}
                 </div>
                 {this.state.expandedSections[group] && (
                     <ul className="docs-page__nav--sub-level">
-                        {Object.keys(filteredPages[group].items).map((page) =>
-                            <li key={page} className="docs-page__nav-item" ref={`/${base}/${page}` === location.hash.replace('#', '') ? this.activeRef : null}>
-                                <NavLink to={{ pathname: `/${base}/${page}` }} activeClassName="docs-page__nav-item--active">{filteredPages[group].items[page].name}</NavLink>
+                        {Object.keys(filteredPages[group].items).map((page) => (
+                            <li
+                                key={page}
+                                className="docs-page__nav-item"
+                                ref={`/${base}/${page}` === location.hash.replace('#', '') ? this.activeRef : null}
+                            >
+                                <NavLink
+                                    to={{pathname: `/${base}/${page}`}}
+                                    activeClassName="docs-page__nav-item--active"
+                                >
+                                    {filteredPages[group].items[page].name}
+                                </NavLink>
                             </li>
-                        )}
+                        ))}
                     </ul>
                 )}
             </li>
@@ -97,20 +105,27 @@ class ReactNav extends React.PureComponent {
 
         return (
             <aside className="docs-page__sidebar">
-                <div className='docs-page__sidebar-searchbar-container'>
+                <div className="docs-page__sidebar-searchbar-container">
                     <div className="mx-2 mb-1-5 sd-searchbar sd-searchbar--expanded sd-searchbar--boxed">
                         <label className="sd-searchbar__icon"></label>
-                        <input id="search-input" className="sd-searchbar__input" type="text" placeholder="Search" value={searchTerm} onChange={this.handleSearchChange} />
+                        <input
+                            id="search-input"
+                            className="sd-searchbar__input"
+                            type="text"
+                            placeholder="Search"
+                            value={searchTerm}
+                            onChange={this.handleSearchChange}
+                        />
                         {this.state.searchTerm && (
-                            <button className="sd-searchbar__cancel" onClick={() => this.setState({ searchTerm: '' })}>
-                                <Icon name='remove-sign' />
+                            <button className="sd-searchbar__cancel" onClick={() => this.setState({searchTerm: ''})}>
+                                <Icon name="remove-sign" />
                             </button>
                         )}
                     </div>
                 </div>
                 <ul className="docs-page__nav">{navigations}</ul>
             </aside>
-        )
+        );
     }
 }
 
@@ -123,10 +138,12 @@ class ReactDefault extends React.PureComponent {
                         <img src="/illustration--react.svg" alt="React" />
                     </figure>
                     <h2 className="docs-page__hero-h2 docs-page__color--primary">Home of Superdesk React components</h2>
-                    <p className="docs-page__hero-text">As the headline suggests, these where the React components live.</p>
+                    <p className="docs-page__hero-text">
+                        As the headline suggests, these where the React components live.
+                    </p>
                 </div>
             </section>
-        )
+        );
     }
 }
 
@@ -144,7 +161,7 @@ class PatternsDefault extends React.PureComponent {
                     </p>
                 </div>
             </section>
-        )
+        );
     }
 }
 
@@ -152,42 +169,52 @@ class ReactMarkup extends React.PureComponent {
     constructor(props) {
         super(props);
         this.state = {
-            active: 'preview'
-        }
+            active: 'preview',
+        };
     }
 
     changeTab(tab) {
-        this.setState({ active: tab });
+        this.setState({active: tab});
     }
 
     render() {
-        const childrenWithProps = React.Children.map(this.props.children, child =>
-            React.cloneElement(child, { active: this.state.active })
+        const childrenWithProps = React.Children.map(this.props.children, (child) =>
+            React.cloneElement(child, {active: this.state.active}),
         );
 
         return (
             <div className="docs-page__code-window">
                 <div className="docs-page__window-bar">
-                    <a className={'cursor-pointer ' + (this.state.active === 'preview' ? 'active' : '')} onClick={() => this.changeTab('preview')}>Example</a>
-                    <a className={'cursor-pointer ' + (this.state.active === 'markup' ? 'active' : '')} onClick={() => this.changeTab('markup')}>Markup</a>
+                    <a
+                        className={'cursor-pointer ' + (this.state.active === 'preview' ? 'active' : '')}
+                        onClick={() => this.changeTab('preview')}
+                    >
+                        Example
+                    </a>
+                    <a
+                        className={'cursor-pointer ' + (this.state.active === 'markup' ? 'active' : '')}
+                        onClick={() => this.changeTab('markup')}
+                    >
+                        Markup
+                    </a>
                 </div>
 
-                <div className="docs-page__window-content">
-                    {childrenWithProps}
-                </div>
+                <div className="docs-page__window-content">{childrenWithProps}</div>
             </div>
-        )
+        );
     }
 }
 
 class ReactMarkupPreview extends React.PureComponent {
     render() {
         return (
-            <div className="docs-page__code-example"
-                style={this.props.active === 'preview' ? { display: 'block' } : { display: 'none' }}>
+            <div
+                className="docs-page__code-example"
+                style={this.props.active === 'preview' ? {display: 'block'} : {display: 'none'}}
+            >
                 {this.props.children}
             </div>
-        )
+        );
     }
 }
 
@@ -197,14 +224,15 @@ class ReactMarkupCode extends React.PureComponent {
     }
     render() {
         return (
-            <div className="docs-page__code-markup" style={this.props.active === 'markup' ? { display: 'block' } : { display: 'none' }}>
+            <div
+                className="docs-page__code-markup"
+                style={this.props.active === 'markup' ? {display: 'block'} : {display: 'none'}}
+            >
                 <pre className="line-numbers">
-                    <code className="language-jsx">
-                        {this.props.children}
-                    </code>
+                    <code className="language-jsx">{this.props.children}</code>
                 </pre>
             </div>
-        )
+        );
     }
 }
 
@@ -213,17 +241,23 @@ class ReactMarkupCodePreview extends React.PureComponent {
         Prism.highlightAll();
     }
     render() {
-        const { limitHeight, children } = this.props;
+        const {limitHeight, children} = this.props;
         const classes = `language-jsx ${limitHeight ? 'max-h-25' : ''}`;
 
         return (
             <pre className={limitHeight ? 'max-h-25' : ''}>
-                <code className={classes}>
-                    {children}
-                </code>
+                <code className={classes}>{children}</code>
             </pre>
-        )
+        );
     }
 }
 
-export { ReactNav, ReactDefault, ReactMarkup, ReactMarkupPreview, ReactMarkupCode, ReactMarkupCodePreview, PatternsDefault };
+export {
+    ReactNav,
+    ReactDefault,
+    ReactMarkup,
+    ReactMarkupPreview,
+    ReactMarkupCode,
+    ReactMarkupCodePreview,
+    PatternsDefault,
+};