diginet-core-ui 1.3.87 → 1.3.88

package/components/progress/circular.js

@@ -1,5 +1,7 @@
 /* eslint-disable no-unused-vars */
+
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { css, jsx, keyframes } from '@emotion/core';
 import PropTypes from 'prop-types';
@@ -24,12 +26,15 @@ const {
     paragraph3
   }
 } = useTheme();
+
 const validatePercent = percent => {
   let per = +percent.toString().replace('%', '');
   return Math.max(Math.min(per, 100), 0);
 };
+
 const getDimensionOld = size => {
   let width, labelStyle, rect, strokeWidth;
+
   switch (size) {
     case 'xl':
     case 'extraLarge':
@@ -38,6 +43,7 @@ const getDimensionOld = size => {
       rect = 120;
       strokeWidth = 16;
       break;
+
     case 'lg':
     case 'large':
       labelStyle = heading2;
@@ -45,6 +51,7 @@ const getDimensionOld = size => {
       rect = 80;
       strokeWidth = 12;
       break;
+
     case 'md':
     case 'medium':
       labelStyle = paragraph1;
@@ -52,6 +59,7 @@ const getDimensionOld = size => {
       rect = 60;
       strokeWidth = 8;
       break;
+
     case 'sm':
     case 'small':
       labelStyle = paragraph2;
@@ -59,6 +67,7 @@ const getDimensionOld = size => {
       rect = 40;
       strokeWidth = 6;
       break;
+
     case 'xs':
     case 'extraSmall':
       labelStyle = paragraph3;
@@ -66,9 +75,11 @@ const getDimensionOld = size => {
       rect = 20;
       strokeWidth = 4;
       break;
+
     default:
       return null;
   }
+
   return {
     labelStyle,
     rect,
@@ -76,6 +87,7 @@ const getDimensionOld = size => {
     width
   };
 };
+
 const designTemplate = [{
   width: 16,
   labelStyle: paragraph3,
@@ -112,31 +124,30 @@ const designTemplate = [{
   rect: 120,
   strokeWidth: 16
 }];
+
 const getDimension = size => {
   const sizeObj = {
     width: Number(size),
     rect: size / 2
   };
+
   if (size <= 16) {
-    return {
-      ...designTemplate[0],
+    return { ...designTemplate[0],
       ...sizeObj
     };
   } else if (size >= 240) {
-    return {
-      ...designTemplate[designTemplate.length - 1],
+    return { ...designTemplate[designTemplate.length - 1],
       ...sizeObj
     };
   } else {
-    const templateObj = designTemplate.reduce((acc, obj) =>
-    // Math.abs(size - obj.width) < Math.abs(size - acc.width) ? obj : acc
+    const templateObj = designTemplate.reduce((acc, obj) => // Math.abs(size - obj.width) < Math.abs(size - acc.width) ? obj : acc
     size > obj.width ? obj : acc);
-    return {
-      ...templateObj,
+    return { ...templateObj,
       ...sizeObj
     };
   }
 };
+
 const directionAngleMap = new Map([['top', -90], ['bottom', 90], ['right', 0], ['left', -180]]);
 const CircularProgress = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
@@ -167,19 +178,27 @@ const CircularProgress = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const radius = Math.max(0, (containerW - circleStrokeW) / 2);
   const radiusX10 = radius * 10;
   const circumference = radius * 2 * Math.PI;
+
   const _ContainerCSS = ContainerCSS(containerW, directionAngle);
+
   const _CircleBackgroundCSS = CircleBackgroundCSS(background, !determinate);
+
   const _CircleMainCSS = CircleMainCSS(color);
+
   const _CircleMainIndeterminateCSS = CircleMainIndeterminateCSS(radiusX10);
+
   const _CircleMainDeterminateCSS = CircleMainDeterminateCSS(circumference, percent, duration);
+
   const _TextCSS = TextCSS(percentColor, color, dimension, directionAngle);
+
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
-    const _instance = {
-      ...action
+    const _instance = { ...action
     }; // methods
+
     _instance.__proto__ = {}; // hidden methods
+
     currentRef.instance = _instance;
     return currentRef;
   });
@@ -220,6 +239,7 @@ const CircularProgress = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 const keyframeRotate = keyframes`
 	100%{ transform: rotate(360deg);}
 `;
+
 const keyframeDash = r => keyframes`
 	0%{
 		stroke-dasharray: 1, ${r};
@@ -234,35 +254,42 @@ const keyframeDash = r => keyframes`
 		stroke-dashoffset: -${r * 124 / 200};
 	}
 `;
+
 const ContainerCSS = (containerW, directionAngle) => css`
     ${displayInlineBlock};
     ${parseWidthHeight(containerW)};
     transform: rotate(${directionAngle}deg);
     transform-origin: center;
 `;
+
 const AnimationRotateCSS = css`
     animation: ${keyframeRotate} 2s linear infinite;
 `;
+
 const CircleBackgroundCSS = (background, isIndeterminate) => css`
     fill: transparent;
     stroke: ${background};
     ${isIndeterminate && 'stroke-linecap: round'};
 `;
+
 const CircleMainCSS = color => css`
     fill: transparent;
     stroke: ${color};
     stroke-linecap: round;
 `;
+
 const CircleMainDeterminateCSS = (circumference, percent, duration) => css`
     stroke-dasharray: ${`${circumference} ${circumference}`};
     stroke-dashoffset: ${circumference - validatePercent(percent) / 100 * circumference};
     transition: stroke-dashoffset ${duration}s cubic-bezier(0.77, 0, 0.175, 1); /* easeInOutQuart */
 `;
+
 const CircleMainIndeterminateCSS = radiusX10 => css`
     stroke-dasharray: 10, ${radiusX10};
     stroke-dashoffset: 0;
     animation: ${keyframeDash(radiusX10)} 2s ease-in-out infinite;
 `;
+
 const TextCSS = (percentColor, color, dimension, directionAngle) => css`
     ${userSelectNone};
     fill: ${percentColor ? percentColor : color};
@@ -271,6 +298,7 @@ const TextCSS = (percentColor, color, dimension, directionAngle) => css`
     transform: rotate(${-directionAngle}deg);
     transform-origin: center;
 `;
+
 CircularProgress.defaultProps = {
   background: lineCategory,
   className: '',
@@ -287,24 +315,34 @@ CircularProgress.defaultProps = {
 CircularProgress.propTypes = {
   /** Color for background stroke of the circular progress. */
   background: PropTypes.string,
+
   /** Class for component. */
   className: PropTypes.string,
+
   /** Color for main stroke of the circular progress. */
   color: PropTypes.string,
+
   /** Determinate or Indeterminate. */
   determinate: PropTypes.bool,
+
   /** Direction of the start point. */
   direction: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
+
   /** Time to processing. */
   duration: PropTypes.number,
+
   /** The percent of the determinate progress. */
   percent: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
   /** Color percent-label of the progress. */
   percentColor: PropTypes.string,
+
   /** If `true, show the percent-label. */
   showValue: PropTypes.bool,
+
   /** The size of the component. */
   size: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.oneOf(['xl', 'lg', 'md', 'sm', 'xs', 'extraLarge', 'large', 'medium', 'small', 'extraSmall'])]),
+
   /** Style inline of component. */
   style: PropTypes.object
 };

package/components/progress/linear.js

@@ -1,17 +1,21 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { jsx, css, keyframes } from '@emotion/core';
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useEffect, useMemo, useRef } from 'react';
 import theme from "../../theme/settings";
 import { Typography } from "../";
+
 const cutPX = x => {
   return isNaN(x) ? x : x + 'px';
 };
+
 const validatePercent = p => {
   let per = +p.toString().replace('%', '');
   return Math.max(Math.min(per, 100), 0);
 };
+
 const Indeterminate = /*#__PURE__*/forwardRef(({
   background,
   className,
@@ -92,8 +96,7 @@ const Indeterminate = /*#__PURE__*/forwardRef(({
     className: unique.secondBar,
     ref: secondBarRef
   }), [color]);
-  return jsx("div", {
-    ...props,
+  return jsx("div", { ...props,
     className: [unique.container, className].join(' ').trimEnd(),
     css: containerCSS,
     ref: ref
@@ -172,9 +175,11 @@ const Determinate = /*#__PURE__*/forwardRef(({
             ${valuePosition === 'bottom' ? 'top: 100%;' : 'bottom: 100%;'};
         }
     `;
+
   const updateValuePosition = value => {
     valueRef.current.firstChild.innerText = value + '%';
     const valHalfWidth = valueRef.current.getBoundingClientRect().width / 2;
+
     if (value > 90) {
       valueRef.current.style.left = `calc(${value + '%'} - ${valHalfWidth}px)`;
     } else if (value < 10) {
@@ -183,6 +188,7 @@ const Determinate = /*#__PURE__*/forwardRef(({
       valueRef.current.style.left = value + '%';
     }
   };
+
   const Bar = useMemo(() => jsx("div", {
     className: unique.bar,
     ref: barRef
@@ -200,12 +206,12 @@ const Determinate = /*#__PURE__*/forwardRef(({
   useEffect(() => {
     const value = validatePercent(percent);
     barRef.current.style.width = value + '%';
+
     if (showValue) {
       updateValuePosition(value);
     }
   }, [percent, showValue]);
-  return jsx("div", {
-    ...props,
+  return jsx("div", { ...props,
     className: [unique.container, className].join(' ').trim(),
     css: containerCSS,
     ref: ref
@@ -285,24 +291,34 @@ LinearProgress.defaultProps = {
 LinearProgress.propTypes = {
   /** Color for background stroke of the linear progress. */
   background: PropTypes.string,
+
   /** className use in linear progress. */
   className: PropTypes.string,
+
   /** color of liner progress. */
   color: PropTypes.string,
+
   /** Determinate or Indeterminate. */
   determinate: PropTypes.bool,
+
   /** Time to processing. */
   duration: PropTypes.number,
+
   /** Dynamic height dimensions of the container. */
   height: PropTypes.number,
+
   /** The percent of the determinate progress. */
   percent: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
   /** Color percent-label of the progress. */
   percentColor: PropTypes.string,
+
   /** It's boolean to show the percent-label. */
   showValue: PropTypes.bool,
+
   /** Dynamic position of the progress value. */
   valuePosition: PropTypes.oneOf(['bottom', 'top']),
+
   /** Dynamic width dimensions of the container. */
   width: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 };

package/components/rating/index.js

@@ -1,4 +1,5 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { memo, useMemo, useRef, useState, useEffect, forwardRef, Fragment, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
@@ -51,9 +52,13 @@ const Rating = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     allowNumber: false
   }));
   const [valueState, setValueState] = useState(value || defaultValue);
+
   const _color = colors[color] || color;
+
   const _RatingItemHaftCSS = RatingItemHaftCSS(_color);
+
   const _RatingItemCSS = RatingItemCSS(_RatingItemHaftCSS.name, _color, half);
+
   const onSelectValue = e => {
     if (disabled || readOnly) return;
     const newValue = +e.target.value;
@@ -61,18 +66,22 @@ const Rating = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     setValueState(newValue);
     !!onRating && onRating(e, newValue);
   };
+
   const _onRating = (e, value, isHalf = false) => {
     if (disabled || readOnly || half && !isHalf) return;
     setValueState(value);
     !!onRating && onRating(e, value);
   };
+
   useEffect(() => {
     setValueState(value);
   }, [value]);
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     const _instance = {}; // methods
+
     _instance.__proto__ = {}; // hidden methods
+
     currentRef.instance = _instance;
     return currentRef;
   });
@@ -158,6 +167,7 @@ const RatingSelectCSS = css`
         background-color: ${white};
     }
 `;
+
 const RatingItemHaftCSS = color => css`
     ${flexRow};
     ${positionAbsolute};
@@ -187,6 +197,7 @@ const RatingItemHaftCSS = color => css`
         }
     }
 `;
+
 const RatingItemCSS = (RatingItemHaftCSSName, color, half) => css`
     ${displayInlineFlex};
     ${positionRelative};
@@ -208,6 +219,7 @@ const RatingItemCSS = (RatingItemHaftCSSName, color, half) => css`
         }
     }
 `;
+
 Rating.defaultProps = {
   disabled: false,
   readOnly: false,
@@ -222,36 +234,48 @@ Rating.defaultProps = {
 Rating.propTypes = {
   /** If true, the component is disabled. */
   disabled: PropTypes.bool,
+
   /** Removes all hover effects and pointer events. */
   readOnly: PropTypes.bool,
+
   /** Allows rating with an odd number of stars. */
   half: PropTypes.bool,
+
   /** Display select box to select by number. */
   selector: PropTypes.bool,
+
   /** The default number of stars is selected. */
   defaultValue: PropTypes.number,
+
   /** The number of stars is selected. */
   value: PropTypes.number,
+
   /** The maximum number of stars allowed to rate. */
   quantity: PropTypes.number,
+
   /** Width of star icon. */
   width: PropTypes.number,
+
   /** Height of star icon. */
   height: PropTypes.number,
+
   /** Color of stars, ['primary', 'info', 'success', 'warning', 'danger', #hex, rgb(#, #, #)]. */
   color: PropTypes.string,
+
   /** Class for component. */
   className: PropTypes.string,
+
   /** Style inline of component. */
   style: PropTypes.object,
-  /**
-  * Callback fired when the value changes.
-  * 
-    function(event: React.SyntheticEvent, value: number) => void
-  *
-  * event: The event source of the callback.
-  * 
-  * value: The new value.
+
+  /**
+  * Callback fired when the value changes.
+  * 
+   function(event: React.SyntheticEvent, value: number) => void
+  *
+  * event: The event source of the callback.
+  * 
+  * value: The new value.
   */
   onRating: PropTypes.func
 };

package/components/slider/slider-container.js

@@ -1,4 +1,5 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
@@ -64,14 +65,18 @@ const SliderContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const navigationListRef = useRef(null);
   const iconLeftRef = useRef(null);
   const iconRightRef = useRef(null);
+
   const _containerCSS = containerCSS(IDs);
+
   const _navigationListCSS = navigationListCSS(IDs);
+
   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');
@@ -81,34 +86,43 @@ const SliderContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     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')) {
@@ -117,17 +131,21 @@ const SliderContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         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 => {
@@ -135,13 +153,15 @@ const SliderContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       });
     });
   };
+
   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;
+          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';
@@ -153,10 +173,12 @@ const SliderContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       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));
@@ -166,9 +188,11 @@ const SliderContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   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);
@@ -178,7 +202,9 @@ const SliderContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     const _instance = {}; // methods
+
     _instance.__proto__ = {}; // hidden methods
+
     currentRef.instance = _instance;
     return currentRef;
   });
@@ -236,6 +262,7 @@ const SliderContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     ref: ref
   }, Slider, IconLeft, IconRight, Navigation);
 }));
+
 const containerCSS = IDs => css`
     * {
         ${boxBorder};
@@ -286,6 +313,7 @@ const containerCSS = IDs => css`
         }
     }
 `;
+
 const navigationCSS = css`
     ${displayNone};
     ${positionRelative};
@@ -296,6 +324,7 @@ const navigationCSS = css`
         ${displayNone};
     }
 `;
+
 const navigationListCSS = IDs => css`
     ${flexRow};
     ${positionAbsolute};
@@ -318,6 +347,7 @@ const navigationListCSS = IDs => css`
         }
     }
 `;
+
 SliderContainer.defaultProps = {
   animation: true,
   autoChangeTime: 0,
@@ -330,18 +360,25 @@ SliderContainer.defaultProps = {
 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]),
+
   /** Class for component. */
   className: PropTypes.string,
+
   /** Data to display on slider. */
   data: PropTypes.array,
+
   /** Show/hide the navigation bar. */
   onShowNavigation: PropTypes.bool,
+
   /** Style inline of component. */
   style: PropTypes.object
 };