diginet-core-ui 1.4.39 → 1.4.40

package/components/progress/linear.js

@@ -1,324 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { css, jsx, keyframes } from '@emotion/core';
-import { Typography } from "./..";
-import PropTypes from 'prop-types';
-import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
-import { bgColor, borderRadius, insetY, left, overflowHidden, parseWidth, parseWidthHeight, positionAbsolute, positionRelative, shadowSmall, textColor } from "../../styles/general";
-import { useTheme } from "../../theme";
-import { getProp } from "../../utils";
-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: backgroundProp,
-  className,
-  color: colorProp,
-  height,
-  width,
-  ...props
-}, reference) => {
-  if (!reference) reference = useRef(null);
-  const ref = useRef(null);
-  const firstBarRef = useRef(null);
-  const secondBarRef = useRef(null);
-  const theme = useTheme();
-  const background = getProp(theme.colors, backgroundProp, backgroundProp);
-  const color = getProp(theme.colors, colorProp, colorProp);
-  const unique = {
-    container: 'DGN-UI-LinearProgress-Determinate',
-    firstBar: 'DGN-UI-LinearProgress-Determinate-BarFirst',
-    secondBar: 'DGN-UI-LinearProgress-Determinate-BarSecond'
-  };
-  const animation = {
-    keyframeStart: keyframes`
-            from {
-                max-height: 0;
-                opacity: 0;
-            }
-            to {
-                max-height: 20px;
-                opacity: 1;
-            }
-        `,
-    keyframeMove: keyframes`
-            0% {
-                left: -100%;
-            }
-            50% {
-                left: 100%;
-            }
-            100% {
-                left: 100%;
-            }
-        `
-  };
-  const ContainerCSS = css`
-            animation: ${animation.keyframeStart} 0.3s ease-in;
-            ${bgColor(background)};
-            ${borderRadius(4)};
-            ${shadowSmall};
-            ${parseWidthHeight(cutPX(width), cutPX(height))}
-            ${overflowHidden};
-            ${positionRelative};
-            .${unique.firstBar} {
-                animation: ${animation.keyframeMove} 3s infinite;
-                ${bgColor(color)};
-                ${borderRadius(4)};
-                ${insetY(0)};
-                ${left(0)};
-                ${positionAbsolute};
-                transition: transform 0.3s ease-in-out;
-                ${parseWidth('100%')};
-            }
-            .${unique.secondBar} {
-                animation-delay: 1.5s;
-                animation: ${animation.keyframeMove} 3s infinite;
-                ${bgColor(color)};
-                ${borderRadius(4)};
-                ${insetY(0)};
-                ${left('-100%')};
-                ${positionAbsolute};
-                transition: transform 0.3s ease-in-out;
-                ${parseWidth('100%')};
-            }
-        `;
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    currentRef.element = ref.current;
-    const _instance = {}; // methods
-    _instance.__proto__ = {}; // hidden methods
-    currentRef.instance = _instance;
-    return currentRef;
-  });
-  const FirstBar = useMemo(() => jsx("div", {
-    className: unique.firstBar,
-    ref: firstBarRef
-  }), [color, theme]);
-  const SecondBar = useMemo(() => jsx("div", {
-    className: unique.secondBar,
-    ref: secondBarRef
-  }), [color, theme]);
-  return jsx("div", {
-    ...props,
-    className: [unique.container, className].join(' ').trimEnd(),
-    css: ContainerCSS,
-    ref: ref
-  }, FirstBar, SecondBar);
-});
-Indeterminate.defaultProps = {
-  background: 'line/category',
-  color: 'semantic/info',
-  height: 8,
-  width: '100%'
-};
-Indeterminate.propTypes = {
-  background: PropTypes.string,
-  className: PropTypes.string,
-  color: PropTypes.string,
-  height: PropTypes.number,
-  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-};
-export const IndeterminateLinearProgress = /*#__PURE__*/memo(Indeterminate);
-const Determinate = /*#__PURE__*/forwardRef(({
-  background: backgroundProp,
-  color: colorProp,
-  className,
-  duration,
-  height,
-  percent,
-  percentColor: percentColorProp,
-  showValue,
-  valuePosition,
-  width,
-  ...props
-}, ref) => {
-  if (!ref) ref = useRef(null);
-  const barRef = useRef(null);
-  const valueRef = useRef(null);
-  const theme = useTheme();
-  const background = getProp(theme.colors, backgroundProp, backgroundProp);
-  const color = getProp(theme.colors, colorProp, colorProp);
-  const percentColor = getProp(theme.colors, percentColorProp, percentColorProp);
-  const unique = {
-    container: 'DGN-UI-LinearProgress-Determinate',
-    bar: 'DGN-UI-LinearProgress-Determinate-Bar',
-    value: 'DGN-UI-LinearProgress-Determinate-Value'
-  };
-  const keyframeStart = keyframes`
-        from {
-            max-height: 0;
-            opacity: 0;
-        }
-        to {
-            max-height: 20px;
-            opacity: 1;
-        }
-    `;
-  const containerCSS = css`
-            animation: ${keyframeStart} 0.3s ease-in;
-            ${bgColor(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} {
-                ${bgColor(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} {
-                ${textColor(percentColor ? percentColor : 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) {
-      valueRef.current.style.left = `calc(${value + '%'} + ${valHalfWidth}px)`;
-    } else {
-      valueRef.current.style.left = value + '%';
-    }
-  };
-  const Bar = useMemo(() => jsx("div", {
-    className: unique.bar,
-    ref: barRef
-  }), [color, duration, percent, theme]);
-  const Value = useMemo(() => showValue && jsx("span", {
-    className: unique.value,
-    ref: valueRef
-  }, jsx(Typography, {
-    type: 'p2',
-    color: 'inherit',
-    style: {
-      textShadow: '0px 2px 4px rgba(0,0,0,0.3)'
-    }
-  })), [duration, percentColor, showValue, valuePosition, theme]);
-  useEffect(() => {
-    const value = validatePercent(percent);
-    barRef.current.style.width = value + '%';
-    if (showValue) {
-      updateValuePosition(value);
-    }
-  }, [percent, showValue]);
-  return jsx("div", {
-    ...props,
-    className: [unique.container, className].join(' ').trim(),
-    css: containerCSS,
-    ref: ref
-  }, Bar, Value);
-});
-Determinate.defaultProps = {
-  background: 'line/category',
-  color: 'semantic/info',
-  duration: 0.1,
-  height: 8,
-  percent: 69,
-  showValue: false,
-  valuePosition: 'bottom',
-  width: '100%'
-};
-Determinate.propTypes = {
-  background: PropTypes.string,
-  className: PropTypes.string,
-  color: PropTypes.string,
-  duration: PropTypes.number,
-  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  percent: PropTypes.number,
-  percentColor: PropTypes.string,
-  showValue: PropTypes.bool,
-  valuePosition: PropTypes.oneOf(['bottom', 'top']),
-  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-};
-export const DeterminateLinearProgress = /*#__PURE__*/memo(Determinate);
-const LinearProgress = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
-  background,
-  className,
-  color,
-  determinate,
-  duration,
-  height,
-  percent,
-  percentColor,
-  showValue,
-  valuePosition,
-  width,
-  ...props
-}, ref) => {
-  if (!ref) ref = useRef(null);
-  return determinate ? jsx(DeterminateLinearProgress, {
-    background: background,
-    className: className,
-    color: color,
-    duration: duration,
-    height: height,
-    percent: percent,
-    percentColor: percentColor,
-    showValue: showValue,
-    valuePosition: valuePosition,
-    width: width,
-    ...props,
-    ref: ref
-  }) : jsx(IndeterminateLinearProgress, {
-    background: background,
-    className: className,
-    color: color,
-    height: height,
-    width: width,
-    ...props,
-    ref: ref
-  });
-}));
-LinearProgress.defaultProps = {
-  background: 'line/category',
-  color: 'semantic/info',
-  determinate: false,
-  duration: 0.1,
-  height: 8,
-  percent: 69,
-  showValue: false,
-  width: '100%'
-};
-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])
-};
-export default LinearProgress;

package/components/rating/index.js

@@ -1,243 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-import { StarHalf, StarOutline } from "../../icons";
-import PropTypes from 'prop-types';
-import { Fragment, forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { bgColor, border, borderColor, cursorPointer, displayInlineFlex, flexRow, flexRowReverse, itemsCenter, outlineNone, overflowHidden, parseWidth, pointerEventsNone, positionAbsolute, positionRelative, textColor } from "../../styles/general";
-import { useTheme } from "../../theme";
-import { classNames, getProp, hexToRGBA, randomString } from "../../utils";
-const Rating = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
-  id,
-  disabled,
-  readOnly,
-  half,
-  width,
-  height,
-  selector,
-  quantity,
-  defaultValue,
-  value,
-  color: colorProp,
-  className,
-  style,
-  onRating
-}, reference) => {
-  if (height === undefined) height = width;
-  const ref = useRef(null);
-  const [unique] = useState(randomString(6, {
-    allowSymbol: false,
-    allowNumber: false
-  }));
-  const [valueState, setValueState] = useState(value || defaultValue);
-  const theme = useTheme();
-  const color = getProp(theme.colors, colorProp, colorProp);
-  const _RatingItemHaftCSS = RatingItemHaftCSS(color, theme);
-  const _RatingItemCSS = RatingItemCSS(_RatingItemHaftCSS.name, color, half, theme);
-  const _RatingSelectCSS = RatingSelectCSS(theme);
-  const onSelectValue = e => {
-    if (disabled || readOnly) return;
-    const newValue = +e.target.value;
-    e.value = newValue;
-    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;
-  });
-  return useMemo(() => {
-    let ArrayRating = [];
-    [...Array(quantity).keys()].reverse().forEach(item => ArrayRating = [...ArrayRating, item + 1]);
-    return jsx("div", {
-      id: id,
-      css: RatingRootCSS,
-      ref: ref,
-      style: style,
-      className: classNames('DGN-UI-Rating', className, disabled && 'disabled', readOnly && 'read-only')
-    }, selector && jsx("select", {
-      css: _RatingSelectCSS,
-      name: `DGN-UI-Rating-Select-${unique}`,
-      id: `DGN-UI-Rating-Select-${unique}`,
-      disabled: disabled,
-      value: valueState,
-      onChange: onSelectValue
-    }, jsx("option", {
-      value: '',
-      id: unique + '-0'
-    }, 0), ArrayRating.map((i, idx) => half ? jsx(Fragment, {
-      key: i
-    }, jsx("option", {
-      value: idx + 0.5
-    }, idx + 0.5), jsx("option", {
-      value: idx + 1
-    }, idx + 1)) : jsx("option", {
-      key: i,
-      value: idx + 1
-    }, idx + 1))), ArrayRating.map(i => jsx("span", {
-      css: _RatingItemCSS,
-      key: i,
-      className: classNames('DGN-UI-Rating-Item', disabled && 'disabled', i <= valueState && 'chosen'),
-      onClick: e => _onRating(e, i)
-    }, jsx(StarOutline, {
-      width: width,
-      height: height,
-      color: disabled ? getProp(theme.colors, 'system/rest') : color || 'currentColor'
-    }), jsx("span", {
-      css: _RatingItemHaftCSS,
-      className: classNames('DGN-UI-Rating-Item-Star right', disabled && 'disabled', half && 'half', i <= valueState ? 'chosen' : ''),
-      onClick: e => half && _onRating(e, i, true)
-    }, jsx(StarHalf, {
-      width: width,
-      height: height,
-      color: 'currentColor'
-    })), jsx("span", {
-      css: _RatingItemHaftCSS,
-      className: classNames('DGN-UI-Rating-Item-Star left', disabled && 'disabled', half && 'half', i - 0.5 <= valueState ? 'chosen' : ''),
-      onClick: e => half && _onRating(e, i - 0.5, true)
-    }, jsx(StarHalf, {
-      width: width,
-      height: height,
-      color: 'currentColor'
-    })))));
-  }, [half, color, quantity, readOnly, disabled, selector, width, height, onRating, theme, valueState]);
-}));
-const RatingRootCSS = css`
-    ${displayInlineFlex};
-    ${flexRowReverse};
-    &.disabled,
-    &.read-only {
-        ${pointerEventsNone};
-    }
-`;
-const RatingSelectCSS = ({
-  colors,
-  spacing,
-  typography
-}) => css`
-    ${outlineNone};
-    ${typography.paragraph3};
-    ${border(1, getProp(colors, 'line/normal'))};
-    margin-left: ${spacing([1])};
-    ${textColor(getProp(colors, 'system/active'))};
-    &:hover {
-        ${borderColor(getProp(colors, 'system/active'))};
-        ${bgColor(hexToRGBA(getProp(colors, 'system/active'), 0.2))};
-    }
-    &:active,
-    &:focus {
-        ${borderColor(getProp(colors, 'semantic/info'))};
-    }
-    option {
-        ${bgColor(getProp(colors, 'system/standard'))};
-    }
-`;
-const RatingItemHaftCSS = (color, theme) => css`
-    ${flexRow};
-    ${positionAbsolute};
-    ${overflowHidden};
-    ${parseWidth('50%')};
-    svg {
-        ${cursorPointer};
-        ${textColor('transparent')};
-        transition: color 0.15s linear;
-        transform: scale(2);
-        transform-origin: left;
-    }
-    &.right {
-        transform: rotateY(180deg);
-        right: 0;
-    }
-    &.half {
-        svg:hover,
-        &.right:hover + span svg,
-        &.chosen svg {
-            ${textColor(color)};
-        }
-        &.chosen {
-            &.disabled svg {
-                ${textColor(getProp(theme.colors, 'system/rest'))};
-            }
-        }
-    }
-`;
-const RatingItemCSS = (RatingItemHaftCSSName, color, half, theme) => css`
-    ${displayInlineFlex};
-    ${positionRelative};
-    ${itemsCenter};
-    svg {
-        transition: color 0.15s linear;
-    }
-    &:hover ~ span > span.css-${RatingItemHaftCSSName}, ${half ? '' : `&:hover,`} &:hover ~ span.full,
-    &.chosen ~ span > span.css-${RatingItemHaftCSSName}, ${half ? '' : `&.chosen,`} &.chosen ~ span.full {
-        svg {
-            ${textColor(color)};
-        }
-    }
-    &.disabled {
-        &.chosen {
-            svg {
-                color: ${getProp(theme.colors, 'system/active')} !important;
-            }
-        }
-    }
-`;
-Rating.defaultProps = {
-  disabled: false,
-  readOnly: false,
-  half: false,
-  selector: false,
-  width: 20,
-  quantity: 5,
-  defaultValue: 0,
-  color: 'primary',
-  className: ''
-};
-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.
-  */
-  onRating: PropTypes.func
-};
-export default Rating;

package/components/skeleton/index.js

@@ -1,79 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-import OptionWrapper from "../others/option-wrapper";
-import PropTypes from 'prop-types';
-import { forwardRef, memo, useImperativeHandle, useRef } from 'react';
-import { parseWidthHeight } from "../../styles/general";
-import { useTheme } from "../../theme";
-import useThemeProps from "../../theme/utils/useThemeProps";
-import { classNames, getProp } from "../../utils";
-const Skeleton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
-  if (!reference) reference = useRef(null);
-  const theme = useTheme();
-  // const { spacing } = theme;
-
-  const props = useThemeProps({
-    props: inProps,
-    name: 'Skeleton'
-  });
-  const {
-    action = {},
-    className,
-    height,
-    id,
-    style,
-    width
-  } = props;
-  const ref = useRef(null);
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    currentRef.element = ref.current;
-    const _instance = {
-      ...action
-    }; // methods
-    _instance.__proto__ = {}; // hidden methods
-    currentRef.instance = _instance;
-    return currentRef;
-  });
-  const skeletonRootStyle = css`
-            ${parseWidthHeight(width, height)};
-            background: linear-gradient(
-                -90deg,
-                ${getProp(theme.colors, 'fill/headerUI')} 0%,
-                ${getProp(theme.colors, 'fill/background')} 50%,
-                ${getProp(theme.colors, 'fill/headerUI')} 100%
-            );
-            background-size: 400% 400%;
-            animation: pulse 1.2s ease-in-out infinite;
-            @keyframes pulse {
-                0% {
-                    background-position: 0% 0%;
-                }
-                100% {
-                    background-position: -135% 0%;
-                }
-            }
-        `;
-  return jsx("div", {
-    css: skeletonRootStyle,
-    ref: ref,
-    id: id,
-    style: style,
-    className: classNames('DGN-UI-Skeleton', className)
-  });
-}));
-Skeleton.propTypes = {
-  /** Class for component. */
-  className: PropTypes.string,
-  /** The color of the component. */
-  colors: PropTypes.string,
-  /** Height oof the component. */
-  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /** Style inline of component. */
-  style: PropTypes.object,
-  /** Width of the component. */
-  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-};
-export { Skeleton };
-export default OptionWrapper(Skeleton);