diginet-core-ui 1.3.34 → 1.3.35

package/components/button/index.js

@@ -124,20 +124,20 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const iconMarginSize = iconMarginSizeMap.get(size);
   const minHeightSize = minHeightSizeMap.get(size);
   const ButtonIcon = css`
-        ${flexRow}
-        ${alignCenter}
+                ${flexRow}
+                ${alignCenter}
         ${justifyCenter}
         ${positionRelative}
         ${borderBox}
-    `;
+            `;
   const ButtonText = css`
-        white-space: nowrap;
-        color: inherit;
-        margin: 0 ${loading ? iconMarginSize : 0};
-    `;
+                white-space: nowrap;
+                color: inherit;
+                margin: 0 ${loading ? iconMarginSize : 0};
+            `;
   const ButtonRoot = css`
-        ${inlineFlex}
-        ${alignCenter}
+                ${inlineFlex}
+                ${alignCenter}
         ${justifyCenter}
         ${positionRelative}
         ${borderRadius4px}
@@ -148,185 +148,185 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         ${outlineNone}
         ${userSelectNone}
         height: max-content;
-        transition: all 0.5s;
-        &.button--disabled {
-            cursor: not-allowed !important;
-            color: ${systemDisabled} !important;
-            &.outlined {
-                border-color: ${systemDisabled} !important;
-                background-color: transparent !important;
-            }
-            &.filled {
-                background-color: ${fillDisabled} !important;
-                filter: brightness(1) !important;
-            }
-            &.text {
-                background-color: transparent !important;
-            }
-        }
-        /* &:not(:disabled):focus {
+                transition: all 0.5s;
+                &.button--disabled {
+                    cursor: not-allowed !important;
+                    color: ${systemDisabled} !important;
+                    &.outlined {
+                        border-color: ${systemDisabled} !important;
+                        background-color: transparent !important;
+                    }
+                    &.filled {
+                        background-color: ${fillDisabled} !important;
+                        filter: brightness(1) !important;
+                    }
+                    &.text {
+                        background-color: transparent !important;
+                    }
+                }
+                /* &:not(:disabled):focus {
             box-shadow: ${viewType === 'outlined' ? '0 0 0 2px ' + hexToRGBA(active, 0.13) : 'none'};
         } */
-        &.button--loading {
-            ${pointerEventsNone}
-        }
-        &.${size} {
-            padding: ${paddingSize};
-            min-height: ${minHeightSize};
-            min-width: max-content;
-            &.outlined {
-                padding: ${outlinedPaddingSize};
-            }
-            .css-${ButtonText.name} {
-                ${typographySize};
-            }
-            .css-${ButtonIcon.name} {
-                margin-right: ${endIcon || label ? iconMarginSize : 0};
-                &.DGN-UI-Button-End-Icon,
-                &.DGN-UI-Button-Custom-End-Icon {
-                    margin-right: unset;
-                    margin-left: ${startIcon || label ? iconMarginSize : 0};
-                }
-                &.DGN-UI-Button-Start-Icon,
-                &.DGN-UI-Button-End-Icon {
-                    height: ${iconSize};
-                    width: ${iconSize};
-                }
-            }
-            .no-icon {
-                ${noMargin}
-                height: ${iconSize};
-                min-width: 0;
-            }
-        }
-        &.outlined {
-            ${backgroundTransparent}
-            &.default {
-                border: 1px solid ${rest};
-                color: ${rest};
-                &.button--loading,
-                &:hover,
-                &:focus,
-                &:active {
-                    color: ${active};
-                    border-color: ${active};
-                }
                 &.button--loading {
-                    background-color: ${hexToRGBA(active, alphaLoading)};
+                    ${pointerEventsNone}
+                }
+                &.${size} {
+                    padding: ${paddingSize};
+                    min-height: ${minHeightSize};
+                    min-width: max-content;
+                    &.outlined {
+                        padding: ${outlinedPaddingSize};
+                    }
+                    .css-${ButtonText.name} {
+                        ${typographySize};
+                    }
+                    .css-${ButtonIcon.name} {
+                        margin-right: ${endIcon || label ? iconMarginSize : 0};
+                        &.DGN-UI-Button-End-Icon,
+                        &.DGN-UI-Button-Custom-End-Icon {
+                            margin-right: unset;
+                            margin-left: ${startIcon || label ? iconMarginSize : 0};
+                        }
+                        &.DGN-UI-Button-Start-Icon,
+                        &.DGN-UI-Button-End-Icon {
+                            height: ${iconSize};
+                            width: ${iconSize};
+                        }
+                    }
+                    .no-icon {
+                        ${noMargin}
+                        height: ${iconSize};
+                        min-width: 0;
+                    }
                 }
-                ${Object.keys(alphaArr).map(key => `&:${key} {
+                &.outlined {
+                    ${backgroundTransparent}
+                    &.default {
+                        border: 1px solid ${rest};
+                        color: ${rest};
+                        &.button--loading,
+                        &:hover,
+                        &:focus,
+                        &:active {
+                            color: ${active};
+                            border-color: ${active};
+                        }
+                        &.button--loading {
+                            background-color: ${hexToRGBA(active, alphaLoading)};
+                        }
+                        ${Object.keys(alphaArr).map(key => `&:${key} {
                         background-color: ${hexToRGBA(active, alphaArr[key])};
                     }`)}// &:hover | &:focus | &:active
-            }
-            &.${color} {
-                border: 1px solid ${colorMap.get(color)};
-                color: ${colorMap.get(color)};
-                &.button--loading {
-                    background-color: ${hexToRGBA(colorMap.get(color), alphaLoading)};
-                }
-                ${Object.keys(alphaArr).map(key => `&:${key} {
+                    }
+                    &.${color} {
+                        border: 1px solid ${colorMap.get(color)};
+                        color: ${colorMap.get(color)};
+                        &.button--loading {
+                            background-color: ${hexToRGBA(colorMap.get(color), alphaLoading)};
+                        }
+                        ${Object.keys(alphaArr).map(key => `&:${key} {
                         background-color: ${hexToRGBA(colorMap.get(color), alphaArr[key])};
                     }`)}
-            }
-            &.custom-color {
-                border: 1px solid ${color};
-                color: ${color};
-                &.button--loading {
-                    background-color: ${hexToRGBA(color, alphaLoading)};
-                }
-                ${Object.keys(alphaArr).map(key => `&:${key} {
+                    }
+                    &.custom-color {
+                        border: 1px solid ${color};
+                        color: ${color};
+                        &.button--loading {
+                            background-color: ${hexToRGBA(color, alphaLoading)};
+                        }
+                        ${Object.keys(alphaArr).map(key => `&:${key} {
                         background-color: ${hexToRGBA(color, alphaArr[key])};
                     }`)}
-            }
-        }
-        &.filled {
-            border: none;
-            color: ${white};
-            font-weight: bold;
-            &.button--loading,
-            &:hover,
-            &:focus {
-                filter: brightness(0.85);
-            }
-            &:active {
-                filter: brightness(0.7);
-            }
-            &.default {
-                background-color: ${rest};
-                &.button--loading {
-                    background-color: ${active};
+                    }
                 }
-                &:hover,
-                &:focus,
-                &:active {
-                    background-color: ${active};
+                &.filled {
+                    border: none;
+                    color: ${white};
+                    font-weight: bold;
+                    &.button--loading,
+                    &:hover,
+                    &:focus {
+                        filter: brightness(0.85);
+                    }
+                    &:active {
+                        filter: brightness(0.7);
+                    }
+                    &.default {
+                        background-color: ${rest};
+                        &.button--loading {
+                            background-color: ${active};
+                        }
+                        &:hover,
+                        &:focus,
+                        &:active {
+                            background-color: ${active};
+                        }
+                    }
+                    &.${color} {
+                        background-color: ${colorMap.get(color)};
+                    }
+                    &.custom-color {
+                        background-color: ${color};
+                    }
                 }
-            }
-            &.${color} {
-                background-color: ${colorMap.get(color)};
-            }
-            &.custom-color {
-                background-color: ${color};
-            }
-        }
-        &.text {
-            ${backgroundTransparent}
-            ${noBorder}
+                &.text {
+                    ${backgroundTransparent}
+                    ${noBorder}
             &.default {
-                color: ${rest};
-                &:hover,
-                &:focus,
-                &:active {
-                    color: ${active};
-                }
-                &.button--loading {
-                    color: ${active};
-                    background-color: ${hexToRGBA(active, alphaLoading)};
-                }
-                ${Object.keys(alphaArr).map(key => `&:${key} {
+                        color: ${rest};
+                        &:hover,
+                        &:focus,
+                        &:active {
+                            color: ${active};
+                        }
+                        &.button--loading {
+                            color: ${active};
+                            background-color: ${hexToRGBA(active, alphaLoading)};
+                        }
+                        ${Object.keys(alphaArr).map(key => `&:${key} {
                         background-color: ${hexToRGBA(active, alphaArr[key])};
                     }`)}
-            }
-            &.${color} {
-                color: ${colorMap.get(color)};
-                &.button--loading {
-                    background-color: ${hexToRGBA(colorMap.get(color), alphaLoading)};
-                }
-                ${Object.keys(alphaArr).map(key => `&:${key} {
+                    }
+                    &.${color} {
+                        color: ${colorMap.get(color)};
+                        &.button--loading {
+                            background-color: ${hexToRGBA(colorMap.get(color), alphaLoading)};
+                        }
+                        ${Object.keys(alphaArr).map(key => `&:${key} {
                         background-color: ${hexToRGBA(colorMap.get(color), alphaArr[key])};
                     }`)}
-            }
-            &.custom-color {
-                color: ${color};
-                &.button--loading {
-                    background-color: ${hexToRGBA(color, alphaLoading)};
-                }
-                ${Object.keys(alphaArr).map(key => `&:${key} {
+                    }
+                    &.custom-color {
+                        color: ${color};
+                        &.button--loading {
+                            background-color: ${hexToRGBA(color, alphaLoading)};
+                        }
+                        ${Object.keys(alphaArr).map(key => `&:${key} {
                         background-color: ${hexToRGBA(color, alphaArr[key])};
                     }`)}
-            }
-        }
-        &.link {
-            ${backgroundTransparent}
-            ${noBorder}
+                    }
+                }
+                &.link {
+                    ${backgroundTransparent}
+                    ${noBorder}
             ${noPadding}
             color: ${info};
-            &.button--loading,
-            &:hover,
-            &:focus {
-                filter: brightness(0.85);
-            }
-            &:active {
-                filter: brightness(0.7);
-            }
-            &.${color} {
-                color: ${colorMap.get(color)};
-            }
-            &.custom-color {
-                color: ${color};
-            }
-        }
-    `;
+                    &.button--loading,
+                    &:hover,
+                    &:focus {
+                        filter: brightness(0.85);
+                    }
+                    &:active {
+                        filter: brightness(0.7);
+                    }
+                    &.${color} {
+                        color: ${colorMap.get(color)};
+                    }
+                    &.custom-color {
+                        color: ${color};
+                    }
+                }
+            `;
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     const _instance = {}; // methods
@@ -484,19 +484,19 @@ Button.propTypes = {
   /** status loading of button */
   loading: PropTypes.bool,
 
-  /**
-   * ref methods
-   * 
-   * * option(): Gets all UI component properties
-   *  * Returns value - object
-   * * option(optionName): Gets the value of a single property
-   *  * @param {optionName} - string
-   *  * Returns value - any
-   * * option(optionName, optionValue): Updates the value of a single property
-   *  * @param {optionName} - string
-   *  * @param {optionValue} - any
-   * * option(options): Updates the values of several properties
-   *  * @param {options} - object
+  /**
+   * ref methods
+   *
+   * * option(): Gets all UI component properties
+   *  * Returns value - object
+   * * option(optionName): Gets the value of a single property
+   *  * @param {optionName} - string
+   *  * Returns value - any
+   * * option(optionName, optionValue): Updates the value of a single property
+   *  * @param {optionName} - string
+   *  * @param {optionValue} - any
+   * * option(options): Updates the values of several properties
+   *  * @param {options} - object
    */
   reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)

package/components/button/ripple-effect.js

@@ -26,31 +26,31 @@ const Ripple = ({
     setRippleArray([]);
   });
   const RippleContainer = css`
-    position: absolute;
-    overflow: hidden;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    ${circular && 'border-radius: 50%;'}
+        position: absolute;
+        overflow: hidden;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        ${circular && 'border-radius: 50%;'}
 
-    span {
-      transform: scale(0);
-      border-radius: 100%;
-      position: absolute;
-      opacity: 0.75;
-      background-color: ${color};
-      animation-name: ripple;
-      animation-duration: ${duration}ms;
-    }
+        span {
+            transform: scale(0);
+            border-radius: 100%;
+            position: absolute;
+            opacity: 0.75;
+            background-color: ${color};
+            animation-name: ripple;
+            animation-duration: ${duration}ms;
+        }
 
-    @keyframes ripple {
-      to {
-        opacity: 0;
-        transform: scale(2);
-      }
-    }
-  `;
+        @keyframes ripple {
+            to {
+                opacity: 0;
+                transform: scale(2);
+            }
+        }
+    `;
 
   const addRipple = event => {
     const rippleContainer = event.currentTarget.getBoundingClientRect();

package/components/chart/Pie-v2/index.js

@@ -2,14 +2,14 @@
 
 /** @jsx jsx */
 import { useState, useRef, memo, forwardRef } from 'react';
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import Typography from '../../typography';
 import { randomString } from '../../../utils';
-import { typography } from "../../../styles/typography";
-import Circle from "./Circle";
-import Sectors from "./Sectors";
-import Sector from "./Sector";
+import { typography } from '../../../styles/typography';
+import Circle from './Circle';
+import Sectors from './Sectors';
+import Sector from './Sector';
 const PieChart = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   expandOnHover,
   renderSelectedItem,
@@ -55,7 +55,7 @@ const PieChart = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         }
       } while (colors.indexOf(code) >= 0);
 
-      colors.push("#" + ("000000" + code.toString(16)).slice(-6));
+      colors.push('#' + ('000000' + code.toString(16)).slice(-6));
     }
 
     for (let i in data) {
@@ -63,8 +63,6 @@ const PieChart = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   }
 
-  ;
-
   const ZoomIn = () => {
     let zoom = 0;
     zoom = (width + height) / 2;
@@ -72,41 +70,41 @@ const PieChart = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const svgCSS = css`
-        position: relative;
-        display: block;
-        margin: 0 auto;
-        overflow:hidden;
-        -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
-        user-select: none;
-    `;
+                position: relative;
+                display: block;
+                margin: 0 auto;
+                overflow: hidden;
+                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+                user-select: none;
+            `;
   const Pie = Donut ? css`
-        position: relative;
-        display: flex;
-        margin: 0 auto;
-        &:before{
-            content: '';
-            position: absolute;
-            display: block;
-            position: absolute;
-            display: flex;
-            top: 50%;
-            width: 50%;
-            height: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            border-radius: 50%;
-            background-color: #111d5e;
-        }
-    ` : css`
-        position: relative;
-        display: flex;
-        margin: 0 auto;
-    `;
+                      position: relative;
+                      display: flex;
+                      margin: 0 auto;
+                      &:before {
+                          content: '';
+                          position: absolute;
+                          display: block;
+                          position: absolute;
+                          display: flex;
+                          top: 50%;
+                          width: 50%;
+                          height: 50%;
+                          left: 50%;
+                          transform: translate(-50%, -50%);
+                          border-radius: 50%;
+                          background-color: #111d5e;
+                      }
+                  ` : css`
+                      position: relative;
+                      display: flex;
+                      margin: 0 auto;
+                  `;
   const dataCSS = css`
-        fill:rgba(0,0,0,0.54);
-        ${typography.paragraph1};
-        cursor:default;
-    `;
+                fill: rgba(0, 0, 0, 0.54);
+                ${typography.paragraph1};
+                cursor: default;
+            `;
   const padding1 = ZoomIn() / 10;
   var padding = 0;
 
@@ -277,7 +275,7 @@ const PieChart = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       x: d.x,
       y: "10",
       mapping: 'text',
-      transform: "translate(0,0)",
+      transform: 'translate(0,0)',
       fill: '#51A30'
     }, d.name));
   })))) : null) : jsx("svg", {