superdesk-ui-framework 3.0.1-beta.17 → 3.0.1-beta.19

package/.vscode/settings.json

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

package/app/styles/_content-divider.scss

@@ -4,6 +4,9 @@
     padding: 0;
     color: $sd-text;
     list-style: none;
+    border-bottom: 0;
+    border-left: 0;
+    border-right: 0;
     border-top: 1px var(--sd-colour-line--medium);
     border-style: solid;
 
@@ -15,6 +18,9 @@
         white-space: nowrap;
         text-align: center;
         border-top: 0;
+        border-bottom: 0;
+        border-left: 0;
+        border-right: 0;
         border-top-color: var(--sd-colour-line--medium);
         border-style: solid;
     }
@@ -24,7 +30,23 @@
         clear: both;
         width: 100%;
         min-width: 100%;
-        margin: $sd-base-increment * 3 0;
+        &.sd-content-divider--margin-x-small {
+            margin: $sd-base-increment * 1 0;
+        }
+        &.sd-content-divider--margin-small {
+            margin: $sd-base-increment * 2 0;
+        }
+        &.sd-content-divider--margin-medium {
+            margin: $sd-base-increment * 3 0;
+        }
+        &.sd-content-divider--margin-large {
+            margin: $sd-base-increment * 4 0;
+        }
+        &.sd-content-divider--margin-none {
+            margin: 0 0;
+        }
+
+        
     }
     &.sd-content-divider--horizontal.sd-content-divider--with-text {
         margin: 1.6rem 0;
@@ -37,6 +59,8 @@
             border-top-color: transparent;
             border-top-color: inherit;
             border-bottom: 0;
+            border-left: 0;
+            border-right: 0;
             transform: translateY(50%);
             border-style: inherit;
         }
@@ -56,13 +80,27 @@
                 width: 5%;
             }
         }
+        &.sd-content-divider--margin-x-small {
+            margin: $sd-base-increment * 1 0;
+        }
+        &.sd-content-divider--margin-small {
+            margin: $sd-base-increment * 2 0;
+        }
+        &.sd-content-divider--margin-medium {
+            margin: $sd-base-increment * 3 0;
+        }
+        &.sd-content-divider--margin-large {
+            margin: $sd-base-increment * 4 0;
+        }
+        &.sd-content-divider--margin-none {
+            margin: $sd-base-increment / 2 0;
+        }
     }
 
-
     &.sd-content-divider--vertical {
         position: relative;
         display: inline-block;
-        margin: $sd-base-increment * 0.5 $sd-base-increment * 1.5;
+        //margin: $sd-base-increment * 0.5 $sd-base-increment * 1.5;
         vertical-align: middle;
         border-top: 0;
         border-left: 1px var(--sd-colour-line--medium);
@@ -86,7 +124,9 @@
                 position: relative;
                 height: 50%;
                 border-left: 1px var(--sd-colour-line--medium);
+                border-right: 0;
                 border-bottom: 0;
+                border-top: 0;
                 width: 1px;
                 border-style: solid;
             }
@@ -103,6 +143,21 @@
                 }
             }
         }
+        &.sd-content-divider--margin-x-small {
+            margin: 0 $sd-base-increment * 1;
+        }
+        &.sd-content-divider--margin-small {
+            margin: 0 $sd-base-increment * 2;
+        }
+        &.sd-content-divider--margin-medium {
+            margin: 0 $sd-base-increment * 3;
+        }
+        &.sd-content-divider--margin-large {
+            margin: 0 $sd-base-increment * 4;
+        }
+        &.sd-content-divider--margin-none {
+            margin: 0 0;
+        }
     }
     &.sd-content-divider--dashed {
         border-style: dashed;

package/app-typescript/components/ContentDivider.tsx

@@ -6,6 +6,7 @@ interface IProps {
     orientation?: 'horizontal' |'vertical'; // defaults to 'horizontal'
     align?: 'center' | 'left' | 'right'; // defaults to 'center'
     border?: boolean;
+    margin?: 'x-small' | 'small' |'medium' | 'large' | 'none';
     children?: React.ReactNode;
 }
 
@@ -19,6 +20,8 @@ export class ContentDivider extends React.PureComponent<IProps> {
             [`sd-content-divider--text-${this.props.align}`]: this.props.align || this.props.align !== undefined,
             [`sd-content-divider--${this.props.orientation}`]:
             this.props.orientation || this.props.orientation !== undefined,
+            'sd-content-divider--margin-medium': this.props.margin === undefined,
+            [`sd-content-divider--margin-${this.props.margin}`]: this.props.margin || this.props.margin !== undefined,
         });
 
         if (this.props.children) {

package/app-typescript/components/Dropdown.tsx

@@ -322,7 +322,9 @@ onChange,
             <button tabIndex={0}
             role='menuitem'
             onClick={() => {
-                onSelect();
+                setTimeout(() => {
+                    onSelect();
+                });
                 if (onChange) {
                     onChange();
                 }
@@ -376,7 +378,9 @@ const DropdownItemWithSubmenu = ({
                 tabIndex={0}
                 onClick={() => {
                     if (item.onSelect) {
-                        item.onSelect();
+                        setTimeout(() => {
+                            item.onSelect();
+                        });
                     }
                     if (onChange) {
                         onChange();

package/app-typescript/components/DurationInput.tsx

@@ -129,14 +129,18 @@ export class DurationInput extends React.PureComponent<IProps, IState> {
             }
         }
 
-        if ((this.props.hours !== prevProps.hours)
-        || (this.props.minutes !== prevProps.minutes)
-        || (this.props.seconds !== prevProps.seconds)) {
-            this.setState({
-                hours: this.stateUpdate('hours', this.props.hours, this.props.minutes, this.props.seconds),
-                minutes: this.stateUpdate('minutes', this.props.minutes, this.props.seconds),
-                seconds: this.stateUpdate('seconds', this.props.seconds),
-            });
+        if (this.hourRef.current.value.length === 2
+            && this.minuteRef.current.value.length === 2
+            && this.secondRef.current.value.length === 2) {
+                if ((this.props.hours !== prevProps.hours)
+                || (this.props.minutes !== prevProps.minutes)
+                || (this.props.seconds !== prevProps.seconds)) {
+                    this.setState({
+                        hours: this.stateUpdate('hours', this.props.hours, this.props.minutes, this.props.seconds),
+                        minutes: this.stateUpdate('minutes', this.props.minutes, this.props.seconds),
+                        seconds: this.stateUpdate('seconds', this.props.seconds),
+                    });
+                }
         }
     }
 
@@ -241,11 +245,13 @@ export class DurationInput extends React.PureComponent<IProps, IState> {
 
     handleChange(event: React.ChangeEvent<HTMLInputElement>, state: 'hours' | 'minutes' | 'seconds') {
         let stateClone: IState = {};
-        if (event.target.value.length >= 2) {
-            if (event.target.selectionStart === 1 && event.target.selectionEnd === 1) {
-                stateClone[state] = event.target.value.slice(0, 1) + event.target.value.slice(2, 3);
+        if (event.target.value.length > 2) {
+            if (event.target.selectionStart === 1) {
+                stateClone[state] = event.target.value.slice(0, 1);
+            } else if (event.target.selectionStart === 2) {
+                stateClone[state] = event.target.value.slice(1, 2);
             } else {
-                stateClone[state] = event.target.value.slice(0, 2);
+                stateClone[state] = event.target.value.slice(2, 3);
             }
         } else {
             stateClone[state] = event.target.value;
@@ -299,6 +305,7 @@ export class DurationInput extends React.PureComponent<IProps, IState> {
                     className={`duration-input ${this.state.blink === 'hour' ? 'blink_me' : ''}`}
                     type='text'
                     id='hours'
+                    autoComplete="off"
                     max={99}
                     min={0}
                     ref={this.hourRef}
@@ -319,6 +326,7 @@ export class DurationInput extends React.PureComponent<IProps, IState> {
                     className={`duration-input ${this.state.blink === 'minute' ? 'blink_me' : ''}`}
                     type='text'
                     id='minutes'
+                    autoComplete="off"
                     ref={this.minuteRef}
                     value={this.state.minutes}
                     disabled={this.props.disabled}
@@ -337,6 +345,7 @@ export class DurationInput extends React.PureComponent<IProps, IState> {
                     className='duration-input'
                     type='text'
                     id='seconds'
+                    autoComplete="off"
                     ref={this.secondRef}
                     value={this.state.seconds}
                     disabled={this.props.disabled}
@@ -356,7 +365,7 @@ export class DurationInput extends React.PureComponent<IProps, IState> {
     }
 }
 
-export function getDurationString(seconds: number, zero?: boolean) {
+export function getDurationString(seconds: number,  minSections: 1 | 2 | 3) {
     function zeroPad(value: number | string) {
         if (value.toString().length === 1 || value === 0) {
             return `0${value}`;
@@ -371,13 +380,19 @@ export function getDurationString(seconds: number, zero?: boolean) {
     let minute = zeroPad(Math.floor((seconds % 3600) / 60));
     let second = zeroPad(Math.floor(seconds % 60));
 
-    if (zero) {
+    if (minSections === 3) {
         return `${hour}h ${minute}m ${second}s`;
-    } else {
-        if (Number(hour) === 0 && Number(minute) > 0) {
+    } else if (minSections === 2) {
+        if (Number(hour) > 0) {
+            return `${hour}h ${minute}m ${second}s`;
+        } else {
             return `${minute}m ${second}s`;
-        } else if (Number(hour) === 0 && Number(minute) === 0) {
+        }
+    } else {
+        if (Number(hour) === 0 && Number(minute) === 0) {
             return `${second}s`;
+        } else if (Number(hour) === 0 && Number(minute) > 0) {
+            return `${minute}m ${second}s`;
         } else {
             return `${hour}h ${minute}m ${second}s`;
         }

package/app-typescript/components/Spacer.tsx

@@ -0,0 +1,87 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+export interface IPropsSpacer {
+    h?: boolean; // horizontal
+    v?: boolean; // vertical
+    gap: '4' | '8' | '16' | '32' | '64';
+    justifyContent?: 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly' | 'stretch';
+    alignItems?: 'start' | 'end' | 'center' | 'stretch';
+    noGrow?: boolean;
+
+    /**
+     * Will not wrap children in div elements.
+     * `noGrow` prop would then not be relevant.
+     */
+    noWrap?: boolean;
+
+    style?: React.CSSProperties;
+
+    children: Array<React.ReactNode>;
+}
+
+export class Spacer extends React.PureComponent<IPropsSpacer> {
+    constructor(props: IPropsSpacer) {
+        super(props);
+        this.state = {
+            items: [],
+        };
+
+    }
+    render() {
+        const {h, v, gap, justifyContent, alignItems, noGrow, noWrap} = this.props;
+
+        const justifyContentDefault: IPropsSpacer['justifyContent'] = h ? 'space-between' : 'start';
+        const alignItemsDefault: IPropsSpacer['alignItems'] = h ? 'center' : 'start';
+
+        return (
+            <div
+                style={{
+                    display: 'flex',
+                    flexDirection: v ? 'column' : 'row',
+                    gap: `${gap}px`,
+                    justifyContent: justifyContent ?? justifyContentDefault,
+                    alignItems: alignItems ?? alignItemsDefault,
+                    width: noGrow === true ? undefined : '100%',
+                    ...(this.props.style ?? {}),
+                }}
+            >
+                {this.props.children.map((el, i) => noWrap ? el : (
+                    <div
+                        key={i}
+                        style={{
+                            width: noGrow === true ? undefined : '100%',
+                        }}
+                    >
+                        {el}
+                    </div>
+                ))}
+            </div>
+        );
+    }
+}
+
+/**
+ * Renders a standalone spacing block - similar to <br />
+ */
+export interface ISpacerBlock {
+    h?: boolean; // horizontal
+    v?: boolean; // vertical
+    gap: '4' | '8' | '16' | '32' | '64';
+}
+
+export class SpacerBlock extends React.PureComponent<ISpacerBlock> {
+    render() {
+        const {gap, h, v} = this.props;
+
+        return (
+            <span
+                style={{
+                    display: h === true ? 'inline-block' : 'block',
+                    width: h === true ? `${gap}px` : undefined,
+                    height: v === true ? `${gap}px` : undefined,
+                }}
+            />
+        );
+    }
+}

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 {};

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

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

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+interface IProps {
+    orientation?: 'horizontal' | 'vertical';
+    children: React.ReactNode;
+}
+export declare class CheckGroup extends React.PureComponent<IProps> {
+    render(): JSX.Element;
+}
+export {};

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

@@ -0,0 +1,19 @@
+import * as React from 'react';
+interface IProps {
+    label: {
+        text: string;
+        side?: 'left' | 'right';
+        hidden?: boolean;
+    };
+    checked?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    onChange(nextValue: boolean): void;
+}
+export declare class Checkbox extends React.Component<IProps> {
+    htmlId: string;
+    constructor(props: IProps);
+    handleChange(event: React.ChangeEvent<HTMLInputElement>): void;
+    render(): JSX.Element;
+}
+export {};

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

@@ -0,0 +1,19 @@
+import * as React from 'react';
+interface IProps {
+    label: {
+        text: string;
+        icon?: string;
+        hidden?: boolean;
+    };
+    checked?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    onChange(nextValue: boolean): void;
+}
+export declare class CheckboxButton extends React.Component<IProps> {
+    htmlId: string;
+    constructor(props: IProps);
+    handleChange(event: React.ChangeEvent<HTMLInputElement>): void;
+    render(): JSX.Element;
+}
+export {};

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

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { LocaleSettings, CalendarProps } from '@superdesk/primereact/calendar';
+export declare type DatePickerLocaleSettings = Omit<LocaleSettings, 'today' | 'clear'>;
+interface IDatePickerBase {
+    disabled?: boolean;
+    dateFormat: string;
+    shortcuts?: Array<{
+        days: number;
+        label: string;
+    }>;
+    locale?: DatePickerLocaleSettings;
+}
+interface IDatePicker extends IDatePickerBase {
+    value: Date | null;
+    onChange(valueNext: Date | null): void;
+}
+interface IState {
+    value: CalendarProps['value'];
+    valid: boolean;
+}
+export declare class DatePicker extends React.PureComponent<IDatePicker, IState> {
+    private instance;
+    hidePopupOnScroll: () => void;
+    constructor(props: IDatePicker);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    componentDidUpdate(prevProps: IDatePicker): void;
+    render(): JSX.Element;
+}
+interface IDatePickerISO extends IDatePickerBase {
+    value: string;
+    onChange(value: string): void;
+}
+export declare class DatePickerISO extends React.PureComponent<IDatePickerISO> {
+    render(): JSX.Element;
+}
+export {};

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+interface IProps {
+    size?: 'mini' | 'small' | 'medium' | 'large';
+    border?: boolean;
+}
+export declare class Divider extends React.PureComponent<IProps> {
+    render(): JSX.Element;
+}
+export {};

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ChartData, ChartOptions } from 'chart.js';
+interface IProps {
+    data: ChartData;
+    options: ChartOptions;
+    width: string;
+    height: string;
+}
+export declare class DonutChart extends React.Component<IProps, {}> {
+    render(): JSX.Element;
+}
+export {};

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

@@ -0,0 +1,28 @@
+import * as React from 'react';
+export interface IMenuItem {
+    label: string;
+    icon?: string;
+    onSelect(): void;
+}
+export interface ISubmenu {
+    type: 'submenu';
+    label: string;
+    icon?: string;
+    items: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
+}
+export interface IMenuGroup {
+    type: 'group';
+    label?: string;
+    items: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
+}
+interface IMenu {
+    label?: string;
+    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;
+}
+export declare const Dropdown: ({ items, header, footer, children, append, align, }: IMenu) => JSX.Element;
+export {};