diginet-core-ui 1.3.78 → 1.3.79

package/components/button/ripple-effect.js

@@ -1,59 +1,37 @@
 /* eslint-disable react/prop-types */
-
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
-import { jsx, css } from '@emotion/core';
-import React, { useLayoutEffect, useState } from 'react';
-
+import { css, jsx, keyframes } from '@emotion/core';
+import { forwardRef, memo, useImperativeHandle, useLayoutEffect, useState } from 'react';
+import { borderRadius100, borderRadius50, overflowHidden, positionAbsolute } from '../../styles/general';
+import { useTheme } from '../../theme';
+const {
+  colors: {
+    system: {
+      white: systemWhite
+    }
+  }
+} = useTheme();
 const useDebouncedRippleCleanUp = (rippleCount, duration, cleanUpFunction) => {
   useLayoutEffect(() => {
     if (rippleCount > 0) {
       const bounce = setTimeout(() => cleanUpFunction(), duration);
       return () => clearTimeout(bounce);
     }
-
     return undefined;
   }, [rippleCount, duration, cleanUpFunction]);
 };
-
-const Ripple = ({
+const Ripple = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   duration = 850,
-  color = '#fff',
+  color = systemWhite,
   circular = false,
   ...props
-}) => {
+}, ref) => {
   const [rippleArray, setRippleArray] = useState([]);
   useDebouncedRippleCleanUp(rippleArray.length, duration, () => {
     setRippleArray([]);
   });
-  const RippleContainer = css`
-        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;
-        }
-
-        @keyframes ripple {
-            to {
-                opacity: 0;
-                transform: scale(2);
-            }
-        }
-    `;
-
+  const _RippleChildCSS = RippleChildCSS(circular, color, duration);
   const addRipple = event => {
     const rippleContainer = event.currentTarget.getBoundingClientRect();
     const size = rippleContainer.width > rippleContainer.height ? rippleContainer.width : rippleContainer.height;
@@ -66,14 +44,18 @@ const Ripple = ({
     };
     setRippleArray(prevState => [...prevState, newRippleArray]);
   };
-
+  useImperativeHandle(ref, () => ({
+    start: addRipple
+  }));
   return jsx("span", {
-    css: RippleContainer,
-    ...props,
-    onMouseDown: addRipple
+    css: RippleContainerCSS,
+    className: 'DGN-UI-Ripple',
+    ...props
   }, rippleArray.length > 0 && rippleArray.map((ripple, index) => {
     return jsx("span", {
       key: 'ripple_' + index,
+      css: _RippleChildCSS,
+      className: 'DGN-UI-Ripple-Child',
       style: {
         top: ripple.y,
         left: ripple.x,
@@ -82,6 +64,26 @@ const Ripple = ({
       }
     });
   }));
-};
-
-export default /*#__PURE__*/React.memo(Ripple);
+}));
+const rippleKeyframes = keyframes`
+	to {
+		opacity: 0;
+		transform: scale(2);
+	}
+`;
+const RippleContainerCSS = css`
+    ${overflowHidden};
+    ${positionAbsolute};
+    z-index: 0;
+    inset: 0px;
+    border-radius: inherit;
+`;
+const RippleChildCSS = (circular, color, duration) => css`
+    ${positionAbsolute};
+    ${circular ? borderRadius50 : borderRadius100};
+    opacity: 0.75;
+    transform: scale(0);
+    background-color: ${color};
+    animation: ${rippleKeyframes} ${duration}ms;
+`;
+export default Ripple;

package/components/card/body.js

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { memo, useRef, useMemo, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
@@ -18,11 +17,10 @@ const CardBody = /*#__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;
   });
@@ -42,13 +40,10 @@ CardBody.defaultProps = {
 CardBody.propTypes = {
   /** The content of the component. */
   children: PropTypes.node,
-
   /** Class for component. ({container: '', header: '', body: '', footer: ''}) */
   className: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-
   /** If `true`, will have divider between body and footer. */
   style: PropTypes.object,
-
   /** The title of the component's header. */
   title: PropTypes.string
 };

package/components/card/extra.js

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { memo, useRef, useMemo, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
@@ -18,11 +17,10 @@ const CardExtra = /*#__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;
   });
@@ -42,13 +40,10 @@ CardExtra.defaultProps = {
 CardExtra.propTypes = {
   /** The content of the component. */
   children: PropTypes.node,
-
   /** Class for component. ({container: '', header: '', body: '', footer: ''}) */
   className: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-
   /** If `true`, will have divider between body and footer. */
   style: PropTypes.object,
-
   /** The title of the component's header. */
   title: PropTypes.string
 };

package/components/card/footer.js

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { memo, useRef, useMemo, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
@@ -18,11 +17,10 @@ const CardFooter = /*#__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;
   });
@@ -42,13 +40,10 @@ CardFooter.defaultProps = {
 CardFooter.propTypes = {
   /** The content of the component. */
   children: PropTypes.node,
-
   /** Class for component. ({container: '', header: '', body: '', footer: ''}) */
   className: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-
   /** If `true`, will have divider between body and footer. */
   style: PropTypes.object,
-
   /** The title of the component's header. */
   title: PropTypes.string
 };

package/components/card/header.js

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { memo, useRef, useMemo, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
@@ -19,11 +18,10 @@ const CardHeader = /*#__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;
   });
@@ -45,13 +43,10 @@ CardHeader.defaultProps = {
 CardHeader.propTypes = {
   /** The content of the component. */
   children: PropTypes.node,
-
   /** Class for component. ({container: '', header: '', body: '', footer: ''}) */
   className: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-
   /** If `true`, will have divider between body and footer. */
   style: PropTypes.object,
-
   /** The title of the component's header. */
   title: PropTypes.string
 };

package/components/card/index.js

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { memo, useRef, useMemo, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
@@ -44,17 +43,14 @@ const Card = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   width
 }, reference) => {
   const ref = useRef(null);
-
   const _CardCSS = CardCSS(width, height, headerDivider, footerDivider, dividerColor, direction);
-
   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;
   });
@@ -81,7 +77,6 @@ const Card = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, head, body || children, foot);
   }, [bodyProp, bodyStyle, children, className, dividerColor, direction, footer, footerDivider, footerStyle, header, headerDivider, headerStyle, height, id, style, title, width]);
 }));
-
 const CardCSS = (width, height, headerDivider, footerDivider, dividerColor, direction) => css`
     ${direction === 'vertical' ? flexCol : flexRow};
     ${positionRelative};
@@ -137,7 +132,6 @@ const CardCSS = (width, height, headerDivider, footerDivider, dividerColor, dire
         ${borderBox};
     }
 `;
-
 Card.defaultProps = {
   bodyStyle: {},
   className: '',
@@ -152,46 +146,32 @@ Card.defaultProps = {
 Card.propTypes = {
   /** The content of the component's body. */
   body: PropTypes.node,
-
   /** The content of the component's body. */
   bodyStyle: PropTypes.object,
-
   /** The content of the component. */
   children: PropTypes.node,
-
   /** Class for component. ({container: '', header: '', body: '', footer: ''}) */
   className: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-
   /** Color of divider. */
   dividerColor: PropTypes.string,
-
   /** The content of the component's footer. */
   footer: PropTypes.node,
-
   /** If `true`, will have divider between body and footer. */
   footerDivider: PropTypes.bool,
-
   /** Style inline of component's footer. */
   footerStyle: PropTypes.object,
-
   /** The content of the component's header. */
   header: PropTypes.node,
-
   /** If `true`, will have divider between header and body. */
   headerDivider: PropTypes.bool,
-
   /** Style inline of component's header. */
   headerStyle: PropTypes.object,
-
   /** Height of the component. */
   height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
   /** Style inline of component. */
   style: PropTypes.object,
-
   /** The title of the component's header. */
   title: PropTypes.string,
-
   /** Width of the component. */
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 };

package/components/chart/Pie/Circle.js

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import PropTypes from 'prop-types';
 import { memo, forwardRef } from 'react';

package/components/chart/Pie/Sector.js

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { useRef, memo, forwardRef } from 'react';
 import PropTypes from "prop-types";
@@ -27,11 +26,9 @@ const Sector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   ...props
 }, ref) => {
   let result;
-
   if (!ref) {
     ref = useRef(null);
   }
-
   const pathRef = useRef(null);
   const SectorCSS = expandOnHover || expandedIndex >= 0 ? css`
         transition-property: all;
@@ -48,10 +45,8 @@ const Sector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         transition-timing-function: ${transitionTimingFunction};
         transition-duration: ${transitionDuration};
     `;
-
   const Data = (data, index) => {
     let item = null;
-
     if (renderSelectedItem && typeof renderSelectedItem === 'function') {
       item = renderSelectedItem({
         data,
@@ -61,7 +56,6 @@ const Sector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       ReactDOM.render(item, pathRef.current.appendChild(el));
     }
   };
-
   const content = jsx("g", {
     css: SectorCSS
   }, jsx("path", {
@@ -78,7 +72,6 @@ const Sector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     onMouseLeave: onMouseLeave,
     ...props
   }, renderSelectedItem ? Data() : name && jsx("title", null, name, ": ", quantity)));
-
   if (href) {
     result = jsx("a", {
       href: href
@@ -86,7 +79,6 @@ const Sector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   } else {
     result = content;
   }
-
   return result;
 }));
 Sector.defaultProps = {
@@ -102,38 +94,29 @@ Sector.defaultProps = {
 Sector.propTypes = {
   /** the fill change color of pie chart  */
   fill: PropTypes.string.isRequired,
-
   /** event click mouse in pie chart */
   onMouseEnter: PropTypes.func,
-
   /** event leave mouse in pie chart */
   onMouseLeave: PropTypes.func,
   onTouchEnd: PropTypes.func,
   onTouchStart: PropTypes.func,
-
   /** function displays selected items by custom, example:<br/>
    * renderItem={(data, index) => index + ' - ' + data.name}<br/>
    */
   renderSelectedItem: PropTypes.func,
   path: PropTypes.string.isRequired,
-
   /** the StrokeColor change color border and Stroke */
   strokeColor: PropTypes.string,
-
   /** it can be applied to any element but it has effect only on the following nine */
   strokeLinejoin: PropTypes.string,
-
   /** The strokeWidth attribute is a presentation attribute defining the width of the stroke to be applied to the shape */
   strokeWidth: PropTypes.number,
-
   /** The title is add from the data */
   name: PropTypes.string,
   quantity: PropTypes.number,
   href: PropTypes.string,
-
   /** The transition-duration CSS property sets the length of time a transition animation should take to complete. Default 0.3s */
   transitionDuration: PropTypes.string,
-
   /** The transition-timing-function CSS property sets how intermediate values are calculated for CSS properties being affected*/
   transitionTimingFunction: PropTypes.string,
   className: PropTypes.string

package/components/chart/Pie/Sectors.js

@@ -1,10 +1,8 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import PropTypes from "prop-types";
 import Sector from "./Sector";
 import { jsx } from '@emotion/core';
-
 const Sectors = ({
   center,
   data,
@@ -56,35 +54,27 @@ const Sectors = ({
     });
   })) : null;
 };
-
 Sectors.defaultProps = {
   expandSize: 2
 };
 Sectors.propTypes = {
   center: PropTypes.number.isRequired,
-
   /** The array of elements that appear in the PieChart */
   data: PropTypes.arrayOf(PropTypes.shape({
     color: PropTypes.string.isRequired,
     name: PropTypes.string,
     quantity: PropTypes.number.isRequired
   })).isRequired,
-
   /** returns the data of the object to be hover */
   onSectorHover: PropTypes.func,
-
   /** the Size expand On Hover */
   expandSize: PropTypes.number,
-
   /** the StrokeWidth change color border and Stroke */
   strokeColor: Sector.propTypes.strokeColor,
-
   /** The strokeWidth attribute is a presentation attribute defining the width of the stroke to be applied to the shape */
   strokeWidth: Sector.propTypes.strokeWidth,
-
   /** The starting angle is drawn in a circle from data first */
   startAngle: PropTypes.number,
-
   /** */
   angleMargin: PropTypes.number
 };

package/components/chart/Pie/index.js

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { useState, useRef, useEffect, memo, forwardRef } from 'react';
 import PropTypes from "prop-types";
@@ -26,29 +25,23 @@ const PieChart = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   if (!ref) {
     ref = useRef(null);
   }
-
   if (data[0] && !data[0].color) {
     var colors = [];
     let Count = data.length;
-
     while (colors.length < Count) {
       do {
         var makeColorCode = '0123456789ABCDEF';
         var code = '#';
-
         for (var count = 0; count < 6; count++) {
           code = code + makeColorCode[Math.floor(Math.random() * 16)];
         }
       } while (colors.indexOf(code) >= 0);
-
       colors.push("#" + ("000000" + code.toString(16)).slice(-6));
     }
-
     for (let i in data) {
       data[i].color = colors[i];
     }
   }
-
   const compare = () => {
     if (width > height) {
       return height;
@@ -56,13 +49,11 @@ const PieChart = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       return width;
     }
   };
-
   const ZoomIn = () => {
     let zoom = 0;
     zoom = compare() / 25;
     return zoom;
   };
-
   const Pie = Donut ? css`
         position: relative;
         display: flex;
@@ -101,7 +92,6 @@ const PieChart = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const offset = expandOnHover || props.expandedIndex > -1 ? expandSize + 2 : 0;
   const [isExpanded, setExpanded] = useState('false');
   const expandedIndex = useRef(null);
-
   const handleSectorHover = (data, index, e) => {
     if (expandOnHover) {
       setExpanded({
@@ -109,12 +99,10 @@ const PieChart = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       });
       expandedIndex.current = index !== null ? index : props.expandedIndex > -1 ? props.expandedIndex : null;
     }
-
     if (onSectorHover) {
       onSectorHover(data, index, e);
     }
   };
-
   const renderSingleData = (d, center) => {
     return jsx(Circle, {
       center: center,
@@ -127,13 +115,14 @@ const PieChart = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       ...d
     });
   };
-
   const renderMultipleData = center => {
     return jsx(Sectors, {
       center: center,
-      data: expandOnHover ? data.map((d, i) => ({ ...d,
+      data: expandOnHover ? data.map((d, i) => ({
+        ...d,
         expanded: `${isExpanded ? i === expandedIndex.current : i === props.expandedIndex}`
-      })) : data.map((d, i) => ({ ...d,
+      })) : data.map((d, i) => ({
+        ...d,
         expanded: `${i === props.expandedIndex}`
       })),
       ...props,
@@ -143,13 +132,11 @@ const PieChart = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onSectorHover: handleSectorHover
     });
   };
-
   useEffect(() => {
     if (direction === 'bottom' && viewData) {
       document.getElementById(`DGN-CUI-Container-PieChart`).style.display = "inherit";
       document.getElementById(`DGN-CUI-TableData-PieChart`).style.display = "flex";
     }
-
     if (direction === 'left' && viewData) {
       document.getElementById(`DGN-CUI-Container-PieChart`).style.position = "relative";
       document.getElementById(`DGN-CUI-TableData-PieChart`).style.position = "fixed";
@@ -244,19 +231,14 @@ PieChart.defaultProps = {
 PieChart.propTypes = {
   /** the viewData will display information about the input data */
   viewData: PropTypes.bool,
-
   /** drawn Ratio of Width entered by user, default is: 900px */
   width: PropTypes.number,
-
   /** drawn Ratio of Height entered by user, default is: 500px */
   height: PropTypes.number,
-
   /** change from PieChart to DonutChart  */
   Donut: PropTypes.bool,
-
   /** Typography of font in core, default: h4  */
   type: PropTypes.string,
-
   /** The array of elements that appear in the PieChart */
   data: PropTypes.arrayOf(PropTypes.shape({
     color: PropTypes.string,
@@ -264,46 +246,32 @@ PieChart.propTypes = {
     quantity: PropTypes.number.isRequired,
     href: PropTypes.string
   })).isRequired,
-
   /** the animation expand On Hover */
   expandOnHover: PropTypes.bool,
-
   /** the direction custom position data */
   direction: PropTypes.string,
-
   /** the Size expand On Hover */
   expandSize: PropTypes.number,
-
   /** the specified position is hovering by default */
   expandedIndex: PropTypes.number,
-
   /** returns the data of the object to be hover */
   onSectorHover: PropTypes.func,
-
   /** the StrokeWidth change color border and Stroke */
   strokeColor: Sector.propTypes.strokeColor,
-
   /** it can be applied to any element but it has effect only on the following nine */
   strokeLinejoin: Sector.propTypes.strokeLinejoin,
-
   /** The strokeWidth attribute is a presentation attribute defining the width of the stroke to be applied to the shape */
   strokeWidth: Sector.propTypes.strokeWidth,
-
   /** The starting angle is drawn in a circle from data first */
   startAngle: PropTypes.number,
-
   /** */
   angleMargin: PropTypes.number,
-
   /** The viewBox attribute defines the position and dimension, in user space, of an SVG viewport */
   viewBoxSize: PropTypes.number,
-
   /** The transition-duration CSS property sets the length of time a transition animation should take to complete. Default 0.3s */
   transitionDuration: Sector.propTypes.transitionDuration,
-
   /** The transition-timing-function CSS property sets how intermediate values are calculated for CSS properties being affected*/
   transitionTimingFunction: Sector.propTypes.transitionTimingFunction,
-
   /** The title is add from the data */
   name: Sector.propTypes.name
 };

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

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import PropTypes from 'prop-types';
 import { memo, forwardRef } from 'react';