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

package/app-typescript/components/SelectGrid.tsx

@@ -0,0 +1,233 @@
+import * as  React from 'react';
+import nextId from "react-id-generator";
+import { OverlayPanel } from '@superdesk/primereact/overlaypanel';
+import { Loader } from "./Loader";
+
+/**
+ * @ngdoc react
+ * @name SelectGrid
+ * @description searchable select component with grid view of items
+ */
+
+export interface IItem {
+    value: string;
+    label: string;
+    [extra: string]: any;
+}
+
+interface IProps {
+    getItems(searchString: string | null): Promise<Array<IItem>>;
+    onChange(value: IItem): void;
+    itemTemplate: React.ComponentType<{ item: IItem | null }>;
+    triggerTemplate: React.ComponentType<any>;
+    label: string;
+    filterPlaceholder?: string;
+}
+
+interface IState {
+    items: Array<IItem>;
+    loading: boolean;
+    isOpen: boolean;
+}
+
+export class SelectGrid extends React.PureComponent<IProps, IState> {
+    htmlId = nextId();
+    buttonContainer: React.RefObject<HTMLDivElement>;
+    overlayPanel: React.RefObject<OverlayPanel>;
+    searchInput: React.RefObject<HTMLInputElement>;
+    gridContainer: React.RefObject<HTMLDivElement>;
+
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = { items: [], loading: true, isOpen: false };
+
+        this.buttonContainer = React.createRef();
+        this.overlayPanel = React.createRef();
+        this.searchInput = React.createRef();
+        this.gridContainer = React.createRef();
+    }
+
+    componentDidMount() {
+        this.props.getItems(null).then((items) => {
+            this.setState({ items, loading: false });
+        });
+    }
+
+    componentWillUnmount() {
+        document.removeEventListener('keydown', this.handleKeydown);
+    }
+
+    togglePopup = (event?: React.SyntheticEvent) => {
+        if (!event) {
+            // @ts-ignore
+            this.overlayPanel.current.hide();
+        } else {
+            // @ts-ignore
+            this.overlayPanel.current.toggle(event);
+        }
+
+        setTimeout(() => {
+            // Now that the popup has (dis)appeared handle items and events
+
+            if (this.state.isOpen) {
+                document.removeEventListener('keydown', this.handleKeydown);
+                // @ts-ignore
+                this.buttonContainer.current.querySelector('button')?.focus();
+            } else {
+                document.addEventListener('keydown', this.handleKeydown);
+                this.loadItems();
+                // @ts-ignore
+                this.searchInput.current.focus();
+            }
+
+            this.setState({ isOpen: !this.state.isOpen });
+        });
+
+    }
+
+    search = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const searchString: string = event.target.value.toLowerCase();
+        this.loadItems(searchString);
+    }
+
+    loadItems = (searchString: string | null = null) => {
+        this.setState({ loading: true });
+        this.props.getItems(searchString).then((items) => {
+            this.setState({ items, loading: false });
+        });
+    }
+
+    select = (item: IItem) => {
+        this.props.onChange(item);
+        this.togglePopup();
+    }
+
+    getItemElement = (index: number): HTMLDivElement | null | undefined => {
+        return this.gridContainer.current?.querySelector(`[data-item-index="${index}"]`);
+    }
+
+    handleKeydown = (event: KeyboardEvent) => {
+        const navKeys = [
+            "Enter",
+            "ArrowRight",
+            "ArrowLeft",
+            "ArrowUp",
+            "ArrowDown",
+            "PageDown",
+            "PageUp",
+        ];
+        const activeElement = document.activeElement;
+
+        if (event.code === "Escape") {
+            event.preventDefault();
+            event.stopPropagation();
+            this.togglePopup();
+        } else if (activeElement === this.searchInput?.current) {
+            if (event.code === "ArrowDown") {
+                event.preventDefault();
+                this.getItemElement(0)?.focus();
+            } else if (event.code === "Enter" && this.state.items.length === 1) {
+                event.preventDefault();
+                this.select(this.state.items[0]);
+            }
+            // @ts-ignore
+        } else if (document.activeElement.getAttribute('data-item-index') && navKeys.includes(event.code)) {
+            // @ts-ignore
+            let itemIndex = parseInt(activeElement.getAttribute('data-item-index'), 10);
+
+            // Prevent default behaviour, such as scrolling
+            event.preventDefault();
+            if (event.code === "Enter") {
+                this.select(this.state.items[itemIndex]);
+                return;
+            } else if (event.code === "ArrowRight") {
+                itemIndex += 1;
+            } else if (event.code === "ArrowLeft") {
+                itemIndex -= 1;
+            } else if (event.code === "ArrowDown") {
+                itemIndex += 4;
+            } else if (event.code === "ArrowUp") {
+                if (itemIndex === 0) {
+                    this.searchInput?.current?.focus();
+                    return;
+                }
+                itemIndex -= 4;
+            } else if (event.code === "PageDown") {
+                itemIndex += 16;
+            } else if (event.code === "PageUp") {
+                itemIndex -= 16;
+            }
+
+            if (itemIndex < 0) {
+                itemIndex = 0;
+            } else if (itemIndex >= this.state.items.length) {
+                itemIndex = this.state.items.length - 1;
+            }
+
+            this.getItemElement(itemIndex)?.focus();
+        }
+    }
+
+    render() {
+        const ItemTemplate = this.props.itemTemplate;
+        const TriggerTemplate = this.props.triggerTemplate;
+
+        return (
+            <React.Fragment>
+                <div
+                    className="sd-input sd-input--grid-select"
+                    ref={this.buttonContainer}
+                    aria-label={this.props.label}
+                >
+                    <label className="sd-input__label">
+                        {this.props.label}
+                    </label>
+                    <TriggerTemplate onClick={this.togglePopup} />
+
+                </div>
+                <OverlayPanel
+                    ref={this.overlayPanel}
+                    dismissable={true}
+                    className="select-grid__overlay-panel"
+                    appendTo={document.body} // making it work inside `overflow:hidden`
+                >
+                    <div className="select-grid__panel">
+                        <div className="select-grid__header">
+                            <div className="sd-searchbar sd-searchbar--boxed">
+                                <label className="sd-searchbar__icon" />
+                                <input
+                                    className="sd-searchbar__input"
+                                    placeholder={this.props.filterPlaceholder || 'Search...'}
+                                    type="text"
+                                    onChange={this.search}
+                                    ref={this.searchInput}
+                                />
+                            </div>
+                        </div>
+                        <div
+                            className="select-grid__body"
+                            ref={this.gridContainer}
+
+                        >
+                            <Loader overlay={this.state.loading} />
+                            {this.state.items.map((item, index) => (
+                                <div
+                                    key={this.htmlId + item.label}
+                                    data-item-index={index}
+                                    className="flex-grid__item select-grid__item sd-padding-y--3"
+                                    tabIndex={0}
+                                    role="button"
+                                    aria-label={item.name}
+                                    onClick={() => this.select(item)}
+                                >
+                                    <ItemTemplate item={item} />
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                </OverlayPanel>
+            </React.Fragment>
+        );
+    }
+}

package/app-typescript/components/SidebarMenu.tsx

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { Icon } from './Icon';
+
+interface IProps {
+    items: Array<IItem | 'divider'>;
+}
+
+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/Skeleton.tsx

@@ -0,0 +1,48 @@
+
+import * as  React from 'react';
+import classNames from 'classnames';
+
+interface IProps {
+    shape: string;
+    size: string;
+    width: string;
+    height: string;
+    borderRadius: string;
+    animation: string;
+    style: object;
+    className: string;
+}
+
+export class Skeleton extends React.Component<IProps> {
+    static defaultProps = {
+        shape: 'rectangle',
+        size: null,
+        width: '100%',
+        height: '1.2rem',
+        borderRadius: null,
+        animation: 'wave',
+        style: null,
+        className: null,
+    };
+
+    skeletonStyle() {
+        if (this.props.size) {
+            return { width: this.props.size, height: this.props.size, borderRadius: this.props.borderRadius };
+        } else {
+            return { width: this.props.width, height: this.props.height, borderRadius: this.props.borderRadius };
+        }
+    }
+
+    render() {
+        const skeletonClassName = classNames('p-skeleton p-component', {
+            'p-skeleton-circle': this.props.shape === 'circle',
+            'p-skeleton-none': this.props.animation === 'none',
+        }, this.props.className);
+
+        const style = this.skeletonStyle();
+
+        return (
+            <div style={style} className={skeletonClassName}></div>
+        );
+    }
+}

package/app-typescript/components/SlidingToolbar.tsx

@@ -1,13 +1,19 @@
 import * as React from 'react';
+import classNames from 'classnames';
 
 interface IProps {
-    multi: boolean;
+    side?: 'start' | 'end';
 }
 
 export class SlidingToolbar extends React.PureComponent<IProps> {
     render() {
+        let classes = classNames('sliding-toolbar', {
+            'sliding-toolbar--right': this.props.side === undefined,
+            [`sliding-toolbar--${this.props.side}`]: this.props.side || this.props.side !== undefined,
+
+        });
         return (
-            <div className='subnav__sliding-toolbar'>
+            <div className={classes}>
                 {this.props.children}
             </div>
         );

package/app-typescript/components/Spinner.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+class LoadingOverlay extends React.PureComponent {
+    render() {
+        return (
+            <div className="sd-loading-overlay--plain">
+                {this.props.children}
+            </div>
+        );
+    }
+}
+
+interface IProps {
+    size?: 'mini' | 'small' | 'medium' | 'large'; // defaults to 'small'
+}
+
+class Spinner extends React.PureComponent<IProps> {
+    render() {
+        let classes = classNames('sd-spinner', {
+            'sd-spinner--small': this.props.size === undefined,
+            [`sd-spinner--${this.props.size}`]: this.props.size || this.props.size !== undefined,
+        });
+        return (
+            <svg role="progressbar" className={classes} viewBox="0 0 50 50">
+                <circle className="sd-spinner__path" cx="25" cy="25" r="20" fill="none" strokeWidth="5"></circle>
+            </svg>
+        );
+    }
+}
+
+export { Spinner, LoadingOverlay };

package/app-typescript/components/SubNav.tsx

@@ -2,23 +2,44 @@ import * as React from 'react';
 import classNames from 'classnames';
 
 interface IProps {
-    color?: 'light' | 'darker' | 'blueGrey' | 'blueGreyDarker' | 'darkUi'; // defaults to 'light'
+    color?: 'light' | 'darker' | 'blueGrey' | 'blueGreyDarker'; // defaults to 'light'
     zIndex?: number;
     theme?: 'light' | 'dark'; // defaults to 'light
+    className?: string;
+}
+interface IPropsDivider {
+    width?: 'small' | 'medium' | 'large' | 'x-large'; // defaults to 'medium'
+}
+
+export class SubNavDivider extends React.PureComponent<IPropsDivider> {
+    render() {
+        let classes = classNames('subnav__divider', {
+            'subnav__divider--medium': this.props.width === undefined,
+            [`subnav__divider--${this.props.width}`]: this.props.width || this.props.width !== undefined,
+        });
+
+        return (
+            <div className={classes}></div>
+        );
+    }
 }
 
 export class SubNav extends React.PureComponent<IProps> {
     render() {
+        const  darkColors = ['blueGrey', 'blueGreyDarker'];
+
         let classes = classNames('subnav', {
             'subnav--light': this.props.color === undefined,
             [`subnav--${this.props.color}`]: this.props.color || this.props.color !== undefined,
-            ['subnav--dark-ui']: this.props.theme === 'dark',
-        });
+        }, this.props.className);
         let style = {
             zIndex: 1000 + (this.props.zIndex ? this.props.zIndex : 0),
         };
+        let defaultTheme = darkColors.includes(this.props.color || '') ? 'dark-ui' : null;
+
         return (
-            <div className={classes} style={style}>
+            <div data-theme={this.props.theme ? `${this.props.theme}-ui` : defaultTheme}
+                className={classes} style={style}>
                 {this.props.children}
             </div>
         );

package/app-typescript/components/Switch.tsx

@@ -1,14 +1,18 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import nextId from "react-id-generator";
+import { Tooltip } from './Tooltip';
 
 interface IProps {
-    label?: {
+    label: {
         text: string,
         side?: 'left' | 'right', // defaults to 'right'
+        hidden?: boolean,
     };
     value: boolean;
     disabled?: boolean;
+    toolTipFlow?: 'top' | 'left' | 'right' | 'down';
+    toolTipAppend?: boolean;
     onChange(nextValue: boolean): void;
 }
 
@@ -34,17 +38,35 @@ export class Switch extends React.PureComponent<IProps> {
             'disabled': this.props.disabled,
         });
 
-        return (
-            <span className="sd-switch__wrapper" tabIndex={-1}>
-                { this.props.label && this.props.label.side === 'left' ?
-                    <label htmlFor={this.htmlId}>{this.props.label.text}</label> : null }
-                <span id={this.htmlId} role="checkbox" className={classes} aria-checked={this.props.value}
-                    aria-disabled={this.props.disabled} onClick={this.onClick} tabIndex={0}>
-                    <span className="inner" />
+        if (this.props.label.hidden) {
+            return (
+                <Tooltip text={this.props.label.text}
+                    flow={this.props.toolTipFlow}
+                    appendToBody={this.props.toolTipAppend}>
+                    <span className="sd-switch__wrapper" tabIndex={-1}>
+                        {this.props.label && this.props.label.side === 'left' ?
+                            <label htmlFor={this.htmlId}>{this.props.label.text}</label> : null}
+                        <span id={this.htmlId} role="checkbox" className={classes} aria-checked={this.props.value}
+                            aria-disabled={this.props.disabled} onClick={this.onClick} tabIndex={0}>
+                            <span className="inner" />
+                        </span>
+                        <label className='a11y-only' htmlFor={this.htmlId}>{this.props.label.text}</label>
+                    </span>
+                </Tooltip>
+            );
+        } else {
+            return (
+                <span className="sd-switch__wrapper" tabIndex={-1}>
+                    {this.props.label && this.props.label.side === 'left' ?
+                        <label htmlFor={this.htmlId}>{this.props.label.text}</label> : null}
+                    <span id={this.htmlId} role="checkbox" className={classes} aria-checked={this.props.value}
+                        aria-disabled={this.props.disabled} onClick={this.onClick} tabIndex={0}>
+                        <span className="inner" />
+                    </span>
+                    {this.props.label && this.props.label.side !== 'left' ?
+                        <label htmlFor={this.htmlId}>{this.props.label.text}</label> : null}
                 </span>
-                { this.props.label && this.props.label.side !== 'left' ?
-                    <label htmlFor={this.htmlId}>{this.props.label.text}</label> : null }
-            </span>
-        );
+            );
+        }
     }
 }

package/app-typescript/components/SwitchGroup.tsx

@@ -5,6 +5,7 @@ interface IProps {
     orientation?: 'vertical' | 'horizontal'; // defaults to 'vertical'
     align?: 'left' | 'right'; // defaults to 'left'
     children: React.ReactNode;
+    className?: string;
 }
 
 export class SwitchGroup extends React.PureComponent<IProps> {
@@ -13,7 +14,7 @@ export class SwitchGroup extends React.PureComponent<IProps> {
             [`sd-switch__group--vertical`]: this.props.orientation !== 'horizontal',
             [`sd-switch__group--horizontal`]: this.props.orientation === 'horizontal',
             [`sd-switch__group--right`]: this.props.align === 'right',
-        });
+        }, this.props.className);
 
         return (
             <div className={classes}>

package/app-typescript/components/Tag.tsx

@@ -3,23 +3,47 @@ import classNames from 'classnames';
 
 interface IProps {
     text: string;
+    label?: string;
     keyValue?: number;
     shade?: 'light' | 'darker' | 'highlight1' | 'highlight2' | 'inverse'; // default light
     shape?: 'round' | 'square'; // default round
+    readOnly?: boolean;
     onClick(): void;
 }
 
-export const Tag = ({ text, keyValue, shade, shape, onClick }: IProps) => {
+export const Tag = ({ text, keyValue, shade, shape, readOnly, onClick, label }: IProps) => {
     let classes = classNames('tag-label', {
         [`tag-label--${shade}`]: shade && shade !== 'light',
         'tag-label--square': shape === 'square',
+
     });
     return (
-        <div className={classes} key={keyValue}>
-            {text}
-            <button className='tag-label__remove' onClick={onClick}>
-                <i className='icon-close-small'></i>
-            </button>
-        </div>
+        <>
+            {label
+                ?
+                <span className={classes} key={keyValue}>
+                    <span className='tag-label--text-wrapper'>
+                        <span className='tag-label--text-label'>
+                            {label}:
+                        </span>
+                        <span className='tag-label--text'>
+                            {text}
+                        </span>
+                    </span>
+                    {!readOnly ? <button className='tag-label__remove' onClick={onClick}>
+                        <i className='icon-close-small'></i>
+                    </button> : null}
+                </span>
+                :
+                <span className={classes} key={keyValue}>
+                    <span className='tag-label--text'>
+                        {text}
+                    </span>
+                    {!readOnly ? <button className='tag-label__remove' onClick={onClick}>
+                        <i className='icon-close-small'></i>
+                    </button> : null}
+                </span>
+            }
+        </>
     );
 };

package/app-typescript/components/Text/Heading.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+interface IProps {
+    children: React.ReactNode;
+    className?: string;
+    weight?: 'normal' | 'medium' | 'strong';
+    style?: 'normal' | 'italic';
+    align?: 'start' | 'end' | 'center' | 'justify';
+    fontStyle?: 'sans' | 'serif';
+    color?: 'normal' | 'light' | 'lighter';
+    type: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+}
+
+export class Heading extends React.PureComponent<IProps> {
+    render() {
+        let classes = classNames('sd-heading', {
+            'sd-text--italic': this.props.style === 'italic',
+            [`sd-text--${this.props.weight}`]: this.props.weight,
+            'sd-text-align--left': this.props.align === undefined,
+            [`sd-text-align--${this.props.align}`]: this.props.align && this.props.align !== 'start',
+            'sd-text--sans': this.props.fontStyle === undefined,
+            [`sd-text--${this.props.fontStyle}`]: this.props.fontStyle && this.props.fontStyle !== 'sans',
+            [`sd-heading--${this.props.type}`]: this.props.type,
+            '': this.props.color === undefined,
+            [`sd-text-color--${this.props.color}`]: this.props.color && this.props.color !== 'normal',
+        }, this.props.className);
+        switch (this.props.type) {
+            case 'h1':
+                return (
+                    <h1 className={classes}>
+                        {this.props.children}
+                    </h1>
+                );
+            case 'h2':
+                return (
+                    <h2 className={classes}>
+                        {this.props.children}
+                    </h2>
+                );
+            case 'h3':
+                return (
+                    <h3 className={classes}>
+                        {this.props.children}
+                    </h3>
+                );
+            case 'h4':
+                return (
+                    <h4 className={classes}>
+                        {this.props.children}
+                    </h4>
+                );
+            case 'h5':
+                return (
+                    <h5 className={classes}>
+                        {this.props.children}
+                    </h5>
+                );
+            case 'h6':
+                return (
+                    <h6 className={classes}>
+                        {this.props.children}
+                    </h6>
+                );
+        }
+    }
+}