superdesk-ui-framework 4.0.47 → 4.0.49

package/app-typescript/components/ToastWrapper.tsx

@@ -1,92 +1,94 @@
 import * as React from 'react';
-import { ToastMessage, MessageProp, IMessageOptions } from './ToastMessage';
+import {ToastMessage, MessageProp, IMessageOptions} from './ToastMessage';
 
 type State = {
-  top: Array<IMessageOptions>;
-  bottom: Array<IMessageOptions>;
-  'top-right': Array<IMessageOptions>;
-  'top-left': Array<IMessageOptions>;
-  'bottom-right': Array<IMessageOptions>;
-  'bottom-left': Array<IMessageOptions>;
+    top: Array<IMessageOptions>;
+    bottom: Array<IMessageOptions>;
+    'top-right': Array<IMessageOptions>;
+    'top-left': Array<IMessageOptions>;
+    'bottom-right': Array<IMessageOptions>;
+    'bottom-left': Array<IMessageOptions>;
 };
 
 const firstState: State = {
-  top: [],
-  bottom: [],
-  'top-right': [],
-  'top-left': [],
-  'bottom-right': [],
-  'bottom-left': [],
+    top: [],
+    bottom: [],
+    'top-right': [],
+    'top-left': [],
+    'bottom-right': [],
+    'bottom-left': [],
 };
 
 export default class ToastWrapper extends React.PureComponent<{}, State> {
-  static idCounter = 0;
+    static idCounter = 0;
 
-  state: State = firstState;
+    state: State = firstState;
 
-  constructor(props: {}) {
-    super(props);
-    this.notify = this.notify.bind(this);
-  }
+    constructor(props: {}) {
+        super(props);
+        this.notify = this.notify.bind(this);
+    }
 
-  notify = (message: MessageProp, options: Partial<IMessageOptions>) => {
-    const toast = this.createToastState(message, options);
-    const { position } = toast;
+    notify = (message: MessageProp, options: Partial<IMessageOptions>) => {
+        const toast = this.createToastState(message, options);
+        const {position} = toast;
 
-    const isTop = position === 'top';
-    this.setState((prev) => {
-      return {
-        ...prev,
-        [position]: isTop
-          ? [toast, ...prev[position]]
-          : [...prev[position], toast],
-      };
-    });
-    return { id: toast.id, position: toast.position };
-  }
+        const isTop = position === 'top';
+        this.setState((prev) => {
+            return {
+                ...prev,
+                [position]: isTop ? [toast, ...prev[position]] : [...prev[position], toast],
+            };
+        });
+        return {id: toast.id, position: toast.position};
+    };
 
-  createToastState = (
-    message: MessageProp,
-    options: Partial<IMessageOptions>,
-  ) => {
-    const id = '' + ++ToastWrapper.idCounter;
-    const position = options.position ?? 'top';
-    return {
-      id,
-      message,
-      icon: options.icon,
-      position,
-      duration: options.duration,
-      type: options.type,
-      size: options.size,
+    createToastState = (message: MessageProp, options: Partial<IMessageOptions>) => {
+        const id = '' + ++ToastWrapper.idCounter;
+        const position = options.position ?? 'top';
+        return {
+            id,
+            message,
+            icon: options.icon,
+            position,
+            duration: options.duration,
+            type: options.type,
+            size: options.size,
+        };
     };
-  }
 
-  requestClose = (id: string, position: keyof State) => {
-    this.setState((prev) => {
-      return {
-        ...prev,
-        [position]: prev[position].filter((toast) => toast.id !== id),
-      };
-    });
-  }
+    requestClose = (id: string, position: keyof State) => {
+        this.setState((prev) => {
+            return {
+                ...prev,
+                [position]: prev[position].filter((toast) => toast.id !== id),
+            };
+        });
+    };
 
-  render() {
-    return Object.keys(this.state).map((position) => {
-      const pos = position as keyof State;
-      const toasts = this.state[pos];
-      return (
-        <div
-          key={position}
-          className={"sd-toast__container sd-toast__container--" + pos}
-        >
-          {(pos === 'top' ?
-            toasts : [...toasts].reverse()).map((toast: IMessageOptions) => {
-              return <ToastMessage position={pos} type={toast.type} icon={toast.icon} closeElement={this.requestClose}
-                duration={toast.duration} key={toast.id} id={toast.id} message={toast.message} size={toast.size} />;
-            })}
-        </div>
-      );
-    });
-  }
+    render() {
+        return Object.keys(this.state).map((position) => {
+            const pos = position as keyof State;
+            const toasts = this.state[pos];
+            return (
+                <div key={position} className={'sd-toast__container sd-toast__container--' + pos}>
+                    {(pos === 'top' ? toasts : [...toasts].reverse()).map((toast: IMessageOptions) => {
+                        return (
+                            <ToastMessage
+                                position={pos}
+                                type={toast.type}
+                                icon={toast.icon}
+                                closeElement={this.requestClose}
+                                duration={toast.duration}
+                                key={toast.id}
+                                id={toast.id}
+                                message={toast.message}
+                                size={toast.size}
+                            />
+                        );
+                    })}
+                </div>
+            );
+        });
+    }
 }

package/app-typescript/components/ToggleBox/CustomHeaderToggleBox.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import nextId from "react-id-generator";
-import {IPropsCustomHeader} from "../ToggleBox/index";
+import nextId from 'react-id-generator';
+import {IPropsCustomHeader} from '../ToggleBox/index';
 
 interface IState {
     isOpen: boolean;
@@ -30,32 +30,29 @@ export class CustomHeaderToggleBox extends React.PureComponent<IPropsCustomHeade
      */
     public isOpen = () => {
         return this.state.isOpen;
-    }
+    };
 
     public toggle = (): Promise<boolean> => {
         return new Promise((resolve, reject) => {
-            this.setState(
-                {isOpen: !this.state.isOpen, isAnimating: true},
-                () => {
-                    if (this.contentRef.current) {
-                        const handleAnimation = () => {
-                            this.props.onToggle?.(this.state.isOpen);
-                            this.handleAnimationEnd();
-                            resolve(this.state.isOpen);
-                        };
-
-                        this.contentRef.current.addEventListener("animationend", handleAnimation, {once: true});
-                    } else {
-                        reject();
-                    }
-                },
-            );
+            this.setState({isOpen: !this.state.isOpen, isAnimating: true}, () => {
+                if (this.contentRef.current) {
+                    const handleAnimation = () => {
+                        this.props.onToggle?.(this.state.isOpen);
+                        this.handleAnimationEnd();
+                        resolve(this.state.isOpen);
+                    };
+
+                    this.contentRef.current.addEventListener('animationend', handleAnimation, {once: true});
+                } else {
+                    reject();
+                }
+            });
         });
-    }
+    };
 
     componentDidUpdate(_prevProps: IPropsCustomHeader, prevState: IState) {
         if (prevState.isOpen !== this.state.isOpen) {
-            this.setState({ isAnimating: true });
+            this.setState({isAnimating: true});
 
             if (this.contentRef.current) {
                 this.contentRef.current.addEventListener('animationend', this.handleAnimationEnd);
@@ -68,43 +65,33 @@ export class CustomHeaderToggleBox extends React.PureComponent<IPropsCustomHeade
     }
 
     handleAnimationEnd = () => {
-        this.setState({ isAnimating: false });
+        this.setState({isAnimating: false});
 
         if (this.contentRef.current) {
             this.contentRef.current.removeEventListener('animationend', this.handleAnimationEnd);
         }
-    }
+    };
 
     render() {
         const classes = classNames('sd-shadow--z1 new-collapse-box', {
             'new-collapse-box--open': this.state.isOpen,
         });
-        const { isOpen } = this.state;
+        const {isOpen} = this.state;
 
         return (
-            <div
-                className={classes}
-                aria-expanded={isOpen}
-                data-test-id='toggle-box'
-            >
-                <div className='new-collapse-box__header'>
-                    <div className='new-collapse-box__header-inner'>
-                        {this.props.header}
-                    </div>
+            <div className={classes} aria-expanded={isOpen} data-test-id="toggle-box">
+                <div className="new-collapse-box__header">
+                    <div className="new-collapse-box__header-inner">{this.props.header}</div>
 
-                    <button
-                        className='new-collapse-box__divider'
-                        onClick={this.toggle}
-                        aria-controls={this.htmlId}
-                    >
-                        <span className='label label--translucent new-collapse-box__divider-label'>
+                    <button className="new-collapse-box__divider" onClick={this.toggle} aria-controls={this.htmlId}>
+                        <span className="label label--translucent new-collapse-box__divider-label">
                             {this.props.getToggleButtonLabel(isOpen)}
                         </span>
                     </button>
                 </div>
 
                 {/** render wrapper unconditionally in order not to break the animation */}
-                <div className='new-collapse-box__content'>
+                <div className="new-collapse-box__content">
                     <div
                         ref={this.contentRef}
                         id={this.htmlId}
@@ -113,11 +100,9 @@ export class CustomHeaderToggleBox extends React.PureComponent<IPropsCustomHeade
                             'toggle-box__content--animation': this.state.isAnimating,
                         })}
                     >
-                        {
-                            this.state.isOpen || this.state.wasOpened || this.props.alwaysRenderChildren === true
-                                ? this.props.children
-                                : null
-                        }
+                        {this.state.isOpen || this.state.wasOpened || this.props.alwaysRenderChildren === true
+                            ? this.props.children
+                            : null}
                     </div>
                 </div>
             </div>

package/app-typescript/components/ToggleBox/SimpleToggleBox.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import nextId from "react-id-generator";
-import {IPropsSimple} from "../ToggleBox/index";
+import nextId from 'react-id-generator';
+import {IPropsSimple} from '../ToggleBox/index';
 
 interface IState {
     isOpen: boolean;
@@ -27,35 +27,35 @@ export class SimpleToggleBox extends React.PureComponent<IPropsSimple, IState> {
     }
 
     handleKeyDown = (event: React.KeyboardEvent<HTMLAnchorElement>): void => {
-        if (event.key === "ArrowRight" && !this.state.isOpen) {
-            this.setState({ isOpen: true });
-        } else if (event.key === "ArrowLeft" && this.state.isOpen) {
-            this.setState({ isOpen: false });
-        } else if (event.key === "Enter") {
+        if (event.key === 'ArrowRight' && !this.state.isOpen) {
+            this.setState({isOpen: true});
+        } else if (event.key === 'ArrowLeft' && this.state.isOpen) {
+            this.setState({isOpen: false});
+        } else if (event.key === 'Enter') {
             this.toggle();
         }
-    }
+    };
 
     /**
      * Called via ref
      */
     public isOpen = () => {
         return this.state.isOpen;
-    }
+    };
 
     public toggle = (): void => {
-        this.setState({ isOpen: !this.state.isOpen }, () => {
+        this.setState({isOpen: !this.state.isOpen}, () => {
             if (!this.state.isOpen && this.props.onClose) {
                 this.props.onClose();
             } else if (this.props.onOpen) {
                 this.props.onOpen();
             }
         });
-    }
+    };
 
     componentDidUpdate(_prevProps: IPropsSimple, prevState: IState) {
         if (prevState.isOpen !== this.state.isOpen) {
-            this.setState({ isAnimating: true });
+            this.setState({isAnimating: true});
 
             if (this.contentRef.current) {
                 this.contentRef.current.addEventListener('animationend', this.handleAnimationEnd);
@@ -64,30 +64,32 @@ export class SimpleToggleBox extends React.PureComponent<IPropsSimple, IState> {
     }
 
     handleAnimationEnd = () => {
-        this.setState({ isAnimating: false });
+        this.setState({isAnimating: false});
 
         if (this.contentRef.current) {
             this.contentRef.current.removeEventListener('animationend', this.handleAnimationEnd);
         }
-    }
+    };
 
     render() {
-        const classes = classNames('toggle-box', {
-            'toggle-box--margin-normal': this.props.margin === undefined,
-            'toggle-box--large-title': this.props.largeTitle,
-            'toggle-box--circle': this.props.circledChevron,
-            [`toggle-box--margin-${this.props.margin}`]: this.props.margin,
-            'hidden': !this.state.isOpen,
-            'open': this.state.isOpen,
-        }, this.props.className);
+        const classes = classNames(
+            'toggle-box',
+            {
+                'toggle-box--margin-normal': this.props.margin === undefined,
+                'toggle-box--large-title': this.props.largeTitle,
+                'toggle-box--circle': this.props.circledChevron,
+                [`toggle-box--margin-${this.props.margin}`]: this.props.margin,
+                hidden: !this.state.isOpen,
+                open: this.state.isOpen,
+            },
+            this.props.className,
+        );
 
-        const { title, children, badge } = this.props;
-        const { isOpen } = this.state;
+        const {title, children, badge} = this.props;
+        const {isOpen} = this.state;
 
         return (
-            <div
-                className={classes}
-            >
+            <div className={classes}>
                 <a
                     className="toggle-box__header"
                     onClick={this.toggle}
@@ -100,12 +102,8 @@ export class SimpleToggleBox extends React.PureComponent<IPropsSimple, IState> {
                     <div className="toggle-box__chevron">
                         <i className="icon-chevron-right-thin" />
                     </div>
-                    <div className="toggle-box__label">
-                        {title}
-                    </div>
-                    <div
-                        className="toggle-box__line"
-                    />
+                    <div className="toggle-box__label">{title}</div>
+                    <div className="toggle-box__line" />
                     {badge ? badge : null}
                 </a>
                 <div className="toggle-box__content-wraper">

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

@@ -37,14 +37,10 @@ type IProps = IPropsSimple | IPropsCustomHeader;
 
 export class ToggleBox extends React.PureComponent<IProps> {
     render() {
-        if (this.props.variant === "simple") {
-            return (
-                <SimpleToggleBox ref={this.props.toggleBoxRef} {...this.props} />
-            );
+        if (this.props.variant === 'simple') {
+            return <SimpleToggleBox ref={this.props.toggleBoxRef} {...this.props} />;
         } else {
-            return (
-                <CustomHeaderToggleBox ref={this.props.toggleBoxRef} {...this.props} />
-            );
+            return <CustomHeaderToggleBox ref={this.props.toggleBoxRef} {...this.props} />;
         }
     }
 }

package/app-typescript/components/Tooltip.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import nextId from "react-id-generator";
+import nextId from 'react-id-generator';
 import tippy, {Instance, Placement} from 'tippy.js';
 import {assertNever} from '../helpers';