superdesk-ui-framework 3.0.1-beta.3 → 3.0.1-beta.30

package/app-typescript/components/MultiSelect.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import { MultiSelect as PrimeMultiSelect } from "@superdesk/primereact/multiselect";
 import classNames from 'classnames';
 import nextId from "react-id-generator";
+import { InputWrapper } from "./Form";
 
 interface IProps<T> {
     value: Array<T>;
@@ -39,6 +40,8 @@ interface IState<T> {
 }
 
 export class MultiSelect<T> extends React.Component<IProps<T>, IState<T>> {
+    private htmlId = nextId();
+
     constructor(props: IProps<T>) {
         super(props);
         this.state = {
@@ -55,58 +58,42 @@ export class MultiSelect<T> extends React.Component<IProps<T>, IState<T>> {
             'showFilter': this.props.filter,
         });
 
-        const labelClasses = classNames('sd-input__label', {
-            'a11y-only': this.props.labelHidden,
-        });
-
-        const classesLabel = classNames('sd-input', {
-            'sd-input--inline-label': this.props.inlineLabel,
-            'sd-input--required': this.props.required,
-            'sd-input--disabled': this.props.disabled,
-            'sd-input--full-width': this.props.fullWidth,
-            'sd-input--invalid': this.props.invalid || this.state.invalid,
-        });
-
-        const htmlId = nextId();
-
         return (
-            <div className={classesLabel}>
-                <label className={labelClasses} htmlFor={htmlId} id={htmlId + 'label'}
-                        tabIndex={this.props.tabindex === undefined ? undefined : -1}>
-                    {this.props.label}
-                </label>
-
+            <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={(e: any) => this.props.onChange(e)}
-                    display="chip"
-                    filter={this.props.filter}
-                    filterBy={this.props.optionLabel}
-                    appendTo={document.body}
-                    placeholder={this.props.placeholder}
-                    optionLabel={this.props.optionLabel}
-                    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.props.ariaLabelledBy}
-                    tabIndex={this.props.tabIndex ? this.props.tabIndex : '0'}
-                    showClear={this.props.showClear}
-                    disabled={this.props.disabled}
-                />
-
-                <div className='sd-input__message-box'>
-                    {this.props.info && !this.props.invalid && !this.state.invalid ?
-                        <div className='sd-input__hint'>{this.props.info}</div> : null}
-                    {this.props.invalid || this.state.invalid ?
-                        <div className='sd-input__message'>{this.props.error}</div>
-                        : null}
-                </div>
-            </div>
+                panelClassName={classes}
+                value={this.props.value}
+                options={this.props.options}
+                onChange={(e: any) => this.props.onChange(e)}
+                display="chip"
+                filter={this.props.filter}
+                filterBy={this.props.optionLabel}
+                appendTo={document.body}
+                placeholder={this.props.placeholder}
+                optionLabel={this.props.optionLabel}
+                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/NavButton.tsx

@@ -8,12 +8,13 @@ interface IProps {
     text?: string;
     iconSize?: 'small' | 'big'; // defaults to 'small'
     theme?: 'light' | 'dark'; // defaults to 'light'
-    type?: 'default' | 'primary' | 'highlight' | 'darker';
+    type?: 'default' | 'primary' | 'highlight' | 'darker' | 'dark';
     state?: 'normal' | 'active'; // defaults to 'normal'
     value?: 'button' | 'submit' | 'reset'; // defaults to 'button'
     onClick(): void;
     badgeValue?: string;
 }
+
 export class NavButton extends React.PureComponent<IProps> {
     render() {
         let classes = classNames('sd-navbtn', {

package/app-typescript/components/Navigation/BottomNav.tsx

@@ -13,6 +13,7 @@ interface IItem {
     active?: boolean;
     title: string;
     onClick(event: any): void;
+    onRemove(event: any): void;
 }
 
 interface IState {
@@ -55,7 +56,7 @@ export class BottomNav extends React.PureComponent<IProps, IState> {
     render() {
         return (
             <ul className='sd-bottom-nav-list'>
-                {this.state.items.map((item, index) => {
+                {this.props.items.map((item, index) => {
                     return (
                         <li key={index}
                             className={'sd-bottom-nav-list__item' + (item['active'] ? ' sd-bottom-nav-list__item--active' : (index === this.state.index ? ' sd-bottom-nav-list__item--active' : ''))}>
@@ -72,7 +73,7 @@ export class BottomNav extends React.PureComponent<IProps, IState> {
                                 size='small'
                                 icon="close-small"
                                 ariaValue='Delete'
-                                onClick={() => this.handleDelete(index)} />
+                                onClick={() => item.onRemove(index)} />
                         </li>
                     );
                 })}

package/app-typescript/components/SearchBar.tsx

@@ -3,12 +3,12 @@ import classNames from 'classnames';
 import {Icon} from './Icon';
 
 interface IProps {
-    value?: string | number;
+    value?: string;
     type?: 'expanded' | 'collapsed' | 'boxed';
     placeholder: string;
     focused?: boolean;
     boxed?: boolean;
-    onSubmit?(): void;
+    onSubmit?(value: string | number): void;
 }
 
 interface IState {
@@ -16,6 +16,7 @@ interface IState {
     type: string;
     focused: boolean;
     boxed?: boolean;
+    keyDown?: boolean;
 }
 
 export class SearchBar extends React.PureComponent<IProps, IState> {
@@ -27,6 +28,7 @@ export class SearchBar extends React.PureComponent<IProps, IState> {
             focused: this.props.focused ? this.props.focused : false,
             type: this.props.type ? this.props.type : 'expanded',
             boxed: this.props.boxed ? this.props.boxed : false,
+            keyDown: false,
         };
         this.inputRef = React.createRef();
     }
@@ -57,22 +59,47 @@ export class SearchBar extends React.PureComponent<IProps, IState> {
                 <label className="sd-searchbar__icon"></label>
                 <input id="search-input"
                 ref={(input: any) => (input && this.props.focused) && input.focus()}
-                    className="sd-searchbar__input"
-                    type="text"
-                    placeholder={this.props.placeholder}
-                    value={this.state.inputValue}
-                    onChange={(e) => this.setState({inputValue: e.target.value})}
-                    onFocus={() => this.setState({focused: true})} />
+                className="sd-searchbar__input"
+                type="text"
+                placeholder={this.props.placeholder}
+                value={this.state.inputValue}
+                onKeyPress={(event) => {
+                    if (event.key === 'Enter') {
+                        if (this.props.onSubmit) {
+                            this.props.onSubmit(this.state.inputValue);
+                        }
+                        this.setState({keyDown: true});
+                    }
+                }}
+                onKeyUp={(event) => {
+                    if (event.key === 'Enter') {
+                        this.setState({keyDown: false});
+                    }
+                }}
+                onChange={(event) => this.setState({inputValue: event.target.value})}
+                onFocus={() => this.setState({focused: true})} />
                 {this.state.inputValue &&
-                <button className="sd-searchbar__cancel" onClick={() => this.setState({inputValue: ''})}>
+                <button className="sd-searchbar__cancel" onClick={() => {
+                    this.setState({inputValue: ''});
+                    setTimeout(() => {
+                        if (this.props.onSubmit) {
+                            this.props.onSubmit(this.state.inputValue);
+                        }
+                    });
+                }}>
                     <Icon name='remove-sign' />
                 </button>}
+                {this.state.inputValue &&
                 <button
                 id="sd-searchbar__search-btn"
-                className="sd-searchbar__search-btn"
-                onSubmit={() => this.props.onSubmit}>
+                className={`sd-searchbar__search-btn ${this.state.keyDown ? 'sd-searchbar__search-btn--active' : ''}`}
+                onClick={() => {
+                    if (this.props.onSubmit) {
+                        this.props.onSubmit(this.state.inputValue);
+                    }
+                }}>
                     <Icon name='chevron-right-thin' />
-                </button>
+                </button>}
             </div>
         );
     }

package/app-typescript/components/Select.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import classNames from 'classnames';
+// import classNames from 'classnames';
 import nextId from "react-id-generator";
+import { InputWrapper } from './Form';
 
 interface ISelect {
     value?: string;
@@ -27,6 +28,7 @@ interface IState {
 }
 
 class Select extends React.Component<ISelect, IState> {
+    private htmlId = nextId();
     constructor(props: ISelect) {
         super(props);
 
@@ -38,55 +40,35 @@ class Select extends React.Component<ISelect, IState> {
         this.handleChange = this.handleChange.bind(this);
     }
 
-    htmlId = nextId();
-
     handleChange(event: React.ChangeEvent<HTMLSelectElement>) {
         this.setState({ value: event.target.value });
         this.props.onChange(event.target.value);
     }
 
     render() {
-        const classes = classNames('sd-input sd-input--is-select', {
-            'sd-input--inline-label': this.props.inlineLabel,
-            'sd-input--required': this.props.required,
-            'sd-input--disabled': this.props.disabled,
-            'sd-input--full-width': this.props.fullWidth,
-            'sd-input--invalid': this.props.invalid || this.state.invalid,
-            'sd-input--medium': this.props.size === undefined,
-            [`sd-input--${this.props.size}`]: this.props.size || this.props.size !== undefined,
-            '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,
-        });
-
         return (
-            <div className={classes}>
-                <label className={labelClasses}
-                htmlFor={this.htmlId}
-                tabIndex={this.props.tabindex === undefined ? undefined : -1}>
-                    {this.props.label}
-                </label>
-
+            <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}>
                 <select className='sd-input__select'
-                    id={this.htmlId}
-                    value={this.state.value}
-                    aria-describedby={this.htmlId}
-                    tabIndex={this.props.tabindex}
-                    onChange={this.handleChange}
-                    disabled={this.props.disabled}>
-                    {this.props.children}
+                id={this.htmlId}
+                value={this.state.value}
+                aria-describedby={this.htmlId}
+                tabIndex={this.props.tabindex}
+                onChange={this.handleChange}
+                disabled={this.props.disabled}>
+                {this.props.children}
                 </select>
-
-                <div className='sd-input__message-box'>
-                    {this.props.info && !this.props.invalid && !this.state.invalid ?
-                        <div className='sd-input__hint'>{this.props.info}</div> : null}
-                    {this.props.invalid || this.state.invalid ?
-                        <div className='sd-input__message'>{this.props.error}</div>
-                        : null}
-                </div>
-            </div>
+            </InputWrapper>
         );
     }
 }

package/app-typescript/components/SelectWithTemplate.tsx

@@ -1,5 +1,8 @@
 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';
 
 interface IProps<T> {
     // Don't forget to cancel unfinished requests every the prop is called.
@@ -11,32 +14,41 @@ interface IProps<T> {
     itemTemplate: React.ComponentType<{option: T | null}>;
     noResultsFoundMessage: string;
     filterPlaceholder?: string;
-
     disabled?: boolean;
-    required?: 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> {
     options: Array<T>;
     loading: boolean;
+    invalid: boolean;
 }
 
 const labelKey = 'label';
 
 export class SelectWithTemplate<T> extends React.Component<IProps<T>, IState<T>> {
     componentRef: Dropdown | null;
-
+    private htmlId = nextId();
     constructor(props: IProps<T>) {
         super(props);
 
         this.state = {
             options: [],
             loading: false,
+            invalid: this.props.invalid ? this.props.invalid : false,
         };
 
         this.componentRef = null;
@@ -87,7 +99,21 @@ export class SelectWithTemplate<T> extends React.Component<IProps<T>, IState<T>>
         const fakePlaceholderWithNonBreakingSpace = ' ';
 
         return (
-            <Dropdown
+            <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}>
+                <Dropdown
+                inputId={this.htmlId}
+                ariaLabelledBy={this.htmlId + 'label'}
                 value={valueInternal}
                 options={optionsInternal}
                 onChange={(e) => {
@@ -108,7 +134,6 @@ export class SelectWithTemplate<T> extends React.Component<IProps<T>, IState<T>>
                 loading={loading}
                 onFilterInputChange={(searchString) => {
                     this.setState({loading: true});
-
                     getItems(searchString).then((_options) => {
                         this.setState({options: _options, loading: false});
                     });
@@ -117,8 +142,8 @@ export class SelectWithTemplate<T> extends React.Component<IProps<T>, IState<T>>
                 style={width === '100%' ? {display: 'flex', width: '100%'} : {}}
                 ref={(componentRef) => {
                     this.componentRef = componentRef;
-                }}
-            />
+                }}/>
+            </InputWrapper>
         );
     }
 }

package/app-typescript/components/Spacer.tsx

@@ -0,0 +1,87 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+export interface IPropsSpacer {
+    h?: boolean; // horizontal
+    v?: boolean; // vertical
+    gap: '0' | '4' | '8' | '16' | '32' | '64';
+    justifyContent?: 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly' | 'stretch';
+    alignItems?: 'start' | 'end' | 'center' | 'stretch';
+    noGrow?: boolean;
+
+    /**
+     * Will not wrap children in div elements.
+     * `noGrow` prop would then not be relevant.
+     */
+    noWrap?: boolean;
+
+    style?: React.CSSProperties;
+
+    children: Array<React.ReactNode>;
+}
+
+export class Spacer extends React.PureComponent<IPropsSpacer> {
+    constructor(props: IPropsSpacer) {
+        super(props);
+        this.state = {
+            items: [],
+        };
+
+    }
+    render() {
+        const {h, v, gap, justifyContent, alignItems, noGrow, noWrap} = this.props;
+
+        const justifyContentDefault: IPropsSpacer['justifyContent'] = h ? 'space-between' : 'start';
+        const alignItemsDefault: IPropsSpacer['alignItems'] = h ? 'center' : 'start';
+
+        return (
+            <div
+                style={{
+                    display: 'flex',
+                    flexDirection: v ? 'column' : 'row',
+                    gap: `${gap}px`,
+                    justifyContent: justifyContent ?? justifyContentDefault,
+                    alignItems: alignItems ?? alignItemsDefault,
+                    width: noGrow === true ? undefined : '100%',
+                    ...(this.props.style ?? {}),
+                }}
+            >
+                {this.props.children.map((el, i) => noWrap ? el : (
+                    <div
+                        key={i}
+                        style={{
+                            width: noGrow === true ? undefined : '100%',
+                        }}
+                    >
+                        {el}
+                    </div>
+                ))}
+            </div>
+        );
+    }
+}
+
+/**
+ * Renders a standalone spacing block - similar to <br />
+ */
+export interface ISpacerBlock {
+    h?: boolean; // horizontal
+    v?: boolean; // vertical
+    gap: '4' | '8' | '16' | '32' | '64';
+}
+
+export class SpacerBlock extends React.PureComponent<ISpacerBlock> {
+    render() {
+        const {gap, h, v} = this.props;
+
+        return (
+            <span
+                style={{
+                    display: h === true ? 'inline-block' : 'block',
+                    width: h === true ? `${gap}px` : undefined,
+                    height: v === true ? `${gap}px` : undefined,
+                }}
+            />
+        );
+    }
+}

package/app-typescript/components/TimePicker.tsx

@@ -1,30 +1,53 @@
 import * as React from 'react';
+import nextId from "react-id-generator";
+import { InputWrapper } from './Form';
 
 interface IProps {
     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;
-    required?: boolean; // displays a button to reset time input
+    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() {
         return (
-            <div
-                className="sd-input sd-input--no-label sd-input--no-margin"
-                style={{display: 'inline-flex'}}
-            >
+            <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
-                    type="time"
-                    className="sd-input__input"
-                    value={this.props.value}
-                    required={this.props.required}
-                    disabled={this.props.disabled}
-                    onChange={(event) => {
-                        this.props.onChange(event.target.value);
-                    }}
-                />
-            </div>
+                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) => {
+                    this.props.onChange(event.target.value);
+                }}/>
+            </InputWrapper>
         );
     }
 }