superdesk-ui-framework 4.0.46 → 4.0.48

package/app-typescript/components/TimePickerV2.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { InputWrapper } from './Form';
+import {InputWrapper} from './Form';
 import {IInputWrapper} from './Form/InputWrapper';
 import {padStart, range} from 'lodash';
 
@@ -28,7 +28,7 @@ export class TimePickerV2 extends React.PureComponent<IProps> {
         this.getOptionsForTimeUnit = this.getOptionsForTimeUnit.bind(this);
         this.padValue = this.padValue.bind(this);
 
-        const hour = new Date().toLocaleTimeString([], { hour: 'numeric' });
+        const hour = new Date().toLocaleTimeString([], {hour: 'numeric'});
         this.is12HourFormat = hour.includes('AM') || hour.includes('PM');
     }
 
@@ -115,15 +115,15 @@ export class TimePickerV2 extends React.PureComponent<IProps> {
     }
 
     padValue(value: number) {
-        return padStart((value).toString(), 2, '0');
+        return padStart(value.toString(), 2, '0');
     }
 
     updatedTimeUnit() {
         const timeUnitValuesArray = this.props.value.split(':');
 
         /**
-        * updating the initial value from props
-        */
+         * updating the initial value from props
+         */
         if (this.is12HourFormat) {
             if (parseInt(timeUnitValuesArray[0], 10) > 12) {
                 timeUnitValuesArray[0] = this.padValue(parseInt(timeUnitValuesArray[0], 10) - 12);
@@ -149,10 +149,10 @@ export class TimePickerV2 extends React.PureComponent<IProps> {
                 tabindex={this.props.tabindex}
                 inputWrapper={this.props.inputWrapper}
             >
-                <div className='sd__input__time-picker-v2' data-test-id={this.props['data-test-id']}>
-                    <div className='input-wrapper__time-picker-v2'>
+                <div className="sd__input__time-picker-v2" data-test-id={this.props['data-test-id']}>
+                    <div className="input-wrapper__time-picker-v2">
                         <select
-                            className='sd-input__select'
+                            className="sd-input__select"
                             value={timeUnitValuesArray[0]}
                             onChange={({target}) => {
                                 this.handleTimeChange(0, target.value);
@@ -162,11 +162,11 @@ export class TimePickerV2 extends React.PureComponent<IProps> {
                                 <option value={hour} label={hour} key={hour} />
                             ))}
                         </select>
-                        <span className='time-picker-v2-suffix'>:</span>
+                        <span className="time-picker-v2-suffix">:</span>
                     </div>
-                    <div className='input-wrapper__time-picker-v2'>
+                    <div className="input-wrapper__time-picker-v2">
                         <select
-                            className='sd-input__select'
+                            className="sd-input__select"
                             value={timeUnitValuesArray[1]}
                             onChange={({target}) => {
                                 this.handleTimeChange(1, target.value);
@@ -176,12 +176,12 @@ export class TimePickerV2 extends React.PureComponent<IProps> {
                                 <option value={minute} label={minute} key={minute} />
                             ))}
                         </select>
-                        {this.props.allowSeconds && (<span className='time-picker-v2-suffix'>:</span>)}
+                        {this.props.allowSeconds && <span className="time-picker-v2-suffix">:</span>}
                     </div>
                     {this.props.allowSeconds && (
-                        <div className='input-wrapper__time-picker-v2'>
+                        <div className="input-wrapper__time-picker-v2">
                             <select
-                                className='sd-input__select'
+                                className="sd-input__select"
                                 value={timeUnitValuesArray[2]}
                                 onChange={({target}) => {
                                     this.handleTimeChange(2, target.value);
@@ -194,11 +194,11 @@ export class TimePickerV2 extends React.PureComponent<IProps> {
                         </div>
                     )}
                     {this.is12HourFormat && (
-                        <div className='input-wrapper__time-picker-v2'>
-                            <span className='time-picker-v2-suffix' />
+                        <div className="input-wrapper__time-picker-v2">
+                            <span className="time-picker-v2-suffix" />
                             <select
-                                className='sd-input__select'
-                                value={(parseInt(this.props.value.split(':')[0], 10) >= 12) ? 'PM' : 'AM'}
+                                className="sd-input__select"
+                                value={parseInt(this.props.value.split(':')[0], 10) >= 12 ? 'PM' : 'AM'}
                                 onChange={({target}) => {
                                     let splitValue = this.props.value.split(':');
 
@@ -211,8 +211,8 @@ export class TimePickerV2 extends React.PureComponent<IProps> {
                                     this.props.onChange(splitValue.join(':'));
                                 }}
                             >
-                                <option value='AM' label='AM' />
-                                <option value='PM' label='PM' />
+                                <option value="AM" label="AM" />
+                                <option value="PM" label="PM" />
                             </select>
                         </div>
                     )}

package/app-typescript/components/Toast.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import * as ReactDOM from "react-dom";
+import * as ReactDOM from 'react-dom';
 import {MessageProp, IMessageOptions, Position} from './ToastMessage';
 import ToastWrapper from './ToastWrapper';
 
-const TOAST_ID = "react-toast";
+const TOAST_ID = 'react-toast';
 
 interface IMessageId {
     id: string;
@@ -28,17 +28,21 @@ class Toasted {
         if (existingElement) {
             element = existingElement;
         } else {
-            const el = document.createElement("div");
+            const el = document.createElement('div');
             el.id = TOAST_ID;
-            el.className = "sd-toast__container sd-toast__container--top";
+            el.className = 'sd-toast__container sd-toast__container--top';
             document.body.appendChild(el);
             element = el;
         }
 
         ReactDOM.render(
-            <ToastWrapper ref={(ref) => {
-                this.componentRef = ref;
-            }} />, element);
+            <ToastWrapper
+                ref={(ref) => {
+                    this.componentRef = ref;
+                }}
+            />,
+            element,
+        );
     }
 
     notify(message: MessageProp, options: Partial<IMessageOptions>): IMessageId | null {

package/app-typescript/components/ToastMessage.tsx

@@ -2,9 +2,7 @@ import * as React from 'react';
 import ToastText from './ToastText';
 import classNames from 'classnames';
 
-export type MessageProp =
-    | React.ReactNode
-    | string;
+export type MessageProp = React.ReactNode | string;
 
 export type Position = 'top' | 'bottom' | 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
 
@@ -24,22 +22,13 @@ interface IProps extends IMessageOptions {
     closeElement(id: string, position: Position): void;
 }
 
-export const ToastMessage = ({
-    id,
-    message,
-    type,
-    icon,
-    size,
-    duration,
-    position,
-    closeElement,
-}: IProps) => {
+export const ToastMessage = ({id, message, type, icon, size, duration, position, closeElement}: IProps) => {
     const [show, setShow] = React.useState(false);
     const [enter, setEnter] = React.useState(false);
     let timer: number;
     React.useEffect(() => setShow(true), []);
 
-    if (typeof duration === "number") {
+    if (typeof duration === 'number') {
         React.useEffect(() => {
             timer = window.setTimeout(() => {
                 close(id, position);

package/app-typescript/components/ToastText.tsx

@@ -1,42 +1,40 @@
 import * as React from 'react';
-import { Icon } from './Icon';
+import {Icon} from './Icon';
 
 interface IProps {
-  id?: string;
-  title?: string | React.ReactNode;
-  icon?: string;
-  onClose: () => void;
+    id?: string;
+    title?: string | React.ReactNode;
+    icon?: string;
+    onClose: () => void;
 }
 
-const ToastText = ({ id, title, icon, onClose}: IProps) => {
-  const ref = React.useRef(null);
-  return (
-    <React.Fragment>
-      {icon ?
-        <div className='sd-toast__icon'>
-          <Icon name={icon} />
-        </div> : null}
-      {typeof title === 'string' ?
-        (<span style={{width: '100%'}} ref={ref} id={id}>
-          <div className='sd-toast__message'>{title}</div>
-        </span>) :
-        <span style={{width: '100%', display: 'inherit'}} ref={ref} id={id}>
-          {title}
-        </span>}
-      {onClose && <Close onClose={onClose} />}
-    </React.Fragment>
-  );
+const ToastText = ({id, title, icon, onClose}: IProps) => {
+    const ref = React.useRef(null);
+    return (
+        <React.Fragment>
+            {icon ? (
+                <div className="sd-toast__icon">
+                    <Icon name={icon} />
+                </div>
+            ) : null}
+            {typeof title === 'string' ? (
+                <span style={{width: '100%'}} ref={ref} id={id}>
+                    <div className="sd-toast__message">{title}</div>
+                </span>
+            ) : (
+                <span style={{width: '100%', display: 'inherit'}} ref={ref} id={id}>
+                    {title}
+                </span>
+            )}
+            {onClose && <Close onClose={onClose} />}
+        </React.Fragment>
+    );
 };
 
-const Close = ({ onClose }: { onClose: () => void }) => (
-  <button
-    className="icn-btn sd-toast__actions"
-    type="button"
-    aria-label="Close"
-    onClick={onClose}
-  >
-    <Icon name='close-small' />
-  </button>
+const Close = ({onClose}: {onClose: () => void}) => (
+    <button className="icn-btn sd-toast__actions" type="button" aria-label="Close" onClick={onClose}>
+        <Icon name="close-small" />
+    </button>
 );
 
 export default ToastText;

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>