superdesk-ui-framework 4.0.47 → 4.0.49

package/app-typescript/components/DropZone.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import { Icon } from './Icon';
+import {Icon} from './Icon';
 // import * as PanelElements from '../../app-typescript/components/Layouts/Panel';
 
 interface IProps {
@@ -56,33 +56,35 @@ export class DropZone extends React.PureComponent<IProps, IState> {
     }
 
     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);
+        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={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 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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { createPopper } from '@popperjs/core';
-import { useId } from "react-id-generator";
+import {createPopper} from '@popperjs/core';
+import {useId} from 'react-id-generator';
 import {getNextZIndex} from './../zIndex';
 
 export interface IMenuItem {
@@ -39,17 +39,9 @@ interface IMenu {
     maxHeight?: number;
 }
 
-const DROPDOWN_ID_CONTAINER = "sd-dropdown-constainer";
+const DROPDOWN_ID_CONTAINER = 'sd-dropdown-constainer';
 
-export const Dropdown = ({
-    items,
-    header,
-    footer,
-    children,
-    align,
-    onChange,
-    maxHeight,
-}: IMenu) => {
+export const Dropdown = ({items, header, footer, children, align, onChange, maxHeight}: IMenu) => {
     const [zIndex, setZIndex] = React.useState<number>(-1);
 
     if (zIndex === -1) {
@@ -77,7 +69,7 @@ export const Dropdown = ({
     React.useEffect(() => {
         const existingElement = document.getElementById(DROPDOWN_ID_CONTAINER);
         if (!existingElement) {
-            const el = document.createElement("div");
+            const el = document.createElement('div');
             el.id = DROPDOWN_ID_CONTAINER;
             el.style.position = 'absolute';
             el.style.top = '0';
@@ -101,62 +93,49 @@ export const Dropdown = ({
         if (header && footer) {
             return (
                 <div
-                    className='dropdown__menu dropdown__menu--has-head-foot'
-                    id={menuID} role='menu'
+                    className="dropdown__menu dropdown__menu--has-head-foot"
+                    id={menuID}
+                    role="menu"
                     ref={ref}
                     style={{zIndex}}
                 >
-                    <ul className='dropdown__menu-header'>
-                        {headerElements}
-                    </ul>
-                    <ul className='dropdown__menu-body'>
-                        {dropdownElements}
-                    </ul>
-                    <ul className='dropdown__menu-footer dropdown__menu-footer--has-list '>
-                        {footerElements}
-                    </ul>
+                    <ul className="dropdown__menu-header">{headerElements}</ul>
+                    <ul className="dropdown__menu-body">{dropdownElements}</ul>
+                    <ul className="dropdown__menu-footer dropdown__menu-footer--has-list ">{footerElements}</ul>
                 </div>
             );
         } else if (header) {
             return (
                 <div
-                    className='dropdown__menu dropdown__menu--has-head-foot'
+                    className="dropdown__menu dropdown__menu--has-head-foot"
                     id={menuID}
-                    role='menu'
+                    role="menu"
                     ref={ref}
                     style={{zIndex}}
                 >
-                    <ul className='dropdown__menu-header'>
-                        {headerElements}
-                    </ul>
-                    <ul className='dropdown__menu-body'>
-                        {dropdownElements}
-                    </ul>
+                    <ul className="dropdown__menu-header">{headerElements}</ul>
+                    <ul className="dropdown__menu-body">{dropdownElements}</ul>
                 </div>
             );
         } else if (footer) {
             return (
                 <div
-                    className='dropdown__menu dropdown__menu--has-head-foot'
+                    className="dropdown__menu dropdown__menu--has-head-foot"
                     id={menuID}
-                    role='menu'
+                    role="menu"
                     ref={ref}
                     style={{zIndex}}
                 >
-                    <ul className='dropdown__menu-body'>
-                        {dropdownElements}
-                    </ul>
-                    <ul className='dropdown__menu-footer dropdown__menu-footer--has-list '>
-                        {footerElements}
-                    </ul>
+                    <ul className="dropdown__menu-body">{dropdownElements}</ul>
+                    <ul className="dropdown__menu-footer dropdown__menu-footer--has-list ">{footerElements}</ul>
                 </div>
             );
         } else {
             return (
                 <ul
-                    className='dropdown__menu '
+                    className="dropdown__menu "
                     id={menuID}
-                    role='menu'
+                    role="menu"
                     ref={ref}
                     style={{...{zIndex, overflowY: 'auto'}, ...maxHeightStyle}}
                 >
@@ -247,7 +226,7 @@ export const Dropdown = ({
                 </React.Fragment>
             );
         } else if (item === 'divider') {
-            return (<li className="dropdown__menu-divider" key={index}></li>);
+            return <li className="dropdown__menu-divider" key={index}></li>;
         } else {
             return (
                 <DropdownItem
@@ -264,54 +243,48 @@ export const Dropdown = ({
 
     return (
         <div className={'dropdown ' + (open ? 'open' : '')}>
-            {
-                typeof children === 'object'
-                    ? (React.isValidElement(children)
-                        ? <div ref={buttonRef} style={{ display: 'content' }}>
-                            {(() => {
-                                const attrs = {
-                                    className: children.props.className
-                                        ? (children.props.className + ' dropdown__toggle dropdown-toggle')
-                                        : 'dropdown__toggle dropdown-toggle',
-                                    'aria-haspopup': "menu",
-                                    'aria-expanded': open,
-                                    onClick: toggleDisplay,
-                                    ref: buttonRef,
-                                };
+            {typeof children === 'object' ? (
+                React.isValidElement(children) ? (
+                    <div ref={buttonRef} style={{display: 'content'}}>
+                        {(() => {
+                            const attrs = {
+                                className: children.props.className
+                                    ? children.props.className + ' dropdown__toggle dropdown-toggle'
+                                    : 'dropdown__toggle dropdown-toggle',
+                                'aria-haspopup': 'menu',
+                                'aria-expanded': open,
+                                onClick: toggleDisplay,
+                                ref: buttonRef,
+                            };
 
-                                return React.cloneElement(children, attrs);
-                            })()}
-                        </div>
-                        : null)
-                    : <button
-                        style={{whiteSpace: 'nowrap'}}
-                        ref={buttonRef}
-                        className=' dropdown__toggle dropdown-toggle'
-                        aria-haspopup="menu"
-                        tabIndex={0}
-                        aria-expanded={open}
-                        onClick={toggleDisplay}
-                    >
-                        {children}
-                        <span className="dropdown__caret"></span>
-                    </button>
-            }
+                            return React.cloneElement(children, attrs);
+                        })()}
+                    </div>
+                ) : null
+            ) : (
+                <button
+                    style={{whiteSpace: 'nowrap'}}
+                    ref={buttonRef}
+                    className=" dropdown__toggle dropdown-toggle"
+                    aria-haspopup="menu"
+                    tabIndex={0}
+                    aria-expanded={open}
+                    onClick={toggleDisplay}
+                >
+                    {children}
+                    <span className="dropdown__caret"></span>
+                </button>
+            )}
         </div>
     );
 };
 
-const DropdownItem = ({
-label,
-icon,
-active,
-onSelect,
-onChange,
-}: IMenuItemRes) => {
+const DropdownItem = ({label, icon, active, onSelect, onChange}: IMenuItemRes) => {
     return (
-        <li role='none' className={active ? 'dropdown__menu-item--active' : ''}>
+        <li role="none" className={active ? 'dropdown__menu-item--active' : ''}>
             <button
                 tabIndex={0}
-                role='menuitem'
+                role="menuitem"
                 onClick={() => {
                     setTimeout(() => {
                         onSelect();
@@ -321,20 +294,14 @@ onChange,
                     }
                 }}
             >
-                <i className={icon ? ('icon-' + icon) : ''}></i>
+                <i className={icon ? 'icon-' + icon : ''}></i>
                 {label}
             </button>
         </li>
     );
 };
 
-const DropdownItemWithSubmenu = ({
-    index,
-    item,
-    menuID,
-    subMenuItems,
-    onChange,
-}: IMenuItem | any) => {
+const DropdownItemWithSubmenu = ({index, item, menuID, subMenuItems, onChange}: IMenuItem | any) => {
     const [open, setOpen] = React.useState<undefined | boolean>(undefined);
 
     const refButtonSubMenu = React.useRef(null);
@@ -362,12 +329,9 @@ 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'
+                    className="dropdown__toggle dropdown-toggle"
                     aria-haspopup="menu"
                     tabIndex={0}
                     onClick={() => {
@@ -385,12 +349,7 @@ const DropdownItemWithSubmenu = ({
                     {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/DropdownFirst.tsx

@@ -30,16 +30,7 @@ interface IPropsMenu {
     children: React.ReactNode;
 }
 
-export const DropdownFirst = ({
-    name,
-    align,
-    side,
-    level,
-    icon,
-    headerFooter,
-    navDropdown,
-    children,
-}: IProps) => {
+export const DropdownFirst = ({name, align, side, level, icon, headerFooter, navDropdown, children}: IProps) => {
     const [open, setOpen] = React.useState(false);
     const [height, setHeight] = React.useState(false);
     const ref = React.useRef(null);
@@ -50,7 +41,7 @@ export const DropdownFirst = ({
         let second = screen.height;
         let heightEl = heightElement(ref.current);
 
-        if ((second - number.bottom) < (heightEl + 100) && (number.top > heightEl)) {
+        if (second - number.bottom < heightEl + 100 && number.top > heightEl) {
             setHeight(true);
         } else {
             setHeight(false);
@@ -58,7 +49,7 @@ export const DropdownFirst = ({
     }
 
     const debounce = (delay: number) => {
-        return function() {
+        return function () {
             const context = children;
             clearTimeout(inDebounce);
             inDebounce = window.setTimeout(() => calculate.apply(context), delay);
@@ -68,12 +59,12 @@ export const DropdownFirst = ({
     React.useLayoutEffect(() => {
         let element = document.getElementsByClassName('dropdown')[0];
         let parentElement = getScrollParent(element);
-        parentElement.parentNode.addEventListener("scroll", debounce(50));
+        parentElement.parentNode.addEventListener('scroll', debounce(50));
 
         calculate();
 
         return () => {
-            parentElement.removeEventListener("scroll", debounce(50));
+            parentElement.removeEventListener('scroll', debounce(50));
             clearTimeout(inDebounce);
         };
     }, [open]);
@@ -124,22 +115,28 @@ export const DropdownFirst = ({
     }
     if (headerFooter) {
         return (
-            <div className={classes} >
+            <div className={classes}>
                 <button
-                    className={navDropdown
-                        ? 'dropdown__toggle navbtn dropdown-toggle'
-                        : 'dropdown__toggle nav-btn dropdown-toggle'
+                    className={
+                        navDropdown
+                            ? 'dropdown__toggle navbtn dropdown-toggle'
+                            : 'dropdown__toggle nav-btn dropdown-toggle'
                     }
                     onClick={isOpen}
                 >
-                    {icon ?
-                        (<i className={"icon-" + icon}></i>) :
-                        (<React.Fragment>{name}<span className="dropdown__caret"></span></React.Fragment>)
-                    }</button>
-                <div className='dropdown__menu dropdown__menu--has-head-foot' ref={ref}>
+                    {icon ? (
+                        <i className={'icon-' + icon}></i>
+                    ) : (
+                        <React.Fragment>
+                            {name}
+                            <span className="dropdown__caret"></span>
+                        </React.Fragment>
+                    )}
+                </button>
+                <div className="dropdown__menu dropdown__menu--has-head-foot" ref={ref}>
                     {children}
                 </div>
-            </div >
+            </div>
         );
     } else {
         if (level) {
@@ -149,62 +146,65 @@ export const DropdownFirst = ({
             return (
                 <li>
                     <div className={classes}>
-                        <button className='dropdown__toggle dropdown-toggle'>
-                            {icon && level ? <i className={icon ? ('icon-' + icon) : ''}></i> : null}
+                        <button className="dropdown__toggle dropdown-toggle">
+                            {icon && level ? <i className={icon ? 'icon-' + icon : ''}></i> : null}
                             {name}
                         </button>
-                        <ul className={classesMenu} ref={ref} role='menu'>
+                        <ul className={classesMenu} ref={ref} role="menu">
                             {children}
                         </ul>
                     </div>
                 </li>
-
             );
         } else {
             return (
-                <div className={classes} >
+                <div className={classes}>
                     <button
-                        className={navDropdown
-                            ? 'dropdown__toggle navbtn dropdown-toggle'
-                            : 'dropdown__toggle nav-btn dropdown-toggle'
+                        className={
+                            navDropdown
+                                ? 'dropdown__toggle navbtn dropdown-toggle'
+                                : 'dropdown__toggle nav-btn dropdown-toggle'
                         }
                         onClick={isOpen}
                     >
-                        {icon ?
-                            (<i className={"icon-" + icon}></i>) :
-                            (<React.Fragment>{name}<span className="dropdown__caret"></span></React.Fragment>)
-                        }</button>
-                    <ul className='dropdown__menu' ref={ref}>
+                        {icon ? (
+                            <i className={'icon-' + icon}></i>
+                        ) : (
+                            <React.Fragment>
+                                {name}
+                                <span className="dropdown__caret"></span>
+                            </React.Fragment>
+                        )}
+                    </button>
+                    <ul className="dropdown__menu" ref={ref}>
                         {children}
                     </ul>
-                </div >
+                </div>
             );
         }
     }
 };
 
-export const DropdownItem = ({
-    text,
-    icon,
-    noLink,
-    onSelect,
-}: IPropsItem) => {
+export const DropdownItem = ({text, icon, noLink, onSelect}: IPropsItem) => {
     if (noLink) {
-        return <li className='dropdown__menu-item--no-link'>{text}</li>;
+        return <li className="dropdown__menu-item--no-link">{text}</li>;
     } else {
         return (
-            <li><button onSelect={onSelect}><i className={icon ? ('icon-' + icon) : ''}></i>{text}</button></li>
+            <li>
+                <button onSelect={onSelect}>
+                    <i className={icon ? 'icon-' + icon : ''}></i>
+                    {text}
+                </button>
+            </li>
         );
     }
 };
 
-export const DropdownDivider = ({ }) => {
-    return (<li className="dropdown__menu-divider"></li>);
+export const DropdownDivider = ({}) => {
+    return <li className="dropdown__menu-divider"></li>;
 };
 
-export const DropdownLabel = ({
-    text,
-}: IPropsLabel) => {
+export const DropdownLabel = ({text}: IPropsLabel) => {
     return (
         <li>
             <div className="dropdown__menu-label">{text}</div>
@@ -212,39 +212,27 @@ export const DropdownLabel = ({
     );
 };
 
-export const DropdownHeader = ({
-    title,
-    children,
-}: IPropsMenu) => {
-
+export const DropdownHeader = ({title, children}: IPropsMenu) => {
     return (
-        <ul className='dropdown__menu-header'>
+        <ul className="dropdown__menu-header">
             <DropdownLabel text={title} />
             {children}
         </ul>
     );
 };
 
-export const DropdownBody = ({
-    title,
-    children,
-}: IPropsMenu) => {
-
+export const DropdownBody = ({title, children}: IPropsMenu) => {
     return (
-        <ul className='dropdown__menu-body'>
+        <ul className="dropdown__menu-body">
             <DropdownLabel text={title} />
             {children}
         </ul>
     );
 };
 
-export const DropdownFooter = ({
-    title,
-    children,
-}: IPropsMenu) => {
-
+export const DropdownFooter = ({title, children}: IPropsMenu) => {
     return (
-        <ul className='dropdown__menu-footer dropdown__menu-footer--has-list'>
+        <ul className="dropdown__menu-footer dropdown__menu-footer--has-list">
             <DropdownLabel text={title} />
             {children}
         </ul>