superdesk-ui-framework 4.0.46 → 4.0.48

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

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import ReactDOM from 'react-dom';
 import classNames from 'classnames';
-import { DragDropContext, Droppable, Draggable, DropResult } from "react-beautiful-dnd";
-import { Tooltip } from '../Tooltip';
-import { Button } from '../Button';
-import { Dropdown, IMenuItem, ISubmenu, IMenuGroup } from '../Dropdown';
+import {DragDropContext, Droppable, Draggable, DropResult} from 'react-beautiful-dnd';
+import {Tooltip} from '../Tooltip';
+import {Button} from '../Button';
+import {Dropdown, IMenuItem, ISubmenu, IMenuGroup} from '../Dropdown';
 import {setupSingleAndDoubleClick} from './../SingleAndDoubleClickFunction';
 
 export interface IProps {
@@ -58,7 +58,7 @@ class TableList extends React.PureComponent<IProps, IState> {
 
     componentDidMount(): void {
         if (this.props.array) {
-            this.setState({ items: this.props.array });
+            this.setState({items: this.props.array});
         }
     }
 
@@ -76,23 +76,17 @@ class TableList extends React.PureComponent<IProps, IState> {
         if (!result.destination) {
             return;
         }
-        const items = reorder(
-            this.state.items,
-            result.source.index,
-            result.destination.index,
-        );
+        const items = reorder(this.state.items, result.source.index, result.destination.index);
         this.setState({
             items: items,
         });
 
-        return this.props.onDrag ?
-            this.props.onDrag(result.source.index, result.destination.index) : null;
+        return this.props.onDrag ? this.props.onDrag(result.source.index, result.destination.index) : null;
     }
 
     dropDown() {
         return (
-            <Dropdown
-                items={this.props.itemsDropdown ? this.props.itemsDropdown() : []}>
+            <Dropdown items={this.props.itemsDropdown ? this.props.itemsDropdown() : []}>
                 <Button
                     type="primary"
                     icon="plus-large"
@@ -113,146 +107,121 @@ class TableList extends React.PureComponent<IProps, IState> {
             [`${this.props.className}`]: this.props.className,
         });
 
-        return (
-            this.state.items.length > 0
-                ? this.props.dragAndDrop
-                    ? <DragDropContext onDragEnd={this.onDragEnd}>
-                        <Droppable droppableId="droppable">
-                            {(provided, _snapshot) => (
-                                <div
-                                    role='list'
-                                    className={classes}
-                                    ref={provided.innerRef}
-                                    {...provided.droppableProps}
-                                >
-                                    {this.state.items.map((item: IPropsArrayItem, index: number) => (
-                                        <Draggable key={index} draggableId={`${index}`} index={index}>
-                                            {(provided2, snapshot) => (
-                                                this.props.append
-                                                    ? <PortalItem
-                                                        provided={provided2}
-                                                        snapshot={snapshot}
-                                                        item={item}
-                                                        index={index}
+        return this.state.items.length > 0 ? (
+            this.props.dragAndDrop ? (
+                <DragDropContext onDragEnd={this.onDragEnd}>
+                    <Droppable droppableId="droppable">
+                        {(provided, _snapshot) => (
+                            <div role="list" className={classes} ref={provided.innerRef} {...provided.droppableProps}>
+                                {this.state.items.map((item: IPropsArrayItem, index: number) => (
+                                    <Draggable key={index} draggableId={`${index}`} index={index}>
+                                        {(provided2, snapshot) =>
+                                            this.props.append ? (
+                                                <PortalItem
+                                                    provided={provided2}
+                                                    snapshot={snapshot}
+                                                    item={item}
+                                                    index={index}
+                                                    dragAndDrop={this.props.dragAndDrop}
+                                                    showDragHandle={this.props.showDragHandle}
+                                                    addItem={this.props.addItem}
+                                                    onAddItem={() =>
+                                                        this.props.onAddItem && this.props.onAddItem(index, item)
+                                                    }
+                                                    itemsDropdown={() =>
+                                                        this.props.itemsDropdown ? this.props.itemsDropdown(index) : []
+                                                    }
+                                                />
+                                            ) : (
+                                                <div
+                                                    ref={provided2.innerRef}
+                                                    {...provided2.draggableProps}
+                                                    {...provided2.dragHandleProps}
+                                                >
+                                                    <TableListItem
                                                         dragAndDrop={this.props.dragAndDrop}
-                                                        showDragHandle={this.props.showDragHandle}
+                                                        start={item.start}
+                                                        center={item.center}
+                                                        end={item.end}
+                                                        action={item.action}
+                                                        selected={item.selected}
+                                                        onClick={item.onClick ? item.onClick : undefined}
+                                                        onDoubleClick={
+                                                            item.onDoubleClick ? item.onDoubleClick : undefined
+                                                        }
                                                         addItem={this.props.addItem}
-                                                        onAddItem={() => this.props.onAddItem
-                                                            && this.props.onAddItem(index, item)
+                                                        itemsDropdown={() =>
+                                                            this.props.itemsDropdown
+                                                                ? this.props.itemsDropdown(index)
+                                                                : []
                                                         }
-                                                        itemsDropdown={() => this.props.itemsDropdown
-                                                            ? this.props.itemsDropdown(index)
-                                                            : []
+                                                        hexColor={item.hexColor}
+                                                        locked={item.locked}
+                                                        positionLocked={item.positionLocked}
+                                                        onAddItem={() =>
+                                                            this.props.onAddItem && this.props.onAddItem(index, item)
                                                         }
+                                                        showDragHandle={this.props.showDragHandle}
                                                     />
-                                                    : <div
-                                                        ref={provided2.innerRef}
-                                                        {...provided2.draggableProps}
-                                                        {...provided2.dragHandleProps} >
-                                                        <TableListItem
-                                                            dragAndDrop={this.props.dragAndDrop}
-                                                            start={item.start}
-                                                            center={item.center}
-                                                            end={item.end}
-                                                            action={item.action}
-                                                            selected={item.selected}
-                                                            onClick={
-                                                                item.onClick
-                                                                    ? item.onClick
-                                                                    : undefined
-                                                            }
-                                                            onDoubleClick={
-                                                                item.onDoubleClick
-                                                                    ? item.onDoubleClick
-                                                                    : undefined
-                                                            }
-                                                            addItem={this.props.addItem}
-                                                            itemsDropdown={() => this.props.itemsDropdown
-                                                                ? this.props.itemsDropdown(index)
-                                                                : []
-                                                            }
-                                                            hexColor={item.hexColor}
-                                                            locked={item.locked}
-                                                            positionLocked={item.positionLocked}
-                                                            onAddItem={() => this.props.onAddItem
-                                                                && this.props.onAddItem(index, item)
-                                                            }
-                                                            showDragHandle={this.props.showDragHandle}
-                                                        />
-                                                    </div>
-                                            )}
-                                        </Draggable>
-                                    ))}
-                                    {provided.placeholder}
-                                    {
-                                        (this.props.addItem && !this.props.readOnly)
-                                            && <div className={`table-list__add-item table-list__item--margin`}>
-                                                <Tooltip text='Add item' flow='top'>
-                                                    <div className='table-list__add-item--container sd-margin-x--auto'>
-                                                        {this.dropDown()}
-                                                    </div>
-                                                </Tooltip>
+                                                </div>
+                                            )
+                                        }
+                                    </Draggable>
+                                ))}
+                                {provided.placeholder}
+                                {this.props.addItem && !this.props.readOnly && (
+                                    <div className={`table-list__add-item table-list__item--margin`}>
+                                        <Tooltip text="Add item" flow="top">
+                                            <div className="table-list__add-item--container sd-margin-x--auto">
+                                                {this.dropDown()}
                                             </div>
-                                    }
-                                </div>
-                            )}
-                        </Droppable>
-                    </DragDropContext>
-                    : <div role='list' className={classes}>
-                        {this.state.items.map((item: IPropsArrayItem, index: number) => (
-                            <TableListItem
-                                key={index}
-                                start={item.start}
-                                center={item.center}
-                                end={item.end}
-                                action={item.action}
-                                selected={item.selected}
-                                onClick={
-                                    item.onClick
-                                        ? item.onClick
-                                        : undefined
-                                }
-                                onDoubleClick={
-                                    item.onDoubleClick
-                                        ? item.onDoubleClick
-                                        : undefined
-                                }
-                                addItem={this.props.addItem}
-                                itemsDropdown={() => this.props.itemsDropdown
-                                    ? this.props.itemsDropdown(index)
-                                    : []
-                                }
-                                hexColor={item.hexColor}
-                                locked={item.locked}
-                                positionLocked={item.positionLocked}
-                                onAddItem={() => this.props.onAddItem
-                                    && this.props.onAddItem(index, item)
-                                }
-                            />
-                        ))}
-                        {
-                            (this.props.addItem && !this.props.readOnly)
-                                && <div className={`table-list__add-item table-list__item--margin`}>
-                                    <Tooltip text='Add item' flow='top'>
-                                        <div className='table-list__add-item--container sd-margin-x--auto'>
-                                            {this.dropDown()}
-                                        </div>
-                                    </Tooltip>
-                                </div>
-                        }
-                    </div>
-                : (this.props.addItem && !this.props.readOnly)
-                    ? <div role='list' className={classes}>
+                                        </Tooltip>
+                                    </div>
+                                )}
+                            </div>
+                        )}
+                    </Droppable>
+                </DragDropContext>
+            ) : (
+                <div role="list" className={classes}>
+                    {this.state.items.map((item: IPropsArrayItem, index: number) => (
+                        <TableListItem
+                            key={index}
+                            start={item.start}
+                            center={item.center}
+                            end={item.end}
+                            action={item.action}
+                            selected={item.selected}
+                            onClick={item.onClick ? item.onClick : undefined}
+                            onDoubleClick={item.onDoubleClick ? item.onDoubleClick : undefined}
+                            addItem={this.props.addItem}
+                            itemsDropdown={() => (this.props.itemsDropdown ? this.props.itemsDropdown(index) : [])}
+                            hexColor={item.hexColor}
+                            locked={item.locked}
+                            positionLocked={item.positionLocked}
+                            onAddItem={() => this.props.onAddItem && this.props.onAddItem(index, item)}
+                        />
+                    ))}
+                    {this.props.addItem && !this.props.readOnly && (
                         <div className={`table-list__add-item table-list__item--margin`}>
-                            <Tooltip text='Add item' flow='top'>
-                                <div className='table-list__add-item--container sd-margin-x--auto'>
+                            <Tooltip text="Add item" flow="top">
+                                <div className="table-list__add-item--container sd-margin-x--auto">
                                     {this.dropDown()}
                                 </div>
                             </Tooltip>
                         </div>
-                    </div>
-                    : null
-        );
+                    )}
+                </div>
+            )
+        ) : this.props.addItem && !this.props.readOnly ? (
+            <div role="list" className={classes}>
+                <div className={`table-list__add-item table-list__item--margin`}>
+                    <Tooltip text="Add item" flow="top">
+                        <div className="table-list__add-item--container sd-margin-x--auto">{this.dropDown()}</div>
+                    </Tooltip>
+                </div>
+            </div>
+        ) : null;
     }
 }
 
@@ -287,7 +256,7 @@ class TableListItem extends React.PureComponent<IPropsItem> {
     onActionMenuClick = (event: React.MouseEvent<HTMLElement>) => {
         event.preventDefault();
         event.stopPropagation();
-    }
+    };
 
     render() {
         let classes = classNames('table-list__item', {
@@ -302,77 +271,73 @@ class TableListItem extends React.PureComponent<IPropsItem> {
         });
 
         const Wrapper: React.ComponentType<{children: JSX.Element}> = this.props.addItem
-            ? ({children}) => (<div className='table-list__item-container'>{children}</div>)
+            ? ({children}) => <div className="table-list__item-container">{children}</div>
             : ({children}) => children;
 
         return (
             <Wrapper>
                 <>
                     <div
-                        role='listitem'
+                        role="listitem"
                         className={classes}
-                        onClick={(e) => this.multiClickHandler(e, {
-                            onSingleClick: () => {
-                                let selection = window.getSelection();
-                                if (this.props.onClick && selection) {
-                                    if (this.props.dragAndDrop) {
-                                        this.props.onClick();
-                                    } else {
-                                        if (selection.toString().length < 1) {
+                        onClick={(e) =>
+                            this.multiClickHandler(e, {
+                                onSingleClick: () => {
+                                    let selection = window.getSelection();
+                                    if (this.props.onClick && selection) {
+                                        if (this.props.dragAndDrop) {
                                             this.props.onClick();
+                                        } else {
+                                            if (selection.toString().length < 1) {
+                                                this.props.onClick();
+                                            }
                                         }
                                     }
-                                }
-                            },
-                            onDoubleClick: () => {
-                                if (this.props.onDoubleClick) {
-                                    this.props.onDoubleClick();
-                                }
-                            },
-                        })}
+                                },
+                                onDoubleClick: () => {
+                                    if (this.props.onDoubleClick) {
+                                        this.props.onDoubleClick();
+                                    }
+                                },
+                            })
+                        }
                     >
-                        <div className='table-list__item-border' style={{ backgroundColor: this.props.hexColor }}></div>
-                        <div className='table-list__item-content'>
-                            <div className='table-list__item-content-block'>
-                                {this.props.start && this.props.start}
-                            </div>
-                            <div className='table-list__item-content-block table-list__item-content-block--center'>
+                        <div className="table-list__item-border" style={{backgroundColor: this.props.hexColor}}></div>
+                        <div className="table-list__item-content">
+                            <div className="table-list__item-content-block">{this.props.start && this.props.start}</div>
+                            <div className="table-list__item-content-block table-list__item-content-block--center">
                                 {this.props.center && this.props.center}
                             </div>
-                            <div className='table-list__item-content-block'>
-                                {this.props.end && this.props.end}
-                            </div>
+                            <div className="table-list__item-content-block">{this.props.end && this.props.end}</div>
+                        </div>
+                        {this.props.action && (
+                            <div className="table-list__slide-in-actions" onClick={this.onActionMenuClick}>
+                                {this.props.action}
                             </div>
-                        {
-                            this.props.action
-                                && <div className='table-list__slide-in-actions'
-                                    onClick={this.onActionMenuClick}>
-                                    {this.props.action}
-                                </div>
-                        }
+                        )}
                     </div>
-                    {
-                        this.props.addItem
-                            && <div className='table-list__add-bar-container'>
-                                <Tooltip text='Add item' flow='top'>
-                                    <div className='table-list__add-bar'>
-                                        <Dropdown
-                                            onChange={this.props.onAddItem}
-                                            items={this.props.itemsDropdown ? this.props.itemsDropdown() : []}>
-                                            <Button
-                                                type="primary"
-                                                icon="plus-large"
-                                                text="Add item"
-                                                size="small"
-                                                shape="round"
-                                                iconOnly={true}
-                                                onClick={() => false}
-                                            />
-                                        </Dropdown>
-                                    </div>
-                                </Tooltip>
-                            </div>
-                    }
+                    {this.props.addItem && (
+                        <div className="table-list__add-bar-container">
+                            <Tooltip text="Add item" flow="top">
+                                <div className="table-list__add-bar">
+                                    <Dropdown
+                                        onChange={this.props.onAddItem}
+                                        items={this.props.itemsDropdown ? this.props.itemsDropdown() : []}
+                                    >
+                                        <Button
+                                            type="primary"
+                                            icon="plus-large"
+                                            text="Add item"
+                                            size="small"
+                                            shape="round"
+                                            iconOnly={true}
+                                            onClick={() => false}
+                                        />
+                                    </Dropdown>
+                                </div>
+                            </Tooltip>
+                        </div>
+                    )}
                 </>
             </Wrapper>
         );
@@ -388,26 +353,15 @@ class PortalItem extends React.PureComponent {
         const usePortal: boolean = snapshot.isDragging;
 
         const child = (
-            <div
-                ref={provided.innerRef}
-                {...provided.draggableProps}
-                {...provided.dragHandleProps}>
+            <div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
                 <TableListItem
                     dragAndDrop={this.props.dragAndDrop}
                     start={this.props.item.start}
                     center={this.props.item.center}
                     end={this.props.item.end}
                     action={this.props.item.action}
-                    onClick={
-                        this.props.item.onClick
-                            ? this.props.item.onClick
-                            : undefined
-                    }
-                    onDoubleClick={
-                        this.props.item.onDoubleClick
-                            ? this.props.item.onDoubleClick
-                            : undefined
-                    }
+                    onClick={this.props.item.onClick ? this.props.item.onClick : undefined}
+                    onDoubleClick={this.props.item.onDoubleClick ? this.props.item.onDoubleClick : undefined}
                     addItem={this.props.addItem}
                     itemsDropdown={this.props.itemsDropdown}
                     hexColor={this.props.item.hexColor}
@@ -428,6 +382,4 @@ class PortalItem extends React.PureComponent {
     }
 }
 
-export {
-    TableList, TableListItem
-};
+export {TableList, TableListItem};

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

@@ -1,2 +1,2 @@
-export { SimpleList, SimpleListItem } from './SimpleList';
-export { BoxedList, BoxedListItem, BoxedListContentRow } from './BoxedList';
+export {SimpleList, SimpleListItem} from './SimpleList';
+export {BoxedList, BoxedListItem, BoxedListContentRow} from './BoxedList';

package/app-typescript/components/Loader.tsx

@@ -17,9 +17,7 @@ type IProps = IPropsOverlay | IPropsInline;
 export class Loader extends React.Component<IProps> {
     render() {
         if (this.props.overlay) {
-            return (
-                <div className="sd-loader" style={{backgroundColor: this.props.backgroundColor}} />
-            );
+            return <div className="sd-loader" style={{backgroundColor: this.props.backgroundColor}} />;
         } else {
             return (
                 <div

package/app-typescript/components/Menu.tsx

@@ -132,9 +132,7 @@ export class Menu extends React.Component<IProps, {}> {
     render() {
         return (
             <React.Fragment>
-                {
-                    this.props.children(this.toggle)
-                }
+                {this.props.children(this.toggle)}
 
                 <div
                     onKeyDown={(event) => {
@@ -152,7 +150,7 @@ export class Menu extends React.Component<IProps, {}> {
                     <TieredMenu
                         popup
                         model={this.toPrimeReactInterface(this.props.items)}
-                        ref={(el) => this.menu = el}
+                        ref={(el) => (this.menu = el)}
                         appendTo={document.body}
                         onShow={() => {
                             this.focusedBefore = document.activeElement;

package/app-typescript/components/Modal.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Dialog as PrimeDialog } from '@superdesk/primereact/dialog';
+import {Dialog as PrimeDialog} from '@superdesk/primereact/dialog';
 import classNames from 'classnames';
 import {noop} from 'lodash';
 import {getNextZIndex} from './../zIndex';
@@ -14,15 +14,15 @@ interface IProps {
     contentPadding?: 'none' | 'small' | 'medium' | 'large';
     size?: 'small' | 'medium' | 'large' | 'x-large';
     position?:
-        "center"
-        | "top"
-        | "bottom"
-        | "left"
-        | "right"
-        | "top-left"
-        | "top-right"
-        | "bottom-left"
-        | "bottom-right";
+        | 'center'
+        | 'top'
+        | 'bottom'
+        | 'left'
+        | 'right'
+        | 'top-left'
+        | 'top-right'
+        | 'bottom-left'
+        | 'bottom-right';
     maximized?: boolean;
     maximizable?: boolean;
     headerTemplate?: JSX.Element | string;
@@ -36,18 +36,18 @@ export class Modal extends React.Component<IProps, {}> {
     private zIndex: number = getNextZIndex();
 
     render() {
-        let classes = classNames({
-            [`p-dialog-content--${this.props.size}`]: this.props.size,
-            'p-dialog-content-bg--default': this.props.contentBg === undefined,
-            [`p-dialog-content-bg--${this.props.contentBg}`]: this.props.contentBg,
-            'p-dialog-content--padding-small': this.props.contentPadding === undefined,
-            [`p-dialog-content--padding-${this.props.contentPadding}`]: this.props.contentPadding,
-        }, this.props.className);
+        let classes = classNames(
+            {
+                [`p-dialog-content--${this.props.size}`]: this.props.size,
+                'p-dialog-content-bg--default': this.props.contentBg === undefined,
+                [`p-dialog-content-bg--${this.props.contentBg}`]: this.props.contentBg,
+                'p-dialog-content--padding-small': this.props.contentPadding === undefined,
+                [`p-dialog-content--padding-${this.props.contentPadding}`]: this.props.contentPadding,
+            },
+            this.props.className,
+        );
         return (
-            <div
-                style={{display: 'content'}}
-                data-theme={this.props.theme !== 'dark' ? null : 'dark-ui' }
-            >
+            <div style={{display: 'content'}} data-theme={this.props.theme !== 'dark' ? null : 'dark-ui'}>
                 <PrimeDialog
                     id={this.props.id}
                     visible={this.props.visible}

package/app-typescript/components/MultiSelect.tsx

@@ -1,8 +1,8 @@
-import * as React from "react";
-import { MultiSelect as PrimeMultiSelect } from "@superdesk/primereact/multiselect";
+import * as React from 'react';
+import {MultiSelect as PrimeMultiSelect} from '@superdesk/primereact/multiselect';
 import classNames from 'classnames';
-import nextId from "react-id-generator";
-import { InputWrapper } from "./Form";
+import nextId from 'react-id-generator';
+import {InputWrapper} from './Form';
 import {IInputWrapper} from './Form/InputWrapper';
 import {SelectPreview} from './SelectPreview';
 import {getNextZIndex} from '../zIndex';
@@ -47,8 +47,8 @@ export class MultiSelect<T> extends React.Component<IProps<T>, IState<T>> {
 
     render() {
         let classes = classNames({
-            'showSelectAll': this.props.showSelectAll,
-            'showFilter': this.props.filter,
+            showSelectAll: this.props.showSelectAll,
+            showFilter: this.props.filter,
         });
 
         if (this.props.preview) {