superdesk-ui-framework 3.0.1-beta.6 → 3.0.1-beta.8

package/app-typescript/components/LeftMenu.tsx

@@ -3,150 +3,155 @@ import classNames from "classnames";
 import Scrollspy from "react-scrollspy";
 
 interface IMenuItem {
-  id: string;
-  label: string;
-  route?: string;
-  ref?: string;
-  onClick?(): void;
+    id: string;
+    label: string;
+    route?: string;
+    ref?: string;
+    onClick?(): void;
 }
 
 interface IMenuGroup {
-  label: string;
-  items: Array<IMenuItem>;
+    label: string;
+    items: Array<IMenuItem>;
 }
 
 interface IMenu {
-  className?: string;
-  groups: Array<IMenuGroup>;
-  activeItemId: string;
-  ariaLabel?: string;
-  scrollSpy?: string;
-  offset?: number;
-  reverseItemBorder?: boolean;
-  style?: "default" | "inverse" | "blanc";
-  size?: "medium" | "large";
-  onSelect(id: string, route: string): void;
+    className?: string;
+    groups: Array<IMenuGroup>;
+    activeItemId?: string;
+    scrollTo?: string;
+    ariaLabel?: string;
+    scrollSpy?: string;
+    offset?: number;
+    reverseItemBorder?: boolean;
+    style?: "default" | "inverse" | "blanc";
+    size?: "medium" | "large";
+    onSelect(id: string, route: string): void;
 }
 
 interface IState {
-  active: string;
+    active: string;
 }
 
 export class LeftMenu extends React.PureComponent<IMenu, IState> {
-  constructor(props: IMenu) {
-    super(props);
+    constructor(props: IMenu) {
+        super(props);
 
-    this.state = {
-      active: "",
-    };
-  }
+        this.state = {
+            active: this.props.activeItemId ? this.props.activeItemId : '',
+        };
+    }
+
+    handleClick(item: IMenuItem, event?: React.MouseEvent) {
+        event?.preventDefault();
+
+        this.setState({
+            active: item.id,
+        });
 
-  handleClick(item: IMenuItem, event?: React.MouseEvent) {
-    event?.preventDefault();
+        if (item.ref) {
+            return document
+                .getElementById(item.ref)
+                ?.scrollIntoView({ block: "nearest", behavior: "smooth" });
+        }
 
-    this.setState({
-      active: item.id,
-    });
+        if (item.onClick) {
+            return item.onClick();
+        }
 
-    if (item.ref) {
-      return document
-        .getElementById(item.ref)
-        ?.scrollIntoView({ block: "nearest", behavior: "smooth" });
+        this.props.onSelect(item.id, item.route ? item.route : "");
     }
 
-    if (item.onClick) {
-      return item.onClick();
+    componentDidMount() {
+        if (this.props.scrollTo) {
+            return document
+            .getElementById(this.props.scrollTo)
+            ?.scrollIntoView({ block: "nearest", behavior: "smooth" });
+        }
     }
 
-    this.props.onSelect(item.id, item.route ? item.route : "");
-  }
-
-  render() {
-    let classes = classNames(
-      "sd-left-nav",
-      {
-        "sd-left-nav--default": this.props.style === undefined,
-        [`sd-left-nav--${this.props.style}`]:
-          this.props.style || this.props.style !== undefined,
-        "sd-left-nav--medium": this.props.size === undefined,
-        [`sd-left-nav--${this.props.size}`]:
-          this.props.size || this.props.size !== undefined,
-          "sd-left-nav--reverse-border": this.props.reverseItemBorder,
-      },
-      this.props.className,
-    );
-
-    const scrollspyList = () => {
-      let scrollSpyList: Array<string> = [];
-      let scrollSpyItems: Array<JSX.Element> = [];
-      this.props.groups.map((element, index) => {
-        scrollSpyList = [...scrollSpyList, element.label];
-        scrollSpyItems.push(
-          <span className="sd-left-nav__group-header" key={"group-" + index}>
-            {element.label}
-          </span>,
+    render() {
+        let classes = classNames(
+            "sd-left-nav",
+            {
+                "sd-left-nav--default": this.props.style === undefined,
+                [`sd-left-nav--${this.props.style}`]:
+                this.props.style || this.props.style !== undefined,
+                "sd-left-nav--medium": this.props.size === undefined,
+                [`sd-left-nav--${this.props.size}`]:
+                this.props.size || this.props.size !== undefined,
+                "sd-left-nav--reverse-border": this.props.reverseItemBorder,
+            },
+            this.props.className,
         );
 
-        element.items.map((elementOfItem, indexOfItem) => {
-          scrollSpyList = [...scrollSpyList, `${elementOfItem.ref}`];
-
-          scrollSpyItems.push(
-            <a
-              key={"item-" + indexOfItem}
-              onClick={(event) => {
-                this.handleClick(elementOfItem, event);
-              }}
-              className="sd-left-nav__btn"
-            >
-              {elementOfItem.label}
-            </a>,
-          );
-        });
-      });
-
-      return (
-        <Scrollspy
-          offset={this.props.offset ? this.props.offset : -300}
-          items={scrollSpyList}
-          rootEl={this.props.scrollSpy}
-          currentClassName="sd-left-nav__btn--active"
-        >
-          {scrollSpyItems.map((element) => element)}
-        </Scrollspy>
-      );
-    };
-
-    const defaultList = () => {
-      return this.props.groups.map((group, i) => {
+        const scrollspyList = () => {
+            let scrollSpyList: Array<string> = [];
+            let scrollSpyItems: Array<JSX.Element> = [];
+            this.props.groups.map((element, index) => {
+                scrollSpyList = [...scrollSpyList, element.label];
+                scrollSpyItems.push(
+                    <span className="sd-left-nav__group-header" key={"group-" + index}>
+                        {element.label}
+                    </span>,
+                );
+
+                element.items.map((elementOfItem, indexOfItem) => {
+                scrollSpyList = [...scrollSpyList, `${elementOfItem.ref}`];
+
+                scrollSpyItems.push(
+                    <a key={"item-" + indexOfItem}
+                    onClick={(event) => {
+                    this.handleClick(elementOfItem, event);
+                    }}
+                    className="sd-left-nav__btn" >
+                        {elementOfItem.label}
+                    </a>,
+                );
+                });
+            });
+
+            return (
+                <Scrollspy
+                offset={this.props.offset ? this.props.offset : -300}
+                items={scrollSpyList}
+                rootEl={this.props.scrollSpy}
+                currentClassName="sd-left-nav__btn--active" >
+                    {scrollSpyItems.map((element) => element)}
+                </Scrollspy>
+            );
+        };
+
+        const defaultList = () => {
+            return this.props.groups.map((group, i) => {
+                return (
+                    <React.Fragment key={i}>
+                    <span className="sd-left-nav__group-header">{group.label}</span>
+                    {group.items.map((item, j) => {
+                        return (
+                        <button
+                        key={j}
+                        onClick={(event) => {
+                        this.handleClick(item, event);
+                        }}
+                        className={
+                        item.id === this.state.active
+                            ? "sd-left-nav__btn sd-left-nav__btn--active"
+                            : "sd-left-nav__btn"
+                        }>
+                            {item.label}
+                        </button>
+                        );
+                    })}
+                    </React.Fragment>
+                );
+            });
+        };
+
         return (
-          <React.Fragment key={i}>
-            <span className="sd-left-nav__group-header">{group.label}</span>
-            {group.items.map((item, j) => {
-              return (
-                <button
-                  key={j}
-                  onClick={(event) => {
-                    this.handleClick(item, event);
-                  }}
-                  className={
-                    item.id === this.state.active
-                      ? "sd-left-nav__btn sd-left-nav__btn--active"
-                      : "sd-left-nav__btn"
-                  }
-                >
-                  {item.label}
-                </button>
-              );
-            })}
-          </React.Fragment>
+            <nav className={classes} aria-label={this.props.ariaLabel}>
+                {this.props.scrollSpy ? scrollspyList() : defaultList()}
+            </nav>
         );
-      });
-    };
-
-    return (
-      <nav className={classes} aria-label={this.props.ariaLabel}>
-        {this.props.scrollSpy ? scrollspyList() : defaultList()}
-      </nav>
-    );
-  }
+    }
 }

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

@@ -1,125 +1,51 @@
 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 {
+export interface IProps {
     children?: React.ReactNode;
-    array?: Array<IPropsArray>;
+    array: Array<IPropsArrayItem>;
     addItem?: boolean;
     dragAndDrop?: boolean;
-    itemsDropdown?: any;
+    itemsDropdown?: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
     className?: string;
-    onClick?(): void;
+    onDrag?(start: number, end: number): void;
 }
 
-interface IPropsArray {
+export interface IPropsArrayItem {
     start?: React.ReactNode;
     center?: React.ReactNode;
     end?: React.ReactNode;
     action?: React.ReactNode;
+    onClick?(): void;
 }
 
-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, { items: Array<IPropsArrayItem>}> {
+    constructor(props: Readonly<IProps>) {
         super(props);
         this.state = {
-          items: [],
+            items: [],
         };
 
         this.onDragEnd = this.onDragEnd.bind(this);
     }
 
     componentDidMount(): void {
-        this.setState({items: this.props.array});
+        this.setState({ items: this.props.array });
     }
 
-    componentDidUpdate(prevProps: Readonly<IProps>, prevState: Readonly<{ items: any; }>, snapshot?: any): void {
+    componentDidUpdate(prevProps: Readonly<IProps>): void {
         if (prevProps.array !== this.props.array) {
             this.setState({
                 items: this.props.array,
@@ -127,7 +53,7 @@ class TableList extends React.PureComponent<IProps, {items: any}> {
         }
     }
 
-    onDragEnd(result) {
+    onDragEnd(result: DropResult) {
         if (!result.destination) {
             return;
         }
@@ -139,66 +65,144 @@ class TableList extends React.PureComponent<IProps, {items: any}> {
         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,
+            '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} />
-                    ))}
+                    <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>
-            : 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>
         );
     }
 }