superdesk-ui-framework 3.0.1-beta.1 → 3.0.1-beta.11

package/app-typescript/components/SidebarMenu.tsx

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { Icon } from './Icon';
+
+interface IProps {
+    items: Array<IItem | 'divider'>;
+}
+
+interface IItem {
+    icon: string;
+    size: 'small' | 'big'; // defaults to 'small'
+    tooltip?: string;
+    active?: boolean;
+}
+
+interface IState {
+    index: number;
+    closeIndex: number;
+}
+
+export class SidebarMenu extends React.PureComponent<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+        this.state = {
+            index: -1,
+            closeIndex: -1,
+        };
+        this.handleClick = this.handleClick.bind(this);
+    }
+
+    handleClick(indexNumber: number) {
+        this.setState({
+            index: indexNumber,
+        });
+        if (this.state.index === indexNumber) {
+            this.setState({
+                closeIndex: indexNumber,
+            });
+        }
+    }
+
+    render() {
+        return (
+            <div className='sd-sidebar-menu sd-content-wrapper__left-tabs'>
+                <ul className='authoring-active'>
+                    {this.props.items.map((item, index) => {
+                        if (item === 'divider') {
+                            return (
+                                <li key={index} className='sd-sidebar-menu__spacer'></li>
+                            );
+                        } else {
+                            return (
+                                <li key={index} data-sd-tooltip={item['tooltip']} data-flow='right'>
+                                    <a className={'sd-sidebar-menu__btn' + (index === this.state.closeIndex ? ' sd-sidebar-menu__btn--closed ' : '') + (item['active'] ? ' sd-sidebar-menu__btn--active' : (index === this.state.index ? ' sd-sidebar-menu__btn--active' : ''))}
+                                        onClick={() => this.handleClick(index)}>
+                                        <span className='sd-sidebar-menu__main-icon '>
+                                            <Icon size={item['size']} name={item['icon']} />
+                                        </span>
+                                        <i className='sd-sidebar-menu__helper-icon big-icon--chevron-left'></i>
+                                    </a>
+                                </li>
+                            );
+                        }
+                    })}
+                </ul>
+            </div>
+        );
+    }
+}

package/app-typescript/components/Skeleton.tsx

@@ -1,5 +1,5 @@
 
-import React from 'react';
+import * as  React from 'react';
 import classNames from 'classnames';
 
 interface IProps {

package/app-typescript/components/Spinner.tsx

@@ -23,7 +23,7 @@ class Spinner extends React.PureComponent<IProps> {
         });
         return (
             <svg role="progressbar" className={classes} viewBox="0 0 50 50">
-                <circle className="sd-spinner__path" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>
+                <circle className="sd-spinner__path" cx="25" cy="25" r="20" fill="none" strokeWidth="5"></circle>
             </svg>
         );
     }

package/app-typescript/components/SwitchGroup.tsx

@@ -5,6 +5,7 @@ interface IProps {
     orientation?: 'vertical' | 'horizontal'; // defaults to 'vertical'
     align?: 'left' | 'right'; // defaults to 'left'
     children: React.ReactNode;
+    className?: string;
 }
 
 export class SwitchGroup extends React.PureComponent<IProps> {
@@ -13,7 +14,7 @@ export class SwitchGroup extends React.PureComponent<IProps> {
             [`sd-switch__group--vertical`]: this.props.orientation !== 'horizontal',
             [`sd-switch__group--horizontal`]: this.props.orientation === 'horizontal',
             [`sd-switch__group--right`]: this.props.align === 'right',
-        });
+        }, this.props.className);
 
         return (
             <div className={classes}>

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/TimePicker.tsx

@@ -1,30 +1,64 @@
 import * as React from 'react';
+// import classNames from 'classnames';
+import nextId from "react-id-generator";
+import { InputWrapper } from './Form';
 
 interface IProps {
     value: string; // will output time as ISO8601 time string(e.g. 16:55) or an empty string if there's no value
     onChange(valueNext: string): void;
-    required?: boolean; // displays a button to reset time input
+    allowSeconds?: boolean;
     disabled?: boolean;
+    inlineLabel?: boolean;
+    required?: boolean;
+    fullWidth?: boolean;
+    invalid?: boolean;
+    labelHidden?: boolean;
+    tabindex?: number;
+    label?: string;
+    info?: string;
+    error?: string;
 }
 
-export class TimePicker extends React.PureComponent<IProps> {
+interface IState {
+    invalid: boolean;
+}
+
+export class TimePicker extends React.PureComponent<IProps, IState> {
+    private htmlId = nextId();
+    constructor(props: IProps) {
+        super(props);
+        this.state = {
+            invalid: this.props.invalid ? this.props.invalid : false,
+        };
+    }
+
     render() {
         return (
-            <div
-                className="sd-input sd-input--no-label sd-input--no-margin"
-                style={{display: 'inline-flex'}}
-            >
+            <InputWrapper
+            label={this.props.label}
+            error={this.props.error}
+            required={this.props.required}
+            disabled={this.props.disabled}
+            invalid={this.state.invalid}
+            info={this.props.info}
+            inlineLabel={this.props.inlineLabel}
+            labelHidden={this.props.labelHidden}
+            fullWidth={this.props.fullWidth}
+            htmlId={this.htmlId}
+            tabindex={this.props.tabindex}>
                 <input
-                    type="time"
-                    className="sd-input__input"
-                    value={this.props.value}
-                    required={this.props.required}
-                    disabled={this.props.disabled}
-                    onChange={(event) => {
-                        this.props.onChange(event.target.value);
-                    }}
-                />
-            </div>
+                id={this.htmlId}
+                aria-labelledby={this.htmlId + 'label'}
+                type="time"
+                step={this.props.allowSeconds ? 1 : undefined}
+                className="sd-input__input"
+                value={this.props.value}
+                required={this.props.required}
+                disabled={this.props.disabled}
+                onChange={(event) => {
+                    this.props.onChange(event.target.value);
+                }}/>
+            </InputWrapper>
         );
     }
 }

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";
 

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();