superdesk-ui-framework 3.0.0-beta.0 → 3.0.0-rc12

package/app-typescript/components/Lists/BoxedList.tsx

@@ -0,0 +1,169 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+class BoxedListMedia extends React.PureComponent {
+    render() {
+        return (
+            <div className='boxed-list__item-media'>
+                {this.props.children}
+            </div>
+        );
+    }
+}
+
+class BoxedListContent extends React.PureComponent {
+    render() {
+        return (
+            <div className='boxed-list__item-content'>
+                {this.props.children}
+            </div>
+        );
+    }
+}
+
+class BoxedListContentRow extends React.PureComponent {
+    render() {
+        return (
+            <div className='boxed-list__item-content-row'>
+                {this.props.children}
+            </div>
+        );
+    }
+}
+
+class BoxedListFooter extends React.PureComponent {
+    render() {
+        return (
+            <div className='boxed-list__item-footer'>
+                {this.props.children}
+            </div>
+        );
+    }
+}
+
+interface IPropsActions {
+    children?: React.ReactNode;
+    slideIn?: boolean; // defaults to 'compact'
+}
+
+class BoxedListActions extends React.PureComponent<IPropsActions> {
+    public rootElement?: HTMLDivElement | null;
+
+    render() {
+        let classes = classNames({
+            'boxed-list__actions--static': this.props.slideIn === undefined,
+            'boxed-list__actions--slide-in': this.props.slideIn === true || this.props.slideIn !== undefined,
+        });
+        return (
+            <div
+                className={classes}
+                ref={(el) => {
+                    this.rootElement = el;
+                }}
+            >
+                {this.props.children}
+            </div>
+        );
+    }
+}
+
+interface IPropsItem {
+    media?: React.ReactNode;
+    footer?: React.ReactNode;
+    actions?: React.ReactNode;
+    children?: React.ReactNode;
+    density?: 'compact' | 'comfortable' | 'loose';
+    type?: 'default' | 'primary' | 'success' | 'warning' | 'alert' | 'highlight'; // defaults to 'default'
+    clickable?: boolean;
+    alignVertical?: 'start' | 'center';
+    slideInActions?: boolean;
+    selected?: boolean;
+    unread?: boolean;
+    onClick?(): void;
+}
+
+class BoxedListItem extends React.PureComponent<IPropsItem> {
+    private actionsRef: BoxedListActions | null;
+
+    constructor(props: IPropsItem) {
+        super(props);
+
+        this.actionsRef = null;
+        this.handleClick = this.handleClick.bind(this);
+    }
+
+    handleClick(event: React.MouseEvent<HTMLLIElement, MouseEvent>) {
+        if (this.actionsRef?.rootElement != null && this.actionsRef.rootElement.contains(event.target as HTMLElement)) {
+            return;
+        } else {
+            this.props.onClick?.();
+        }
+    }
+
+    render() {
+        let classes = classNames('boxed-list__item', {
+            'boxed-list__item--comfortable': this.props.density === undefined,
+            [`boxed-list__item--${this.props.density}`]: this.props.density || this.props.density !== undefined,
+            'boxed-list__item--clickable': this.props.clickable === true,
+            'boxed-list__item--selected': this.props.selected,
+            'boxed-list__item--unread': this.props.unread,
+            [`boxed-list__item--${this.props.type}`]: this.props.type || this.props.type !== undefined,
+            [`boxed-list__item--align-${this.props.alignVertical}`]: this.props.alignVertical,
+        });
+        return (
+            <li className={classes} onClick={this.handleClick}>
+
+                {this.props.media && (
+                    <BoxedListMedia>
+                        {this.props.media}
+                    </BoxedListMedia>
+                )}
+
+                <BoxedListContent>
+                    {this.props.children}
+                </BoxedListContent>
+
+                {this.props.footer && (
+                    <BoxedListFooter>
+                        {this.props.footer}
+                    </BoxedListFooter>
+                )}
+
+                {this.props.actions && (
+                    <BoxedListActions
+                        slideIn={this.props.slideInActions}
+                        ref={(ref) => {
+                            this.actionsRef = ref;
+                        }}
+                    >
+                        {this.props.actions}
+                    </BoxedListActions>
+                )}
+            </li>
+        );
+    }
+}
+
+interface IProps {
+    children?: React.ReactNode;
+    density?: 'compact' | 'comfortable'; // defaults to 'compact'
+    className?: string;
+}
+
+class BoxedList extends React.PureComponent<IProps> {
+    render() {
+        let classes = classNames('boxed-list', {
+            'boxed-list--compact': this.props.density === undefined,
+            [`boxed-list--${this.props.density}`]: this.props.density || this.props.density !== undefined,
+        }, this.props.className);
+        return (
+            <ul className={classes}>
+                {this.props.children}
+            </ul>
+        );
+    }
+}
+
+export {
+    BoxedList, BoxedListItem, BoxedListContentRow, BoxedListActions, BoxedListFooter
+};

package/app-typescript/components/Lists/ContentList.tsx

@@ -0,0 +1,133 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+interface IPropsItem {
+    action?: React.ReactNode;
+    locked?: boolean;
+    itemColum: Array<{ itemRow: Array<{ content: any }>, border?: boolean, fullwidth?: boolean }>;
+    activated?: boolean;
+    selected?: boolean;
+    archived?: boolean;
+    loading?: boolean;
+    onClick?(): void;
+    onDoubleClick?(): void;
+}
+
+class ContentListItem extends React.PureComponent<IPropsItem> {
+
+    private timer: any;
+    private delay = 200;
+    private prevent = false;
+
+    onSingleClick = () => {
+        this.timer = setTimeout(() => {
+            if (!this.prevent) {
+                if (this.props.onClick) {
+                    this.props.onClick();
+                }
+            }
+        }, this.delay);
+    }
+
+    onDoubleClick = () => {
+        clearTimeout(this.timer);
+        this.prevent = true;
+        if (this.props.onDoubleClick) {
+            this.props.onDoubleClick();
+        }
+        setTimeout(() => {
+            this.prevent = false;
+        }, this.delay);
+    }
+
+    onActionMenuClick = (event: React.MouseEvent<HTMLElement>) => {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+
+    render() {
+        let classes = classNames('sd-list-item sd-shadow--z1', {
+            'sd-list-item--activated': this.props.activated,
+            'sd-list-item--selected': this.props.selected,
+            'fetched': this.props.archived,
+            'actioning': this.props.loading,
+        });
+
+        return (
+            <div
+                role='listitem'
+                className={classes}
+                onClick={this.onSingleClick}
+                onDoubleClick={this.onDoubleClick}>
+                {this.props.locked
+                    ? <div className="sd-list-item__border sd-list-item__border--locked"></div>
+                    : <div className="sd-list-item__border"></div>}
+                {this.props.itemColum.map((item, index) => {
+                    return <div
+                        className={`sd-list-item__column ${item.fullwidth && 'sd-list-item__column--grow'} ${!item.border && 'sd-list-item__column--no-border'}`}
+                        key={index}>
+                        {item.itemRow.map((e, i) => {
+                            return (
+                                item.itemRow.length <= 1
+                                    ? <React.Fragment key={i}>{e.content}</React.Fragment>
+                                    : <div className="sd-list-item__row" key={i}>
+                                        {e.content}
+                                    </div>
+                            );
+                        })}
+                    </div>;
+                })}
+                <div className="sd-list-item__action-menu" onClick={this.onActionMenuClick}>
+                    {this.props.action}
+                </div>
+            </div>
+        );
+    }
+}
+
+interface IProps {
+    items: Array<{
+        itemColum: Array<IItemArray>,
+        locked?: boolean,
+        action?: React.ReactNode,
+        loading?: boolean,
+        activated?: boolean,
+        selected?: boolean,
+        archived?: boolean,
+        onClick?(): void,
+        onDoubleClick?(): void;
+    }>;
+}
+
+interface IItemArray {
+    itemRow: Array<{ content: React.ReactNode }>;
+    border?: boolean;
+    fullwidth?: boolean;
+}
+
+class ContentList extends React.PureComponent<IProps> {
+    render() {
+        let classes = classNames('sd-list-item-group sd-list-item-group--space-between-items');
+        return (
+            <div role='list' className={classes}>
+                {this.props.items.map((item, index) => {
+                    return <ContentListItem
+                        key={index}
+                        itemColum={item.itemColum}
+                        locked={item.locked}
+                        action={item.action}
+                        loading={item.loading}
+                        activated={item.activated}
+                        selected={item.selected}
+                        archived={item.archived}
+                        onClick={item.onClick}
+                        onDoubleClick={item.onDoubleClick} />;
+                })}
+            </div>
+        );
+    }
+}
+
+export {
+    ContentList, ContentListItem
+};

package/app-typescript/components/Lists/SimpleList.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+interface IProps {
+    children?: React.ReactNode;
+    density?: 'compact' | 'comfortable' | 'loose'; // defaults to 'compact'
+    border?: boolean;
+    className?: string;
+    width?: 'none' | 'x-small' | 'small' | 'medium' | 'large';
+    id?: string;
+}
+
+interface IPropsItem {
+    stacked?: boolean;
+    justify?: 'flex-start' | 'flex-end' | 'center' | 'space-between';
+    id?: string;
+}
+
+class SimpleListItem extends React.PureComponent<IPropsItem> {
+    render() {
+        let classes = classNames('simple-list__item', {
+            'simple-list__item--stacked': this.props.stacked,
+            'simple-list__item--justify-flex-start': this.props.justify === undefined,
+            [`simple-list__item--justify-${this.props.justify}`]:
+                this.props.justify || this.props.justify !== undefined,
+        });
+        return (
+            <li className={classes} id={this.props.id || undefined}>
+                {this.props.children}
+            </li>
+        );
+    }
+}
+
+class SimpleList extends React.PureComponent<IProps> {
+    render() {
+        let classes = classNames('simple-list', {
+            'simple-list--compact': this.props.density === undefined,
+            'simple-list--dotted': this.props.border === true,
+            [`simple-list--${this.props.density}`]: this.props.density || this.props.density !== undefined,
+            '': this.props.width === undefined,
+            [`simple-list--fixedW-${this.props.width}`]: this.props.width || this.props.width !== undefined,
+        }, this.props.className);
+        return (
+            <ul className={classes} id={this.props.id || undefined}>
+                {this.props.children}
+            </ul>
+        );
+    }
+}
+
+export {
+    SimpleList, SimpleListItem
+};