superdesk-ui-framework 4.0.47 → 4.0.49

package/app-typescript/components/GridItem.tsx

@@ -3,41 +3,25 @@ import classNames from 'classnames';
 
 class GridItemMedia extends React.PureComponent {
     render() {
-        return (
-            <div className='sd-grid-item__media'>
-                {this.props.children}
-            </div>
-        );
+        return <div className="sd-grid-item__media">{this.props.children}</div>;
     }
 }
 
 class GridItemContent extends React.PureComponent {
     render() {
-        return (
-            <div className='sd-grid-item__content'>
-                {this.props.children}
-            </div>
-        );
+        return <div className="sd-grid-item__content">{this.props.children}</div>;
     }
 }
 
 class GridItemContentBlock extends React.PureComponent {
     render() {
-        return (
-            <div className='sd-grid-item__content-block'>
-                {this.props.children}
-            </div>
-        );
+        return <div className="sd-grid-item__content-block">{this.props.children}</div>;
     }
 }
 
 class GridItemFooter extends React.PureComponent {
     render() {
-        return (
-            <div className='sd-grid-item__footer'>
-                {this.props.children}
-            </div>
-        );
+        return <div className="sd-grid-item__footer">{this.props.children}</div>;
     }
 }
 
@@ -53,11 +37,7 @@ class GridItemFooterBlock extends React.PureComponent<IPropsFooterBlock> {
         let classes = classNames('sd-grid-item__footer-block', {
             [`sd-grid-item__footer-block--${this.props.align}`]: this.props.align,
         });
-        return (
-            <div className={classes}>
-                {this.props.children}
-            </div>
-        );
+        return <div className={classes}>{this.props.children}</div>;
     }
 }
 
@@ -73,11 +53,7 @@ class GridItemFooterActions extends React.PureComponent<IPropsFooterActions> {
         let classes = classNames('sd-grid-item__footer-actions', {
             'sd-grid-item__footer-actions--visible': this.props.autohide === false,
         });
-        return (
-            <div className={classes}>
-                {this.props.children}
-            </div>
-        );
+        return <div className={classes}>{this.props.children}</div>;
     }
 }
 
@@ -87,60 +63,36 @@ interface IPropsTime {
 
 class GridItemTime extends React.PureComponent<IPropsTime> {
     render() {
-        return (
-            <time title={this.props.time}>
-                {this.props.time}
-            </time>
-        );
+        return <time title={this.props.time}>{this.props.time}</time>;
     }
 }
 
 class GridItemTitle extends React.PureComponent {
     render() {
-        return (
-            <h4 className='sd-grid-item__title'>
-                {this.props.children}
-            </h4>
-        );
+        return <h4 className="sd-grid-item__title">{this.props.children}</h4>;
     }
 }
 
 class GridItemSlug extends React.PureComponent {
     render() {
-        return (
-            <span className='sd-grid-item__slugline'>
-                {this.props.children}
-            </span>
-        );
+        return <span className="sd-grid-item__slugline">{this.props.children}</span>;
     }
 }
 
 class GridItemText extends React.PureComponent {
     render() {
-        return (
-            <p className='sd-grid-item--element-grow'>
-                {this.props.children}
-            </p>
-        );
+        return <p className="sd-grid-item--element-grow">{this.props.children}</p>;
     }
 }
 
 class GridItemTopActions extends React.PureComponent {
     render() {
-        return (
-            <div className='sd-grid-item__top-actions'>
-                {this.props.children}
-            </div>
-        );
+        return <div className="sd-grid-item__top-actions">{this.props.children}</div>;
     }
 }
 class GridItemCheckWrapper extends React.PureComponent {
     render() {
-        return (
-            <span className='sd-grid-item__checkbox'>
-                {this.props.children}
-            </span>
-        );
+        return <span className="sd-grid-item__checkbox">{this.props.children}</span>;
     }
 }
 
@@ -161,23 +113,40 @@ export default class GridItem extends React.PureComponent<IProps> {
     };
 
     render() {
-        let classes = classNames('sd-grid-item', [
-            `sd-grid-item__type--${this.props.itemtype}`, {
-                'locked': this.props.locked,
-                'sd-grid-item--with-click' : this.props.onClick,
-                'fetched': this.props.fetched,
-            }], this.props.status);
+        let classes = classNames(
+            'sd-grid-item',
+            [
+                `sd-grid-item__type--${this.props.itemtype}`,
+                {
+                    locked: this.props.locked,
+                    'sd-grid-item--with-click': this.props.onClick,
+                    fetched: this.props.fetched,
+                },
+            ],
+            this.props.status,
+        );
 
         return (
             <div className={classes} onClick={this.props.onClick}>
                 {this.props.children}
-                <div className='sd-grid-item__state-border'></div>
+                <div className="sd-grid-item__state-border"></div>
             </div>
         );
     }
 }
 
 export {
-    GridItem, GridItemContent, GridItemMedia, GridItemFooter, GridItemContentBlock, GridItemTime, GridItemTitle,
-    GridItemText, GridItemSlug, GridItemFooterBlock, GridItemFooterActions, GridItemTopActions, GridItemCheckWrapper
+    GridItem,
+    GridItemContent,
+    GridItemMedia,
+    GridItemFooter,
+    GridItemContentBlock,
+    GridItemTime,
+    GridItemTitle,
+    GridItemText,
+    GridItemSlug,
+    GridItemFooterBlock,
+    GridItemFooterActions,
+    GridItemTopActions,
+    GridItemCheckWrapper,
 };

package/app-typescript/components/GridList.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 
 interface IProps {
-    size?: 'x-small' |'small' | 'medium' | 'large'; // defaults to 'small'
+    size?: 'x-small' | 'small' | 'medium' | 'large'; // defaults to 'small'
     margin?: '0' | '1' | '2' | '3';
     gap?: 'small' | 'medium' | 'large' | 'x-large';
 }
@@ -22,10 +22,6 @@ export class GridList extends React.PureComponent<IProps> {
             },
         ]);
 
-        return (
-            <div className={classes}>
-                {this.props.children}
-            </div>
-        );
+        return <div className={classes}>{this.props.children}</div>;
     }
 }

package/app-typescript/components/HeadingText.tsx

@@ -9,11 +9,10 @@ interface IProps {
 export class HeadingText extends React.PureComponent<IProps> {
     render() {
         return (
-            <div className='sd-toast__message'>
-                <div className='sd-toast__message-header'>
-                    <h4 className='sd-toast__heading'>{this.props.heading}</h4>
-                    {this.props.timestamp ?
-                        <time>{this.props.timestamp.toLocaleString()}</time> : null}
+            <div className="sd-toast__message">
+                <div className="sd-toast__message-header">
+                    <h4 className="sd-toast__heading">{this.props.heading}</h4>
+                    {this.props.timestamp ? <time>{this.props.timestamp.toLocaleString()}</time> : null}
                 </div>
                 <p>{this.props.text}</p>
             </div>

package/app-typescript/components/IconButton.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { Icon } from './Icon';
-import { Tooltip } from './Tooltip';
+import {Icon} from './Icon';
+import {Tooltip} from './Tooltip';
 import classNames from 'classnames';
 
 interface IProps {
@@ -27,10 +27,7 @@ export class IconButton extends React.PureComponent<IProps> {
         });
 
         return (
-            <Tooltip
-                text={this.props.disabled ? null : this.props.ariaValue}
-                flow={this.props.toolTipFlow}
-            >
+            <Tooltip text={this.props.disabled ? null : this.props.ariaValue} flow={this.props.toolTipFlow}>
                 <button
                     id={this.props.id}
                     tabIndex={0}
@@ -39,10 +36,7 @@ export class IconButton extends React.PureComponent<IProps> {
                     disabled={this.props.disabled}
                     aria-label={this.props.ariaValue}
                 >
-                    <Icon
-                        name={this.props.icon}
-                        ariaHidden={true}
-                    />
+                    <Icon name={this.props.icon} ariaHidden={true} />
                 </button>
             </Tooltip>
         );

package/app-typescript/components/IconLabel.tsx

@@ -20,11 +20,11 @@ export class IconLabel extends React.PureComponent<IProps> {
 
         return (
             <span className={classes}>
-                {this.props.icon ?
-                    <Icon name={this.props.icon}/> : null}
-                {this.props.innerLabel ?
-                    <span className='label-icon--inner-label'>{this.props.innerLabel}</span> : null}
-                <span className='label-icon__value'>{this.props.text}</span>
+                {this.props.icon ? <Icon name={this.props.icon} /> : null}
+                {this.props.innerLabel ? (
+                    <span className="label-icon--inner-label">{this.props.innerLabel}</span>
+                ) : null}
+                <span className="label-icon__value">{this.props.text}</span>
             </span>
         );
     }

package/app-typescript/components/IconPicker.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { Button } from './Button';
-import { Icon } from './Icon';
-import { IItem, SelectGrid } from "./SelectGrid";
+import {Button} from './Button';
+import {Icon} from './Icon';
+import {IItem, SelectGrid} from './SelectGrid';
 
 interface IProps {
     label?: string;
@@ -16,15 +16,15 @@ interface IState {
 }
 
 export class IconPicker extends React.PureComponent<IProps, IState> {
-
     constructor(props: IProps) {
         super(props);
-        this.state = { icons: [] };
+        this.state = {icons: []};
     }
 
     componentDidMount() {
-        const translateFunction = this.props.translateFunction ?
-            this.props.translateFunction : (text: string): string => text;
+        const translateFunction = this.props.translateFunction
+            ? this.props.translateFunction
+            : (text: string): string => text;
         this.setState({
             icons: getIcons(translateFunction),
         });
@@ -36,43 +36,43 @@ export class IconPicker extends React.PureComponent<IProps, IState> {
 
             if (searchString) {
                 icons = icons.filter(
-                    (icon) => (
+                    (icon) =>
                         icon.value.toLowerCase().includes(searchString) ||
-                        icon.label.toLowerCase().includes(searchString)
-                    ),
+                        icon.label.toLowerCase().includes(searchString),
                 );
             }
             resolve(icons);
         });
-    }
+    };
 
     onChange = (item: IItem) => {
         this.props.onChange(item.value);
-    }
+    };
 
-    triggerTemplate = (props: {onClick: (e: React.SyntheticEvent) => void; }) => (
+    triggerTemplate = (props: {onClick: (e: React.SyntheticEvent) => void}) => (
         <Button
             icon={this.props.value}
             text={this.props.value}
-            onClick={(e) => { props.onClick(e); }}
+            onClick={(e) => {
+                props.onClick(e);
+            }}
             iconOnly={true}
         />
-    )
+    );
 
-    itemTemplate = ({ item }: { item: IItem | null }) => item && (
-        <>
-            <Icon name={item.value} />
-            <span className="sd-text--normal sd-padding-t--1">
-                {item.label}
-            </span>
-        </>
-    )
+    itemTemplate = ({item}: {item: IItem | null}) =>
+        item && (
+            <>
+                <Icon name={item.value} />
+                <span className="sd-text--normal sd-padding-t--1">{item.label}</span>
+            </>
+        );
 
     render() {
         return (
             <SelectGrid
-                label={this.props.label ?? "Icon"}
-                filterPlaceholder={this.props.filterPlaceholder ?? "Search..."}
+                label={this.props.label ?? 'Icon'}
+                filterPlaceholder={this.props.filterPlaceholder ?? 'Search...'}
                 getItems={this.getItems}
                 onChange={this.onChange}
                 itemTemplate={this.itemTemplate}
@@ -86,30 +86,30 @@ const getIcons = (translateFunction: (text: string) => string): Array<IItem> =>
     const translatedIconNameMap = {
         'add-gallery': 'Add Gallery',
         'add-image': 'Add Image',
-        'adjust': 'Adjust',
+        adjust: 'Adjust',
         'align-center': 'Align Center',
         'align-justify': 'Align Justify',
         'align-left': 'Align Left',
         'align-right': 'Align Right',
-        'amp': 'AMP',
-        'analytics': 'Analytics',
-        'archive': 'Archive',
+        amp: 'AMP',
+        analytics: 'Analytics',
+        archive: 'Archive',
         'arrow-left': 'Arrow Left',
         'arrow-right': 'Arrow Right',
         'arrow-small': 'Arrow Small',
-        'ascending': 'Ascending',
-        'assign': 'Assign',
-        'attachment': 'Attachment',
+        ascending: 'Ascending',
+        assign: 'Assign',
+        attachment: 'Attachment',
         'attachment-large': 'Attachment Large',
-        'audio': 'Audio',
+        audio: 'Audio',
         'backward-thin': 'Backward Thin',
         'ban-circle': 'Ban Circle',
-        'bell': 'Bell',
-        'bold': 'Bold',
-        'broadcast': 'Broadcast',
+        bell: 'Bell',
+        bold: 'Bold',
+        broadcast: 'Broadcast',
         'broadcast-create': 'Broadcast Create',
-        'business': 'Business',
-        'calendar': 'Calendar',
+        business: 'Business',
+        calendar: 'Calendar',
         'calendar-list': 'Calendar List',
         'chevron-down-thin': 'Chevron Down Thin',
         'chevron-left-thin': 'Chevron Left Thin',
@@ -119,42 +119,42 @@ const getIcons = (translateFunction: (text: string) => string): Array<IItem> =>
         'clear-format': 'Clear Format',
         'close-small': 'Close Small',
         'close-thick': 'Close Thick',
-        'code': 'Code',
-        'collapse': 'Collapse',
-        'comment': 'Comment',
-        'composite': 'Composite',
-        'copy': 'Copy',
-        'crop': 'Crop',
-        'cut': 'Cut',
-        'descending': 'Descending',
-        'dots': 'Dots',
+        code: 'Code',
+        collapse: 'Collapse',
+        comment: 'Comment',
+        composite: 'Composite',
+        copy: 'Copy',
+        crop: 'Crop',
+        cut: 'Cut',
+        descending: 'Descending',
+        dots: 'Dots',
         'dots-vertical': 'Dots Vertical',
-        'download': 'Download',
+        download: 'Download',
         'download-alt': 'Download Alternate',
         'edit-line': 'Edit Line',
-        'envelope': 'Envelope',
-        'event': 'Event',
+        envelope: 'Envelope',
+        event: 'Event',
         'exclamation-sign': 'Exclamation Sign',
-        'expand': 'Expand',
+        expand: 'Expand',
         'expand-thin': 'Expand Thin',
-        'external': 'External',
+        external: 'External',
         'eye-open': 'Eye Open',
-        'facebook': 'Facebook',
+        facebook: 'Facebook',
         'facebook-circle': 'Facebook Circle',
-        'fast_forward': 'Fast Forward',
-        'fast_rewind': 'Fast Rewind',
+        fast_forward: 'Fast Forward',
+        fast_rewind: 'Fast Rewind',
         'fetch-as': 'Fetch As',
-        'file': 'File',
+        file: 'File',
         'filter-large': 'Filter Large',
         'flip-horizontal': 'Flip Horizontal',
         'flip-vertical': 'Flip Vertical',
         'folder-close': 'Folder Close',
         'folder-open': 'Folder Open',
-        'font': 'Font',
+        font: 'Font',
         'forward-thin': 'Forward Thin',
-        'fullscreen': 'Fullscreen',
-        'globe': 'Globe',
-        'graphic': 'Graphic',
+        fullscreen: 'Fullscreen',
+        globe: 'Globe',
+        graphic: 'Graphic',
         'grid-view': 'Grid View',
         'grid-view-large': 'Grid View Large',
         'heading-1': 'Heading 1',
@@ -163,114 +163,116 @@ const getIcons = (translateFunction: (text: string) => string): Array<IItem> =>
         'heading-4': 'Heading 4',
         'heading-5': 'Heading 5',
         'heading-6': 'Heading 6',
-        'heart': 'Heart',
+        heart: 'Heart',
         'help-large': 'Help Large',
         'highlight-package': 'Highlight Package',
-        'home': 'Home',
+        home: 'Home',
         'indent-left': 'Indent Left',
         'indent-right': 'Indent Right',
         'info-large': 'Info Large',
         'info-sign': 'Info Sign',
-        'ingest': 'Ingest',
-        'instagram': 'Instagram',
-        'italic': 'Italic',
+        ingest: 'Ingest',
+        instagram: 'Instagram',
+        italic: 'Italic',
         'kanban-view': 'Kanban View',
-        'kill': 'Kill',
-        'link': 'Link',
+        kill: 'Kill',
+        link: 'Link',
         'linked-in': 'LinkedIn',
         'linked-in-circle': 'LinkedIn Circle',
         'list-alt': 'List Alternate',
         'list-menu': 'List Menu',
         'list-plus': 'List Plus',
         'list-view': 'List View',
-        'lock': 'Lock',
+        lock: 'Lock',
         'map-marker': 'Map Marker',
         'minus-sign': 'Minus Sign',
         'minus-small': 'Minus Small',
-        'mobile': 'Mobile',
-        'move': 'Move',
+        mobile: 'Mobile',
+        move: 'Move',
         'multi-star': 'Multi Start',
-        'multiedit': 'Multi Edit',
+        multiedit: 'Multi Edit',
         'new-doc': 'New Document',
-        'ok': 'Okay',
+        ok: 'Okay',
         'ordered-list': 'Ordered List',
         'package-create': 'Package Create',
         'package-plus': 'Package Plus',
-        'paragraph': 'Paragraph',
-        'paste': 'Paste',
-        'pause': 'Pause',
-        'paywall': 'Paywall',
-        'pencil': 'Pencil',
-        'phone': 'Phone',
-        'photo': 'Photo',
-        'pick': 'Pick',
-        'picture': 'Picture',
-        'pin': 'Pin',
-        'play': 'Play',
+        paragraph: 'Paragraph',
+        paste: 'Paste',
+        pause: 'Pause',
+        paywall: 'Paywall',
+        pencil: 'Pencil',
+        phone: 'Phone',
+        photo: 'Photo',
+        pick: 'Pick',
+        picture: 'Picture',
+        pin: 'Pin',
+        play: 'Play',
         'plus-large': 'Plus Large',
         'plus-sign': 'Plus Sign',
         'plus-small': 'Plus Small',
-        'post': 'Post',
-        'preformatted': 'Preformatted',
+        post: 'Post',
+        preformatted: 'Preformatted',
         'preview-mode': 'Preview Mode',
-        'print': 'Print',
+        print: 'Print',
         'question-sign': 'Question Sign',
-        'quote': 'Quote',
-        'random': 'Random',
-        'recurring': 'Recurring',
-        'redo': 'Redo',
-        'refresh': 'Refresh',
+        quote: 'Quote',
+        random: 'Random',
+        recurring: 'Recurring',
+        redo: 'Redo',
+        refresh: 'Refresh',
         'remove-sign': 'Remove Sign',
-        'repeat': 'Repeat',
-        'retweet': 'Retweet',
-        'revert': 'Revert',
+        repeat: 'Repeat',
+        retweet: 'Retweet',
+        revert: 'Revert',
         'rotate-left': 'Rotate Left',
         'rotate-right': 'Rotate Right',
-        'search': 'Search',
-        'settings': 'Settings',
+        search: 'Search',
+        settings: 'Settings',
         'share-alt': 'Share Alternate',
-        'signal': 'Signal',
-        'skip_next': 'Skip Next',
-        'skip_previous': 'Skip Previous',
-        'slideshow': 'Slideshow',
-        'star': 'Star',
+        signal: 'Signal',
+        skip_next: 'Skip Next',
+        skip_previous: 'Skip Previous',
+        slideshow: 'Slideshow',
+        star: 'Star',
         'star-empty': 'Star Empty',
-        'stop': 'Stop',
-        'stream': 'Stream',
-        'strikethrough': 'Strikethrough',
-        'subscript': 'Subscript',
-        'suggestion': 'Suggestion',
-        'superscript': 'Superscript',
-        'switches': 'Switches',
-        'table': 'Table',
+        stop: 'Stop',
+        stream: 'Stream',
+        strikethrough: 'Strikethrough',
+        subscript: 'Subscript',
+        suggestion: 'Suggestion',
+        superscript: 'Superscript',
+        switches: 'Switches',
+        table: 'Table',
         'takes-package': 'Takes Package',
-        'tasks': 'Tasks',
-        'text': 'Text',
+        tasks: 'Tasks',
+        text: 'Text',
         'text-format': 'Text Format',
-        'th': 'Table Header',
+        th: 'Table Header',
         'th-large': 'Table Header Large',
         'th-list': 'Table Header List',
-        'time': 'Time',
+        time: 'Time',
         'to-lowercase': 'To Lowercase',
         'to-uppercase': 'To Uppercase',
-        'trash': 'Trash',
-        'twitter': 'Twitter',
+        trash: 'Trash',
+        twitter: 'Twitter',
         'twitter-circle': 'Twitter Circle',
-        'underline': 'Underline',
-        'undo': 'Undo',
-        'unlocked': 'Unlocked',
+        underline: 'Underline',
+        undo: 'Undo',
+        unlocked: 'Unlocked',
         'unordered-list': 'Unordered List',
-        'unspike': 'Unspike',
-        'upload': 'Upload',
-        'user': 'User',
-        'video': 'Video',
+        unspike: 'Unspike',
+        upload: 'Upload',
+        user: 'User',
+        video: 'Video',
         'warning-sign': 'Warning Sign',
         'zoom-in': 'Zoom In',
         'zoom-out': 'Zoom Out',
     };
 
-    return Object.keys(translatedIconNameMap).sort().map((icon) => ({
-        value: icon as keyof typeof translatedIconNameMap,
-        label: translateFunction(translatedIconNameMap[icon as keyof typeof translatedIconNameMap]),
-    }));
+    return Object.keys(translatedIconNameMap)
+        .sort()
+        .map((icon) => ({
+            value: icon as keyof typeof translatedIconNameMap,
+            label: translateFunction(translatedIconNameMap[icon as keyof typeof translatedIconNameMap]),
+        }));
 };