superdesk-ui-framework 3.0.2 → 3.0.4

package/app/styles/app.scss

@@ -109,6 +109,7 @@
 @import 'primereact/pr-dialog';
 @import 'primereact/pr-menu';
 @import 'primereact/pr-skeleton';
+@import 'primereact/pr-tag-input';
 
 // React Components
-@import 'avatar';
+@import 'avatar';

package/app/styles/editor/_editor-themes.scss

@@ -257,6 +257,11 @@ $body-font-size: (
     min-height: 9.2rem;
 }
 
+.theme-editor {
+    background-color: var(--sd-editor-colour__main-bg);
+    color: var(--sd-editor-colour__txt);
+}
+
 .theme-preview {
     margin: 0 -2rem -2rem -2rem;
     padding: 2rem;
@@ -269,7 +274,7 @@ $body-font-size: (
     &:hover {
         .theme-preview__label {
             opacity: 1;
-        }  
+        }
     }
     @each $name, $font in $theme-font-list {
         &.sd-editor--font-#{$name} {

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

@@ -186,7 +186,7 @@
                 -webkit-appearance: none;
             }
             ::-webkit-color-swatch-wrapper {
-                padding: 0;	
+                padding: 0;
             }
         }
     }
@@ -411,7 +411,7 @@
         .sd-line-input__label {
             line-height: 140%;
         }
-    } 
+    }
 
     &.sd-line-input--required {
         .sd-line-input__label::after {
@@ -876,7 +876,7 @@
                 box-shadow: none;
             }
             input {
-                &.duration-input, &.duration-input:hover, &.duration-input:focus {  
+                &.duration-input, &.duration-input:hover, &.duration-input:focus {
                     opacity: 0.5;
                     //background-color: var(--color-input-bg);
                     //border-bottom: 1px dotted var(--color-input-border);
@@ -970,12 +970,12 @@
                 background-color: transparent;
             }
         }
-    
+
         &.sd-input--disabled {
             input,
             textarea {
-                &.sd-input__input, 
-                &.sd-input__input:hover, 
+                &.sd-input__input,
+                &.sd-input__input:hover,
                 &.sd-input__input:focus {
                     opacity: 0.5;
                     background-color: transparent;
@@ -1012,7 +1012,7 @@
                 pointer-events: none;
             }
         }
-    
+
         &.sd-input--invalid {
             input, textarea {
                 &.sd-input__input {
@@ -1064,7 +1064,7 @@
             }
         }
     }
-    
+
 }
 
 /////////////////  -------------------- Duration & Time-Date input ---------------------  /////////////////

package/app/styles/layout/_editor.scss

@@ -282,6 +282,9 @@
     grid-row: authoringBody;
 
     background-color: var(--sd-colour-panel-bg--000);
+}
+
+.sd-editor-content__authoring-body-padding {
     padding: 3.2rem 4rem 5.2rem 4rem;
 }
 
@@ -332,7 +335,7 @@
         background-color: transparent;
         cursor: pointer;
     }
-    
+
     ::-webkit-scrollbar-thumb {
         background: var(--sd-colour__webkit-scrollbar-thumb);
     }
@@ -401,4 +404,4 @@
         border-color: var(--sd-colour-interactive--alpha-50);
         box-shadow: inset 0 0 0 4px var(--sd-colour-interactive--alpha-20);
     }
-}
+}

package/app/styles/primereact/_pr-tag-input.scss

@@ -0,0 +1,61 @@
+.p-chips {
+    font-size: 14px;
+    font-weight: normal;
+    height: 100%;
+}
+
+.p-chips-token	{
+    @include tag-label;
+    transition: background-color .2s ease-out, color .1s ease-out, opacity .1s ease-out;
+    background: $tag-label-BG-default;
+    color: currentColor;
+    padding: 5px;
+    border-left: 20px;
+    border-radius: 30px;
+
+    &.selected {
+        background-color: var(--sd-colour-interactive--alpha-70);
+    }
+}
+
+.p-chips-token-icon {
+    color: var(--color-text-lighter);
+    font-size: 20px;
+    &:hover {
+        cursor: pointer;
+        color: var(--color-text-light);
+    }
+}
+
+.p-chips-token-label {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin: 2px;
+    padding: 2px 2px 2px 3px;
+}
+
+.p-chips-multiple-container {
+    padding: 2px 0;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: $sd-base-increment / 8;
+    width: 100%;
+    transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
+    border-radius: 2px 2px 0 0;
+    font-size: 13px;
+}
+
+.tags-input__padding-disabled {
+    span {
+        padding-left: 0;
+        padding-inline: 4px;
+    }
+}
+
+.p-chips-input-token {
+    font-size: 14px;
+    margin: 5px;
+}

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

@@ -1,13 +1,20 @@
 import * as React from 'react';
+import classNames from 'classnames';
 
 interface IProps {
     children?: React.ReactNode;
+    noPadding?: boolean;
 }
 
 export class AuthoringInnerBody extends React.PureComponent<IProps> {
     render() {
         return (
-            <article className="sd-editor-content__authoring-body">
+            <article
+                className={classNames(
+                    'sd-editor-content__authoring-body',
+                    {'sd-editor-content__authoring-body-padding': this.props.noPadding === false},
+                )}
+            >
                 {this.props.children}
             </article>
         );

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

@@ -18,6 +18,7 @@ interface IProps {
     headerCollapsed?: boolean;
     headerPadding?: 'small' | 'medium' | 'large';
     toolbarCustom?: boolean;
+    noPaddingForContent?: boolean;
 }
 
 export class AuthoringMain extends React.PureComponent<IProps> {
@@ -42,7 +43,7 @@ export class AuthoringMain extends React.PureComponent<IProps> {
                             {this.props.authoringBookmarks}
                         </AuthorinInnerSideBar>
                     )}
-                    <AuthoringInnerBody>
+                    <AuthoringInnerBody noPadding={this.props.noPaddingForContent}>
                         {this.props.children}
                     </AuthoringInnerBody>
                 </AuthoringMainContent>

package/app-typescript/components/MultiSelect.tsx

@@ -18,6 +18,7 @@ interface IProps<T> {
     filter?: boolean;
     showClear?: boolean;
     showSelectAll?: boolean;
+    zIndex?: number;
     itemTemplate?(item: any): JSX.Element | undefined;
     selectedItemTemplate?(value: any): JSX.Element | undefined;
     onChange(newValue: Array<T>): void;
@@ -77,6 +78,7 @@ export class MultiSelect<T> extends React.Component<IProps<T>, IState<T>> {
                 options={this.props.options}
                 onChange={({value}) => this.props.onChange(value)}
                 display="chip"
+                zIndex={this.props.zIndex}
                 filter={this.props.filter}
                 filterBy={this.props.optionLabel}
                 appendTo={document.body}

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

@@ -1,49 +1,46 @@
 import * as React from 'react';
 import { Icon } from '../Icon';
 import { Badge } from '../Badge';
+import classNames from 'classnames';
 
 interface IProps {
+    activeTab: string | null;
+    onActiveTabChange(val: string | null): void;
     items: Array<ISideBarTab | 'divider'>;
     side?: 'none' | 'left' | 'right';
 }
 
 export interface ISideBarTab {
+    id: string;
     icon: string;
     size: 'small' | 'big'; // defaults to 'small'
     tooltip?: string;
-    active?: boolean;
     badgeValue?: string;
-    onClick(event: React.MouseEvent<HTMLButtonElement, MouseEvent>): void;
+    onClick(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>): void;
 }
 
-interface IState {
-    index: number;
-    closeIndex: number;
-}
-
-export class SideBarTabs extends React.PureComponent<IProps, IState> {
+export class SideBarTabs extends React.PureComponent<IProps> {
     constructor(props: IProps) {
         super(props);
-        this.state = {
-            index: -1,
-            closeIndex: -1,
-        };
+
         this.handleClick = this.handleClick.bind(this);
     }
 
-    handleClick(item: ISideBarTab, indexNumber: number, event: any) {
-        this.setState({
-            index: indexNumber,
-        });
-        if (this.state.index === indexNumber) {
-            this.setState({
-                closeIndex: indexNumber,
-                index: -1,
-            });
+    componentDidMount(): void {
+        const activeItem = this.props.items.find((item) => item !== 'divider' && item.id === this.props.activeTab);
+
+        if (activeItem != null && activeItem !== 'divider') {
+            this.props.onActiveTabChange(activeItem.id);
         }
+    }
 
-        item.active = !item.active;
-        item.onClick(event);
+    handleClick(item: ISideBarTab, event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) {
+        if (this.props.activeTab === item.id) {
+            this.props.onActiveTabChange(null);
+        } else {
+            this.props.onActiveTabChange(item.id);
+            item.onClick(event);
+        }
     }
 
     render() {
@@ -57,23 +54,24 @@ export class SideBarTabs extends React.PureComponent<IProps, IState> {
                             );
                         } else {
                             return (
-                                <li key={index} data-sd-tooltip={item['tooltip']} data-flow='left'>
-                                    <a role='button' aria-label={item['tooltip']}
-                                        className={'sd-sidetab-menu__btn' + (item['active'] ?
-                                            ' 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
-                                        }
+                                <li key={index} data-sd-tooltip={item.tooltip} data-flow='left'>
+                                    <a
+                                        role='button'
+                                        aria-label={item.tooltip}
+                                        className={classNames(
+                                            'sd-sidetab-menu__btn',
+                                            {'sd-sidetab-menu__btn--active': item.id === this.props.activeTab},
+                                        )}
+                                        onClick={(event) => this.handleClick(item, event)}
+                                    >
+                                        {item.badgeValue != null && (
+                                            <Badge text={item['badgeValue']} type='primary' />
+                                        )}
 
                                         <span className='sd-sidetab-menu__main-icon '>
                                             <Icon size={item['size']} name={item['icon']} />
                                         </span>
+
                                         <i className='sd-sidetab-menu__helper-icon icon-close-small'></i>
                                     </a>
                                 </li>

package/app-typescript/components/TagInput.tsx

@@ -1,237 +1,53 @@
 import * as React from 'react';
-import classNames from 'classnames';
-import { createPopper } from '@popperjs/core';
-import { clone } from 'lodash';
-
-//   work in progress from scratch miss:
-//  1. css for selected item
-//  2. category select
-//  3. json as items
-interface ITagInput {
-    items?: Array<any>;
-    label: string;
-    freetype?: boolean;
+import { Chips } from '@superdesk/primereact/chips';
+import {InputWrapper} from './Form';
+import nextId from "react-id-generator";
+
+interface IProps {
+    value: Array<string>;
+    onChange(value: Array<string>): void;
+    placeholder: string;
+    invalid?: boolean;
+    inlineLabel?: boolean;
+    labelHidden?: boolean;
+    tabindex?: number;
+    fullWidth?: boolean;
+    info?: string;
+    error?: string;
+    required?: boolean;
+    label?: string;
+    disabled?: boolean;
 }
 
-export const TagInput = ({ items, label, freetype }: ITagInput) => {
-    const [tags, setTags] = React.useState<Array<any>>([]);
-    const [openSuggestion, setOpenSuggestion] = React.useState(false);
-    const inputRef = React.useRef(null);
-    const refTagInput = React.useRef(null);
-    const refSuggestions = React.useRef(null);
-
-    // number for select
-    const [selectNumber, setSelectNumber] = React.useState(-1);
-
-    // autocomplete
-    const [suggestions, setSuggestions] = React.useState<Array<any>>([]);
-
-    // focused
-    const [focus, setFocus] = React.useState(false);
-
-    // invalid-tag
-    const [invalid, setInvalid] = React.useState(false);
-
-    React.useEffect(() => {
-        let menuRef = refSuggestions.current;
-        let toggleRef = refTagInput.current;
-        if (toggleRef && menuRef) {
-            createPopper(toggleRef, menuRef, {
-                placement: 'bottom-start',
-            });
-        }
-    }, [suggestions]);
-
-    function inputKeyDown(e: any) {
-        const val = e.target.value;
-        if (val.length > 1) {
-            setInvalid(false);
-        }
-        if (e.key === 'Enter' && val) {
-            if (val.length > 2 && freetype) {
-                setInvalid(false);
-                if (checkTag(val) === 0) {
-                    setTags((tag) => tag.concat(val));
-                    let inputRefVariable: any = inputRef.current;
-                    if (inputRefVariable) {
-                        inputRefVariable.value = null;
-                    }
-                }
-            } else {
-                setInvalid(true);
-            }
-        } else if (e.key === 'Backspace' && !val) {
-            setSelectNumber(tags.length - 1);
-            if (selectNumber !== -1) {
-                removeTag(selectNumber);
-                setSelectNumber(-1);
-            }
-        } else if (e.key === 'ArrowLeft' && !val) {
-            if (selectNumber > 0) {
-                setSelectNumber(selectNumber - 1);
-            } else {
-                setSelectNumber(tags.length - 1);
-            }
-        } else if (e.key === 'ArrowRight' && !val) {
-            if (selectNumber !== -1 && selectNumber < tags.length - 1) {
-                setSelectNumber(selectNumber + 1);
-            } else {
-                setSelectNumber(0);
-            }
-        }
-    }
-
-    function checkTag(newTag: any) {
-        let count = 0;
-        tags.forEach(function(tag) {
-            if (tag === newTag) {
-                count = 1;
-            }
-        });
-        return count;
-    }
-
-    function removeTag(i: number) {
-        let newTags = clone(tags);
-        newTags.splice(i, 1);
-        setTags(newTags);
-    }
-
-    function onTextChanged(e: any) {
-        if (items) {
-            const value = e.target.value;
-            let newSuggestions = [];
-            if (value.length > 1) {
-                const regex = new RegExp(`^${value}`, 'i');
-                newSuggestions = items.sort().filter((v) => regex.test(v));
-            }
-            setSuggestions(newSuggestions);
-        }
-    }
-
-    function addTag(item: any) {
-        if (checkTag(item) === 0) {
-            setTags((tag) => tag.concat(item));
-            let inputRefVariable: any = inputRef.current;
-            if (inputRefVariable) {
-                inputRefVariable.value = null;
-            }
-        }
-        setSuggestions([]);
-    }
-
-    function toggleSuggestions() {
-        if (!openSuggestion) {
-            setOpenSuggestion(true);
-            document.addEventListener('click', closeSuggestions);
-        } else {
-            setOpenSuggestion(false);
-        }
-    }
-
-    function closeSuggestions() {
-        document.removeEventListener('click', closeSuggestions);
-        setOpenSuggestion(false);
-    }
-
-    function toggleFocus() {
-        if (!focus) {
-            setFocus(true);
-            document.addEventListener('click', removeFocus);
-        } else {
-            setFocus(false);
-        }
+export class TagInput extends React.Component<IProps> {
+    private htmlId: string = nextId();
+
+    render() {
+        const {onChange, value, placeholder} = this.props;
+
+        return (
+            <InputWrapper
+            label={this.props.label}
+            error={this.props.error}
+            required={this.props.required}
+            disabled={this.props.disabled}
+            invalid={this.props.invalid}
+            info={this.props.info}
+            inlineLabel={this.props.inlineLabel}
+            labelHidden={this.props.labelHidden}
+            fullWidth={this.props.fullWidth}
+            htmlId={this.htmlId}
+            tabindex={this.props.tabindex}>
+                <Chips
+                    className={`tags-input--multi-select sd-input__input ${this.props.disabled ? ' tags-input__padding-disabled' : ''}`}
+                    allowDuplicate={false}
+                    separator=","
+                    onChange={(event) => onChange(event.value)}
+                    value={value}
+                    placeholder={placeholder}
+                    disabled={this.props.disabled}
+                />
+            </InputWrapper>
+        );
     }
-
-    function removeFocus() {
-        document.removeEventListener('click', removeFocus);
-        setFocus(false);
-    }
-
-    function renderSuggestions() {
-        if (openSuggestion) {
-            return (
-                <div className='autocomplete' ref={refSuggestions}>
-                    <ul className='suggestion-list' >
-                        {suggestions.length !== 0 ? (
-                            suggestions.map((item, index) =>
-                                <li className={'suggestion-item'}
-                                    onClick={() => addTag(item)}
-                                    key={index}>
-                                    {item}
-                                </li>,
-                            )
-                        ) : (
-                                items?.map((item, index) =>
-                                    <li className={'suggestion-item'}
-                                        onClick={() => addTag(item)}
-                                        key={index}>
-                                        {item}
-                                    </li>,
-                                )
-                            )}
-                    </ul>
-                </div>
-            );
-        } else if (suggestions.length === 0) {
-            return null;
-        } else {
-            return (
-                <div className='autocomplete' ref={refSuggestions}>
-                    <ul className='suggestion-list' >
-                        {suggestions.map((item, index) =>
-                            <li className={'suggestion-item'}
-                                onClick={() => addTag(item)}
-                                key={index}>
-                                {item}
-                            </li>,
-                        )}
-                    </ul>
-                </div>
-            );
-        }
-    }
-
-    let classes = classNames('tags-input__tags', {
-        'focused': focus,
-        'tag-input__invalid-tag': invalid,
-    });
-
-    return (
-        <div className='sd-tag-input' data-label={label} >
-            <label className='tags-input__label'>{label}</label>
-            <div className='tags-input' ref={refTagInput}>
-                <div className={classes} >
-                    {items ?
-                        <button className="tags-input__add-button"
-                            onClick={toggleSuggestions}>
-                            <i className="icon-plus-large"></i>
-                        </button> : null}
-                    <ul className='tags-input__tag-list'>
-                        {tags.map((tag, i) => {
-                            return (
-                                <li className={'tags-input__tag-item' + (selectNumber === i ? ' selected' : '')}
-                                    key={i}>
-                                    {tag}
-                                    <a type='button' className='tags-input__remove-button' onClick={() => removeTag(i)}>
-                                        <i className='icon-close-small'></i>
-                                    </a>
-                                </li>
-                            );
-                        })}
-                        <li className='input-tag__tags__input'>
-                            <input
-                                type='text'
-                                className={'tags-input__input' + (invalid ? ' invalid-tag' : '')}
-                                onChange={onTextChanged}
-                                ref={inputRef}
-                                onKeyDown={inputKeyDown}
-                                onClick={toggleFocus} />
-                        </li>
-                    </ul>
-                </div>
-                {items ? renderSuggestions() : null}
-            </div>
-        </div>
-    );
-};
+}

package/app-typescript/index.ts

@@ -57,8 +57,6 @@ export { Autocomplete } from './components/Autocomplete';
 export { DonutChart } from './components/DonutChart';
 export { Carousel } from './components/Carousel';
 export { Modal } from './components/Modal';
-export { TagInput } from './components/TagInput';
-export { TagInputTest } from './components/TagInputTest';
 export { GridList } from './components/GridList';
 export { GridItem, GridItemContent, GridItemMedia, GridItemFooter, GridItemContentBlock,
     GridItemTime, GridItemTitle, GridItemText, GridItemSlug, GridItemFooterBlock,