superdesk-ui-framework 3.0.1-beta.20 → 3.0.1-beta.22

package/dist/vendor.bundle.js

@@ -70,7 +70,7 @@ return /******/ (function(modules) { // webpackBootstrap
 /******/ 	__webpack_require__.p = "";
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 529);
+/******/ 	return __webpack_require__(__webpack_require__.s = 536);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -28246,7 +28246,7 @@ module.exports = function(module) {
 
 /***/ }),
 
-/***/ 529:
+/***/ 536:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -28256,11 +28256,11 @@ __webpack_require__(33);
 
 __webpack_require__(41);
 
-__webpack_require__(530);
+__webpack_require__(537);
 
-__webpack_require__(532);
+__webpack_require__(539);
 
-__webpack_require__(534);
+__webpack_require__(541);
 
 __webpack_require__(0);
 
@@ -28268,7 +28268,7 @@ __webpack_require__(9);
 
 /***/ }),
 
-/***/ 530:
+/***/ 537:
 /***/ (function(module, exports, __webpack_require__) {
 
 var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
@@ -28292,7 +28292,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
 	if ( true ) {
 
 		// AMD. Register as an anonymous module.
-		!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(41), __webpack_require__(531) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
+		!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(41), __webpack_require__(538) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
 				__WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?
 				(__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__),
 				__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
@@ -29030,7 +29030,7 @@ return $.widget;
 
 /***/ }),
 
-/***/ 531:
+/***/ 538:
 /***/ (function(module, exports, __webpack_require__) {
 
 var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;( function( factory ) {
@@ -29060,16 +29060,16 @@ return $.ui.version = "1.13.0";
 
 /***/ }),
 
-/***/ 532:
+/***/ 539:
 /***/ (function(module, exports, __webpack_require__) {
 
-__webpack_require__(533);
+__webpack_require__(540);
 module.exports = angular;
 
 
 /***/ }),
 
-/***/ 533:
+/***/ 540:
 /***/ (function(module, exports, __webpack_require__) {
 
 /* WEBPACK VAR INJECTION */(function(__webpack_provided_window_dot_jQuery) {/**
@@ -65676,16 +65676,16 @@ $provide.value("$locale", {
 
 /***/ }),
 
-/***/ 534:
+/***/ 541:
 /***/ (function(module, exports, __webpack_require__) {
 
-__webpack_require__(535);
+__webpack_require__(542);
 module.exports = 'ngAnimate';
 
 
 /***/ }),
 
-/***/ 535:
+/***/ 542:
 /***/ (function(module, exports) {
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "superdesk-ui-framework",
-  "version": "3.0.1-beta.20",
+  "version": "3.0.1-beta.22",
   "license": "AGPL-3.0",
   "repository": {
     "type": "git",

package/react/components/MultiSelect.d.ts

@@ -0,0 +1,40 @@
+import * as React from "react";
+interface IProps<T> {
+    value: Array<T>;
+    options: Array<T>;
+    placeholder?: string;
+    optionLabel: string;
+    emptyFilterMessage?: string;
+    filterPlaceholder?: string;
+    maxSelectedLabels?: number;
+    selectedItemsLabel?: string;
+    ariaLabelledBy?: string;
+    tabIndex?: string | any;
+    filter?: boolean;
+    showClear?: boolean;
+    showSelectAll?: boolean;
+    itemTemplate?(item: any): JSX.Element | undefined;
+    selectedItemTemplate?(value: any): JSX.Element | undefined;
+    onChange(newValue: string): void;
+    invalid?: boolean;
+    inlineLabel?: boolean;
+    labelHidden?: boolean;
+    tabindex?: number;
+    fullWidth?: boolean;
+    info?: string;
+    error?: string;
+    required?: boolean;
+    label?: string;
+    disabled?: boolean;
+}
+interface IState<T> {
+    options: Array<T>;
+    value: Array<T>;
+    invalid: boolean;
+}
+export declare class MultiSelect<T> extends React.Component<IProps<T>, IState<T>> {
+    private htmlId;
+    constructor(props: IProps<T>);
+    render(): JSX.Element;
+}
+export {};

package/react/components/MultiSelect.js

@@ -0,0 +1,70 @@
+"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;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MultiSelect = void 0;
+var React = __importStar(require("react"));
+var multiselect_1 = require("@superdesk/primereact/multiselect");
+var classnames_1 = __importDefault(require("classnames"));
+var react_id_generator_1 = __importDefault(require("react-id-generator"));
+var Form_1 = require("./Form");
+var MultiSelect = /** @class */ (function (_super) {
+    __extends(MultiSelect, _super);
+    function MultiSelect(props) {
+        var _this = _super.call(this, props) || this;
+        _this.htmlId = (0, react_id_generator_1.default)();
+        _this.state = {
+            value: [],
+            options: [],
+            invalid: _this.props.invalid ? _this.props.invalid : false,
+        };
+        return _this;
+    }
+    MultiSelect.prototype.render = function () {
+        var _this = this;
+        var _a;
+        var classes = (0, classnames_1.default)({
+            'showSelectAll': this.props.showSelectAll,
+            'showFilter': this.props.filter,
+        });
+        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, invalid: this.state.invalid, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex },
+            React.createElement(multiselect_1.MultiSelect, { panelClassName: classes, value: this.props.value, options: this.props.options, onChange: function (e) { return _this.props.onChange(e); }, display: "chip", filter: this.props.filter, filterBy: this.props.optionLabel, appendTo: document.body, placeholder: this.props.placeholder, optionLabel: this.props.optionLabel, emptyFilterMessage: this.props.emptyFilterMessage, filterPlaceholder: this.props.filterPlaceholder, itemTemplate: this.props.itemTemplate, selectedItemTemplate: this.props.selectedItemTemplate, maxSelectedLabels: (_a = this.props.maxSelectedLabels) !== null && _a !== void 0 ? _a : 4, selectedItemsLabel: this.props.selectedItemsLabel, ariaLabelledBy: this.htmlId + 'label', tabIndex: this.props.tabIndex ? this.props.tabIndex : '0', showClear: this.props.showClear, disabled: this.props.disabled, inputId: this.htmlId })));
+    };
+    return MultiSelect;
+}(React.Component));
+exports.MultiSelect = MultiSelect;

package/react/index.d.ts

@@ -82,5 +82,6 @@ export { BottomNav } from './components/Navigation/BottomNav';
 export { TreeSelect } from './components/TreeSelect';
 export { TableList, TableListItem } from './components/Lists/TableList';
 export { ContentListItem } from './components/Lists/ContentList';
+export { MultiSelect } from './components/MultiSelect';
 export declare const ToggleBoxNext: any;
 export declare const reactToAngular1: any;

package/react/index.js

@@ -14,6 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DropdownLabel = exports.DropdownItem = exports.DropdownFirst = exports.HeadingText = exports.ContentDivider = exports.Divider = exports.Icon = exports.Prop = exports.PropsList = exports.StrechBar = exports.SlidingToolbar = exports.SubNavDivider = exports.SubNav = exports.LeftMenu = exports.TabList = exports.Tab = exports.NavButton = exports.CheckButtonGroup = exports.CheckGroup = exports.CheckboxButton = exports.RadioButtonGroup = exports.Checkbox = exports.RadioGroup = exports.Loader = exports.ButtonGroup = exports.SwitchGroup = exports.Switch = exports.FormLabel = exports.TimePicker = exports.DatePickerISO = exports.DatePicker = exports.getDurationString = exports.DurationInput = exports.Tooltip = exports.IconLabel = exports.IconButton = exports.AvatarGroup = exports.AvatarContentImage = exports.AvatarContentText = exports.AvatarWrapper = exports.Alert = exports.Badge = exports.Label = exports.Popover = exports.SelectWithTemplate = exports.Option = exports.Select = exports.Input = exports.Button = exports.HelloWorld = void 0;
 exports.ContentListItem = exports.TableListItem = exports.TableList = exports.TreeSelect = exports.BottomNav = exports.Heading = exports.Time = exports.Text = exports.LoadingOverlay = exports.Spinner = exports.ListItemLoader = exports.Skeleton = exports.WithSizeObserver = exports.SearchBar = exports.CreateButton = exports.DropZone = exports.ThemeSelector = exports.IconPicker = exports.SelectGrid = exports.ToggleBox = exports.Menu = exports.toasted = exports.GridItemCheckWrapper = exports.GridItemTopActions = exports.GridItemFooterActions = exports.GridItemFooterBlock = exports.GridItemSlug = exports.GridItemText = exports.GridItemTitle = exports.GridItemTime = exports.GridItemContentBlock = exports.GridItemFooter = exports.GridItemMedia = exports.GridItemContent = exports.GridItem = exports.GridList = exports.TagInputTest = exports.TagInput = exports.Modal = exports.Carousel = exports.DonutChart = exports.Autocomplete = exports.EmptyState = exports.Tabs = exports.TabContent = exports.TabPanel = exports.TabLabel = exports.Tag = exports.Dropdown = exports.DropdownDivider = void 0;
+exports.MultiSelect = void 0;
 var HelloWorld_1 = require("./components/HelloWorld");
 Object.defineProperty(exports, "HelloWorld", { enumerable: true, get: function () { return HelloWorld_1.HelloWorld; } });
 var Button_1 = require("./components/Button");
@@ -197,3 +198,5 @@ Object.defineProperty(exports, "TableList", { enumerable: true, get: function ()
 Object.defineProperty(exports, "TableListItem", { enumerable: true, get: function () { return TableList_1.TableListItem; } });
 var ContentList_1 = require("./components/Lists/ContentList");
 Object.defineProperty(exports, "ContentListItem", { enumerable: true, get: function () { return ContentList_1.ContentListItem; } });
+var MultiSelect_1 = require("./components/MultiSelect");
+Object.defineProperty(exports, "MultiSelect", { enumerable: true, get: function () { return MultiSelect_1.MultiSelect; } });