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

package/app-typescript/components/LeftMenu.tsx

@@ -1,72 +1,146 @@
-import * as React from 'react';
-import classNames from 'classnames';
+import * as React from "react";
+import classNames from "classnames";
+import Scrollspy from "react-scrollspy";
 
 interface IMenuItem {
-    id: string;
-    label: string;
-    route?: string;
+  id: string;
+  label: string;
+  route?: string;
+  ref?: string;
+  onClick?(): void;
 }
 
 interface IMenuGroup {
-    label: string;
-    items: Array<IMenuItem>;
+  label: string;
+  items: Array<IMenuItem>;
 }
 
 interface IMenu {
-    navClass?: string;
-    groups: Array<IMenuGroup>;
-    activeItemId: string;
-    ariaLabel?: string;
-    onSelect(id: string, route: string): void;
+  className?: string;
+  groups: Array<IMenuGroup>;
+  activeItemId: string;
+  ariaLabel?: string;
+  scrollSpy?: string;
+  offset?: number;
+  style?: "default" | "inverse" | "blanc";
+  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: "",
+    };
+  }
+
+  handleClick(item: IMenuItem, event?: React.MouseEvent) {
+    event?.preventDefault();
+
+    this.setState({
+      active: item.id,
+    });
 
-        this.state = {
-            active: '',
-        };
+    if (item.ref) {
+      return document
+        .getElementById(item.ref)
+        ?.scrollIntoView({ block: "nearest", behavior: "smooth" });
     }
 
-    handleClick(id: string, route: string) {
-        this.setState({
-            active: id,
-        });
-        this.props.onSelect(id, route);
+    if (item.onClick) {
+      return item.onClick();
     }
 
-    render() {
-        let classes = classNames('sd-left-nav', {
-            [`${this.props.navClass}`]: this.props.navClass,
+    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,
+      },
+      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>,
+        );
+
+        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 (
-            <nav className={classes} aria-label={this.props.ariaLabel}>
-                {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={() => {
-                                            this.handleClick(item.id, item.route ? item.route : '');
-                                        }}
-                                        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>
+          <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 (
+      <nav className={classes} aria-label={this.props.ariaLabel}>
+        {this.props.scrollSpy ? scrollspyList() : defaultList()}
+      </nav>
+    );
+  }
 }

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

@@ -0,0 +1,133 @@
+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> {
+    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}>
+                {this.props.children}
+            </div>
+        );
+    }
+}
+
+interface IPropsItem {
+    media?: React.ReactNode;
+    footer?: React.ReactNode;
+    actions?: React.ReactNode;
+    children?: React.ReactNode;
+    type?: 'default' | 'primary' | 'success' | 'warning' | 'alert' | 'highlight'; // defaults to 'default'
+    clickable?: boolean;
+    slideInActions?: boolean;
+    selected?: boolean;
+    onClick?(): void;
+}
+
+class BoxedListItem extends React.PureComponent<IPropsItem> {
+    render() {
+        let classes = classNames('boxed-list__item', {
+            'simple-list--compact': this.props.type === undefined,
+            'boxed-list__item--clickable': this.props.clickable === true,
+            'boxed-list__item--selected': this.props.selected,
+            [`boxed-list__item--${this.props.type}`]: this.props.type || this.props.type !== undefined,
+        });
+        return (
+            <li className={classes}>
+
+                {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}>
+                        {this.props.actions}
+                    </BoxedListActions>
+                )}
+            </li>
+        );
+    }
+}
+
+interface IProps {
+    children?: React.ReactNode;
+    density?: 'compact' | 'comfortable'; // defaults to 'compact'
+}
+
+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,
+        });
+        return (
+            <ul className={classes}>
+                {this.props.children}
+            </ul>
+        );
+    }
+}
+
+export {
+    BoxedList, BoxedListItem, BoxedListContentRow, BoxedListActions, BoxedListFooter
+};

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

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

package/app-typescript/components/Modal.tsx

@@ -6,8 +6,10 @@ interface IProps {
     className?: string;
     theme?: string;
     visible?: boolean;
+    size?: 'small' | 'medium' | 'large' | 'x-large';
+    maximized?: boolean;
     headerTemplate?: JSX.Element | string;
-    footerTemplate?: JSX.Element;
+    footerTemplate?: JSX.Element | string;
     closeOnEscape?: boolean;
     onShow?(): void;
     onHide(): void;
@@ -16,7 +18,7 @@ interface IProps {
 export class Modal extends React.Component<IProps, {}> {
     render() {
         return <div style={{display: 'content'}}
-            data-theme={this.props.theme !== 'dark' ? '' : 'dark-ui' }
+            data-theme={this.props.theme !== 'dark' ? null : 'dark-ui' }
             className={this.props.className}>
             <PrimeDialog
                 id={this.props.id}
@@ -24,6 +26,9 @@ export class Modal extends React.Component<IProps, {}> {
                 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}

package/app-typescript/components/MultiSelect.tsx

@@ -0,0 +1,69 @@
+import * as React from "react";
+import { MultiSelect as PrimeMultiSelect } from "@superdesk/primereact/multiselect";
+import classNames from 'classnames';
+
+interface IProps<T> {
+    value: Array<T>;
+    options: Array<T>;
+    placeholder?: string;
+    optionLabel: string;
+    emptyFilterMessage?: string;
+    filterPlaceholder?: string;
+    maxSelectedLabels?: number;
+    selectedItemsLabel?: string;
+    ariaLabelledBy?: string;
+    tabIndex?: string;
+    filter?: boolean;
+    showClear?: boolean;
+    showSelectAll?: boolean;
+    itemTemplate?(item: any): JSX.Element | undefined;
+    selectedItemTemplate?(value: any): JSX.Element | undefined;
+    onChange(newValue: string): void;
+}
+
+interface IState<T> {
+    options: Array<T>;
+    value: Array<T>;
+}
+
+export class MultiSelect<T> extends React.Component<IProps<T>, IState<T>> {
+    constructor(props: IProps<T>) {
+        super(props);
+        this.state = {
+            value: [],
+            options: [],
+        };
+    }
+
+    render() {
+
+        let classes = classNames({
+            'showSelectAll': this.props.showSelectAll,
+            'showFilter': this.props.filter,
+        });
+
+        return (
+            <PrimeMultiSelect
+                panelClassName={classes}
+                value={this.props.value}
+                options={this.props.options}
+                onChange={(e: any) => this.props.onChange(e)}
+                display="chip"
+                filter={this.props.filter}
+                filterBy={this.props.optionLabel}
+                appendTo={document.body}
+                placeholder={this.props.placeholder}
+                optionLabel={this.props.optionLabel}
+                emptyFilterMessage={this.props.emptyFilterMessage}
+                filterPlaceholder={this.props.filterPlaceholder}
+                itemTemplate={this.props.itemTemplate}
+                selectedItemTemplate={this.props.selectedItemTemplate}
+                maxSelectedLabels={this.props.maxSelectedLabels ?? 4}
+                selectedItemsLabel={this.props.selectedItemsLabel}
+                ariaLabelledBy={this.props.ariaLabelledBy}
+                tabIndex={this.props.tabIndex ?? '0'}
+                showClear={this.props.showClear}
+            />
+        );
+    }
+}

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

@@ -0,0 +1,114 @@
+import * as React from 'react';
+import { Icon } from '../Icon';
+import Scrollspy from 'react-scrollspy';
+
+interface IProps {
+    items: Array<IItem | 'divider'>;
+    side?: 'none' | 'left' | 'right';
+    scrollSpy?: string;
+    offset?: number;
+}
+
+interface IItem {
+    icon: string;
+    tooltip?: string;
+    id?: string; // scrollspy items for itemsArr
+    onClick?(event: React.MouseEvent<HTMLButtonElement, MouseEvent>): void;
+}
+
+interface IState {
+    index: number;
+    closeIndex: number;
+    arr: Array<string>;
+}
+
+export class QuickNavBar extends React.PureComponent<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+        this.state = {
+            index: 0,
+            closeIndex: -1,
+            arr: [],
+        };
+        this.handleClick = this.handleClick.bind(this);
+    }
+
+    handleClick(item: IItem, indexNumber: number, event: any) {
+        this.setState({
+            index: indexNumber,
+        });
+        if (this.state.index === indexNumber) {
+            this.setState({
+                closeIndex: indexNumber,
+                index: -1,
+            });
+        }
+
+        if (item.id && this.props.scrollSpy) {
+            return document
+              .getElementById(item.id)
+              ?.scrollIntoView({ block: "nearest", behavior: "smooth" });
+          }
+
+        if (item.onClick) {
+            item.onClick(event);
+        }
+    }
+    render() {
+
+        let itemsArr: Array<string> = [];
+            this.props.items.map((item) => {
+                if (item !== 'divider') {
+                    itemsArr = [...itemsArr, `${item.id}`];
+                }
+        });
+        return (
+            <div className='sd-quickbar-menu'>
+                {this.props.scrollSpy
+                    ? <ul>
+                        <Scrollspy items={ itemsArr }
+                        currentClassName="sd-quickbar-menu__list-item--active"
+                        rootEl={this.props.scrollSpy}  offset={this.props.offset || 0}>
+                            {this.props.items.map((item, index) => {
+                                if (item === 'divider') {
+                                    return (
+                                        <li key={index} className='sd-quickbar__spacer'></li>
+                                        );
+                                } else {
+                                    return (
+                                        <li key={index} data-sd-tooltip={item['tooltip']} data-flow='right' className="sd-quickbar-menu__list-item">
+                                            <a role='button' aria-label={item['tooltip']} className={'sd-quickbar__btn'}
+                                                onClick={() => this.handleClick(item, index, event)}>
+                                                <Icon size={'small'} name={item['icon']} />
+                                            </a>
+                                        </li>
+                                    );
+                                }
+                            })}
+                        </Scrollspy>
+                    </ul>
+                    : <ul>
+                        {this.props.items.map((item, index) => {
+                            if (item === 'divider') {
+                                return (
+                                    <li key={index} className='sd-quickbar__spacer'></li>
+                                );
+                            } else {
+                                return (
+                                    <li key={index} data-sd-tooltip={item['tooltip']} data-flow='right'>
+                                        <a role='button'
+                                            aria-label={item['tooltip']}
+                                            className={'sd-quickbar__btn' +  (index === this.state.index ? ' sd-quickbar__btn--active' : '')}
+                                            onClick={() => this.handleClick(item, index, event)}>
+                                                <Icon size={'small'} name={item['icon']} />
+                                        </a>
+                                    </li>);
+                                }
+                            },
+                        )}
+                    </ul>
+                }
+            </div>
+        );
+    }
+}

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

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { Icon } from '../Icon';
+
+interface IProps {
+    items: Array<IItem | 'divider'>;
+    side?: 'none' | 'left' | 'right';
+}
+
+interface IItem {
+    icon: string;
+    size: 'small' | 'big'; // defaults to 'small'
+    tooltip?: string;
+    active?: boolean;
+}
+
+interface IState {
+    index: number;
+    closeIndex: number;
+}
+
+export class SideBarMenu extends React.PureComponent<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+        this.state = {
+            index: -1,
+            closeIndex: -1,
+        };
+        this.handleClick = this.handleClick.bind(this);
+    }
+
+    handleClick(indexNumber: number) {
+        this.setState({
+            index: indexNumber,
+        });
+        if (this.state.index === indexNumber) {
+            this.setState({
+                closeIndex: indexNumber,
+            });
+        }
+    }
+
+    render() {
+        return (
+            <div className='sd-sidebar-menu sd-content-wrapper__left-tabs'>
+                <ul className='authoring-active'>
+                    {this.props.items.map((item, index) => {
+                        if (item === 'divider') {
+                            return (
+                                <li key={index} className='sd-sidebar-menu__spacer'></li>
+                            );
+                        } 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)}>
+                                        <span className='sd-sidebar-menu__main-icon '>
+                                            <Icon size={item['size']} name={item['icon']} />
+                                        </span>
+                                        <i className='sd-sidebar-menu__helper-icon big-icon--chevron-left'></i>
+                                    </a>
+                                </li>);
+                        }
+                    })}
+                </ul>
+            </div>
+        );
+    }
+}