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

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

@@ -0,0 +1,51 @@
+// External Modules
+import * as React from 'react';
+
+import {
+    HeaderPanel,
+    LayoutContainer,
+    LeftPanel,
+    MainPanel,
+    RightPanel,
+    IMainPanelProps,
+} from '../Layouts';
+
+interface IProps {
+    header?: React.ReactNode;
+    main?: React.ReactNode;
+    mainClassName?: string;
+    mainProps?: Omit<IMainPanelProps, 'children'>;
+    rightPanel?: React.ReactNode;
+    rightPanelOpen?: boolean;
+    leftPanel?: React.ReactNode;
+    leftPanelOpen?: boolean;
+}
+
+export class PageLayout extends React.PureComponent<IProps> {
+    render() {
+        return (
+            <LayoutContainer>
+                {this.props.header && (
+                    <HeaderPanel>
+                        {this.props.header}
+                    </HeaderPanel>
+                )}
+                {this.props.leftPanel && (
+                    <LeftPanel open={this.props.leftPanelOpen}>
+                        {this.props.leftPanel}
+                    </LeftPanel>
+                )}
+                {this.props.main && (
+                    <MainPanel className={this.props.mainClassName} {...this.props.mainProps}>
+                        {this.props.main}
+                    </MainPanel>
+                )}
+                {this.props.rightPanel && (
+                    <RightPanel open={this.props.rightPanelOpen}>
+                        {this.props.rightPanel}
+                    </RightPanel>
+                )}
+            </LayoutContainer>
+        );
+    }
+}

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,10 +1,13 @@
-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;
+    ref?: string;
+    onClick?(): void;
 }
 
 interface IMenuGroup {
@@ -13,59 +16,141 @@ interface IMenuGroup {
 }
 
 interface IMenu {
-    navClass?: string;
+    className?: string;
     groups: Array<IMenuGroup>;
-    activeItemId: string;
+    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;
 }
+
 export class LeftMenu extends React.PureComponent<IMenu, IState> {
     constructor(props: IMenu) {
         super(props);
 
         this.state = {
-            active: '',
+            active: this.props.activeItemId ? this.props.activeItemId : '',
         };
     }
 
-    handleClick(id: string, route: string) {
+    handleClick(item: IMenuItem, event?: React.MouseEvent) {
+        event?.preventDefault();
+
         this.setState({
-            active: id,
+            active: item.id,
         });
-        this.props.onSelect(id, route);
+
+        if (item.ref) {
+            return document
+                .getElementById(item.ref)
+                ?.scrollIntoView({ block: "nearest", behavior: "smooth" });
+        }
+
+        if (item.onClick) {
+            return item.onClick();
+        }
+
+        this.props.onSelect(item.id, item.route ? item.route : "");
+    }
+
+    componentDidMount() {
+        if (this.props.scrollTo) {
+            return document
+            .getElementById(this.props.scrollTo)
+            ?.scrollIntoView({ block: "nearest", behavior: "smooth" });
+        }
     }
 
     render() {
-        let classes = classNames('sd-left-nav', {
-            [`${this.props.navClass}`]: this.props.navClass,
-        });
+        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 (
+                    <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.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>
-                    );
-                })}
+                {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>
+        );
+    }
+}