diginet-core-ui 1.3.78 → 1.3.79

package/components/progress/circular.js

@@ -1,7 +1,5 @@
 /* eslint-disable no-unused-vars */
-
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { css, jsx, keyframes } from '@emotion/core';
 import PropTypes from 'prop-types';
@@ -25,15 +23,12 @@ const {
     paragraph3
   }
 } = useTheme();
-
 const validatePercent = percent => {
   let per = +percent.toString().replace('%', '');
   return Math.max(Math.min(per, 100), 0);
 };
-
 const getDimension = size => {
   let rect, strokeWidth, labelStyle;
-
   switch (size) {
     case 'xl':
     case 'extraLarge':
@@ -41,76 +36,62 @@ const getDimension = size => {
       rect = 120;
       strokeWidth = 16;
       break;
-
     case 'lg':
     case 'large':
       labelStyle = heading2;
       rect = 80;
       strokeWidth = 12;
       break;
-
     case 'md':
     case 'medium':
       labelStyle = paragraph1;
       rect = 60;
       strokeWidth = 8;
       break;
-
     case 'sm':
     case 'small':
       labelStyle = paragraph2;
       rect = 40;
       strokeWidth = 6;
       break;
-
     case 'xs':
     case 'extraSmall':
       labelStyle = paragraph3;
       rect = 20;
       strokeWidth = 4;
       break;
-
     default:
       labelStyle = heading2;
       rect = 80;
       strokeWidth = 8;
   }
-
   return {
     labelStyle,
     rect,
     strokeWidth
   };
 };
-
 const getDirection = direction => {
   let angle;
-
   switch (direction) {
     case 'right':
       angle = 0;
       break;
-
     case 'left':
       angle = -180;
       break;
-
     case 'bottom':
       angle = 90;
       break;
-
     case 'top':
       angle = -90;
       break;
   }
-
   return angle;
 };
-
 const keyframeRotate = keyframes`
 	100%{ transform: rotate(360deg);}
 `;
-
 const keyframeDash = r => keyframes`
 	0%{
 		stroke-dasharray: 1, ${r};
@@ -125,18 +106,15 @@ const keyframeDash = r => keyframes`
 		stroke-dashoffset: -${r * 124 / 200};
 	}
 `;
-
 const ContainerCSS = containerW => css`
     ${parseWidthHeight(containerW)};
     ${overflowHidden};
     ${positionRelative};
     ${borderRadius50};
 `;
-
 const AnimationRotateCSS = css`
     animation: ${keyframeRotate} 2s linear infinite;
 `;
-
 const CircleBackgroundCSS = (background, circleStrokeW, isIndeterminate) => css`
     ${overflowHidden};
     ${borderRadius50};
@@ -145,7 +123,6 @@ const CircleBackgroundCSS = (background, circleStrokeW, isIndeterminate) => css`
     stroke-width: ${circleStrokeW}px;
     ${isIndeterminate && 'stroke-linecap: round'};
 `;
-
 const CircleMainCSS = (color, circleStrokeW) => css`
     ${overflowHidden};
     ${borderRadius50};
@@ -154,7 +131,6 @@ const CircleMainCSS = (color, circleStrokeW) => css`
     stroke-linecap: round;
     stroke-width: ${circleStrokeW}px;
 `;
-
 const CircleMainDeterminateCSS = (circumference, percent, direction, duration) => css`
     stroke-dasharray: ${`${circumference} ${circumference}`};
     stroke-dashoffset: ${circumference - validatePercent(percent) / 100 * circumference};
@@ -162,24 +138,21 @@ const CircleMainDeterminateCSS = (circumference, percent, direction, duration) =
     transform-origin: 50% 50%;
     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) => css`
     ${userSelectNone};
     fill: ${percentColor ? percentColor : color};
     ${dimension.labelStyle}
     text-anchor: middle;
 `;
-/**
- * Determinate circular progress
- */
-
 
+/**
+ * Determinate circular progress
+ */
 const Determinate = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   background,
@@ -202,25 +175,18 @@ const Determinate = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const circleStrokeW = strokeWidth ? Math.max(2, strokeWidth) : dimension.strokeWidth;
   const radius = containerW / 2 - circleStrokeW;
   const circumference = radius * 2 * Math.PI;
-
   const _ContainerCSS = ContainerCSS(containerW);
-
   const _CircleBackgroundCSS = CircleBackgroundCSS(background, circleStrokeW);
-
   const _CircleMainCSS = CircleMainCSS(color, circleStrokeW);
-
   const _CircleMainDeterminateCSS = CircleMainDeterminateCSS(circumference, percent, direction, duration);
-
   const _TextCSS = TextCSS(percentColor, color, dimension);
-
   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;
   });
@@ -243,7 +209,8 @@ const Determinate = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     x: containerW / 2,
     y: containerW / 2 + containerW / 80
   }, validatePercent(percent), "%"), [color, percentColor, percent, size, strokeWidth, showValue, width]);
-  return jsx("svg", { ...props,
+  return jsx("svg", {
+    ...props,
     css: _ContainerCSS,
     ref: ref
   }, CircleBackgroundMemo, CircleMainMemo, PercentTextMemo);
@@ -260,39 +227,30 @@ Determinate.defaultProps = {
 Determinate.propTypes = {
   /** Color for background stroke of the circular progress. */
   background: PropTypes.string,
-
   /** Color for main stroke of the circular progress. */
   color: PropTypes.string,
-
   /** Direction of the start point. */
   direction: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
-
   /** Time to processing. */
   duration: PropTypes.number,
-
   /** The percent of the 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,
-
   /** Static dimensions default. */
   size: PropTypes.oneOf(['xl', 'lg', 'md', 'sm', 'xs', 'extraLarge', 'large', 'medium', 'small', 'extraSmall']),
-
   /** Dynamic width dimensions of the progress circle. */
   strokeWidth: PropTypes.number,
-
   /** Dynamic width and height dimensions of the container. */
   width: PropTypes.number
 };
 export const DeterminateCircularProgress = Determinate;
-/**
- * Indeterminate circular progress
- */
 
+/**
+ * Indeterminate circular progress
+ */
 const Indeterminate = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   background,
@@ -310,23 +268,17 @@ const Indeterminate = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const circleStrokeW = strokeWidth ? Math.max(2, strokeWidth) : dimension.strokeWidth;
   const radius = containerW / 2 - circleStrokeW;
   const radiusX10 = radius * 10;
-
   const _ContainerCSS = ContainerCSS(containerW);
-
   const _CircleBackgroundCSS = CircleBackgroundCSS(background, circleStrokeW, true);
-
   const _CircleMainCSS = CircleMainCSS(color, circleStrokeW);
-
   const _CircleMainIndeterminateCSS = CircleMainIndeterminateCSS(radiusX10);
-
   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;
   });
@@ -343,7 +295,8 @@ const Indeterminate = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     r: radius,
     ref: circleRef
   }), [color, size, strokeWidth, width]);
-  return jsx("svg", { ...props,
+  return jsx("svg", {
+    ...props,
     css: [_ContainerCSS, AnimationRotateCSS],
     ref: ref
   }, CircleBackgroundMemo, CircleMainMemo);
@@ -356,24 +309,20 @@ Indeterminate.defaultProps = {
 Indeterminate.propTypes = {
   /** Color for background stroke of the circular progress. */
   background: PropTypes.string,
-
   /** Color for main stroke of the circular progress. */
   color: PropTypes.string,
-
   /** Static dimensions default. */
   size: PropTypes.oneOf(['xl', 'lg', 'md', 'sm', 'xs', 'extraLarge', 'large', 'medium', 'small', 'extraSmall']),
-
   /** Dynamic width dimensions of the progress circle. */
   strokeWidth: PropTypes.number,
-
   /** Dynamic width and height dimensions of the container. */
   width: PropTypes.number
 };
 export const IndeterminateCircularProgress = Indeterminate;
-/**
- * Circular progress
- */
 
+/**
+ * Circular progress
+ */
 const CircularProgress = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   determinate,
@@ -391,11 +340,10 @@ const CircularProgress = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   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;
   });
@@ -428,34 +376,24 @@ CircularProgress.defaultProps = {
 CircularProgress.propTypes = {
   /** Color for background stroke of the circular progress. */
   background: 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,
-
   /** It's boolean to show the percent-label. */
   showValue: PropTypes.bool,
-
   /** Static dimensions default. */
   size: PropTypes.oneOf(['xl', 'lg', 'md', 'sm', 'xs', 'extraLarge', 'large', 'medium', 'small', 'extraSmall']),
-
   /** Dynamic width dimensions of the progress circle. */
   strokeWidth: PropTypes.number,
-
   /** Dynamic width and height dimensions of the container. */
   width: PropTypes.number
 };

package/components/progress/linear.js

@@ -1,21 +1,17 @@
 /** @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,
@@ -96,7 +92,8 @@ 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
@@ -175,11 +172,9 @@ 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) {
@@ -188,7 +183,6 @@ const Determinate = /*#__PURE__*/forwardRef(({
       valueRef.current.style.left = value + '%';
     }
   };
-
   const Bar = useMemo(() => jsx("div", {
     className: unique.bar,
     ref: barRef
@@ -206,12 +200,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
@@ -291,34 +285,24 @@ 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,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { memo, useMemo, useRef, useState, useEffect, forwardRef, Fragment, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
@@ -52,13 +51,9 @@ 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;
@@ -66,22 +61,18 @@ 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;
   });
@@ -167,7 +158,6 @@ const RatingSelectCSS = css`
         background-color: ${white};
     }
 `;
-
 const RatingItemHaftCSS = color => css`
     ${flexRow};
     ${positionAbsolute};
@@ -197,7 +187,6 @@ const RatingItemHaftCSS = color => css`
         }
     }
 `;
-
 const RatingItemCSS = (RatingItemHaftCSSName, color, half) => css`
     ${inlineFlex};
     ${positionRelative};
@@ -219,7 +208,6 @@ const RatingItemCSS = (RatingItemHaftCSSName, color, half) => css`
         }
     }
 `;
-
 Rating.defaultProps = {
   disabled: false,
   readOnly: false,
@@ -234,40 +222,28 @@ 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.
   *