superdesk-ui-framework 2.4.21 → 3.0.0-rc12

package/app-typescript/components/DropZone.tsx

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Icon } from './Icon';
+// import * as PanelElements from '../../app-typescript/components/Layouts/Panel';
+
+interface IProps {
+    icon?: boolean;
+    iconSmall?: boolean;
+    text?: string;
+    heading?: string;
+    className?: string;
+    width?: 'auto' | 'full';
+    type?: 'default' | 'primary' | 'highlight' | 'darker';
+    state?: 'normal' | 'active'; // defaults to 'normal'
+    value?: 'button' | 'submit' | 'reset'; // defaults to 'button'
+    // onClick(): void;
+}
+
+interface IState {
+    dragClass: boolean;
+    dropClass: boolean;
+}
+
+export class DropZone extends React.PureComponent<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+        this.state = {
+            dragClass: false,
+            dropClass: false,
+        };
+
+        this.drop = this.drop.bind(this);
+        this.dragOver = this.dragOver.bind(this);
+        this.dragEnter = this.dragEnter.bind(this);
+        this.dragLeave = this.dragLeave.bind(this);
+    }
+
+    drop(event: any) {
+        event.preventDefault();
+        this.setState({dropClass: true, dragClass: false});
+        // var data = event.dataTransfer.getData("Text");
+    }
+
+    dragOver(event: any) {
+        event.preventDefault();
+        this.setState({dragClass: true});
+    }
+
+    dragEnter(event: any) {
+        event.preventDefault();
+    }
+
+    dragLeave(event: any) {
+        event.preventDefault();
+        this.setState({dragClass: false});
+    }
+
+    render() {
+        let classes = classNames('sd-dropzone__drop-target', {
+            'sd-dropzone__drop-target--ondragover': this.state.dragClass,
+            'sd-dropzone__drop-target--ondrop': this.state.dropClass,
+            [`sd-dropzone__drop-target--${this.props.type}`]: this.props.type,
+        }, this.props.className);
+
+        return (
+            <div className={classes}
+            onDragLeave={(event) => this.dragLeave(event)}
+            onDragEnter={(event) => this.dragEnter(event)}
+            onDragOver={(event) => this.dragOver(event)}
+            onDrop={(event) => this.drop(event)}
+            onDragStart={() => false}
+            onDragEnd={() => false}
+            >
+                <div className='sd-dropzone__target-border'>
+                </div>
+                <input type="file" className='sd-dropzone__input'/>
+                {this.props.icon ?
+                    <figure className='sd-dropzone__icon' aria-hidden='true'>
+                        <Icon name='upload-alt' size='big' />
+                    </figure> : null
+                }
+                {this.props.heading ?
+                    <h4 className='sd-dropzone__heading'>{this.props.heading}</h4> : null
+                }
+                <p className='sd-dropzone__description'>{this.props.text}</p>
+            </div>
+        );
+    }
+}

package/app-typescript/components/Dropdown.tsx

@@ -4,34 +4,42 @@ 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;
 }
 
+interface IMenuItemRes extends IMenuItem {
+    onChange?(event?: any): void;
+}
+
 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'>;
     footer?: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
     append?: boolean;
     children: React.ReactNode;
+    onChange?(event?: any): void;
 }
 
+const DROPDOWN_ID_CONTAINER = "sd-dropdown-constainer";
+
 export const Dropdown = ({
     items,
     header,
@@ -39,15 +47,13 @@ export const Dropdown = ({
     children,
     append,
     align,
+    onChange,
 }: IMenu) => {
     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 refSubMenu = React.useRef(null);
     const buttonRef = React.useRef(null);
-    const refButtonSubMenu = React.useRef(null);
     const headerElements = header?.map((el, index) => {
         return each(el, index);
     });
@@ -59,12 +65,12 @@ export const Dropdown = ({
     const footerElements = footer?.map((el, index) => {
         return each(el, index);
     });
+
     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';
@@ -73,7 +79,6 @@ export const Dropdown = ({
 
             document.body.appendChild(el);
         }
-
     }, [change]);
 
     React.useLayoutEffect(() => {
@@ -81,16 +86,12 @@ export const Dropdown = ({
             addInPlaceholder();
         }
         setChange(true);
-
     }, [open]);
 
-    // structure for append menu
     function createAppendMenu() {
         if (header && footer) {
             return (
-                <div className='dropdown__menu dropdown__menu--has-head-foot'
-                    id={menuID}
-                    ref={ref}>
+                <div className='dropdown__menu dropdown__menu--has-head-foot' id={menuID} role='menu' ref={ref}>
                     <ul className='dropdown__menu-header'>
                         {headerElements}
                     </ul>
@@ -104,9 +105,7 @@ export const Dropdown = ({
             );
         } else if (header) {
             return (
-                <div className='dropdown__menu dropdown__menu--has-head-foot'
-                    id={menuID}
-                    ref={ref}>
+                <div className='dropdown__menu dropdown__menu--has-head-foot' id={menuID} role='menu' ref={ref}>
                     <ul className='dropdown__menu-header'>
                         {headerElements}
                     </ul>
@@ -117,9 +116,7 @@ export const Dropdown = ({
             );
         } else if (footer) {
             return (
-                <div className='dropdown__menu dropdown__menu--has-head-foot'
-                    id={menuID}
-                    ref={ref}>
+                <div className='dropdown__menu dropdown__menu--has-head-foot' id={menuID} role='menu' ref={ref}>
                     <ul className='dropdown__menu-body'>
                         {dropdownElements}
                     </ul>
@@ -130,21 +127,19 @@ export const Dropdown = ({
             );
         } else {
             return (
-                <ul className='dropdown__menu '
-                    id={menuID}
-                    ref={ref}>
+                <ul className='dropdown__menu ' id={menuID} role='menu' ref={ref}>
                     {dropdownElements}
                 </ul>
             );
         }
     }
 
-    // toggle menu
     function toggleDisplay() {
         if (!open) {
+            let menuRef: any;
             setOpen(true);
             if (!append) {
-                let menuRef = ref.current;
+                menuRef = ref.current;
                 let toggleRef = buttonRef.current;
                 if (toggleRef && menuRef) {
                     createPopper(toggleRef, menuRef, {
@@ -153,18 +148,21 @@ export const Dropdown = ({
                 }
             } else {
                 setTimeout(() => {
-                    let menuRef: any = ref.current;
+                    menuRef = ref.current;
                     let toggleRef = buttonRef.current;
                     if (toggleRef && menuRef) {
                         createPopper(toggleRef, menuRef, {
                             placement: checkAlign() ? 'bottom-end' : 'bottom-start',
+                            strategy: 'fixed',
                         });
                         menuRef.style.display = 'block';
                     }
                 }, 0);
-
             }
             document.addEventListener('click', closeMenu);
+            setTimeout(() => {
+                menuRef.getElementsByTagName('button')[0].focus();
+            });
         } else {
             setOpen(false);
         }
@@ -184,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);
             }
         }
     }
@@ -203,31 +200,13 @@ export const Dropdown = ({
                 submenuItems.push(each(el, key));
             });
             return (
-                <li key={index}>
-                    <div className='dropdown' >
-                        <button
-                            ref={refButtonSubMenu}
-                            className='dropdown__toggle dropdown-toggle'
-                            aria-haspopup="true"
-                            onMouseOver={() => {
-                                let subMenuRef = refSubMenu.current;
-                                let subToggleRef = refButtonSubMenu.current;
-                                if (subMenuRef && subToggleRef) {
-                                    createPopper(subToggleRef, subMenuRef, {
-                                        placement: 'right-start',
-                                    });
-                                }
-                            }}
-                            onClick={item['onSelect']}>
-                            {item['icon'] ? <i className={'icon-' + item['icon']}></i> : null}
-                            {item['label']}
-                        </button>
-                        <ul ref={refSubMenu}
-                            className='dropdown__menu'>
-                            {submenuItems}
-                        </ul>
-                    </div>
-                </li>
+                <DropdownItemWithSubmenu
+                key={index}
+                index={index}
+                item={item}
+                menuID={menuID}
+                subMenuItems={submenuItems}
+                onChange={onChange} />
             );
         } else if (item['type'] === 'group') {
             let groupItems: any = [];
@@ -247,21 +226,24 @@ export const Dropdown = ({
         } else {
             return (
                 <DropdownItem
-                    key={index}
-                    label={item['label']}
-                    icon={item['icon']}
-                    onSelect={item['onSelect']} />);
+                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' }}>
                         {React.cloneElement(children, {
                             className: children.props.className ? (children.props.className + ' dropdown__toggle dropdown-toggle') : 'dropdown__toggle dropdown-toggle',
-                            'aria-haspopup': "true",
+                            'aria-haspopup': "menu",
                             'aria-expanded': open,
                             onClick: toggleDisplay,
                             ref: buttonRef,
@@ -269,10 +251,11 @@ export const Dropdown = ({
                     </div> : null)
                 :
                 <button ref={buttonRef}
-                    className=' dropdown__toggle dropdown-toggle'
-                    aria-haspopup="true"
-                    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>}
@@ -281,7 +264,7 @@ export const Dropdown = ({
                 null : (function() {
                     if (header && footer) {
                         return (
-                            <div className='dropdown__menu dropdown__menu--has-head-foot' ref={ref} >
+                            <div className='dropdown__menu dropdown__menu--has-head-foot' role='menu' ref={ref}>
                                 <ul className='dropdown__menu-header'>
                                     {headerElements}
                                 </ul>
@@ -295,7 +278,7 @@ export const Dropdown = ({
                         );
                     } else if (header) {
                         return (
-                            <div className='dropdown__menu dropdown__menu--has-head-foot' ref={ref} >
+                            <div className='dropdown__menu dropdown__menu--has-head-foot' role='menu' ref={ref}>
                                 <ul className='dropdown__menu-header'>
                                     {headerElements}
                                 </ul>
@@ -306,7 +289,7 @@ export const Dropdown = ({
                         );
                     } else if (footer) {
                         return (
-                            <div className='dropdown__menu dropdown__menu--has-head-foot' ref={ref} >
+                            <div className='dropdown__menu dropdown__menu--has-head-foot' role='menu' ref={ref}>
                                 <ul className='dropdown__menu-body'>
                                     {dropdownElements}
                                 </ul>
@@ -317,7 +300,7 @@ export const Dropdown = ({
                         );
                     } else {
                         return (
-                            <ul className='dropdown__menu' ref={ref} >
+                            <ul className='dropdown__menu' role='menu' ref={ref}>
                                 {dropdownElements}
                             </ul>
                         );
@@ -328,12 +311,93 @@ export const Dropdown = ({
 };
 
 const DropdownItem = ({
-    label,
-    icon,
-    onSelect,
-}: IMenuItem) => {
+label,
+icon,
+active,
+onSelect,
+onChange,
+}: IMenuItemRes) => {
     return (
-        <li><button onClick={onSelect}><i className={icon ? ('icon-' + icon) : ''}></i>{label}</button></li>
+        <li role='none' className={active ? 'dropdown__menu-item--active' : ''}>
+            <button tabIndex={0}
+            role='menuitem'
+            onClick={() => {
+                setTimeout(() => {
+                    onSelect();
+                });
+                if (onChange) {
+                    onChange();
+                }
+            }}>
+                <i className={icon ? ('icon-' + icon) : ''}></i>
+                {label}
+            </button>
+        </li>
     );
+};
+
+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) {
+            placeholder?.appendChild(subMenuRef);
+            subMenuRef.style.display = 'block';
+        } else if (open === false) {
+            placeholder?.removeChild(subMenuRef);
+            subMenuRef.style.display = 'none';
+        }
+
+        if (subMenuRef && subToggleRef) {
+            createPopper(subToggleRef, subMenuRef, {
+                placement: 'right-start',
+            });
+        }
+    }, [open]);
 
+    return (
+        <li key={index} ref={refButtonSubMenu}>
+            <div className='dropdown'
+            onMouseLeave={() => setOpen(false)}>
+                <button
+                className='dropdown__toggle dropdown-toggle'
+                aria-haspopup="menu"
+                tabIndex={0}
+                onClick={() => {
+                    if (item.onSelect) {
+                        setTimeout(() => {
+                            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'>
+                    {subMenuItems}
+                </ul>
+            </div>
+        </li>
+    );
 };

package/app-typescript/components/DropdownFirst.tsx

@@ -147,7 +147,7 @@ export const DropdownFirst = ({
                             {icon && level ? <i className={icon ? ('icon-' + icon) : ''}></i> : null}
                             {name}
                         </button>
-                        <ul className={classesMenu} ref={ref}>
+                        <ul className={classesMenu} ref={ref} role='menu'>
                             {children}
                         </ul>
                     </div>