diginet-core-ui 1.3.43 → 1.3.45

package/components/slider/slider-container.js

@@ -5,9 +5,34 @@ import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
 import { ButtonIcon } from '..';
-import theme from '../../theme/settings';
 import { randomString } from '../../utils';
 import SliderItem from './slider-item';
+import { color as colors } from '../../styles/colors';
+import { alignCenter, backgroundTransparent, borderBox, cursorPointer, displayNone, flexCol, flexRow, justifyCenter, overflowHidden, positionAbsolute, positionRelative, userSelectNone } from '../../styles/general';
+const {
+  system: {
+    active,
+    rest,
+    white
+  },
+  fill: {
+    pressed: fillPressed
+  }
+} = colors;
+const styles = {
+  iconLeft: {
+    left: 0,
+    position: 'absolute',
+    top: '50%',
+    transform: 'translate(0, -50%)'
+  },
+  iconRight: {
+    right: 0,
+    position: 'absolute',
+    top: '50%',
+    transform: 'translate(0, -50%)'
+  }
+};
 const SliderContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   animation,
   active,
@@ -16,10 +41,8 @@ const SliderContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   className,
   data,
   onShowNavigation,
-  style,
-  ...props
+  style
 }, reference) => {
-  /**@property */
   let autoChange;
   let currentItemIndex = 0;
   const Id = randomString(7, {
@@ -36,107 +59,16 @@ const SliderContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     navigationItem: 'DGN-UI-Slider-navigation-item',
     slideContainer: 'DGN-UI-Slider-slide-container'
   };
-  /**@reference */
-
   const ref = useRef(null);
   const slideContainerRef = useRef(null);
   const navigationRef = useRef(null);
   const navigationListRef = useRef(null);
   const iconLeftRef = useRef(null);
   const iconRightRef = useRef(null);
-  useImperativeHandle(reference, () => ref.current);
-  /**@style */
-
-  const styles = {
-    container: css`
-			* {
-				box-sizing: border-box;
-				margin    : 0;
-				padding   : 0;
-			}
-			align-items     : center;
-			background-color: transparent;
-			display         : flex;
-			flex-direction  : column;
-			height          : 100%;
-			justify-items   : center;
-			position        : relative;
-			resize			: both;
-			.${IDs.icon} {
-				opacity: 0;
-				&.${IDs.iconLeft} {
-					cursor  : pointer;
-					display : none;
-					height  : 95%;
-					left    : 5%;
-					position: absolute;
-					width   : 15%;
-				}
-				&.${IDs.iconRight} {
-					cursor  : pointer;
-					display : none;
-					height  : 95%;
-					position: absolute;
-					right   : 5%;
-					width   : 15%;
-				}
-			}
-			.${IDs.slideContainer} {
-				background-color: transparent;
-				height          : 95%;
-				margin          : 0 auto;
-				overflow        : hidden;
-				position        : relative;
-				width           : 100%;
-			}
-			&:hover {
-				.${IDs.icon} {
-					opacity: 1;
-				}
-			}
-		`,
-    icon: {
-      left: '50%',
-      position: 'absolute',
-      top: '50%',
-      transform: 'translate(-50%, -50%)'
-    },
-    navigation: css`
-			background-color: ${theme.colors.white};
-			display         : none;
-			height          : 5%;
-			position        : relative;
-			width           : 100%;
-			&.navigation-hidden {
-				display: none;
-			}
-		`,
-    navigationList: css`
-			display       : flex;
-			flex-direction: row;
-			left          : 50%;
-			position      : absolute;
-			top           : 50%;
-			transform     : translate(-50%, -50%);
-			.${IDs.navigationItem} {
-				background-color: ${theme.colors.secondary};
-				border-radius   : 50%;
-				cursor          : pointer;
-				height          : 12px;
-				margin          : 0 6px;
-				position        : relative;
-				width           : 12px;
-				:hover:not(.item-focused) {
-					background-color: ${theme.colors.info};
-					box-shadow      : 0px 0px 4px 3px rgba(0, 0, 0, 0.25);
-				}
-				&.item-focused {
-					background-color: ${theme.colors.primary};
-				}
-			}
-		`
-  };
-  /**@function */
+
+  const _containerCSS = containerCSS(IDs);
+
+  const _navigationListCSS = navigationListCSS(IDs);
 
   const removeClass = (className, selector) => {
     const array = document.querySelectorAll(`.${selector}`) || document.querySelectorAll(selector);
@@ -221,8 +153,6 @@ const SliderContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       });
     });
   };
-  /**@flow */
-
 
   useEffect(() => {
     if (!slideContainerRef.current || !navigationRef.current || !iconLeftRef.current || !iconRightRef.current) return;
@@ -269,8 +199,15 @@ const SliderContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     };
   }, [autoChangeTime, children, data]);
-  /**@memo */
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    const _instance = {}; // methods
 
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
   const Slider = useMemo(() => jsx("div", {
     className: IDs.slideContainer,
     ref: slideContainerRef
@@ -285,77 +222,164 @@ const SliderContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     });
   })), [animation, autoChangeTime, children, data]);
   const IconLeft = useMemo(() => jsx("span", {
-    className: [IDs.icon, IDs.iconLeft].join(' '),
+    className: [IDs.icon, IDs.iconLeft].join(' ').trim().replace(/\s+/g, ' '),
     ref: iconLeftRef
   }, jsx(ButtonIcon, {
     circular: true,
     viewType: 'filled',
-    size: 'tiny',
-    color: 'primary',
+    color: white,
     name: 'ArrowLeft',
-    style: styles.icon
+    style: styles.iconLeft,
+    viewBox: false
   })), [children, data]);
   const IconRight = useMemo(() => jsx("span", {
-    className: [IDs.icon, IDs.iconRight].join(' '),
+    className: [IDs.icon, IDs.iconRight].join(' ').trim().replace(/\s+/g, ' '),
     ref: iconRightRef
   }, jsx(ButtonIcon, {
     circular: true,
     viewType: 'filled',
-    size: 'tiny',
-    color: 'primary',
+    color: white,
     name: 'ArrowRight',
-    style: styles.icon
+    style: styles.iconRight,
+    viewBox: false
   })), [children, data]);
   const Navigation = useMemo(() => jsx("div", {
-    className: [IDs.navigation, onShowNavigation && 'navigation-hidden'].join(' '),
-    css: styles.navigation,
+    className: [IDs.navigation, onShowNavigation && 'navigation-hidden'].join(' ').trim().replace(/\s+/g, ' '),
+    css: navigationCSS,
     id: IDs.navigation,
     ref: navigationRef
   }, jsx("div", {
-    css: styles.navigationList,
+    css: _navigationListCSS,
     className: IDs.navigationList,
     id: IDs.navigationList,
     ref: navigationListRef
   })), [animation, autoChangeTime, children, data, onShowNavigation]);
   return jsx("div", {
-    css: styles.container,
-    className: [IDs.container, className].join(' '),
+    css: _containerCSS,
+    className: [IDs.container, className].join(' ').trim().replace(/\s+/g, ' '),
     id: IDs.container,
     style: style,
-    ref: ref,
-    ...props
+    ref: ref
   }, Slider, IconLeft, IconRight, Navigation);
 }));
+
+const containerCSS = IDs => css`
+    * {
+        ${borderBox};
+        margin: 0;
+        padding: 0;
+    }
+    ${flexCol};
+    ${alignCenter};
+    ${justifyCenter};
+    ${positionRelative};
+    ${backgroundTransparent};
+    height: 100%;
+    resize: both;
+    .${IDs.icon} {
+        opacity: 0;
+        &.${IDs.iconLeft} {
+            ${displayNone};
+            ${cursorPointer};
+            ${userSelectNone};
+            ${positionAbsolute};
+            height: 100%;
+            left: 0;
+            margin-left: 16px;
+            width: 15%;
+        }
+        &.${IDs.iconRight} {
+            ${displayNone};
+            ${cursorPointer};
+            ${userSelectNone};
+            ${positionAbsolute};
+            height: 100%;
+            right: 0;
+            margin-right: 16px;
+            width: 15%;
+        }
+    }
+    .${IDs.slideContainer} {
+        ${overflowHidden};
+        ${positionRelative};
+        ${backgroundTransparent};
+        height: 95%;
+        margin: 0 auto;
+        width: 100%;
+    }
+    &:hover {
+        .${IDs.icon} {
+            opacity: 1;
+        }
+    }
+`;
+
+const navigationCSS = css`
+    ${displayNone};
+    ${positionRelative};
+    background-color: ${white};
+    height: 5%;
+    width: 100%;
+    &.navigation-hidden {
+        ${displayNone};
+    }
+`;
+
+const navigationListCSS = IDs => css`
+    ${flexRow};
+    ${positionAbsolute};
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, 14px);
+    .${IDs.navigationItem} {
+        ${cursorPointer};
+        ${positionRelative};
+        background-color: ${rest};
+        border-radius: 50%;
+        height: 12px;
+        margin: 0 6px;
+        width: 12px;
+        :hover:not(.item-focused) {
+            background-color: ${fillPressed};
+        }
+        &.item-focused {
+            background-color: ${active};
+        }
+    }
+`;
+
 SliderContainer.defaultProps = {
   animation: true,
   autoChangeTime: 0,
   children: null,
   data: [],
-  onShowNavigation: true
+  onShowNavigation: true,
+  className: '',
+  style: {}
 };
 SliderContainer.propTypes = {
-  /** index of the active item */
+  /** Index of the active item. */
   active: PropTypes.number,
 
-  /** enable/disable the animation when change active item */
+  /** Enable/disable the animation when change active item. */
   animation: PropTypes.bool,
 
-  /** time to slider auto change (s) */
+  /** Time to slider auto change (s). */
   autoChangeTime: PropTypes.number,
 
-  /** element or node to display on slider without data  */
+  /** Element or node to display on slider without data.  */
   children: PropTypes.oneOfType([PropTypes.element, PropTypes.node]),
 
-  /** className of the slider container */
+  /** Class for component. */
   className: PropTypes.string,
 
-  /** data to display on slider */
+  /** Data to display on slider. */
   data: PropTypes.array,
 
-  /** show/hide the navigation bar */
+  /** Show/hide the navigation bar. */
   onShowNavigation: PropTypes.bool,
 
-  /** style of the component, style-inline - the highest priority */
+  /** Style inline of component. */
   style: PropTypes.object
 };
 export default SliderContainer;

package/components/slider/slider-item.js

@@ -1,19 +1,42 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { forwardRef, memo, useEffect, useState, useRef } from 'react';
-import { jsx, css, keyframes } from '@emotion/core';
+import { forwardRef, memo, useEffect, useState, useRef, useImperativeHandle } from 'react';
+import { jsx, css } from '@emotion/core';
 import { randomString, getFileType } from '../../utils';
 import PropTypes from 'prop-types';
 import { IndeterminateCircularProgress } from '../progress/circular';
+import { animations } from '../../styles/animation';
+import { displayBlock, displayNone, justifyCenter, positionAbsolute } from '../../styles/general';
+const fadeIn = animations.fadeIn;
+const regex = /(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_+.~#?&/=]*)/g;
+const googleDriveRegex = /(http(s)?:\/\/.)?(drive\.google\.com\/file\/d\/)/;
+const googleDocsRegex = /(http(s)?:\/\/.)?(docs\.google\.com\/fileview\?)/;
+
+const checkURL = link => {
+  const res = regex.test(link);
+
+  if (res) {
+    if (googleDriveRegex.test(link)) {
+      const id = link.split('/')[0] === 'drive.google.com' ? link.split('/')[3] : link.split('/')[5];
+      return `https://docs.google.com/viewer?srcid=${id}&pid=explorer&efh=false&a=v&chrome=false&embedded=true`;
+    }
+
+    if (googleDocsRegex.test(link)) {
+      return `https://docs.google.com/viewer?srcid=${link.split('=')[1]}&pid=explorer&efh=false&a=v&chrome=false&embedded=true`;
+    }
+  }
+
+  return link;
+};
+
 const SliderItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   active,
   animation,
   fileName,
   url,
   ...props
-}, ref) => {
-  /**@property */
+}, reference) => {
   const Id = randomString(7, {
     allowSymbol: false,
     allowNumber: false
@@ -24,77 +47,9 @@ const SliderItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     itemContainer: 'DGN-UI-Slider-item-container-' + Id,
     video: 'DGN-UI-Slider-video' + Id
   };
-  const [iframeTimeoutId, setIframeTimeoutId] = useState(null);
+  const ref = useRef(null);
   const iframeRef = useRef(null);
-  /**@reference */
-
-  if (!ref) ref = useRef(null);
-  /**@style */
-
-  const anime = {
-    fade: keyframes`
-			from {
-				opacity: 0.4;
-			}
-			to {
-				opacity: 1;
-			}
-		`
-  };
-  const styles = {
-    itemContainer: css`
-                display: none;
-                justify-content: center;
-                height: 100%;
-                width: 100%;
-                &.item-animation {
-                    animation: ${anime.fade} 1s;
-                }
-            `,
-    frame: css`
-                display: block;
-                height: 85vh;
-                margin: 0;
-                padding: 0;
-                width: 100%;
-            `,
-    image: css`
-                display: block;
-                height: auto;
-                margin: auto;
-                max-height: 100%;
-                max-width: 100%;
-                width: auto;
-            `,
-    loading: css`
-                position: absolute;
-                top: 50%;
-                left: 50%;
-                transform: translate(-50%, -50%);
-            `
-  };
-  /**@function */
-
-  const regex = /(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/g;
-  const googleDriveRegex = /(http(s)?:\/\/.)?(drive\.google\.com\/file\/d\/)/;
-  const googleDocsRegex = /(http(s)?:\/\/.)?(docs\.google\.com\/fileview\?)/;
-
-  const checkURL = link => {
-    const res = regex.test(link);
-
-    if (res) {
-      if (googleDriveRegex.test(link)) {
-        const id = link.split('/')[0] === 'drive.google.com' ? link.split('/')[3] : link.split('/')[5];
-        return `https://docs.google.com/viewer?srcid=${id}&pid=explorer&efh=false&a=v&chrome=false&embedded=true`;
-      }
-
-      if (googleDocsRegex.test(link)) {
-        return `https://docs.google.com/viewer?srcid=${link.split('=')[1]}&pid=explorer&efh=false&a=v&chrome=false&embedded=true`;
-      }
-    }
-
-    return link;
-  };
+  const [iframeTimeoutId, setIframeTimeoutId] = useState(null);
 
   const getViewer = (filePath, fileType) => {
     switch (fileType) {
@@ -102,8 +57,9 @@ const SliderItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         {
           return jsx("img", { ...props,
             className: IDs.image,
-            css: styles.image,
-            src: filePath
+            css: imageCSS,
+            src: filePath,
+            alt: ''
           });
         }
 
@@ -112,7 +68,7 @@ const SliderItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         {
           return jsx("iframe", { ...props,
             className: IDs.frame,
-            css: styles.frame,
+            css: frameCSS,
             frameBorder: 0,
             src: `https://view.officeapps.live.com/op/view.aspx?src=${filePath}`,
             title: fileName
@@ -124,7 +80,7 @@ const SliderItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           return jsx("iframe", { ...props,
             ref: iframeRef,
             className: IDs.frame,
-            css: styles.frame,
+            css: frameCSS,
             frameBorder: 0,
             src: getIframeLink(),
             title: fileName,
@@ -151,7 +107,7 @@ const SliderItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         {
           return jsx("iframe", { ...props,
             className: IDs.frame,
-            css: styles.frame,
+            css: frameCSS,
             frameBorder: 0,
             src: checkURL(filePath),
             title: fileName
@@ -162,7 +118,7 @@ const SliderItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         {
           return jsx("iframe", { ...props,
             className: IDs.frame,
-            css: styles.frame,
+            css: frameCSS,
             frameBorder: 0,
             src: filePath,
             title: fileName
@@ -180,32 +136,71 @@ const SliderItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   }, []);
 
-  function iframeLoaded() {
+  const iframeLoaded = () => {
     clearInterval(iframeTimeoutId);
     setIframeTimeoutId(null);
-  }
+  };
 
-  function getIframeLink() {
+  const getIframeLink = () => {
     return `https://docs.google.com/gview?url=${url}&embedded=true`;
-  }
+  };
 
-  function updateIframeSrc() {
+  const updateIframeSrc = () => {
     if (iframeRef.current) {
       iframeRef.current.src = getIframeLink();
     }
-  }
+  };
+
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    const _instance = {}; // methods
 
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
   return jsx("div", {
-    className: [IDs.itemContainer, active ? 'active' : '', animation ? 'item-animation' : ''].join(' '),
-    css: styles.itemContainer,
+    className: [IDs.itemContainer, active ? 'active' : '', animation ? 'item-animation' : ''].join(' ').trim().replace(/\s+/g, ' '),
+    css: itemContainerCSS,
     id: IDs.itemContainer,
     ref: ref
   }, iframeTimeoutId && getFileType(url, undefined, false) === 'pdf' && jsx("div", {
-    css: styles.loading
+    css: loadingCSS
   }, jsx(IndeterminateCircularProgress, {
     size: 'xs'
   })), getViewer(url, getFileType(url, undefined, false)));
 }));
+const itemContainerCSS = css`
+    ${displayNone};
+    ${justifyCenter};
+    height: 100%;
+    width: 100%;
+    &.item-animation {
+        animation: ${fadeIn} 1s;
+    }
+`;
+const frameCSS = css`
+    ${displayBlock};
+    height: 85vh;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+`;
+const imageCSS = css`
+    ${displayBlock};
+    height: auto;
+    margin: auto;
+    max-height: 100%;
+    max-width: 100%;
+    width: auto;
+`;
+const loadingCSS = css`
+    ${positionAbsolute};
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+`;
 SliderItem.defaultProps = {
   active: false,
   animation: true

package/components/tree-view/css.js

@@ -1,8 +1,9 @@
 import { css } from '@emotion/core';
+import { alignCenter, borderBox, cursorPointer, displayBlock, displayInlineBlock, flexRow, positionRelative } from '../../styles/general';
 import theme from '../../theme/settings';
-export const TreeViewRoot = css`
-    display: block;
-    position: relative;
+export const TreeViewRootCSS = css`
+    ${displayBlock};
+    ${positionRelative};
     .DGN-UI-Accordion {
         box-shadow: none !important;
         .DGN-UI-Accordion-Summary {
@@ -10,20 +11,19 @@ export const TreeViewRoot = css`
             padding: 0;
             border-radius: 0;
             &.focus {
-            background-color: ${theme.colors.focus};
+                background-color: ${theme.colors.focus};
             }
             .Accordion-Icon-Root {
-                display: flex;
+                ${flexRow};
                 margin-right: 4px;
             }
         }
         .DGN-UI-Accordion-Details-Content {
             padding: 0;
-            margin-left: 16px;
             border-radius: 0;
         }
         .Accordion-Icon-Root {
-            display: flex;
+            ${flexRow};
             transition: opacity 0.2s ease-out;
             opacity: 1;
             &.DGN-Invisible {
@@ -36,29 +36,30 @@ export const TreeViewRoot = css`
     }
     .TreeView-All,
     .TreeView-Content {
-        display: block;
-        position: relative;
+        ${displayBlock};
+        ${positionRelative};
         .DGN-UI-Accordion {
             margin-bottom: 0;
         }
     }
     .TreeView-Item-Checkbox {
-        display: inline-block;
-        position: relative;
+        ${displayInlineBlock};
+        ${positionRelative};
         height: 100%;
         margin-right: 8px;
     }
     .TreeView-Item {
-        display: flex;
-        position: relative;
-        align-items: center;
+        ${flexRow};
+        ${positionRelative};
+        ${alignCenter};
+        ${borderBox};
         min-height: 40px;
         text-align: left;
         color: ${theme.colors.text.main};
-        box-sizing: border-box;
+        width: 100%;
         &.non-child {
+            ${cursorPointer};
             transition: background-color 300ms ease;
-            cursor: pointer;
             &.disabled {
                 color: ${theme.colors.disabled};
                 cursor: no-drop;