superdesk-ui-framework 3.0.1-beta.2 → 3.0.1-beta.22

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

@@ -0,0 +1,101 @@
+import * as React from 'react';
+
+interface IPropsContainer {
+    children?: React.ReactNode;
+    id?: string;
+    theme?: 'light' | 'dark';
+}
+class MainMenuContainer extends React.PureComponent<IPropsContainer> {
+    render() {
+        return (
+            <div id={this.props.id}
+                aria-labelledby='main-menu_title'
+                className='sd-main-menu__navigation'
+                data-theme={this.props.theme ? `${this.props.theme}-ui` : null}>
+                {this.props.children}
+            </div>
+        );
+    }
+}
+
+interface IPropsHeader {
+    headerTitle?: string;
+}
+class MainMenuHeader extends React.PureComponent<IPropsHeader> {
+    render() {
+        return (
+            <div className='sd-main-menu__header'>
+                <h3 id='main-menu_title' className='sd-main-menu__title'>{this.props.headerTitle}</h3>
+            </div>
+        );
+    }
+}
+interface IPropsContent {
+    children?: React.ReactNode;
+}
+class MainMenuContent extends React.PureComponent<IPropsContent> {
+    render() {
+        return (
+            <div className='sd-main-menu__content'>
+                {this.props.children}
+            </div>
+        );
+    }
+}
+interface IPropsFooter {
+    children?: React.ReactNode;
+    poweredBy?: string;
+    footerContent?: boolean;
+}
+class MainMenuFooter extends React.PureComponent<IPropsFooter> {
+    render() {
+        return (
+            <div className='sd-main-menu__footer'>
+                {this.props.poweredBy &&
+                    <div className='sd-main-menu__footer-info'>
+                        {this.props.poweredBy}
+                    </div>
+                }
+                <div className='sd-main-menu__footer-logo'></div>
+                {this.props.footerContent &&
+                    <div className='sd-main-menu__footer-content'>
+                        {this.props.children}
+                    </div>
+                }
+            </div>
+        );
+    }
+}
+
+interface IProps {
+    header: React.ReactNode;
+    footer?: React.ReactNode;
+    children?: React.ReactNode;
+    headerTitle?: string;
+    poweredBy?: string;
+    footerContent?: boolean;
+}
+
+export default class MainMenu extends React.PureComponent<IProps> {
+    render() {
+        return (
+            <MainMenuContainer>
+                <MainMenuHeader headerTitle={this.props.headerTitle}>
+                    {this.props.header}
+                </MainMenuHeader>
+                <MainMenuContent>
+                    {this.props.children}
+                </MainMenuContent>
+                {this.props.footer && (
+                    <MainMenuFooter footerContent={this.props.footerContent} poweredBy={this.props.poweredBy}>
+                        {this.props.footer}
+                    </MainMenuFooter>
+                )}
+            </MainMenuContainer>
+        );
+    }
+}
+
+export {
+    MainMenu, MainMenuContainer, MainMenuHeader, MainMenuContent, MainMenuFooter
+};

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

@@ -0,0 +1,109 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { IconButton} from '../IconButton';
+
+interface IPropsContainer {
+    children?: React.ReactNode;
+    id?: string;
+    theme?: 'light' | 'dark';
+    open?: boolean;
+}
+class NotificationPanelContainer extends React.PureComponent<IPropsContainer> {
+    render() {
+        let classes = classNames('sd-notification-panel', {
+            [`sd-notification-panel--open`]: this.props.open,
+        });
+        return (
+            <div id={this.props.id}
+                aria-labelledby='notifications_title'
+                className={classes}
+                data-theme={this.props.theme ? `${this.props.theme}-ui` : null}>
+                {this.props.children}
+            </div>
+        );
+    }
+}
+
+interface IPropsHeader {
+    headerTitle?: string;
+    onClick(): void;
+}
+class NotificationPanelHeader extends React.PureComponent<IPropsHeader> {
+    render() {
+        return (
+            <div className='sd-notification-panel__header'>
+                <h3 id='notifications_title' className='sd-notification-panel__title'>{this.props.headerTitle}</h3>
+                <IconButton
+                    toolTipFlow='left'
+                    ariaValue='Close'
+                    icon='close-small'
+                    onClick={() => this.props.onClick()} />
+            </div>
+        );
+    }
+}
+interface IPropsContent {
+    children?: React.ReactNode;
+}
+class NotificationPanelContent extends React.PureComponent<IPropsContent> {
+    render() {
+        return (
+            <div className='sd-notification-panel__content'>
+                {this.props.children}
+            </div>
+        );
+    }
+}
+interface IPropsFooter {
+    children?: React.ReactNode;
+    footerContent?: boolean;
+}
+class NotificationPanelFooter extends React.PureComponent<IPropsFooter> {
+    render() {
+        return (
+            <div className='sd-notification-panel__footer'>
+                {this.props.children}
+            </div>
+        );
+    }
+}
+
+interface IProps {
+    header: React.ReactNode;
+    footer?: React.ReactNode;
+    children?: React.ReactNode;
+    headerTitle?: string;
+    poweredBy?: string;
+    footerContent?: boolean;
+    open?: boolean;
+    theme?: 'light' | 'dark';
+    onClick(): void;
+}
+
+export default class NotificationPanel extends React.PureComponent<IProps> {
+    render() {
+        return (
+            <NotificationPanelContainer open={this.props.open} theme={this.props.theme}>
+                <NotificationPanelHeader headerTitle={this.props.headerTitle} onClick={() => this.props.onClick()}>
+                    {this.props.header}
+                </NotificationPanelHeader>
+                <NotificationPanelContent>
+                    {this.props.children}
+                </NotificationPanelContent>
+                {this.props.footer && (
+                    <NotificationPanelFooter>
+                        {this.props.footer}
+                    </NotificationPanelFooter>
+                )}
+            </NotificationPanelContainer>
+        );
+    }
+}
+
+export {
+    NotificationPanel,
+    NotificationPanelContainer,
+    NotificationPanelHeader,
+    NotificationPanelContent,
+    NotificationPanelFooter
+};

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

@@ -29,3 +29,15 @@ 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

@@ -3,144 +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;
-  style?: "default" | "inverse" | "blanc";
-  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,
-      },
-      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/BoxedList.tsx

@@ -47,13 +47,20 @@ interface IPropsActions {
 }
 
 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}>
+            <div
+                className={classes}
+                ref={(el) => {
+                    this.rootElement = el;
+                }}
+            >
                 {this.props.children}
             </div>
         );
@@ -71,21 +78,40 @@ interface IPropsItem {
     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.props.onClick}>
+            <li className={classes} onClick={this.handleClick}>
 
                 {this.props.media && (
                     <BoxedListMedia>
@@ -104,7 +130,12 @@ class BoxedListItem extends React.PureComponent<IPropsItem> {
                 )}
 
                 {this.props.actions && (
-                    <BoxedListActions slideIn={this.props.slideInActions}>
+                    <BoxedListActions
+                        slideIn={this.props.slideInActions}
+                        ref={(ref) => {
+                            this.actionsRef = ref;
+                        }}
+                    >
                         {this.props.actions}
                     </BoxedListActions>
                 )}
@@ -116,6 +147,7 @@ class BoxedListItem extends React.PureComponent<IPropsItem> {
 interface IProps {
     children?: React.ReactNode;
     density?: 'compact' | 'comfortable'; // defaults to 'compact'
+    className?: string;
 }
 
 class BoxedList extends React.PureComponent<IProps> {
@@ -123,7 +155,7 @@ class BoxedList extends React.PureComponent<IProps> {
         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}