@rio-cloud/rio-uikit 0.15.0-beta-46 → 0.15.0

package/lib/types.ts

@@ -20,6 +20,21 @@ export interface ActionBarItemProps {
     title?: string | React.ReactNode;
 }
 
+export interface ActionBarItemListProps {
+    className?: string;
+}
+
+export interface ActionBarItemListItemProps {
+    hasLink?: boolean;
+    icon?: string;
+    onClick?: Function;
+    className?: string;
+}
+
+export interface ActionBarItemListSeparatorProps {
+    className?: string;
+}
+
 export interface ActivityProps {
     activity: string;
     bsSize?: string;
@@ -31,14 +46,28 @@ export interface ActivityProps {
 
 export type ActionBarItemPopoverWidth = 100 | 150 | 200 | 250 | 300 | 350 | 400 | 450 | 500;
 
+export interface AnimatedNumberProps {
+    start: number;
+    end: number;
+    prefix?: string;
+    unit?: string;
+    speed?: number;
+    decreasing?: boolean;
+    onEnd?: Function;
+    className?: string;
+}
+
 export interface ApplicationHeaderProps {
     label?: React.ReactNode;
     homeRoute?: React.ReactNode;
+    showHomeIcon?: boolean;
     appNavigator?: React.ReactNode;
     appNavigatorClassName?: string;
     appMenuItems?: ModulePropTypes[];
     navItems?: ModulePropTypes[];
     actionBarItems: React.ReactNode[];
+    onMount?: Function;
+    onUnmount?: Function;
     className?: string;
 }
 
@@ -242,6 +271,23 @@ export interface BrowserWarningProps {
     onBrowserSelect?: Function;
 }
 
+export interface BottomSheetProps {
+    show: boolean;
+    onClose?: Function;
+    width?: number | string;
+    height?: number | string;
+    title?: string | React.ReactNode;
+    showCloseButton?: boolean;
+    showMaximizeButton?: boolean;
+    onHeightChange?: Function;
+    detatch?: boolean;
+    useBackdrop?: boolean;
+    onBackdropClick?: Function;
+    bodyRef?: React.MutableRefObject<object>;
+    bodyClassName?: string;
+    className?: string;
+}
+
 export interface BoundingBox {
     top: number;
     bottom: number;
@@ -249,6 +295,20 @@ export interface BoundingBox {
     right: number;
 }
 
+export interface ButtonProps {
+    active?: boolean;
+    disabled?: boolean;
+    asToggle?: boolean;
+    iconOnly?: boolean;
+    multiline?: boolean;
+    block?: boolean;
+    onClick?: Function;
+    bsStyle?: 'default' | 'primary' | 'secondary' | 'info' | 'warning' | 'danger' | 'success' | 'muted';
+    bsSize?: 'xs' | 'sm' | 'md' | 'lg';
+    variant?: 'link' | 'link-inline' | 'outline' | 'action';
+    className?: string;
+}
+
 // C --------------------------------------------------------------------------------------------------
 
 export interface CarouselProps {
@@ -290,6 +350,7 @@ export interface CheckboxProps {
     indeterminate?: boolean;
     inline?: boolean;
     right?: boolean;
+    custom?: boolean;
     onClick?: Function;
     error?: boolean;
     size?: string;
@@ -687,6 +748,8 @@ export interface LoadMoreButtonProps {
 
 // M --------------------------------------------------------------------------------------------------
 
+export interface MaintenanceStateProps extends BaseStateProps {}
+
 export type markerColor =
     | 'bg-map-marker-asset'
     | 'bg-map-marker-poi'
@@ -943,7 +1006,7 @@ export interface NotificationsContainerProps {
 
 export type notificationTriggerFunction = (
     message: string | JSX.Element | JSX.Element[],
-    title?: string,
+    title?: string | JSX.Element | JSX.Element[],
     timeOut?: number,
     callback?: Function,
     priority?: boolean
@@ -1117,6 +1180,7 @@ export interface PieChartProps {
     nameKey: string;
     color?: Function | string;
     filled?: boolean;
+    labels?: boolean;
     innerLabels?: boolean;
     paddingAngle?: number;
     legend?: Legend | boolean;
@@ -1197,6 +1261,7 @@ export interface RadioButtonProps {
     className?: string;
     inline?: boolean;
     right?: boolean;
+    custom?: boolean;
     name?: string;
     value?: string | string[] | number;
     tabIndex?: number;
@@ -1797,6 +1862,7 @@ export interface TimePickerProps {
     onComplete?: Function;
     value?: string;
     alwaysShowMask?: boolean;
+    showIcon?: boolean;
     className?: string;
     inputProps?: TimePickerInputProps;
 }
@@ -1936,6 +2002,43 @@ export interface TypeCounterProps {
 
 // U --------------------------------------------------------------------------------------------------
 
+export type UseAfterMount = (
+    callback: () => void,
+    deps?: any[]
+) => void;
+
+export type UseClickOutside<T extends HTMLElement = any> = (
+    callback: () => void,
+    events?: ['mousedown', 'touchstart']
+) => React.MutableRefObject<T>;
+
+export type UseClipboard = (options: { timeout: number }) => {
+    copy: (valueToCopy: any) => void;
+    reset: () => void;
+    error: Error;
+    copied: boolean;
+};
+
+export type UseDebugInfo = (
+    componentName: string,
+    props: object
+) => {
+    count: number,
+    changedProps: any,
+    timeSinceLastRender: number,
+    lastRenderTimestamp: number,
+};
+
+export type UseEffectOnce = (
+    callback: () => void
+) => void;
+
+export type UseElementSize = (
+    elementRef: { current: Element; }
+) => [number, number];
+
+export type UseEsc<T extends keyof WindowEventMap> = (callback: (event: WindowEventMap[T]) => any) => void;
+
 export type UseEvent<T extends keyof WindowEventMap> = (
     eventType: T,
     callback: (event: WindowEventMap[T]) => any,
@@ -1943,36 +2046,50 @@ export type UseEvent<T extends keyof WindowEventMap> = (
     target?: HTMLElement
 ) => void;
 
+export type UseInterval = (
+    callback: () => void,
+    delay?: number
+) => React.MutableRefObject<object>;
+
 export type UseKey<T extends keyof WindowEventMap> = (
     callback: (event: WindowEventMap[T]) => any,
     eventTypes?: [T],
     node?: any
 ) => void;
 
-export type UseWindowResize = (
-    callback: () => void,
-    timeout?: number
-) => void;
+export type UseOnlineStatus = () => boolean;
 
-export type useElementSize = (
-    elementRef: { current: Element; }
-) => [number, number];
+export type UseOnScreen = (
+    ref: React.MutableRefObject<object>,
+    options?: {
+        rootMargins?: string,
+        threshold?: number | number[]
+    }
+) => boolean;
 
-export type useAfterMount = (
-    callback: () => void,
-    deps?: any[]
-) => void;
+export type UseRenderCount = () => number;
 
-export type UseEsc<T extends keyof WindowEventMap> = (callback: (event: WindowEventMap[T]) => any) => void;
+export type UseStateWithValidation = (
+    validationFn: Function,
+    initialValue: any
+) => [any, Function, boolean];
 
-export type UseClickOutside<T extends HTMLElement = any> = (
+export type UseLocalStorage = (
+    key: string,
+    defaultValue: any
+) => [any, Function, Function];
+
+export type UseSessionStorage = (
+    key: string,
+    defaultValue: any
+) => [any, Function, Function];
+
+export type UseTimeout = (
     callback: () => void,
-    events?: ['mousedown', 'touchstart']
-) => React.MutableRefObject<T>;
+    delay?: number
+) => React.MutableRefObject<object>;
 
-export type UseClipboard = (options: { timeout: number }) => {
-    copy: (valueToCopy: any) => void;
-    reset: () => void;
-    error: Error;
-    copied: boolean;
-};
+export type UseWindowResize = (
+    callback: () => void,
+    timeout?: number
+) => void;

package/lib/utils/SortUtils.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SortDirection = void 0;
+exports.naturalSortByProperty = naturalSortByProperty;
+exports.sortByProperty = sortByProperty;
+
+var _orderBy = _interopRequireDefault(require("lodash/fp/orderBy"));
+
+var _naturalOrderby = require("natural-orderby");
+
+var SortDirection = {
+  ASCENDING: 'asc',
+  DESCENDING: 'desc'
+};
+exports.SortDirection = SortDirection;
+
+var toLowerCaseProp = function toLowerCaseProp(element, prop) {
+  if (typeof element[prop] === 'string') {
+    return element[prop].toLowerCase();
+  }
+
+  return element[prop];
+};
+
+function sortByProperty(array, property) {
+  var sortDirection = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : SortDirection.ASCENDING;
+  var isCaseSensitiv = arguments.length > 3 ? arguments[3] : undefined;
+
+  if (!isCaseSensitiv) {
+    return (0, _orderBy.default)(function (element) {
+      return toLowerCaseProp(element, property);
+    }, sortDirection, array);
+  }
+
+  return (0, _orderBy.default)(property, sortDirection, array);
+}
+
+function naturalSortByProperty(array, property) {
+  var sortDirection = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : SortDirection.ASCENDING;
+  var isCaseSensitiv = arguments.length > 3 ? arguments[3] : undefined;
+
+  if (!isCaseSensitiv) {
+    return (0, _naturalOrderby.orderBy)(array, function (element) {
+      return toLowerCaseProp(element, property);
+    }, sortDirection);
+  }
+
+  return (0, _naturalOrderby.orderBy)(array, property, sortDirection);
+}

package/lib/utils/buttonEffect.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.registerButtonEffect = exports.createButtonRipple = void 0;
+
+var createButtonRipple = function createButtonRipple(event, target) {
+  var button = target || event.currentTarget;
+  var buttonRect = button.getBoundingClientRect();
+  var circle = document.createElement('span');
+  var diameter = Math.max(button.clientWidth, button.clientHeight);
+  var radius = diameter / 2;
+  circle.style.width = circle.style.height = "".concat(diameter, "px");
+  circle.style.left = "".concat(event.clientX - buttonRect.left - radius, "px");
+  circle.style.top = "".concat(event.clientY - buttonRect.top - radius, "px");
+  circle.classList.add('btn-ripple');
+  var rippleElement = button.getElementsByClassName('btn-ripple')[0]; // Cleanup previous ripple element from current button in case there
+  // are multiple clicks on the button itself
+
+  if (rippleElement) {
+    rippleElement.remove();
+  }
+
+  button.appendChild(circle); // Cleanup ripple element after some time
+
+  setTimeout(function () {
+    return circle.remove();
+  }, 1000);
+};
+
+exports.createButtonRipple = createButtonRipple;
+
+var isTargetEligibleForEffect = function isTargetEligibleForEffect(target) {
+  if (!target || !target.className) {
+    return false;
+  }
+
+  var className = target.className;
+  var isButton = className.includes('btn ');
+  var isNotButtonComponent = !className.includes('btn-component');
+  var isNotDisabled = !className.includes('disabled');
+  return isButton && isNotButtonComponent && isNotDisabled;
+};
+
+var enableButtonRipple = function enableButtonRipple(event) {
+  var target = event.target;
+
+  if (target) {
+    var isButton = isTargetEligibleForEffect(target);
+    var isChildOfButton = !isButton && isTargetEligibleForEffect(target.parentElement);
+
+    if (isButton || isChildOfButton) {
+      createButtonRipple(event, isChildOfButton ? target.parentElement : target);
+    }
+  }
+};
+
+var registerButtonEffect = function (document) {
+  if (!document) {
+    return;
+  }
+
+  document.addEventListener('mousedown', enableButtonRipple, false);
+  document.addEventListener('touchstart', enableButtonRipple, false);
+}(document);
+
+exports.registerButtonEffect = registerButtonEffect;

package/lib/utils/deviceUtils.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.autoInitDocumentBootstrapping = exports.initdocumentBootstrapping = exports.inIframe = exports.isDesktop = exports.hasTouch = void 0;
+exports.isDesktop = exports.initdocumentBootstrapping = exports.inIframe = exports.hasTouch = exports.autoInitDocumentBootstrapping = void 0;
 
 var _throttle = _interopRequireDefault(require("lodash/fp/throttle"));
 
@@ -72,10 +72,6 @@ var initdocumentBootstrapping = function initdocumentBootstrapping(document) {
   var html = document.documentElement;
 
   var setViewportUnits = function setViewportUnits() {
-    // eslint-disable-next-line max-len
-    // https://stackoverflow.com/questions/43054620/strict-mode-error-only-in-ie11-can-i-take-off-strict-mode-just-for-this-browser?rq=1
-    // IE11 does not allow to set style directly as it's read only
-    //html.style = calcViewportUnits();
     html.setAttribute('style', calcViewportUnits());
   };
 

package/lib/utils/logDeprecatedWarnings.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.logDeprecatedWarnings = exports.BASE_URL = void 0;
+exports.logDeprecatedWarnings = exports.default = exports.BASE_URL = void 0;
 
 var _has = _interopRequireDefault(require("lodash/fp/has"));
 

package/lib/utils/logPropError.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.logPropError = exports.BASE_URL = void 0;
+exports.logPropError = exports.default = exports.BASE_URL = void 0;
 
 var _has = _interopRequireDefault(require("lodash/fp/has"));
 

package/lib/utils/routeUtils.js

@@ -5,9 +5,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.getSortDirShort = void 0;
 exports.mapColumnsSettingsToStrings = mapColumnsSettingsToStrings;
 exports.parseColumnsSettingsStrings = parseColumnsSettingsStrings;
-exports.parseSorting = exports.getSortDirShort = void 0;
+exports.parseSorting = void 0;
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
@@ -19,20 +20,20 @@ var _get = _interopRequireDefault(require("lodash/fp/get"));
 
 var _isFinite = _interopRequireDefault(require("lodash/fp/isFinite"));
 
-var _SortUtil = require("./SortUtil");
+var _SortUtils = require("./SortUtils");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var getSortDirShort = function getSortDirShort(sortDir) {
-  return sortDir === _SortUtil.SortDirection.DESCENDING ? '-' : '+';
+  return sortDir === _SortUtils.SortDirection.DESCENDING ? '-' : '+';
 };
 
 exports.getSortDirShort = getSortDirShort;
 
 var parseSorting = function parseSorting(sortValueShort) {
-  var sortDir = sortValueShort.startsWith('-') ? _SortUtil.SortDirection.DESCENDING : _SortUtil.SortDirection.ASCENDING; // Note: due to a bug in qs 6.7.0 the '+' sorting will be parsed as a space by qs even though decoding is disabled
+  var sortDir = sortValueShort.startsWith('-') ? _SortUtils.SortDirection.DESCENDING : _SortUtils.SortDirection.ASCENDING; // Note: due to a bug in qs 6.7.0 the '+' sorting will be parsed as a space by qs even though decoding is disabled
   // therefore, we need to trim the value
 
   return {

package/lib/utils/scrollItemIntoView.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.UP = exports.DOWN = void 0;
 exports.default = scrollItemIntoView;
-exports.DOWN = exports.UP = void 0;
 var UP = 'up';
 exports.UP = UP;
 var DOWN = 'down'; // Scroll to selected dropdown menu-item in case the item is not visible due to overflow

package/lib/version.json

@@ -1,3 +1,3 @@
 {
-"version": "0.15.0-beta-46"
+"version": "0.15.0"
 }