superdesk-ui-framework 3.0.36 → 3.0.39

package/app-typescript/components/DurationInput.tsx

@@ -1,23 +1,13 @@
 import * as React from 'react';
-import classNames from 'classnames';
 import moment from 'moment';
 import nextId from "react-id-generator";
 import { InputWrapper } from './Form';
+import {IInputWrapper} from './Form/InputWrapper';
 
-interface IProps {
+interface IProps extends IInputWrapper {
     hours?: number;
     minutes?: number;
     seconds?: number;
-    disabled?: boolean;
-    inlineLabel?: boolean;
-    required?: boolean;
-    fullWidth?: boolean;
-    invalid?: boolean;
-    labelHidden?: boolean;
-    tabindex?: number;
-    label?: string;
-    info?: string;
-    error?: string;
     onChange(e: number): void;
 }
 
@@ -285,82 +275,92 @@ export class DurationInput extends React.PureComponent<IProps, IState> {
     }
 
     render() {
-        let InputClasses = classNames('sd-input__duration-input');
+        if (this.props.preview) {
+            return (
+                <div className='sd-input__duration-input-preview'>
+                    <div><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></div>
+                    <div><span className='duration-input-preview'>{this.state.seconds}</span><span className='sd-input__suffix'>s</span></div>
+                </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}>
-                <div className={InputClasses}>
+                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}
+            >
+                <div className={'sd-input__duration-input'}>
                     <input
-                    className={`duration-input ${this.state.blink === 'hour' ? 'blink_me' : ''}`}
-                    type='text'
-                    id='hours'
-                    autoComplete="off"
-                    max={99}
-                    min={0}
-                    ref={this.hourRef}
-                    value={this.state.hours}
-                    disabled={this.props.disabled}
-                    onKeyDown={(event) => this.handleKeyDown(event)}
-                    onKeyUp={(event) => this.handleFocusOnKeyUp(event, this.minuteRef.current)}
-                    onChange={(event) => { this.handleChange(event, 'hours'); }}
-                    onBlur={(event) => this.setState({hours: this.zeroPad(event.target.value)})}
-                    onKeyPress={(event) => {
-                        if (!/[0-9]/.test(event.key)) {
-                            event.preventDefault();
-                        }
-                    }} />
+                        className={`duration-input ${this.state.blink === 'hour' ? 'blink_me' : ''}`}
+                        type='text'
+                        id='hours'
+                        autoComplete="off"
+                        max={99}
+                        min={0}
+                        ref={this.hourRef}
+                        value={this.state.hours}
+                        disabled={this.props.disabled}
+                        onKeyDown={(event) => this.handleKeyDown(event)}
+                        onKeyUp={(event) => this.handleFocusOnKeyUp(event, this.minuteRef.current)}
+                        onChange={(event) => { this.handleChange(event, 'hours'); }}
+                        onBlur={(event) => this.setState({hours: this.zeroPad(event.target.value)})}
+                        onKeyPress={(event) => {
+                            if (!/[0-9]/.test(event.key)) {
+                                event.preventDefault();
+                            }
+                        }}
+                    />
                     <span className='sd-input__suffix'>h</span>
 
                     <input
-                    className={`duration-input ${this.state.blink === 'minute' ? 'blink_me' : ''}`}
-                    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'); }}
-                    onBlur={(event) => this.setState({minutes: this.zeroPad(event.target.value)})}
-                    onKeyPress={(event) => {
-                        if (!/[0-9]/.test(event.key)) {
-                            event.preventDefault();
-                        }
-                    }} />
+                        className={`duration-input ${this.state.blink === 'minute' ? 'blink_me' : ''}`}
+                        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'); }}
+                        onBlur={(event) => this.setState({minutes: this.zeroPad(event.target.value)})}
+                        onKeyPress={(event) => {
+                            if (!/[0-9]/.test(event.key)) {
+                                event.preventDefault();
+                            }
+                        }}
+                    />
                     <span className='sd-input__suffix'>m</span>
 
                     <input
-                    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'); }}
-                    onBlur={(event) => this.setState({seconds: this.zeroPad(event.target.value)})}
-                    onKeyPress={(event) => {
-                        if (!/[0-9]/.test(event.key)) {
-                            event.preventDefault();
-                        }
-                    }} />
+                        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'); }}
+                        onBlur={(event) => this.setState({seconds: this.zeroPad(event.target.value)})}
+                        onKeyPress={(event) => {
+                            if (!/[0-9]/.test(event.key)) {
+                                event.preventDefault();
+                            }
+                        }}
+                    />
                     <span className='sd-input__suffix'>s</span>
                 </div>
-                </InputWrapper>
+            </InputWrapper>
         );
     }
 }

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

@@ -7,7 +7,7 @@ import {
 } from '.';
 
 interface IPropsBase {
-    label?: string;
+    label: string;
     maxLength?: number;
     info?: string;
     inlineLabel?: boolean;

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>