superdesk-ui-framework 3.0.1-beta.2 → 3.0.1-beta.22

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

@@ -7,24 +7,53 @@ interface IPropsItem {
     itemColum: Array<{itemRow: Array<{content: any}>, border?: boolean, fullwidth?: boolean}>;
     activated?: boolean;
     selected?: boolean;
-    fetched?: boolean;
+    archived?: boolean;
     loading?: boolean;
     onClick?(): void;
     onDoubleClick?(): void;
 }
 
 class ContentListItem extends React.PureComponent<IPropsItem> {
+
+    private timer: any;
+    private delay = 200;
+    private prevent = false;
+
+    onSingleClick = () => {
+        this.timer = setTimeout(() => {
+            if (!this.prevent) {
+                if (this.props.onClick) {
+                    this.props.onClick();
+                }
+            }
+        }, this.delay);
+    }
+
+    onDoubleClick = () => {
+        clearTimeout(this.timer);
+        this.prevent = true;
+        if (this.props.onDoubleClick) {
+            this.props.onDoubleClick();
+        }
+        setTimeout(() => {
+            this.prevent = false;
+        }, this.delay);
+    }
+
     render() {
-        let classes = classNames('sd-list-item sd-list-item-group sd-list-item-group--space-between-items', {
+        let classes = classNames('sd-list-item sd-shadow--z1', {
             'sd-list-item--activated': this.props.activated,
             'sd-list-item--selected': this.props.selected,
-            'fetched': this.props.fetched,
+            'fetched': this.props.archived,
             'actioning': this.props.loading,
     });
 
         return (
-            <div className={classes} onClick={this.props.onClick} onDoubleClick={this.props.onDoubleClick}>
-                <div className="sd-list-item sd-shadow--z1">
+                <div
+                role='listitem'
+                className={classes}
+                onClick={this.onSingleClick}
+                onDoubleClick={this.onDoubleClick}>
                     {this.props.locked
                     ? <div className="sd-list-item__border sd-list-item__border--locked"></div>
                     : <div className="sd-list-item__border"></div>}
@@ -47,7 +76,6 @@ class ContentListItem extends React.PureComponent<IPropsItem> {
                         {this.props.action}
                     </div>
                 </div>
-            </div>
         );
     }
 }
@@ -60,7 +88,7 @@ interface IProps {
         loading?: boolean,
         activated?: boolean,
         selected?: boolean,
-        fetched?: boolean,
+        archived?: boolean,
         onClick?(): void,
         onDoubleClick?(): void;
     }>;
@@ -76,7 +104,7 @@ class ContentList extends React.PureComponent<IProps> {
     render() {
         let classes = classNames('sd-list-item-group sd-list-item-group--space-between-items');
         return (
-            <ul className={classes}>
+            <div role='list' className={classes}>
                 {this.props.items.map((item, index) => {
                     return <ContentListItem
                     key={index}
@@ -86,11 +114,11 @@ class ContentList extends React.PureComponent<IProps> {
                     loading={item.loading}
                     activated={item.activated}
                     selected={item.selected}
-                    fetched={item.fetched}
+                    archived={item.archived}
                     onClick={item.onClick}
                     onDoubleClick={item.onDoubleClick} />;
                 })}
-            </ul>
+            </div>
         );
     }
 }

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

@@ -1,133 +1,74 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
+import { DragDropContext, Droppable, Draggable, DropResult } from "react-beautiful-dnd";
 import { Tooltip } from '../Tooltip';
 import { Button } from '../Button';
-import { Dropdown } from '../Dropdown';
+import { Dropdown, IMenuItem, ISubmenu, IMenuGroup } 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>;
+export interface IProps {
+    array: Array<IPropsArrayItem>;
     addItem?: boolean;
     dragAndDrop?: boolean;
-    itemsDropdown?: any;
     className?: string;
-    onClick?(): void;
+    readOnly?: boolean;
+    showDragHandle?: 'always' | 'onHover' | 'none'; // always default
+    onDrag?(start: number, end: number): void;
+    onAddItem?(index: number, item?: IPropsArrayItem ): void;
+    itemsDropdown?(index?: number): Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
 }
 
-interface IPropsArray {
+export interface IPropsArrayItem {
     start?: React.ReactNode;
     center?: React.ReactNode;
     end?: React.ReactNode;
     action?: React.ReactNode;
+    hexColor?: string;
+    onClick?(): void;
+    onDoubleClick?(): void;
+    locked?: boolean;
+    positionLocked?: boolean;
+}
+
+interface IState {
+    items: Array<IPropsArrayItem>;
 }
 
-const reorder = (list, startIndex, endIndex) => {
-  const result = Array.from(list);
-  const [removed] = result.splice(startIndex, 1);
-  result.splice(endIndex, 0, removed);
+const reorder = (list: Array<IPropsArrayItem>, startIndex: number, endIndex: number) => {
+    const result = Array.from(list);
+    const [removed] = result.splice(startIndex, 1);
+    result.splice(endIndex, 0, removed);
 
-  return result;
+    return result;
 };
 
-class TableList extends React.PureComponent<IProps, {items: any}> {
-    constructor(props) {
+class TableList extends React.PureComponent<IProps, IState> {
+    constructor(props: IProps) {
         super(props);
         this.state = {
-          items: [],
+            items: [],
         };
 
         this.onDragEnd = this.onDragEnd.bind(this);
+        this.dropDown = this.dropDown.bind(this);
     }
 
     componentDidMount(): void {
-        this.setState({items: this.props.array});
+        if (this.props.array) {
+            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,
-            });
+    componentDidUpdate(prevProps: IProps): void {
+        if (this.props.array) {
+            if (prevProps.array !== this.props.array) {
+                this.setState({
+                    items: this.props.array,
+                });
+            }
         }
     }
 
-    onDragEnd(result) {
+    onDragEnd(result: DropResult) {
         if (!result.destination) {
             return;
         }
@@ -137,68 +78,259 @@ class TableList extends React.PureComponent<IProps, {items: any}> {
             result.destination.index,
         );
         this.setState({
-            items,
+            items: items,
         });
+
+        return this.props.onDrag ?
+            this.props.onDrag(result.source.index, result.destination.index) : null;
+    }
+
+    dropDown() {
+        return (
+            <Dropdown
+                items={this.props.itemsDropdown ? this.props.itemsDropdown() : []}>
+                <Button
+                    type="primary"
+                    icon="plus-large"
+                    text="Add item"
+                    size="small"
+                    shape="round"
+                    iconOnly={true}
+                    onClick={() => false}
+                />
+            </Dropdown>
+        );
     }
 
     render() {
-        let classes = classNames({
-            'table-list' : !this.props.addItem,
+        let classes = classNames('', {
+            'table-list': !this.props.addItem,
+            'table-list--read-only': this.props.readOnly,
             [`${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} />
+            this.state.items.length > 0
+                ? this.props.dragAndDrop
+                    ? <DragDropContext onDragEnd={this.onDragEnd}>
+                        <Droppable droppableId="droppable">
+                            {(provided, _snapshot) => (
+                                <div
+                                    role='list'
+                                    className={classes}
+                                    ref={provided.innerRef}
+                                    {...provided.droppableProps} >
+                                    {this.state.items.map((item: IPropsArrayItem, index: number) => (
+                                        <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 : undefined}
+                                                        onDoubleClick={item.onDoubleClick
+                                                            ? item.onDoubleClick
+                                                            : undefined}
+                                                        addItem={this.props.addItem}
+                                                        itemsDropdown={() => this.props.itemsDropdown
+                                                            ? this.props.itemsDropdown(index)
+                                                            : []}
+                                                        hexColor={item.hexColor}
+                                                        locked={item.locked}
+                                                        positionLocked={item.positionLocked}
+                                                        onAddItem={() => this.props.onAddItem
+                                                            && this.props.onAddItem(index, item)}
+                                                        showDragHandle={this.props.showDragHandle}
+                                                    />
+                                                </div>
+                                            )}
+                                        </Draggable>
+                                    ))}
+                                    {provided.placeholder}
+                                    {(this.props.addItem && !this.props.readOnly) &&
+                                        <div className={`table-list__add-item table-list__item--margin`}>
+                                            <Tooltip text='Add item' flow='top' appendToBody={true}>
+                                                <div className='table-list__add-item--container sd-margin-x--auto'>
+                                                    {this.dropDown()}
+                                                </div>
+                                            </Tooltip>
                                         </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>
+                                    }
+                                </div>
+                            )}
+                        </Droppable>
+                    </DragDropContext>
+                    : <div role='list' className={classes}>
+                        {this.state.items.map((item: IPropsArrayItem, index: number) => (
+                            <TableListItem
+                                key={index}
+                                start={item.start}
+                                center={item.center}
+                                end={item.end}
+                                action={item.action}
+                                onClick={item.onClick ? item.onClick : undefined}
+                                onDoubleClick={item.onDoubleClick
+                                    ? item.onDoubleClick
+                                    : undefined}
+                                addItem={this.props.addItem}
+                                itemsDropdown={() => this.props.itemsDropdown ? this.props.itemsDropdown(index) : []}
+                                hexColor={item.hexColor}
+                                locked={item.locked}
+                                positionLocked={item.positionLocked}
+                                onAddItem={() => this.props.onAddItem
+                                    && this.props.onAddItem(index, item)}
+                            />
+                        ))}
+                        {(this.props.addItem && !this.props.readOnly) &&
+                            <div className={`table-list__add-item table-list__item--margin`}>
+                                <Tooltip text='Add item' flow='top' appendToBody={true}>
+                                    <div className='table-list__add-item--container sd-margin-x--auto'>
+                                        {this.dropDown()}
+                                    </div>
+                                </Tooltip>
+                            </div>
+                        }
+                    </div>
+                : (this.props.addItem && !this.props.readOnly) ? <div role='list' className={classes}>
+                    <div className={`table-list__add-item table-list__item--margin`}>
+                        <Tooltip text='Add item' flow='top' appendToBody={true}>
+                            <div className='table-list__add-item--container sd-margin-x--auto'>
+                                {this.dropDown()}
+                            </div>
+                        </Tooltip>
+                    </div>
+                </div>
+                : null
+        );
+    }
+}
+
+export interface IPropsItem {
+    start?: React.ReactNode;
+    center?: React.ReactNode;
+    end?: React.ReactNode;
+    action?: React.ReactNode;
+    addItem?: boolean;
+    dragAndDrop?: boolean;
+    hexColor?: string;
+    showDragHandle?: 'always' | 'onHover' | 'none';
+    locked?: boolean;
+    positionLocked?: boolean;
+    onClick?(): void;
+    onDoubleClick?(): void;
+    onSelect?(): void;
+    onAddItem?(e: number): void;
+    itemsDropdown?(index?: number): Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
+}
+
+class TableListItem extends React.PureComponent<IPropsItem> {
+    private timer: any;
+    private delay = 200;
+    private prevent = false;
+
+    onSingleClick = () => {
+        this.timer = setTimeout(() => {
+            if (!this.prevent) {
+                if (this.props.onClick) {
+                    this.props.onClick();
+                }
+            }
+        }, this.delay);
+    }
+
+    onDoubleClick = () => {
+        clearTimeout(this.timer);
+        this.prevent = true;
+        if (this.props.onDoubleClick) {
+            this.props.onDoubleClick();
+        }
+        setTimeout(() => {
+            this.prevent = false;
+        }, this.delay);
+    }
+
+    render() {
+
+        let classes = classNames('table-list__item', {
+            'table-list__item--clickable': this.props.onClick,
+            'table-list__item--draggable': this.props.dragAndDrop,
+            'table-list__item--locked': this.props.locked,
+            'table-list__item--position-locked': this.props.positionLocked,
+            'table-list__item--drag-handles-always': !this.props.showDragHandle,
+            'table-list__item--drag-handles-none': this.props.showDragHandle === 'none',
+        });
+
+        return (
+            this.props.addItem ?
+                <div className='table-list__item-container'>
+                    <div
+                        role='listitem'
+                        onClick={() => this.onSingleClick()}
+                        onDoubleClick={() => this.onDoubleClick()}
+                        className={classes}>
+                        <div className='table-list__item-border' style={{backgroundColor: this.props.hexColor}}></div>
+                        <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
+                                    onChange={this.props.onAddItem}
+                                    items={this.props.itemsDropdown ? this.props.itemsDropdown() : []}>
+                                    <Button
+                                        type="primary"
+                                        icon="plus-large"
+                                        text="Add item"
+                                        size="small"
+                                        shape="round"
+                                        iconOnly={true}
+                                        onClick={() => false }
+                                    />
+                                </Dropdown>
+                            </div>
+                        </Tooltip>
+                    </div>
+                </div>
+                : <div
+                    role='listitem'
+                    className={`${classes} table-list__item--margin`}
+                    onClick={() => this.onSingleClick()}
+                    onDoubleClick={() => this.onDoubleClick()}>
+                    <div className='table-list__item-border' style={{backgroundColor: this.props.hexColor}}></div>
+                    <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>
         );
     }
 }

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);
             }
         });
     }