@rio-cloud/rio-uikit 0.16.1-beta.24 → 0.16.2-beta.2

package/types.ts

@@ -588,7 +588,7 @@ export interface DomMarkerProps {
 
 export interface DropdownSubmenuProps {
     title?: string | React.ReactNode;
-    items?: MenuItemProps[];
+    items?: MenuItem[];
     disabled?: boolean;
     className?: string;
 }
@@ -769,15 +769,15 @@ export interface LineChartProps {
     tooltip?: ChartTooltip | boolean;
 }
 
-export interface ListMenuItems {
+export interface ListMenuItem {
     group?: string | React.ReactNode;
     groupNavItem?: React.ReactNode;
-    navItems: NavItems[];
+    navItems: NavItem[];
     isSubItem?: boolean;
 }
 
 export interface ListMenuProps {
-    menuItems: ListMenuItems[];
+    menuItems: ListMenuItem[];
     enableFilter?: boolean;
     focusFilter?: boolean;
     filterKey?: string;
@@ -808,7 +808,7 @@ export type markerColor =
     | 'bg-map-marker-geofence'
     | 'bg-map-marker-route';
 
-export interface MediaDialogMediaProps {
+export interface MediaDialogMedia {
     type: 'image' | 'video';
     src: string;
     title: string | React.ReactNode;
@@ -818,7 +818,7 @@ export interface MediaDialogMediaProps {
 }
 
 export interface MediaDialogProps extends BaseDialogProps {
-    media: MediaDialogMediaProps[];
+    media: MediaDialogMedia[];
     previousButtonText: string | React.ReactNode;
     previousButtonCallback?: Function;
     nextButtonText: string | React.ReactNode;
@@ -984,7 +984,7 @@ export interface MarkerLayerProps {
     clusterDissolvable?: boolean;
 }
 
-export interface MenuItemProps {
+export interface MenuItem {
     value?: string | React.ReactNode;
     disabled?: boolean;
     divider?: boolean;
@@ -1005,7 +1005,7 @@ interface MultiselectCounterMessage {
     many: string | React.ReactNode;
 }
 
-interface MultiselectOption {
+export interface MultiselectOption {
     id: string;
     label: string | React.ReactNode;
     selected?: boolean;
@@ -1023,7 +1023,7 @@ export interface MultiselectProps {
     pullRight?: boolean;
     autoDropDirection?: boolean;
     value?: [];
-    bsSize?: 'sm' | 'lg' | 'small' | 'large';
+    bsSize?: 'sm' | 'lg';
     disabled?: boolean;
     className?: string;
     tabIndex?: number;
@@ -1038,7 +1038,7 @@ export interface MultiselectProps {
 
 // N --------------------------------------------------------------------------------------------------
 
-export interface NavItems {
+export interface NavItem {
     key: string;
     item: React.ReactNode;
     disabled?: boolean;
@@ -1083,7 +1083,7 @@ export interface NumberControlProps {
     step?: number;
     disabled?: boolean;
     onValueChanged?: (value: number) => void;
-    bsSize?: 'sm' | 'lg' | 'small' | 'large';
+    bsSize?: 'sm' | 'lg';
     className?: string;
     unit?: string | React.ReactNode;
     inputAddon?: string;
@@ -1097,7 +1097,7 @@ export interface NumberInputProps {
     type?: string;
     disabled?: boolean;
     onValueChanged?: (value: number) => void;
-    bsSize?: 'sm' | 'lg' | 'small' | 'large';
+    bsSize?: 'sm' | 'lg';
     className?: string;
     unit?: string | React.ReactNode;
     inputAddon?: string;
@@ -1557,7 +1557,7 @@ export interface SimpleButtonDropdownProps {
     noCaret?: boolean;
     splitButton?: boolean;
     usePortal?: boolean;
-    items: MenuItemProps[];
+    items: MenuItem[];
     className?: string;
     dropdownClassName?: string;
     disabled?: boolean;
@@ -1891,15 +1891,15 @@ export interface TagListProps {
     className?: string;
 }
 
-export interface TagManagerTagProp {
+export interface TagManagerTag {
     label?: string;
     toAdd?: boolean;
     toRemove?: boolean;
 }
 
 export interface TagManagerProps {
-    tagList: TagManagerTagProp[];
-    tagSuggestions: TagManagerTagProp[];
+    tagList: TagManagerTag[];
+    tagSuggestions: TagManagerTag[];
     onTagListChange?: Function;
     placeholder?: string;
     customTagPlaceholder?: string;
@@ -2192,3 +2192,7 @@ export type UseSessionStorage = (key: string, defaultValue: any) => [any, Functi
 export type UseTimeout = (callback: () => void, delay?: number) => React.MutableRefObject<object>;
 
 export type UseWindowResize = (callback: () => void, timeout?: number) => void;
+
+export type UseScrollPosition = (
+    target: Window | HTMLBodyElement | React.ReactElement | React.MutableRefObject<object> | undefined
+) => number;

package/useScrollPosition.d.ts

@@ -0,0 +1,4 @@
+declare module '@rio-cloud/rio-uikit/useScrollPosition' {
+    import { UseScrollPosition } from './types';
+    export default UseScrollPosition;
+}

package/useScrollPosition.js

@@ -0,0 +1,2 @@
+import { default as _useScrollPosition } from './hooks/useScrollPosition';
+export { _useScrollPosition as default };

package/utils/colorScheme.js

@@ -0,0 +1,48 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+var COOKIE_NAME = 'uikit-color-scheme';
+var THEME_DATA_ATTRIBUTE = 'data-theme';
+var PATH = '/';
+var DOMAIN = '.rio.cloud';
+var EXPIRATION_DATE = 'Thu, 18 Dec 2030 12:00:00 UTC';
+export var getColorScheme = function getColorScheme() {
+  return readColorSchemeFromCookie();
+};
+export var setColorScheme = function setColorScheme(scheme) {
+  return writeColorSchemeToCookie(scheme);
+};
+var readColorSchemeFromCookie = function readColorSchemeFromCookie() {
+  var decodedCookie = decodeURIComponent(document.cookie);
+  console.log(decodedCookie);
+  var _decodedCookie$split$ = decodedCookie.split(';').filter(function (entry) {
+      return entry.includes(COOKIE_NAME);
+    }),
+    _decodedCookie$split$2 = _slicedToArray(_decodedCookie$split$, 1),
+    uikitCname = _decodedCookie$split$2[0];
+  if (!uikitCname) {
+    return;
+  }
+  var _uikitCname$split = uikitCname.split('='),
+    _uikitCname$split2 = _slicedToArray(_uikitCname$split, 2),
+    colorScheme = _uikitCname$split2[1];
+  console.log("readColorSchemeFromCookie: ".concat(colorScheme));
+  if (!colorScheme) {
+    return;
+  }
+  var html = document.documentElement;
+  if (colorScheme === 'default' || colorScheme === 'system') {
+    html.removeAttribute(THEME_DATA_ATTRIBUTE);
+    return colorScheme;
+  }
+  if (colorScheme === 'light' || colorScheme === 'dark') {
+    html.setAttribute(THEME_DATA_ATTRIBUTE, colorScheme);
+    return colorScheme;
+  }
+};
+
+// This should be done by a RIO service like User Profile SPA using a theme switcher component from the uikit
+// where this function is referenced
+var writeColorSchemeToCookie = function writeColorSchemeToCookie(scheme) {
+  var newCookieValues = encodeURIComponent("".concat(scheme, ";domain=").concat(DOMAIN, ";expires=").concat(EXPIRATION_DATE, ";path=").concat(PATH));
+  document.cookie = "".concat(COOKIE_NAME, "=").concat(newCookieValues);
+  // console.log(`writeColorSchemeToCookie: ${newCookieValues}`);
+};

package/utils/init.js

@@ -4,6 +4,7 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 import throttle from 'lodash/fp/throttle';
 import process from 'process';
 import { inIframe } from './deviceUtils';
+import { getColorScheme } from './colorScheme';
 import versionJson from '../version.json';
 var uikitVersion = versionJson.version;
 
@@ -122,6 +123,7 @@ export var initDocumentBootstrapping = function initDocumentBootstrapping(docume
     html.classList.add('window-iframe');
   }
   if (!isTestEnv()) {
+    getColorScheme();
     printPoweredByRIO();
     checkForReleaseVersion();
     checkMatchingUkitVersions();

package/version.json

@@ -1,3 +1,3 @@
 {
-"version": "0.16.1-beta.24"
+"version": "0.16.2-beta.2"
 }

package/BoxConnector.js

@@ -1,2 +0,0 @@
-import { default as _BoxConnector } from './components/boxConnector/BoxConnector';
-export { _BoxConnector as default };

package/components/boxConnector/BoxConnector.js

@@ -1,40 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["pageBackground", "boxBackground", "icon", "contentClassName", "className", "hasBorder", "borderColor", "children"];
-var getBorderColorFromBg = function getBorderColorFromBg(bg) {
-  return bg.replace('bg', 'border-color');
-};
-var BoxConnector = function BoxConnector(props) {
-  var pageBackground = props.pageBackground,
-    boxBackground = props.boxBackground,
-    icon = props.icon,
-    contentClassName = props.contentClassName,
-    className = props.className,
-    hasBorder = props.hasBorder,
-    borderColor = props.borderColor,
-    children = props.children,
-    remainingProps = _objectWithoutProperties(props, _excluded);
-  return /*#__PURE__*/React.createElement("div", _extends({}, remainingProps, {
-    className: "height-20 display-flex justify-content-center align-items-center position-relative ".concat(className)
-  }), /*#__PURE__*/React.createElement("span", {
-    className: "width-20 height-20 rounded-circle ".concat(pageBackground, " position-relative z-index-1 margin-right--10 ").concat(hasBorder ? "border border-right-only ".concat(borderColor) : '')
-  }), /*#__PURE__*/React.createElement("span", {
-    className: "".concat(boxBackground, " ").concat(hasBorder ? "border ".concat(getBorderColorFromBg(boxBackground)) : '', " padding-left-20 padding-right-20")
-  }, /*#__PURE__*/React.createElement("span", {
-    className: contentClassName
-  }, children ? children : /*#__PURE__*/React.createElement("span", {
-    className: "rioglyph ".concat(icon)
-  }))), /*#__PURE__*/React.createElement("span", {
-    className: "width-20 height-20 rounded-circle ".concat(pageBackground, " position-relative z-index-1 margin-left--10 ").concat(hasBorder ? "border border-left-only ".concat(borderColor) : '')
-  }));
-};
-BoxConnector.defaultProps = {
-  pageBackground: 'bg-white',
-  boxBackground: 'bg-lightest',
-  icon: 'rioglyph-plus',
-  contentClassName: 'text-color-light',
-  hasBorder: false,
-  borderColor: '',
-  className: ''
-};
-export default BoxConnector;

package/lib/es/components/boxConnector/BoxConnector.js

@@ -1,48 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _excluded = ["pageBackground", "boxBackground", "icon", "contentClassName", "className", "hasBorder", "borderColor", "children"];
-var getBorderColorFromBg = function getBorderColorFromBg(bg) {
-  return bg.replace('bg', 'border-color');
-};
-var BoxConnector = function BoxConnector(props) {
-  var pageBackground = props.pageBackground,
-    boxBackground = props.boxBackground,
-    icon = props.icon,
-    contentClassName = props.contentClassName,
-    className = props.className,
-    hasBorder = props.hasBorder,
-    borderColor = props.borderColor,
-    children = props.children,
-    remainingProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, remainingProps, {
-    className: "height-20 display-flex justify-content-center align-items-center position-relative ".concat(className)
-  }), /*#__PURE__*/React.createElement("span", {
-    className: "width-20 height-20 rounded-circle ".concat(pageBackground, " position-relative z-index-1 margin-right--10 ").concat(hasBorder ? "border border-right-only ".concat(borderColor) : '')
-  }), /*#__PURE__*/React.createElement("span", {
-    className: "".concat(boxBackground, " ").concat(hasBorder ? "border ".concat(getBorderColorFromBg(boxBackground)) : '', " padding-left-20 padding-right-20")
-  }, /*#__PURE__*/React.createElement("span", {
-    className: contentClassName
-  }, children ? children : /*#__PURE__*/React.createElement("span", {
-    className: "rioglyph ".concat(icon)
-  }))), /*#__PURE__*/React.createElement("span", {
-    className: "width-20 height-20 rounded-circle ".concat(pageBackground, " position-relative z-index-1 margin-left--10 ").concat(hasBorder ? "border border-left-only ".concat(borderColor) : '')
-  }));
-};
-BoxConnector.defaultProps = {
-  pageBackground: 'bg-white',
-  boxBackground: 'bg-lightest',
-  icon: 'rioglyph-plus',
-  contentClassName: 'text-color-light',
-  hasBorder: false,
-  borderColor: '',
-  className: ''
-};
-var _default = BoxConnector;
-exports["default"] = _default;