diginet-core-ui 1.3.24

package/components/slider/slider-container.js

@@ -0,0 +1,356 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
+import Icon from '../../icons';
+import theme from '../../theme/settings';
+import { randomString } from '../../utils';
+import SliderItem from './slider-item';
+const SliderContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  animation,
+  active,
+  autoChangeTime,
+  children,
+  className,
+  data,
+  onShowNavigation,
+  style,
+  ...props
+}, reference) => {
+  /**@property */
+  let autoChange;
+  let currentItemIndex = 0;
+  const Id = randomString(7, {
+    allowSymbol: false,
+    allowNumber: false
+  });
+  const IDs = {
+    container: 'DGN-UI-Slider-container-' + Id,
+    icon: 'DGN-UI-Slider-icon',
+    iconLeft: 'DGN-UI-Slider-icon-left',
+    iconRight: 'DGN-UI-Slider-icon-right',
+    navigation: 'DGN-UI-Slider-navigation-' + Id,
+    navigationList: 'DGN-UI-Slider-navigation-list-' + Id,
+    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 removeClass = (className, selector) => {
+    const array = document.querySelectorAll(`.${selector}`) || document.querySelectorAll(selector);
+    array.forEach(a => {
+      a.classList.remove(className);
+    });
+  };
+
+  const onChangeActiveItem = (childNodeList, e, i) => {
+    removeClass('item-focused', IDs.navigationItem);
+    e.classList.add('item-focused');
+    childNodeList.forEach(node => {
+      node.style.display = 'none';
+    });
+    childNodeList[i].style.display = 'block';
+    currentItemIndex = i;
+  };
+
+  const onNextItem = childNodeList => {
+    if (childNodeList.length > 1 && autoChangeTime && autoChangeTime > 0) {
+      clearInterval(autoChange);
+      autoChange = setInterval(() => onNextItem(childNodeList), autoChangeTime * 1000);
+    }
+
+    childNodeList[currentItemIndex].style.display = 'none';
+
+    if (currentItemIndex === childNodeList.length - 1) {
+      currentItemIndex = 0;
+    } else {
+      currentItemIndex += 1;
+    }
+
+    childNodeList[currentItemIndex].style.display = 'block';
+    onChangeActiveItem(childNodeList, navigationListRef.current.childNodes[currentItemIndex], currentItemIndex);
+  };
+
+  const onPrevItem = childNodeList => {
+    if (childNodeList.length > 1 && autoChangeTime && autoChangeTime > 0) {
+      clearInterval(autoChange);
+      autoChange = setInterval(() => onNextItem(childNodeList), autoChangeTime * 1000);
+    }
+
+    childNodeList[currentItemIndex].style.display = 'none';
+
+    if (currentItemIndex === 0) {
+      currentItemIndex = childNodeList.length - 1;
+    } else {
+      currentItemIndex -= 1;
+    }
+
+    childNodeList[currentItemIndex].style.display = 'block';
+    onChangeActiveItem(childNodeList, navigationListRef.current.childNodes[currentItemIndex], currentItemIndex);
+  };
+
+  const findActiveItem = childNodeList => {
+    for (let i = 0; i < childNodeList.length; i++) {
+      if (childNodeList[i].classList.contains('active')) {
+        childNodeList[i].style.display = 'block';
+        currentItemIndex = i;
+        return i;
+      }
+    }
+
+    childNodeList[0].style.display = 'block';
+    currentItemIndex = 0;
+    return 0;
+  };
+
+  const renderNavigationItem = childNodeList => {
+    const list = navigationListRef.current;
+    const activeItem = findActiveItem(childNodeList);
+    let items = '';
+
+    for (let i = 0; i < childNodeList.length; i++) {
+      items += `<span class='${i === activeItem ? IDs.navigationItem + ' ' + 'item-focused' : IDs.navigationItem}' id='${IDs.navigationItem}-${i}'></span>`;
+    }
+
+    list.innerHTML = items;
+    navigationListRef.current.querySelectorAll(`.${IDs.navigationItem}`).forEach((item, i) => {
+      item.addEventListener('click', e => {
+        onChangeActiveItem(childNodeList, e.target, i);
+      });
+    });
+  };
+  /**@flow */
+
+
+  useEffect(() => {
+    if (!slideContainerRef.current || !navigationRef.current || !iconLeftRef.current || !iconRightRef.current) return;
+    const childNodeList = slideContainerRef.current.childNodes,
+          navigation = navigationRef.current,
+          iconLeft = iconLeftRef.current,
+          iconRight = iconRightRef.current;
+    renderNavigationItem(childNodeList);
+
+    if (childNodeList.length > 1) {
+      navigation.style.display = onShowNavigation ? 'block' : 'none';
+      iconLeft.style.display = 'block';
+      iconRight.style.display = 'block';
+      iconRight.addEventListener('click', () => onNextItem(childNodeList));
+      iconLeft.addEventListener('click', () => onPrevItem(childNodeList));
+    } else {
+      navigation.style.display = 'none';
+      iconLeft.style.display = 'none';
+      iconRight.style.display = 'none';
+    }
+
+    return () => {
+      childNodeList.forEach(node => {
+        node.style.display = 'none';
+      });
+
+      if (childNodeList.length > 1) {
+        iconRight.removeEventListener('click', () => onNextItem(childNodeList));
+        iconLeft.removeEventListener('click', () => onPrevItem(childNodeList));
+      }
+    };
+  });
+  useEffect(() => {
+    if (!slideContainerRef.current) return;
+    const childNodeList = slideContainerRef.current.childNodes;
+
+    if (childNodeList.length > 1 && autoChangeTime && autoChangeTime > 0) {
+      autoChange = setInterval(() => onNextItem(childNodeList), autoChangeTime * 1000);
+    }
+
+    return () => {
+      if (childNodeList.length > 1 && autoChangeTime && autoChangeTime > 0) {
+        clearInterval(autoChange);
+      }
+    };
+  }, [autoChangeTime, children, data]);
+  /**@memo */
+
+  const Slider = useMemo(() => jsx("div", {
+    className: IDs.slideContainer,
+    ref: slideContainerRef
+  }, children || data && data.map((i, index) => {
+    return jsx(SliderItem, {
+      animation: animation,
+      key: index,
+      fileName: i.name,
+      active: index === active,
+      id: index,
+      url: i.url
+    });
+  })), [animation, autoChangeTime, children, data]);
+  const IconLeft = useMemo(() => jsx("span", {
+    className: [IDs.icon, IDs.iconLeft].join(' '),
+    ref: iconLeftRef
+  }, jsx(Icon, {
+    name: 'ArrowLeft',
+    type: 'filled',
+    style: styles.icon
+  })), [children, data]);
+  const IconRight = useMemo(() => jsx("span", {
+    className: [IDs.icon, IDs.iconRight].join(' '),
+    ref: iconRightRef
+  }, jsx(Icon, {
+    name: 'ArrowRight',
+    type: 'filled',
+    style: styles.icon
+  })), [children, data]);
+  const Navigation = useMemo(() => jsx("div", {
+    className: [IDs.navigation, onShowNavigation && 'navigation-hidden'].join(' '),
+    css: styles.navigation,
+    id: IDs.navigation,
+    ref: navigationRef
+  }, jsx("div", {
+    css: styles.navigationList,
+    className: IDs.navigationList,
+    id: IDs.navigationList,
+    ref: navigationListRef
+  })), [animation, autoChangeTime, children, data, onShowNavigation]);
+  return jsx("div", _extends({
+    css: styles.container,
+    className: [IDs.container, className].join(' '),
+    id: IDs.container,
+    style: style,
+    ref: ref
+  }, props), Slider, IconLeft, IconRight, Navigation);
+}));
+SliderContainer.defaultProps = {
+  animation: true,
+  autoChangeTime: 0,
+  children: null,
+  data: [],
+  onShowNavigation: true
+};
+SliderContainer.propTypes = {
+  /** index of the active item */
+  active: PropTypes.number,
+
+  /** enable/disable the animation when change active item */
+  animation: PropTypes.bool,
+
+  /** time to slider auto change (s) */
+  autoChangeTime: PropTypes.number,
+
+  /** element or node to display on slider without data  */
+  children: PropTypes.oneOfType([PropTypes.element, PropTypes.node]),
+
+  /** className of the slider container */
+  className: PropTypes.string,
+
+  /** data to display on slider */
+  data: PropTypes.array,
+
+  /** show/hide the navigation bar */
+  onShowNavigation: PropTypes.bool,
+
+  /** style of the component, style-inline - the highest priority */
+  style: PropTypes.object
+};
+export default SliderContainer;

package/components/slider/slider-item.js

@@ -0,0 +1,183 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import { forwardRef, memo, useRef } from 'react';
+import { jsx, css, keyframes } from '@emotion/core';
+import { randomString, getFileType } from '../../utils';
+import PropTypes from 'prop-types';
+const SliderItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  active,
+  animation,
+  fileName,
+  url,
+  ...props
+}, ref) => {
+  /**@property */
+  const Id = randomString(7, {
+    allowSymbol: false,
+    allowNumber: false
+  });
+  const IDs = {
+    frame: 'DGN-UI-Slider-frame' + Id,
+    image: 'DGN-UI-Slider-image' + Id,
+    itemContainer: 'DGN-UI-Slider-item-container-' + Id,
+    video: 'DGN-UI-Slider-video' + Id
+  };
+  /**@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: 100%;
+			margin: 0;
+			padding: 0;
+			width: 100%;
+		`,
+    image: css`
+			display: block;
+			height: auto;
+			margin: auto;
+			max-height: 100%;
+			max-width: 100%;
+			width: auto;
+		`
+  };
+  /**@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;
+    }
+
+    return null;
+  };
+
+  const getViewer = (filePath, fileType) => {
+    switch (fileType) {
+      case 'image':
+        {
+          return jsx("img", _extends({}, props, {
+            className: IDs.image,
+            css: styles.image,
+            src: filePath
+          }));
+        }
+
+      case 'word':
+      case 'sheet':
+        {
+          return jsx("iframe", _extends({}, props, {
+            className: IDs.frame,
+            css: styles.frame,
+            frameBorder: 0,
+            src: `http://view.officeapps.live.com/op/view.aspx?src=${filePath}`,
+            title: fileName
+          }));
+        }
+
+      case 'pdf':
+        {
+          return jsx("iframe", _extends({}, props, {
+            className: IDs.frame,
+            css: styles.frame,
+            frameBorder: 0,
+            src: `https://docs.google.com/gview?url=${filePath}&embedded=true`,
+            title: fileName
+          }));
+        }
+
+      case 'mp4':
+        {
+          return jsx("video", {
+            autoPlay: true,
+            className: IDs.video,
+            controls: "controls",
+            height: "auto",
+            width: "auto"
+          }, jsx("source", {
+            src: filePath,
+            type: "video/mp4"
+          }));
+        }
+
+      case 'another':
+        {
+          return jsx("iframe", _extends({}, props, {
+            className: IDs.frame,
+            css: styles.frame,
+            frameBorder: 0,
+            src: checkURL(filePath),
+            title: fileName
+          }));
+        }
+
+      default:
+        {
+          return jsx("iframe", _extends({}, props, {
+            className: IDs.frame,
+            css: styles.frame,
+            frameBorder: 0,
+            src: filePath,
+            title: fileName
+          }));
+        }
+    }
+  };
+
+  return jsx("div", {
+    className: [IDs.itemContainer, active ? 'active' : '', animation ? 'item-animation' : ''].join(' '),
+    css: styles.itemContainer,
+    id: IDs.itemContainer,
+    ref: ref
+  }, getViewer(url, getFileType(url, undefined, false)));
+}));
+SliderItem.defaultProps = {
+  active: false,
+  animation: true
+};
+SliderItem.propTypes = {
+  active: PropTypes.bool,
+  animation: PropTypes.bool,
+  fileName: PropTypes.string,
+  url: PropTypes.string
+};
+export default SliderItem;