diginet-core-ui 1.3.24

package/components/progress/linear.js

@@ -0,0 +1,327 @@
+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, 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,
+  color,
+  height,
+  width,
+  ...props
+}, ref) => {
+  if (!ref) ref = useRef(null);
+  const firstBarRef = useRef(null);
+  const secondBarRef = useRef(null);
+  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;
+        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)};
+        .${unique.firstBar} {
+            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%;
+        }
+        .${unique.secondBar} {
+            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%;
+        }
+    `;
+  const FirstBar = useMemo(() => jsx("div", {
+    className: unique.firstBar,
+    ref: firstBarRef
+  }), [color]);
+  const SecondBar = useMemo(() => jsx("div", {
+    className: unique.secondBar,
+    ref: secondBarRef
+  }), [color]);
+  return jsx("div", _extends({}, props, {
+    className: [unique.container, className].join(' ').trimEnd(),
+    css: containerCSS,
+    ref: ref
+  }), FirstBar, SecondBar);
+});
+Indeterminate.defaultProps = {
+  background: theme.colors.bgProgress,
+  color: theme.colors.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,
+  color,
+  className,
+  duration,
+  height,
+  percent,
+  percentColor,
+  showValue,
+  valuePosition,
+  width,
+  ...props
+}, ref) => {
+  if (!ref) ref = useRef(null);
+  const barRef = useRef(null);
+  const valueRef = useRef(null);
+  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;
+        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%;'};
+        }
+    `;
+
+  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]);
+  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]);
+  useEffect(() => {
+    const value = validatePercent(percent);
+    barRef.current.style.width = value + '%';
+
+    if (showValue) {
+      updateValuePosition(value);
+    }
+  }, [percent, showValue]);
+  return jsx("div", _extends({}, props, {
+    className: [unique.container, className].join(' ').trim(),
+    css: containerCSS,
+    ref: ref
+  }), Bar, Value);
+});
+Determinate.defaultProps = {
+  background: theme.colors.bgProgress,
+  color: theme.colors.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, _extends({
+    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, _extends({
+    background: background,
+    className: className,
+    color: color,
+    height: height,
+    width: width
+  }, props, {
+    ref: ref
+  }));
+}));
+LinearProgress.defaultProps = {
+  background: theme.colors.bgProgress,
+  color: theme.colors.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

@@ -0,0 +1,392 @@
+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 { memo, useMemo, useRef, useState, useEffect, forwardRef, Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { jsx, css } from '@emotion/core';
+import theme from '../../theme/settings';
+import { Star } from '../../icons';
+import { randomString } from '../../utils';
+const colors = {
+  default: theme.colors.secondary,
+  primary: theme.colors.primary,
+  info: theme.colors.info,
+  success: theme.colors.success,
+  warning: theme.colors.warning,
+  danger: theme.colors.danger,
+  chosen: {
+    primary: '#080F43',
+    info: theme.colors.linkHover,
+    success: theme.colors.button.bgFilledHover.success,
+    warning: theme.colors.button.bgFilledHover.warning,
+    danger: theme.colors.button.bgFilledHover.danger
+  }
+};
+const Rating = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  disabled,
+  readOnly,
+  half,
+  width,
+  height,
+  selector,
+  quantity,
+  defaultValue,
+  value,
+  color,
+  className,
+  style,
+  starStyle,
+  onRating,
+  ...props
+}, ref) => {
+  if (!ref) {
+    ref = useRef(null);
+  }
+
+  const selectRef = useRef(null);
+  const [unique] = useState(randomString(6, {
+    allowSymbol: false,
+    allowNumber: false
+  }));
+  const RatingItemHaft = css`
+        display: flex;
+        position: absolute;
+        align-items: center;
+        width: max-content;
+        svg {
+            margin-top: 1px;
+            color: transparent;
+            cursor: pointer;
+            transition: color 0.15s linear;
+        }
+        left: 50%;
+        &.left {
+            transform: rotateY(180deg);
+            transform-origin: left;
+        }
+        &.right {
+            right: 0;
+        }
+        &.half {
+            svg:hover {
+                color: ${colors[color] || color} !important;
+            }
+            &.chosen svg {
+                color: ${colors.chosen[color] || color};
+            }
+            &.right.chosen + span {
+                svg {
+                    color: ${colors.chosen[color] || color};
+                }
+            }
+            &.right:hover + span {
+                svg {
+                    color: ${colors[color] || color} !important;
+                }
+            }
+        }
+    `;
+  const RatingItem = css`
+        display: inline-flex;
+        position: relative;
+        align-items: center;
+        transition: color 0.15s linear;
+        color: ${colors.default};
+        &:hover {
+            color: ${colors[color] || color} !important;
+        }
+        &:hover ~ span {
+            color: ${colors[color] || color} !important;
+        }
+        &:hover ~ span > span.css-${RatingItemHaft.name},
+        ${half ? '' : `&:hover,`}
+        &:hover ~ span.full {
+            svg {
+                color: ${colors[color] || color} !important;
+            }
+        }
+        &.chosen {
+            color: ${colors.chosen[color] || color};
+        }
+        &.chosen ~ span {
+            color: ${colors.chosen[color] || color};
+        }
+        &.chosen ~ span > span.css-${RatingItemHaft.name},
+        ${half ? '' : `&.chosen,`}
+        &.chosen ~ span.full {
+            svg {
+                color: ${colors.chosen[color] || color};
+            }
+        }
+        &.disabled {
+            color: ${theme.colors.disabled} !important;
+            &.chosen {
+                color: ${theme.colors.disabled} !important;
+                svg {
+                    color: ${theme.colors.disabled} !important;
+                }
+                .DGN-UI-Rating-Item-Star.half.right:not(.chosen) {
+                    svg {
+                        color: transparent !important;
+                    }
+                }
+            }
+            &.chosen ~ span {
+                color: ${theme.colors.disabled} !important;
+            }
+            &.chosen ~ span > span.css-${RatingItemHaft.name},
+            &.chosen ~ span.full {
+                svg {
+                    color: ${theme.colors.disabled} !important;
+                }
+            }
+        }
+    `;
+  const RatingSelect = css`
+        position: relative;
+        outline: none;
+        font-family: ${theme.typography.fontFamily};
+        margin-left: 4px;
+        color: ${theme.colors.default};
+        border-color: ${theme.colors.default};
+    `;
+  const RatingRoot = css`
+        display: inline-flex;
+        flex-direction: row-reverse;
+        position: relative;
+        &.disabled {
+            pointer-events: none;
+        }
+        &.read-only {
+            pointer-events: none;
+            .DGN-UI-Rating-Item {
+                pointer-events: none;
+            }
+        }
+    `;
+
+  const onRatingHandler = (e, num, halfRating = 0) => {
+    removeChosenRating();
+
+    if (half) {
+      e.currentTarget.parentNode.classList.add('chosen');
+    }
+
+    e.currentTarget.classList.add('chosen');
+
+    if (selectRef.current) {
+      selectRef.current.value = num + halfRating / 2;
+    }
+
+    e.value = num + halfRating / 2;
+    !!onRating && onRating(e);
+  };
+
+  const onSelectValue = e => {
+    const newValue = +e.target.value;
+    e.value = newValue;
+    setRating(newValue);
+    !!onRating && onRating(e);
+  };
+
+  const setRating = star => {
+    removeChosenRating();
+
+    if (star > quantity) {
+      star = quantity;
+    }
+
+    const position = quantity - Math.floor(star);
+    const childNodes = ref.current.querySelectorAll(`.css-${RatingItem.name}`);
+
+    if (half) {
+      const halfRating = star * 10 % 10;
+
+      if (halfRating >= 5) {
+        childNodes[position - 1].classList.add('chosen');
+        childNodes[position - 1].querySelector('span.left').classList.add('chosen');
+      } else if (star > 0) {
+        childNodes[position].classList.add('chosen');
+        childNodes[position].querySelector('span.right').classList.add('chosen');
+      }
+    } else if (star >= 1) {
+      childNodes[position].classList.add('chosen');
+    }
+
+    if (selectRef.current) {
+      selectRef.current.value = star;
+
+      if (selectRef.current.firstChild && !selectRef.current.firstChild.value) {
+        selectRef.current.firstChild.remove();
+      }
+    }
+  };
+
+  const removeChosenRating = () => {
+    const chosenNode = ref.current.querySelectorAll('.chosen');
+
+    if (chosenNode && chosenNode.length) {
+      chosenNode.forEach(node => {
+        node.classList.remove('chosen');
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (defaultValue) {
+      setRating(defaultValue);
+    }
+  }, []);
+  useEffect(() => {
+    if (disabled) {
+      ref.current.classList.add('disabled');
+      ref.current.querySelectorAll('.DGN-UI-Rating-Item').forEach(star => {
+        star.classList.add('disabled');
+      });
+      return () => {
+        if (ref.current) {
+          ref.current.classList.remove('disabled');
+          ref.current.querySelectorAll('.DGN-UI-Rating-Item').forEach(star => {
+            star.classList.remove('disabled');
+          });
+        }
+      };
+    }
+  }, [disabled]);
+  useEffect(() => {
+    if (typeof value === 'number') {
+      setRating(value);
+    }
+  }, [value, quantity, half]);
+  return useMemo(() => {
+    const ArrayRating = [];
+
+    if (width) {
+      height = width === 20 ? 19 : width * 19 / 20;
+    }
+
+    if (!width && height) {
+      width = height * 20 / 19;
+    }
+
+    for (let i = 0; i < quantity; i++) {
+      ArrayRating.push(i);
+    }
+
+    return jsx("div", _extends({
+      css: RatingRoot,
+      ref: ref,
+      style: style,
+      className: ['DGN-UI-Rating', className, readOnly ? 'read-only' : ''].join(' ').trim()
+    }, props), selector && jsx("select", {
+      css: RatingSelect,
+      ref: selectRef,
+      name: `Rating-Select-${unique}`,
+      id: `Rating-Select-${unique}`,
+      disabled: disabled,
+      readOnly: readOnly,
+      onChange: onSelectValue
+    }, jsx("option", {
+      value: '',
+      id: unique + '-0'
+    }, 0), ArrayRating.map(i => half ? jsx(Fragment, {
+      key: i
+    }, jsx("option", {
+      value: i + 0.5
+    }, i + 0.5), jsx("option", {
+      value: i + 1
+    }, i + 1)) : jsx("option", {
+      key: i,
+      value: i + 1
+    }, i + 1))), ArrayRating.map(i => jsx("span", {
+      css: RatingItem,
+      style: starStyle,
+      key: i,
+      className: 'DGN-UI-Rating-Item',
+      onClick: half || disabled || readOnly ? undefined : e => onRatingHandler(e, quantity - i)
+    }, jsx(Star, {
+      width: width,
+      height: height,
+      outline: true,
+      color: color || 'currentColor'
+    }), jsx("span", {
+      css: RatingItemHaft,
+      className: 'DGN-UI-Rating-Item-Star right' + (half ? ' half' : ''),
+      onClick: half && !disabled && !readOnly ? e => onRatingHandler(e, quantity - i - 1, 2) : undefined
+    }, jsx(Star, {
+      half: true,
+      width: width * 2 / 5,
+      height: height * 14 / 19,
+      color: 'currentColor'
+    })), jsx("span", {
+      css: RatingItemHaft,
+      className: 'DGN-UI-Rating-Item-Star left' + (half ? ' half' : ''),
+      onClick: half && !disabled && !readOnly ? e => onRatingHandler(e, quantity - i - 1, 1) : undefined
+    }, jsx(Star, {
+      half: true,
+      width: width * 2 / 5,
+      height: height * 14 / 19,
+      color: 'currentColor'
+    })))));
+  }, [half, color, quantity, readOnly, disabled, selector, width, height, onRating]);
+}));
+Rating.defaultProps = {
+  disabled: false,
+  readOnly: false,
+  half: false,
+  selector: false,
+  width: 20,
+  quantity: 5,
+  defaultValue: 0,
+  color: 'primary',
+  className: ''
+};
+Rating.propTypes = {
+  /** prevent all events and effect */
+  disabled: PropTypes.bool,
+
+  /** prevent all events and effect and keep style */
+  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 name of Rating component */
+  className: PropTypes.string,
+
+  /** style inline of Rating component */
+  style: PropTypes.object,
+
+  /** style inline of stars icon */
+  starStyle: PropTypes.object,
+
+  /**
+   * the function for rating handler, return e:{value, ...element}<br />
+   * value: the quantity of star was selected (insist half)
+   */
+  onRating: PropTypes.func
+};
+export default Rating;