superdesk-ui-framework 3.0.1-beta.9 → 3.0.2

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) {
+export function getDurationString(seconds: number,  minSections: 1 | 2 | 3 = 1) {
     function zeroPad(value: number | string) {
         if (value.toString().length === 1 || value === 0) {
             return `0${value}`;
@@ -371,5 +380,21 @@ export function getDurationString(seconds: number) {
     let minute = zeroPad(Math.floor((seconds % 3600) / 60));
     let second = zeroPad(Math.floor(seconds % 60));
 
-    return `${hour}h ${minute}m ${second}s`;
+    if (minSections === 3) {
+        return `${hour}h ${minute}m ${second}s`;
+    } 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) {
+            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/Form/FormLabel.tsx

@@ -2,15 +2,22 @@ import * as React from 'react';
 import classNames from 'classnames';
 
 interface IProps {
-    style?: 'normal' | 'light';
+    style?: 'normal' | 'light' | 'boxed';
+    state?: 'default' | 'focused' | 'warning';
     text: string;
     forId?: string;
+    required?: boolean;
+    invalid?: boolean;
 }
 
 export class FormLabel extends React.PureComponent<IProps> {
     render() {
         let classes = classNames('form-label', {
             'form-label--light': this.props.style === 'light',
+            'form-label--boxed': this.props.style === 'boxed',
+            'form-label--required': this.props.required,
+            'form-label--invalid': this.props.invalid,
+            [`form-label--${this.props.state}`]: this.props.state !== 'default' && this.props.state !== undefined,
 
         });
         return (

package/app-typescript/components/Form/InputBase.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import classNames from 'classnames';
 
 interface IPropsBase {
     error?: string;
@@ -8,7 +9,7 @@ interface IPropsBase {
     tabIndex?: number;
     fullWidth?: boolean;
     boxedStyle?: boolean;
-    boxedLable?: boolean;
+    // boxedLable?: boolean;
     placeholder?: string;
     htmlId?: string;
     id?: string;
@@ -70,8 +71,17 @@ export class InputBase extends React.Component<IProps, IState> {
     }
 
     render() {
+        let classes = classNames('sd-input__input', {
+            'sd-input__input--boxed-style': this.props.boxedStyle,
+            'sd-input__input--required': this.props.required,
+            'sd-input__input--invalid': this.props.invalid,
+            'sd-input__input--disabled': this.props.disabled,
+            'sd-input__input--medium': this.props.size === undefined,
+            [`sd-input__input--${this.props.size}`]: this.props.size || this.props.size !== undefined,
+
+        });
         return (
-            <input className='sd-input__input'
+            <input className={classes}
             type={this.props.type ?? 'text'}
             id={this.props.htmlId}
             value={this.state.value}

package/app-typescript/components/Input.tsx

@@ -23,19 +23,19 @@ interface IPropsBase {
 
 interface IPropsText extends IPropsBase {
     type: 'text';
-    value: string;
+    value?: string;
     onChange(newValue: string): void;
 }
 
 interface IPropsPassword extends IPropsBase {
     type: 'password';
-    value: string;
+    value?: string;
     onChange(newValue: string): void;
 }
 
 interface IPropsNumber extends IPropsBase {
     type: 'number';
-    value: number;
+    value?: number;
     onChange(newValue: number): void;
 }
 
@@ -75,7 +75,7 @@ export class Input extends React.Component<IProps, IState> {
 
     componentDidUpdate(prevProps: any) {
         if (prevProps.value !== this.props.value) {
-            this.setState({value: this.props.value});
+            this.setState({value: this.props.value ?? ''});
         }
     }
 

package/app-typescript/components/Label.tsx

@@ -66,7 +66,10 @@ export class Label extends React.PureComponent<IProps> {
                 );
             } else {
                 return (
-                    <span className={classes} style={{backgroundColor: this.props.hexColor}}>
+                    <span className={classes}
+                    style={this.props.hexColor
+                    ? {backgroundColor: this.props.hexColor, color: getTextColor(this.props.hexColor)}
+                    : undefined}>
                         {this.props.text}
                     </span>
                 );
@@ -74,3 +77,16 @@ export class Label extends React.PureComponent<IProps> {
         }
     }
 }
+
+export function getTextColor(backgroundColor: string): 'black' | 'white' | undefined {
+    if (backgroundColor) {
+        const r = parseInt(backgroundColor.substr(1, 2), 16);
+        const g = parseInt(backgroundColor.substr(3, 2), 16);
+        const b = parseInt(backgroundColor.substr(5, 2), 16);
+        const yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
+
+        return (yiq >= 128) ? 'black' : 'white';
+    } else {
+        return;
+    }
+}

package/app-typescript/components/Layouts/AuthoringFrame.tsx

@@ -16,6 +16,7 @@ interface IProps {
     header?: React.ReactNode;
     main?: React.ReactNode;
     sideBar?: React.ReactNode;
+    sideBarClosed?: boolean;
     sidePanel?: React.ReactNode;
     sideOverlay?: React.ReactNode;
     sideOverlayOpen?: boolean;
@@ -56,7 +57,7 @@ export class AuthoringFrame extends React.PureComponent<IProps> {
                     </AuthoringFrameSidePanelOverlay>
                 )}
                 {this.props.sideBar && (
-                    <AuthoringFrameRightBar>
+                    <AuthoringFrameRightBar closed={this.props.sideBarClosed}>
                         {this.props.sideBar}
                     </AuthoringFrameRightBar>
                 )}

package/app-typescript/components/Layouts/AuthoringFrameRightBar.tsx

@@ -2,12 +2,31 @@ import * as React from 'react';
 
 interface IProps {
     children?: React.ReactNode;
+    closed?: boolean;
 }
 
-export class AuthoringFrameRightBar extends React.PureComponent<IProps> {
+interface IState {
+    children?: React.ReactNode;
+    closed?: boolean;
+}
+
+export class AuthoringFrameRightBar extends React.PureComponent<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+        this.state = {
+            closed: this.props.closed ? this.props.closed : false,
+        };
+    }
+    componentDidUpdate(prevProps: Readonly<IProps>): void {
+        if (prevProps.closed !== this.props.closed) {
+            this.setState({
+                closed: this.props.closed,
+            });
+        }
+    }
     render() {
         return (
-            <div className="sd-editor-grid__sidetabs-bar">
+            !this.state.closed && <div className="sd-editor-grid__sidetabs-bar">
                 {this.props.children}
             </div>
         );

package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx

@@ -16,7 +16,7 @@ export class AuthoringInnerHeader extends React.PureComponent<IProps, IState> {
         super(props);
 
         this.state = {
-            collapsed: false,
+            collapsed: this.props.collapsed ? this.props.collapsed : false,
         };
     }
 

package/app-typescript/components/Layouts/AuthoringMain.tsx

@@ -31,8 +31,10 @@ export class AuthoringMain extends React.PureComponent<IProps> {
                 )}
                 <AuthoringMainContent>
                     {this.props.authoringHeader && (
-                        <AuthoringInnerHeader headerPadding={this.props.headerPadding}>
-                        {this.props.authoringHeader}
+                        <AuthoringInnerHeader
+                        headerPadding={this.props.headerPadding}
+                        collapsed={this.props.headerCollapsed}>
+                            {this.props.authoringHeader}
                     </AuthoringInnerHeader>
                     )}
                     {this.props.authoringBookmarks && (

package/app-typescript/components/Layouts/CoreLayout.tsx

@@ -22,6 +22,8 @@ interface IProps {
     menuId?: string;
     ariaControls?: string;
     buttonAnimation?: 'spin' | 'squeeze' | 'none';
+    editorFullWidth?: boolean;
+    openPanel?: boolean;
 }
 
 export class CoreLayout extends React.PureComponent<IProps> {
@@ -43,7 +45,7 @@ export class CoreLayout extends React.PureComponent<IProps> {
                         {this.props.topMenu}
                     </CoreLayoutTopMenu>
                 )}
-                <CoreLayoutMain>
+                <CoreLayoutMain editorFullWidth={this.props.editorFullWidth} openPanel={this.props.openPanel}>
                         {this.props.children}
                 </CoreLayoutMain>
                 {this.props.footer && (

package/app-typescript/components/Layouts/CoreLayoutMain.tsx

@@ -1,14 +1,23 @@
 import * as React from 'react';
+import classNames from 'classnames';
 
 interface IProps {
     children?: React.ReactNode;
     id?: string;
+    editorFullWidth?: boolean;
+    openPanel?: boolean;
 }
 
 export class CoreLayoutMain extends React.PureComponent<IProps> {
     render() {
+        const classes = classNames('sd-content sd-content-wrapper', {
+            'sd-content-wrapper--editor-full': this.props.editorFullWidth,
+        },
+    );
         return (
-            <section id={this.props.id} className='sd-content sd-content-wrapper'>
+            <section
+            id={this.props.id}
+            className={classes + (this.props.openPanel ? ' sd-content-wrapper--editor-full' : '')}>
                 {this.props.children}
             </section>
         );

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

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 interface IPropsItem {
     action?: React.ReactNode;
     locked?: boolean;
-    itemColum: Array<{itemRow: Array<{content: any}>, border?: boolean, fullwidth?: boolean}>;
+    itemColum: Array<{ itemRow: Array<{ content: any }>, border?: boolean, fullwidth?: boolean }>;
     activated?: boolean;
     selected?: boolean;
     archived?: boolean;
@@ -14,38 +14,72 @@ interface IPropsItem {
 }
 
 class ContentListItem extends React.PureComponent<IPropsItem> {
+
+    private timer: any;
+    private delay = 200;
+    private prevent = false;
+
+    onSingleClick = () => {
+        let selection = window.getSelection();
+        this.timer = setTimeout(() => {
+            if (!this.prevent && this.props.onClick && selection) {
+                if (selection.toString().length < 1) {
+                    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-list-item-group sd-list-item-group--space-between-items', {
+        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 className={classes} onClick={this.props.onClick} onDoubleClick={this.props.onDoubleClick}>
-                <div className="sd-list-item sd-shadow--z1">
-                    {this.props.locked
+            <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
+                {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>
+                                    ? <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">
-                        {this.props.action}
-                    </div>
+                    </div>;
+                })}
+                <div className="sd-list-item__action-menu" onClick={this.onActionMenuClick}>
+                    {this.props.action}
                 </div>
             </div>
         );
@@ -67,7 +101,7 @@ interface IProps {
 }
 
 interface IItemArray {
-    itemRow: Array<{content: React.ReactNode}>;
+    itemRow: Array<{ content: React.ReactNode }>;
     border?: boolean;
     fullwidth?: boolean;
 }
@@ -76,21 +110,21 @@ class ContentList extends React.PureComponent<IProps> {
     render() {
         let classes = classNames('sd-list-item-group sd-list-item-group--space-between-items');
         return (
-            <ul className={classes}>
+            <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} />;
+                        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} />;
                 })}
-            </ul>
+            </div>
         );
     }
 }