superdesk-ui-framework 3.0.1-beta.1 → 3.0.1-beta.4

package/app-typescript/components/Lists/TableList.tsx

@@ -0,0 +1,208 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
+import { Tooltip } from '../Tooltip';
+import { Button } from '../Button';
+import { Dropdown } from '../Dropdown';
+
+interface IPropsItem {
+    start?: React.ReactNode;
+    center?: React.ReactNode;
+    end?: React.ReactNode;
+    action?: React.ReactNode;
+    addItem?: boolean;
+    itemsDropdown?: any;
+    dragAndDrop?: boolean;
+    onClick?(): void;
+}
+
+class TableListItem extends React.PureComponent<IPropsItem> {
+    render() {
+        return (
+            this.props.addItem ?
+            <li className='table-list__item-container'>
+                <div
+                onClick={this.props.onClick}
+                className={`table-list__item ${this.props.onClick && 'table-list__item--clickable'} ${this.props.dragAndDrop && 'table-list__item--draggable'}`}>
+                    <div className='table-list__item-content'>
+                        <div className='table-list__item-content-block'>
+                            {this.props.start && this.props.start}
+                        </div>
+                        <div className='table-list__item-content-block table-list__item-content-block--center'>
+                            {this.props.center && this.props.center}
+                        </div>
+                        <div className='table-list__item-content-block'>
+                            {this.props.end && this.props.end}
+                        </div>
+                    </div>
+                    {this.props.action && <div className='table-list__slide-in-actions'>
+                        {this.props.action}
+                    </div>}
+                </div>
+                <div className='table-list__add-bar-container'>
+                    <Tooltip text='Add item' flow='top' appendToBody={true}>
+                        <div className='table-list__add-bar'>
+                            <Dropdown
+                                items={this.props.itemsDropdown}>
+                                    <Button
+                                    type="primary"
+                                    icon="plus-large"
+                                    text="Add item"
+                                    size="small"
+                                    shape="round"
+                                    iconOnly={true}
+                                    onClick={() => false}
+                                    />
+                            </Dropdown>
+                        </div>
+                    </Tooltip>
+                </div>
+            </li>
+            : <li
+            className={`table-list__item ${this.props.onClick && 'table-list__item--clickable'} ${this.props.dragAndDrop && 'table-list__item--draggable'} table-list__item--margin`}
+            onClick={this.props.onClick}>
+                <div className='table-list__item-content'>
+                    <div className='table-list__item-content-block'>
+                        {this.props.start && this.props.start}
+                    </div>
+                    <div className='table-list__item-content-block table-list__item-content-block--center'>
+                        {this.props.center && this.props.center}
+                    </div>
+                    <div className='table-list__item-content-block'>
+                        {this.props.end && this.props.end}
+                    </div>
+                </div>
+                {this.props.action && <div className='table-list__slide-in-actions'>
+                    {this.props.action}
+                </div>}
+            </li>
+        );
+    }
+}
+
+interface IProps {
+    children?: React.ReactNode;
+    array?: Array<IPropsArray>;
+    addItem?: boolean;
+    dragAndDrop?: boolean;
+    itemsDropdown?: any;
+    className?: string;
+    onClick?(): void;
+}
+
+interface IPropsArray {
+    start?: React.ReactNode;
+    center?: React.ReactNode;
+    end?: React.ReactNode;
+    action?: React.ReactNode;
+}
+
+const reorder = (list, startIndex, endIndex) => {
+  const result = Array.from(list);
+  const [removed] = result.splice(startIndex, 1);
+  result.splice(endIndex, 0, removed);
+
+  return result;
+};
+
+class TableList extends React.PureComponent<IProps, {items: any}> {
+    constructor(props) {
+        super(props);
+        this.state = {
+          items: [],
+        };
+
+        this.onDragEnd = this.onDragEnd.bind(this);
+    }
+
+    componentDidMount(): void {
+        this.setState({items: this.props.array});
+    }
+
+    componentDidUpdate(prevProps: Readonly<IProps>, prevState: Readonly<{ items: any; }>, snapshot?: any): void {
+        if (prevProps.array !== this.props.array) {
+            this.setState({
+                items: this.props.array,
+            });
+        }
+    }
+
+    onDragEnd(result) {
+        if (!result.destination) {
+            return;
+        }
+        const items = reorder(
+            this.state.items,
+            result.source.index,
+            result.destination.index,
+        );
+        this.setState({
+            items,
+        });
+    }
+
+    render() {
+        let classes = classNames({
+            'table-list' : !this.props.addItem,
+            [`${this.props.className}`]: this.props.className,
+        });
+
+        return (
+            this.props.array ?
+                this.props.dragAndDrop ?
+                <DragDropContext onDragEnd={this.onDragEnd}>
+                    <Droppable droppableId="droppable">
+                    {(provided, snapshot) => (
+                        <ul
+                        className={classes}
+                        ref={provided.innerRef}
+                        {...provided.droppableProps} >
+                            {this.state.items.map((item, index) => (
+                                <Draggable key={index} draggableId={`${index}`} index={index}>
+                                    {(provided2, snapshot2) => (
+                                        <div
+                                        ref={provided2.innerRef}
+                                        {...provided2.draggableProps}
+                                        {...provided2.dragHandleProps} >
+                                            <TableListItem
+                                            dragAndDrop={this.props.dragAndDrop}
+                                            start={item.start}
+                                            center={item.center}
+                                            end={item.end}
+                                            action={item.action}
+                                            onClick={item.onClick ? item.onClick : false}
+                                            addItem={this.props.addItem}
+                                            itemsDropdown={this.props.itemsDropdown} />
+                                        </div>
+                                    )}
+                                </Draggable>
+                            ))}
+                            {provided.placeholder}
+                        </ul>
+                    )}
+                    </Droppable>
+                </DragDropContext>
+                : <ul className={classes}>
+                    {this.state.items.map((item, index) => (
+                        <TableListItem
+                        key={index}
+                        start={item.start}
+                        center={item.center}
+                        end={item.end}
+                        action={item.action}
+                        onClick={item.onClick ? item.onClick : false}
+                        addItem={this.props.addItem}
+                        itemsDropdown={this.props.itemsDropdown} />
+                    ))}
+                </ul>
+            : this.props.children &&
+            <ul className={classes}>
+                {this.props.children}
+            </ul>
+        );
+    }
+}
+
+export {
+    TableList, TableListItem
+};

package/app-typescript/components/Menu.tsx

@@ -1,5 +1,9 @@
-import React, {SyntheticEvent} from 'react';
+import * as React from 'react';
+import {SyntheticEvent} from 'react';
+
 import {TieredMenu} from '@superdesk/primereact/tieredmenu';
+import {MenuItem as IPrimeMenuItem} from '@superdesk/primereact/components/menuitem/MenuItem';
+import {assertNever} from '../helpers';
 
 /**
  * Known issues:
@@ -58,6 +62,18 @@ interface IProps {
 
 const superdeskTopBarZIndex = 1030;
 
+function isSeparator(item: IMenuItem): item is ISeparator {
+    return (item as any)['separator'] === true;
+}
+
+function isMenuLeaf(item: IMenuItem): item is IMenuLeaf {
+    return (item as any)['onClick'] != null;
+}
+
+function isMenuBranch(item: IMenuItem): item is IMenuBranch {
+    return isSeparator(item) !== true && isMenuLeaf(item) !== true;
+}
+
 export class Menu extends React.Component<IProps, {}> {
     private menu: TieredMenu | null;
     private focusedBefore: Element | null;
@@ -73,26 +89,34 @@ export class Menu extends React.Component<IProps, {}> {
         this.toPrimeReactInterface = this.toPrimeReactInterface.bind(this);
     }
 
-    private toPrimeReactInterface(items: Array<any>): any {
+    private toPrimeReactInterface(items: Array<IMenuItem>): Array<IPrimeMenuItem> {
         return items.map((item) => {
-            if (item.separator != null) {
+            if (isSeparator(item)) {
                 return {separator: true};
-            } else if (item.children != null) {
+            } else if (isMenuBranch(item)) {
                 return {
                     label: item.label,
                     icon: item.icon,
                     items: this.toPrimeReactInterface(item.children),
                 };
-            } else {
+            } else if (isMenuLeaf(item)) {
                 return {
                     label: item.label,
                     icon: item.icon,
-                    command: (event: SyntheticEvent) => {
-                        this.close(event);
+                    command: (event) => {
+                        /**
+                         * a click on menu item should not trigger other click handlers
+                         * above in the DOM tree. e.g. if menu is inside a clickable list item
+                         */
+                        event.originalEvent.stopPropagation();
+
+                        this.close(event.originalEvent as unknown as SyntheticEvent);
                         item.onClick();
                     },
                     disabled: item.disabled,
                 };
+            } else {
+                return assertNever(item);
             }
         });
     }

package/app-typescript/components/Modal.tsx

@@ -1,38 +1,51 @@
-import React from 'react';
+import * as React from 'react';
 import { Dialog as PrimeDialog } from '@superdesk/primereact/dialog';
+import classNames from 'classnames';
 
 interface IProps {
     id?: string;
     className?: string;
     theme?: string;
     visible?: boolean;
+    contentBg?: 'default' | 'medium' | 'dark';
+    contentPadding?: 'none' | 'small' | 'medium' | 'large';
     size?: 'small' | 'medium' | 'large' | 'x-large';
     maximized?: boolean;
     headerTemplate?: JSX.Element | string;
     footerTemplate?: JSX.Element | string;
     closeOnEscape?: boolean;
+    zIndex?: number;
     onShow?(): void;
     onHide(): void;
 }
 
 export class Modal extends React.Component<IProps, {}> {
     render() {
-        return <div style={{display: 'content'}}
-            data-theme={this.props.theme !== 'dark' ? null : 'dark-ui' }
-            className={this.props.className}>
-            <PrimeDialog
-                id={this.props.id}
-                visible={this.props.visible}
-                header={this.props.headerTemplate}
-                footer={this.props.footerTemplate}
-                closeOnEscape={this.props.closeOnEscape}
-                maximized={this.props.maximized}
-                contentClassName={this.props.size ?
-                    ('p-dialog-content--' + this.props.size) : undefined}
-                onShow={this.props.onShow}
-                onHide={this.props.onHide}>
-                {this.props.children}
-            </PrimeDialog>
-        </div>;
+        let classes = classNames({
+            [`p-dialog-content--${this.props.size}`]: this.props.size,
+            'p-dialog-content--default': this.props.contentBg === undefined,
+            [`p-dialog-content--${this.props.contentBg}`]: this.props.contentBg,
+            'p-dialog-content--s-padding': this.props.contentPadding === undefined,
+            [`p-dialog-content--${this.props.contentPadding}`]: this.props.contentPadding,
+        }, this.props.className);
+        return (
+            <div style={{display: 'content'}}
+                data-theme={this.props.theme !== 'dark' ? null : 'dark-ui' }>
+                <PrimeDialog
+                    id={this.props.id}
+                    visible={this.props.visible}
+                    header={this.props.headerTemplate}
+                    footer={this.props.footerTemplate}
+                    closeOnEscape={this.props.closeOnEscape}
+                    maximized={this.props.maximized}
+                    contentClassName={classes}
+                    onShow={this.props.onShow}
+                    onHide={this.props.onHide}
+                    zIndex={this.props.zIndex}
+                >
+                    {this.props.children}
+                </PrimeDialog>
+            </div>
+        );
     }
 }

package/app-typescript/components/MultiSelect.tsx

@@ -1,6 +1,8 @@
 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>;
@@ -12,26 +14,40 @@ interface IProps<T> {
     maxSelectedLabels?: number;
     selectedItemsLabel?: string;
     ariaLabelledBy?: string;
-    tabIndex?: string;
+    tabIndex?: string | any;
     filter?: boolean;
     showClear?: boolean;
     showSelectAll?: boolean;
     itemTemplate?(item: any): JSX.Element | undefined;
     selectedItemTemplate?(value: any): JSX.Element | undefined;
     onChange(newValue: string): void;
+    invalid?: boolean;
+    inlineLabel?: boolean;
+    labelHidden?: boolean;
+    tabindex?: number;
+    fullWidth?: boolean;
+    info?: string;
+    error?: string;
+    required?: boolean;
+    label?: string;
+    disabled?: boolean;
 }
 
 interface IState<T> {
     options: Array<T>;
     value: Array<T>;
+    invalid: boolean;
 }
 
 export class MultiSelect<T> extends React.Component<IProps<T>, IState<T>> {
+    private htmlId = nextId();
+
     constructor(props: IProps<T>) {
         super(props);
         this.state = {
             value: [],
             options: [],
+            invalid: this.props.invalid ? this.props.invalid : false,
         };
     }
 
@@ -43,7 +59,19 @@ export class MultiSelect<T> extends React.Component<IProps<T>, IState<T>> {
         });
 
         return (
-            <PrimeMultiSelect
+            <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}
@@ -60,10 +88,12 @@ export class MultiSelect<T> extends React.Component<IProps<T>, IState<T>> {
                 selectedItemTemplate={this.props.selectedItemTemplate}
                 maxSelectedLabels={this.props.maxSelectedLabels ?? 4}
                 selectedItemsLabel={this.props.selectedItemsLabel}
-                ariaLabelledBy={this.props.ariaLabelledBy}
-                tabIndex={this.props.tabIndex ?? '0'}
+                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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { Icon } from './Icon';
+import { Badge } from './Badge';
 interface IProps {
     id?: string;
     icon?: string;
@@ -11,6 +12,7 @@ interface IProps {
     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() {
@@ -28,6 +30,8 @@ export class NavButton extends React.PureComponent<IProps> {
                 onClick={this.props.onClick}
                 aria-label={this.props.text}
                 id={this.props.id}>
+                {this.props.badgeValue &&
+                    <Badge text={this.props.badgeValue} type='primary' />}
                 {this.props.icon ? <Icon name={this.props.icon} size={this.props.iconSize} /> : null}
                 {!this.props.icon && this.props.text ?
                     <span className="sd-navbtn__text">{this.props.text}</span> : null}

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

@@ -0,0 +1,83 @@
+import * as React from 'react';
+import { Icon } from '../Icon';
+import { IconButton } from '../IconButton';
+import { clone } from 'lodash';
+
+interface IProps {
+    items: Array<IItem>;
+    side?: 'none' | 'left' | 'right';
+}
+
+interface IItem {
+    icon?: string;
+    active?: boolean;
+    title: string;
+    onClick(event: any): void;
+    onRemove(event: any): void;
+}
+
+interface IState {
+    index: number;
+    closeIndex: number;
+    items: Array<IItem>;
+}
+
+export class BottomNav extends React.PureComponent<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+        this.state = {
+            index: -1,
+            closeIndex: -1,
+            items: this.props.items,
+        };
+        this.handleClick = this.handleClick.bind(this);
+        this.handleDelete = this.handleDelete.bind(this);
+    }
+
+    handleClick(indexNumber: number) {
+        this.setState({
+            index: indexNumber,
+        });
+        if (this.state.index === indexNumber) {
+            this.setState({
+                closeIndex: indexNumber,
+            });
+        }
+    }
+    handleDelete(indexNumber: number) {
+        const newItems = clone(this.state.items);
+        newItems.splice(indexNumber, 1);
+
+        this.setState({
+            items: newItems,
+        });
+    }
+
+    render() {
+        return (
+            <ul className='sd-bottom-nav-list'>
+                {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' : ''))}>
+                            <a className='sd-bottom-nav-list__item-title' onClick={(event) => {
+                                this.handleClick(index);
+                                item.onClick(event);
+                            }}>
+                                {item['icon'] &&
+                                    <Icon name={item['icon']} />
+                                }
+                                <span>{item.title}</span>
+                            </a>
+                            <IconButton
+                                size='small'
+                                icon="close-small"
+                                ariaValue='Delete'
+                                onClick={() => item.onRemove(index)} />
+                        </li>
+                    );
+                })}
+            </ul>
+        );
+    }
+}

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Icon } from '../Icon';
+import { Badge } from '../Badge';
 
 interface IProps {
     items: Array<ISideBarTab | 'divider'>;
@@ -11,6 +12,7 @@ export interface ISideBarTab {
     size: 'small' | 'big'; // defaults to 'small'
     tooltip?: string;
     active?: boolean;
+    badgeValue?: string;
     onClick(event: React.MouseEvent<HTMLButtonElement, MouseEvent>): void;
 }
 
@@ -61,6 +63,14 @@ export class SideBarTabs extends React.PureComponent<IProps, IState> {
                                             ' sd-sidetab-menu__btn--active' :
                                             (index === this.state.index ? ' sd-sidetab-menu__btn--active' : ''))}
                                         onClick={() => this.handleClick(item, index, event)}>
+                                        {
+                                        item['badgeValue'] != null
+                                        ? (
+                                        <Badge text={item['badgeValue']} type='primary' />
+                                        )
+                                        : null
+                                        }
+
                                         <span className='sd-sidetab-menu__main-icon '>
                                             <Icon size={item['size']} name={item['icon']} />
                                         </span>

package/app-typescript/components/SearchBar.tsx

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import {Icon} from './Icon';
+
+interface IProps {
+    value?: string | number;
+    type?: 'expanded' | 'collapsed' | 'boxed';
+    placeholder: string;
+    focused?: boolean;
+    boxed?: boolean;
+    onSubmit?(): void;
+}
+
+interface IState {
+    inputValue: any;
+    type: string;
+    focused: boolean;
+    boxed?: boolean;
+}
+
+export class SearchBar extends React.PureComponent<IProps, IState> {
+    private inputRef: any;
+    constructor(props: IProps) {
+        super(props);
+        this.state = {
+            inputValue: this.props.value ? this.props.value : '',
+            focused: this.props.focused ? this.props.focused : false,
+            type: this.props.type ? this.props.type : 'expanded',
+            boxed: this.props.boxed ? this.props.boxed : false,
+        };
+        this.inputRef = React.createRef();
+    }
+
+    componentDidUpdate(prevProps: any) {
+        if (prevProps.value !== this.props.value) {
+            this.setState({inputValue: this.props.value});
+        }
+    }
+
+    componentDidMount = () => {
+        document.addEventListener("mousedown", (event) => {
+            if (this.inputRef.current && !this.inputRef.current.contains(event.target)) {
+                this.setState({focused: false});
+            }
+        });
+    }
+
+    render() {
+        let classes = classNames('sd-searchbar', {
+            [`sd-searchbar--${this.state.type}`] : this.props.type,
+            'sd-searchbar--expanded': this.state.type === 'expanded' || this.props.type === undefined,
+            'sd-searchbar--focused' : this.state.focused,
+            'sd-searchbar--boxed': this.state.boxed,
+        });
+        return (
+            <div className={classes} ref={this.inputRef}>
+                <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})} />
+                {this.state.inputValue &&
+                <button className="sd-searchbar__cancel" onClick={() => this.setState({inputValue: ''})}>
+                    <Icon name='remove-sign' />
+                </button>}
+                <button
+                id="sd-searchbar__search-btn"
+                className="sd-searchbar__search-btn"
+                onSubmit={() => this.props.onSubmit}>
+                    <Icon name='chevron-right-thin' />
+                </button>
+            </div>
+        );
+    }
+}