@rio-cloud/rio-uikit 0.15.0 → 0.16.0-beta-2

package/lib/types.ts

@@ -505,6 +505,8 @@ export interface DatePickerProps extends DatetimepickerProps {
     clearableInput?: boolean;
     minWidth?: number;
     onChange?: (value: Moment | string) => void;
+    mandatory?: boolean;
+    dateValidation?: (date: Date | string | Moment) => boolean;
 }
 
 export interface DateRangePickerCustomPresets {
@@ -696,7 +698,20 @@ export interface Line {
     dataUnit?: string;
     strokeColor: string;
     legendType: 'line' | 'plainline' | 'square' | 'rect' | 'circle' | 'cross' | 'diamond' | 'star' | 'triangle' | 'wye';
-    type: 'basis' | 'basisClosed' | 'basisOpen' | 'linear' | 'linearClosed' | 'natural' | 'monotoneX' | 'monotoneY' | 'monotone' | 'step' | 'stepBefore' | 'stepAfter' | Function;
+    type:
+        | 'basis'
+        | 'basisClosed'
+        | 'basisOpen'
+        | 'linear'
+        | 'linearClosed'
+        | 'natural'
+        | 'monotoneX'
+        | 'monotoneY'
+        | 'monotone'
+        | 'step'
+        | 'stepBefore'
+        | 'stepAfter'
+        | Function;
     isAnimationActive?: boolean;
     onClick?: Function;
 }
@@ -723,12 +738,14 @@ export interface ListMenuItems {
     group?: string | React.ReactNode;
     groupNavItem?: React.ReactNode;
     navItems: NavItems[];
+    isSubItem?: boolean;
 }
 
 export interface ListMenuProps {
     menuItems: ListMenuItems[];
     enableFilter?: boolean;
     focusFilter?: boolean;
+    filterKey?: string;
     filterPlaceholder?: string;
     notFoundMessage?: string | React.ReactNode;
     groupClassName?: string;
@@ -1016,7 +1033,7 @@ export interface NotBookedStateProps {
     headline: string | React.ReactNode;
     message: string | React.ReactNode;
     buttons?: object[];
-    features?: Array<React.ReactNode>;
+    features?: React.ReactNode[];
     condensed?: boolean;
     fullWidth?: boolean;
     image?: React.ReactNode;
@@ -1126,7 +1143,7 @@ export interface OnboardingTipProps {
     children?: any;
     width?: tooltipWidth;
     preventOverflow?: boolean;
-    popperConfig?: any;
+    popperConfig?: object;
 }
 
 interface delayProp {
@@ -1286,7 +1303,7 @@ export interface ReleaseNotesProps {
     releaseNotes: {
         [key: string]: {
             date: string;
-            content: Array<HTMLElement | React.ReactElement>;
+            content: (HTMLElement | React.ReactElement)[];
         };
     };
 }
@@ -1300,7 +1317,7 @@ export interface ReleaseNotesDialogProps {
     translatedReleaseNotes: {
         [key: string]: {
             date: string;
-            content: Array<HTMLElement | React.ReactElement>;
+            content: (HTMLElement | React.ReactElement)[];
         };
     };
     currentVersion: string;
@@ -1465,7 +1482,7 @@ export interface SimpleButtonDropdownProps {
     iconOnly?: boolean;
     noCaret?: boolean;
     splitButton?: boolean;
-    autoDropDirection?: boolean;
+    usePortal?: boolean;
     items: MenuItemProps[];
     className?: string;
     dropdownClassName?: string;
@@ -1475,6 +1492,7 @@ export interface SimpleButtonDropdownProps {
     onOpen?: Function;
     onClose?: Function;
     customDropdown?: React.ReactNode;
+    popperConfig?: object;
 }
 
 export interface SimpleClusterLayerProps {
@@ -1568,8 +1586,10 @@ export interface SimpleTooltipProps {
         | OverlayTriggerPlacement.LEFT_START
         | OverlayTriggerPlacement.LEFT
         | OverlayTriggerPlacement.LEFT_END;
-    overlay: React.ReactNode;
+    content: string | React.ReactNode;
     trigger?: 'click' | 'hover' | 'focus';
+    targetRef?: React.MutableRefObject<object>;
+    children: React.ReactNode;
 }
 
 export interface SaveDialogProps {
@@ -1601,18 +1621,6 @@ export interface SpinnerProps {
     text?: string;
 }
 
-export interface SingleMapMarkerProps {
-    bearing?: number;
-    name?: string | React.ReactNode;
-    warningCount?: number;
-    exceptionCount?: number;
-    active?: boolean;
-    clickable?: boolean;
-    moving?: boolean;
-    iconNames?: string[];
-    markerColor?: markerColor;
-}
-
 export enum SortDirection {
     ASCENDING = 'asc',
     DESCENDING = 'desc',
@@ -2002,10 +2010,7 @@ export interface TypeCounterProps {
 
 // U --------------------------------------------------------------------------------------------------
 
-export type UseAfterMount = (
-    callback: () => void,
-    deps?: any[]
-) => void;
+export type UseAfterMount = (callback: () => void, deps?: any[]) => void;
 
 export type UseClickOutside<T extends HTMLElement = any> = (
     callback: () => void,
@@ -2023,19 +2028,15 @@ export type UseDebugInfo = (
     componentName: string,
     props: object
 ) => {
-    count: number,
-    changedProps: any,
-    timeSinceLastRender: number,
-    lastRenderTimestamp: number,
+    count: number;
+    changedProps: any;
+    timeSinceLastRender: number;
+    lastRenderTimestamp: number;
 };
 
-export type UseEffectOnce = (
-    callback: () => void
-) => void;
+export type UseEffectOnce = (callback: () => void) => void;
 
-export type UseElementSize = (
-    elementRef: { current: Element; }
-) => [number, number];
+export type UseElementSize = (elementRef: { current: Element }) => [number, number];
 
 export type UseEsc<T extends keyof WindowEventMap> = (callback: (event: WindowEventMap[T]) => any) => void;
 
@@ -2046,10 +2047,7 @@ export type UseEvent<T extends keyof WindowEventMap> = (
     target?: HTMLElement
 ) => void;
 
-export type UseInterval = (
-    callback: () => void,
-    delay?: number
-) => React.MutableRefObject<object>;
+export type UseInterval = (callback: () => void, delay?: number) => React.MutableRefObject<object>;
 
 export type UseKey<T extends keyof WindowEventMap> = (
     callback: (event: WindowEventMap[T]) => any,
@@ -2062,34 +2060,19 @@ export type UseOnlineStatus = () => boolean;
 export type UseOnScreen = (
     ref: React.MutableRefObject<object>,
     options?: {
-        rootMargins?: string,
-        threshold?: number | number[]
+        rootMargins?: string;
+        threshold?: number | number[];
     }
 ) => boolean;
 
 export type UseRenderCount = () => number;
 
-export type UseStateWithValidation = (
-    validationFn: Function,
-    initialValue: any
-) => [any, Function, boolean];
+export type UseStateWithValidation = (validationFn: Function, initialValue: any) => [any, Function, boolean];
 
-export type UseLocalStorage = (
-    key: string,
-    defaultValue: any
-) => [any, Function, Function];
+export type UseLocalStorage = (key: string, defaultValue: any) => [any, Function, Function];
 
-export type UseSessionStorage = (
-    key: string,
-    defaultValue: any
-) => [any, Function, Function];
+export type UseSessionStorage = (key: string, defaultValue: any) => [any, Function, Function];
 
-export type UseTimeout = (
-    callback: () => void,
-    delay?: number
-) => React.MutableRefObject<object>;
+export type UseTimeout = (callback: () => void, delay?: number) => React.MutableRefObject<object>;
 
-export type UseWindowResize = (
-    callback: () => void,
-    timeout?: number
-) => void;
+export type UseWindowResize = (callback: () => void, timeout?: number) => void;

package/lib/utils/buttonEffect.js

@@ -37,10 +37,17 @@ var isTargetEligibleForEffect = function isTargetEligibleForEffect(target) {
   }
 
   var className = target.className;
-  var isButton = className.includes('btn ');
-  var isNotButtonComponent = !className.includes('btn-component');
-  var isNotDisabled = !className.includes('disabled');
-  return isButton && isNotButtonComponent && isNotDisabled;
+
+  if (typeof className === 'string' || typeof className === 'array') {
+    var isButton = className.includes('btn ');
+    var isNotButtonComponent = !className.includes('btn-component');
+    var isNotLinkButton = !className.includes('btn-link');
+    var isNotActionButton = !className.includes('btn-action');
+    var isNotDisabled = !className.includes('disabled');
+    return isButton && isNotButtonComponent && isNotDisabled && isNotLinkButton && isNotActionButton;
+  }
+
+  return false;
 };
 
 var enableButtonRipple = function enableButtonRipple(event) {

package/lib/utils/deviceUtils.js

@@ -1,13 +1,9 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isDesktop = exports.initdocumentBootstrapping = exports.inIframe = exports.hasTouch = exports.autoInitDocumentBootstrapping = void 0;
-
-var _throttle = _interopRequireDefault(require("lodash/fp/throttle"));
+exports.toggleZoomOnMobile = exports.isMobile = exports.isDesktop = exports.inIframe = exports.hasTouch = void 0;
 
 // As "cssuseragent" is accessing the html dom object directly without checking whether it exists or not, we need to
 // use old shool require() to have a conditional import only when html really exists. This avoids issues when
@@ -42,6 +38,12 @@ var hasTouch = function hasTouch() {
 
 exports.hasTouch = hasTouch;
 
+var isMobile = function isMobile() {
+  return document && document.documentElement.classList.contains('ua-mobile');
+};
+
+exports.isMobile = isMobile;
+
 var isDesktop = function isDesktop() {
   return document && document.documentElement.classList.contains('ua-desktop');
 };
@@ -51,47 +53,40 @@ exports.isDesktop = isDesktop;
 var inIframe = function inIframe() {
   try {
     return window.self !== window.top;
-  } catch (e) {
+  } catch (_) {
     return true;
   }
-}; // https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
+}; // Disables the Zoom for the mobile devices.
+// This is not good for accessibility but makes the webpage feel more like a native app.
+// <meta name="viewport" content="user-scalable=0 ..." />
 
 
 exports.inIframe = inIframe;
+var USER_SCALABLE = 'user-scalable=0 maximum-scale=1';
 
-var calcViewportUnits = function calcViewportUnits() {
-  var vh = window.innerHeight * 0.01;
-  return "--vh: ".concat(vh, "px");
-};
-
-var initdocumentBootstrapping = function initdocumentBootstrapping(document) {
-  if (!document || !document.documentElement) {
+var toggleZoomOnMobile = function toggleZoomOnMobile() {
+  if (!document) {
     return;
   }
 
-  var html = document.documentElement;
+  var viewportMeta = document.head.querySelector('[name="viewport"]');
 
-  var setViewportUnits = function setViewportUnits() {
-    html.setAttribute('style', calcViewportUnits());
-  };
+  if (!viewportMeta) {
+    return;
+  }
 
-  window.addEventListener('orientationchange', (0, _throttle.default)(1000, setViewportUnits));
-  window.addEventListener('resize', (0, _throttle.default)(1000, setViewportUnits));
-  setViewportUnits();
+  var isScalable = viewportMeta.content.includes(USER_SCALABLE); // Restrict the zoom for mobile if not yet set
+
+  if (isMobile() && !isScalable) {
+    viewportMeta.content += " ".concat(USER_SCALABLE);
+    return;
+  } // Remove the setting, for non mobile cases
 
-  if (!window.CSS || !window.CSS.supports || !window.CSS.supports('gap: 1px')) {
-    html.classList.add('css-no-gap');
-  }
 
-  if (html && inIframe()) {
-    html.classList.add('window-iframe');
+  if (!isMobile() && isScalable) {
+    viewportMeta.content = viewportMeta.content.replace(USER_SCALABLE, '').trim();
+    return;
   }
 };
 
-exports.initdocumentBootstrapping = initdocumentBootstrapping;
-
-var autoInitDocumentBootstrapping = function (document) {
-  initdocumentBootstrapping(document);
-}(document);
-
-exports.autoInitDocumentBootstrapping = autoInitDocumentBootstrapping;
+exports.toggleZoomOnMobile = toggleZoomOnMobile;

package/lib/utils/init.js

@@ -0,0 +1,174 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.initDocumentBootstrapping = exports.autoInitDocumentBootstrapping = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _throttle = _interopRequireDefault(require("lodash/fp/throttle"));
+
+var _deviceUtils = require("./deviceUtils");
+
+var _version = _interopRequireDefault(require("../version.json"));
+
+var uikitVersion = _version.default.version;
+
+var isProdEnv = function isProdEnv() {
+  return process.env.NODE_ENV === 'production';
+};
+
+var isTestEnv = function isTestEnv() {
+  return process.env.NODE_ENV === 'test';
+};
+
+var isLocalhost = function isLocalhost() {
+  var _window, _window$location;
+
+  return ((_window = window) === null || _window === void 0 ? void 0 : (_window$location = _window.location) === null || _window$location === void 0 ? void 0 : _window$location.hostname) === 'localhost';
+}; // https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
+
+
+var calcViewportUnits = function calcViewportUnits() {
+  var vh = window.innerHeight * 0.01;
+  return "--vh: ".concat(vh, "px");
+};
+
+var logStyled = function logStyled(log) {
+  return console.log('%c%s', 'color: #697a8b;', log);
+};
+
+var printPoweredByRIO = function printPoweredByRIO() {
+  logStyled('- - - - - - - - - - - - - - - - - - - - - - -');
+  !isLocalhost() && logStyled("  ____  ___ ___    _   _ ___ _  _____ _____\n |  _ \\|_ _/ _ \\  | | | |_ _| |/ /_ _|_   _|\n | |_) || | | | | | | | || || ' / | |  | |\n |  _ < | | |_| | | |_| || || . \\ | |  | |\n |_| \\_\\___\\___/   \\___/|___|_|\\_\\___| |_|\n");
+  var message = [" Version ".concat(uikitVersion, " | https://uikit.developers.rio.cloud")];
+  isProdEnv() && message.push('\n\n You are a Developer? RIO is hiring! | https://rio.cloud/en/career');
+  logStyled(message.join(''));
+  logStyled('- - - - - - - - - - - - - - - - - - - - - -');
+};
+
+var checkForReleaseVersion = /*#__PURE__*/function () {
+  var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+    var remoteVersionsListUrl, response, data;
+    return _regenerator.default.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            if (isProdEnv()) {
+              _context.next = 2;
+              break;
+            }
+
+            return _context.abrupt("return");
+
+          case 2:
+            remoteVersionsListUrl = 'https://uikit.developers.rio.cloud/versionsList.json';
+            _context.prev = 3;
+            _context.next = 6;
+            return fetch(remoteVersionsListUrl, {
+              method: 'get',
+              mode: 'no-cors'
+            });
+
+          case 6:
+            response = _context.sent;
+            _context.next = 9;
+            return response.json();
+
+          case 9:
+            data = _context.sent;
+
+            if (data.latest_release !== uikitVersion) {
+              console.log("\uD83C\uDD95 UIKIT version ".concat(data.latest_release, " is the latest released version! Your are using ").concat(uikitVersion));
+            }
+
+            _context.next = 16;
+            break;
+
+          case 13:
+            _context.prev = 13;
+            _context.t0 = _context["catch"](3);
+            // console.warn(error);
+            console.warn("Faild to fetch versionsList from ".concat(remoteVersionsListUrl));
+
+          case 16:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee, null, [[3, 13]]);
+  }));
+
+  return function checkForReleaseVersion() {
+    return _ref.apply(this, arguments);
+  };
+}();
+
+var checkMatchingUkitVersions = function checkMatchingUkitVersions() {
+  Array.from(document.querySelectorAll('link[rel="stylesheet"]')).forEach(function (cssLink) {
+    var href = cssLink.href;
+
+    if (href.includes('uikit.developers.rio.cloud')) {
+      var _URL$pathname$split = new URL(href).pathname.split('/'),
+          _URL$pathname$split2 = (0, _slicedToArray2.default)(_URL$pathname$split, 2),
+          uikitVersionCSS = _URL$pathname$split2[1];
+
+      if (!href.includes(uikitVersion)) {
+        console.warn(['You are using different UIKIT JS and CSS versions.\n', "Your current JS version is ".concat(uikitVersion, " and "), "your current CSS version is ".concat(uikitVersionCSS, ".\n"), 'If this is not on purpose, please fix it. Otherwise, this may lead to UI bugs.'].join(''));
+      }
+    } else if (href.includes('cdn.rio.cloud/libs/rio-uikit')) {
+      console.error('You are still using an old "cdn.rio.cloud" css import. This will lead to mayor UI bugs!');
+    }
+  });
+};
+
+var initDocumentBootstrapping = function initDocumentBootstrapping(document) {
+  if (!document || !document.documentElement) {
+    return;
+  }
+
+  if (!isTestEnv()) {
+    console.group('UIKIT');
+    console.log('Init document bootstrapping');
+  }
+
+  var html = document.documentElement;
+
+  var setViewportUnits = function setViewportUnits() {
+    return html.setAttribute('style', calcViewportUnits());
+  };
+
+  window.addEventListener('orientationchange', (0, _throttle.default)(1000, setViewportUnits));
+  window.addEventListener('resize', (0, _throttle.default)(1000, setViewportUnits));
+  setViewportUnits();
+
+  if (!window.CSS || !window.CSS.supports || !window.CSS.supports('gap: 1px')) {
+    html.classList.add('css-no-gap');
+  }
+
+  if (html && (0, _deviceUtils.inIframe)()) {
+    html.classList.add('window-iframe');
+  }
+
+  if (!isTestEnv()) {
+    printPoweredByRIO();
+    checkForReleaseVersion();
+    checkMatchingUkitVersions();
+    console.groupEnd('UIKIT');
+  }
+};
+
+exports.initDocumentBootstrapping = initDocumentBootstrapping;
+
+var autoInitDocumentBootstrapping = function (document) {
+  initDocumentBootstrapping(document);
+}(document);
+
+exports.autoInitDocumentBootstrapping = autoInitDocumentBootstrapping;

package/lib/version.json

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