superdesk-ui-framework 2.4.21 → 3.0.0-rc12

package/app-typescript/components/Modal.tsx

@@ -1,33 +1,51 @@
-import React from 'react';
+import * as React from 'react';
 import { Dialog as PrimeDialog } from '@superdesk/primereact/dialog';
+import classNames from 'classnames';
 
 interface IProps {
     id?: string;
     className?: string;
     theme?: string;
     visible?: boolean;
+    contentBg?: 'default' | 'medium' | 'dark';
+    contentPadding?: 'none' | 'small' | 'medium' | 'large';
+    size?: 'small' | 'medium' | 'large' | 'x-large';
+    maximized?: boolean;
     headerTemplate?: JSX.Element | string;
-    footerTemplate?: JSX.Element;
+    footerTemplate?: JSX.Element | string;
     closeOnEscape?: boolean;
+    zIndex?: number;
     onShow?(): void;
     onHide(): void;
 }
 
 export class Modal extends React.Component<IProps, {}> {
     render() {
-        return <div style={{display: 'content'}}
-            data-theme={this.props.theme !== 'dark' ? '' : 'dark-ui' }
-            className={this.props.className}>
-            <PrimeDialog
-                id={this.props.id}
-                visible={this.props.visible}
-                header={this.props.headerTemplate}
-                footer={this.props.footerTemplate}
-                closeOnEscape={this.props.closeOnEscape}
-                onShow={this.props.onShow}
-                onHide={this.props.onHide}>
-                {this.props.children}
-            </PrimeDialog>
-        </div>;
+        let classes = classNames({
+            [`p-dialog-content--${this.props.size}`]: this.props.size,
+            'p-dialog-content--default': this.props.contentBg === undefined,
+            [`p-dialog-content--${this.props.contentBg}`]: this.props.contentBg,
+            'p-dialog-content--s-padding': this.props.contentPadding === undefined,
+            [`p-dialog-content--${this.props.contentPadding}`]: this.props.contentPadding,
+        }, this.props.className);
+        return (
+            <div style={{display: 'content'}}
+                data-theme={this.props.theme !== 'dark' ? null : 'dark-ui' }>
+                <PrimeDialog
+                    id={this.props.id}
+                    visible={this.props.visible}
+                    header={this.props.headerTemplate}
+                    footer={this.props.footerTemplate}
+                    closeOnEscape={this.props.closeOnEscape}
+                    maximized={this.props.maximized}
+                    contentClassName={classes}
+                    onShow={this.props.onShow}
+                    onHide={this.props.onHide}
+                    zIndex={this.props.zIndex}
+                >
+                    {this.props.children}
+                </PrimeDialog>
+            </div>
+        );
     }
 }

package/app-typescript/components/MultiSelect.tsx

@@ -0,0 +1,99 @@
+import * as React from "react";
+import { MultiSelect as PrimeMultiSelect } from "@superdesk/primereact/multiselect";
+import classNames from 'classnames';
+import nextId from "react-id-generator";
+import { InputWrapper } from "./Form";
+
+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 | any;
+    filter?: boolean;
+    showClear?: boolean;
+    showSelectAll?: boolean;
+    itemTemplate?(item: any): JSX.Element | undefined;
+    selectedItemTemplate?(value: any): JSX.Element | undefined;
+    onChange(newValue: string): void;
+    invalid?: boolean;
+    inlineLabel?: boolean;
+    labelHidden?: boolean;
+    tabindex?: number;
+    fullWidth?: boolean;
+    info?: string;
+    error?: string;
+    required?: boolean;
+    label?: string;
+    disabled?: boolean;
+}
+
+interface IState<T> {
+    options: Array<T>;
+    value: Array<T>;
+    invalid: boolean;
+}
+
+export class MultiSelect<T> extends React.Component<IProps<T>, IState<T>> {
+    private htmlId = nextId();
+
+    constructor(props: IProps<T>) {
+        super(props);
+        this.state = {
+            value: [],
+            options: [],
+            invalid: this.props.invalid ? this.props.invalid : false,
+        };
+    }
+
+    render() {
+
+        let classes = classNames({
+            'showSelectAll': this.props.showSelectAll,
+            'showFilter': this.props.filter,
+        });
+
+        return (
+            <InputWrapper
+            label={this.props.label}
+            error={this.props.error}
+            required={this.props.required}
+            disabled={this.props.disabled}
+            invalid={this.state.invalid}
+            info={this.props.info}
+            inlineLabel={this.props.inlineLabel}
+            labelHidden={this.props.labelHidden}
+            fullWidth={this.props.fullWidth}
+            htmlId={this.htmlId}
+            tabindex={this.props.tabindex}>
+                <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.htmlId + 'label'}
+                tabIndex={this.props.tabIndex ? this.props.tabIndex : '0'}
+                showClear={this.props.showClear}
+                disabled={this.props.disabled}
+                inputId={this.htmlId} />
+            </InputWrapper>
+        );
+    }
+}

package/app-typescript/components/NavButton.tsx

@@ -1,17 +1,20 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { Icon } from './Icon';
+import { Badge } from './Badge';
 interface IProps {
     id?: string;
     icon?: string;
     text?: string;
     iconSize?: 'small' | 'big'; // defaults to 'small'
     theme?: 'light' | 'dark'; // defaults to 'light'
-    type?: 'default' | 'primary' | 'highlight' | 'darker';
+    type?: 'default' | 'primary' | 'highlight' | 'darker' | 'dark';
     state?: 'normal' | 'active'; // defaults to 'normal'
     value?: 'button' | 'submit' | 'reset'; // defaults to 'button'
     onClick(): void;
+    badgeValue?: string;
 }
+
 export class NavButton extends React.PureComponent<IProps> {
     render() {
         let classes = classNames('sd-navbtn', {
@@ -28,6 +31,8 @@ export class NavButton extends React.PureComponent<IProps> {
                 onClick={this.props.onClick}
                 aria-label={this.props.text}
                 id={this.props.id}>
+                {this.props.badgeValue &&
+                    <Badge text={this.props.badgeValue} type='primary' />}
                 {this.props.icon ? <Icon name={this.props.icon} size={this.props.iconSize} /> : null}
                 {!this.props.icon && this.props.text ?
                     <span className="sd-navbtn__text">{this.props.text}</span> : null}

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

@@ -0,0 +1,83 @@
+import * as React from 'react';
+import { Icon } from '../Icon';
+import { IconButton } from '../IconButton';
+import { clone } from 'lodash';
+
+interface IProps {
+    items: Array<IItem>;
+    side?: 'none' | 'left' | 'right';
+}
+
+interface IItem {
+    icon?: string;
+    active?: boolean;
+    title: string;
+    onClick(event: any): void;
+    onRemove(event: any): void;
+}
+
+interface IState {
+    index: number;
+    closeIndex: number;
+    items: Array<IItem>;
+}
+
+export class BottomNav extends React.PureComponent<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+        this.state = {
+            index: -1,
+            closeIndex: -1,
+            items: this.props.items,
+        };
+        this.handleClick = this.handleClick.bind(this);
+        this.handleDelete = this.handleDelete.bind(this);
+    }
+
+    handleClick(indexNumber: number) {
+        this.setState({
+            index: indexNumber,
+        });
+        if (this.state.index === indexNumber) {
+            this.setState({
+                closeIndex: indexNumber,
+            });
+        }
+    }
+    handleDelete(indexNumber: number) {
+        const newItems = clone(this.state.items);
+        newItems.splice(indexNumber, 1);
+
+        this.setState({
+            items: newItems,
+        });
+    }
+
+    render() {
+        return (
+            <ul className='sd-bottom-nav-list'>
+                {this.props.items.map((item, index) => {
+                    return (
+                        <li key={index}
+                            className={'sd-bottom-nav-list__item' + (item['active'] ? ' sd-bottom-nav-list__item--active' : (index === this.state.index ? ' sd-bottom-nav-list__item--active' : ''))}>
+                            <a className='sd-bottom-nav-list__item-title' onClick={(event) => {
+                                this.handleClick(index);
+                                item.onClick(event);
+                            }}>
+                                {item['icon'] &&
+                                    <Icon name={item['icon']} />
+                                }
+                                <span>{item.title}</span>
+                            </a>
+                            <IconButton
+                                size='small'
+                                icon="close-small"
+                                ariaValue='Delete'
+                                onClick={() => item.onRemove(index)} />
+                        </li>
+                    );
+                })}
+            </ul>
+        );
+    }
+}

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

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

@@ -0,0 +1,87 @@
+import * as React from 'react';
+import { Icon } from '../Icon';
+import { Badge } from '../Badge';
+
+interface IProps {
+    items: Array<ISideBarTab | 'divider'>;
+    side?: 'none' | 'left' | 'right';
+}
+
+export interface ISideBarTab {
+    icon: string;
+    size: 'small' | 'big'; // defaults to 'small'
+    tooltip?: string;
+    active?: boolean;
+    badgeValue?: string;
+    onClick(event: React.MouseEvent<HTMLButtonElement, MouseEvent>): void;
+}
+
+interface IState {
+    index: number;
+    closeIndex: number;
+}
+
+export class SideBarTabs extends React.PureComponent<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+        this.state = {
+            index: -1,
+            closeIndex: -1,
+        };
+        this.handleClick = this.handleClick.bind(this);
+    }
+
+    handleClick(item: ISideBarTab, indexNumber: number, event: any) {
+        this.setState({
+            index: indexNumber,
+        });
+        if (this.state.index === indexNumber) {
+            this.setState({
+                closeIndex: indexNumber,
+                index: -1,
+            });
+        }
+
+        item.active = !item.active;
+        item.onClick(event);
+    }
+
+    render() {
+        return (
+            <div className='sd-sidetab-menu sd-sidetab-menu--static'>
+                <ul>
+                    {this.props.items.map((item, index) => {
+                        if (item === 'divider') {
+                            return (
+                                <li key={index} className='sd-sidetab-menu__spacer'></li>
+                            );
+                        } else {
+                            return (
+                                <li key={index} data-sd-tooltip={item['tooltip']} data-flow='left'>
+                                    <a role='button' aria-label={item['tooltip']}
+                                        className={'sd-sidetab-menu__btn' + (item['active'] ?
+                                            ' sd-sidetab-menu__btn--active' :
+                                            (index === this.state.index ? ' sd-sidetab-menu__btn--active' : ''))}
+                                        onClick={() => this.handleClick(item, index, event)}>
+                                        {
+                                        item['badgeValue'] != null
+                                        ? (
+                                        <Badge text={item['badgeValue']} type='primary' />
+                                        )
+                                        : null
+                                        }
+
+                                        <span className='sd-sidetab-menu__main-icon '>
+                                            <Icon size={item['size']} name={item['icon']} />
+                                        </span>
+                                        <i className='sd-sidetab-menu__helper-icon icon-close-small'></i>
+                                    </a>
+                                </li>
+                            );
+                        }
+                    })}
+                </ul>
+            </div>
+        );
+    }
+}

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

@@ -0,0 +1,3 @@
+export { SideBarMenu } from './SideBarMenu';
+export { SideBarTabs } from './SideBarTabs';
+export { QuickNavBar } from './QuickNavBar';

package/app-typescript/components/RadioButtonGroup.tsx

@@ -0,0 +1,113 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import nextId from "react-id-generator";
+import {FormLabel} from './Form/FormLabel';
+
+interface IProps {
+    value?: string;
+    group?: {
+        orientation?: 'horizontal' | 'vertical'; // defaults to 'horizontal'
+        grid?: boolean;
+        align?: 'start' | 'end' | 'center' | 'inline'; // defaults to 'left'
+        padded?: boolean; // adds predefined space to the side based on the alignment and orientation.
+        groupLabel?: string;
+        groupLabelledBy?: string;
+    };
+    options: Array<{
+        label: string,
+        value: string,
+        icon?: string;
+        labelHidden?: boolean,
+        disabled?: boolean
+    }>;
+    required?: boolean;
+    tabindex?: number;
+    onChange(nextValue: string): void;
+}
+
+export class RadioButtonGroup extends React.Component<IProps> {
+    htmlId = nextId();
+
+    constructor(props: IProps) {
+        super(props);
+        this.handleChange = this.handleChange.bind(this);
+    }
+
+    handleChange(item: any) {
+        if (!item.disabled) {
+            this.props.onChange(item.value);
+        }
+    }
+
+    render() {
+        let classes = classNames('sd-check-button__group', {
+            [`sd-check-button__group--${this.props.group?.align}`]: this.props.group?.align,
+            [`sd-check-button__group--start`]: !this.props.group?.grid && this.props.group?.align === undefined,
+            [`button-group--vertical`]: this.props.group?.orientation === 'vertical',
+            [`sd-check-button__group--grid`]: this.props.group?.grid,
+            [`sd-check-button__group--padded`]: this.props.group?.padded === true,
+        });
+        return (
+            <React.Fragment>
+                {!this.props.group?.groupLabel ?
+                    <div role="radiogroup" className={classes} aria-labelledby={this.props.group?.groupLabelledBy}>{
+                        this.props.options.map((item: any, index: number) => (
+                            <span className="sd-check-button sd-check-button--native"
+                                key={index}
+                                tabIndex={this.props.tabindex === undefined ? undefined : -1}>
+
+                                <input type="radio" className="sd-check-button__input"
+                                    id={this.htmlId + index}
+                                    tabIndex={this.props.tabindex}
+                                    name={this.htmlId}
+                                    onChange={() => this.handleChange(item)}
+                                    disabled={item.disabled}
+                                    required={this.props.required}
+                                    checked={item.value === this.props.value} />
+                                <label className="sd-check-button__text-label" htmlFor={this.htmlId + index}
+                                    aria-label={item.labelHidden ? item.label : undefined}>
+
+                                    { item.icon ?  <i className={`icon-${item.icon}`} aria-hidden="true" /> : null }
+                                    { !item.labelHidden || !item.icon ?
+                                        <span className="sd-check-button__text-label-inner">{item.label}</span> : null }
+                                </label>
+                            </span>
+                        ))
+                    }</div>
+                : null }
+                {this.props.group?.groupLabel ?
+                    <div className='sd-check-button__group-wrapper'>
+
+                        <FormLabel forId={this.htmlId + 'group'} text={this.props.group.groupLabel} />
+                        <div role="radiogroup" id={this.htmlId + 'group'} className={classes}>{
+                            this.props.options.map((item: any, index: number) => (
+                                <span className="sd-check-button sd-check-button--native"
+                                    key={index}
+                                    tabIndex={-1}>
+
+                                    <input type="radio" className="sd-check-button__input"
+                                        id={this.htmlId + index}
+                                        tabIndex={0}
+                                        name={this.htmlId}
+                                        onChange={() => this.handleChange(item)}
+                                        disabled={item.disabled}
+                                        required={this.props.required}
+                                        checked={item.value === this.props.value} />
+                                    <label className="sd-check-button__text-label" htmlFor={this.htmlId + index}
+                                        aria-label={item.labelHidden ? item.label : undefined}>
+
+                                        { item.icon ?  <i className={`icon-${item.icon}`} aria-hidden="true" /> : null }
+                                        { !item.labelHidden || !item.icon ?
+                                            <span className="sd-check-button__text-label-inner">
+                                                {item.label}
+                                            </span> : null }
+                                    </label>
+                                </span>
+                            ))
+                        }</div>
+                    </div>
+                : null }
+            </React.Fragment>
+        );
+    }
+}