superdesk-ui-framework 2.4.21 → 3.0.0-rc12

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