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

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

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+interface IProps {
+    children: React.ReactNode;
+    className?: string;
+    weight?: 'light' | 'normal' | 'medium' | 'strong';
+    style?: 'normal' | 'italic';
+    align?: 'start' | 'end' | 'center' | 'justify';
+    size?: 'x-small' | 'small' | 'medium' | 'large';
+    color?: 'normal' | 'light' | 'lighter';
+    fontStyle?: 'sans' | 'serif';
+}
+
+export class Text extends React.PureComponent<IProps> {
+    render() {
+        let classes = classNames('sd-text', {
+            'sd-text--italic': this.props.style === 'italic',
+            'sd-text--normal': this.props.weight === undefined,
+            [`sd-text--${this.props.weight}`]: this.props.weight || this.props.weight !== undefined,
+            'sd-text-align--left': this.props.align === undefined,
+            [`sd-text-align--${this.props.align}`]: this.props.align && this.props.align !== 'start',
+            [`sd-font-size--${this.props.size}`]: this.props.size && this.props.size !== 'small',
+            'sd-text--sans': this.props.fontStyle === undefined,
+            [`sd-text--${this.props.fontStyle}`]: this.props.fontStyle && this.props.fontStyle !== 'sans',
+            '': this.props.color === undefined,
+            [`sd-text-color--${this.props.color}`]: this.props.color && this.props.color !== 'normal',
+        }, this.props.className);
+
+        return (
+            <p className={classes}>
+                {this.props.children}
+            </p>
+        );
+    }
+}

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

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+interface IProps {
+    children: React.ReactNode;
+    className?: string;
+    weight?: 'light' | 'normal' | 'medium' | 'strong';
+    style?: 'normal' | 'italic';
+    align?: 'start' | 'end' | 'center' | 'justify';
+    size?: 'x-small' | 'small' | 'medium' | 'large';
+    color?: 'normal' | 'light' | 'lighter';
+    datetime?: string;
+}
+
+export class Time extends React.PureComponent<IProps> {
+    render() {
+        let classes = classNames('sd-time', {
+            'sd-text--italic': this.props.style === 'italic',
+            'sd-text--normal': this.props.weight === undefined,
+            [`sd-text--${this.props.weight}`]: this.props.weight || this.props.weight !== undefined,
+            'sd-text-align--left': this.props.align === undefined,
+            [`sd-text-align--${this.props.align}`]: this.props.align && this.props.align !== 'start',
+            [`sd-font-size--${this.props.size}`]: this.props.size && this.props.size !== 'x-small',
+            '': this.props.color === undefined,
+            [`sd-text-color--${this.props.color}`]: this.props.color && this.props.color !== 'normal',
+        }, this.props.className);
+
+        return (
+            <time dateTime={this.props.datetime} className={classes}>
+                {this.props.children}
+            </time>
+        );
+    }
+}

package/app-typescript/components/ThemeSelector.tsx

@@ -0,0 +1,113 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import nextId from "react-id-generator";
+interface IProps {
+    value?: string;
+    size?: 'small' | 'medium' | 'large'; // defaults to small
+    options: Array<{
+        label: string,
+        value: string,
+        theme: 'light' | 'dark' | 'contrast-light'; // changes the thumb preview based on the selected theme.
+        disabled?: boolean
+        checked?: boolean;
+    }>;
+    required?: boolean;
+    onChange(nextValue: string): void;
+}
+export class ThemeSelector extends React.Component<IProps> {
+    htmlId = nextId();
+
+    constructor(props: IProps) {
+        super(props);
+        this.handleChange = this.handleChange.bind(this);
+    }
+
+    handleChange(item: any) {
+        console.log(item);
+        if (!item.disabled) {
+            this.props.onChange(item.value);
+        }
+    }
+
+    render() {
+        let classes = classNames('sd-theme-selector__list ', {
+            [`sd-theme-selector__list--${this.props.size}`]: this.props.size,
+        });
+        return (
+            <div className={classes}>{
+                this.props.options.map((item: any, index: number) => (
+
+                    <div className='sd-theme-selector__item'
+                        key={index}
+                        tabIndex={-1}>
+                        <figure className="sd-theme-selector__item-thumb" data-theme={item.theme + '-ui'} aria-hidden="true">
+                            <svg viewBox="0 0 156 94" xmlns="http://www.w3.org/2000/svg">
+                                <g fill="none" fillRule="evenodd">
+                                    <path d="m0 0h156v94h-156z" fill="var(--sd-colour-panel-bg--100)" />
+                                    <circle cx="144" cy="33" fill="var(--color-text-lighter)" r="4" />
+                                    <rect fill="var(--sd-colour-interactive)" height="15" rx="2" width="58" x="91" y="71" />
+                                    <g fill="var(--sd-colour-btn-bg-neutral)">
+                                        <rect height="15" rx="2" width="58" x="29" y="52" />
+                                        <rect height="15" rx="2" width="58" x="29" y="71" />
+                                        <rect height="15" rx="2" width="58" x="91" y="52" />
+                                    </g>
+                                    <g fill="#fff">
+                                        <rect height="3" rx="1.5" width="9" x="99" y="77" />
+                                        <rect height="3" rx="1.5" width="11" x="130" y="77" />
+                                        <rect height="3" rx="1.5" width="18" x="110" y="77" />
+                                    </g>
+                                    <g fill="var(--color-text-light)">
+                                        <rect height="3" rx="1.5" width="9" x="37" y="58" />
+                                        <rect height="3" rx="1.5" width="11" x="68" y="58" />
+                                        <rect height="3" rx="1.5" width="18" x="48" y="58" />
+                                        <rect height="3" rx="1.5" width="9" x="37" y="77" />
+                                        <rect height="3" rx="1.5" width="11" x="68" y="77" />
+                                        <rect height="3" rx="1.5" width="18" x="48" y="77" />
+                                        <rect height="3" rx="1.5" width="9" x="99" y="58" />
+                                        <rect height="3" rx="1.5" width="11" x="130" y="58" />
+                                        <rect height="3" rx="1.5" width="18" x="110" y="58" />
+                                    </g>
+                                    <g fill="var(--color-text)">
+                                        <rect height="4" rx="2" width="11" x="29" y="31" />
+                                        <rect height="4" rx="2" width="14" x="70" y="31" />
+                                        <rect height="4" rx="2" width="23" x="43" y="31" />
+                                    </g>
+                                    <path d="m0 22h22v72h-22z" fill="var(--sd-colour-sidebar-menu--00)" />
+                                    <circle cx="11" cy="52" fill="var(--sd-colour-interactive)" r="6" />
+                                    <g fill="var(--color-icon-default)" opacity=".75">
+                                        <circle cx="11" cy="34" r="6" />
+                                        <circle cx="11" cy="70" r="6" />
+                                    </g>
+                                    <path d="m0 0h156v22h-156z" fill="var(--sd-colour-top-menu)" />
+                                    <path d="m0 22h156v1h-156z" fill="var(--sd-colour--shadow-line)" />
+                                    <g fill="hsla(214, 13%, 65%, 1)" opacity="1">
+                                        <rect height="4" rx="2" width="11" x="31" y="9" />
+                                        <rect height="4" rx="2" width="23" x="45" y="9" />
+                                    </g>
+                                    <path d="m22 44h134v1h-134z" fill="var(--sd-colour-line--medium)" />
+                                    <path d="m0 0h22v22h-22z" fill="var(--sd-colour-top-menu__btn)" />
+                                    <path d="m15 13v1h-8v-1zm0-3v1h-8v-1zm0-3v1h-8v-1z" fill="#fff" />
+                                </g>
+                            </svg>
+                        </figure>
+                        <div className="sd-theme-selector__item-action">
+                            <input type="radio" className="sd-theme-selector__input"
+                                id={this.htmlId + index}
+                                tabIndex={0}
+                                name={this.htmlId}
+                                onChange={() => this.handleChange(item)}
+                                disabled={item.disabled}
+                            />
+                            <span className="sd-radio-new"></span>
+
+                            <label className="sd-theme-selector__label" htmlFor={this.htmlId + index}>
+                                {item.label}
+                            </label>
+                            <span className="sd-theme-selector__label-text" aria-hidden="true">{item.label}</span>
+                        </div>
+                    </div>
+                ))
+            }</div>
+        );
+    }
+}

package/app-typescript/components/Togglebox.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import classNames from 'classnames';
 import nextId from "react-id-generator";
 
@@ -9,6 +9,7 @@ interface IProps {
     hideUsingCSS?: boolean;
     initiallyOpen?: boolean; // defaults to false
     className?: string;
+    margin?: 'none' | 'small' | 'normal' | 'large';
     onOpen?(): void;
     onClose?(): void;
 }
@@ -53,16 +54,17 @@ export class ToggleBox extends React.PureComponent<IProps, IState> {
     }
 
     render() {
-        const { title, hideUsingCSS, className, children, badge } = this.props;
+        let classes = classNames('toggle-box', {
+            'toggle-box--margin-normal': this.props.margin === undefined,
+            [`toggle-box--margin-${this.props.margin}`]: this.props.margin,
+            'hidden': !this.state.isOpen,
+        }, this.props.className);
+        const { title, hideUsingCSS, children, badge } = this.props;
         const { isOpen } = this.state;
 
         return (
             <div
-                className={classNames(
-                    'toggle-box',
-                    className,
-                    { hidden: !isOpen },
-                )}
+                className={classes}
             >
                 <a
                     className="toggle-box__header"

package/app-typescript/components/Tooltip.tsx

@@ -5,13 +5,15 @@ interface IProps {
     text: string;
     flow?: 'top' | 'left' | 'right' | 'down'; // defaults to 'top'
     appendToBody?: boolean;
+    disabled?: boolean;
 }
 
-export const Tooltip: React.FC<IProps>  = ({appendToBody, children, ...otherProps}) =>
-    appendToBody ?
-    <TooltipAppended {...otherProps}>{children}</TooltipAppended>
-    :
-    <TooltipBasic {...otherProps}>{children}</TooltipBasic>;
+export const Tooltip: React.FC<IProps>  = ({appendToBody, children, disabled, ...otherProps}) =>
+    disabled
+    ? <React.Fragment>{children}</React.Fragment>
+    : appendToBody
+        ? <TooltipAppended {...otherProps}>{children}</TooltipAppended>
+        : <TooltipBasic {...otherProps}>{children}</TooltipBasic>;
 
 class TooltipBasic extends React.PureComponent<IProps> {
     htmlId = nextId();

package/app-typescript/components/TreeSelect.tsx

@@ -0,0 +1,330 @@
+import { any } from "prop-types";
+import * as React from "react";
+import { Icon } from "./Icon";
+
+interface IState<T> {
+    value?: Array<T>;
+    options?: Array<T>;
+    firstBranchOptions?: Array<T>;          // to return on first branch in dropdown
+    getLabel?: string;                      // label from props
+    getMultilevelArray?: string;            // array from props
+    openDropdown?: boolean;                 // open/close dropdown
+    activeTree?: Array<any>;                // for filtered array
+    filterArr?: Array<T>;                   // for filtered array
+    searchFieldValue?: string;              // filter value of input
+    buttonTree?: Array<any>;                // array of button (for backButton)
+    buttonValue?: Array<any>;               // button for name of category
+    buttonMouseEvent?: boolean;             // valueButton hover
+    selectBranchWithChildren?: boolean;
+}
+
+interface IProps<T> {
+    value?: Array<T>;
+    options: Array<T>;
+    getLabel: string;
+    getMultilevelArray: string;
+    selectBranchWithChildren?: boolean;
+    readonly?: boolean;
+    width?: string;
+    optionTemplate?(item: T): React.ComponentType<T> | JSX.Element;
+    valueTemplate?(item: T): React.ComponentType<T> | JSX.Element;
+    onChange(): void;
+}
+
+export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
+    private dropdownRef: any;
+    private openDropdownRef: any;
+
+    constructor(props: IProps<T>) {
+        super(props);
+        this.state = {
+            value: this.props.value ? this.props.value : [],
+            options: this.props.options ? this.props.options : [],
+            firstBranchOptions: this.props.options ? this.props.options : [],
+            activeTree: [],
+            filterArr: [],
+            searchFieldValue: '',
+            buttonTree: [],
+            buttonValue: [],
+            buttonMouseEvent: false,
+            openDropdown: false,
+        };
+
+        this.removeClick = this.removeClick.bind(this);
+        this.handleMultiLevel = this.handleMultiLevel.bind(this);
+        this.backButton = this.backButton.bind(this);
+        this.handleButton = this.handleButton.bind(this);
+        this.backButtonValue = this.backButtonValue.bind(this);
+        this.dropdownRef = React.createRef();
+        this.openDropdownRef = React.createRef();
+    }
+
+    removeClick(i: number) {
+        let newTags = this.state.value;
+        newTags.splice(i, 1);
+
+        this.setState({
+            value: newTags,
+        });
+        this.props.onChange();
+    }
+
+    handleMultiLevel(event, item) {
+        if (item[this.props.getMultilevelArray]) {
+            this.setState({
+                activeTree: [...this.state.activeTree, this.state.options],
+                options: item[this.props.getMultilevelArray],
+            });
+        }
+    }
+
+    handleButton(event, item) {
+        this.setState({
+            buttonTree: [...this.state.buttonTree, this.state.buttonValue],
+            buttonValue: item,
+        });
+    }
+
+    handleValue(event, item) {
+            let checkItem = this.state.value.find((valueItem: any) => {
+                return valueItem === item;
+            });
+
+            if (!checkItem) {
+                this.setState({value: [...this.state.value, item]});
+            }
+
+            if (!event.ctrlKey) {
+                this.setState({options: this.state.firstBranchOptions, activeTree: [], openDropdown: false});
+            }
+            this.setState({buttonMouseEvent: false});
+    }
+
+    handleBranchValue(event, item) {
+        if (this.props.selectBranchWithChildren) {
+
+            let checkItem = this.state.value.find((valueItem: any) => {
+                return valueItem === item;
+            });
+
+            if (!checkItem) {
+                this.setState({value: [...this.state.value, item]});
+            }
+
+            if (!event.ctrlKey) {
+                this.setState({options: this.state.firstBranchOptions, activeTree: [], openDropdown: false});
+            }
+            this.setState({buttonMouseEvent: false});
+        }
+    }
+
+    backButton = () => {
+        if (this.state.activeTree.length > 0) {
+            this.setState({
+                options: this.state.activeTree.pop(),
+            });
+        } else {
+            return false;
+        }
+    }
+
+    backButtonValue = () => {
+        this.setState({
+            buttonValue: this.state.buttonTree.pop(),
+        });
+    }
+
+    recursion(arr) {
+        if (this.props.selectBranchWithChildren) {
+            arr.map((item: any) => {
+                this.state.filterArr.push(item);
+                if (item[this.props.getMultilevelArray]) {
+                    this.recursion(item[this.props.getMultilevelArray]);
+                }
+            });
+        } else {
+            arr.map((item: any) => {
+                if (!item[this.props.getMultilevelArray]) {
+                    this.state.filterArr.push(item);
+                } else {
+                    this.recursion(item[this.props.getMultilevelArray]);
+                }
+            });
+        }
+    }
+
+    componentDidMount = () => {
+        this.recursion(this.state.options);
+        document.addEventListener("mousedown", (event) => {
+            if ((this.dropdownRef.current && !this.dropdownRef.current.contains(event.target))
+            && (this.openDropdownRef.current && !this.openDropdownRef.current.contains(event.target))) {
+                this.setState({openDropdown: false});
+            }
+        });
+    }
+
+    componentDidUpdate(prevProps: Readonly<IProps<T>>, prevState: Readonly<IState<T>>): void {
+        if (prevState.value !== this.state.value) {
+            this.props.onChange();
+        } else if (prevProps.value !== this.props.value) {
+            this.props.onChange();
+        }
+    }
+
+    render() {
+
+        return (
+            <div className="tags-input tags-input--multiselect">
+                <div className="tags-input__tags">
+                    {this.props.readonly
+                    || <button ref={this.openDropdownRef}
+                    className="tags-input__add-button"
+                    onClick={() => this.setState({openDropdown: !this.state.openDropdown})}>
+                        <i className="icon-plus-large"></i>
+                    </button>}
+                        <ul className="tags-input__tag-list">
+                            {this.state.value.map((item, i) => {
+                                return <React.Fragment key={i}>
+                                    <li
+                                    className={"tags-input__tag-item tags-input__tag-item-multiselect"
+                                    + (this.props.readonly ? ' tags-input__tag-item-readonly' : '')}
+                                    onClick={(event) => this.props.readonly || this.removeClick(i)}>
+                                        <span className="tags-input__helper-box">
+                                            {this.props.valueTemplate
+                                            ? this.props.valueTemplate(item)
+                                            : <span>{item[this.props.getLabel]}</span>}
+                                            {this.props.readonly
+                                            || <span className="tags-input__remove-button">
+                                                <i className="icon-close-small"></i>
+                                            </span>}
+                                        </span>
+                                    </li>
+                                </React.Fragment>;
+                            })}
+                        </ul>
+                </div>
+
+                {this.state.openDropdown &&
+                <div className={"autocomplete autocomplete-multiselect" + (this.props.width === 'medium' ? ' autocomplete-multiselect-width' : '')} ref={this.dropdownRef}>
+                    <div className='autocomplete__header'>
+                        <div className="autocomplete__icon" onClick={() => {
+                        this.backButtonValue();
+                        this.backButton();
+                        }}>
+                            {this.state.activeTree.length > 0
+                            ? <Icon name="arrow-left" className="arrow-left"></Icon>
+                            : <Icon name="search" className="search"></Icon>}
+                        </div>
+                        <div className='autocomplete__filter'>
+                            {this.state.activeTree.length > 0
+                                ? <button
+                                className={'autocomplete__button' + (this.props.selectBranchWithChildren ? ' autocomplete__button--multiselect' : '')}
+                                onMouseOver={() => this.setState({buttonMouseEvent: true})}
+                                onMouseOut={() => this.setState({buttonMouseEvent: false})}
+                                value={this.state.buttonValue}
+                                onClick={(event) => this.handleBranchValue(event, this.state.buttonValue)}>
+                                    {this.state.buttonMouseEvent && this.props.selectBranchWithChildren ? 'Choose entire category' : this.state.buttonValue[this.props.getLabel]}
+                                </button>
+                                : <input
+                                type="text"
+                                className="autocomplete__input"
+                                ref={(input: any) => input && input.focus()}
+                                value={this.state.searchFieldValue}
+                                onChange={(event) => {
+                                    this.setState({searchFieldValue: event.target.value});
+                                }}
+                                />
+                            }
+                        </div>
+                    </div>
+                    <ul className="suggestion-list suggestion-list--multi-select">
+                        {this.state.searchFieldValue === ''
+                            ? this.state.options.map((option, i) => {
+                                return (
+                                    <li key={i}
+                                    className={`suggestion-item suggestion-item--multi-select`}
+                                    onClick={(event) => {
+                                        event.preventDefault();
+                                        event.stopPropagation();
+                                        if (option[this.props.getMultilevelArray]) {
+                                            this.handleButton(event, option);
+                                            this.handleMultiLevel(event, option);
+                                            if (event.altKey) {
+                                                if (this.props.selectBranchWithChildren) {
+                                                    let filteredItems = option[this.props.getMultilevelArray]
+                                                    .filter((item) => {
+                                                        if (!this.state.value.includes(item)) {
+                                                            return item;
+                                                        }
+                                                    });
+                                                    this.setState({
+                                                        value: [...this.state.value, ...filteredItems],
+                                                        options: this.state.firstBranchOptions,
+                                                        openDropdown: false,
+                                                        activeTree: [],
+                                                    });
+                                                } else {
+                                                    let filteredItems = option[this.props.getMultilevelArray]
+                                                    .filter((item) => {
+                                                        if (!this.state.value.includes(item)
+                                                        && !item[this.props.getMultilevelArray]) {
+                                                            return item;
+                                                        }
+                                                    });
+                                                    if (filteredItems.length > 0) {
+                                                        this.setState({
+                                                            value: [...this.state.value, ...filteredItems],
+                                                            options: this.state.firstBranchOptions,
+                                                            openDropdown: false,
+                                                            activeTree: [],
+                                                        });
+                                                    }
+                                                }
+                                            }
+                                        } else {
+                                            this.handleValue(event, option);
+                                            if (!event.ctrlKey) {
+                                                this.setState({openDropdown: false});
+                                            }
+                                        }
+                                    }}>
+                                        {this.props.optionTemplate
+                                        ? this.props.optionTemplate(option)
+                                        : <span className={this.state.value.includes(option) ? 'suggestion-item--disabled' : null}>
+                                            {option[this.props.getLabel]}
+                                        </span>}
+                                        {option[this.props.getMultilevelArray] && <span className="suggestion-item__icon">
+                                            <Icon name="chevron-right-thin"></Icon>
+                                        </span>}
+                                    </li>
+                                );
+                            })
+                            : this.state.filterArr.filter((item: any) => {
+                                if (this.state.searchFieldValue) {
+                                    if (item[this.props.getLabel]
+                                    .toLowerCase().includes(this.state.searchFieldValue.toLowerCase())) {
+                                        return item;
+                                    }
+                                } else {
+                                    return item;
+                                }
+                            }).map((item, i) => {
+                                return <li key={i}
+                                className={`suggestion-item suggestion-item--multi-select`}
+                                onClick={(event) => {
+                                    this.handleValue(event, item);
+                                }}>
+                                    <span
+                                    className={this.state.value.includes(item)
+                                    ? 'suggestion-item--disabled' : null}>
+                                        {item[this.props.getLabel]}
+                                    </span>
+                                </li>;
+                            })
+                        }
+                    </ul>
+                </div>}
+            </div>
+        );
+    }
+}

package/app-typescript/components/WithSizeObserver.tsx

@@ -0,0 +1,88 @@
+import * as React from 'react';
+
+interface ISize {
+    width: number;
+    height: number;
+}
+
+interface IProps {
+    children: (props: ISize) => JSX.Element;
+    style?: React.CSSProperties;
+}
+
+interface IState {
+    dimensions: ISize | 'not-initialized';
+}
+
+/**
+ * Higher order component for dynamically retrieving dimensions of any element.
+ * It uses `ResizeObserver` to listen for updates and re-render children efficiently.
+ */
+export class WithSizeObserver extends React.PureComponent<IProps, IState> {
+    private el: HTMLDivElement | null;
+    private observerInstance?: ResizeObserver;
+
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            dimensions: 'not-initialized',
+        };
+
+        this.el = null;
+    }
+
+    componentDidMount() {
+        this.observerInstance = new ResizeObserver((entries) => {
+            this.setState({
+                dimensions: {
+                    width: Math.floor(entries[0].contentRect.width),
+                    height: Math.floor(entries[0].contentRect.height),
+                },
+            });
+        });
+
+        if (this.el != null) {
+            this.observerInstance.observe(this.el);
+        }
+    }
+
+    componentWillUnmount() {
+        if (this.observerInstance != null && this.el != null) {
+            this.observerInstance.unobserve(this.el);
+        }
+    }
+
+    render() {
+        const {dimensions} = this.state;
+
+        return (
+            <div
+                ref={(el) => {
+                    this.el = el;
+                }}
+                style={{
+                    position: 'relative',
+                    width: '100%',
+                    height: '100%',
+                    ...this.props.style,
+                }}
+            >
+                {/**
+                 * Absolute positioning is needed for accurate calculation.
+                 * Otherwise, initial calculation would work well,
+                 * but if parent of `ResizeObserverComponent` is resized down,
+                 * it would include its own size(which is based on the initial result from this component),
+                 * including children, into calculation and would produce a wrong result.
+                */}
+                <div style={{position: 'absolute', top: 0, left: 0, width: '100%', height: '100%'}}>
+                    {
+                        dimensions === 'not-initialized'
+                            ? null
+                            : this.props.children(dimensions)
+                    }
+                </div>
+            </div>
+        );
+    }
+}