superdesk-ui-framework 3.0.1-beta.13 → 3.0.1-beta.14

package/.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "cSpell.words": [
+        "qcode"
+    ]
+}

package/app/styles/_table-list.scss

@@ -5,6 +5,7 @@
     display: flex;
     flex-direction: column;
     align-self: stretch;
+    overflow: hidden !important;
     //gap: $sd-base-increment * 1.5;
     &--comfortable {
         gap: $sd-base-increment * 2;

package/app/styles/dropdowns/_basic-dropdown.scss

@@ -109,6 +109,10 @@ $focus-box-shadow:              0 0 0 3px $sd-colour--focus-shadow;
     border-radius: $dropdownMenuBorderRadius;
     text-align: start;
 
+    .dropdown {
+        width: 100%;
+    }
+
     // Links within the dropdown menu
     li, .dropdown__menu-item {
         a:not(.btn), button:not(.btn):not(.dropdown__menu-close):not(.toggle-button) {
@@ -193,8 +197,10 @@ $focus-box-shadow:              0 0 0 3px $sd-colour--focus-shadow;
         }
         .dropdown__menu-body {
             overflow-y: auto;
+            overflow-x: hidden;
             flex: 0 1;
             padding: 0.6rem 0;
+            max-height: 320px;
         }
         .dropdown__menu-body:first-child {
             .dropdown__menu-label {

package/app-typescript/components/Dropdown.tsx

@@ -4,7 +4,7 @@ import { createPopper } from '@popperjs/core';
 import { useId } from "react-id-generator";
 
 export interface IMenuItem {
-    label: string;
+    label: string | React.ReactNode;
     icon?: string;
     active?: boolean;
     onSelect(): void;
@@ -16,19 +16,19 @@ interface IMenuItemRes extends IMenuItem {
 
 export interface ISubmenu {
     type: 'submenu';
-    label: string;
+    label: string | React.ReactNode;
     icon?: string;
     items: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
 }
 
 export interface IMenuGroup {
     type: 'group';
-    label?: string;
+    label?: string | React.ReactNode;
     items: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
 }
 
 interface IMenu {
-    label?: string;
+    label?: string | React.ReactNode;
     align?: 'left' | 'right';
     items: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
     header?: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
@@ -38,6 +38,8 @@ interface IMenu {
     onChange?(event?: any): void;
 }
 
+const DROPDOWN_ID_CONTAINER = "sd-dropdown-constainer";
+
 export const Dropdown = ({
     items,
     header,
@@ -50,7 +52,6 @@ export const Dropdown = ({
     const [open, setOpen] = React.useState(false);
     const [change, setChange] = React.useState(false);
     const [menuID] = useId();
-    const DROPDOWN_ID = "react-placeholder";
     const ref = React.useRef(null);
     const buttonRef = React.useRef(null);
     const headerElements = header?.map((el, index) => {
@@ -66,11 +67,10 @@ export const Dropdown = ({
     });
 
     React.useEffect(() => {
-        const existingElement = document.getElementById(DROPDOWN_ID);
+        const existingElement = document.getElementById(DROPDOWN_ID_CONTAINER);
         if (!existingElement) {
             const el = document.createElement("div");
-            el.id = DROPDOWN_ID;
-            // style placeholder
+            el.id = DROPDOWN_ID_CONTAINER;
             el.style.position = 'absolute';
             el.style.top = '0';
             el.style.left = '0';
@@ -79,7 +79,6 @@ export const Dropdown = ({
 
             document.body.appendChild(el);
         }
-
     }, [change]);
 
     React.useLayoutEffect(() => {
@@ -89,14 +88,10 @@ export const Dropdown = ({
         setChange(true);
     }, [open]);
 
-    // structure for append menu
     function createAppendMenu() {
         if (header && footer) {
             return (
-                <div className='dropdown__menu dropdown__menu--has-head-foot'
-                    id={menuID}
-                    role='menu'
-                    ref={ref}>
+                <div className='dropdown__menu dropdown__menu--has-head-foot' id={menuID} role='menu' ref={ref}>
                     <ul className='dropdown__menu-header'>
                         {headerElements}
                     </ul>
@@ -110,10 +105,7 @@ export const Dropdown = ({
             );
         } else if (header) {
             return (
-                <div className='dropdown__menu dropdown__menu--has-head-foot'
-                    id={menuID}
-                    role='menu'
-                    ref={ref}>
+                <div className='dropdown__menu dropdown__menu--has-head-foot' id={menuID} role='menu' ref={ref}>
                     <ul className='dropdown__menu-header'>
                         {headerElements}
                     </ul>
@@ -124,10 +116,7 @@ export const Dropdown = ({
             );
         } else if (footer) {
             return (
-                <div className='dropdown__menu dropdown__menu--has-head-foot'
-                    id={menuID}
-                    role='menu'
-                    ref={ref}>
+                <div className='dropdown__menu dropdown__menu--has-head-foot' id={menuID} role='menu' ref={ref}>
                     <ul className='dropdown__menu-body'>
                         {dropdownElements}
                     </ul>
@@ -138,17 +127,13 @@ export const Dropdown = ({
             );
         } else {
             return (
-                <ul className='dropdown__menu '
-                    id={menuID}
-                    role='menu'
-                    ref={ref}>
+                <ul className='dropdown__menu ' id={menuID} role='menu' ref={ref}>
                     {dropdownElements}
                 </ul>
             );
         }
     }
 
-    // toggle menu
     function toggleDisplay() {
         if (!open) {
             let menuRef: any;
@@ -197,14 +182,13 @@ export const Dropdown = ({
     }
 
     function addInPlaceholder() {
-        const placeholder = document.getElementById(DROPDOWN_ID);
+        const placeholder = document.getElementById(DROPDOWN_ID_CONTAINER);
         let menu = createAppendMenu();
         if (open) {
             return ReactDOM.render(menu, placeholder);
         } else {
-            const menuDOM = document.getElementById(menuID);
-            if (menuDOM) {
-                menuDOM.style.display = 'none';
+            if (placeholder) {
+                ReactDOM.unmountComponentAtNode(placeholder);
             }
         }
     }
@@ -217,10 +201,12 @@ export const Dropdown = ({
             });
             return (
                 <DropdownItemWithSubmenu
-                    key={index}
-                    item={item}
-                    subMenuItems={submenuItems}
-                />
+                key={index}
+                index={index}
+                item={item}
+                menuID={menuID}
+                subMenuItems={submenuItems}
+                onChange={onChange} />
             );
         } else if (item['type'] === 'group') {
             let groupItems: any = [];
@@ -240,17 +226,18 @@ export const Dropdown = ({
         } else {
             return (
                 <DropdownItem
-                    key={index}
-                    label={item['label']}
-                    icon={item['icon']}
-                    active={item['active']}
-                    onSelect={item['onSelect']}
-                    onChange={onChange} />);
+                key={index}
+                label={item['label']}
+                icon={item['icon']}
+                active={item['active']}
+                onSelect={item['onSelect']}
+                onChange={onChange} />
+            );
         }
     }
 
     return (
-        <div className={'dropdown ' + (open ? 'open' : '')} >
+        <div className={'dropdown ' + (open ? 'open' : '')}>
             {typeof children === 'object' ?
                 (React.isValidElement(children) ?
                     <div ref={buttonRef} style={{ display: 'content' }}>
@@ -264,11 +251,11 @@ export const Dropdown = ({
                     </div> : null)
                 :
                 <button ref={buttonRef}
-                    className=' dropdown__toggle dropdown-toggle'
-                    aria-haspopup="menu"
-                    tabIndex={0}
-                    aria-expanded={open}
-                    onClick={toggleDisplay}>
+                className=' dropdown__toggle dropdown-toggle'
+                aria-haspopup="menu"
+                tabIndex={0}
+                aria-expanded={open}
+                onClick={toggleDisplay}>
                     {children}
                     <span className="dropdown__caret"></span>
                 </button>}
@@ -277,7 +264,7 @@ export const Dropdown = ({
                 null : (function() {
                     if (header && footer) {
                         return (
-                            <div className='dropdown__menu dropdown__menu--has-head-foot' role='menu' ref={ref} >
+                            <div className='dropdown__menu dropdown__menu--has-head-foot' role='menu' ref={ref}>
                                 <ul className='dropdown__menu-header'>
                                     {headerElements}
                                 </ul>
@@ -291,7 +278,7 @@ export const Dropdown = ({
                         );
                     } else if (header) {
                         return (
-                            <div className='dropdown__menu dropdown__menu--has-head-foot' role='menu' ref={ref} >
+                            <div className='dropdown__menu dropdown__menu--has-head-foot' role='menu' ref={ref}>
                                 <ul className='dropdown__menu-header'>
                                     {headerElements}
                                 </ul>
@@ -302,7 +289,7 @@ export const Dropdown = ({
                         );
                     } else if (footer) {
                         return (
-                            <div className='dropdown__menu dropdown__menu--has-head-foot' role='menu' ref={ref} >
+                            <div className='dropdown__menu dropdown__menu--has-head-foot' role='menu' ref={ref}>
                                 <ul className='dropdown__menu-body'>
                                     {dropdownElements}
                                 </ul>
@@ -313,7 +300,7 @@ export const Dropdown = ({
                         );
                     } else {
                         return (
-                            <ul className='dropdown__menu' role='menu' ref={ref} >
+                            <ul className='dropdown__menu' role='menu' ref={ref}>
                                 {dropdownElements}
                             </ul>
                         );
@@ -332,7 +319,9 @@ onChange,
 }: IMenuItemRes) => {
     return (
         <li role='none' className={active ? 'dropdown__menu-item--active' : ''}>
-            <button tabIndex={0} role='menuitem' onClick={() => {
+            <button tabIndex={0}
+            role='menuitem'
+            onClick={() => {
                 onSelect();
                 if (onChange) {
                     onChange();
@@ -348,23 +337,25 @@ onChange,
 const DropdownItemWithSubmenu = ({
     index,
     item,
+    menuID,
     subMenuItems,
+    onChange,
 }: IMenuItem | any) => {
     const [open, setOpen] = React.useState<undefined | boolean>(undefined);
 
     const refButtonSubMenu = React.useRef(null);
     const refSubMenu = React.useRef(null);
+    const placeholder = document.getElementById(menuID);
 
     React.useEffect(() => {
         let subMenuRef: any = refSubMenu.current;
         let subToggleRef = refButtonSubMenu.current;
 
         if (open === true) {
-            document.body.appendChild(subMenuRef);
+            placeholder?.appendChild(subMenuRef);
             subMenuRef.style.display = 'block';
-
         } else if (open === false) {
-            document.body.removeChild(subMenuRef);
+            placeholder?.removeChild(subMenuRef);
             subMenuRef.style.display = 'none';
         }
 
@@ -377,20 +368,29 @@ const DropdownItemWithSubmenu = ({
 
     return (
         <li key={index} ref={refButtonSubMenu}>
-            <div className='dropdown' onMouseLeave={() => setOpen(false) }>
+            <div className='dropdown'
+            onMouseLeave={() => setOpen(false)}>
                 <button
-                    className='dropdown__toggle dropdown-toggle'
-                    aria-haspopup="menu"
-                    tabIndex={0}
-                    onMouseOver={() => setOpen(true) }
-                    onClick={item['onSelect']}>
+                className='dropdown__toggle dropdown-toggle'
+                aria-haspopup="menu"
+                tabIndex={0}
+                onClick={() => {
+                    if (item.onSelect) {
+                        item.onSelect();
+                    }
+                    if (onChange) {
+                        onChange();
+                    }
+                }}
+                onMouseOver={() => setOpen(true) }>
                     {item['icon'] ? <i className={'icon-' + item['icon']}></i> : null}
                     {item['label']}
                 </button>
-                <ul role='menu'
-                    ref={refSubMenu}
-                    style={{display: 'none'}}
-                    className='dropdown__menu'>
+                <ul
+                role='menu'
+                ref={refSubMenu}
+                style={{display: 'none'}}
+                className='dropdown__menu'>
                     {subMenuItems}
                 </ul>
             </div>

package/app-typescript/components/DurationInput.tsx

@@ -356,7 +356,7 @@ export class DurationInput extends React.PureComponent<IProps, IState> {
     }
 }
 
-export function getDurationString(seconds: number) {
+export function getDurationString(seconds: number, zero?: boolean) {
     function zeroPad(value: number | string) {
         if (value.toString().length === 1 || value === 0) {
             return `0${value}`;
@@ -367,9 +367,19 @@ export function getDurationString(seconds: number) {
         }
     }
 
-    let hour = zeroPad(Math.floor(seconds / 3600));
-    let minute = zeroPad(Math.floor((seconds % 3600) / 60));
-    let second = zeroPad(Math.floor(seconds % 60));
+    let hour;
+    let minute;
+    let second;
+
+    if (zero) {
+        hour = zeroPad(Math.floor(seconds / 3600));
+        minute = zeroPad(Math.floor((seconds % 3600) / 60));
+        second = zeroPad(Math.floor(seconds % 60));
+    } else {
+        hour = Math.floor(seconds / 3600);
+        minute = Math.floor((seconds % 3600) / 60);
+        second = Math.floor(seconds % 60);
+    }
 
     if (Number(hour) === 0 && Number(minute) > 0) {
         return `${minute}m ${second}s`;

package/app-typescript/components/Lists/ContentList.tsx

@@ -14,8 +14,34 @@ interface IPropsItem {
 }
 
 class ContentListItem extends React.PureComponent<IPropsItem> {
+
+    private timer: any;
+    private delay = 200;
+    private prevent = false;
+
+    onSingleClick = () => {
+        this.timer = setTimeout(() => {
+            if (!this.prevent) {
+                if (this.props.onClick) {
+                    this.props.onClick();
+                }
+            }
+        }, this.delay);
+    }
+
+    onDoubleClick = () => {
+        clearTimeout(this.timer);
+        this.prevent = true;
+        if (this.props.onDoubleClick) {
+            this.props.onDoubleClick();
+        }
+        setTimeout(() => {
+            this.prevent = false;
+        }, this.delay);
+    }
+
     render() {
-        let classes = classNames('sd-list-item sd-list-item-group sd-list-item-group--space-between-items', {
+        let classes = classNames('sd-list-item sd-shadow--z1', {
             'sd-list-item--activated': this.props.activated,
             'sd-list-item--selected': this.props.selected,
             'fetched': this.props.archived,
@@ -23,8 +49,7 @@ class ContentListItem extends React.PureComponent<IPropsItem> {
     });
 
         return (
-            <div className={classes} onClick={this.props.onClick} onDoubleClick={this.props.onDoubleClick}>
-                <div className="sd-list-item sd-shadow--z1">
+                <div className={classes} onClick={this.onSingleClick} onDoubleClick={this.onDoubleClick}>
                     {this.props.locked
                     ? <div className="sd-list-item__border sd-list-item__border--locked"></div>
                     : <div className="sd-list-item__border"></div>}
@@ -47,7 +72,6 @@ class ContentListItem extends React.PureComponent<IPropsItem> {
                         {this.props.action}
                     </div>
                 </div>
-            </div>
         );
     }
 }

package/app-typescript/components/Lists/TableList.tsx

@@ -9,12 +9,12 @@ export interface IProps {
     array: Array<IPropsArrayItem>;
     addItem?: boolean;
     dragAndDrop?: boolean;
-    itemsDropdown?: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
     className?: string;
     readOnly?: boolean;
     showDragHandle?: 'always' | 'onHover' | 'none'; // always default
     onDrag?(start: number, end: number): void;
     onAddItem?(index: number, item?: IPropsArrayItem ): void;
+    itemsDropdown?(index?: number): Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
 }
 
 export interface IPropsArrayItem {
@@ -22,9 +22,9 @@ export interface IPropsArrayItem {
     center?: React.ReactNode;
     end?: React.ReactNode;
     action?: React.ReactNode;
+    hexColor?: string;
     onClick?(): void;
     onDoubleClick?(): void;
-    hexColor?: string;
 }
 
 interface IState {
@@ -86,7 +86,7 @@ class TableList extends React.PureComponent<IProps, IState> {
     dropDown() {
         return (
             <Dropdown
-                items={this.props.itemsDropdown ? this.props.itemsDropdown : []}>
+                items={this.props.itemsDropdown ? this.props.itemsDropdown() : []}>
                 <Button
                     type="primary"
                     icon="plus-large"
@@ -135,7 +135,9 @@ class TableList extends React.PureComponent<IProps, IState> {
                                                             ? item.onDoubleClick
                                                             : undefined}
                                                         addItem={this.props.addItem}
-                                                        itemsDropdown={this.props.itemsDropdown}
+                                                        itemsDropdown={() => this.props.itemsDropdown
+                                                            ? this.props.itemsDropdown(index)
+                                                            : []}
                                                         hexColor={item.hexColor}
                                                         onAddItem={() => this.props.onAddItem
                                                             && this.props.onAddItem(index, item)}
@@ -172,7 +174,7 @@ class TableList extends React.PureComponent<IProps, IState> {
                                     ? item.onDoubleClick
                                     : undefined}
                                 addItem={this.props.addItem}
-                                itemsDropdown={this.props.itemsDropdown}
+                                itemsDropdown={() => this.props.itemsDropdown ? this.props.itemsDropdown(index) : []}
                                 hexColor={item.hexColor}
                                 onAddItem={() => this.props.onAddItem
                                     && this.props.onAddItem(index, item)}
@@ -208,14 +210,14 @@ export interface IPropsItem {
     end?: React.ReactNode;
     action?: React.ReactNode;
     addItem?: boolean;
-    itemsDropdown?: any;
     dragAndDrop?: boolean;
+    hexColor?: string;
+    showDragHandle?: 'always' | 'onHover' | 'none';
     onClick?(): void;
     onDoubleClick?(): void;
     onSelect?(): void;
     onAddItem?(e: number): void;
-    hexColor?: string;
-    showDragHandle?: 'always' | 'onHover' | 'none';
+    itemsDropdown?(index?: number): Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
 }
 
 class TableListItem extends React.PureComponent<IPropsItem> {
@@ -281,7 +283,7 @@ class TableListItem extends React.PureComponent<IPropsItem> {
                             <div className='table-list__add-bar'>
                                 <Dropdown
                                     onChange={this.props.onAddItem}
-                                    items={this.props.itemsDropdown ? this.props.itemsDropdown : []}>
+                                    items={this.props.itemsDropdown ? this.props.itemsDropdown() : []}>
                                     <Button
                                         type="primary"
                                         icon="plus-large"

package/app-typescript/dist/components/Alert.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+interface IProps {
+    type?: 'primary' | 'success' | 'warning' | 'alert' | 'highlight' | 'sd-green';
+    style?: 'filled' | 'hollow';
+    size?: 'normal' | 'small';
+    restoreIcon?: 'info' | 'help';
+}
+interface IState {
+    open: boolean;
+}
+export declare class Alert extends React.PureComponent<IProps, IState> {
+    constructor(props: IProps);
+    onToggle(): void;
+    render(): JSX.Element;
+}
+export {};

package/app-typescript/dist/components/Autocomplete.d.ts

@@ -0,0 +1,48 @@
+import * as React from 'react';
+interface IProps {
+    items: Array<any>;
+    keyValue?: string;
+    minLength?: number;
+    value?: string | object;
+    label?: string;
+    placeholder?: string;
+    info?: string;
+    error?: string;
+    required?: boolean;
+    disabled?: boolean;
+    invalid?: boolean;
+    inlineLabel?: boolean;
+    isSearchField?: boolean;
+    listItemTemplate?(value: any): any;
+    search?(searhString: string, callback: (result: Array<any>) => void): {
+        cancel: () => void;
+    };
+    onChange(newValue: string): void;
+    onSelect?(suggestion: string): void;
+}
+interface IState {
+    selectedItem: any;
+    filteredItems: any;
+    invalid: boolean;
+    focused: boolean;
+}
+export declare class Autocomplete extends React.Component<IProps, IState> {
+    latestCall?: {
+        cancel: () => void;
+    };
+    constructor(props: IProps);
+    htmlId: string;
+    search(term: string): void;
+    searchItem(event: any): void;
+    handleChange(event: {
+        originalEvent: Event;
+        value: any;
+    }): void;
+    handleSelect(event: {
+        originalEvent: Event;
+        value: any;
+    }): void;
+    handleInputClear(): void;
+    render(): JSX.Element;
+}
+export {};

package/app-typescript/dist/components/Avatar.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+interface IBase {
+    tooltipText?: string;
+}
+interface IImageAvatar extends IBase {
+    imageUrl?: string;
+}
+interface ITextAvatar extends IBase {
+    text: string;
+}
+export declare class AvatarContentText extends React.PureComponent<ITextAvatar> {
+    render(): JSX.Element;
+}
+export declare class AvatarContentImage extends React.PureComponent<IImageAvatar> {
+    render(): JSX.Element;
+}
+interface IPropsAvatarWrapper {
+    size?: 'small' | 'medium' | 'large' | 'x-large' | 'xx-large';
+    statusIndicator?: {
+        status: 'online' | 'offline';
+        tooltipText?: string;
+    };
+    administratorIndicator?: {
+        enabled: boolean;
+        tooltipText?: string;
+    };
+    children: React.ReactNode;
+    'data-test-id'?: string;
+}
+export declare class AvatarWrapper extends React.PureComponent<IPropsAvatarWrapper> {
+    render(): JSX.Element;
+}
+export {};

package/app-typescript/dist/components/Badge.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+interface IProps {
+    text?: string;
+    type?: 'default' | 'primary' | 'success' | 'warning' | 'alert' | 'highlight' | 'light';
+    color?: string;
+    shape?: 'round' | 'square';
+    children?: React.ReactNode;
+    'data-test-id'?: string;
+}
+export declare class Badge extends React.PureComponent<IProps> {
+    render(): JSX.Element;
+}
+export {};

package/app-typescript/dist/components/Button.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+interface IButtonBase {
+    id?: string;
+    theme?: 'light' | 'dark';
+    type?: 'default' | 'primary' | 'success' | 'warning' | 'alert' | 'highlight' | 'sd-green';
+    size?: 'small' | 'normal' | 'large';
+    children?: never;
+    icon?: string;
+    disabled?: boolean;
+    iconOnly?: boolean;
+    onClick(): void;
+    'data-test-id'?: string;
+}
+interface IPropsButton extends IButtonBase {
+    text: string;
+    expand?: boolean;
+    style?: 'filled' | 'hollow' | 'text-only';
+    shape?: 'square' | 'round';
+}
+export declare class Button extends React.PureComponent<IPropsButton> {
+    render(): JSX.Element;
+}
+export {};

package/app-typescript/dist/components/ButtonGroup.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+interface IProps {
+    orientation?: 'horizontal' | 'vertical';
+    spaces?: 'comfort' | 'compact';
+    align?: 'left' | 'right' | 'center' | 'inline';
+    padded?: boolean;
+    children: React.ReactNode;
+}
+export declare class ButtonGroup extends React.PureComponent<IProps> {
+    render(): JSX.Element;
+}
+export {};