superdesk-ui-framework 4.0.46 → 4.0.48

package/app-typescript/components/DurationInput.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import moment from 'moment';
-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';
 
 interface IProps extends IInputWrapper {
@@ -52,8 +52,8 @@ export class DurationInput extends React.PureComponent<IProps, IState> {
                 : Math.floor((parametar2 || 0) / 60) + Math.floor((parametar3 || 0) / 3600);
         } else if (state === 'minutes') {
             value = parametar1
-                ? (parametar1 % 60) + Math.floor((parametar2 || 0) % 3600 / 60)
-                : Math.floor((parametar2 || 0) % 3600 / 60);
+                ? (parametar1 % 60) + Math.floor(((parametar2 || 0) % 3600) / 60)
+                : Math.floor(((parametar2 || 0) % 3600) / 60);
         } else {
             value = parametar1 ? parametar1 % 60 : 0;
         }
@@ -61,7 +61,7 @@ export class DurationInput extends React.PureComponent<IProps, IState> {
     }
 
     componentDidUpdate(prevProps: any, prevState: IState) {
-        if (!this.hourRef.current || !this.minuteRef.current || !this.secondRef.current ) {
+        if (!this.hourRef.current || !this.minuteRef.current || !this.secondRef.current) {
             return;
         }
 
@@ -85,9 +85,10 @@ export class DurationInput extends React.PureComponent<IProps, IState> {
             }
             if (Number(this.minuteRef.current.value) < 0) {
                 this.setState({
-                    hours: parseInt(`${this.zeroPad(Number(this.state.hours))}`, 10) > 0
-                    ? this.zeroPad(Number(this.state.hours) - 1)
-                    : this.zeroPad(Number(this.state.hours)),
+                    hours:
+                        parseInt(`${this.zeroPad(Number(this.state.hours))}`, 10) > 0
+                            ? this.zeroPad(Number(this.state.hours) - 1)
+                            : this.zeroPad(Number(this.state.hours)),
                     minutes: 59,
                 });
                 this.setState({blink: 'hour'});
@@ -119,25 +120,30 @@ export class DurationInput extends React.PureComponent<IProps, IState> {
             }
         }
 
-        if (this.hourRef.current.value.length === 2
-            && this.minuteRef.current.value.length === 2
-            && this.secondRef.current.value.length === 2) {
-                if ((this.props.hours !== prevProps.hours)
-                || (this.props.minutes !== prevProps.minutes)
-                || (this.props.seconds !== prevProps.seconds)) {
-                    this.setState({
-                        hours: this.stateUpdate('hours', this.props.hours, this.props.minutes, this.props.seconds),
-                        minutes: this.stateUpdate('minutes', this.props.minutes, this.props.seconds),
-                        seconds: this.stateUpdate('seconds', this.props.seconds),
-                    });
-                }
+        if (
+            this.hourRef.current.value.length === 2 &&
+            this.minuteRef.current.value.length === 2 &&
+            this.secondRef.current.value.length === 2
+        ) {
+            if (
+                this.props.hours !== prevProps.hours ||
+                this.props.minutes !== prevProps.minutes ||
+                this.props.seconds !== prevProps.seconds
+            ) {
+                this.setState({
+                    hours: this.stateUpdate('hours', this.props.hours, this.props.minutes, this.props.seconds),
+                    minutes: this.stateUpdate('minutes', this.props.minutes, this.props.seconds),
+                    seconds: this.stateUpdate('seconds', this.props.seconds),
+                });
+            }
         }
     }
 
     valueUpdate() {
         if (this.props.onChange) {
-            this.props.onChange(moment.duration(`${this.state.hours}:${this.state.minutes}:${this.state.seconds}`)
-            .asSeconds());
+            this.props.onChange(
+                moment.duration(`${this.state.hours}:${this.state.minutes}:${this.state.seconds}`).asSeconds(),
+            );
         }
     }
 
@@ -205,17 +211,15 @@ export class DurationInput extends React.PureComponent<IProps, IState> {
         let stateClone: IState = {};
         if (event.key === 'ArrowUp') {
             if (event.target.id === 'hours') {
-                stateClone[state] = this.state[state] < 99
-                ? this.zeroPad(Number(this.state[state]) + 1)
-                : this.zeroPad(99);
+                stateClone[state] =
+                    this.state[state] < 99 ? this.zeroPad(Number(this.state[state]) + 1) : this.zeroPad(99);
             } else {
                 stateClone[state] = this.zeroPad(Number(this.state[state]) + 1);
             }
         } else if (event.key === 'ArrowDown') {
             if (event.target.id === 'hours') {
-                stateClone[state] = this.state[state] > 0
-                    ? this.zeroPad(Number(this.state[state]) - 1)
-                    : this.zeroPad(0);
+                stateClone[state] =
+                    this.state[state] > 0 ? this.zeroPad(Number(this.state[state]) - 1) : this.zeroPad(0);
             } else {
                 stateClone[state] = this.zeroPad(Number(this.state[state]) - 1);
             }
@@ -262,11 +266,11 @@ export class DurationInput extends React.PureComponent<IProps, IState> {
 
     handleFocusOnKeyUp(event: React.KeyboardEvent<HTMLInputElement>, ref: HTMLInputElement | null) {
         if (
-            event.key !== 'ArrowRight'
-            && event.key !== 'ArrowLeft'
-            && event.key !== 'ArrowUp'
-            && event.key !== 'ArrowDown'
-            && event.key !== 'Backspace'
+            event.key !== 'ArrowRight' &&
+            event.key !== 'ArrowLeft' &&
+            event.key !== 'ArrowUp' &&
+            event.key !== 'ArrowDown' &&
+            event.key !== 'Backspace'
         ) {
             if ((event.keyCode > 46 && event.keyCode < 58) || (event.keyCode > 95 && event.keyCode < 106)) {
                 const target = event.target as HTMLInputElement;
@@ -283,18 +287,18 @@ export class DurationInput extends React.PureComponent<IProps, IState> {
     render() {
         if (this.props.preview) {
             return (
-                <div className='sd-input__duration-input-preview'>
+                <div className="sd-input__duration-input-preview">
                     <div>
-                        <span className='duration-input-preview'>{this.state.hours}</span>
-                        <span className='sd-input__suffix'>h</span>
+                        <span className="duration-input-preview">{this.state.hours}</span>
+                        <span className="sd-input__suffix">h</span>
                     </div>
                     <div>
-                        <span className='duration-input-preview'>{this.state.minutes}</span>
-                        <span className='sd-input__suffix'>m</span>
+                        <span className="duration-input-preview">{this.state.minutes}</span>
+                        <span className="sd-input__suffix">m</span>
                     </div>
                     <div>
-                        <span className='duration-input-preview'>{this.state.seconds}</span>
-                        <span className='sd-input__suffix'>s</span>
+                        <span className="duration-input-preview">{this.state.seconds}</span>
+                        <span className="sd-input__suffix">s</span>
                     </div>
                 </div>
             );
@@ -317,8 +321,8 @@ export class DurationInput extends React.PureComponent<IProps, IState> {
                 <div className={'sd-input__duration-input'}>
                     <input
                         className={`duration-input ${this.state.blink === 'hour' ? 'blink_me' : ''}`}
-                        type='text'
-                        id='hours'
+                        type="text"
+                        id="hours"
                         autoComplete="off"
                         max={99}
                         min={0}
@@ -327,7 +331,9 @@ export class DurationInput extends React.PureComponent<IProps, IState> {
                         disabled={this.props.disabled}
                         onKeyDown={(event) => this.handleKeyDown(event)}
                         onKeyUp={(event) => this.handleFocusOnKeyUp(event, this.minuteRef.current)}
-                        onChange={(event) => { this.handleChange(event, 'hours'); }}
+                        onChange={(event) => {
+                            this.handleChange(event, 'hours');
+                        }}
                         onBlur={(event) => this.setState({hours: this.zeroPad(event.target.value)})}
                         onKeyPress={(event) => {
                             if (!/[0-9]/.test(event.key)) {
@@ -335,19 +341,21 @@ export class DurationInput extends React.PureComponent<IProps, IState> {
                             }
                         }}
                     />
-                    <span className='sd-input__suffix'>h</span>
+                    <span className="sd-input__suffix">h</span>
 
                     <input
                         className={`duration-input ${this.state.blink === 'minute' ? 'blink_me' : ''}`}
-                        type='text'
-                        id='minutes'
+                        type="text"
+                        id="minutes"
                         autoComplete="off"
                         ref={this.minuteRef}
                         value={this.state.minutes}
                         disabled={this.props.disabled}
                         onKeyDown={(event) => this.handleKeyDown(event)}
                         onKeyUp={(event) => this.handleFocusOnKeyUp(event, this.secondRef.current)}
-                        onChange={(event) => { this.handleChange(event, 'minutes'); }}
+                        onChange={(event) => {
+                            this.handleChange(event, 'minutes');
+                        }}
                         onBlur={(event) => this.setState({minutes: this.zeroPad(event.target.value)})}
                         onKeyPress={(event) => {
                             if (!/[0-9]/.test(event.key)) {
@@ -355,19 +363,21 @@ export class DurationInput extends React.PureComponent<IProps, IState> {
                             }
                         }}
                     />
-                    <span className='sd-input__suffix'>m</span>
+                    <span className="sd-input__suffix">m</span>
 
                     <input
-                        className='duration-input'
-                        type='text'
-                        id='seconds'
+                        className="duration-input"
+                        type="text"
+                        id="seconds"
                         autoComplete="off"
                         ref={this.secondRef}
                         value={this.state.seconds}
                         disabled={this.props.disabled}
                         onKeyDown={(event) => this.handleKeyDown(event)}
                         onKeyUp={(event) => this.handleFocusOnKeyUp(event, this.hourRef.current)}
-                        onChange={(event) => { this.handleChange(event, 'seconds'); }}
+                        onChange={(event) => {
+                            this.handleChange(event, 'seconds');
+                        }}
                         onBlur={(event) => this.setState({seconds: this.zeroPad(event.target.value)})}
                         onKeyPress={(event) => {
                             if (!/[0-9]/.test(event.key)) {
@@ -375,14 +385,14 @@ export class DurationInput extends React.PureComponent<IProps, IState> {
                             }
                         }}
                     />
-                    <span className='sd-input__suffix'>s</span>
+                    <span className="sd-input__suffix">s</span>
                 </div>
             </InputWrapper>
         );
     }
 }
 
-export function getDurationString(seconds: number,  minSections: 1 | 2 | 3 = 1) {
+export function getDurationString(seconds: number, minSections: 1 | 2 | 3 = 1) {
     function zeroPad(value: number | string) {
         if (value.toString().length === 1 || value === 0) {
             return `0${value}`;

package/app-typescript/components/Editor/EditorButton.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 {
@@ -25,7 +25,8 @@ export class EditorButton extends React.PureComponent<IProps> {
                     tabIndex={0}
                     onClick={this.props.onClick}
                     className={classes}
-                    aria-label={this.props.ariaValue}>
+                    aria-label={this.props.ariaValue}
+                >
                     <Icon name={this.props.icon} ariaHidden={true} />
                 </button>
             </Tooltip>

package/app-typescript/components/EmptyState.tsx

@@ -17,28 +17,24 @@ export class EmptyState extends React.PureComponent<IProps> {
         });
 
         let image = require(
-            `../../app/img/empty_states/empty-state--${
-                this.props.size ? this.props.size : 'small'
-            }-${
+            `../../app/img/empty_states/empty-state--${this.props.size ? this.props.size : 'small'}-${
                 this.props.illustration ? this.props.illustration : '1'
             }.svg`,
         );
 
         return (
-            <div className={
-                    'content-state--empty-container'
-                    + (this.props.absolutePositioned ? ' content-state__empty-container--absolute' : '')}
-                >
-                <div className='content-state__empty-info'>
+            <div
+                className={
+                    'content-state--empty-container' +
+                    (this.props.absolutePositioned ? ' content-state__empty-container--absolute' : '')
+                }
+            >
+                <div className="content-state__empty-info">
                     <figure className={classes}>
                         <img src={image} alt={this.props.illustration} />
                     </figure>
-                    <h3 className='content-state__heading'>
-                        {this.props.title}
-                    </h3>
-                    <p className='content-state__description'>
-                        {this.props.description}
-                    </p>
+                    <h3 className="content-state__heading">{this.props.title}</h3>
+                    <p className="content-state__description">{this.props.description}</p>
                 </div>
             </div>
         );

package/app-typescript/components/Form/FormGroup.tsx

@@ -12,22 +12,15 @@ interface IProps {
 
 export class FormGroup extends React.PureComponent<IProps> {
     render() {
-        const classes = classNames(
-            'form__group',
-            {
-                'form__group--rows': this.props.rows,
-                [`form__group--vertical`]: this.props.orientation === 'vertical',
-                [`form__group--default`]: this.props.spaces === undefined,
-                [`form__group--${this.props.spaces}`]: this.props.spaces,
-                [`form__group--mb-${this.props.marginBottom}`]: this.props.marginBottom,
-                'form__group--inline-label': this.props.inlineLabel,
-            },
-        );
+        const classes = classNames('form__group', {
+            'form__group--rows': this.props.rows,
+            [`form__group--vertical`]: this.props.orientation === 'vertical',
+            [`form__group--default`]: this.props.spaces === undefined,
+            [`form__group--${this.props.spaces}`]: this.props.spaces,
+            [`form__group--mb-${this.props.marginBottom}`]: this.props.marginBottom,
+            'form__group--inline-label': this.props.inlineLabel,
+        });
 
-        return (
-            <div className={classes}>
-                {this.props.children}
-            </div>
-        );
+        return <div className={classes}>{this.props.children}</div>;
     }
 }

package/app-typescript/components/Form/FormItem.tsx

@@ -11,10 +11,6 @@ export class FormItem extends React.PureComponent<IProps> {
         let classes = classNames('form__item', {
             'form__item--auto-width': this.props.autoWidth,
         });
-        return (
-            <div className={classes}>
-                {this.props.children}
-            </div>
-        );
+        return <div className={classes}>{this.props.children}</div>;
     }
 }

package/app-typescript/components/Form/FormLabel.tsx

@@ -18,7 +18,6 @@ export class FormLabel extends React.PureComponent<IProps> {
             'form-label--required': this.props.required,
             'form-label--invalid': this.props.invalid,
             [`form-label--${this.props.state}`]: this.props.state !== 'default' && this.props.state !== undefined,
-
         });
         return (
             <label htmlFor={this.props.forId} className={classes}>

package/app-typescript/components/Form/FormRow.tsx

@@ -16,25 +16,18 @@ interface IProps {
 
 export class FormRow extends React.PureComponent<IProps> {
     render() {
-        const classes = classNames(
-            'form__row',
-            {
-                'form__row--flex': this.props.flex,
-                'form__row--no-padding': this.props.noPadding,
-                'form__row--small-padding': this.props.smallPadding,
-                'form__row--s-padding': this.props.sPadding,
-                'form__row--l-padding': this.props.lPadding,
-                'form__row--xl-padding': this.props.xlPadding,
-                'form__row--innder': this.props.inner,
-                'form__row--bordered': this.props.bordered,
-                'form__row--flex-NEW': this.props.flexNew,
-            },
-        );
+        const classes = classNames('form__row', {
+            'form__row--flex': this.props.flex,
+            'form__row--no-padding': this.props.noPadding,
+            'form__row--small-padding': this.props.smallPadding,
+            'form__row--s-padding': this.props.sPadding,
+            'form__row--l-padding': this.props.lPadding,
+            'form__row--xl-padding': this.props.xlPadding,
+            'form__row--innder': this.props.inner,
+            'form__row--bordered': this.props.bordered,
+            'form__row--flex-NEW': this.props.flexNew,
+        });
 
-        return (
-            <div className={classes}>
-                {this.props.children}
-            </div>
-        );
+        return <div className={classes}>{this.props.children}</div>;
     }
 }

package/app-typescript/components/Form/FormRowNew.tsx

@@ -12,30 +12,23 @@ interface IProps {
 export class FormRowNew extends React.PureComponent<IProps> {
     render() {
         const classes = classNames('form__group-new', {
-                [`form__group-new--${this.props.spaces}`]: this.props.spaces,
-                [`form__group-new--mb-${this.props.marginBottom}`]: this.props.marginBottom,
-                'form__group-new--inline-labels': this.props.inlineLabels,
-                'form__group-new--has_row-label': this.props.rowLabel,
-            },
-        );
+            [`form__group-new--${this.props.spaces}`]: this.props.spaces,
+            [`form__group-new--mb-${this.props.marginBottom}`]: this.props.marginBottom,
+            'form__group-new--inline-labels': this.props.inlineLabels,
+            'form__group-new--has_row-label': this.props.rowLabel,
+        });
 
         if (this.props.rowLabel) {
             return (
-                <div className='form__group-new__wrapper'>
-                    <label className='form__group-new__label' htmlFor="form__group-new__label">
+                <div className="form__group-new__wrapper">
+                    <label className="form__group-new__label" htmlFor="form__group-new__label">
                         {this.props.rowLabel}
                     </label>
-                    <div className={classes}>
-                        {this.props.children}
-                    </div>
+                    <div className={classes}>{this.props.children}</div>
                 </div>
             );
         } else {
-            return (
-                <div className={classes}>
-                    {this.props.children}
-                </div>
-            );
+            return <div className={classes}>{this.props.children}</div>;
         }
     }
 }

package/app-typescript/components/Form/FormText.tsx

@@ -6,10 +6,6 @@ interface IProps {
 
 export class FormText extends React.PureComponent<IProps> {
     render() {
-        return (
-            <div className="form__text-block">
-                {this.props.children}
-            </div>
-        );
+        return <div className="form__text-block">{this.props.children}</div>;
     }
 }

package/app-typescript/components/Form/InputBase.tsx

@@ -56,7 +56,7 @@ export class InputBase extends React.Component<IProps, IState> {
     // htmlId = nextId();
 
     handleChange(event: React.ChangeEvent<HTMLInputElement>) {
-        this.setState({ value: event.target.value });
+        this.setState({value: event.target.value});
         if (this.props.type === 'number') {
             this.props.onChange(Number(event.target.value));
         } else {
@@ -78,18 +78,19 @@ export class InputBase extends React.Component<IProps, IState> {
             'sd-input__input--disabled': this.props.disabled,
             'sd-input__input--medium': this.props.size === undefined,
             [`sd-input__input--${this.props.size}`]: this.props.size || this.props.size !== undefined,
-
         });
         return (
-            <input className={classes}
-            type={this.props.type ?? 'text'}
-            id={this.props.htmlId}
-            value={this.state.value}
-            aria-describedby={this.props.htmlId + 'label'}
-            tabIndex={this.props.tabIndex}
-            onChange={this.handleChange}
-            placeholder={this.props.placeholder}
-            disabled={this.props.disabled} />
+            <input
+                className={classes}
+                type={this.props.type ?? 'text'}
+                id={this.props.htmlId}
+                value={this.state.value}
+                aria-describedby={this.props.htmlId + 'label'}
+                tabIndex={this.props.tabIndex}
+                onChange={this.handleChange}
+                placeholder={this.props.placeholder}
+                disabled={this.props.disabled}
+            />
         );
     }
 }

package/app-typescript/components/Form/InputNew.tsx

@@ -1,10 +1,7 @@
 import * as React from 'react';
-import nextId from "react-id-generator";
+import nextId from 'react-id-generator';
 
-import {
-    InputBase,
-    InputWrapper
-} from '.';
+import {InputBase, InputWrapper} from '.';
 
 interface IPropsBase {
     label: string;
@@ -61,7 +58,7 @@ export class InputNew extends React.PureComponent<IProps, IState> {
 
     componentDidUpdate(prevProps: any) {
         if (prevProps.value !== this.props.value) {
-            this.setState({ value: this.props.value });
+            this.setState({value: this.props.value});
         }
     }
 
@@ -85,14 +82,15 @@ export class InputNew extends React.PureComponent<IProps, IState> {
                 htmlId={this.htmlId}
                 boxedStyle={this.props.boxedStyle}
                 boxedLable={this.props.boxedLable}
-                tabindex={this.props.tabindex}>
+                tabindex={this.props.tabindex}
+            >
                 <InputBase
                     type="text"
                     onChange={(value: string) => {
-                        this.setState({ value: value });
-                        this.setState({ invalid: this.props.maxLength
-                            ? (value as string).length > this.props.maxLength
-                            : false });
+                        this.setState({value: value});
+                        this.setState({
+                            invalid: this.props.maxLength ? (value as string).length > this.props.maxLength : false,
+                        });
                         this.props.onChange(value as string);
                     }}
                     disabled={this.props.disabled}
@@ -100,7 +98,8 @@ export class InputNew extends React.PureComponent<IProps, IState> {
                     value={this.state.value}
                     aria-describedby={this.htmlId + 'label'}
                     tabIndex={this.props.tabindex}
-                    placeholder={this.props.placeholder} />
+                    placeholder={this.props.placeholder}
+                />
             </InputWrapper>
         );
     }

package/app-typescript/components/Form/InputWrapper.tsx

@@ -97,24 +97,15 @@ export class InputWrapper extends React.Component<IProps, IState> {
                 >
                     {this.props.label}
                 </label>
-                <div className="sd-input__input-container">
-                    {this.props.children}
-                </div>
-                    {
-                        this.props.maxLength
-                            && <div className='sd-input__char-count'>
-                                {this.props.value?.toString().length} / {this.props.maxLength}
-                            </div>
-                    }
-                <div className='sd-input__message-box'>
-                    {
-                        this.props.info && !this.props.invalid
-                            && <div className='sd-input__hint'>{this.props.info}</div>
-                    }
-                    {
-                        this.props.invalid
-                            && <div className='sd-input__message'>{this.props.error}</div>
-                    }
+                <div className="sd-input__input-container">{this.props.children}</div>
+                {this.props.maxLength && (
+                    <div className="sd-input__char-count">
+                        {this.props.value?.toString().length} / {this.props.maxLength}
+                    </div>
+                )}
+                <div className="sd-input__message-box">
+                    {this.props.info && !this.props.invalid && <div className="sd-input__hint">{this.props.info}</div>}
+                    {this.props.invalid && <div className="sd-input__message">{this.props.error}</div>}
                 </div>
             </div>
         );

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

@@ -1,9 +1,9 @@
-export { FormRow } from './FormRow';
-export { FormGroup } from './FormGroup';
-export { FormItem } from './FormItem';
-export { FormText } from './FormText';
-export { FormLabel } from './FormLabel';
-export { InputWrapper } from './InputWrapper';
-export { InputBase } from './InputBase';
-export { InputNew } from './InputNew';
-export { FormRowNew } from './FormRowNew';
+export {FormRow} from './FormRow';
+export {FormGroup} from './FormGroup';
+export {FormItem} from './FormItem';
+export {FormText} from './FormText';
+export {FormLabel} from './FormLabel';
+export {InputWrapper} from './InputWrapper';
+export {InputBase} from './InputBase';
+export {InputNew} from './InputNew';
+export {FormRowNew} from './FormRowNew';

package/app-typescript/components/FormLabel.tsx

@@ -12,7 +12,6 @@ export class FormLabel extends React.PureComponent<IProps> {
     render() {
         let classes = classNames('form-label form-label--block', {
             'form-label--light': this.props.style === 'light',
-
         });
 
         const style: React.CSSProperties = {};
@@ -26,10 +25,7 @@ export class FormLabel extends React.PureComponent<IProps> {
         }
 
         return (
-            <label
-                className={classes}
-                style={style}
-            >
+            <label className={classes} style={style}>
                 {this.props.text}
             </label>
         );