superdesk-ui-framework 3.0.1-beta.2 → 3.0.1-beta.20

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>
+        );
+    }
+}

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

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

@@ -0,0 +1,42 @@
+import * as React from 'react';
+interface IProps {
+    name: string;
+    align?: 'left' | 'right';
+    side?: 'left' | 'right';
+    icon?: string;
+    navDropdown?: boolean;
+    level?: boolean;
+    headerFooter?: boolean;
+    children: React.ReactNode;
+}
+interface IPropsItem {
+    text: string;
+    noLink?: boolean;
+    icon?: string;
+    onSelect(): void;
+    children?: never;
+}
+interface IPropsLabel {
+    text: string;
+    children?: never;
+}
+interface IPropsMenu {
+    title: string;
+    children: React.ReactNode;
+}
+export declare const DropdownFirst: {
+    ({ name, align, side, level, icon, headerFooter, navDropdown, children, }: IProps): JSX.Element;
+    Item: ({ text, icon, noLink, onSelect, }: IPropsItem) => JSX.Element;
+    Divider: ({}: {}) => JSX.Element;
+    Label: ({ text, }: IPropsLabel) => JSX.Element;
+    Header: ({ title, children, }: IPropsMenu) => JSX.Element;
+    Body: ({ title, children, }: IPropsMenu) => JSX.Element;
+    Footer: ({ title, children, }: IPropsMenu) => JSX.Element;
+};
+export declare const DropdownItem: ({ text, icon, noLink, onSelect, }: IPropsItem) => JSX.Element;
+export declare const DropdownDivider: ({}: {}) => JSX.Element;
+export declare const DropdownLabel: ({ text, }: IPropsLabel) => JSX.Element;
+export declare const DropdownHeader: ({ title, children, }: IPropsMenu) => JSX.Element;
+export declare const DropdownBody: ({ title, children, }: IPropsMenu) => JSX.Element;
+export declare const DropdownFooter: ({ title, children, }: IPropsMenu) => JSX.Element;
+export {};

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+interface IProps {
+    illustration?: string;
+    size?: 'small' | 'large';
+    title: string;
+    description?: string;
+}
+export declare class EmptyState extends React.PureComponent<IProps> {
+    render(): JSX.Element;
+}
+export {};

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+interface IProps {
+    text: string;
+    style?: 'normal' | 'light';
+}
+export declare class FormLabel extends React.PureComponent<IProps> {
+    render(): JSX.Element;
+}
+export {};

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+interface IProps<T> {
+    val: T;
+}
+export declare class Genie<T extends string> extends React.PureComponent<IProps<T>> {
+    render(): JSX.Element;
+}
+export {};
+
+
+interface Id {
+    prop<T>: Genie<T>;
+}

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

@@ -0,0 +1,69 @@
+import * as React from 'react';
+declare class GridItemMedia extends React.PureComponent {
+    render(): JSX.Element;
+}
+declare class GridItemContent extends React.PureComponent {
+    render(): JSX.Element;
+}
+declare class GridItemContentBlock extends React.PureComponent {
+    render(): JSX.Element;
+}
+declare class GridItemFooter extends React.PureComponent {
+    render(): JSX.Element;
+}
+interface IPropsFooterBlock {
+    align?: 'left' | 'right';
+}
+declare class GridItemFooterBlock extends React.PureComponent<IPropsFooterBlock> {
+    static defaultProps: {
+        align: string;
+    };
+    render(): JSX.Element;
+}
+interface IPropsFooterActions {
+    autohide?: boolean;
+}
+declare class GridItemFooterActions extends React.PureComponent<IPropsFooterActions> {
+    static defaultProps: {
+        autohide: boolean;
+    };
+    render(): JSX.Element;
+}
+interface IPropsTime {
+    time: string;
+}
+declare class GridItemTime extends React.PureComponent<IPropsTime> {
+    render(): JSX.Element;
+}
+declare class GridItemTitle extends React.PureComponent {
+    render(): JSX.Element;
+}
+declare class GridItemSlug extends React.PureComponent {
+    render(): JSX.Element;
+}
+declare class GridItemText extends React.PureComponent {
+    render(): JSX.Element;
+}
+declare class GridItemTopActions extends React.PureComponent {
+    render(): JSX.Element;
+}
+declare class GridItemCheckWrapper extends React.PureComponent {
+    render(): JSX.Element;
+}
+interface IProps {
+    locked?: boolean;
+    fetched?: boolean;
+    onClick?(): void;
+    itemtype?: 'audio' | 'composite' | 'file' | 'graphic' | 'photo' | 'slideshow' | 'text' | 'video' | string;
+    status?: Array<'actioning' | 'selected' | 'activated' | string>;
+}
+export default class GridItem extends React.PureComponent<IProps> {
+    static defaultProps: {
+        locked: boolean;
+        fetched: boolean;
+        itemtype: string;
+        status: never[];
+    };
+    render(): JSX.Element;
+}
+export { GridItem, GridItemContent, GridItemMedia, GridItemFooter, GridItemContentBlock, GridItemTime, GridItemTitle, GridItemText, GridItemSlug, GridItemFooterBlock, GridItemFooterActions, GridItemTopActions, GridItemCheckWrapper };

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+interface IProps {
+    size?: 'x-small' | 'small' | 'medium' | 'large';
+    margin?: '0' | '1' | '2' | '3';
+    gap?: 'small' | 'medium' | 'large' | 'x-large';
+}
+export declare class GridList extends React.PureComponent<IProps> {
+    static defaultProps: {
+        size: string;
+        gap: string;
+    };
+    render(): JSX.Element;
+}
+export {};

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+interface IProps {
+    heading: string;
+    text: string;
+    timestamp?: Date;
+}
+export declare class HeadingText extends React.PureComponent<IProps> {
+    render(): JSX.Element;
+}
+export {};

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+interface IProps {
+    message: string;
+}
+export declare class HelloWorld extends React.Component<IProps> {
+    render(): JSX.Element;
+}
+export {};

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+interface IProps {
+    name?: string;
+    size?: 'small' | 'big';
+    type?: 'default' | 'primary' | 'success' | 'warning' | 'alert' | 'highlight' | 'light';
+    className?: string;
+    ariaHidden?: boolean;
+}
+export declare class Icon extends React.PureComponent<IProps> {
+    render(): JSX.Element;
+}
+export {};

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+interface IProps {
+    id?: string;
+    icon?: string;
+    ariaValue: string;
+    size?: 'small';
+    onClick(event: React.MouseEvent): void;
+}
+export declare class IconButton extends React.PureComponent<IProps> {
+    render(): JSX.Element;
+}
+export {};

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+interface IProps {
+    text: string;
+    type?: 'default' | 'primary' | 'success' | 'warning' | 'alert' | 'highlight' | 'sd-green';
+    icon?: string;
+    style?: 'basic' | 'translucent';
+}
+export declare class IconLabel extends React.PureComponent<IProps> {
+    render(): JSX.Element;
+}
+export {};

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

@@ -0,0 +1,24 @@
+import * as React from 'react';
+interface IProps {
+    value?: string;
+    label?: string;
+    maxLength?: number;
+    info?: string;
+    error?: string;
+    required?: boolean;
+    disabled?: boolean;
+    invalid?: boolean;
+    inlineLabel?: boolean;
+    onChange(newValue: string): void;
+}
+interface IState {
+    value: string;
+    invalid: boolean;
+}
+export declare class Input extends React.Component<IProps, IState> {
+    constructor(props: IProps);
+    htmlId: string;
+    handleChange(event: React.ChangeEvent<HTMLInputElement>): void;
+    render(): JSX.Element;
+}
+export {};

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

@@ -0,0 +1,15 @@
+import * as React from 'react';
+interface IProps {
+    text: string;
+    link?: string;
+    type?: 'default' | 'primary' | 'success' | 'warning' | 'alert' | 'highlight' | 'sd-green';
+    color?: string;
+    size?: 'small' | 'normal' | 'large';
+    onClick?(): void;
+    noTransform?: boolean;
+    style?: 'filled' | 'hollow' | 'translucent';
+}
+export declare class Label extends React.PureComponent<IProps> {
+    render(): JSX.Element;
+}
+export {};