superdesk-ui-framework 3.0.42 → 3.0.44

package/app-typescript/components/TreeSelect/TreeSelectItem.tsx

@@ -0,0 +1,84 @@
+import * as React from "react";
+import { Icon } from "../Icon";
+import {getTextColor} from '../Label';
+import {ITreeNode} from './TreeSelect';
+
+export function getPrefixedItemId(id: string) {
+    return id + '-focus';
+}
+
+interface IProps<T> {
+    option: ITreeNode<T>;
+    selectedItem: boolean;
+    allowMultiple?: boolean;
+    handleTree(event: React.MouseEvent<HTMLLIElement, MouseEvent>, option: ITreeNode<T>): any;
+    getLabel(item: T): string;
+    getId(item: T): string;
+    getBackgroundColor?(item: T): string;
+    getBorderColor?(item: T): string;
+    optionTemplate?(item: T): React.ComponentType<T> | JSX.Element;
+    onClick?: () => void;
+    onKeyDown?: () => void;
+}
+
+export class TreeSelectItem<T> extends React.Component<IProps<T>> {
+    render() {
+        return (
+            <li
+                className='suggestion-item suggestion-item--multi-select'
+                onClick={(event) => {
+                    this.props.onClick?.();
+                    event.preventDefault();
+                    event.stopPropagation();
+                    this.props.handleTree(event, this.props.option);
+                }}
+            >
+                <button
+                    // the className is generated in order to focus the element later
+                    className={`suggestion-item--btn ${getPrefixedItemId(this.props.getId(this.props.option.value))}`}
+                    onKeyDown={(event) => {
+                        if (event.key === 'Enter' && this.props.option.children) {
+                            this.props.onKeyDown?.();
+                        }
+                    }}
+                >
+                    {(this.props.getBorderColor && !this.props.allowMultiple)
+                        && <div
+                            className="item-border"
+                            style={{
+                                backgroundColor: this.props.getBorderColor(this.props.option.value),
+                            }}
+                        >
+                        </div>
+                    }
+
+                    <span
+                        className={
+                            'suggestion-item--bgcolor'
+                            + (this.props.selectedItem ? ' suggestion-item--disabled' : '')}
+                        style={
+                            (this.props.getBackgroundColor && this.props.option.value)
+                                ? {
+                                    backgroundColor: this.props.getBackgroundColor(this.props.option.value),
+                                    color: getTextColor(this.props.getBackgroundColor(this.props.option.value),
+                                    ),
+                                }
+                                : undefined
+                        }
+                    >
+                        {this.props.optionTemplate
+                            ? this.props.optionTemplate(this.props.option.value)
+                            : this.props.getLabel(this.props.option.value)
+                        }
+                    </span>
+
+                    {this.props.option.children
+                        && <span className="suggestion-item__icon">
+                            <Icon name="chevron-right-thin"></Icon>
+                        </span>
+                    }
+                </button>
+            </li>
+        );
+    }
+}

package/app-typescript/components/TreeSelect/TreeSelectPill.tsx

@@ -0,0 +1,53 @@
+import * as React from "react";
+import {Icon} from "../Icon";
+import {getTextColor} from '../Label';
+
+interface IProps<T> {
+    item: T;
+    readOnly?: boolean;
+    disabled?: boolean;
+    backgroundColor: string | undefined;
+    onRemove(): void;
+    valueTemplate?(item: T, Wrapper: React.ElementType): React.ComponentType<T> | JSX.Element;
+    getBackgroundColor?(item: T): string;
+}
+
+export class TreeSelectPill<T> extends React.Component<IProps<T>> {
+    render() {
+        return (
+            <li
+                className={
+                    "tags-input__tag-item tags-input__tag-item--multi-select"
+                    + (this.props.readOnly ? ' tags-input__tag-item--readonly' : '')
+                }
+                onClick={() => (!this.props.readOnly && !this.props.disabled)
+                    && this.props.onRemove()
+                }
+                style={
+                    this.props.valueTemplate
+                        ? {backgroundColor: this.props.backgroundColor}
+                        : this.props.getBackgroundColor
+                            && {backgroundColor: this.props.getBackgroundColor(this.props.item)}
+                }
+            >
+                <span
+                    className="tags-input__helper-box"
+                    style={{
+                        color: this.props.backgroundColor
+                            ? getTextColor(this.props.backgroundColor)
+                            : this.props.getBackgroundColor
+                                &&  getTextColor(this.props.getBackgroundColor(this.props.item)),
+                    }}
+                >
+                    {this.props.children}
+
+                    {!this.props.readOnly
+                        && <span className="tags-input__remove-button">
+                            <Icon name="close-small"></Icon>
+                        </span>
+                    }
+                </span>
+            </li>
+        );
+    }
+}

package/app-typescript/index.ts

@@ -90,7 +90,7 @@ export { Text } from './components/Text/Text';
 export { Time } from './components/Text/Time';
 export { Heading } from './components/Text/Heading';
 export { BottomNav } from './components/Navigation/BottomNav';
-export { TreeSelect } from './components/TreeSelect';
+export { TreeSelect } from './components/TreeSelect/TreeSelect';
 export { TableList, TableListItem } from './components/Lists/TableList';
 export { ContentListItem } from './components/Lists/ContentList';
 export { MultiSelect } from './components/MultiSelect';

package/dist/examples.bundle.css

@@ -12012,19 +12012,20 @@ doc-react-playground {
     padding: 1px;
     z-index: 1;
     opacity: 1 !important; }
-  .icn-mix--2x {
-    font-size: 32px;
-    height: 32px; }
-    .icn-mix--2x .icn-mix__icn {
-      opacity: 0.6;
-      width: 32px;
-      height: 32px;
-      line-height: 32px;
-      font-size: 32px; }
-    .icn-mix--2x .icn-mix__sub-icn {
-      font-size: 1.6rem;
-      inset-inline-end: -0.6rem;
-      inset-block-end: -0.3rem; }
+
+.icn-mix--2x {
+  font-size: 32px;
+  height: 32px; }
+  .icn-mix--2x .icn-mix__icn {
+    opacity: 0.6;
+    width: 32px;
+    height: 32px;
+    line-height: 32px;
+    font-size: 32px; }
+  .icn-mix--2x .icn-mix__sub-icn {
+    font-size: 1.6rem;
+    inset-inline-end: -0.6rem;
+    inset-block-end: -0.3rem; }
 
 .double-size-icn {
   display: inline-block;
@@ -12036,9 +12037,10 @@ doc-react-playground {
     height: 32px;
     line-height: 32px;
     font-size: 32px; }
-  .double-size-icn--light [class^="icon-"],
-  .double-size-icn--light [class*=" icon-"] {
-    opacity: 0.5; }
+
+.double-size-icn--light [class^="icon-"],
+.double-size-icn--light [class*=" icon-"] {
+  opacity: 0.5; }
 
 .subnav .icn-mix__sub-icn {
   background-color: var(--sd-colour-panel-bg--100) !important; }