superdesk-ui-framework 3.0.36 → 3.0.39

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>

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) => {