superdesk-ui-framework 3.0.1-beta.9 → 3.0.1

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

@@ -4,15 +4,19 @@ import { DragDropContext, Droppable, Draggable, DropResult } from "react-beautif
 import { Tooltip } from '../Tooltip';
 import { Button } from '../Button';
 import { Dropdown, IMenuItem, ISubmenu, IMenuGroup } from '../Dropdown';
+import ReactDOM from 'react-dom';
 
 export interface IProps {
-    children?: React.ReactNode;
     array: Array<IPropsArrayItem>;
     addItem?: boolean;
     dragAndDrop?: boolean;
-    itemsDropdown?: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
     className?: string;
+    readOnly?: boolean;
+    showDragHandle?: 'always' | 'onHover' | 'none'; // always default
+    append?: boolean;
     onDrag?(start: number, end: number): void;
+    onAddItem?(index: number, item?: IPropsArrayItem): void;
+    itemsDropdown?(index?: number): Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
 }
 
 export interface IPropsArrayItem {
@@ -20,7 +24,15 @@ export interface IPropsArrayItem {
     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: Array<IPropsArrayItem>, startIndex: number, endIndex: number) => {
@@ -31,25 +43,30 @@ const reorder = (list: Array<IPropsArrayItem>, startIndex: number, endIndex: num
     return result;
 };
 
-class TableList extends React.PureComponent<IProps, { items: Array<IPropsArrayItem>}> {
-    constructor(props: Readonly<IProps>) {
+class TableList extends React.PureComponent<IProps, IState> {
+    constructor(props: IProps) {
         super(props);
         this.state = {
             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>): 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,
+                });
+            }
         }
     }
 
@@ -63,55 +80,110 @@ class TableList extends React.PureComponent<IProps, { items: Array<IPropsArrayIt
             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({
+        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}>
+            this.state.items.length > 0
+                ? this.props.dragAndDrop
+                    ? <DragDropContext onDragEnd={this.onDragEnd}>
                         <Droppable droppableId="droppable">
                             {(provided, _snapshot) => (
-                                <ul
+                                <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
+                                            {(provided2, snapshot) => (
+                                                this.props.append
+                                                    ? <PortalItem
+                                                        provided={provided2}
+                                                        snapshot={snapshot}
+                                                        item={item}
+                                                        index={index}
                                                         dragAndDrop={this.props.dragAndDrop}
-                                                        start={item.start}
-                                                        center={item.center}
-                                                        end={item.end}
-                                                        action={item.action}
-                                                        onClick={item.onClick ? item.onClick : undefined}
+                                                        showDragHandle={this.props.showDragHandle}
                                                         addItem={this.props.addItem}
-                                                        itemsDropdown={this.props.itemsDropdown} />
-                                                </div>
+                                                        onAddItem={() => this.props.onAddItem
+                                                            && this.props.onAddItem(index, item)}
+                                                        itemsDropdown={() => this.props.itemsDropdown
+                                                            ? this.props.itemsDropdown(index)
+                                                            : []}
+                                                    />
+                                                    : <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}
-                                </ul>
+                                    {(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>
                             )}
                         </Droppable>
                     </DragDropContext>
-                    : <ul className={classes}>
+                    : <div role='list' className={classes}>
                         {this.state.items.map((item: IPropsArrayItem, index: number) => (
                             <TableListItem
                                 key={index}
@@ -120,14 +192,38 @@ class TableList extends React.PureComponent<IProps, { items: Array<IPropsArrayIt
                                 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} />
+                                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)}
+                            />
                         ))}
-                    </ul>
-                : this.props.children &&
-                <ul className={classes}>
-                    {this.props.children}
-                </ul>
+                        {(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
         );
     }
 }
@@ -138,19 +234,74 @@ export interface IPropsItem {
     end?: React.ReactNode;
     action?: React.ReactNode;
     addItem?: boolean;
-    itemsDropdown?: any;
     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 = () => {
+        let selection = window.getSelection();
+        this.timer = setTimeout(() => {
+            if (!this.prevent && this.props.onClick && selection) {
+                if (this.props.dragAndDrop) {
+                    this.props.onClick();
+                } else {
+                    if (selection.toString().length < 1) {
+                        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);
+    }
+
+    onActionMenuClick = (event: React.MouseEvent<HTMLElement>) => {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+
     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 ?
-                <li className='table-list__item-container'>
+                <div 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'}`}>
+                        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}
@@ -162,15 +313,18 @@ class TableListItem extends React.PureComponent<IPropsItem> {
                                 {this.props.end && this.props.end}
                             </div>
                         </div>
-                        {this.props.action && <div className='table-list__slide-in-actions'>
-                            {this.props.action}
-                        </div>}
+                        {this.props.action &&
+                            <div className='table-list__slide-in-actions'
+                                onClick={this.onActionMenuClick}>
+                                {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}>
+                                    onChange={this.props.onAddItem}
+                                    items={this.props.itemsDropdown ? this.props.itemsDropdown() : []}>
                                     <Button
                                         type="primary"
                                         icon="plus-large"
@@ -184,10 +338,13 @@ class TableListItem extends React.PureComponent<IPropsItem> {
                             </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>
+                : <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}
@@ -199,14 +356,59 @@ class TableListItem extends React.PureComponent<IPropsItem> {
                             {this.props.end && this.props.end}
                         </div>
                     </div>
-                    {this.props.action && <div className='table-list__slide-in-actions'>
-                        {this.props.action}
-                    </div>}
-                </li>
+                    {this.props.action &&
+                        <div className='table-list__slide-in-actions'
+                            onClick={this.onActionMenuClick}>
+                            {this.props.action}
+                        </div>}
+                </div>
         );
     }
 }
 
+class PortalItem extends React.PureComponent {
+    props: any;
+    render() {
+        const provided = this.props.provided;
+        const snapshot = this.props.snapshot;
+
+        const usePortal: boolean = snapshot.isDragging;
+
+        const child = (
+            <div
+                ref={provided.innerRef}
+                {...provided.draggableProps}
+                {...provided.dragHandleProps}>
+                <TableListItem
+                    dragAndDrop={this.props.dragAndDrop}
+                    start={this.props.item.start}
+                    center={this.props.item.center}
+                    end={this.props.item.end}
+                    action={this.props.item.action}
+                    onClick={this.props.item.onClick ? this.props.item.onClick : undefined}
+                    onDoubleClick={this.props.item.onDoubleClick
+                        ? this.props.item.onDoubleClick
+                        : undefined}
+                    addItem={this.props.addItem}
+                    itemsDropdown={this.props.itemsDropdown}
+                    hexColor={this.props.item.hexColor}
+                    locked={this.props.item.locked}
+                    positionLocked={this.props.item.positionLocked}
+                    onAddItem={() => this.props.onAddItem}
+                    showDragHandle={this.props.showDragHandle}
+                />
+            </div>
+        );
+
+        if (!usePortal) {
+            return child;
+        }
+
+        // if dragging - put the item in a portal
+        return ReactDOM.createPortal(child, document.body);
+    }
+}
+
 export {
     TableList, TableListItem
 };

package/app-typescript/components/Menu.tsx

@@ -131,7 +131,7 @@ export class Menu extends React.Component<IProps, {}> {
 
     render() {
         return (
-            <div>
+            <React.Fragment>
                 {
                     this.props.children(this.toggle)
                 }
@@ -167,7 +167,7 @@ export class Menu extends React.Component<IProps, {}> {
                         baseZIndex={this.props.zIndex ?? superdeskTopBarZIndex}
                     />
                 </div>
-            </div>
+            </React.Fragment>
         );
     }
 }

package/app-typescript/components/Modal.tsx

@@ -10,7 +10,9 @@ interface IProps {
     contentBg?: 'default' | 'medium' | 'dark';
     contentPadding?: 'none' | 'small' | 'medium' | 'large';
     size?: 'small' | 'medium' | 'large' | 'x-large';
+    position?: "center" | "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
     maximized?: boolean;
+    maximizable?: boolean;
     headerTemplate?: JSX.Element | string;
     footerTemplate?: JSX.Element | string;
     closeOnEscape?: boolean;
@@ -23,8 +25,8 @@ export class Modal extends React.Component<IProps, {}> {
     render() {
         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-bg--default': this.props.contentBg === undefined,
+            [`p-dialog-content-bg--${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);
@@ -38,10 +40,12 @@ export class Modal extends React.Component<IProps, {}> {
                     footer={this.props.footerTemplate}
                     closeOnEscape={this.props.closeOnEscape}
                     maximized={this.props.maximized}
+                    maximizable={this.props.maximizable}
                     contentClassName={classes}
                     onShow={this.props.onShow}
                     onHide={this.props.onHide}
                     zIndex={this.props.zIndex}
+                    position={this.props.position && this.props.position}
                 >
                     {this.props.children}
                 </PrimeDialog>

package/app-typescript/components/MultiSelect.tsx

@@ -20,7 +20,7 @@ interface IProps<T> {
     showSelectAll?: boolean;
     itemTemplate?(item: any): JSX.Element | undefined;
     selectedItemTemplate?(value: any): JSX.Element | undefined;
-    onChange(newValue: string): void;
+    onChange(newValue: T): void;
     invalid?: boolean;
     inlineLabel?: boolean;
     labelHidden?: boolean;

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/SideBarMenu.tsx

@@ -4,6 +4,8 @@ import { Icon } from '../Icon';
 interface IProps {
     items: Array<IItem | 'divider'>;
     side?: 'none' | 'left' | 'right';
+    hover?: boolean;
+    onCLick?(): void;
 }
 
 interface IItem {
@@ -11,11 +13,14 @@ interface IItem {
     size: 'small' | 'big'; // defaults to 'small'
     tooltip?: string;
     active?: boolean;
+    hover?: boolean;
+    onCLick?(): void;
 }
 
 interface IState {
     index: number;
     closeIndex: number;
+    hover: boolean;
 }
 
 export class SideBarMenu extends React.PureComponent<IProps, IState> {
@@ -24,8 +29,10 @@ export class SideBarMenu extends React.PureComponent<IProps, IState> {
         this.state = {
             index: -1,
             closeIndex: -1,
+            hover: this.props.hover ? this.props.hover : false,
         };
         this.handleClick = this.handleClick.bind(this);
+        this.handleArrows = this.handleArrows.bind(this);
     }
 
     handleClick(indexNumber: number) {
@@ -39,10 +46,16 @@ export class SideBarMenu extends React.PureComponent<IProps, IState> {
         }
     }
 
+    handleArrows() {
+        this.setState({
+            hover: !this.state.hover,
+        });
+    }
+
     render() {
         return (
             <div className='sd-sidebar-menu sd-content-wrapper__left-tabs'>
-                <ul className='authoring-active'>
+                <ul className={'authoring-active'}>
                     {this.props.items.map((item, index) => {
                         if (item === 'divider') {
                             return (
@@ -50,9 +63,22 @@ export class SideBarMenu extends React.PureComponent<IProps, IState> {
                             );
                         } else {
                             return (
-                                <li key={index} data-sd-tooltip={item['tooltip']} data-flow='right'>
-                                    <a className={'sd-sidebar-menu__btn' + (index === this.state.closeIndex ? ' sd-sidebar-menu__btn--closed ' : '') + (item['active'] ? ' sd-sidebar-menu__btn--active' : (index === this.state.index ? ' sd-sidebar-menu__btn--active' : ''))}
-                                        onClick={() => this.handleClick(index)}>
+                                <li key={index}
+                                data-sd-tooltip={item['tooltip']}
+                                data-flow='right'
+                                className={item.hover ? 'authoring-active__item' : ''}>
+                                    <a className={'sd-sidebar-menu__btn'
+                                    + (this.state.hover ? ' sd-sidebar-menu__btn--closed ' : '')
+                                    + (item['active'] ? ' sd-sidebar-menu__btn--active' : (index === this.state.index ? ' sd-sidebar-menu__btn--active' : ''))}
+                                        onClick={() => {
+                                            this.handleClick(index);
+                                            if (item.hover) {
+                                                this.handleArrows();
+                                                if (item.onCLick) {
+                                                    item.onCLick();
+                                                }
+                                            }
+                                        }}>
                                         <span className='sd-sidebar-menu__main-icon '>
                                             <Icon size={item['size']} name={item['icon']} />
                                         </span>

package/app-typescript/components/SearchBar.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import {Icon} from './Icon';
 
 interface IProps {
-    value?: string | number;
+    value?: string;
     type?: 'expanded' | 'collapsed' | 'boxed';
     placeholder: string;
     focused?: boolean;
@@ -79,9 +79,17 @@ export class SearchBar extends React.PureComponent<IProps, IState> {
                 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 ${this.state.keyDown ? 'sd-searchbar__search-btn--active' : ''}`}
@@ -91,7 +99,7 @@ export class SearchBar extends React.PureComponent<IProps, IState> {
                     }
                 }}>
                     <Icon name='chevron-right-thin' />
-                </button>
+                </button>}
             </div>
         );
     }