superdesk-ui-framework 3.0.35 → 3.0.38

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

@@ -1,21 +1,29 @@
 import * as React from 'react';
 import classNames from 'classnames';
 
-interface IPropsBase {
-    label?: string;
-    children: React.ReactNode;
-    maxLength?: number;
+export interface IInputCommon {
+    label: string;
     info?: string;
     error?: string;
     required?: boolean;
     disabled?: boolean;
-    invalid?: boolean;
+    readonly?: boolean;
+    preview?: boolean;
     inlineLabel?: boolean;
     labelHidden?: boolean;
     tabindex?: number;
     fullWidth?: boolean;
     boxedStyle?: boolean;
     boxedLable?: boolean;
+}
+
+export interface IInputWrapper extends IInputCommon {
+    invalid?: boolean;
+}
+
+interface IPropsBase extends IInputWrapper {
+    children: React.ReactNode;
+    maxLength?: number;
     value?: string | number;
     htmlId?: string;
     size?: 'medium' | 'large' | 'x-large'; // default: 'medium'
@@ -46,6 +54,7 @@ export class InputWrapper extends React.Component<IPropsBase, IState> {
             'sd-input--boxed-style': this.props.boxedStyle,
             'sd-input--boxed-label': this.props.boxedLable,
         });
+
         const labelClasses = classNames('sd-input__label', {
             'a11y-only': this.props.labelHidden,
             'sd-input__label--boxed': this.props.boxedLable,
@@ -53,25 +62,32 @@ export class InputWrapper extends React.Component<IPropsBase, IState> {
 
         return (
             <div className={classes}>
-                <label className={labelClasses} htmlFor={this.props.htmlId} id={this.props.htmlId + 'label'}
-                        tabIndex={this.props.tabindex === undefined ? undefined : -1}>
+                <label
+                    className={labelClasses}
+                    htmlFor={this.props.htmlId}
+                    id={this.props.htmlId + 'label'}
+                    tabIndex={this.props.tabindex === undefined ? undefined : -1}
+                >
                     {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>
-                    : null}
+                    {
+                        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 && !this.props.invalid
-                        ? <div className='sd-input__hint'>{this.props.info}</div>
-                        : null}
-                    {this.props.invalid || this.props.invalid
-                        ? <div className='sd-input__message'>{this.props.error}</div>
-                        : null}
+                    {
+                        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/Input.tsx

@@ -1,22 +1,9 @@
 import * as React from 'react';
-// import classNames from 'classnames';
 import nextId from "react-id-generator";
-import { InputWrapper } from './Form';
+import {IInputCommon, InputWrapper} from './Form/InputWrapper';
 
-interface IPropsBase {
-    label?: string;
+interface IPropsBase extends IInputCommon {
     maxLength?: number;
-    info?: string;
-    error?: string;
-    required?: boolean;
-    disabled?: boolean;
-    invalid?: boolean;
-    inlineLabel?: boolean;
-    labelHidden?: boolean;
-    tabindex?: number;
-    fullWidth?: boolean;
-    boxedStyle?: boolean;
-    boxedLable?: boolean;
     placeholder?: string;
     size?: 'medium' | 'large' | 'x-large'; // default: 'medium'
 }
@@ -41,73 +28,62 @@ interface IPropsNumber extends IPropsBase {
 
 type IProps = IPropsText | IPropsNumber | IPropsPassword;
 
-interface IState {
-    value: string | number;
-    invalid: boolean;
-}
-
-export class Input extends React.Component<IProps, IState> {
+export class Input extends React.Component<IProps> {
     constructor(props: IProps) {
         super(props);
 
-        this.state = {
-            value: this.props.value ?? '',
-            invalid: this.props.invalid ?? false,
-        };
-
         this.handleChange = this.handleChange.bind(this);
     }
 
     htmlId = nextId();
 
     handleChange(event: React.ChangeEvent<HTMLInputElement>) {
-        this.setState({ value: event.target.value });
         if (this.props.type === 'number') {
             this.props.onChange(Number(event.target.value));
         } else {
             this.props.onChange(event.target.value);
         }
-
-        if (this.props.maxLength && !this.props.invalid) {
-            this.setState({ invalid: event.target.value.length > this.props.maxLength });
-        }
-    }
-
-    componentDidUpdate(prevProps: any) {
-        if (prevProps.value !== this.props.value) {
-            this.setState({value: this.props.value ?? ''});
-        }
     }
 
     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}
-            value={this.state.value}
-            invalid={this.props.invalid}
-            info={this.props.info}
-            maxLength={this.props.maxLength}
-            inlineLabel={this.props.inlineLabel}
-            labelHidden={this.props.labelHidden}
-            size={this.props.size ?? 'medium'}
-            fullWidth={this.props.fullWidth}
-            htmlId={this.htmlId}
-            boxedStyle={this.props.boxedStyle}
-            boxedLable={this.props.boxedLable}
-            tabindex={this.props.tabindex}>
-                <input className='sd-input__input'
-                type={this.props.type ?? 'text'}
-                id={this.htmlId}
-                value={this.state.value}
-                aria-describedby={this.htmlId + 'label'}
-                tabIndex={this.props.tabindex}
-                onChange={this.handleChange}
-                placeholder={this.props.placeholder}
-                disabled={this.props.disabled} />
+                label={this.props.label}
+                required={this.props.required}
+                disabled={this.props.disabled}
+                value={this.props.value}
+                invalid={this.props.error != null ? true : false}
+                error={this.props.error}
+                info={this.props.info}
+                maxLength={this.props.maxLength}
+                inlineLabel={this.props.inlineLabel}
+                labelHidden={this.props.labelHidden}
+                size={this.props.size ?? 'medium'}
+                fullWidth={this.props.fullWidth}
+                htmlId={this.htmlId}
+                boxedStyle={this.props.boxedStyle}
+                boxedLable={this.props.boxedLable}
+                tabindex={this.props.tabindex}
+            >
+                <input
+                    className='sd-input__input'
+                    type={this.props.type ?? 'text'}
+                    id={this.htmlId}
+                    value={this.props.value}
+                    aria-describedby={this.htmlId + 'label'}
+                    tabIndex={this.props.tabindex}
+                    onChange={this.handleChange}
+                    placeholder={this.props.placeholder}
+                    disabled={this.props.disabled}
+                />
             </InputWrapper>
         );
     }

package/app-typescript/components/MultiSelect.tsx

@@ -3,8 +3,10 @@ import { MultiSelect as PrimeMultiSelect } from "@superdesk/primereact/multisele
 import classNames from 'classnames';
 import nextId from "react-id-generator";
 import { InputWrapper } from "./Form";
+import {IInputWrapper} from './Form/InputWrapper';
+import {SelectPreview} from './SelectPreview';
 
-interface IProps<T> {
+interface IProps<T> extends IInputWrapper {
     value: Array<T>;
     options: Array<T>;
     placeholder?: string;
@@ -19,19 +21,9 @@ interface IProps<T> {
     showSelectAll?: boolean;
     zIndex?: number;
     optionLabel: (option: T) => string;
-    itemTemplate?(item: any): JSX.Element | undefined;
-    selectedItemTemplate?(value: any): JSX.Element | undefined;
+    itemTemplate?(item: T): JSX.Element | undefined;
+    selectedItemTemplate?(value: T): JSX.Element | undefined;
     onChange(newValue: Array<T>): void;
-    invalid?: boolean;
-    inlineLabel?: boolean;
-    labelHidden?: boolean;
-    tabindex?: number;
-    fullWidth?: boolean;
-    info?: string;
-    error?: string;
-    required?: boolean;
-    label?: string;
-    disabled?: boolean;
 }
 
 interface IState<T> {
@@ -46,54 +38,64 @@ export class MultiSelect<T> extends React.Component<IProps<T>, IState<T>> {
     constructor(props: IProps<T>) {
         super(props);
         this.state = {
-            value: [],
+            value: this.props.value != null ? this.props.value : [],
             options: [],
             invalid: this.props.invalid ? this.props.invalid : false,
         };
     }
 
     render() {
-
         let classes = classNames({
             'showSelectAll': this.props.showSelectAll,
             'showFilter': this.props.filter,
         });
 
+        if (this.props.preview) {
+            return (
+                <SelectPreview
+                    kind={{mode: 'multi-select'}}
+                    items={this.state.value}
+                    valueTemplate={this.props.selectedItemTemplate}
+                    getLabel={this.props.optionLabel}
+                />
+            );
+        }
+
         return (
             <InputWrapper
-            label={this.props.label}
-            error={this.props.error}
-            required={this.props.required}
-            disabled={this.props.disabled}
-            invalid={this.state.invalid}
-            info={this.props.info}
-            inlineLabel={this.props.inlineLabel}
-            labelHidden={this.props.labelHidden}
-            fullWidth={this.props.fullWidth}
-            htmlId={this.htmlId}
-            tabindex={this.props.tabindex}>
-                <PrimeMultiSelect
-                panelClassName={classes}
-                value={this.props.value}
-                options={this.props.options}
-                onChange={({value}) => this.props.onChange(value)}
-                display="chip"
-                zIndex={this.props.zIndex}
-                filter={this.props.filter}
-                appendTo={document.body}
-                placeholder={this.props.placeholder}
-                optionLabel={(option) => this.props.optionLabel(option)}
-                emptyFilterMessage={this.props.emptyFilterMessage}
-                filterPlaceholder={this.props.filterPlaceholder}
-                itemTemplate={this.props.itemTemplate}
-                selectedItemTemplate={this.props.selectedItemTemplate}
-                maxSelectedLabels={this.props.maxSelectedLabels ?? 4}
-                selectedItemsLabel={this.props.selectedItemsLabel}
-                ariaLabelledBy={this.htmlId + 'label'}
-                tabIndex={this.props.tabIndex ? this.props.tabIndex : '0'}
-                showClear={this.props.showClear}
+                label={this.props.label}
+                error={this.props.error}
+                required={this.props.required}
                 disabled={this.props.disabled}
-                inputId={this.htmlId} />
+                info={this.props.info}
+                inlineLabel={this.props.inlineLabel}
+                labelHidden={this.props.labelHidden}
+                htmlId={this.htmlId}
+                tabindex={this.props.tabindex}
+            >
+                <PrimeMultiSelect
+                    panelClassName={classes}
+                    value={this.props.value}
+                    options={this.props.options}
+                    onChange={({value}) => this.props.onChange(value)}
+                    display="chip"
+                    zIndex={this.props.zIndex}
+                    filter={this.props.filter}
+                    appendTo={document.body}
+                    placeholder={this.props.placeholder}
+                    optionLabel={(option) => this.props.optionLabel(option)}
+                    emptyFilterMessage={this.props.emptyFilterMessage}
+                    filterPlaceholder={this.props.filterPlaceholder}
+                    itemTemplate={this.props.itemTemplate}
+                    selectedItemTemplate={this.props.selectedItemTemplate}
+                    maxSelectedLabels={this.props.maxSelectedLabels ?? 4}
+                    selectedItemsLabel={this.props.selectedItemsLabel}
+                    ariaLabelledBy={this.htmlId + 'label'}
+                    tabIndex={this.props.tabIndex ? this.props.tabIndex : '0'}
+                    showClear={this.props.showClear}
+                    disabled={this.props.disabled}
+                    inputId={this.htmlId}
+                />
             </InputWrapper>
         );
     }

package/app-typescript/components/Select.tsx

@@ -1,35 +1,18 @@
 import * as React from 'react';
 import nextId from "react-id-generator";
 import { InputWrapper } from './Form';
+import {IInputWrapper} from './Form/InputWrapper';
 
-interface ISelect {
+interface ISelect extends IInputWrapper {
     value?: string;
-    label: string;
-    info?: string;
-    error?: string;
-    required?: boolean;
-    disabled?: boolean;
-    invalid?: boolean;
-    inlineLabel?: boolean;
-    labelHidden?: boolean;
-    tabindex?: number;
-    fullWidth?: boolean;
     onChange(newValue: string): void;
 }
 
-interface IState {
-    invalid: boolean;
-}
-
-class Select extends React.Component<ISelect, IState> {
+class Select extends React.Component<ISelect> {
     private htmlId = nextId();
     constructor(props: ISelect) {
         super(props);
 
-        this.state = {
-            invalid: this.props.invalid ?? false,
-        };
-
         this.handleChange = this.handleChange.bind(this);
     }
 
@@ -38,13 +21,21 @@ class Select extends React.Component<ISelect, IState> {
     }
 
     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.state.invalid}
+                readonly={this.props.readonly}
                 info={this.props.info}
                 inlineLabel={this.props.inlineLabel}
                 labelHidden={this.props.labelHidden}
@@ -59,7 +50,7 @@ class Select extends React.Component<ISelect, IState> {
                     aria-describedby={this.htmlId}
                     tabIndex={this.props.tabindex}
                     onChange={this.handleChange}
-                    disabled={this.props.disabled}
+                    disabled={this.props.disabled || this.props.readonly}
                 >
                     {this.props.children}
                 </select>

package/app-typescript/components/SelectPreview.tsx

@@ -0,0 +1,100 @@
+import classNames from 'classnames';
+import * as React from 'react';
+import {getTextColor} from './Label';
+
+interface IProps<T> {
+    items: Array<T>;
+    kind: {
+        mode: 'single-select'; getBorderColor?(item: T): string;
+    } | {
+        mode: 'multi-select'; getBackgroundColor?(item: T): string;
+    };
+    getLabel(item: T): string;
+    valueTemplate?(item: T, Wrapper?: React.ElementType): React.ComponentType<T> | JSX.Element | undefined;
+}
+
+export class SelectPreview<T> extends React.Component<IProps<T>> {
+    render() {
+        return (
+            <div className="tags-preview">
+                <ul className="tags-preview__tag-list">
+                    {this.props.items.map((item, i: number) => {
+                        const Wrapper: React.ComponentType<{backgroundColor?: string, borderColor?: string}>
+                        = ({backgroundColor, borderColor, children}) => {
+                            let classes = classNames('tags-preview__tag-item', {
+                                'tags-preview__tag-item--single-select': this.props.kind.mode === 'single-select',
+                                'tags-preview__tag-item--border': (
+                                    this.props.kind.mode === 'single-select' && this.props.kind.getBorderColor
+                                    )
+                                    || borderColor,
+                            });
+
+                            return (
+                                <li
+                                    className={classes}
+                                    style={(() => {
+                                        if (this.props.valueTemplate != null) {
+                                            return {backgroundColor, borderColor};
+                                        } else {
+                                            if (
+                                                this.props.kind.mode === 'multi-select'
+                                                && this.props.kind.getBackgroundColor != null
+                                            ) {
+                                                return {
+                                                    backgroundColor: this.props.kind.getBackgroundColor(item),
+                                                };
+                                            } else if (
+                                                this.props.kind.mode === 'single-select'
+                                                && this.props.kind.getBorderColor != null
+                                            ) {
+                                                return {
+                                                    borderLeftColor: this.props.kind.getBorderColor(item),
+                                                };
+                                            } else {
+                                                return undefined;
+                                            }
+                                        }
+                                    })()}
+                                >
+                                    <span
+                                        className="tags-input__helper-box"
+                                        style={(() => {
+                                            if (backgroundColor != null) {
+                                                return {color: getTextColor(backgroundColor)};
+                                            } else {
+                                                if (
+                                                    this.props.kind.mode === 'multi-select'
+                                                    && this.props.kind.getBackgroundColor != null
+                                                ) {
+                                                    return {color: getTextColor(
+                                                        this.props.kind.getBackgroundColor(item),
+                                                    )};
+                                                } else {
+                                                    return undefined;
+                                                }
+                                            }
+                                        })()}
+                                    >
+                                        {children}
+                                    </span>
+                                </li>
+                            );
+                        };
+
+                        return (
+                            <React.Fragment key={i}>
+                                {this.props.valueTemplate
+                                    ? this.props.valueTemplate(item, Wrapper)
+                                    : <Wrapper>
+                                        <span>{this.props.getLabel(item)}</span>
+                                    </Wrapper>
+                                }
+                            </React.Fragment>
+                        );
+
+                    })}
+                </ul>
+            </div>
+        );
+    }
+}

package/app-typescript/components/SelectWithTemplate.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import {Dropdown} from '@superdesk/primereact/dropdown';
-// import classNames from 'classnames';
 import nextId from "react-id-generator";
 import { InputWrapper } from './Form';
+import {IInputWrapper} from './Form/InputWrapper';
 
-interface IProps<T> {
+interface IProps<T>  extends IInputWrapper {
     // Don't forget to cancel unfinished requests every the prop is called.
     getItems(searchString: string | null): Promise<Array<T>>;
     value: T;
@@ -14,21 +14,11 @@ interface IProps<T> {
     itemTemplate: React.ComponentType<{option: T | null}>;
     noResultsFoundMessage: string;
     filterPlaceholder?: string;
-    disabled?: boolean;
     autoFocus?: boolean;
     autoOpen?: boolean; // Avoid using this - the dropdown may cover important elements.
     width?: 'min' | '100%'; // defaults to min
     zIndex?: number;
     'data-test-id'?: string;
-    inlineLabel?: boolean;
-    required?: boolean;
-    fullWidth?: boolean;
-    invalid?: boolean;
-    labelHidden?: boolean;
-    tabindex?: number;
-    label?: string;
-    info?: string;
-    error?: string;
 }
 
 interface IState<T> {

package/app-typescript/components/TagInput.tsx

@@ -2,21 +2,13 @@ import * as React from 'react';
 import { Chips } from '@superdesk/primereact/chips';
 import {InputWrapper} from './Form';
 import nextId from "react-id-generator";
+import {IInputWrapper} from './Form/InputWrapper';
+import {SelectPreview} from './SelectPreview';
 
-interface IProps {
+interface IProps extends IInputWrapper {
     value: Array<string>;
     onChange(value: Array<string>): void;
-    placeholder: string;
-    invalid?: boolean;
-    inlineLabel?: boolean;
-    labelHidden?: boolean;
-    tabindex?: number;
-    fullWidth?: boolean;
-    info?: string;
-    error?: string;
-    required?: boolean;
-    label?: string;
-    disabled?: boolean;
+    placeholder?: string;
 }
 
 export class TagInput extends React.Component<IProps> {
@@ -25,26 +17,35 @@ export class TagInput extends React.Component<IProps> {
     render() {
         const {onChange, value, placeholder} = this.props;
 
+        if (this.props.preview) {
+            return (
+                <SelectPreview
+                    kind={{mode: 'multi-select'}}
+                    items={this.props.value}
+                    getLabel={(item) => item}
+                />
+            );
+        }
+
         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}>
+                label={this.props.label}
+                error={this.props.error}
+                required={this.props.required}
+                disabled={this.props.disabled}
+                info={this.props.info}
+                inlineLabel={this.props.inlineLabel}
+                labelHidden={this.props.labelHidden}
+                htmlId={this.htmlId}
+                tabindex={this.props.tabindex}
+            >
                 <Chips
                     className={`tags-input--multi-select sd-input__input ${this.props.disabled ? ' tags-input__padding-disabled' : ''}`}
                     allowDuplicate={false}
                     separator=","
                     onChange={(event) => onChange(event.value)}
                     value={value}
-                    placeholder={placeholder}
+                    placeholder={this.props.disabled ? undefined : placeholder}
                     disabled={this.props.disabled}
                 />
             </InputWrapper>