superdesk-ui-framework 3.0.35 → 3.0.38

package/app-typescript/components/TimePicker.tsx

@@ -1,48 +1,45 @@
 import * as React from 'react';
 import nextId from "react-id-generator";
 import { InputWrapper } from './Form';
+import {IInputWrapper} from './Form/InputWrapper';
 
-interface IProps {
+interface IProps extends IInputWrapper {
     value: string; // will output time as ISO8601 time string(e.g. 16:55) or an empty string if there's no value
     onChange(valueNext: string): void;
     allowSeconds?: boolean;
-    disabled?: boolean;
-    inlineLabel?: boolean;
-    required?: boolean;
-    fullWidth?: boolean;
-    invalid?: boolean;
-    labelHidden?: boolean;
-    tabindex?: number;
-    label?: string;
-    info?: string;
-    error?: string;
 }
 
 export class TimePicker extends React.PureComponent<IProps> {
     private htmlId = nextId();
 
     render() {
+        if (this.props.preview) {
+            return (
+                <div>
+                    <span>{this.props.value}</span>
+                </div>
+            );
+        }
+
         return (
             <InputWrapper
                 label={this.props.label}
                 error={this.props.error}
                 required={this.props.required}
                 disabled={this.props.disabled}
-                invalid={this.props.invalid}
                 info={this.props.info}
                 inlineLabel={this.props.inlineLabel}
                 labelHidden={this.props.labelHidden}
-                fullWidth={this.props.fullWidth}
                 htmlId={this.htmlId}
                 tabindex={this.props.tabindex}
             >
                 <input
+                    value={this.props.value}
+                    type="time"
+                    className="sd-input__input"
                     id={this.htmlId}
                     aria-labelledby={this.htmlId + 'label'}
-                    type="time"
                     step={this.props.allowSeconds ? 1 : undefined}
-                    className="sd-input__input"
-                    value={this.props.value}
                     required={this.props.required}
                     disabled={this.props.disabled}
                     onChange={(event) => {

package/app-typescript/components/TreeSelect.tsx

@@ -7,6 +7,8 @@ import { InputWrapper } from "./Form";
 import { createPopper, Instance } from '@popperjs/core';
 import {isEqual} from 'lodash';
 import {getTextColor} from './Label';
+import {IInputWrapper} from './Form/InputWrapper';
+import {SelectPreview} from './SelectPreview';
 
 interface IState<T> {
     value: Array<T>;
@@ -23,7 +25,7 @@ interface IState<T> {
     buttonTarget: Array<string>; // array of class names
 }
 
-interface IPropsBase<T> {
+interface IPropsBase<T> extends IInputWrapper {
     value?: Array<T>;
     selectBranchWithChildren?: boolean;
     readOnly?: boolean;
@@ -33,16 +35,6 @@ interface IPropsBase<T> {
     singleLevelSearch?: boolean;
     placeholder?: string;
     searchPlaceholder?: string;
-    invalid?: boolean;
-    inlineLabel?: boolean;
-    labelHidden?: boolean;
-    tabindex?: number;
-    fullWidth?: boolean;
-    info?: string;
-    error?: string;
-    required?: boolean;
-    label?: string;
-    disabled?: boolean;
     zIndex?: number;
     getLabel(item: T): string;
     getId(item: T): string;
@@ -109,12 +101,13 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
         this.branchButton = this.branchButton.bind(this);
         this.handleDebounce = this.handleDebounce.bind(this);
         this.toggleMenu = this.toggleMenu.bind(this);
+        this.onMouseDown = this.onMouseDown.bind(this);
+        this.onKeyDown = this.onKeyDown.bind(this);
         this.dropdownRef = React.createRef();
         this.ref = React.createRef();
         this.inputRef = React.createRef();
         this.categoryButtonRef = React.createRef();
         this.openDropdownRef = React.createRef();
-
         this.popperInstance = null;
     }
 
@@ -129,38 +122,47 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
         this.categoryButtonRef.current?.focus();
     }
 
-    componentDidMount = () => {
-        this.recursion(this.state.options);
-        document.addEventListener("mousedown", (event) => {
-            if (
-                (this.dropdownRef.current?.contains(event.target as HTMLElement) !== true)
-                && (this.openDropdownRef.current?.contains(event.target as HTMLElement) !== true)
-            ) {
-                this.setState({openDropdown: false});
+    onMouseDown = (event: MouseEvent) => {
+        if (
+            (this.dropdownRef.current?.contains(event.target as HTMLElement) !== true)
+            && (this.openDropdownRef.current?.contains(event.target as HTMLElement) !== true)
+        ) {
+            this.setState({openDropdown: false});
+        }
+    }
+
+    onKeyDown = (e: KeyboardEvent) => {
+        if (this.state.openDropdown && this.ref.current) {
+            keyboardNavigation(
+                e,
+                this.ref.current,
+                this.categoryButtonRef.current ? this.buttonFocus : this.inputFocus,
+            );
+            if (e.key === 'Backspace') {
+                this.backButton();
+                this.backButtonValue();
+
+                const {buttonTarget} = this.state;
+                const className = `${buttonTarget.pop()}-focus`;
+
+                if (className != null) {
+                    const element: HTMLElement = document.getElementsByClassName(className)[0] as HTMLElement;
+                    element.focus();
+                }
             }
-        });
+        }
+    }
 
-        document.addEventListener("keydown", (e: KeyboardEvent) => {
-            if (this.state.openDropdown && this.ref.current) {
-                keyboardNavigation(
-                    e,
-                    this.ref.current,
-                    this.categoryButtonRef.current ? this.buttonFocus : this.inputFocus,
-                );
-                if (e.key === 'Backspace') {
-                    this.backButton();
-                    this.backButtonValue();
+    componentDidMount = () => {
+        this.recursion(this.state.options);
 
-                    const {buttonTarget} = this.state;
-                    const className = buttonTarget.pop();
+        document.addEventListener("mousedown", this.onMouseDown);
+        document.addEventListener("keydown", this.onKeyDown);
+    }
 
-                    if (className != null) {
-                        const element: HTMLElement = document.getElementsByClassName(className)[0] as HTMLElement;
-                        element.focus();
-                    }
-                }
-            }
-        });
+    componentWillUnmount(): void {
+        document.removeEventListener("mousedown", this.onMouseDown);
+        document.removeEventListener("keydown", this.onKeyDown);
     }
 
     componentDidUpdate(prevProps: Readonly<IProps<T>>, prevState: Readonly<IState<T>>): void {
@@ -449,21 +451,30 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
                         >
                             <button className="suggestion-item--btn">
                                 {this.props.getBorderColor
-                                    && <div className="item-border"
-                                        style={{backgroundColor: this.props.getBorderColor(option.value)}}>
+                                    && <div
+                                        className="item-border"
+                                        style={{
+                                            backgroundColor: this.props.getBorderColor(option.value),
+                                        }}
+                                    >
                                     </div>
                                 }
                                 <span
-                                    style={this.props.getBackgroundColor
-                                        ? {backgroundColor: this.props.getBackgroundColor(option.value),
-                                        color: getTextColor(this.props.getBackgroundColor(option.value))}
-                                        : undefined}
                                     className={'suggestion-item--bgcolor'
-                                        + (selectedItem ? ' suggestion-item--disabled' : '')}
+                                        + (selectedItem ? ' suggestion-item--disabled' : '')
+                                    }
+                                    style={this.props.getBackgroundColor
+                                        ? {
+                                            backgroundColor: this.props.getBackgroundColor(option.value),
+                                            color: getTextColor(this.props.getBackgroundColor(option.value)),
+                                        }
+                                        : undefined
+                                    }
                                 >
                                     {this.props.optionTemplate
                                         ? this.props.optionTemplate(option.value)
-                                        : this.props.getLabel(option.value)}
+                                        : this.props.getLabel(option.value)
+                                    }
                                 </span>
                                 {option.children
                                     && <span className="suggestion-item__icon">
@@ -481,7 +492,8 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
                     this.props.getId(obj) === this.props.getId(item.value),
                 );
                 return (
-                    <li key={i}
+                    <li
+                        key={i}
                         className={`suggestion-item suggestion-item--multi-select`}
                         onClick={(event) => {
                         this.handleValue(event, item);
@@ -495,7 +507,8 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
                                     ? 'suggestion-item--disabled' : undefined}
                                 >
                                     {this.props.getLabel(item.value)}
-                                </span>}
+                                </span>
+                            }
                         </button>
                     </li>
                 );
@@ -531,8 +544,8 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
 
         if (!selectedButton) {
             return <button
-                ref={this.categoryButtonRef}
                 className={'autocomplete__button' + (this.props.selectBranchWithChildren ? ' autocomplete__button--multi-select' : '')}
+                ref={this.categoryButtonRef}
                 onMouseOver={() => this.setState({buttonMouseEvent: true})}
                 onMouseOut={() => this.setState({buttonMouseEvent: false})}
                 onClick={(event) => this.handleBranchValue(event, buttonValue)}
@@ -542,7 +555,7 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
         } else {
             return <button
                 className={'autocomplete__button'
-                + (this.props.selectBranchWithChildren ? ' autocomplete__button--multi-select' : '') + ' autocomplete__button--disabled'}
+                    + (this.props.selectBranchWithChildren ? ' autocomplete__button--multi-select' : '') + ' autocomplete__button--disabled'}
             >
                 Category selected
             </button>;
@@ -568,29 +581,53 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
     }
 
     render() {
+        if (this.props.preview) {
+            return (
+                <SelectPreview
+                    kind={this.props.allowMultiple
+                        ? {
+                            mode: 'multi-select',
+                            getBackgroundColor: this.props.getBackgroundColor,
+                        }
+                        : {
+                            mode: 'single-select',
+                            getBorderColor: this.props.getBorderColor,
+                        }
+                    }
+                    items={this.state.value}
+                    valueTemplate={this.props.valueTemplate}
+                    getLabel={this.props.getLabel}
+                />
+            );
+        }
+
         return (
             <InputWrapper
                 label={this.props.label}
                 error={this.props.error}
                 required={this.props.required}
                 disabled={this.props.disabled}
-                invalid={this.props.invalid}
                 info={this.props.info}
                 inlineLabel={this.props.inlineLabel}
                 labelHidden={this.props.labelHidden}
-                fullWidth={this.props.fullWidth}
                 htmlId={this.htmlId}
-                tabindex={this.props.tabindex}>
-                <div className={`tags-input tags-input--${this.props.allowMultiple ? 'multi-select' : 'single-select'} sd-input__input`}>
+                tabindex={this.props.tabindex}
+            >
+                <div className={`tags-input sd-input__input tags-input--${this.props.allowMultiple ? 'multi-select' : 'single-select'}`}>
                     {this.props.allowMultiple
                         ? <div className="tags-input__tags">
                             {this.props.readOnly
                                 || <button ref={this.openDropdownRef}
-                                    className="tags-input__add-button"
-                                    onClick={() => this.setState({openDropdown: !this.state.openDropdown})}
+                                    className={`tags-input__add-button ${this.props.disabled ? 'tags-input__add-button--disabled' : ''}`}
+                                    onClick={() => {
+                                        if (!this.props.disabled) {
+                                            this.setState({openDropdown: !this.state.openDropdown});
+                                        }
+                                    }}
                                 >
                                     <i className="icon-plus-large"></i>
-                                </button>}
+                                </button>
+                            }
                             <ul className="tags-input__tag-list">
                                 {this.state.value.map((item, i: number) => {
                                     const Wrapper: React.ComponentType<{backgroundColor?: string}>
@@ -598,22 +635,30 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
                                         <li
                                             className={"tags-input__tag-item tags-input__tag-item--multi-select"
                                             + (this.props.readOnly ? ' tags-input__tag-item--readonly' : '')}
-                                            onClick={() => !this.props.readOnly && this.removeClick(i)}
+                                            onClick={() => (!this.props.readOnly && !this.props.disabled)
+                                                && this.removeClick(i)
+                                            }
                                             style={this.props.valueTemplate
                                             ? {backgroundColor}
                                             : this.props.getBackgroundColor
                                             && {backgroundColor: this.props.getBackgroundColor(item)}}
                                         >
                                             <span
-                                            style={{color: backgroundColor
-                                            ? getTextColor(backgroundColor)
-                                            : this.props.getBackgroundColor
-                                            &&  getTextColor(this.props.getBackgroundColor(item))}}
-                                            className="tags-input__helper-box">
+                                                className="tags-input__helper-box"
+                                                style={
+                                                    {color: backgroundColor
+                                                        ? getTextColor(backgroundColor)
+                                                        : this.props.getBackgroundColor
+                                                            &&  getTextColor(this.props.getBackgroundColor(item)),
+                                                    }
+                                                }
+                                            >
                                                 {children}
-                                                {!this.props.readOnly && <span className="tags-input__remove-button">
-                                                    <Icon name="close-small"></Icon>
-                                                </span>}
+                                                {!this.props.readOnly
+                                                    && <span className="tags-input__remove-button">
+                                                        <Icon name="close-small"></Icon>
+                                                    </span>
+                                                }
                                             </span>
                                         </li>
                                     );
@@ -631,10 +676,12 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
                                 })}
                             </ul>
                             {this.state.value.length > 0
-                                ? this.props.readOnly
-                                    || <button className="tags-input__remove-value"
-                                    style={{position: 'relative', bottom: '2px'}}
-                                    onClick={() => this.setState({value: []})}>
+                                ? (this.props.readOnly || this.props.disabled)
+                                    || <button
+                                        className="tags-input__remove-value"
+                                        style={{position: 'relative', bottom: '2px'}}
+                                        onClick={() => this.setState({value: []})}
+                                    >
                                         <Icon name='remove-sign'></Icon>
                                     </button>
                                 : null
@@ -650,8 +697,11 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
                                 </button>
                             }
                             {this.state.value.length < 1
-                                && <span className={ 'tags-input__single-item'
-                                    + (this.props.readOnly ? ' tags-input__tag-item--readonly' : '')}>
+                                && <span
+                                        className={ 'tags-input__single-item'
+                                            + (this.props.readOnly ? ' tags-input__tag-item--readonly' : '')
+                                        }
+                                    >
                                     <span className="tags-input__placeholder">
                                         {this.props.placeholder}
                                     </span>
@@ -662,23 +712,29 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
                                 = ({backgroundColor, borderColor, children}) => (
                                     <span
                                         className={ 'tags-input__single-item'
-                                        + (this.props.readOnly ? ' tags-input__tag-item--readonly' : '')}
-                                        onClick={() => this.props.readOnly || this.removeClick(i)}
+                                            + (this.props.readOnly ? ' tags-input__tag-item--readonly' : '')
+                                        }
+                                        onClick={() => !this.props.readOnly && this.removeClick(i)
+                                        }
                                     >
                                         {this.props.getBorderColor
-                                            && <div className="item-border item-border-selected"
+                                            && <div
+                                                className="item-border item-border-selected"
                                                 style={borderColor
-                                                ? {backgroundColor: borderColor}
-                                                : {backgroundColor: this.props.getBorderColor(item)}}
+                                                    ? {backgroundColor: borderColor}
+                                                    : {backgroundColor: this.props.getBorderColor(item)}
+                                                }
                                             >
                                             </div>
                                         }
                                         <span
                                             style={{color: backgroundColor && getTextColor(backgroundColor)}}
-                                            className="tags-input__helper-box">
+                                            className="tags-input__helper-box"
+                                        >
                                             <span
                                                 className={backgroundColor && `tags-input__tag-item`}
-                                                style={{backgroundColor, margin: 0}}>
+                                                style={{backgroundColor, margin: 0}}
+                                            >
                                                 {children}
                                             </span>
                                             {this.props.readOnly
@@ -699,14 +755,16 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
                                     }
                                 </React.Fragment>;
                             })}
-                       </div>
+                        </div>
                     }
 
                     {this.state.openDropdown
                         && <div
-                            className={"autocomplete autocomplete--multi-select" + (this.props.width === 'medium' ? ' autocomplete--fixed-width' : '')}
-                            ref={this.dropdownRef}
+                            className={"autocomplete autocomplete--multi-select"
+                                + (this.props.width === 'medium' ? ' autocomplete--fixed-width' : '')
+                            }
                             style={{zIndex: this.props.zIndex}}
+                            ref={this.dropdownRef}
                         >
                             <div className='autocomplete__header'>
                                 <div
@@ -720,9 +778,9 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
                                 </div>
                                 <div className='autocomplete__filter'>
                                     <input
-                                        placeholder={this.props.searchPlaceholder}
-                                        type="text"
                                         className="autocomplete__input"
+                                        type="text"
+                                        placeholder={this.props.searchPlaceholder}
                                         ref={this.inputRef}
                                         value={this.state.searchFieldValue}
                                         onChange={(event) => {
@@ -756,10 +814,9 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
                                     </div>
                                     <div className='autocomplete__filter'>
                                         <button className={'autocomplete__category-title'}>
-                                            {
-                                                this.props.optionTemplate
-                                                    ? this.props.optionTemplate(this.state.buttonValue.value)
-                                                    : this.props.getLabel(this.state.buttonValue.value)
+                                            {this.props.optionTemplate
+                                                ? this.props.optionTemplate(this.state.buttonValue.value)
+                                                : this.props.getLabel(this.state.buttonValue.value)
                                             }
                                         </button>
 
@@ -777,83 +834,86 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
                                         className="suggestion-list suggestion-list--multi-select"
                                         ref={this.ref}
                                     >
-                                        {this.state.options
-                                            .map((option, i: React.Key | undefined) => {
-                                                let selectedItem = this.state.value.some((obj) =>
-                                                    this.props.getId(obj) === this.props.getId(option.value),
-                                                );
-                                                return (
-                                                    <li
-                                                        key={i}
-                                                        className={`suggestion-item suggestion-item--multi-select`}
-                                                        onClick={(event) => {
-                                                            event.preventDefault();
-                                                            event.stopPropagation();
-                                                            this.handleTree(event, option);
+                                        {this.state.options.map((option, i: React.Key | undefined) => {
+                                            let selectedItem = this.state.value.some((obj) =>
+                                                this.props.getId(obj) === this.props.getId(option.value),
+                                            );
+                                            return (
+                                                <li
+                                                    key={i}
+                                                    className={`suggestion-item suggestion-item--multi-select`}
+                                                    onClick={(event) => {
+                                                        event.preventDefault();
+                                                        event.stopPropagation();
+                                                        this.handleTree(event, option);
+                                                    }}
+                                                >
+                                                    <button
+                                                        className={`suggestion-item--btn ${this.props.getId(option.value)}-focus`}
+                                                        onKeyDown={(event) => {
+                                                            if (event.key === 'Enter' && option.children) {
+                                                                this.setState({
+                                                                    buttonTarget: [
+                                                                        ...this.state.buttonTarget,
+                                                                        this.props.getId(option.value),
+                                                                    ],
+                                                                });
+                                                            }
                                                         }}
                                                     >
-                                                        <button
-                                                            className={`suggestion-item--btn ${this.props.getId(option.value)}`}
-                                                            onKeyDown={(event) => {
-                                                                if (event.key === 'Enter' && option.children) {
-                                                                    this.setState({
-                                                                        buttonTarget: [
-                                                                            ...this.state.buttonTarget,
-                                                                            this.props.getId(option.value),
-                                                                        ],
-                                                                    });
-                                                                }
-                                                            }}
-                                                        >
-                                                            {(this.props.getBorderColor && !this.props.allowMultiple)
-                                                                && <div
-                                                                    className="item-border"
-                                                                    style={{
-                                                                        backgroundColor: this.props.getBorderColor(
+                                                        {(this.props.getBorderColor && !this.props.allowMultiple)
+                                                            && <div
+                                                                className="item-border"
+                                                                style={{
+                                                                    backgroundColor: this.props.getBorderColor(
+                                                                        option.value,
+                                                                    ),
+                                                                }}
+                                                            >
+                                                            </div>
+                                                        }
+                                                        <span
+                                                            className={
+                                                                'suggestion-item--bgcolor'
+                                                                + (selectedItem ? ' suggestion-item--disabled' : '')
+                                                            }
+                                                            style={
+                                                                (this.props.getBackgroundColor && option.value)
+                                                                    ? {
+                                                                        backgroundColor:
+                                                                        this.props.getBackgroundColor(option.value),
+                                                                        color:
+                                                                        getTextColor(this.props.getBackgroundColor(
                                                                             option.value,
+                                                                            ),
                                                                         ),
-                                                                    }}
-                                                                >
-                                                                </div>
+                                                                    }
+                                                                    : undefined
                                                             }
-                                                            <span
-                                                                style={
-                                                                    (this.props.getBackgroundColor && option.value)
-                                                                        ? {
-                                                                            backgroundColor:
-                                                                            this.props.getBackgroundColor(option.value),
-                                                                            color:
-                                                                            getTextColor(this.props.getBackgroundColor(
-                                                                                option.value,
-                                                                                ),
-                                                                            ),
-                                                                        }
-                                                                        : undefined
-                                                                }
-                                                                className={
-                                                                    'suggestion-item--bgcolor'
-                                                                    + (selectedItem ? ' suggestion-item--disabled' : '')
-                                                                }
-                                                            >
-                                                                {this.props.optionTemplate
-                                                                    ? this.props.optionTemplate(option.value)
-                                                                    : this.props.getLabel(option.value)}
-                                                            </span>
-                                                            {option.children
-                                                                && <span className="suggestion-item__icon">
-                                                                    <Icon name="chevron-right-thin"></Icon>
-                                                                </span>
+                                                        >
+                                                            {this.props.optionTemplate
+                                                                ? this.props.optionTemplate(option.value)
+                                                                : this.props.getLabel(option.value)
                                                             }
-                                                        </button>
-                                                    </li>
-                                                );
-                                            })
-                                        }
+                                                        </span>
+                                                        {option.children
+                                                            && <span className="suggestion-item__icon">
+                                                                <Icon name="chevron-right-thin"></Icon>
+                                                            </span>
+                                                        }
+                                                    </button>
+                                                </li>
+                                            );
+                                        })}
                                     </ul>
                                     : null
-                                : <ul className="suggestion-list suggestion-list--multi-select" ref={this.ref}>
+                                : <ul
+                                    className="suggestion-list suggestion-list--multi-select"
+                                    ref={this.ref}
+                                >
                                     {this.filteredItem(this.props.singleLevelSearch
-                                        ? this.state.options : this.state.filterArr)}
+                                        ? this.state.options : this.state.filterArr)
+                                    }
                                 </ul>
                             }
                         </div>