superdesk-ui-framework 4.0.46 → 4.0.48

package/app-typescript/components/LeftMenu.tsx

@@ -1,6 +1,6 @@
-import * as React from "react";
-import classNames from "classnames";
-import Scrollspy from "react-scrollspy";
+import * as React from 'react';
+import classNames from 'classnames';
+import Scrollspy from 'react-scrollspy';
 
 interface IMenuItem {
     id: string;
@@ -24,8 +24,8 @@ interface IMenu {
     scrollSpy?: string;
     offset?: number;
     reverseItemBorder?: boolean;
-    style?: "default" | "inverse" | "blanc";
-    size?: "medium" | "large";
+    style?: 'default' | 'inverse' | 'blanc';
+    size?: 'medium' | 'large';
     onSelect(id: string, route: string): void;
 }
 
@@ -50,37 +50,31 @@ export class LeftMenu extends React.PureComponent<IMenu, IState> {
         });
 
         if (item.ref) {
-            return document
-                .getElementById(item.ref)
-                ?.scrollIntoView({ block: "nearest", behavior: "smooth" });
+            return document.getElementById(item.ref)?.scrollIntoView({block: 'nearest', behavior: 'smooth'});
         }
 
         if (item.onClick) {
             return item.onClick();
         }
 
-        this.props.onSelect(item.id, item.route ? item.route : "");
+        this.props.onSelect(item.id, item.route ? item.route : '');
     }
 
     componentDidMount() {
         if (this.props.scrollTo) {
-            return document
-            .getElementById(this.props.scrollTo)
-            ?.scrollIntoView({ block: "nearest", behavior: "smooth" });
+            return document.getElementById(this.props.scrollTo)?.scrollIntoView({block: 'nearest', behavior: 'smooth'});
         }
     }
 
     render() {
         let classes = classNames(
-            "sd-left-nav",
+            'sd-left-nav',
             {
-                "sd-left-nav--default": this.props.style === undefined,
-                [`sd-left-nav--${this.props.style}`]:
-                this.props.style || this.props.style !== undefined,
-                "sd-left-nav--medium": this.props.size === undefined,
-                [`sd-left-nav--${this.props.size}`]:
-                this.props.size || this.props.size !== undefined,
-                "sd-left-nav--reverse-border": this.props.reverseItemBorder,
+                'sd-left-nav--default': this.props.style === undefined,
+                [`sd-left-nav--${this.props.style}`]: this.props.style || this.props.style !== undefined,
+                'sd-left-nav--medium': this.props.size === undefined,
+                [`sd-left-nav--${this.props.size}`]: this.props.size || this.props.size !== undefined,
+                'sd-left-nav--reverse-border': this.props.reverseItemBorder,
             },
             this.props.className,
         );
@@ -91,32 +85,35 @@ export class LeftMenu extends React.PureComponent<IMenu, IState> {
             this.props.groups.map((element, index) => {
                 scrollSpyList = [...scrollSpyList, element.label];
                 scrollSpyItems.push(
-                    <span className="sd-left-nav__group-header" key={"group-" + index}>
+                    <span className="sd-left-nav__group-header" key={'group-' + index}>
                         {element.label}
                     </span>,
                 );
 
                 element.items.map((elementOfItem, indexOfItem) => {
-                scrollSpyList = [...scrollSpyList, `${elementOfItem.ref}`];
-
-                scrollSpyItems.push(
-                    <a key={"item-" + indexOfItem}
-                    onClick={(event) => {
-                    this.handleClick(elementOfItem, event);
-                    }}
-                    className="sd-left-nav__btn" >
-                        {elementOfItem.label}
-                    </a>,
-                );
+                    scrollSpyList = [...scrollSpyList, `${elementOfItem.ref}`];
+
+                    scrollSpyItems.push(
+                        <a
+                            key={'item-' + indexOfItem}
+                            onClick={(event) => {
+                                this.handleClick(elementOfItem, event);
+                            }}
+                            className="sd-left-nav__btn"
+                        >
+                            {elementOfItem.label}
+                        </a>,
+                    );
                 });
             });
 
             return (
                 <Scrollspy
-                offset={this.props.offset ? this.props.offset : -300}
-                items={scrollSpyList}
-                rootEl={this.props.scrollSpy}
-                currentClassName="sd-left-nav__btn--active" >
+                    offset={this.props.offset ? this.props.offset : -300}
+                    items={scrollSpyList}
+                    rootEl={this.props.scrollSpy}
+                    currentClassName="sd-left-nav__btn--active"
+                >
                     {scrollSpyItems.map((element) => element)}
                 </Scrollspy>
             );
@@ -126,23 +123,24 @@ export class LeftMenu extends React.PureComponent<IMenu, IState> {
             return this.props.groups.map((group, i) => {
                 return (
                     <React.Fragment key={i}>
-                    <span className="sd-left-nav__group-header">{group.label}</span>
-                    {group.items.map((item, j) => {
-                        return (
-                        <button
-                        key={j}
-                        onClick={(event) => {
-                        this.handleClick(item, event);
-                        }}
-                        className={
-                        item.id === this.state.active
-                            ? "sd-left-nav__btn sd-left-nav__btn--active"
-                            : "sd-left-nav__btn"
-                        }>
-                            {item.label}
-                        </button>
-                        );
-                    })}
+                        <span className="sd-left-nav__group-header">{group.label}</span>
+                        {group.items.map((item, j) => {
+                            return (
+                                <button
+                                    key={j}
+                                    onClick={(event) => {
+                                        this.handleClick(item, event);
+                                    }}
+                                    className={
+                                        item.id === this.state.active
+                                            ? 'sd-left-nav__btn sd-left-nav__btn--active'
+                                            : 'sd-left-nav__btn'
+                                    }
+                                >
+                                    {item.label}
+                                </button>
+                            );
+                        })}
                     </React.Fragment>
                 );
             });

package/app-typescript/components/ListItemLoader.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Skeleton } from './Skeleton';
+import {Skeleton} from './Skeleton';
 
 export class ListItemLoader extends React.Component<{}> {
     render() {

package/app-typescript/components/Lists/BoxedList.tsx

@@ -3,41 +3,25 @@ import classNames from 'classnames';
 
 class BoxedListMedia extends React.PureComponent {
     render() {
-        return (
-            <div className='boxed-list__item-media'>
-                {this.props.children}
-            </div>
-        );
+        return <div className="boxed-list__item-media">{this.props.children}</div>;
     }
 }
 
 class BoxedListContent extends React.PureComponent {
     render() {
-        return (
-            <div className='boxed-list__item-content'>
-                {this.props.children}
-            </div>
-        );
+        return <div className="boxed-list__item-content">{this.props.children}</div>;
     }
 }
 
 class BoxedListContentRow extends React.PureComponent {
     render() {
-        return (
-            <div className='boxed-list__item-content-row'>
-                {this.props.children}
-            </div>
-        );
+        return <div className="boxed-list__item-content-row">{this.props.children}</div>;
     }
 }
 
 class BoxedListFooter extends React.PureComponent {
     render() {
-        return (
-            <div className='boxed-list__item-footer'>
-                {this.props.children}
-            </div>
-        );
+        return <div className="boxed-list__item-footer">{this.props.children}</div>;
     }
 }
 
@@ -114,22 +98,11 @@ class BoxedListItem extends React.PureComponent<IPropsItem> {
         });
         return (
             <li className={classes} onClick={this.handleClick}>
+                {this.props.media && <BoxedListMedia>{this.props.media}</BoxedListMedia>}
 
-                {this.props.media && (
-                    <BoxedListMedia>
-                        {this.props.media}
-                    </BoxedListMedia>
-                )}
+                <BoxedListContent>{this.props.children}</BoxedListContent>
 
-                <BoxedListContent>
-                    {this.props.children}
-                </BoxedListContent>
-
-                {this.props.footer && (
-                    <BoxedListFooter>
-                        {this.props.footer}
-                    </BoxedListFooter>
-                )}
+                {this.props.footer && <BoxedListFooter>{this.props.footer}</BoxedListFooter>}
 
                 {this.props.actions && (
                     <BoxedListActions
@@ -155,10 +128,14 @@ interface IProps {
 
 class BoxedList extends React.PureComponent<IProps> {
     render() {
-        let classes = classNames('boxed-list', {
-            'boxed-list--compact': this.props.density === undefined,
-            [`boxed-list--${this.props.density}`]: this.props.density || this.props.density !== undefined,
-        }, this.props.className);
+        let classes = classNames(
+            'boxed-list',
+            {
+                'boxed-list--compact': this.props.density === undefined,
+                [`boxed-list--${this.props.density}`]: this.props.density || this.props.density !== undefined,
+            },
+            this.props.className,
+        );
         return (
             <ul className={classes} style={this.props.style}>
                 {this.props.children}
@@ -167,6 +144,4 @@ class BoxedList extends React.PureComponent<IProps> {
     }
 }
 
-export {
-    BoxedList, BoxedListItem, BoxedListContentRow, BoxedListActions, BoxedListFooter
-};
+export {BoxedList, BoxedListItem, BoxedListContentRow, BoxedListActions, BoxedListFooter};

package/app-typescript/components/Lists/CalendarWeekDayItem.tsx

@@ -23,11 +23,7 @@ export class CalendarWeekDayItem extends React.PureComponent<IPropsItem> {
             [`calendar-week-day__item--${this.props.state}`]: this.props.state || this.props.state !== undefined,
         });
 
-        return (
-            <div className={classes}>
-                {this.props.children}
-            </div>
-        );
+        return <div className={classes}>{this.props.children}</div>;
     }
 }
 
@@ -43,10 +39,6 @@ export class WeeklyCalendarGrid extends React.PureComponent<{style?: React.CSSPr
 
 export class WeeklyCalendarGridItem extends React.PureComponent {
     render() {
-        return (
-            <div className="calendar-week-day__container">
-                {this.props.children}
-            </div>
-        );
+        return <div className="calendar-week-day__container">{this.props.children}</div>;
     }
 }

package/app-typescript/components/Lists/ContentList.tsx

@@ -6,9 +6,9 @@ interface IPropsItem {
     action?: React.ReactNode;
     locked?: boolean;
     itemColum: Array<{
-        itemRow: Array<{ content: any }>,
-        border?: boolean,
-        fullwidth?: boolean,
+        itemRow: Array<{content: any}>;
+        border?: boolean;
+        fullwidth?: boolean;
     }>;
     activated?: boolean;
     selected?: boolean;
@@ -30,58 +30,63 @@ class ContentListItem extends React.PureComponent<IPropsItem> {
     onActionMenuClick = (event: React.MouseEvent<HTMLElement>) => {
         event.preventDefault();
         event.stopPropagation();
-    }
+    };
 
     render() {
         let classes = classNames('sd-list-item sd-shadow--z1', {
             'sd-list-item--activated': this.props.activated,
             'sd-list-item--selected': this.props.selected,
-            'fetched': this.props.archived,
-            'actioning': this.props.loading,
+            fetched: this.props.archived,
+            actioning: this.props.loading,
         });
 
         return (
             <div
-                role='listitem'
+                role="listitem"
                 className={classes}
-                onClick={(e) => this.multiClickHandler(e, {
-                    onSingleClick: () => {
-                        let selection = window.getSelection();
-                        if (this.props.onClick && selection) {
-                            if (selection.toString().length < 1) {
-                                this.props.onClick();
+                onClick={(e) =>
+                    this.multiClickHandler(e, {
+                        onSingleClick: () => {
+                            let selection = window.getSelection();
+                            if (this.props.onClick && selection) {
+                                if (selection.toString().length < 1) {
+                                    this.props.onClick();
+                                }
                             }
-                        }
-                    },
-                    onDoubleClick: () => {
-                        if (this.props.onDoubleClick) {
-                            this.props.onDoubleClick();
-                        }
-                    },
-                })}
-            >
-                {this.props.locked
-                    ? <div className="sd-list-item__border sd-list-item__border--locked"></div>
-                    : <div className="sd-list-item__border"></div>
+                        },
+                        onDoubleClick: () => {
+                            if (this.props.onDoubleClick) {
+                                this.props.onDoubleClick();
+                            }
+                        },
+                    })
                 }
+            >
+                {this.props.locked ? (
+                    <div className="sd-list-item__border sd-list-item__border--locked"></div>
+                ) : (
+                    <div className="sd-list-item__border"></div>
+                )}
                 {this.props.itemColum.map((item, index) => {
-                    return <div
-                        className={`
+                    return (
+                        <div
+                            className={`
                             sd-list-item__column
                             ${item.fullwidth && 'sd-list-item__column--grow'}
-                            ${!item.border && 'sd-list-item__column--no-border'}`
-                    }
-                        key={index}>
-                        {item.itemRow.map((e, i) => {
-                            return (
-                                item.itemRow.length <= 1
-                                    ? <React.Fragment key={i}>{e.content}</React.Fragment>
-                                    : <div className="sd-list-item__row" key={i}>
+                            ${!item.border && 'sd-list-item__column--no-border'}`}
+                            key={index}
+                        >
+                            {item.itemRow.map((e, i) => {
+                                return item.itemRow.length <= 1 ? (
+                                    <React.Fragment key={i}>{e.content}</React.Fragment>
+                                ) : (
+                                    <div className="sd-list-item__row" key={i}>
                                         {e.content}
                                     </div>
-                            );
-                        })}
-                    </div>;
+                                );
+                            })}
+                        </div>
+                    );
                 })}
                 <div className="sd-list-item__action-menu" onClick={this.onActionMenuClick}>
                     {this.props.action}
@@ -93,20 +98,20 @@ class ContentListItem extends React.PureComponent<IPropsItem> {
 
 interface IProps {
     items: Array<{
-        itemColum: Array<IItemArray>,
-        locked?: boolean,
-        action?: React.ReactNode,
-        loading?: boolean,
-        activated?: boolean,
-        selected?: boolean,
-        archived?: boolean,
-        onClick?(): void,
+        itemColum: Array<IItemArray>;
+        locked?: boolean;
+        action?: React.ReactNode;
+        loading?: boolean;
+        activated?: boolean;
+        selected?: boolean;
+        archived?: boolean;
+        onClick?(): void;
         onDoubleClick?(): void;
     }>;
 }
 
 interface IItemArray {
-    itemRow: Array<{ content: React.ReactNode }>;
+    itemRow: Array<{content: React.ReactNode}>;
     border?: boolean;
     fullwidth?: boolean;
 }
@@ -115,25 +120,26 @@ class ContentList extends React.PureComponent<IProps> {
     render() {
         let classes = classNames('sd-list-item-group sd-list-item-group--space-between-items');
         return (
-            <div role='list' className={classes}>
+            <div role="list" className={classes}>
                 {this.props.items.map((item, index) => {
-                    return <ContentListItem
-                        key={index}
-                        itemColum={item.itemColum}
-                        locked={item.locked}
-                        action={item.action}
-                        loading={item.loading}
-                        activated={item.activated}
-                        selected={item.selected}
-                        archived={item.archived}
-                        onClick={item.onClick}
-                        onDoubleClick={item.onDoubleClick} />;
+                    return (
+                        <ContentListItem
+                            key={index}
+                            itemColum={item.itemColum}
+                            locked={item.locked}
+                            action={item.action}
+                            loading={item.loading}
+                            activated={item.activated}
+                            selected={item.selected}
+                            archived={item.archived}
+                            onClick={item.onClick}
+                            onDoubleClick={item.onDoubleClick}
+                        />
+                    );
                 })}
             </div>
         );
     }
 }
 
-export {
-    ContentList, ContentListItem
-};
+export {ContentList, ContentListItem};

package/app-typescript/components/Lists/SimpleList.tsx

@@ -24,8 +24,7 @@ class SimpleListItem extends React.PureComponent<IPropsItem> {
             'simple-list__item--justify-flex-start': this.props.justify === undefined,
             [`simple-list__item--justify-${this.props.justify}`]:
                 this.props.justify || this.props.justify !== undefined,
-            [`simple-list__item--gap-${this.props.gap}`]:
-            this.props.gap || this.props.gap !== undefined,
+            [`simple-list__item--gap-${this.props.gap}`]: this.props.gap || this.props.gap !== undefined,
         });
         return (
             <li className={classes} id={this.props.id || undefined}>
@@ -37,13 +36,17 @@ class SimpleListItem extends React.PureComponent<IPropsItem> {
 
 class SimpleList extends React.PureComponent<IProps> {
     render() {
-        let classes = classNames('simple-list', {
-            'simple-list--compact': this.props.density === undefined,
-            'simple-list--dotted': this.props.border === true,
-            [`simple-list--${this.props.density}`]: this.props.density || this.props.density !== undefined,
-            '': this.props.width === undefined,
-            [`simple-list--fixedW-${this.props.width}`]: this.props.width || this.props.width !== undefined,
-        }, this.props.className);
+        let classes = classNames(
+            'simple-list',
+            {
+                'simple-list--compact': this.props.density === undefined,
+                'simple-list--dotted': this.props.border === true,
+                [`simple-list--${this.props.density}`]: this.props.density || this.props.density !== undefined,
+                '': this.props.width === undefined,
+                [`simple-list--fixedW-${this.props.width}`]: this.props.width || this.props.width !== undefined,
+            },
+            this.props.className,
+        );
         return (
             <ul className={classes} id={this.props.id || undefined}>
                 {this.props.children}
@@ -52,6 +55,4 @@ class SimpleList extends React.PureComponent<IProps> {
     }
 }
 
-export {
-    SimpleList, SimpleListItem
-};
+export {SimpleList, SimpleListItem};