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

package/app-typescript/components/Layouts/Panel.tsx

@@ -0,0 +1,208 @@
+import * as React from 'react';
+import { Icon } from '../Icon';
+import { IconButton } from '../IconButton';
+import { Spinner, LoadingOverlay } from '../Spinner';
+import classNames from 'classnames';
+
+// ============= Panel ============ //
+
+interface IPropsPanel {
+    children?: React.ReactNode;
+    side?: 'left' | 'right';
+    theme?: 'light' | 'dark';
+    className?: string;
+    size?: 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large' | 'xxx-large' | 'full' | 'auto';
+    background?: 'transparent' | 'light' | 'grey'; // defaults to light (white)
+    open?: boolean;
+}
+
+export default class Panel extends React.PureComponent<IPropsPanel> {
+    render() {
+        let classes = classNames('side-panel', {
+            [`side-panel--${this.props.side}`]: this.props.side,
+            [`side-panel--${this.props.background}`]:
+                this.props.background !== 'light' && this.props.background !== undefined,
+        }, this.props.className);
+        let classes2 = classNames('side-panel__container', {
+            [`side-panel__container--${this.props.side}`]: this.props.side,
+            [`side-panel__container--${this.props.size}`]: this.props.size,
+            [`panel-open`]: this.props.open,
+        });
+        return (
+            <div className={classes2} data-theme={this.props.theme ? `${this.props.theme}-ui` : null}>
+                <div className={classes}>
+                    {this.props.children}
+                </div>
+            </div>
+        );
+    }
+}
+
+// ============= Panel Header ============ //
+
+interface IPropsPanelHeader {
+    color?: 'light' | 'darker' | 'blueGrey' | 'blueGreyDarker'; // defaults to 'light'
+    zIndex?: number;
+    title?: string;
+    theme?: 'light-ui' | 'dark-ui'; // defaults to 'light
+    className?: string;
+    onClose?(): void;
+}
+
+class PanelHeader extends React.PureComponent<IPropsPanelHeader> {
+    constructor(props: IPropsPanelHeader) {
+        super(props);
+    }
+
+    render() {
+        const darkColors = ['blueGrey', 'blueGreyDarker'];
+
+        let classes = classNames('side-panel__header side-panel__header--border-b', {
+            [`side-panel__header--${this.props.color}`]: this.props.color || this.props.color !== undefined,
+            'side-panel__header--has-close': this.props.onClose,
+        }, this.props.className);
+        let style = {
+            zIndex: 10 + (this.props.zIndex ? this.props.zIndex : 0),
+        };
+        let defaultTheme = darkColors.includes(this.props.color || '') ? 'dark-ui' : null;
+
+        return (
+            <div data-theme={this.props.theme || defaultTheme} className={classes} style={style}>
+                {this.props.onClose ?
+                    <a className="icn-btn side-panel__close"
+                        onClick={() => this.props.onClose ? this.props.onClose() : false}>
+                        <Icon name='close-small' />
+                    </a> : null}
+                {this.props.title &&
+                    <div className="side-panel__header-inner">
+                        <h3 className="side-panel__heading">{this.props.title}</h3>
+                    </div>}
+                {this.props.children}
+            </div>
+        );
+    }
+}
+
+// ============= Panel Content ============ //
+
+interface IPropsPanelContent {
+    loading?: boolean;
+    empty?: boolean;
+    emptyTemplate?: React.ReactNode;
+}
+
+class PanelContent extends React.PureComponent<IPropsPanelContent> {
+    render() {
+        return (
+            <div className="side-panel__content">
+                {this.props.loading ?
+                    <LoadingOverlay>
+                        <Spinner size="large" />
+                    </LoadingOverlay> : null
+                }
+                {this.props.empty ?
+                    <LoadingOverlay>
+                        {this.props.emptyTemplate}
+                    </LoadingOverlay> : null
+                }
+                {this.props.children}
+            </div>
+        );
+    }
+}
+
+// ============= Panel Content Block ============ //
+
+interface IPropsContentBlock {
+    children?: React.ReactNode;
+    flex?: boolean;
+    padding?: '0' | '1-5' | '3'; // Defaults to 2 (16 pixels) without specifiying a value.
+    className?: string;
+}
+
+class PanelContentBlock extends React.PureComponent<IPropsContentBlock> {
+    render() {
+        let classes = classNames('side-panel__content-block', this.props.className, {
+            'side-panel__content-block--flex': this.props.flex,
+            [`side-panel__content-block--padding-${this.props.padding}`]: this.props.padding,
+        });
+        return (
+            <div className={classes}>
+                {this.props.children}
+            </div>
+        );
+    }
+}
+
+// ============= Panel Footer ============ //
+
+class PanelFooter extends React.PureComponent {
+    render() {
+        return (
+            <div className="side-panel__footer side-panel__footer--button-box">
+                {this.props.children}
+            </div>
+        );
+    }
+}
+
+// ============= Sliding Header Toolbar ============ //
+
+interface IPropsSlidingToolbar {
+    right?: boolean;
+    open?: boolean;
+}
+
+class PanelHeaderSlidingToolbar extends React.PureComponent<IPropsSlidingToolbar> {
+    render() {
+        const classes = classNames(
+            'subnav__sliding-toolbar',
+            {
+                'subnav__sliding-toolbar--right': this.props.right,
+            },
+        );
+
+        return (
+            <div className={classes}>
+                {this.props.children}
+            </div>
+        );
+    }
+}
+
+// ============= Panel Tools ============ //
+
+export interface IPanelTools {
+    icon: string;
+    title: string;
+    onClick(): void;
+    ariaValue: string;
+}
+
+interface IPropsPanelTools {
+    children?: React.ReactNode;
+    tools: Array<IPanelTools>;
+}
+
+class PanelTools extends React.PureComponent<IPropsPanelTools> {
+    render() {
+        return (
+            <div className="side-panel__tools">
+                {this.props.tools.map((tool) => (
+                    <IconButton
+                        key={tool.title}
+                        id={tool.title}
+                        icon={tool.icon}
+                        ariaValue={tool.ariaValue}
+                        onClick={tool.onClick}
+                    />
+                ))}
+            </div>
+        );
+    }
+}
+
+export {
+    Panel, PanelHeader, PanelContent, PanelContentBlock, PanelFooter, PanelHeaderSlidingToolbar,
+    PanelTools
+};

package/app-typescript/components/Layouts/RightPanel.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+interface IProps {
+    children?: React.ReactNode;
+    open?: boolean;
+}
+
+export class RightPanel extends React.PureComponent<IProps> {
+    render() {
+        return (
+            <div className={'sd-main-content-grid__preview' + (this.props.open ? ' open-preview' : '')}>
+                {this.props.children}
+            </div>
+        );
+    }
+}

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

@@ -0,0 +1,43 @@
+export { Panel, PanelHeader, PanelContent, PanelContentBlock, PanelFooter, PanelHeaderSlidingToolbar } from './Panel';
+
+export { Layout } from './Layout';
+export { LayoutContainer } from './LayoutContainer';
+export { HeaderPanel } from './HeaderPanel';
+export { MainPanel, IMainPanelProps } from './MainPanel';
+export { LeftPanel } from './LeftPanel';
+export { RightPanel } from './RightPanel';
+export { OverlayPanel } from './OverlayPanel';
+export { AuthoringContainer } from './AuthoringContainer';
+export { ContentSplitter } from './ContentSplitter';
+
+export { PageLayout } from './PageLayout';
+export { Container } from './Container';
+
+export { AuthoringFrameContainer } from './AuthoringFrameContainer';
+export { AuthoringFrameMain } from './AuthoringFrameMain';
+export { AuthoringFrameNavBar } from './AuthoringFrameNavBar';
+export { AuthoringFrameLeftBar } from './AuthoringFrameLeftBar';
+export { AuthoringFrameRightBar } from './AuthoringFrameRightBar';
+export { AuthoringFrameSidePanel } from './AuthoringFrameSidePanel';
+export { AuthoringFrameSidePanelOverlay } from './AuthoringFrameSidePanelOverlay';
+export { AuthoringFrameOverlay } from './AuthoringFrameOverlay';
+export { AuthoringFrame } from './AuthoringFrame';
+export { AuthoringMain } from './AuthoringMain';
+export { AuthoringMainContainer } from './AuthoringMainContainer';
+export { AuthoringMainToolBar } from './AuthoringMainToolBar';
+export { AuthoringMainContent } from './AuthoringMainContent';
+export { AuthoringInnerHeader } from './AuthoringInnerHeader';
+export { AuthoringInnerBody } from './AuthoringInnerBody';
+export { AuthorinInnerSideBar } from './AuthorinInnerSideBar';
+
+export { CoreLayout } from './CoreLayout';
+export { CoreLayoutContainer } from './CoreLayoutContainer';
+export { CoreLayoutTopMenu } from './CoreLayoutTopMenu';
+export { CoreLayoutMain } from './CoreLayoutMain';
+export { CoreLayoutSlideInMenu } from './CoreLayoutSlideInMenu';
+export { CoreLayoutFooter } from './CoreLayoutFooter';
+export { CoreLayoutOverlay } from './CoreLayoutOverlay';
+export { HamburgerButton } from './HamburgerButton';
+export { BottomBarAction } from './BottomBarAction';
+export { MainMenu } from './MainMenu';
+export { NotificationPanel } from './NotificationPanel';

package/app-typescript/components/LeftMenu.tsx

@@ -1,72 +1,152 @@
-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;
+  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: "",
+    };
+  }
+
+  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,
+        "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>,
+        );
+
+        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/ListItemLoader.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { Skeleton } from './Skeleton';
+
+export class ListItemLoader extends React.Component<{}> {
+    render() {
+        return (
+            <div className="sd-list-item sd-shadow--z1 sd-list-item--no-hover">
+                <div className="sd-list-item__border"></div>
+                <div className="sd-list-item__column">
+                    <Skeleton shape="circle" size="2rem" />
+                </div>
+                <div className="sd-list-item__column sd-padding-y--1">
+                    <Skeleton shape="circle" size="2rem" className="sd-margin-b--0-5" />
+                    <Skeleton shape="circle" size="2rem" />
+                </div>
+                <div className="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
+                    <div className="sd-list-item__row sd-padding-b--0-5">
+                        <Skeleton borderRadius="16px" />
+                        <Skeleton width="10rem" borderRadius="16px" className="sd-margin-l--0-5" />
+                    </div>
+                    <div className="sd-list-item__row">
+                        <Skeleton width="8rem" borderRadius="16px" />
+                        <Skeleton width="8rem" borderRadius="16px" className="sd-margin-l--0-5" />
+                        <Skeleton width="8rem" borderRadius="16px" className="sd-margin-l--0-5" />
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}

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