@rio-cloud/rio-uikit 0.16.3-beta.6 → 0.16.3-beta.8

package/CalendarStripe.d.ts

@@ -0,0 +1,5 @@
+declare module '@rio-cloud/rio-uikit/CalendarStripe' {
+    import React from 'react';
+    import { CalendarStripeProps } from './types';
+    export default class CalendarStripe extends React.Component<CalendarStripeProps> {}
+}

package/CalendarStripe.js

@@ -0,0 +1,2 @@
+import { default as _CalendarStripe } from './components/calendarStripe/CalendarStripe';
+export { _CalendarStripe as default };

package/Multiselect.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
-import { MultiselectProps } from './types';
+import { MultiselectProps, MultiselectOption } from './types';
 
 export { MultiselectOption } from './types';
 export { MultiselectCounterMessage } from './types';
 
-export default class Multiselect extends React.Component<MultiselectProps> {
+export default class Multiselect<T extends MultiselectOption> extends React.Component<MultiselectProps<T>> {
     static SIZE_SM = 'sm';
     static SIZE_LG = 'lg';
     static SIZE_SMALL = 'small';

package/Select.d.ts

@@ -2,4 +2,4 @@ import React from 'react';
 import { SelectProps } from './types';
 
 export { SelectOption } from './types';
-export default class Select extends React.Component<SelectProps> {}
+export default class Select<T extends SelectOption> extends React.Component<SelectProps<T>> {}

package/components/calendarStripe/CalendarStripe.js

@@ -0,0 +1,214 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import React, { useLayoutEffect, useState, useRef, forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { AnimatePresence, motion } from 'framer-motion';
+import useAfterMount from '../../hooks/useAfterMount';
+import useElementSize from '../../hooks/useElementSize';
+import usePrevious from '../../hooks/usePrevious';
+var DEFAULT_MIN_WITH = 200;
+var DEFAULT_MIN_DAYS = 1;
+var DEFAULT_MAX_DAYS = 7;
+var ANIMATION_DURATION = 0.2;
+var ANIMATION_NEXT = 'page';
+var ANIMATION_BACK = 'pageBack';
+var ITEM_NAME = 'ColumnItem';
+var variants = {
+  pageEnter: function pageEnter(pageDirection) {
+    return {
+      x: pageDirection === ANIMATION_NEXT ? '60%' : '-60%',
+      opacity: 0
+    };
+  },
+  pageCenter: function pageCenter() {
+    return {
+      x: 0,
+      opacity: 1
+    };
+  }
+};
+var getDateString = function getDateString(date) {
+  return date.toISOString().split('T').at(0);
+};
+var getFirstColumnItem = function getFirstColumnItem(node) {
+  if (_toConsumableArray(node.classList).includes(ITEM_NAME)) {
+    return node;
+  }
+  return getFirstColumnItem(node.children[0]);
+};
+var CalendarStripe = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _props$minDayWith = props.minDayWith,
+    minDayWith = _props$minDayWith === void 0 ? DEFAULT_MIN_WITH : _props$minDayWith,
+    _props$minDays = props.minDays,
+    minDays = _props$minDays === void 0 ? DEFAULT_MIN_DAYS : _props$minDays,
+    _props$maxDays = props.maxDays,
+    maxDays = _props$maxDays === void 0 ? DEFAULT_MAX_DAYS : _props$maxDays,
+    render = props.render,
+    skipWeekends = props.skipWeekends,
+    _props$startDate = props.startDate,
+    startDate = _props$startDate === void 0 ? new Date() : _props$startDate,
+    onNextClick = props.onNextClick,
+    onPreviousClick = props.onPreviousClick,
+    buttonClassName = props.buttonClassName,
+    className = props.className;
+  var _useState = useState(startDate),
+    _useState2 = _slicedToArray(_useState, 2),
+    firstDate = _useState2[0],
+    setFirstDate = _useState2[1];
+  var _useState3 = useState(1),
+    _useState4 = _slicedToArray(_useState3, 2),
+    amountOfDaysToShow = _useState4[0],
+    setAmountOfDaysToShow = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    enableInitialAnimation = _useState6[0],
+    setEnableInitialAnimation = _useState6[1];
+
+  // The base for reacting on changing width of the wrapping element.
+  // It uses a ResizeObserver under the hood.
+  var columnWrapperRef = useRef();
+  var _useElementSize = useElementSize(columnWrapperRef),
+    _useElementSize2 = _slicedToArray(_useElementSize, 1),
+    columnWrapperWidth = _useElementSize2[0];
+  var previous = usePrevious(getDateString(firstDate));
+  var animationDirection = getDateString(firstDate) > previous ? ANIMATION_NEXT : ANIMATION_BACK;
+
+  // Update startDate from outside
+  var _useState7 = useState(startDate),
+    _useState8 = _slicedToArray(_useState7, 2),
+    previousStartDate = _useState8[0],
+    setPreviousStartDate = _useState8[1];
+  if (getDateString(startDate) !== getDateString(previousStartDate)) {
+    setFirstDate(startDate);
+    setPreviousStartDate(startDate);
+  }
+  useAfterMount(function () {
+    setEnableInitialAnimation(true);
+  });
+  useLayoutEffect(function () {
+    if (!columnWrapperRef.current) {
+      return;
+    }
+    var firstItem = getFirstColumnItem(columnWrapperRef.current.children[0]);
+    if (!firstItem) {
+      return;
+    }
+
+    // Get the width of the first column to calculate how many columns fit on one page
+    // according to the given minWidth per column
+    var columnWidth = firstItem.getBoundingClientRect().width;
+
+    // Limit columns per page for given min and max values
+    var allowForLessColumns = amountOfDaysToShow - 1 >= minDays;
+    var allowForMoreColumns = amountOfDaysToShow + 1 <= maxDays;
+    var goSmaller = allowForLessColumns && columnWidth <= minDayWith;
+    var goBigger = allowForMoreColumns && (amountOfDaysToShow + 1) * minDayWith <= columnWrapperWidth;
+    if (goBigger) {
+      var newValue = amountOfDaysToShow + 1;
+      setAmountOfDaysToShow(newValue);
+      return;
+    }
+    if (goSmaller) {
+      var _newValue = amountOfDaysToShow - 1;
+      setAmountOfDaysToShow(_newValue);
+      return;
+    }
+  }, [columnWrapperWidth, columnWrapperRef.current, amountOfDaysToShow, firstDate]);
+  var handleNext = function handleNext() {
+    var newFirstDate = new Date(firstDate);
+    newFirstDate.setDate(newFirstDate.getDate() + amountOfDaysToShow);
+    setFirstDate(newFirstDate);
+    onNextClick(newFirstDate);
+  };
+  var handlePrev = function handlePrev() {
+    var newFirstDate = new Date(firstDate);
+    newFirstDate.setDate(newFirstDate.getDate() - amountOfDaysToShow);
+    setFirstDate(newFirstDate);
+    onPreviousClick(newFirstDate);
+  };
+
+  // Re-calculate the dates to show depending on the amount of days to show
+  var dates = [];
+  var addDays = true;
+  var index = 1;
+  while (addDays) {
+    var currentDate = new Date(firstDate);
+    currentDate.setDate(firstDate.getDate() + index);
+    var isSaturday = currentDate.getDay() === 6;
+    var isSunday = currentDate.getDay() === 0;
+    var isWeekend = isSaturday || isSunday;
+    if (isWeekend && !skipWeekends) {
+      dates.push(currentDate);
+    } else if (!isWeekend) {
+      dates.push(currentDate);
+    }
+    index++;
+    if (dates.length === amountOfDaysToShow) {
+      addDays = false;
+    }
+  }
+  var wrapperClassName = classNames('CalenderStripe', 'display-flex', 'align-items-center', 'overflow-hidden', 'bg-white', 'border', 'rounded', className);
+  var baseButtonClassName = classNames('align-items-center', 'align-self-stretch', 'display-flex', 'hover-scale-105', 'hover-text-color-darkest', 'padding-10', 'cursor-pointer', 'text-color-darker', 'text-size-12', buttonClassName);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: wrapperClassName
+  }, /*#__PURE__*/React.createElement("div", {
+    className: baseButtonClassName,
+    onClick: handlePrev
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "rioglyph rioglyph-chevron-left"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "flex-1-1 overflow-hidden",
+    ref: columnWrapperRef
+  }, /*#__PURE__*/React.createElement(AnimatePresence, {
+    exitBeforeEnter: true,
+    custom: animationDirection
+  }, /*#__PURE__*/React.createElement(motion.div, {
+    key: getDateString(firstDate),
+    variants: variants,
+    initial: enableInitialAnimation ? 'pageEnter' : false,
+    animate: "pageCenter",
+    custom: animationDirection,
+    transition: {
+      duration: ANIMATION_DURATION
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "ColumnWrapper display-flex space-x--1 user-select-none"
+  }, dates.map(function (date) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "".concat(ITEM_NAME, " flex-1-1"),
+      key: "".concat(getDateString(date))
+    }, /*#__PURE__*/React.cloneElement(render, {
+      date: date
+    }));
+  }))))), /*#__PURE__*/React.createElement("div", {
+    className: baseButtonClassName,
+    onClick: handleNext
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "rioglyph rioglyph-chevron-right"
+  })));
+});
+CalendarStripe.defaultProps = {
+  minDayWith: DEFAULT_MIN_WITH,
+  minDays: DEFAULT_MIN_DAYS,
+  maxDays: DEFAULT_MAX_DAYS,
+  skipWeekends: false,
+  onNextClick: function onNextClick() {},
+  onPreviousClick: function onPreviousClick() {},
+  buttonClassName: '',
+  className: ''
+};
+CalendarStripe.propTypes = {
+  minDayWith: PropTypes.number,
+  minDays: PropTypes.number,
+  maxDays: PropTypes.number,
+  render: PropTypes.node.isRequired,
+  skipWeekends: PropTypes.bool,
+  startDate: PropTypes.instanceOf(Date),
+  onNextClick: PropTypes.func,
+  onPreviousClick: PropTypes.func,
+  buttonClassName: PropTypes.string,
+  className: PropTypes.string
+};
+export default CalendarStripe;

package/components/dataTabs/DataTab.js

@@ -47,6 +47,7 @@ DataTab.defaultProps = {
 DataTab.propTypes = {
   // Props are injected from the wrapping DataTabs component
   disableTransition: PropTypes.bool,
+  className: PropTypes.string,
   active: PropTypes.bool,
   tabKey: PropTypes.string.isRequired,
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.string])

package/components/dataTabs/DataTabs.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _excluded = ["activeBgColor", "activeKey", "activeTextColor", "bordered", "children", "className", "commonTabContent", "disableTransition", "hoverBgColor", "hoverTextColor", "onSelectTab", "tabContentClassName", "vertical"];
+var _excluded = ["activeKey", "bordered", "children", "className", "commonTabContent", "disableTransition", "arrowClassname", "onSelectTab", "tabActiveBgColor", "tabActiveClassName", "tabBgColor", "tabClassName", "tabContentClassName", "tabFirstChildClassName", "tabHoverBgColor", "tabHoverClassName", "tabLastChildClassName", "tabsWrapperClassName", "vertical"];
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -13,18 +13,24 @@ var getFirstTabKey = function getFirstTabKey() {
   return firstItem && firstItem.props.tabKey;
 };
 var DataTabs = function DataTabs(props) {
-  var activeBgColor = props.activeBgColor,
-    activeKey = props.activeKey,
-    activeTextColor = props.activeTextColor,
+  var activeKey = props.activeKey,
     bordered = props.bordered,
     children = props.children,
     wrapperClassName = props.className,
     commonTabContent = props.commonTabContent,
     disableTransition = props.disableTransition,
-    hoverBgColor = props.hoverBgColor,
-    hoverTextColor = props.hoverTextColor,
+    arrowClassname = props.arrowClassname,
     onSelectTab = props.onSelectTab,
+    tabActiveBgColor = props.tabActiveBgColor,
+    tabActiveClassName = props.tabActiveClassName,
+    tabBgColor = props.tabBgColor,
+    tabClassName = props.tabClassName,
     tabContentClassName = props.tabContentClassName,
+    tabFirstChildClassName = props.tabFirstChildClassName,
+    tabHoverBgColor = props.tabHoverBgColor,
+    tabHoverClassName = props.tabHoverClassName,
+    tabLastChildClassName = props.tabLastChildClassName,
+    tabsWrapperClassName = props.tabsWrapperClassName,
     vertical = props.vertical,
     remainingProps = _objectWithoutProperties(props, _excluded);
   var _useState = useState(activeKey || getFirstTabKey(children)),
@@ -37,7 +43,7 @@ var DataTabs = function DataTabs(props) {
   var handleSelectTab = function handleSelectTab(event) {
     onSelectTab(event.currentTarget.getAttribute('data-tabkey'));
   };
-  var wrapperClassNames = classNames('DataTabsContainer', bordered && 'DataTab-bordered', wrapperClassName, vertical && 'DataTabs-vertical');
+  var wrapperClassNames = classNames('DataTabsContainer', bordered && 'DataTab-bordered', wrapperClassName, vertical ? 'DataTabs-vertical' : 'DataTabs-horizontal');
   var enrichChildren = function enrichChildren() {
     if (disableTransition) {
       return React.Children.map(children, function (child) {
@@ -63,24 +69,34 @@ var DataTabs = function DataTabs(props) {
   return /*#__PURE__*/React.createElement("div", _extends({}, remainingProps, {
     className: wrapperClassNames
   }), /*#__PURE__*/React.createElement("div", {
-    className: "DataTabsWrapper"
+    className: "DataTabsWrapper ".concat(tabsWrapperClassName)
   }, /*#__PURE__*/React.createElement("ul", {
     className: "DataTabs",
     role: "tabList"
-  }, React.Children.map(children, function (child) {
+  }, React.Children.map(children, function (child, index) {
+    var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isHovering = _useState4[0],
+      setIsHovering = _useState4[1];
     var _child$props = child.props,
       tabKey = _child$props.tabKey,
-      className = _child$props.className,
-      title = _child$props.title;
+      title = _child$props.title,
+      className = _child$props.className;
     var isActive = tabKey === internalActiveKey;
-    var tabClassNames = classNames('DataTab', 'tab', !isActive && "".concat(hoverTextColor, " ").concat(hoverBgColor, " cursor-pointer"), isActive && "active ".concat(activeTextColor, " ").concat(activeBgColor), className && className);
+    var tabClassNames = classNames('DataTab', 'tab', index === 0 && tabFirstChildClassName, index === children.length - 1 && tabLastChildClassName, !isHovering && !isActive && tabClassName, isHovering && !isActive && tabHoverClassName, isActive && "active ".concat(tabActiveClassName), !isActive && 'cursor-pointer', className && className);
     return /*#__PURE__*/React.createElement("li", {
       key: tabKey,
       className: tabClassNames,
       onClick: handleSelectTab,
-      "data-tabkey": tabKey
+      "data-tabkey": tabKey,
+      onMouseEnter: function onMouseEnter() {
+        return setIsHovering(true);
+      },
+      onMouseLeave: function onMouseLeave() {
+        return setIsHovering(false);
+      }
     }, title, /*#__PURE__*/React.createElement("div", {
-      className: "arrow ".concat(isActive ? 'in' : '')
+      className: "arrow ".concat(arrowClassname, " ").concat(isActive ? 'in' : '')
     }));
   }))), /*#__PURE__*/React.createElement("div", {
     className: "tab-content ".concat(tabContentClassName),
@@ -89,31 +105,38 @@ var DataTabs = function DataTabs(props) {
 };
 DataTabs.defaultProps = {
   activeKey: '',
-  onSelectTab: function onSelectTab() {},
-  className: '',
-  tabContentClassName: '',
-  hoverTextColor: 'hover-text-color-darkest',
-  hoverBgColor: 'hover-bg-highlight-decent',
-  activeTextColor: 'text-color-white',
-  activeBgColor: 'bg-highlight-dark',
   bordered: true,
-  disableTransition: false,
   children: [],
+  className: '',
+  disableTransition: false,
+  arrowClassname: 'bg-highlight-dark border-color-transparent',
+  onSelectTab: function onSelectTab() {},
+  tabActiveClassName: 'bg-highlight-dark text-color-white',
+  tabClassName: '',
+  tabContentClassName: '',
+  tabFirstChildClassName: '',
+  tabHoverClassName: 'bg-highlight-decent text-color-darkest',
+  tabLastChildClassName: '',
+  tabsWrapperClassName: '',
   vertical: false
 };
 DataTabs.propTypes = {
   activeKey: PropTypes.string,
-  onSelectTab: PropTypes.func.isRequired,
-  tabContentClassName: PropTypes.string,
-  hoverTextColor: PropTypes.string,
-  hoverBgColor: PropTypes.string,
-  activeTextColor: PropTypes.string,
-  activeBgColor: PropTypes.string,
   bordered: PropTypes.bool,
-  disableTransition: PropTypes.bool,
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
   className: PropTypes.string,
-  vertical: PropTypes.bool,
   commonTabContent: PropTypes.node,
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.string])
+  disableTransition: PropTypes.bool,
+  arrowClassname: PropTypes.string,
+  onSelectTab: PropTypes.func.isRequired,
+  tabActiveClassName: PropTypes.string,
+  tabClassName: PropTypes.string,
+  tabContentClassName: PropTypes.string,
+  tabFirstChildClassName: PropTypes.string,
+  tabHoverClassName: PropTypes.string,
+  tabLastChildClassName: PropTypes.string,
+  tabsWrapperClassName: PropTypes.string,
+  variant: PropTypes.string,
+  vertical: PropTypes.bool
 };
 export default DataTabs;

package/components/responsiveColumnStripe/ResponsiveColumnStripe.js

@@ -165,7 +165,7 @@ var ResponsiveColumnStripe = /*#__PURE__*/forwardRef(function (props, ref) {
       updatePageOnColumnsSizeChange(firstItem, _newValue, children);
       return;
     }
-  }, [columnWrapperWidth, columnWrapperRef.current, children]);
+  }, [columnWrapperWidth, columnWrapperRef.current, children, columnsPerPage]);
   var handlePrevClick = function handlePrevClick() {
     setIsResizePage(false);
     var pageNumber = currentPage - 1;

package/index.d.ts

@@ -28,6 +28,7 @@ declare module '@rio-cloud/rio-uikit' {
         ButtonDropdownProps,
         CheckboxProps,
         ClearableInputProps,
+        CalendarStripeProps,
         CollapseProps,
         ConfirmationDialogProps,
         ContentLoaderProps,
@@ -147,6 +148,7 @@ declare module '@rio-cloud/rio-uikit' {
     export class BrowserWarning extends React.Component<BrowserWarningProps> {}
     export class Checkbox extends React.Component<CheckboxProps> {}
     export class ClearableInput extends React.Component<ClearableInputProps> {}
+    export class CalendarStripe extends React.Component<CalendarStripeProps> {}
     export class ConfirmationDialog extends React.Component<ConfirmationDialogProps> {}
     export class Collapse extends React.Component<CollapseProps> {}
     export class ContentLoader extends React.Component<ContentLoaderProps> {}

package/index.js

@@ -219,6 +219,8 @@ import { default as _RuleContainer } from './components/rules/RuleContainer';
 export { _RuleContainer as RuleContainer };
 import { default as _RulesWrapper } from './components/rules/RulesWrapper';
 export { _RulesWrapper as RulesWrapper };
+import { default as _CalendarStripe } from './components/calendarStripe/CalendarStripe';
+export { _CalendarStripe as CalendarStripe };
 import { toggleSupportMarker as _toggleSupportMarker, enableSupportMarker as _enableSupportMarker, SUPPORT_MARKER_CLASS as _SUPPORT_MARKER_CLASS } from './components/supportMarker/toggleSupportMarker';
 export { _toggleSupportMarker as toggleSupportMarker, _enableSupportMarker as enableSupportMarker, _SUPPORT_MARKER_CLASS as SUPPORT_MARKER_CLASS };
 import { default as _Carousel } from './components/carousel/Carousel';

package/lib/es/CalendarStripe.d.ts

@@ -0,0 +1,5 @@
+declare module '@rio-cloud/rio-uikit/lib/es/CalendarStripe' {
+    import React from 'react';
+    import { CalendarStripeProps } from './types';
+    export default class CalendarStripe extends React.Component<CalendarStripeProps> {}
+}

package/lib/es/CalendarStripe.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _CalendarStripe2["default"];
+  }
+});
+var _CalendarStripe2 = _interopRequireDefault(require("./components/calendarStripe/CalendarStripe"));

package/lib/es/Multiselect.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
-import { MultiselectProps } from './types';
+import { MultiselectProps, MultiselectOption } from './types';
 
 export { MultiselectOption } from './types';
 export { MultiselectCounterMessage } from './types';
 
-export default class Multiselect extends React.Component<MultiselectProps> {
+export default class Multiselect<T extends MultiselectOption> extends React.Component<MultiselectProps<T>> {
     static SIZE_SM = 'sm';
     static SIZE_LG = 'lg';
     static SIZE_SMALL = 'small';

package/lib/es/Select.d.ts

@@ -2,4 +2,4 @@ import React from 'react';
 import { SelectProps } from './types';
 
 export { SelectOption } from './types';
-export default class Select extends React.Component<SelectProps> {}
+export default class Select<T extends SelectOption> extends React.Component<SelectProps<T>> {}