diginet-core-ui 1.3.88 → 1.3.89

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';
@@ -26,15 +24,12 @@ 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':
@@ -43,7 +38,6 @@ const getDimensionOld = size => {
       rect = 120;
       strokeWidth = 16;
       break;
-
     case 'lg':
     case 'large':
       labelStyle = heading2;
@@ -51,7 +45,6 @@ const getDimensionOld = size => {
       rect = 80;
       strokeWidth = 12;
       break;
-
     case 'md':
     case 'medium':
       labelStyle = paragraph1;
@@ -59,7 +52,6 @@ const getDimensionOld = size => {
       rect = 60;
       strokeWidth = 8;
       break;
-
     case 'sm':
     case 'small':
       labelStyle = paragraph2;
@@ -67,7 +59,6 @@ const getDimensionOld = size => {
       rect = 40;
       strokeWidth = 6;
       break;
-
     case 'xs':
     case 'extraSmall':
       labelStyle = paragraph3;
@@ -75,11 +66,9 @@ const getDimensionOld = size => {
       rect = 20;
       strokeWidth = 4;
       break;
-
     default:
       return null;
   }
-
   return {
     labelStyle,
     rect,
@@ -87,7 +76,6 @@ const getDimensionOld = size => {
     width
   };
 };
-
 const designTemplate = [{
   width: 16,
   labelStyle: paragraph3,
@@ -124,30 +112,31 @@ 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 = {},
@@ -178,27 +167,19 @@ 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;
   });
@@ -239,7 +220,6 @@ const CircularProgress = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 const keyframeRotate = keyframes`
 	100%{ transform: rotate(360deg);}
 `;
-
 const keyframeDash = r => keyframes`
 	0%{
 		stroke-dasharray: 1, ${r};
@@ -254,42 +234,35 @@ 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};
@@ -298,7 +271,6 @@ const TextCSS = (percentColor, color, dimension, directionAngle) => css`
     transform: rotate(${-directionAngle}deg);
     transform-origin: center;
 `;
-
 CircularProgress.defaultProps = {
   background: lineCategory,
   className: '',
@@ -315,34 +287,24 @@ 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,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,
@@ -56,36 +52,36 @@ const Indeterminate = /*#__PURE__*/forwardRef(({
         `
   };
   const containerCSS = css`
-        animation       : ${animation.keyframeStart} 0.3s ease-in;
+        animation: ${animation.keyframeStart} 0.3s ease-in;
         background-color: ${background};
-        border-radius   : 4px;
-        box-shadow      : 0px 2px 2px rgba(0, 0, 0, 0.1);
-        height          : ${cutPX(height)};
-        overflow        : hidden;
-        position        : relative;
-        width           : ${cutPX(width)};
+        border-radius: 4px;
+        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
+        height: ${cutPX(height)};
+        overflow: hidden;
+        position: relative;
+        width: ${cutPX(width)};
         .${unique.firstBar} {
-            animation       : ${animation.keyframeMove} 3s infinite;
+            animation: ${animation.keyframeMove} 3s infinite;
             background-color: ${theme.colors[color] || color};
-            border-radius   : 4px;
-            bottom          : 0;
-            left            : 0;
-            position        : absolute;
-            top             : 0;
-            transition      : transform 0.3s ease-in-out;
-            width           : 100%;
+            border-radius: 4px;
+            bottom: 0;
+            left: 0;
+            position: absolute;
+            top: 0;
+            transition: transform 0.3s ease-in-out;
+            width: 100%;
         }
         .${unique.secondBar} {
-            animation-delay : 1.5s;
-            animation       : ${animation.keyframeMove} 3s infinite;
+            animation-delay: 1.5s;
+            animation: ${animation.keyframeMove} 3s infinite;
             background-color: ${theme.colors[color] || color};
-            border-radius   : 4px;
-            bottom          : 0;
-            left            : -100%;
-            position        : absolute;
-            top             : 0;
-            transition      : transform 0.3s ease-in-out;
-            width           : 100%;
+            border-radius: 4px;
+            bottom: 0;
+            left: -100%;
+            position: absolute;
+            top: 0;
+            transition: transform 0.3s ease-in-out;
+            width: 100%;
         }
     `;
   const FirstBar = useMemo(() => jsx("div", {
@@ -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
@@ -104,7 +101,7 @@ const Indeterminate = /*#__PURE__*/forwardRef(({
 });
 Indeterminate.defaultProps = {
   background: theme.colors.brand12,
-  color: theme.colors.info,
+  color: theme.colors.semantic.info,
   height: 8,
   width: '100%'
 };
@@ -148,38 +145,36 @@ const Determinate = /*#__PURE__*/forwardRef(({
         }
     `;
   const containerCSS = css`
-        animation       : ${keyframeStart} 0.3s ease-in;
-        background-color: ${background};
-        border-radius   : 4px;
-        box-shadow      : 0px 2px 2px rgba(0, 0, 0, 0.1);
-        height          : ${cutPX(height)};
-        position        : relative;
-        width           : ${cutPX(width)};
-        .${unique.bar} {
-            background-color: ${theme.colors[color] || color};
-            border-radius   : 4px;
-            bottom          : 0;
-            left            : 0;
-            position        : absolute;
-            top             : 0;
-            transition      : width ${duration}s cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
-        }
-        .${unique.value} {
-            color      : ${percentColor ? percentColor : theme.colors[color] || color};
-            margin     : 4px 0;
-            min-width  : max-content;
-            position   : absolute;
-            transform  : translateX(-50%);
-            transition : left ${duration}s cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
-            user-select: none;
-            ${valuePosition === 'bottom' ? 'top: 100%;' : 'bottom: 100%;'};
-        }
-    `;
-
+            animation: ${keyframeStart} 0.3s ease-in;
+            background-color: ${background};
+            border-radius: 4px;
+            box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
+            height: ${cutPX(height)};
+            position: relative;
+            width: ${cutPX(width)};
+            .${unique.bar} {
+                background-color: ${theme.colors[color] || color};
+                border-radius: 4px;
+                bottom: 0;
+                left: 0;
+                position: absolute;
+                top: 0;
+                transition: width ${duration}s cubic-bezier(0.77, 0, 0.175, 1); /* easeInOutQuart */
+            }
+            .${unique.value} {
+                color: ${percentColor ? percentColor : theme.colors[color] || color};
+                margin: 4px 0;
+                min-width: max-content;
+                position: absolute;
+                transform: translateX(-50%);
+                transition: left ${duration}s cubic-bezier(0.77, 0, 0.175, 1); /* easeInOutQuart */
+                user-select: none;
+                ${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
@@ -219,7 +213,7 @@ const Determinate = /*#__PURE__*/forwardRef(({
 });
 Determinate.defaultProps = {
   background: theme.colors.brand12,
-  color: theme.colors.info,
+  color: theme.colors.semantic.info,
   duration: 0.1,
   height: 8,
   percent: 69,
@@ -280,7 +274,7 @@ const LinearProgress = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 }));
 LinearProgress.defaultProps = {
   background: theme.colors.brand12,
-  color: theme.colors.info,
+  color: theme.colors.semantic.info,
   determinate: false,
   duration: 0.1,
   height: 8,
@@ -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';
@@ -7,8 +6,7 @@ import { jsx, css } from '@emotion/core';
 import { StarHalf, StarOutline } from "../../icons";
 import { randomString } from "../../utils";
 import { hexToRGBA } from "../../styles/color-helper";
-import { color as colors } from "../../styles/colors";
-import theme from "../../theme/settings";
+import { useTheme, useColor as colors } from "../../theme";
 import { itemsCenter, border, cursorPointer, flexRow, flexRowReverse, displayInlineFlex, outlineNone, overflowHidden, pointerEventsNone, positionAbsolute, positionRelative } from "../../styles/general";
 const {
   colors: {
@@ -28,7 +26,7 @@ const {
     paragraph3
   },
   spacing
-} = theme;
+} = useTheme();
 const Rating = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   id,
   disabled,
@@ -52,13 +50,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 +60,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 +157,6 @@ const RatingSelectCSS = css`
         background-color: ${white};
     }
 `;
-
 const RatingItemHaftCSS = color => css`
     ${flexRow};
     ${positionAbsolute};
@@ -197,7 +186,6 @@ const RatingItemHaftCSS = color => css`
         }
     }
 `;
-
 const RatingItemCSS = (RatingItemHaftCSSName, color, half) => css`
     ${displayInlineFlex};
     ${positionRelative};
@@ -219,7 +207,6 @@ const RatingItemCSS = (RatingItemHaftCSSName, color, half) => css`
         }
     }
 `;
-
 Rating.defaultProps = {
   disabled: false,
   readOnly: false,
@@ -234,48 +221,36 @@ 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
 };