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

package/app-typescript/components/TreeSelect.tsx

@@ -0,0 +1,330 @@
+import { any } from "prop-types";
+import * as React from "react";
+import { Icon } from "./Icon";
+
+interface IState<T> {
+    value?: Array<T>;
+    options?: Array<T>;
+    firstBranchOptions?: Array<T>;          // to return on first branch in dropdown
+    getLabel?: string;                      // label from props
+    getMultilevelArray?: string;            // array from props
+    openDropdown?: boolean;                 // open/close dropdown
+    activeTree?: Array<any>;                // for filtered array
+    filterArr?: Array<T>;                   // for filtered array
+    searchFieldValue?: string;              // filter value of input
+    buttonTree?: Array<any>;                // array of button (for backButton)
+    buttonValue?: Array<any>;               // button for name of category
+    buttonMouseEvent?: boolean;             // valueButton hover
+    selectBranchWithChildren?: boolean;
+}
+
+interface IProps<T> {
+    value?: Array<T>;
+    options: Array<T>;
+    getLabel: string;
+    getMultilevelArray: string;
+    selectBranchWithChildren?: boolean;
+    readonly?: boolean;
+    width?: string;
+    optionTemplate?(item: T): React.ComponentType<T> | JSX.Element;
+    valueTemplate?(item: T): React.ComponentType<T> | JSX.Element;
+    onChange(): void;
+}
+
+export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
+    private dropdownRef: any;
+    private openDropdownRef: any;
+
+    constructor(props: IProps<T>) {
+        super(props);
+        this.state = {
+            value: this.props.value ? this.props.value : [],
+            options: this.props.options ? this.props.options : [],
+            firstBranchOptions: this.props.options ? this.props.options : [],
+            activeTree: [],
+            filterArr: [],
+            searchFieldValue: '',
+            buttonTree: [],
+            buttonValue: [],
+            buttonMouseEvent: false,
+            openDropdown: false,
+        };
+
+        this.removeClick = this.removeClick.bind(this);
+        this.handleMultiLevel = this.handleMultiLevel.bind(this);
+        this.backButton = this.backButton.bind(this);
+        this.handleButton = this.handleButton.bind(this);
+        this.backButtonValue = this.backButtonValue.bind(this);
+        this.dropdownRef = React.createRef();
+        this.openDropdownRef = React.createRef();
+    }
+
+    removeClick(i: number) {
+        let newTags = this.state.value;
+        newTags.splice(i, 1);
+
+        this.setState({
+            value: newTags,
+        });
+        this.props.onChange();
+    }
+
+    handleMultiLevel(event, item) {
+        if (item[this.props.getMultilevelArray]) {
+            this.setState({
+                activeTree: [...this.state.activeTree, this.state.options],
+                options: item[this.props.getMultilevelArray],
+            });
+        }
+    }
+
+    handleButton(event, item) {
+        this.setState({
+            buttonTree: [...this.state.buttonTree, this.state.buttonValue],
+            buttonValue: item,
+        });
+    }
+
+    handleValue(event, item) {
+            let checkItem = this.state.value.find((valueItem: any) => {
+                return valueItem === item;
+            });
+
+            if (!checkItem) {
+                this.setState({value: [...this.state.value, item]});
+            }
+
+            if (!event.ctrlKey) {
+                this.setState({options: this.state.firstBranchOptions, activeTree: [], openDropdown: false});
+            }
+            this.setState({buttonMouseEvent: false});
+    }
+
+    handleBranchValue(event, item) {
+        if (this.props.selectBranchWithChildren) {
+
+            let checkItem = this.state.value.find((valueItem: any) => {
+                return valueItem === item;
+            });
+
+            if (!checkItem) {
+                this.setState({value: [...this.state.value, item]});
+            }
+
+            if (!event.ctrlKey) {
+                this.setState({options: this.state.firstBranchOptions, activeTree: [], openDropdown: false});
+            }
+            this.setState({buttonMouseEvent: false});
+        }
+    }
+
+    backButton = () => {
+        if (this.state.activeTree.length > 0) {
+            this.setState({
+                options: this.state.activeTree.pop(),
+            });
+        } else {
+            return false;
+        }
+    }
+
+    backButtonValue = () => {
+        this.setState({
+            buttonValue: this.state.buttonTree.pop(),
+        });
+    }
+
+    recursion(arr) {
+        if (this.props.selectBranchWithChildren) {
+            arr.map((item: any) => {
+                this.state.filterArr.push(item);
+                if (item[this.props.getMultilevelArray]) {
+                    this.recursion(item[this.props.getMultilevelArray]);
+                }
+            });
+        } else {
+            arr.map((item: any) => {
+                if (!item[this.props.getMultilevelArray]) {
+                    this.state.filterArr.push(item);
+                } else {
+                    this.recursion(item[this.props.getMultilevelArray]);
+                }
+            });
+        }
+    }
+
+    componentDidMount = () => {
+        this.recursion(this.state.options);
+        document.addEventListener("mousedown", (event) => {
+            if ((this.dropdownRef.current && !this.dropdownRef.current.contains(event.target))
+            && (this.openDropdownRef.current && !this.openDropdownRef.current.contains(event.target))) {
+                this.setState({openDropdown: false});
+            }
+        });
+    }
+
+    componentDidUpdate(prevProps: Readonly<IProps<T>>, prevState: Readonly<IState<T>>): void {
+        if (prevState.value !== this.state.value) {
+            this.props.onChange();
+        } else if (prevProps.value !== this.props.value) {
+            this.props.onChange();
+        }
+    }
+
+    render() {
+
+        return (
+            <div className="tags-input tags-input--multiselect">
+                <div className="tags-input__tags">
+                    {this.props.readonly
+                    || <button ref={this.openDropdownRef}
+                    className="tags-input__add-button"
+                    onClick={() => this.setState({openDropdown: !this.state.openDropdown})}>
+                        <i className="icon-plus-large"></i>
+                    </button>}
+                        <ul className="tags-input__tag-list">
+                            {this.state.value.map((item, i) => {
+                                return <React.Fragment key={i}>
+                                    <li
+                                    className={"tags-input__tag-item tags-input__tag-item-multiselect"
+                                    + (this.props.readonly ? ' tags-input__tag-item-readonly' : '')}
+                                    onClick={(event) => this.props.readonly || this.removeClick(i)}>
+                                        <span className="tags-input__helper-box">
+                                            {this.props.valueTemplate
+                                            ? this.props.valueTemplate(item)
+                                            : <span>{item[this.props.getLabel]}</span>}
+                                            {this.props.readonly
+                                            || <span className="tags-input__remove-button">
+                                                <i className="icon-close-small"></i>
+                                            </span>}
+                                        </span>
+                                    </li>
+                                </React.Fragment>;
+                            })}
+                        </ul>
+                </div>
+
+                {this.state.openDropdown &&
+                <div className={"autocomplete autocomplete-multiselect" + (this.props.width === 'medium' ? ' autocomplete-multiselect-width' : '')} ref={this.dropdownRef}>
+                    <div className='autocomplete__header'>
+                        <div className="autocomplete__icon" onClick={() => {
+                        this.backButtonValue();
+                        this.backButton();
+                        }}>
+                            {this.state.activeTree.length > 0
+                            ? <Icon name="arrow-left" className="arrow-left"></Icon>
+                            : <Icon name="search" className="search"></Icon>}
+                        </div>
+                        <div className='autocomplete__filter'>
+                            {this.state.activeTree.length > 0
+                                ? <button
+                                className={'autocomplete__button' + (this.props.selectBranchWithChildren ? ' autocomplete__button--multiselect' : '')}
+                                onMouseOver={() => this.setState({buttonMouseEvent: true})}
+                                onMouseOut={() => this.setState({buttonMouseEvent: false})}
+                                value={this.state.buttonValue}
+                                onClick={(event) => this.handleBranchValue(event, this.state.buttonValue)}>
+                                    {this.state.buttonMouseEvent && this.props.selectBranchWithChildren ? 'Choose entire category' : this.state.buttonValue[this.props.getLabel]}
+                                </button>
+                                : <input
+                                type="text"
+                                className="autocomplete__input"
+                                ref={(input: any) => input && input.focus()}
+                                value={this.state.searchFieldValue}
+                                onChange={(event) => {
+                                    this.setState({searchFieldValue: event.target.value});
+                                }}
+                                />
+                            }
+                        </div>
+                    </div>
+                    <ul className="suggestion-list suggestion-list--multi-select">
+                        {this.state.searchFieldValue === ''
+                            ? this.state.options.map((option, i) => {
+                                return (
+                                    <li key={i}
+                                    className={`suggestion-item suggestion-item--multi-select`}
+                                    onClick={(event) => {
+                                        event.preventDefault();
+                                        event.stopPropagation();
+                                        if (option[this.props.getMultilevelArray]) {
+                                            this.handleButton(event, option);
+                                            this.handleMultiLevel(event, option);
+                                            if (event.altKey) {
+                                                if (this.props.selectBranchWithChildren) {
+                                                    let filteredItems = option[this.props.getMultilevelArray]
+                                                    .filter((item) => {
+                                                        if (!this.state.value.includes(item)) {
+                                                            return item;
+                                                        }
+                                                    });
+                                                    this.setState({
+                                                        value: [...this.state.value, ...filteredItems],
+                                                        options: this.state.firstBranchOptions,
+                                                        openDropdown: false,
+                                                        activeTree: [],
+                                                    });
+                                                } else {
+                                                    let filteredItems = option[this.props.getMultilevelArray]
+                                                    .filter((item) => {
+                                                        if (!this.state.value.includes(item)
+                                                        && !item[this.props.getMultilevelArray]) {
+                                                            return item;
+                                                        }
+                                                    });
+                                                    if (filteredItems.length > 0) {
+                                                        this.setState({
+                                                            value: [...this.state.value, ...filteredItems],
+                                                            options: this.state.firstBranchOptions,
+                                                            openDropdown: false,
+                                                            activeTree: [],
+                                                        });
+                                                    }
+                                                }
+                                            }
+                                        } else {
+                                            this.handleValue(event, option);
+                                            if (!event.ctrlKey) {
+                                                this.setState({openDropdown: false});
+                                            }
+                                        }
+                                    }}>
+                                        {this.props.optionTemplate
+                                        ? this.props.optionTemplate(option)
+                                        : <span className={this.state.value.includes(option) ? 'suggestion-item--disabled' : null}>
+                                            {option[this.props.getLabel]}
+                                        </span>}
+                                        {option[this.props.getMultilevelArray] && <span className="suggestion-item__icon">
+                                            <Icon name="chevron-right-thin"></Icon>
+                                        </span>}
+                                    </li>
+                                );
+                            })
+                            : this.state.filterArr.filter((item: any) => {
+                                if (this.state.searchFieldValue) {
+                                    if (item[this.props.getLabel]
+                                    .toLowerCase().includes(this.state.searchFieldValue.toLowerCase())) {
+                                        return item;
+                                    }
+                                } else {
+                                    return item;
+                                }
+                            }).map((item, i) => {
+                                return <li key={i}
+                                className={`suggestion-item suggestion-item--multi-select`}
+                                onClick={(event) => {
+                                    this.handleValue(event, item);
+                                }}>
+                                    <span
+                                    className={this.state.value.includes(item)
+                                    ? 'suggestion-item--disabled' : null}>
+                                        {item[this.props.getLabel]}
+                                    </span>
+                                </li>;
+                            })
+                        }
+                    </ul>
+                </div>}
+            </div>
+        );
+    }
+}

package/app-typescript/index.ts

@@ -13,6 +13,7 @@ export { Alert } from './components/Alert';
 export { AvatarWrapper } from './components/Avatar';
 export { AvatarContentText } from './components/Avatar';
 export { AvatarContentImage } from './components/Avatar';
+export { AvatarGroup } from './components/Avatar';
 export { IconButton } from './components/IconButton';
 export { IconLabel } from './components/IconLabel';
 export { Tooltip } from './components/Tooltip';
@@ -25,21 +26,22 @@ export { Switch } from './components/Switch';
 export { SwitchGroup } from './components/SwitchGroup';
 export { ButtonGroup } from './components/ButtonGroup';
 export { Loader } from './components/Loader';
-export { Radio } from './components/Radio';
+export { RadioGroup } from './components/RadioGroup';
 export { Checkbox } from './components/Checkbox';
-export { RadioButton } from './components/RadioButton';
+export { RadioButtonGroup } from './components/RadioButtonGroup';
 export { CheckboxButton } from './components/CheckboxButton';
 export { CheckGroup } from './components/CheckGroup';
 export { CheckButtonGroup } from './components/CheckButtonGroup';
 export { NavButton } from './components/NavButton';
 export { Tab, TabList } from './components/TabList';
 export { LeftMenu } from './components/LeftMenu';
-export { SubNav } from './components/SubNav';
+export { SubNav, SubNavDivider } from './components/SubNav';
 export { SlidingToolbar } from './components/SlidingToolbar';
 export { StrechBar } from './components/StrechBar';
 export { PropsList, Prop } from './components/PropsList';
 export { Icon } from './components/Icon';
 export { Divider } from './components/Divider';
+export { ContentDivider } from './components/ContentDivider';
 export { HeadingText } from './components/HeadingText';
 export { DropdownFirst } from './components/DropdownFirst';
 export { DropdownItem } from './components/DropdownFirst';
@@ -47,7 +49,7 @@ export { DropdownLabel } from './components/DropdownFirst';
 export { DropdownDivider } from './components/DropdownFirst';
 export { Dropdown } from './components/Dropdown';
 export { Tag } from './components/Tag';
-export { TabItem, TabPanel, TabContent, TabNav } from './components/TabCustom';
+export { TabLabel, TabPanel, TabContent, Tabs } from './components/TabCustom';
 export { EmptyState } from './components/EmptyState';
 export { Autocomplete } from './components/Autocomplete';
 export { DonutChart } from './components/DonutChart';
@@ -65,9 +67,22 @@ export { Menu } from './components/Menu';
 export { ToggleBox } from './components/Togglebox';
 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';
+export * from './components/Navigation';
+export * from './components/Lists';
 
 export { Skeleton } from './components/Skeleton';
 export { ListItemLoader } from './components/ListItemLoader';
+export { Spinner, LoadingOverlay } from './components/Spinner';
+export { Text } from './components/Text/Text';
+export { Heading } from './components/Text/Heading';
 
 // declare non-typescript exports to prevent errors
 export declare const ToggleBoxNext: any;

package/dist/components/basic-grid.html

@@ -93,7 +93,7 @@
         <div class="docs-page__window-content">
             <div class="docs-page__code-example">
                 <p class="docs-page__paragraph">// Boxed grid example with six columns.</p>
-                <div class="flex-grid flex-grid--boxed flex-grid--wrap-items flex-grid--small-6">
+                <div class="flex-grid flex-grid--boxed flex-grid--wrap-items flex-grid--small-1 flex-grid--medium-3 flex-grid--large-4 flex-grid--xlarge-6">
                     <div class="flex-grid__item">1</div>
                     <div class="flex-grid__item">2</div>
                     <div class="flex-grid__item">3</div>

package/dist/components/checkbox.html

@@ -45,7 +45,7 @@
                     <sd-check ng-model="def6" label-position="inside" data-icon="th-list">Button style with icon</sd-check>
                     <sd-check ng-model="def7" label-position="inside" data-icon="th" ng-checked="true">I have an icon!</sd-check>
                     <sd-check ng-model="def8" label-position="inside" data-icon="th-large">Yeah, me too!</sd-check>
-                    <sd-check ng-model="def9" data-icon="star" disabled>I have an icon :) </sd-check>
+                    <sd-check ng-model="def9" data-icon="star" disabled="disabled">I have an icon :) </sd-check>
                 </div>
             </div>
 

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>