superdesk-ui-framework 3.0.42 → 3.0.44

package/react/components/TreeSelect/TreeSelectItem.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { ITreeNode } from './TreeSelect';
+export declare function getPrefixedItemId(id: string): string;
+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 declare class TreeSelectItem<T> extends React.Component<IProps<T>> {
+    render(): JSX.Element;
+}
+export {};

package/react/components/TreeSelect/TreeSelectItem.js

@@ -0,0 +1,90 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TreeSelectItem = exports.getPrefixedItemId = void 0;
+var React = __importStar(require("react"));
+var Icon_1 = require("../Icon");
+var Label_1 = require("../Label");
+function getPrefixedItemId(id) {
+    return id + '-focus';
+}
+exports.getPrefixedItemId = getPrefixedItemId;
+var TreeSelectItem = /** @class */ (function (_super) {
+    __extends(TreeSelectItem, _super);
+    function TreeSelectItem() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    TreeSelectItem.prototype.render = function () {
+        var _this = this;
+        return (React.createElement("li", { className: 'suggestion-item suggestion-item--multi-select', onClick: function (event) {
+                var _a, _b;
+                (_b = (_a = _this.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
+                event.preventDefault();
+                event.stopPropagation();
+                _this.props.handleTree(event, _this.props.option);
+            } },
+            React.createElement("button", { 
+                // the className is generated in order to focus the element later
+                className: "suggestion-item--btn ".concat(getPrefixedItemId(this.props.getId(this.props.option.value))), onKeyDown: function (event) {
+                    var _a, _b;
+                    if (event.key === 'Enter' && _this.props.option.children) {
+                        (_b = (_a = _this.props).onKeyDown) === null || _b === void 0 ? void 0 : _b.call(_a);
+                    }
+                } },
+                (this.props.getBorderColor && !this.props.allowMultiple)
+                    && React.createElement("div", { className: "item-border", style: {
+                            backgroundColor: this.props.getBorderColor(this.props.option.value),
+                        } }),
+                React.createElement("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: (0, Label_1.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)),
+                this.props.option.children
+                    && React.createElement("span", { className: "suggestion-item__icon" },
+                        React.createElement(Icon_1.Icon, { name: "chevron-right-thin" })))));
+    };
+    return TreeSelectItem;
+}(React.Component));
+exports.TreeSelectItem = TreeSelectItem;

package/react/components/TreeSelect/TreeSelectPill.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+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 declare class TreeSelectPill<T> extends React.Component<IProps<T>> {
+    render(): JSX.Element;
+}
+export {};

package/react/components/TreeSelect/TreeSelectPill.js

@@ -0,0 +1,71 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TreeSelectPill = void 0;
+var React = __importStar(require("react"));
+var Icon_1 = require("../Icon");
+var Label_1 = require("../Label");
+var TreeSelectPill = /** @class */ (function (_super) {
+    __extends(TreeSelectPill, _super);
+    function TreeSelectPill() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    TreeSelectPill.prototype.render = function () {
+        var _this = this;
+        return (React.createElement("li", { className: "tags-input__tag-item tags-input__tag-item--multi-select"
+                + (this.props.readOnly ? ' tags-input__tag-item--readonly' : ''), onClick: function () { return (!_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) } },
+            React.createElement("span", { className: "tags-input__helper-box", style: {
+                    color: this.props.backgroundColor
+                        ? (0, Label_1.getTextColor)(this.props.backgroundColor)
+                        : this.props.getBackgroundColor
+                            && (0, Label_1.getTextColor)(this.props.getBackgroundColor(this.props.item)),
+                } },
+                this.props.children,
+                !this.props.readOnly
+                    && React.createElement("span", { className: "tags-input__remove-button" },
+                        React.createElement(Icon_1.Icon, { name: "close-small" })))));
+    };
+    return TreeSelectPill;
+}(React.Component));
+exports.TreeSelectPill = TreeSelectPill;

package/react/index.d.ts

@@ -82,7 +82,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/react/index.js

@@ -201,7 +201,7 @@ var Heading_1 = require("./components/Text/Heading");
 Object.defineProperty(exports, "Heading", { enumerable: true, get: function () { return Heading_1.Heading; } });
 var BottomNav_1 = require("./components/Navigation/BottomNav");
 Object.defineProperty(exports, "BottomNav", { enumerable: true, get: function () { return BottomNav_1.BottomNav; } });
-var TreeSelect_1 = require("./components/TreeSelect");
+var TreeSelect_1 = require("./components/TreeSelect/TreeSelect");
 Object.defineProperty(exports, "TreeSelect", { enumerable: true, get: function () { return TreeSelect_1.TreeSelect; } });
 var TableList_1 = require("./components/Lists/TableList");
 Object.defineProperty(exports, "TableList", { enumerable: true, get: function () { return TableList_1.TableList; } });