superdesk-ui-framework 3.0.0-beta.0 → 3.0.1-beta.10

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

@@ -0,0 +1,169 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+class BoxedListMedia extends React.PureComponent {
+    render() {
+        return (
+            <div className='boxed-list__item-media'>
+                {this.props.children}
+            </div>
+        );
+    }
+}
+
+class BoxedListContent extends React.PureComponent {
+    render() {
+        return (
+            <div className='boxed-list__item-content'>
+                {this.props.children}
+            </div>
+        );
+    }
+}
+
+class BoxedListContentRow extends React.PureComponent {
+    render() {
+        return (
+            <div className='boxed-list__item-content-row'>
+                {this.props.children}
+            </div>
+        );
+    }
+}
+
+class BoxedListFooter extends React.PureComponent {
+    render() {
+        return (
+            <div className='boxed-list__item-footer'>
+                {this.props.children}
+            </div>
+        );
+    }
+}
+
+interface IPropsActions {
+    children?: React.ReactNode;
+    slideIn?: boolean; // defaults to 'compact'
+}
+
+class BoxedListActions extends React.PureComponent<IPropsActions> {
+    public rootElement?: HTMLDivElement | null;
+
+    render() {
+        let classes = classNames({
+            'boxed-list__actions--static': this.props.slideIn === undefined,
+            'boxed-list__actions--slide-in': this.props.slideIn === true || this.props.slideIn !== undefined,
+        });
+        return (
+            <div
+                className={classes}
+                ref={(el) => {
+                    this.rootElement = el;
+                }}
+            >
+                {this.props.children}
+            </div>
+        );
+    }
+}
+
+interface IPropsItem {
+    media?: React.ReactNode;
+    footer?: React.ReactNode;
+    actions?: React.ReactNode;
+    children?: React.ReactNode;
+    density?: 'compact' | 'comfortable' | 'loose';
+    type?: 'default' | 'primary' | 'success' | 'warning' | 'alert' | 'highlight'; // defaults to 'default'
+    clickable?: boolean;
+    alignVertical?: 'start' | 'center';
+    slideInActions?: boolean;
+    selected?: boolean;
+    unread?: boolean;
+    onClick?(): void;
+}
+
+class BoxedListItem extends React.PureComponent<IPropsItem> {
+    private actionsRef: BoxedListActions | null;
+
+    constructor(props: IPropsItem) {
+        super(props);
+
+        this.actionsRef = null;
+        this.handleClick = this.handleClick.bind(this);
+    }
+
+    handleClick(event: React.MouseEvent<HTMLLIElement, MouseEvent>) {
+        if (this.actionsRef?.rootElement != null && this.actionsRef.rootElement.contains(event.target as HTMLElement)) {
+            return;
+        } else {
+            this.props.onClick?.();
+        }
+    }
+
+    render() {
+        let classes = classNames('boxed-list__item', {
+            'boxed-list__item--comfortable': this.props.density === undefined,
+            [`boxed-list__item--${this.props.density}`]: this.props.density || this.props.density !== undefined,
+            'boxed-list__item--clickable': this.props.clickable === true,
+            'boxed-list__item--selected': this.props.selected,
+            'boxed-list__item--unread': this.props.unread,
+            [`boxed-list__item--${this.props.type}`]: this.props.type || this.props.type !== undefined,
+            [`boxed-list__item--align-${this.props.alignVertical}`]: this.props.alignVertical,
+        });
+        return (
+            <li className={classes} onClick={this.handleClick}>
+
+                {this.props.media && (
+                    <BoxedListMedia>
+                        {this.props.media}
+                    </BoxedListMedia>
+                )}
+
+                <BoxedListContent>
+                    {this.props.children}
+                </BoxedListContent>
+
+                {this.props.footer && (
+                    <BoxedListFooter>
+                        {this.props.footer}
+                    </BoxedListFooter>
+                )}
+
+                {this.props.actions && (
+                    <BoxedListActions
+                        slideIn={this.props.slideInActions}
+                        ref={(ref) => {
+                            this.actionsRef = ref;
+                        }}
+                    >
+                        {this.props.actions}
+                    </BoxedListActions>
+                )}
+            </li>
+        );
+    }
+}
+
+interface IProps {
+    children?: React.ReactNode;
+    density?: 'compact' | 'comfortable'; // defaults to 'compact'
+    className?: string;
+}
+
+class BoxedList extends React.PureComponent<IProps> {
+    render() {
+        let classes = classNames('boxed-list', {
+            'boxed-list--compact': this.props.density === undefined,
+            [`boxed-list--${this.props.density}`]: this.props.density || this.props.density !== undefined,
+        }, this.props.className);
+        return (
+            <ul className={classes}>
+                {this.props.children}
+            </ul>
+        );
+    }
+}
+
+export {
+    BoxedList, BoxedListItem, BoxedListContentRow, BoxedListActions, BoxedListFooter
+};

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

@@ -0,0 +1,100 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+interface IPropsItem {
+    action?: React.ReactNode;
+    locked?: boolean;
+    itemColum: Array<{itemRow: Array<{content: any}>, border?: boolean, fullwidth?: boolean}>;
+    activated?: boolean;
+    selected?: boolean;
+    archived?: boolean;
+    loading?: boolean;
+    onClick?(): void;
+    onDoubleClick?(): void;
+}
+
+class ContentListItem extends React.PureComponent<IPropsItem> {
+    render() {
+        let classes = classNames('sd-list-item sd-list-item-group sd-list-item-group--space-between-items', {
+            'sd-list-item--activated': this.props.activated,
+            'sd-list-item--selected': this.props.selected,
+            '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">
+                    {this.props.locked
+                    ? <div className="sd-list-item__border sd-list-item__border--locked"></div>
+                    : <div className="sd-list-item__border"></div>}
+                    {this.props.itemColum.map((item, index) => {
+                        return <div
+                        className={`sd-list-item__column ${item.fullwidth && 'sd-list-item__column--grow'} ${!item.border && 'sd-list-item__column--no-border'}`}
+                        key={index}>
+                        {item.itemRow.map((e, i) => {
+                            return (
+                                item.itemRow.length <= 1
+                                ? <React.Fragment key={i}>{e.content}</React.Fragment>
+                                : <div className="sd-list-item__row" key={i}>
+                                    {e.content}
+                                </div>
+                            );
+                        })}
+                        </div>;
+                    })}
+                    <div className="sd-list-item__action-menu">
+                        {this.props.action}
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+interface IProps {
+    items: Array<{
+        itemColum: Array<IItemArray>,
+        locked?: boolean,
+        action?: React.ReactNode,
+        loading?: boolean,
+        activated?: boolean,
+        selected?: boolean,
+        archived?: boolean,
+        onClick?(): void,
+        onDoubleClick?(): void;
+    }>;
+}
+
+interface IItemArray {
+    itemRow: Array<{content: React.ReactNode}>;
+    border?: boolean;
+    fullwidth?: boolean;
+}
+
+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}>
+                {this.props.items.map((item, index) => {
+                    return <ContentListItem
+                    key={index}
+                    itemColum={item.itemColum}
+                    locked={item.locked}
+                    action={item.action}
+                    loading={item.loading}
+                    activated={item.activated}
+                    selected={item.selected}
+                    archived={item.archived}
+                    onClick={item.onClick}
+                    onDoubleClick={item.onDoubleClick} />;
+                })}
+            </ul>
+        );
+    }
+}
+
+export {
+    ContentList, ContentListItem
+};

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

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+interface IProps {
+    children?: React.ReactNode;
+    density?: 'compact' | 'comfortable' | 'loose'; // defaults to 'compact'
+    border?: boolean;
+    className?: string;
+    width?: 'none' | 'x-small' | 'small' | 'medium' | 'large';
+    id?: string;
+}
+
+interface IPropsItem {
+    stacked?: boolean;
+    justify?: 'flex-start' | 'flex-end' | 'center' | 'space-between';
+    id?: string;
+}
+
+class SimpleListItem extends React.PureComponent<IPropsItem> {
+    render() {
+        let classes = classNames('simple-list__item', {
+            'simple-list__item--stacked': this.props.stacked,
+            'simple-list__item--justify-flex-start': this.props.justify === undefined,
+            [`simple-list__item--justify-${this.props.justify}`]:
+                this.props.justify || this.props.justify !== undefined,
+        });
+        return (
+            <li className={classes} id={this.props.id || undefined}>
+                {this.props.children}
+            </li>
+        );
+    }
+}
+
+class SimpleList extends React.PureComponent<IProps> {
+    render() {
+        let classes = classNames('simple-list', {
+            'simple-list--compact': this.props.density === undefined,
+            'simple-list--dotted': this.props.border === true,
+            [`simple-list--${this.props.density}`]: this.props.density || this.props.density !== undefined,
+            '': this.props.width === undefined,
+            [`simple-list--fixedW-${this.props.width}`]: this.props.width || this.props.width !== undefined,
+        }, this.props.className);
+        return (
+            <ul className={classes} id={this.props.id || undefined}>
+                {this.props.children}
+            </ul>
+        );
+    }
+}
+
+export {
+    SimpleList, SimpleListItem
+};

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

@@ -0,0 +1,212 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { DragDropContext, Droppable, Draggable, DropResult } from "react-beautiful-dnd";
+import { Tooltip } from '../Tooltip';
+import { Button } from '../Button';
+import { Dropdown, IMenuItem, ISubmenu, IMenuGroup } from '../Dropdown';
+
+export interface IProps {
+    children?: React.ReactNode;
+    array: Array<IPropsArrayItem>;
+    addItem?: boolean;
+    dragAndDrop?: boolean;
+    itemsDropdown?: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
+    className?: string;
+    onDrag?(start: number, end: number): void;
+}
+
+export interface IPropsArrayItem {
+    start?: React.ReactNode;
+    center?: React.ReactNode;
+    end?: React.ReactNode;
+    action?: React.ReactNode;
+    onClick?(): void;
+}
+
+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;
+};
+
+class TableList extends React.PureComponent<IProps, { items: Array<IPropsArrayItem>}> {
+    constructor(props: Readonly<IProps>) {
+        super(props);
+        this.state = {
+            items: [],
+        };
+
+        this.onDragEnd = this.onDragEnd.bind(this);
+    }
+
+    componentDidMount(): void {
+        this.setState({ items: this.props.array });
+    }
+
+    componentDidUpdate(prevProps: Readonly<IProps>): void {
+        if (prevProps.array !== this.props.array) {
+            this.setState({
+                items: this.props.array,
+            });
+        }
+    }
+
+    onDragEnd(result: DropResult) {
+        if (!result.destination) {
+            return;
+        }
+        const items = reorder(
+            this.state.items,
+            result.source.index,
+            result.destination.index,
+        );
+        this.setState({
+            items,
+        });
+
+        return this.props.onDrag ?
+            this.props.onDrag(result.source.index, result.destination.index) : null;
+    }
+
+    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: 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}
+                                                        addItem={this.props.addItem}
+                                                        itemsDropdown={this.props.itemsDropdown} />
+                                                </div>
+                                            )}
+                                        </Draggable>
+                                    ))}
+                                    {provided.placeholder}
+                                </ul>
+                            )}
+                        </Droppable>
+                    </DragDropContext>
+                    : <ul 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}
+                                addItem={this.props.addItem}
+                                itemsDropdown={this.props.itemsDropdown} />
+                        ))}
+                    </ul>
+                : this.props.children &&
+                <ul className={classes}>
+                    {this.props.children}
+                </ul>
+        );
+    }
+}
+
+export 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>
+        );
+    }
+}
+
+export {
+    TableList, TableListItem
+};

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

@@ -0,0 +1,2 @@
+export { SimpleList, SimpleListItem } from './SimpleList';
+export { BoxedList, BoxedListItem, BoxedListContentRow } from './BoxedList';

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' ? '' : '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>
+        );
     }
 }