diginet-core-ui 1.3.24

package/components/popup/v2/info-popup.js

@@ -0,0 +1,17 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { memo, forwardRef } from 'react';
+import PopupV2 from '.';
+const InfoPopup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({ ...props
+}, ref) => {
+  return jsx(PopupV2, _extends({
+    ref: ref
+  }, props, {
+    type: 'info'
+  }));
+}));
+export default InfoPopup;

package/components/popup/v2/success-popup.js

@@ -0,0 +1,17 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { memo, forwardRef } from 'react';
+import PopupV2 from '.';
+const SuccessPopup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({ ...props
+}, ref) => {
+  return jsx(PopupV2, _extends({
+    ref: ref
+  }, props, {
+    type: 'success'
+  }));
+}));
+export default SuccessPopup;

package/components/popup/v2/warning-popup.js

@@ -0,0 +1,17 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { memo, forwardRef } from 'react';
+import PopupV2 from '.';
+const WarningPopup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({ ...props
+}, ref) => {
+  return jsx(PopupV2, _extends({
+    ref: ref
+  }, props, {
+    type: 'warning'
+  }));
+}));
+export default WarningPopup;

package/components/popup/v2/yes-no-popup.js

@@ -0,0 +1,20 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { memo, forwardRef } from 'react';
+import PopupV2 from '.';
+const YesNoPopup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  onConfirm,
+  onCancel,
+  ...props
+}, ref) => {
+  return jsx(PopupV2, _extends({
+    ref: ref
+  }, props, {
+    type: 'yesno'
+  }));
+}));
+export default YesNoPopup;

package/components/progress/circular.js

@@ -0,0 +1,414 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import { css, jsx, keyframes } from '@emotion/core';
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useMemo, useRef } from 'react';
+import theme from '../../theme/settings';
+
+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':
+      labelStyle = { ...theme.typography.h1
+      };
+      rect = 120;
+      strokeWidth = 16;
+      break;
+
+    case 'lg':
+    case 'large':
+      labelStyle = { ...theme.typography.h2
+      };
+      rect = 80;
+      strokeWidth = 12;
+      break;
+
+    case 'md':
+    case 'medium':
+      labelStyle = { ...theme.typography.p1
+      };
+      rect = 60;
+      strokeWidth = 8;
+      break;
+
+    case 'sm':
+    case 'small':
+      labelStyle = { ...theme.typography.p2
+      };
+      rect = 40;
+      strokeWidth = 6;
+      break;
+
+    case 'xs':
+    case 'extraSmall':
+      labelStyle = { ...theme.typography.p3
+      };
+      rect = 20;
+      strokeWidth = 4;
+      break;
+
+    default:
+      labelStyle = { ...theme.typography.h2
+      };
+      rect = 80;
+      strokeWidth = 8;
+  }
+
+  ;
+  return {
+    labelStyle,
+    rect,
+    strokeWidth
+  };
+};
+/**
+ * Determinate circular progress 
+ */
+
+
+const Determinate = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  background,
+  circleRef,
+  color,
+  direction,
+  duration,
+  percentColor,
+  percent,
+  showValue,
+  size,
+  strokeWidth,
+  width,
+  ...props
+}, ref) => {
+  if (!ref) ref = useRef(null);
+  if (!circleRef) circleRef = useRef(null);
+  const dimension = getDimension(size);
+  const containerW = width ? Math.max(24, width) : dimension.rect * 2;
+  const circleStrokeW = strokeWidth ? Math.max(2, strokeWidth) : dimension.strokeWidth;
+  const radius = containerW / 2 - circleStrokeW;
+  const circumference = radius * 2 * Math.PI;
+
+  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;
+  };
+  /**
+   * style
+   */
+
+
+  const containerCSS = css`
+        border-radius: 50%;
+        height       : ${containerW}px;
+        overflow     : hidden;
+        position     : relative;
+        width        : ${containerW}px;
+    `;
+  const circleBackgroundCSS = css`
+        border-radius: 50%;
+        fill         : transparent;
+        overflow     : hidden;
+        stroke       : ${background};
+        stroke-width : ${circleStrokeW}px;
+    `;
+  const circleMainCSS = css`
+        border-radius    : 50%;
+        fill             : transparent;
+        overflow         : hidden;
+        stroke           : ${color};
+        stroke-dasharray : ${`${circumference} ${circumference}`};
+        stroke-dashoffset: ${circumference - validatePercent(percent) / 100 * circumference};
+        stroke-linecap   : round;
+        stroke-width     : ${circleStrokeW}px;
+        transform        : rotate(${getDirection(direction)}deg);
+        transform-origin : 50% 50%;
+        transition       : stroke-dashoffset ${duration}s cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
+    `;
+  const textCSS = css`
+        fill       : ${percentColor ? percentColor : color};
+        font-family: ${dimension.labelStyle.fontFamily};
+        font-size  : ${dimension.labelStyle.fontSize};
+        line-height: ${dimension.labelStyle.lineHeight};
+        text-anchor: middle;
+        user-select: none;
+    `;
+  const CircleBackgroundMemo = useMemo(() => jsx("circle", {
+    css: circleBackgroundCSS,
+    cx: containerW / 2,
+    cy: containerW / 2,
+    r: radius
+  }), [background, direction, size, strokeWidth, width]);
+  const CircleMainMemo = useMemo(() => jsx("circle", {
+    css: circleMainCSS,
+    cx: containerW / 2,
+    cy: containerW / 2,
+    r: radius,
+    ref: circleRef
+  }), [color, direction, percent, size, strokeWidth, width]);
+  const PercentTextMemo = useMemo(() => showValue && jsx("text", {
+    css: textCSS,
+    dominantBaseline: 'middle',
+    x: containerW / 2,
+    y: containerW / 2 + containerW / 80
+  }, validatePercent(percent), "%"), [color, percentColor, percent, size, strokeWidth, showValue, width]);
+  return jsx("svg", _extends({}, props, {
+    css: containerCSS,
+    ref: ref
+  }), CircleBackgroundMemo, CircleMainMemo, PercentTextMemo);
+}));
+Determinate.defaultProps = {
+  background: theme.colors.bgProgress,
+  color: theme.colors.info,
+  direction: 'top',
+  duration: 2,
+  percent: 25,
+  showValue: false,
+  size: 'medium'
+};
+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 
+ */
+
+const Indeterminate = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  background,
+  circleRef,
+  color,
+  size,
+  strokeWidth,
+  width,
+  ...props
+}, ref) => {
+  if (!ref) ref = useRef(null);
+  if (!circleRef) circleRef = useRef(null);
+  const dimension = getDimension(size);
+  const containerW = width ? Math.max(16, width) : dimension.rect * 2;
+  const circleStrokeW = strokeWidth ? Math.max(2, strokeWidth) : dimension.strokeWidth;
+  const radius = containerW / 2 - circleStrokeW;
+  const radiusX10 = radius * 10;
+  const keyframeRotate = keyframes`
+        100%{ transform: rotate(360deg);}
+    `;
+
+  const keyframeDash = r => keyframes`
+        0%{
+            stroke-dasharray: 1, ${r};
+            stroke-dashoffset: 0;
+        }
+        40%{
+            stroke-dasharray: ${r * 89 / 200}, ${r};
+            stroke-dashoffset: -${r * 35 / 200};
+        }
+        100%{
+            stroke-dasharray: ${r * 89 / 200}, ${r};
+            stroke-dashoffset: -${r * 124 / 200};
+        }
+    `;
+  /**
+   * style
+   */
+
+
+  const containerCSS = css`
+        animation    : ${keyframeRotate} 2s linear infinite;
+        border-radius: 50%;
+        height       : ${containerW}px;
+        overflow     : hidden;
+        position     : relative;
+        width        : ${containerW}px;
+    `;
+  const circleBackgroundCSS = css`
+        border-radius : 50%;
+        fill          : transparent;
+        overflow      : hidden;
+        stroke        : ${background};
+        stroke-linecap: round;
+        stroke-width  : ${circleStrokeW};
+    `;
+  const circleMainCSS = css`
+        animation        : ${keyframeDash(radiusX10)} 2s ease-in-out infinite;
+        border-radius    : 50%;
+        fill             : transparent;
+        overflow         : hidden;
+        stroke           : ${color};
+        stroke-dasharray : 10, ${radiusX10};
+        stroke-dashoffset: 0;
+        stroke-linecap   : round;
+        stroke-width     : ${circleStrokeW};
+    `;
+  /**
+   * component
+   */
+
+  const CircleBackgroundMemo = useMemo(() => jsx("circle", {
+    css: circleBackgroundCSS,
+    cx: containerW / 2,
+    cy: containerW / 2,
+    r: radius
+  }), [background, size, strokeWidth, width]);
+  const CircleMainMemo = useMemo(() => jsx("circle", {
+    css: circleMainCSS,
+    cx: containerW / 2,
+    cy: containerW / 2,
+    r: radius,
+    ref: circleRef
+  }), [color, size, strokeWidth, width]);
+  return jsx("svg", _extends({}, props, {
+    css: containerCSS,
+    ref: ref
+  }), CircleBackgroundMemo, CircleMainMemo);
+}));
+Indeterminate.defaultProps = {
+  background: theme.colors.bgProgress,
+  color: theme.colors.info,
+  size: 'medium'
+};
+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
+ */
+
+const CircularProgress = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  determinate,
+  direction,
+  duration,
+  percent,
+  percentColor,
+  showValue,
+  ...props
+}, ref) => {
+  if (!ref) ref = useRef(null);
+  return determinate ? jsx(DeterminateCircularProgress, _extends({
+    direction: direction,
+    duration: duration,
+    percent: percent,
+    percentColor: percentColor,
+    showValue: true
+  }, props, {
+    ref: ref
+  })) : jsx(IndeterminateCircularProgress, _extends({}, props, {
+    ref: ref
+  }));
+}));
+CircularProgress.defaultProps = {
+  background: theme.colors.bgProgress,
+  color: theme.colors.info,
+  determinate: false,
+  direction: 'top',
+  duration: 1,
+  percent: 25,
+  percentColor: theme.colors.info,
+  showValue: false,
+  size: 'medium'
+};
+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
+};
+export default CircularProgress;