superdesk-ui-framework 2.4.14 → 2.4.18

package/app-typescript/components/SelectGrid.tsx

@@ -0,0 +1,233 @@
+import 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="sd-shadow--z3 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 flex-grid flex-grid--wrap-items flex-grid--small-4 flex-grid--boxed"
+                            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--2"
+                                    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/SelectWithTemplate.tsx

@@ -109,8 +109,6 @@ export class SelectWithTemplate<T> extends React.Component<IProps<T>, IState<T>>
                 onFilterInputChange={(searchString) => {
                     this.setState({loading: true});
 
-                    console.log('change');
-
                     getItems(searchString).then((_options) => {
                         this.setState({options: _options, loading: false});
                     });

package/app-typescript/components/Skeleton.tsx

@@ -0,0 +1,48 @@
+
+import 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/Tag.tsx

@@ -16,11 +16,11 @@ export const Tag = ({ text, keyValue, shade, shape, readOnly, onClick }: IProps)
         'tag-label--square': shape === 'square',
     });
     return (
-        <div className={classes} key={keyValue}>
+        <span className={classes} key={keyValue}>
             {text}
             {!readOnly ? <button className='tag-label__remove' onClick={onClick}>
                 <i className='icon-close-small'></i>
             </button> : null}
-        </div>
+        </span>
     );
 };

package/app-typescript/components/Toast.tsx

@@ -1,14 +1,27 @@
 import * as React from 'react';
 import * as ReactDOM from "react-dom";
-import { MessageProp, IMessageOptions } from './ToastMessage';
+import {MessageProp, IMessageOptions, Position} from './ToastMessage';
 import ToastWrapper from './ToastWrapper';
 
 const TOAST_ID = "react-toast";
 
-export class Toasted {
+interface IMessageId {
+    id: string;
+    position: Position;
+}
+
+class Toasted {
     componentRef: ToastWrapper | null;
+
     constructor() {
         this.componentRef = null;
+    }
+
+    setup() {
+        if (this.componentRef != null) {
+            return;
+        }
+
         let element = null;
         const existingElement = document.getElementById(TOAST_ID);
 
@@ -17,19 +30,32 @@ export class Toasted {
         } else {
             const el = document.createElement("div");
             el.id = TOAST_ID;
-            el.className = "sd-toast__container sd-toast__container--top ng-scope";
+            el.className = "sd-toast__container sd-toast__container--top";
             document.body.appendChild(el);
             element = el;
         }
+
         ReactDOM.render(
             <ToastWrapper ref={(ref) => {
                 this.componentRef = ref;
             }} />, element);
     }
 
-    notify(message: MessageProp, options: Omit<IMessageOptions, 'id'>) {
+    notify(message: MessageProp, options: Partial<IMessageOptions>): IMessageId | null {
+        this.setup();
+
+        if (this.componentRef != null) {
+            return this.componentRef.notify(message, options);
+        }
+
+        return null;
+    }
+
+    close(messageId: IMessageId) {
         if (this.componentRef != null) {
-            this.componentRef.notify(message, options);
+            this.componentRef.requestClose(messageId.id, messageId.position);
         }
     }
 }
+
+export const toasted = new Toasted();

package/app-typescript/components/ToastMessage.tsx

@@ -11,11 +11,11 @@ export type Position = 'top' | 'bottom' | 'top-right' | 'top-left' | 'bottom-rig
 export type NotesType = 'default' | 'primary' | 'success' | 'warning' | 'alert' | 'highlight' | 'light';
 
 export interface IMessageOptions {
+    id: string;
+    position: Position;
     message?: MessageProp;
-    id?: string;
     duration?: number | null;
     type?: NotesType;
-    position?: Position;
     icon?: string;
     size?: 'fixed-s' | 'fixed-m' | 'fixed-l' | 'fixed-xl';
 }
@@ -36,19 +36,17 @@ export const ToastMessage = ({
 }: IProps) => {
     const [show, setShow] = React.useState(false);
     const [enter, setEnter] = React.useState(false);
-    const [height, setHeight] = React.useState(0);
-    let timer = null;
+    let timer: number;
     React.useEffect(() => setShow(true), []);
 
-    React.useEffect(() => {
-        if (typeof duration === "number") {
-            setEnter(true);
-            timer = setTimeout(() => {
+    if (typeof duration === "number") {
+        React.useEffect(() => {
+            timer = window.setTimeout(() => {
                 close(id, position);
             }, duration);
             return () => clearTimeout(timer);
-        }
-    }, [enter]);
+        }, [enter]);
+    }
 
     function onMouseEnter() {
         clearTimeout(timer);
@@ -73,20 +71,15 @@ export const ToastMessage = ({
         ['sd-toast--exit-active']: !show,
     });
 
-    function addHeight(textHeight: number) {
-        setHeight(textHeight + 25);
-    }
-
     return (
         <div
             className={classes}
             onMouseEnter={onMouseEnter}
             onMouseLeave={onMouseLeave}
-            style={{ height: height }}
             aria-live="assertive"
             aria-atomic="true"
         >
-            <ToastText id={id} title={message} icon={icon} onClose={() => close(id, position)} textHeight={addHeight} />
+            <ToastText id={id} title={message} icon={icon} onClose={() => close(id, position)} />
         </div>
     );
 };

package/app-typescript/components/ToastText.tsx

@@ -2,16 +2,14 @@ import * as React from 'react';
 import { Icon } from './Icon';
 
 interface IProps {
-  id: string;
+  id?: string;
   title?: string | React.ReactNode;
   icon?: string;
   onClose: () => void;
-  textHeight(height: number): void;
 }
 
-const ToastText = ({ id, title, icon, onClose, textHeight }: IProps) => {
+const ToastText = ({ id, title, icon, onClose}: IProps) => {
   const ref = React.useRef(null);
-  React.useEffect(() => textHeight(ref.current.clientHeight), []);
   return (
     <React.Fragment>
       {icon ?

package/app-typescript/components/ToastWrapper.tsx

@@ -29,7 +29,7 @@ export default class ToastWrapper extends React.PureComponent<{}, State> {
     this.notify = this.notify.bind(this);
   }
 
-  notify = (message: MessageProp, options: IMessageOptions) => {
+  notify = (message: MessageProp, options: Partial<IMessageOptions>) => {
     const toast = this.createToastState(message, options);
     const { position } = toast;
 
@@ -47,9 +47,9 @@ export default class ToastWrapper extends React.PureComponent<{}, State> {
 
   createToastState = (
     message: MessageProp,
-    options: IMessageOptions,
+    options: Partial<IMessageOptions>,
   ) => {
-    const id = ++ToastWrapper.idCounter;
+    const id = '' + ++ToastWrapper.idCounter;
     const position = options.position ?? 'top';
     return {
       id,
@@ -62,7 +62,7 @@ export default class ToastWrapper extends React.PureComponent<{}, State> {
     };
   }
 
-  requestClose = (id: string, position: string) => {
+  requestClose = (id: string, position: keyof State) => {
     this.setState((prev) => {
       return {
         ...prev,

package/app-typescript/components/Togglebox.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import classNames from 'classnames';
+import nextId from "react-id-generator";
+
+interface IProps {
+    title: string;
+    badge?: JSX.Element;
+    children: any;
+    hideUsingCSS?: boolean;
+    initiallyOpen?: boolean; // defaults to false
+    className?: string;
+    onOpen?(): void;
+    onClose?(): void;
+}
+
+interface IState {
+    isOpen: boolean;
+}
+
+/**
+ * @ngdoc react
+ * @name ToggleBox
+ * @description ToggleBox used to open/close a set of details
+ */
+
+export class ToggleBox extends React.PureComponent<IProps, IState> {
+    htmlId = nextId();
+    constructor(props: IProps) {
+        super(props);
+        this.state = {
+            isOpen: this.props.initiallyOpen ?? false,
+        };
+    }
+
+    handleKeyDown = (event: React.KeyboardEvent<HTMLAnchorElement>): void => {
+        if (event.key === "ArrowRight" && !this.state.isOpen) {
+            this.setState({ isOpen: true });
+        } else if (event.key === "ArrowLeft" && this.state.isOpen) {
+            this.setState({ isOpen: false });
+        } else if (event.key === "Enter") {
+            this.toggle();
+        }
+    }
+
+    toggle = (): void => {
+        this.setState({ isOpen: !this.state.isOpen }, () => {
+            if (!this.state.isOpen && this.props.onClose) {
+                this.props.onClose();
+            } else if (this.props.onOpen) {
+                this.props.onOpen();
+            }
+        });
+    }
+
+    render() {
+        const { title, hideUsingCSS, className, children, badge } = this.props;
+        const { isOpen } = this.state;
+
+        return (
+            <div
+                className={classNames(
+                    'toggle-box',
+                    className,
+                    { hidden: !isOpen },
+                )}
+            >
+                <a
+                    className="toggle-box__header"
+                    onClick={this.toggle}
+                    role="button"
+                    tabIndex={0}
+                    onKeyDown={this.handleKeyDown}
+                    id={`togglebox-${this.htmlId}`}
+                >
+                    <div className="toggle-box__chevron">
+                        <i className="icon-chevron-right-thin" />
+                    </div>
+                    <div className="toggle-box__label">
+                        {title}
+                    </div>
+                    <div
+                        className="toggle-box__line"
+                    />
+                    {badge ? badge : null}
+                </a>
+                <div className="toggle-box__content-wraper">
+                    {isOpen && !hideUsingCSS && (
+                        <div className="toggle-box__content" aria-describedby={`togglebox-${this.htmlId}`}>
+                            {children}
+                        </div>
+                    )}
+
+                    {hideUsingCSS && (
+                        <div
+                            className={classNames(
+                                'toggle-box__content',
+                                { 'toggle-box__content--hidden': !isOpen },
+                            )}
+                            aria-describedby={`togglebox-${this.htmlId}`}
+                        >
+                            {children}
+                        </div>
+                    )}
+                </div>
+            </div>
+        );
+    }
+}

package/app-typescript/components/Tooltip.tsx

@@ -1,11 +1,19 @@
 import * as React from 'react';
 import nextId from "react-id-generator";
+import { Tooltip as PRTooltip } from '@superdesk/primereact/tooltip';
 interface IProps {
     text: string;
     flow?: 'top' | 'left' | 'right' | 'down'; // defaults to 'top'
+    appendToBody?: boolean;
 }
 
-export class Tooltip extends React.PureComponent<IProps> {
+export const Tooltip: React.FC<IProps>  = ({appendToBody, children, ...otherProps}) =>
+    appendToBody ?
+    <TooltipAppended {...otherProps}>{children}</TooltipAppended>
+    :
+    <TooltipBasic {...otherProps}>{children}</TooltipBasic>;
+
+class TooltipBasic extends React.PureComponent<IProps> {
     htmlId = nextId();
     componentDidMount() {
         let tooltip = document.getElementById('t' + this.htmlId);
@@ -26,3 +34,19 @@ export class Tooltip extends React.PureComponent<IProps> {
         }
     }
 }
+
+const TooltipAppended: React.FC<IProps> = ({children, flow, text}) => {
+    const htmlId = nextId();
+    const triggerId = "t" + htmlId;
+    const position = flow === "down" ? "bottom" : flow;
+
+    return (
+        <React.Fragment>
+            <PRTooltip target={"#" + triggerId} content={text} position={position ?? 'top'}/>
+            {React.isValidElement(children) ?
+                React.cloneElement(children, { id: triggerId})
+                :
+                <React.Fragment />}
+        </React.Fragment>
+    );
+};

package/app-typescript/index.ts

@@ -60,6 +60,14 @@ export { GridItem, GridItemContent, GridItemMedia, GridItemFooter, GridItemConte
     GridItemTime, GridItemTitle, GridItemText, GridItemSlug, GridItemFooterBlock,
     GridItemFooterActions, GridItemTopActions, GridItemCheckWrapper
 } from './components/GridItem';
+export { toasted } from './components/Toast';
+export { Menu } from './components/Menu';
+export { ToggleBox } from './components/Togglebox';
+export { SelectGrid } from './components/SelectGrid';
+export { IconPicker } from './components/IconPicker';
+
+export { Skeleton } from './components/Skeleton';
+export { ListItemLoader } from './components/ListItemLoader';
 
 // declare non-typescript exports to prevent errors
 export declare const ToggleBoxNext: any;