superdesk-ui-framework 3.0.1-beta.5 → 3.0.1-beta.7

package/app/styles/components/_sd-searchbar.scss

@@ -154,6 +154,13 @@
         }
     }
 }
+.sd-searchbar__search-btn--active {
+    background-color: $sd-colour-interactive;
+        opacity: 1;
+        i {
+            color: $white;
+        }
+}
 [dir="rtl"] {
     .sd-searchbar__search-btn {
         i.icon-chevron-right-thin {

package/app/styles/form-elements/_inputs.scss

@@ -928,6 +928,8 @@
         text-align: end;
         width: 2.5ch;
         font-size: 1.4rem;
+        padding: 0 !important;
+        line-height: 3.2rem;
         &::-webkit-outer-spin-button,
         &::-webkit-inner-spin-button {
             -webkit-appearance: none;
@@ -983,6 +985,16 @@
     }
 }
 
+.blink_me {
+    animation: blinker 1s linear infinite;
+}
+
+@keyframes blinker {
+50% {
+    opacity: 0;
+}
+}
+
 //&--boxed-style
 
 

package/app/styles/primereact/_pr-dropdown.scss

@@ -1,7 +1,7 @@
 @import './../tag-labels';
 @import './../form-elements/checkbox';
 
-.p-dropdown, .p-multiselect {
+.p-dropdown {
     @include pr-input-item-base;
     padding-block-start: 6px;
     padding-block-end: 6px;
@@ -10,6 +10,14 @@
     color: $sd-text;
 }
 
+.p-multiselect {
+    @include pr-input-item-base;
+    height: auto !important;
+    min-height: 3.2rem !important;
+    color: $sd-text;
+    padding: 0.4rem;
+}
+
 .p-dropdown-clear-icon,
 .p-multiselect-clear-icon {
     position: static;
@@ -69,13 +77,21 @@
 }
 
 .p-multiselect-label {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
     display: flex;
+    justify-content: flex-start;
     align-items: center;
+    flex-wrap: wrap;
+    padding-inline-start: 0.4rem;
+    gap: 0.4rem;
 }
 
 .p-multiselect-token {
     @extend .tag-label;
     cursor: default;
+    margin: 0 !important;
  
     .pi-times-circle {
         overflow: inherit;

package/app-typescript/components/DurationInput.tsx

@@ -25,6 +25,7 @@ interface IState {
     hours?: any;
     minutes?: any;
     seconds?: any;
+    blink?: string;
 }
 
 export class DurationInput extends React.PureComponent<IProps, IState> {
@@ -38,6 +39,7 @@ export class DurationInput extends React.PureComponent<IProps, IState> {
             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),
+            blink: '',
         };
 
         this.hourRef = React.createRef();
@@ -68,10 +70,11 @@ export class DurationInput extends React.PureComponent<IProps, IState> {
         return this.zeroPad(value);
     }
 
-    componentDidUpdate(_: any, prevState: IState) {
+    componentDidUpdate(prevProps: any, prevState: IState) {
         if (!this.hourRef.current || !this.minuteRef.current || !this.secondRef.current ) {
             return;
         }
+
         if (this.state.hours !== prevState.hours) {
             if (Number(this.hourRef.current.value) > 99) {
                 this.setState({
@@ -85,6 +88,10 @@ export class DurationInput extends React.PureComponent<IProps, IState> {
                     hours: this.zeroPad(Number(this.state.hours) + 1),
                     minutes: this.zeroPad(this.state.minutes % 60),
                 });
+                this.setState({blink: 'hour'});
+                setTimeout(() => {
+                    this.setState({blink: ''});
+                }, 500);
             }
             if (Number(this.minuteRef.current.value) < 0) {
                 this.setState({
@@ -93,6 +100,10 @@ export class DurationInput extends React.PureComponent<IProps, IState> {
                     : this.zeroPad(Number(this.state.hours)),
                     minutes: 59,
                 });
+                this.setState({blink: 'hour'});
+                setTimeout(() => {
+                    this.setState({blink: ''});
+                }, 500);
             }
         }
         if (this.state.seconds !== prevState.seconds) {
@@ -101,14 +112,32 @@ export class DurationInput extends React.PureComponent<IProps, IState> {
                     minutes: this.zeroPad(Number(this.state.minutes) + 1),
                     seconds: this.zeroPad(this.state.seconds % 60),
                 });
+                this.setState({blink: 'minute'});
+                setTimeout(() => {
+                    this.setState({blink: ''});
+                }, 500);
             }
             if (Number(this.secondRef.current.value) < 0) {
                 this.setState({
                     minutes: this.zeroPad(Number(this.state.minutes) - 1),
                     seconds: 59,
                 });
+                this.setState({blink: 'minute'});
+                setTimeout(() => {
+                    this.setState({blink: ''});
+                }, 500);
             }
         }
+
+        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),
+            });
+        }
     }
 
     valueUpdate() {
@@ -213,7 +242,11 @@ 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) {
-            stateClone[state] = event.target.value.slice(0, 2);
+            if (event.target.selectionStart === 1 && event.target.selectionEnd === 1) {
+                stateClone[state] = event.target.value.slice(0, 1) + event.target.value.slice(2, 3);
+            } else {
+                stateClone[state] = event.target.value.slice(0, 2);
+            }
         } else {
             stateClone[state] = event.target.value;
         }
@@ -263,7 +296,7 @@ export class DurationInput extends React.PureComponent<IProps, IState> {
             tabindex={this.props.tabindex}>
                 <div className={InputClasses}>
                     <input
-                    className='duration-input'
+                    className={`duration-input ${this.state.blink === 'hour' ? 'blink_me' : ''}`}
                     type='text'
                     id='hours'
                     max={99}
@@ -283,7 +316,7 @@ export class DurationInput extends React.PureComponent<IProps, IState> {
                     <span className='sd-input__suffix'>h</span>
 
                     <input
-                    className='duration-input'
+                    className={`duration-input ${this.state.blink === 'minute' ? 'blink_me' : ''}`}
                     type='text'
                     id='minutes'
                     ref={this.minuteRef}
@@ -324,5 +357,19 @@ export class DurationInput extends React.PureComponent<IProps, IState> {
 }
 
 export function getDurationString(seconds: number) {
-    return moment.utc(seconds * 1000).format("HH:mm:ss");
+    function zeroPad(value: number | string) {
+        if (value.toString().length === 1 || value === 0) {
+            return `0${value}`;
+        } else if (!value) {
+            return '00';
+        } else {
+            return value;
+        }
+    }
+
+    let hour = zeroPad(Math.floor(seconds / 3600));
+    let minute = zeroPad(Math.floor((seconds % 3600) / 60));
+    let second = zeroPad(Math.floor(seconds % 60));
+
+    return `${hour}h ${minute}m ${second}s`;
 }

package/app-typescript/components/Input.tsx

@@ -88,7 +88,7 @@ export class Input extends React.Component<IProps, IState> {
             required={this.props.required}
             disabled={this.props.disabled}
             value={this.state.value}
-            invalid={this.state.invalid}
+            invalid={this.props.invalid}
             info={this.props.info}
             maxLength={this.props.maxLength}
             inlineLabel={this.props.inlineLabel}

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

@@ -1,125 +1,51 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
+import { DragDropContext, Droppable, Draggable, DropResult } from "react-beautiful-dnd";
 import { Tooltip } from '../Tooltip';
 import { Button } from '../Button';
-import { Dropdown } from '../Dropdown';
+import { Dropdown, IMenuItem, ISubmenu, IMenuGroup } from '../Dropdown';
 
-interface IPropsItem {
-    start?: React.ReactNode;
-    center?: React.ReactNode;
-    end?: React.ReactNode;
-    action?: React.ReactNode;
-    addItem?: boolean;
-    itemsDropdown?: any;
-    dragAndDrop?: boolean;
-    onClick?(): void;
-}
-
-class TableListItem extends React.PureComponent<IPropsItem> {
-    render() {
-        return (
-            this.props.addItem ?
-            <li className='table-list__item-container'>
-                <div
-                onClick={this.props.onClick}
-                className={`table-list__item ${this.props.onClick && 'table-list__item--clickable'} ${this.props.dragAndDrop && 'table-list__item--draggable'}`}>
-                    <div className='table-list__item-content'>
-                        <div className='table-list__item-content-block'>
-                            {this.props.start && this.props.start}
-                        </div>
-                        <div className='table-list__item-content-block table-list__item-content-block--center'>
-                            {this.props.center && this.props.center}
-                        </div>
-                        <div className='table-list__item-content-block'>
-                            {this.props.end && this.props.end}
-                        </div>
-                    </div>
-                    {this.props.action && <div className='table-list__slide-in-actions'>
-                        {this.props.action}
-                    </div>}
-                </div>
-                <div className='table-list__add-bar-container'>
-                    <Tooltip text='Add item' flow='top' appendToBody={true}>
-                        <div className='table-list__add-bar'>
-                            <Dropdown
-                                items={this.props.itemsDropdown}>
-                                    <Button
-                                    type="primary"
-                                    icon="plus-large"
-                                    text="Add item"
-                                    size="small"
-                                    shape="round"
-                                    iconOnly={true}
-                                    onClick={() => false}
-                                    />
-                            </Dropdown>
-                        </div>
-                    </Tooltip>
-                </div>
-            </li>
-            : <li
-            className={`table-list__item ${this.props.onClick && 'table-list__item--clickable'} ${this.props.dragAndDrop && 'table-list__item--draggable'} table-list__item--margin`}
-            onClick={this.props.onClick}>
-                <div className='table-list__item-content'>
-                    <div className='table-list__item-content-block'>
-                        {this.props.start && this.props.start}
-                    </div>
-                    <div className='table-list__item-content-block table-list__item-content-block--center'>
-                        {this.props.center && this.props.center}
-                    </div>
-                    <div className='table-list__item-content-block'>
-                        {this.props.end && this.props.end}
-                    </div>
-                </div>
-                {this.props.action && <div className='table-list__slide-in-actions'>
-                    {this.props.action}
-                </div>}
-            </li>
-        );
-    }
-}
-
-interface IProps {
+export interface IProps {
     children?: React.ReactNode;
-    array?: Array<IPropsArray>;
+    array: Array<IPropsArrayItem>;
     addItem?: boolean;
     dragAndDrop?: boolean;
-    itemsDropdown?: any;
+    itemsDropdown?: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
     className?: string;
-    onClick?(): void;
+    onDrag?(start: number, end: number): void;
 }
 
-interface IPropsArray {
+export interface IPropsArrayItem {
     start?: React.ReactNode;
     center?: React.ReactNode;
     end?: React.ReactNode;
     action?: React.ReactNode;
+    onClick?(): void;
 }
 
-const reorder = (list, startIndex, endIndex) => {
-  const result = Array.from(list);
-  const [removed] = result.splice(startIndex, 1);
-  result.splice(endIndex, 0, removed);
+const reorder = (list: Array<IPropsArrayItem>, startIndex: number, endIndex: number) => {
+    const result = Array.from(list);
+    const [removed] = result.splice(startIndex, 1);
+    result.splice(endIndex, 0, removed);
 
-  return result;
+    return result;
 };
 
-class TableList extends React.PureComponent<IProps, {items: any}> {
-    constructor(props) {
+class TableList extends React.PureComponent<IProps, { items: Array<IPropsArrayItem>}> {
+    constructor(props: Readonly<IProps>) {
         super(props);
         this.state = {
-          items: [],
+            items: [],
         };
 
         this.onDragEnd = this.onDragEnd.bind(this);
     }
 
     componentDidMount(): void {
-        this.setState({items: this.props.array});
+        this.setState({ items: this.props.array });
     }
 
-    componentDidUpdate(prevProps: Readonly<IProps>, prevState: Readonly<{ items: any; }>, snapshot?: any): void {
+    componentDidUpdate(prevProps: Readonly<IProps>): void {
         if (prevProps.array !== this.props.array) {
             this.setState({
                 items: this.props.array,
@@ -127,7 +53,7 @@ class TableList extends React.PureComponent<IProps, {items: any}> {
         }
     }
 
-    onDragEnd(result) {
+    onDragEnd(result: DropResult) {
         if (!result.destination) {
             return;
         }
@@ -139,66 +65,144 @@ class TableList extends React.PureComponent<IProps, {items: any}> {
         this.setState({
             items,
         });
+
+        return this.props.onDrag ?
+            this.props.onDrag(result.source.index, result.destination.index) : null;
     }
 
     render() {
         let classes = classNames({
-            'table-list' : !this.props.addItem,
+            'table-list': !this.props.addItem,
             [`${this.props.className}`]: this.props.className,
         });
 
         return (
             this.props.array ?
                 this.props.dragAndDrop ?
-                <DragDropContext onDragEnd={this.onDragEnd}>
-                    <Droppable droppableId="droppable">
-                    {(provided, snapshot) => (
-                        <ul
-                        className={classes}
-                        ref={provided.innerRef}
-                        {...provided.droppableProps} >
-                            {this.state.items.map((item, index) => (
-                                <Draggable key={index} draggableId={`${index}`} index={index}>
-                                    {(provided2, snapshot2) => (
-                                        <div
-                                        ref={provided2.innerRef}
-                                        {...provided2.draggableProps}
-                                        {...provided2.dragHandleProps} >
-                                            <TableListItem
-                                            dragAndDrop={this.props.dragAndDrop}
-                                            start={item.start}
-                                            center={item.center}
-                                            end={item.end}
-                                            action={item.action}
-                                            onClick={item.onClick ? item.onClick : false}
-                                            addItem={this.props.addItem}
-                                            itemsDropdown={this.props.itemsDropdown} />
-                                        </div>
-                                    )}
-                                </Draggable>
-                            ))}
-                            {provided.placeholder}
-                        </ul>
-                    )}
-                    </Droppable>
-                </DragDropContext>
-                : <ul className={classes}>
-                    {this.state.items.map((item, index) => (
-                        <TableListItem
-                        key={index}
-                        start={item.start}
-                        center={item.center}
-                        end={item.end}
-                        action={item.action}
-                        onClick={item.onClick ? item.onClick : false}
-                        addItem={this.props.addItem}
-                        itemsDropdown={this.props.itemsDropdown} />
-                    ))}
+                    <DragDropContext onDragEnd={this.onDragEnd}>
+                        <Droppable droppableId="droppable">
+                            {(provided, _snapshot) => (
+                                <ul
+                                    className={classes}
+                                    ref={provided.innerRef}
+                                    {...provided.droppableProps} >
+                                    {this.state.items.map((item: IPropsArrayItem, index: number) => (
+                                        <Draggable key={index} draggableId={`${index}`} index={index}>
+                                            {(provided2, _snapshot2) => (
+                                                <div
+                                                    ref={provided2.innerRef}
+                                                    {...provided2.draggableProps}
+                                                    {...provided2.dragHandleProps} >
+                                                    <TableListItem
+                                                        dragAndDrop={this.props.dragAndDrop}
+                                                        start={item.start}
+                                                        center={item.center}
+                                                        end={item.end}
+                                                        action={item.action}
+                                                        onClick={item.onClick ? item.onClick : undefined}
+                                                        addItem={this.props.addItem}
+                                                        itemsDropdown={this.props.itemsDropdown} />
+                                                </div>
+                                            )}
+                                        </Draggable>
+                                    ))}
+                                    {provided.placeholder}
+                                </ul>
+                            )}
+                        </Droppable>
+                    </DragDropContext>
+                    : <ul className={classes}>
+                        {this.state.items.map((item: IPropsArrayItem, index: number) => (
+                            <TableListItem
+                                key={index}
+                                start={item.start}
+                                center={item.center}
+                                end={item.end}
+                                action={item.action}
+                                onClick={item.onClick ? item.onClick : undefined}
+                                addItem={this.props.addItem}
+                                itemsDropdown={this.props.itemsDropdown} />
+                        ))}
+                    </ul>
+                : this.props.children &&
+                <ul className={classes}>
+                    {this.props.children}
                 </ul>
-            : this.props.children &&
-            <ul className={classes}>
-                {this.props.children}
-            </ul>
+        );
+    }
+}
+
+export interface IPropsItem {
+    start?: React.ReactNode;
+    center?: React.ReactNode;
+    end?: React.ReactNode;
+    action?: React.ReactNode;
+    addItem?: boolean;
+    itemsDropdown?: any;
+    dragAndDrop?: boolean;
+    onClick?(): void;
+}
+
+class TableListItem extends React.PureComponent<IPropsItem> {
+    render() {
+        return (
+            this.props.addItem ?
+                <li className='table-list__item-container'>
+                    <div
+                        onClick={this.props.onClick}
+                        className={`table-list__item ${this.props.onClick && 'table-list__item--clickable'} ${this.props.dragAndDrop && 'table-list__item--draggable'}`}>
+                        <div className='table-list__item-content'>
+                            <div className='table-list__item-content-block'>
+                                {this.props.start && this.props.start}
+                            </div>
+                            <div className='table-list__item-content-block table-list__item-content-block--center'>
+                                {this.props.center && this.props.center}
+                            </div>
+                            <div className='table-list__item-content-block'>
+                                {this.props.end && this.props.end}
+                            </div>
+                        </div>
+                        {this.props.action && <div className='table-list__slide-in-actions'>
+                            {this.props.action}
+                        </div>}
+                    </div>
+                    <div className='table-list__add-bar-container'>
+                        <Tooltip text='Add item' flow='top' appendToBody={true}>
+                            <div className='table-list__add-bar'>
+                                <Dropdown
+                                    items={this.props.itemsDropdown}>
+                                    <Button
+                                        type="primary"
+                                        icon="plus-large"
+                                        text="Add item"
+                                        size="small"
+                                        shape="round"
+                                        iconOnly={true}
+                                        onClick={() => false}
+                                    />
+                                </Dropdown>
+                            </div>
+                        </Tooltip>
+                    </div>
+                </li>
+                : <li
+                    className={`table-list__item ${this.props.onClick && 'table-list__item--clickable'} ${this.props.dragAndDrop && 'table-list__item--draggable'} table-list__item--margin`}
+                    onClick={this.props.onClick}>
+                    <div className='table-list__item-content'>
+                        <div className='table-list__item-content-block'>
+                            {this.props.start && this.props.start}
+                        </div>
+                        <div className='table-list__item-content-block table-list__item-content-block--center'>
+                            {this.props.center && this.props.center}
+                        </div>
+                        <div className='table-list__item-content-block'>
+                            {this.props.end && this.props.end}
+                        </div>
+                    </div>
+                    {this.props.action && <div className='table-list__slide-in-actions'>
+                        {this.props.action}
+                    </div>}
+                </li>
         );
     }
 }

package/app-typescript/components/SearchBar.tsx

@@ -8,7 +8,7 @@ interface IProps {
     placeholder: string;
     focused?: boolean;
     boxed?: boolean;
-    onSubmit?(): void;
+    onSubmit?(value: string | number): void;
 }
 
 interface IState {
@@ -16,6 +16,7 @@ interface IState {
     type: string;
     focused: boolean;
     boxed?: boolean;
+    keyDown?: boolean;
 }
 
 export class SearchBar extends React.PureComponent<IProps, IState> {
@@ -27,6 +28,7 @@ export class SearchBar extends React.PureComponent<IProps, IState> {
             focused: this.props.focused ? this.props.focused : false,
             type: this.props.type ? this.props.type : 'expanded',
             boxed: this.props.boxed ? this.props.boxed : false,
+            keyDown: false,
         };
         this.inputRef = React.createRef();
     }
@@ -57,20 +59,37 @@ export class SearchBar extends React.PureComponent<IProps, IState> {
                 <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})} />
+                className="sd-searchbar__input"
+                type="text"
+                placeholder={this.props.placeholder}
+                value={this.state.inputValue}
+                onKeyPress={(event) => {
+                    if (event.key === 'Enter') {
+                        if (this.props.onSubmit) {
+                            this.props.onSubmit(this.state.inputValue);
+                        }
+                        this.setState({keyDown: true});
+                    }
+                }}
+                onKeyUp={(event) => {
+                    if (event.key === 'Enter') {
+                        this.setState({keyDown: false});
+                    }
+                }}
+                onChange={(event) => this.setState({inputValue: event.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}>
+                className={`sd-searchbar__search-btn ${this.state.keyDown ? 'sd-searchbar__search-btn--active' : ''}`}
+                onClick={() => {
+                    if (this.props.onSubmit) {
+                        this.props.onSubmit(this.state.inputValue);
+                    }
+                }}>
                     <Icon name='chevron-right-thin' />
                 </button>
             </div>

package/app-typescript/index.ts

@@ -18,6 +18,7 @@ export { IconButton } from './components/IconButton';
 export { IconLabel } from './components/IconLabel';
 export { Tooltip } from './components/Tooltip';
 export { DurationInput } from './components/DurationInput';
+export { getDurationString } from './components/DurationInput';
 export { DatePicker } from './components/DatePicker';
 export { DatePickerISO } from './components/DatePicker';
 export { DatePickerLocaleSettings } from './components/DatePicker';
@@ -87,6 +88,7 @@ export { Time } from './components/Text/Time';
 export { Heading } from './components/Text/Heading';
 export { BottomNav } from './components/Navigation/BottomNav';
 export { TreeSelect } from './components/TreeSelect';
+export { TableList, TableListItem } from './components/Lists/TableList';
 export { ContentListItem } from './components/Lists/ContentList';
 
 // declare non-typescript exports to prevent errors