@rio-cloud/rio-uikit 0.16.1-beta.21 → 0.16.1-beta.23

package/components/table/TableSettingsListItem.js

@@ -1,5 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-
 /* eslint-disable new-cap */
 import React from 'react';
 import PropTypes from 'prop-types';
@@ -16,55 +15,51 @@ var MAX_COLUMN_WIDTH = 1000;
 export var filterColumns = function filterColumns(searchValue) {
   var column = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
   var columnLabelStrings = arguments.length > 2 ? arguments[2] : undefined;
-
   if (!searchValue) {
     return false;
   }
-
   var label = columnLabelStrings[column] || '';
   return !label.toLowerCase().includes(searchValue.toLowerCase());
 };
-
 var TableSettingsListItem = function TableSettingsListItem(props) {
   var column = props.column,
-      orderIndex = props.orderIndex,
-      columnLabels = props.columnLabels,
-      autoLabel = props.autoLabel,
-      _props$disabledColumn = props.disabledColumns,
-      disabledColumns = _props$disabledColumn === void 0 ? [] : _props$disabledColumn,
-      columnOrder = props.columnOrder,
-      _props$hiddenColumns = props.hiddenColumns,
-      hiddenColumns = _props$hiddenColumns === void 0 ? [] : _props$hiddenColumns,
-      columnSearchValue = props.columnSearchValue,
-      columnsDetails = props.columnsDetails,
-      columnLabelStrings = props.columnLabelStrings,
-      openColumnsDetails = props.openColumnsDetails,
-      updateColumnLabelStrings = props.updateColumnLabelStrings,
-      onColumnWidthChange = props.onColumnWidthChange,
-      onResetColumnWidth = props.onResetColumnWidth,
-      onMoveColumn = props.onMoveColumn,
-      onOpenDetails = props.onOpenDetails,
-      onToggleHideColumn = props.onToggleHideColumn,
-      className = props.className;
+    orderIndex = props.orderIndex,
+    columnLabels = props.columnLabels,
+    autoLabel = props.autoLabel,
+    _props$disabledColumn = props.disabledColumns,
+    disabledColumns = _props$disabledColumn === void 0 ? [] : _props$disabledColumn,
+    columnOrder = props.columnOrder,
+    _props$hiddenColumns = props.hiddenColumns,
+    hiddenColumns = _props$hiddenColumns === void 0 ? [] : _props$hiddenColumns,
+    columnSearchValue = props.columnSearchValue,
+    columnsDetails = props.columnsDetails,
+    columnLabelStrings = props.columnLabelStrings,
+    openColumnsDetails = props.openColumnsDetails,
+    updateColumnLabelStrings = props.updateColumnLabelStrings,
+    onColumnWidthChange = props.onColumnWidthChange,
+    onResetColumnWidth = props.onResetColumnWidth,
+    onMoveColumn = props.onMoveColumn,
+    onOpenDetails = props.onOpenDetails,
+    onToggleHideColumn = props.onToggleHideColumn,
+    className = props.className;
   var isSortingDisabled = !isEmpty(columnSearchValue);
-
   var _useSortable = useSortable({
-    id: column,
-    disabled: isSortingDisabled
-  }),
-      attributes = _useSortable.attributes,
-      listeners = _useSortable.listeners,
-      setNodeRef = _useSortable.setNodeRef,
-      transform = _useSortable.transform,
-      transition = _useSortable.transition;
-
+      id: column,
+      disabled: isSortingDisabled
+    }),
+    attributes = _useSortable.attributes,
+    listeners = _useSortable.listeners,
+    setNodeRef = _useSortable.setNodeRef,
+    transform = _useSortable.transform,
+    transition = _useSortable.transition;
   var style = {
     transform: CSS.Transform.toString(transform),
     transition: transition
-  }; // Filter out items which don't match the search value.
+  };
+
+  // Filter out items which don't match the search value.
   // Note that we need to render all items at least once at the beginning in order to get their DOM lables
   // otherwise the search won't work when initial search value is provided via props.
-
   var isFiltered = filterColumns(columnSearchValue, column, columnLabelStrings) && !updateColumnLabelStrings;
   var itemClassNames = classNames('table-settings-item', updateColumnLabelStrings && 'opacity-0', isFiltered && 'position-offscreen', className);
   var columnDetails = columnsDetails[column];
@@ -107,7 +102,6 @@ var TableSettingsListItem = function TableSettingsListItem(props) {
     onResetColumnWidth: onResetColumnWidth
   })))));
 };
-
 TableSettingsListItem.propTypes = {
   column: PropTypes.string,
   orderIndex: PropTypes.number,

package/components/table/TableToolbar.js

@@ -1,16 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-
 var TableToolbar = function TableToolbar(_ref) {
   var className = _ref.className,
-      children = _ref.children;
+    children = _ref.children;
   var wrapperClassNames = classNames('table-toolbar', className && className);
   return /*#__PURE__*/React.createElement("div", {
     className: wrapperClassNames
   }, children);
 };
-
 TableToolbar.defaultProps = {};
 TableToolbar.propTypes = {
   className: PropTypes.string

package/components/table/TableViewToggles.js

@@ -6,7 +6,9 @@ import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import OverlayTrigger from '../overlay/OverlayTrigger';
-import Tooltip from '../tooltip/Tooltip'; // TODO: add responsive behaviour and trigger a change from table to list for small screen -> see DriverAdministration
+import Tooltip from '../tooltip/Tooltip';
+
+// TODO: add responsive behaviour and trigger a change from table to list for small screen -> see DriverAdministration
 
 var wrapWithTooltip = function wrapWithTooltip(tooltipContent, element) {
   return /*#__PURE__*/React.createElement(OverlayTrigger, {
@@ -17,46 +19,40 @@ var wrapWithTooltip = function wrapWithTooltip(tooltipContent, element) {
     }, tooltipContent)
   }, element);
 };
-
 var TableViewToggles = function TableViewToggles(props) {
   var viewType = props.viewType,
-      initialViewType = props.initialViewType,
-      onViewTypeChange = props.onViewTypeChange,
-      className = props.className,
-      disabledViewTypes = props.disabledViewTypes,
-      disabled = props.disabled,
-      tableViewTooltipContent = props.tableViewTooltipContent,
-      singleCardViewTooltipContent = props.singleCardViewTooltipContent,
-      multiCardsViewTooltipContent = props.multiCardsViewTooltipContent,
-      remainingProps = _objectWithoutProperties(props, _excluded);
-
+    initialViewType = props.initialViewType,
+    onViewTypeChange = props.onViewTypeChange,
+    className = props.className,
+    disabledViewTypes = props.disabledViewTypes,
+    disabled = props.disabled,
+    tableViewTooltipContent = props.tableViewTooltipContent,
+    singleCardViewTooltipContent = props.singleCardViewTooltipContent,
+    multiCardsViewTooltipContent = props.multiCardsViewTooltipContent,
+    remainingProps = _objectWithoutProperties(props, _excluded);
   var _useState = useState(initialViewType),
-      _useState2 = _slicedToArray(_useState, 2),
-      internaViewType = _useState2[0],
-      setInternalViewType = _useState2[1]; // update internal state when external state changes - controlled component case
-
+    _useState2 = _slicedToArray(_useState, 2),
+    internaViewType = _useState2[0],
+    setInternalViewType = _useState2[1];
 
+  // update internal state when external state changes - controlled component case
   useEffect(function () {
     if (viewType) {
       setInternalViewType(viewType);
     }
   }, [viewType]);
-
   var handleSetTableView = function handleSetTableView() {
     setInternalViewType(TableViewToggles.VIEW_TYPE_TABLE);
     onViewTypeChange(TableViewToggles.VIEW_TYPE_TABLE);
   };
-
   var handleSetSingleCardsView = function handleSetSingleCardsView() {
     setInternalViewType(TableViewToggles.VIEW_TYPE_SINGLE_CARD);
     onViewTypeChange(TableViewToggles.VIEW_TYPE_SINGLE_CARD);
   };
-
   var handleSetMultiCardsView = function handleSetMultiCardsView() {
     setInternalViewType(TableViewToggles.VIEW_TYPE_MULTI_CARDS);
     onViewTypeChange(TableViewToggles.VIEW_TYPE_MULTI_CARDS);
   };
-
   var wrapperClassNames = classNames('TableViewToggles', 'btn-group', 'display-flex', 'flex-row', className && className);
   var buttonClassNames = classNames('btn btn-default btn-icon-only', disabled && 'disabled pointer-events-none');
   var tableViewActiveClasses = classNames(buttonClassNames, internaViewType === TableViewToggles.VIEW_TYPE_TABLE && 'active');
@@ -90,7 +86,6 @@ var TableViewToggles = function TableViewToggles(props) {
     className: wrapperClassNames
   }), showTableViewButton && (tableViewTooltipContent ? wrapWithTooltip(tableViewTooltipContent, tableViewButton) : tableViewButton), showSingleCardViewButton && (singleCardViewTooltipContent ? wrapWithTooltip(singleCardViewTooltipContent, singleCardViewButton) : singleCardViewButton), showMultiCardViewButton && (multiCardsViewTooltipContent ? wrapWithTooltip(multiCardsViewTooltipContent, multiCardViewButton) : multiCardViewButton));
 };
-
 TableViewToggles.VIEW_TYPE_TABLE = 'TABLE';
 TableViewToggles.VIEW_TYPE_SINGLE_CARD = 'SINGLE_CARD';
 TableViewToggles.VIEW_TYPE_MULTI_CARDS = 'MULTI_CARDS';

package/components/tag/Tag.js

@@ -4,29 +4,27 @@ var _excluded = ["children", "icon", "active", "disabled", "clickable", "selecta
 import React from 'react';
 import PropTypes from 'prop-types';
 import classname from 'classnames';
-
 var Tag = function Tag(props) {
   var children = props.children,
-      icon = props.icon,
-      active = props.active,
-      disabled = props.disabled,
-      clickable = props.clickable,
-      selectable = props.selectable,
-      deletable = props.deletable,
-      revertable = props.revertable,
-      multiline = props.multiline,
-      muted = props.muted,
-      round = props.round,
-      remainingProps = _objectWithoutProperties(props, _excluded);
-
+    icon = props.icon,
+    active = props.active,
+    disabled = props.disabled,
+    clickable = props.clickable,
+    selectable = props.selectable,
+    deletable = props.deletable,
+    revertable = props.revertable,
+    multiline = props.multiline,
+    muted = props.muted,
+    round = props.round,
+    remainingProps = _objectWithoutProperties(props, _excluded);
   return /*#__PURE__*/React.createElement("div", _extends({}, remainingProps, {
-    className: classname('tag', props.size === 'small' && 'tag-small', icon && "rioglyph ".concat(icon), active && 'active clickable rioglyph rioglyph-ok', disabled && 'disabled', clickable && 'clickable', selectable && 'selectable clickable rioglyph rioglyph-checkbox', deletable && 'deletable clickable rioglyph rioglyph-remove', revertable && 'revertable clickable rioglyph rioglyph-revert', multiline && 'multiline', muted && 'tag-muted', !round && 'rounded', // sounds wrong, but is right
+    className: classname('tag', props.size === 'small' && 'tag-small', icon && "rioglyph ".concat(icon), active && 'active clickable rioglyph rioglyph-ok', disabled && 'disabled', clickable && 'clickable', selectable && 'selectable clickable rioglyph rioglyph-checkbox', deletable && 'deletable clickable rioglyph rioglyph-remove', revertable && 'revertable clickable rioglyph rioglyph-revert', multiline && 'multiline', muted && 'tag-muted', !round && 'rounded',
+    // sounds wrong, but is right
     props.className)
   }), /*#__PURE__*/React.createElement("div", {
     className: "tag-inner"
   }, children));
 };
-
 Tag.defaultProps = {
   active: false,
   clickable: false,

package/components/tag/TagList.js

@@ -4,14 +4,12 @@ var _excluded = ["children", "inline", "autoTagWidth", "tagsPerRow"];
 import React from 'react';
 import PropTypes from 'prop-types';
 import classname from 'classnames';
-
 var TagList = function TagList(props) {
   var children = props.children,
-      inline = props.inline,
-      autoTagWidth = props.autoTagWidth,
-      tagsPerRow = props.tagsPerRow,
-      remainingProps = _objectWithoutProperties(props, _excluded);
-
+    inline = props.inline,
+    autoTagWidth = props.autoTagWidth,
+    tagsPerRow = props.tagsPerRow,
+    remainingProps = _objectWithoutProperties(props, _excluded);
   var wrappedChidren = /*#__PURE__*/React.createElement("div", {
     className: "tags-per-row-".concat(tagsPerRow)
   }, children);
@@ -19,7 +17,6 @@ var TagList = function TagList(props) {
     className: classname('taglist', !autoTagWidth && 'taglist-autowidth', !inline && 'taglist-vertical', tagsPerRow && 'row display-flex-sm flex-wrap-sm', props.className)
   }), tagsPerRow ? wrappedChidren : children);
 };
-
 TagList.defaultProps = {
   inline: true,
   autoTagWidth: false

package/components/tagManager/CustomSuggestionItem.js

@@ -1,10 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-
 var CustomSuggestionItem = function CustomSuggestionItem(_ref) {
   var value = _ref.value,
-      placeholder = _ref.placeholder;
+    placeholder = _ref.placeholder;
   var wrapperClassNames = classNames('display-flex align-items-center', 'padding-top-5 padding-bottom-5', !value && 'text-color-gray');
   var iconClassNames = classNames('margin-left--5 margin-right-5 margin-top--1', 'rioglyph', !value ? 'rioglyph-arrow-up' : 'rioglyph-plus');
   return /*#__PURE__*/React.createElement("span", {
@@ -15,7 +14,6 @@ var CustomSuggestionItem = function CustomSuggestionItem(_ref) {
     className: 'text-italic'
   }, value || placeholder));
 };
-
 CustomSuggestionItem.defaultProps = {};
 CustomSuggestionItem.propTypes = {
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),

package/components/tagManager/TagManager.js

@@ -12,7 +12,6 @@ import compact from 'lodash/fp/compact';
 import AutoSuggest from '../autosuggest/AutoSuggest';
 import CustomSuggestionItem from './CustomSuggestionItem';
 import TagManagerItemList from './TagManagerItemList';
-
 var getCustomSuggestion = function getCustomSuggestion(value, placeholder) {
   return {
     customSuggestion: /*#__PURE__*/React.createElement(CustomSuggestionItem, {
@@ -23,26 +22,22 @@ var getCustomSuggestion = function getCustomSuggestion(value, placeholder) {
     disabled: isEmpty(value)
   };
 };
-
 var getSuggestionSeparator = function getSuggestionSeparator(dropdownSeparatorText) {
   return {
     header: true,
     label: dropdownSeparatorText
   };
 };
-
 var cleanupTagState = function cleanupTagState(tag) {
   delete tag.toAdd;
   delete tag.toRemove;
   return tag;
 };
-
 var hasTagAlreadySelected = function hasTagAlreadySelected(tags, newSuggestion) {
   return !!tags.find(function (tag) {
     return tag.label === newSuggestion.label;
   });
 };
-
 var getNewSuggestion = function getNewSuggestion(suggestion) {
   var newSuggestion = suggestion.customSuggestion ? {
     label: suggestion.label
@@ -50,68 +45,62 @@ var getNewSuggestion = function getNewSuggestion(suggestion) {
   newSuggestion.toAdd = true;
   return newSuggestion;
 };
-
 var buildSuggestions = function buildSuggestions(useCustomTags, customTagPlaceholder, dropdownSeparatorText) {
   return function (value, suggestions) {
     var cleanedSuggestions = suggestions.map(cleanupTagState);
     return compact([useCustomTags && getCustomSuggestion(value, customTagPlaceholder), useCustomTags && !isEmpty(cleanedSuggestions) && getSuggestionSeparator(dropdownSeparatorText)].concat(_toConsumableArray(cleanedSuggestions)));
   };
 };
-
 var filterSuggestions = function filterSuggestions(suggestions, selectedTagNames) {
   var value = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
   return suggestions.filter(function (suggestion) {
     var label = suggestion.label;
-
     if (!label) {
       return false;
     }
-
     var lowerCaseLabel = label.toLowerCase();
     var lowerCaseValue = value.toLowerCase();
     return lowerCaseLabel.includes(lowerCaseValue) && !selectedTagNames.includes(label) && !suggestion.header && !suggestion.customSuggestion;
   });
 };
-
 var TagManager = function TagManager(props) {
   var tagList = props.tagList,
-      tagSuggestions = props.tagSuggestions,
-      placeholder = props.placeholder,
-      className = props.className,
-      customTagPlaceholder = props.customTagPlaceholder,
-      dropdownSeparatorText = props.dropdownSeparatorText,
-      onTagListChange = props.onTagListChange,
-      useCustomTags = props.useCustomTags,
-      noItemMessage = props.noItemMessage,
-      showInput = props.showInput,
-      remainingProps = _objectWithoutProperties(props, _excluded);
-
+    tagSuggestions = props.tagSuggestions,
+    placeholder = props.placeholder,
+    className = props.className,
+    customTagPlaceholder = props.customTagPlaceholder,
+    dropdownSeparatorText = props.dropdownSeparatorText,
+    onTagListChange = props.onTagListChange,
+    useCustomTags = props.useCustomTags,
+    noItemMessage = props.noItemMessage,
+    showInput = props.showInput,
+    remainingProps = _objectWithoutProperties(props, _excluded);
   var _useState = useState(tagList),
-      _useState2 = _slicedToArray(_useState, 2),
-      tags = _useState2[0],
-      setTags = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    tags = _useState2[0],
+    setTags = _useState2[1];
   var _useState3 = useState(''),
-      _useState4 = _slicedToArray(_useState3, 2),
-      inputValue = _useState4[0],
-      setInputValue = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    inputValue = _useState4[0],
+    setInputValue = _useState4[1];
   var _useState5 = useState(),
-      _useState6 = _slicedToArray(_useState5, 2),
-      currentSuggestions = _useState6[0],
-      setCurrentSuggestions = _useState6[1];
+    _useState6 = _slicedToArray(_useState5, 2),
+    currentSuggestions = _useState6[0],
+    setCurrentSuggestions = _useState6[1];
+  var getSuggestions = buildSuggestions(useCustomTags, customTagPlaceholder, dropdownSeparatorText);
 
-  var getSuggestions = buildSuggestions(useCustomTags, customTagPlaceholder, dropdownSeparatorText); // Update internal list of tags when they change from the outside i.e. when they have been saved,
+  // Update internal list of tags when they change from the outside i.e. when they have been saved,
   // additionally, cleanup previous state for adding or removing tags
-
   useEffect(function () {
     return setTags(tagList.map(cleanupTagState));
-  }, [tagList]); // build suggestion when passed tag suggestions passed change i.e. when a tag got selected and removed from the list
+  }, [tagList]);
 
+  // build suggestion when passed tag suggestions passed change i.e. when a tag got selected and removed from the list
   useEffect(function () {
     return setCurrentSuggestions(getSuggestions(inputValue, tagSuggestions));
-  }, [tagSuggestions]); // build suggestions when input value change as it should filter the list on suggestions
+  }, [tagSuggestions]);
 
+  // build suggestions when input value change as it should filter the list on suggestions
   useEffect(function () {
     var selectedTagNames = tags.map(function (tag) {
       return tag.label;
@@ -120,31 +109,25 @@ var TagManager = function TagManager(props) {
     var filteredList = filterSuggestions(tagSuggestions, selectedTagNames, value);
     setCurrentSuggestions(getSuggestions(value, filteredList));
   }, [tags, inputValue, tagSuggestions]);
-
   var updateTags = function updateTags(updatedTags) {
-    setTags(updatedTags); // Notify outside component
-
+    setTags(updatedTags);
+    // Notify outside component
     onTagListChange(updatedTags);
   };
-
   var handleSuggestionsChange = function handleSuggestionsChange(_ref) {
     var value = _ref.value;
     return setInputValue(value);
   };
-
   var handleSuggestionSelected = function handleSuggestionSelected(event, _ref2) {
     var suggestion = _ref2.suggestion;
     setInputValue('');
     var newSuggestion = getNewSuggestion(suggestion);
-
     if (hasTagAlreadySelected(tags, newSuggestion)) {
       updateTags(_toConsumableArray(tags));
       return;
     }
-
     updateTags([].concat(_toConsumableArray(tags), [newSuggestion]));
   };
-
   var updateTagsWithSelectedTag = function updateTagsWithSelectedTag(tagItems, selectedTag) {
     var updatedTags = tagItems.map(function (tag) {
       if (isEqual(tag.label, selectedTag.label)) {
@@ -155,12 +138,10 @@ var TagManager = function TagManager(props) {
           tag.toRemove = true;
         }
       }
-
       return tag;
     });
     return updatedTags;
   };
-
   var handleRemoveFromTagList = function handleRemoveFromTagList(selectedTag) {
     if (selectedTag.toAdd) {
       updateTags(tags.filter(function (tag) {
@@ -170,7 +151,6 @@ var TagManager = function TagManager(props) {
       updateTags(updateTagsWithSelectedTag(tags, selectedTag));
     }
   };
-
   var inputProps = {
     className: '',
     placeholder: placeholder || 'Start typing ...',
@@ -193,7 +173,6 @@ var TagManager = function TagManager(props) {
     onRemoveFromTagList: handleRemoveFromTagList
   }));
 };
-
 TagManager.defaultProps = {
   useCustomTags: true,
   showInput: true

package/components/tagManager/TagManagerItemList.js

@@ -3,10 +3,9 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import TagList from '../tag/TagList';
 import Tag from '../tag/Tag';
-
 var TagManagerItemList = function TagManagerItemList(props) {
   var tags = props.tags,
-      onRemoveFromTagList = props.onRemoveFromTagList;
+    onRemoveFromTagList = props.onRemoveFromTagList;
   return /*#__PURE__*/React.createElement(TagList, {
     inline: false
   }, tags.map(function (tag) {
@@ -22,7 +21,6 @@ var TagManagerItemList = function TagManagerItemList(props) {
     }, tag.label);
   }));
 };
-
 TagManagerItemList.defaultProps = {};
 TagManagerItemList.propTypes = {
   tags: PropTypes.arrayOf(PropTypes.shape({