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

package/app-typescript/components/Modal.tsx

@@ -1,11 +1,14 @@
 import React from 'react';
 import { Dialog as PrimeDialog } from '@superdesk/primereact/dialog';
+import classNames from 'classnames';
 
 interface IProps {
     id?: string;
     className?: string;
     theme?: string;
     visible?: boolean;
+    contentBg?: 'default' | 'medium' | 'dark';
+    contentPadding?: 'none' | 'small' | 'medium' | 'large';
     size?: 'small' | 'medium' | 'large' | 'x-large';
     maximized?: boolean;
     headerTemplate?: JSX.Element | string;
@@ -17,22 +20,29 @@ interface IProps {
 
 export class Modal extends React.Component<IProps, {}> {
     render() {
-        return <div style={{display: 'content'}}
-            data-theme={this.props.theme !== 'dark' ? null : 'dark-ui' }
-            className={this.props.className}>
-            <PrimeDialog
-                id={this.props.id}
-                visible={this.props.visible}
-                header={this.props.headerTemplate}
-                footer={this.props.footerTemplate}
-                closeOnEscape={this.props.closeOnEscape}
-                maximized={this.props.maximized}
-                contentClassName={this.props.size ?
-                    ('p-dialog-content--' + this.props.size) : undefined}
-                onShow={this.props.onShow}
-                onHide={this.props.onHide}>
-                {this.props.children}
-            </PrimeDialog>
-        </div>;
+        let classes = classNames({
+            [`p-dialog-content--${this.props.size}`]: this.props.size,
+            'p-dialog-content--default': this.props.contentBg === undefined,
+            [`p-dialog-content--${this.props.contentBg}`]: this.props.contentBg,
+            'p-dialog-content--s-padding': this.props.contentPadding === undefined,
+            [`p-dialog-content--${this.props.contentPadding}`]: this.props.contentPadding,
+        }, this.props.className);
+        return (
+            <div style={{display: 'content'}}
+                data-theme={this.props.theme !== 'dark' ? null : 'dark-ui' }>
+                <PrimeDialog
+                    id={this.props.id}
+                    visible={this.props.visible}
+                    header={this.props.headerTemplate}
+                    footer={this.props.footerTemplate}
+                    closeOnEscape={this.props.closeOnEscape}
+                    maximized={this.props.maximized}
+                    contentClassName={classes}
+                    onShow={this.props.onShow}
+                    onHide={this.props.onHide}>
+                    {this.props.children}
+                </PrimeDialog>
+            </div>
+        );
     }
 }

package/app-typescript/components/Navigation/SideBarTabs.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Icon } from '../Icon';
+import { Badge } from '../Badge';
 
 interface IProps {
     items: Array<ISideBarTab | 'divider'>;
@@ -11,6 +12,7 @@ export interface ISideBarTab {
     size: 'small' | 'big'; // defaults to 'small'
     tooltip?: string;
     active?: boolean;
+    badgeValue?: string;
     onClick(event: React.MouseEvent<HTMLButtonElement, MouseEvent>): void;
 }
 
@@ -61,6 +63,14 @@ export class SideBarTabs extends React.PureComponent<IProps, IState> {
                                             ' sd-sidetab-menu__btn--active' :
                                             (index === this.state.index ? ' sd-sidetab-menu__btn--active' : ''))}
                                         onClick={() => this.handleClick(item, index, event)}>
+                                        {
+                                        item['badgeValue'] != null
+                                        ? (
+                                        <Badge text={item['badgeValue']} type='primary' />
+                                        )
+                                        : null
+                                        }
+
                                         <span className='sd-sidetab-menu__main-icon '>
                                             <Icon size={item['size']} name={item['icon']} />
                                         </span>

package/app-typescript/components/SearchBar.tsx

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import {Icon} from './Icon';
+
+interface IProps {
+    value?: string | number;
+    type?: 'expanded' | 'collapsed' | 'boxed';
+    placeholder: string;
+    focused?: boolean;
+    boxed?: boolean;
+    onSubmit?(): void;
+}
+
+interface IState {
+    inputValue: any;
+    type: string;
+    focused: boolean;
+    boxed?: boolean;
+}
+
+export class SearchBar extends React.PureComponent<IProps, IState> {
+    private inputRef: any;
+    constructor(props: IProps) {
+        super(props);
+        this.state = {
+            inputValue: this.props.value ? this.props.value : '',
+            focused: this.props.focused ? this.props.focused : false,
+            type: this.props.type ? this.props.type : 'expanded',
+            boxed: this.props.boxed ? this.props.boxed : false,
+        };
+        this.inputRef = React.createRef();
+    }
+
+    componentDidUpdate(prevProps: any) {
+        if (prevProps.value !== this.props.value) {
+            this.setState({inputValue: this.props.value});
+        }
+    }
+
+    componentDidMount = () => {
+        document.addEventListener("mousedown", (event) => {
+            if (this.inputRef.current && !this.inputRef.current.contains(event.target)) {
+                this.setState({focused: false});
+            }
+        });
+    }
+
+    render() {
+        let classes = classNames('sd-searchbar', {
+            [`sd-searchbar--${this.state.type}`] : this.props.type,
+            'sd-searchbar--expanded': this.state.type === 'expanded' || this.props.type === undefined,
+            'sd-searchbar--focused' : this.state.focused,
+            'sd-searchbar--boxed': this.state.boxed,
+        });
+        return (
+            <div className={classes} ref={this.inputRef}>
+                <label className="sd-searchbar__icon"></label>
+                <input id="search-input"
+                ref={(input: any) => (input && this.props.focused) && input.focus()}
+                    className="sd-searchbar__input"
+                    type="text"
+                    placeholder={this.props.placeholder}
+                    value={this.state.inputValue}
+                    onChange={(e) => this.setState({inputValue: e.target.value})}
+                    onFocus={() => this.setState({focused: true})} />
+                {this.state.inputValue &&
+                <button className="sd-searchbar__cancel" onClick={() => this.setState({inputValue: ''})}>
+                    <Icon name='remove-sign' />
+                </button>}
+                <button
+                id="sd-searchbar__search-btn"
+                className="sd-searchbar__search-btn"
+                onSubmit={() => this.props.onSubmit}>
+                    <Icon name='chevron-right-thin' />
+                </button>
+            </div>
+        );
+    }
+}

package/app-typescript/components/Select.tsx

@@ -13,6 +13,7 @@ interface ISelect {
     inlineLabel?: boolean;
     labelHidden?: boolean;
     tabindex?: number;
+    fullWidth?: boolean;
     onChange(newValue: string): void;
 }
 
@@ -45,6 +46,7 @@ class Select extends React.Component<ISelect, IState> {
             'sd-input--inline-label': this.props.inlineLabel,
             'sd-input--required': this.props.required,
             'sd-input--disabled': this.props.disabled,
+            'sd-input--full-width': this.props.fullWidth,
             'sd-input--invalid': this.props.invalid || this.state.invalid,
         });
         const labelClasses = classNames('sd-input__label', {

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/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/index.ts

@@ -69,6 +69,9 @@ export { SelectGrid } from './components/SelectGrid';
 export { IconPicker } from './components/IconPicker';
 export { ThemeSelector } from './components/ThemeSelector';
 export { DropZone } from './components/DropZone';
+export { CreateButton } from './components/CreateButton';
+// export { TreeSelect } from './components/TreeSelect';
+export { SearchBar } from './components/SearchBar';
 
 export * from './components/Layouts';
 export * from './components/Form';

package/dist/dots.svg

@@ -0,0 +1,3 @@
+<svg width="6" height="30" viewBox="0 0 6 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 2C1.55228 2 2 1.55228 2 1C2 0.447715 1.55228 0 1 0C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2ZM5 2C5.55228 2 6 1.55228 6 1C6 0.447715 5.55228 0 5 0C4.44772 0 4 0.447715 4 1C4 1.55228 4.44772 2 5 2ZM6 5C6 5.55228 5.55228 6 5 6C4.44772 6 4 5.55228 4 5C4 4.44772 4.44772 4 5 4C5.55228 4 6 4.44772 6 5ZM1 6C1.55228 6 2 5.55228 2 5C2 4.44772 1.55228 4 1 4C0.447715 4 0 4.44772 0 5C0 5.55228 0.447715 6 1 6ZM6 9C6 9.55229 5.55228 10 5 10C4.44772 10 4 9.55229 4 9C4 8.44771 4.44772 8 5 8C5.55228 8 6 8.44771 6 9ZM1 10C1.55228 10 2 9.55229 2 9C2 8.44771 1.55228 8 1 8C0.447715 8 0 8.44771 0 9C0 9.55229 0.447715 10 1 10ZM6 13C6 13.5523 5.55228 14 5 14C4.44772 14 4 13.5523 4 13C4 12.4477 4.44772 12 5 12C5.55228 12 6 12.4477 6 13ZM1 14C1.55228 14 2 13.5523 2 13C2 12.4477 1.55228 12 1 12C0.447715 12 0 12.4477 0 13C0 13.5523 0.447715 14 1 14ZM6 17C6 17.5523 5.55228 18 5 18C4.44772 18 4 17.5523 4 17C4 16.4477 4.44772 16 5 16C5.55228 16 6 16.4477 6 17ZM1 18C1.55228 18 2 17.5523 2 17C2 16.4477 1.55228 16 1 16C0.447715 16 0 16.4477 0 17C0 17.5523 0.447715 18 1 18ZM6 21C6 21.5523 5.55228 22 5 22C4.44772 22 4 21.5523 4 21C4 20.4477 4.44772 20 5 20C5.55228 20 6 20.4477 6 21ZM1 22C1.55228 22 2 21.5523 2 21C2 20.4477 1.55228 20 1 20C0.447715 20 0 20.4477 0 21C0 21.5523 0.447715 22 1 22ZM6 25C6 25.5523 5.55228 26 5 26C4.44772 26 4 25.5523 4 25C4 24.4477 4.44772 24 5 24C5.55228 24 6 24.4477 6 25ZM1 26C1.55228 26 2 25.5523 2 25C2 24.4477 1.55228 24 1 24C0.447715 24 0 24.4477 0 25C0 25.5523 0.447715 26 1 26ZM6 29C6 29.5523 5.55228 30 5 30C4.44772 30 4 29.5523 4 29C4 28.4477 4.44772 28 5 28C5.55228 28 6 28.4477 6 29ZM1 30C1.55228 30 2 29.5523 2 29C2 28.4477 1.55228 28 1 28C0.447715 28 0 28.4477 0 29C0 29.5523 0.447715 30 1 30Z" fill="#ffffff"/>
+</svg>