diginet-core-ui 1.3.24 → 1.3.29

package/components/rating/index.js

@@ -1,29 +1,34 @@
-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 { StarHalf, StarOutline } 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
+import { hexToRGBA } from '../../styles/color-helper';
+import { color as colors } from '../../styles/colors';
+import { typography } from '../../styles/typography';
+import { alignCenter, border, cursorPointer, flexRow, flexRowReverse, inlineFlex, outlineNone, overflowHidden, pointerEventsNone, positionAbsolute, positionRelative } from '../../styles/general';
+const {
+  paragraph3
+} = typography;
+const {
+  system: {
+    active,
+    rest
+  },
+  semantic: {
+    success,
+    warning,
+    danger,
+    info
+  },
+  line: {
+    normal
   }
-};
+} = colors;
+const colorMap = new Map([['primary', active], ['success', success], ['warning', warning], ['danger', danger], ['info', info]]);
 const Rating = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   disabled,
   readOnly,
@@ -50,287 +55,163 @@ const Rating = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     allowSymbol: false,
     allowNumber: false
   }));
+  const [valueState, setValueState] = useState(value || defaultValue);
+
+  const _color = colorMap.get(color) || color;
+
+  const RatingRoot = css`
+        ${inlineFlex}
+        ${flexRowReverse}
+        ${positionRelative}
+        &.disabled, &.read-only {
+            ${pointerEventsNone}
+        }
+    `;
+  const RatingSelect = css`
+        ${positionRelative}
+        ${outlineNone}
+        ${paragraph3}
+        ${border(1, normal)}
+        margin-left: 4px;
+        color: ${active};
+        &:hover {
+            border-color: ${active};
+            background-color: ${hexToRGBA(active, 0.2)};
+        }
+        &:active,
+        &:focus {
+            border-color: ${info};
+        }
+        option {
+            background-color: white;
+        }
+    `;
   const RatingItemHaft = css`
-        display: flex;
-        position: absolute;
-        align-items: center;
-        width: max-content;
+        ${flexRow}
+        ${positionAbsolute}
+        ${alignCenter}
+        ${overflowHidden}
+        width: 50%;
         svg {
-            margin-top: 1px;
+            ${cursorPointer}
             color: transparent;
-            cursor: pointer;
             transition: color 0.15s linear;
-        }
-        left: 50%;
-        &.left {
-            transform: rotateY(180deg);
+            transform: scale(2);
             transform-origin: left;
         }
         &.right {
+            transform: rotateY(180deg);
             right: 0;
         }
         &.half {
-            svg:hover {
-                color: ${colors[color] || color} !important;
-            }
+            svg:hover,
+            &.right:hover + span svg,
             &.chosen svg {
-                color: ${colors.chosen[color] || color};
+                color: ${_color};
             }
-            &.right.chosen + span {
-                svg {
-                    color: ${colors.chosen[color] || color};
-                }
-            }
-            &.right:hover + span {
-                svg {
-                    color: ${colors[color] || color} !important;
+            &.chosen {
+                &.disabled svg {
+                    color: ${rest} !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};
+        ${inlineFlex}
+        ${positionRelative}
+        ${alignCenter}
+        svg {
+            transition: color 0.15s linear;
         }
-        &.chosen ~ span > span.css-${RatingItemHaft.name},
-        ${half ? '' : `&.chosen,`}
-        &.chosen ~ span.full {
+        &:hover ~ span > span.css-${RatingItemHaft.name}, ${half ? '' : `&:hover,`} &:hover ~ span.full,
+        &.chosen ~ span > span.css-${RatingItemHaft.name}, ${half ? '' : `&.chosen,`} &.chosen ~ span.full {
             svg {
-                color: ${colors.chosen[color] || color};
+                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;
+                    color: ${rest} !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 => {
+    if (disabled || readOnly) return;
     const newValue = +e.target.value;
     e.value = newValue;
-    setRating(newValue);
+    setValueState(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');
-      });
-    }
+  const _onRating = (e, value, isHalf = false) => {
+    if (disabled || readOnly || half && !isHalf) return;
+    setValueState(value);
+    !!onRating && onRating(e);
   };
 
   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]);
+    setValueState(value);
+  }, [value]);
   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({
+    let ArrayRating = [];
+    [...Array(quantity).keys()].reverse().forEach(item => ArrayRating = [...ArrayRating, item + 1]);
+    return jsx("div", {
       css: RatingRoot,
       ref: ref,
       style: style,
-      className: ['DGN-UI-Rating', className, readOnly ? 'read-only' : ''].join(' ').trim()
-    }, props), selector && jsx("select", {
+      className: ['DGN-UI-Rating', className, disabled && 'disabled', 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,
+      value: valueState,
       onChange: onSelectValue
     }, jsx("option", {
       value: '',
       id: unique + '-0'
-    }, 0), ArrayRating.map(i => half ? jsx(Fragment, {
+    }, 0), ArrayRating.map((i, idx) => half ? jsx(Fragment, {
       key: i
     }, jsx("option", {
-      value: i + 0.5
-    }, i + 0.5), jsx("option", {
-      value: i + 1
-    }, i + 1)) : jsx("option", {
+      value: idx + 0.5
+    }, idx + 0.5), jsx("option", {
+      value: idx + 1
+    }, idx + 1)) : jsx("option", {
       key: i,
-      value: i + 1
-    }, i + 1))), ArrayRating.map(i => jsx("span", {
+      value: idx + 1
+    }, idx + 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, {
+      className: ['DGN-UI-Rating-Item', disabled && 'disabled', i <= valueState && 'chosen'].join(' ').trim().replace(/\s+/g, ' '),
+      onClick: e => _onRating(e, i)
+    }, jsx(StarOutline, {
       width: width,
       height: height,
-      outline: true,
-      color: color || 'currentColor'
+      color: disabled ? rest : 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,
+      className: ['DGN-UI-Rating-Item-Star right', disabled && 'disabled', half && 'half', i <= valueState && 'chosen'].join(' ').trim().replace(/\s+/g, ' '),
+      onClick: e => _onRating(e, i, true)
+    }, jsx(StarHalf, {
+      width: width,
+      height: height,
       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,
+      className: ['DGN-UI-Rating-Item-Star left', disabled && 'disabled', half && 'half', i - 0.5 <= valueState && 'chosen'].join(' ').trim().replace(/\s+/g, ' '),
+      onClick: e => _onRating(e, i - 0.5, true)
+    }, jsx(StarHalf, {
+      width: width,
+      height: height,
       color: 'currentColor'
     })))));
-  }, [half, color, quantity, readOnly, disabled, selector, width, height, onRating]);
+  }, [half, color, quantity, readOnly, disabled, selector, width, height, onRating, valueState]);
 }));
 Rating.defaultProps = {
   disabled: false,

package/components/slider/slider-container.js

@@ -1,12 +1,10 @@
-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 } from '@emotion/core';
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
-import Icon from '../../icons';
+import { ButtonIcon } from '..';
 import theme from '../../theme/settings';
 import { randomString } from '../../utils';
 import SliderItem from './slider-item';
@@ -289,17 +287,23 @@ const SliderContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const IconLeft = useMemo(() => jsx("span", {
     className: [IDs.icon, IDs.iconLeft].join(' '),
     ref: iconLeftRef
-  }, jsx(Icon, {
+  }, jsx(ButtonIcon, {
+    circular: true,
+    viewType: 'filled',
+    size: 'tiny',
+    color: 'primary',
     name: 'ArrowLeft',
-    type: 'filled',
     style: styles.icon
   })), [children, data]);
   const IconRight = useMemo(() => jsx("span", {
     className: [IDs.icon, IDs.iconRight].join(' '),
     ref: iconRightRef
-  }, jsx(Icon, {
+  }, jsx(ButtonIcon, {
+    circular: true,
+    viewType: 'filled',
+    size: 'tiny',
+    color: 'primary',
     name: 'ArrowRight',
-    type: 'filled',
     style: styles.icon
   })), [children, data]);
   const Navigation = useMemo(() => jsx("div", {
@@ -313,13 +317,14 @@ const SliderContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     id: IDs.navigationList,
     ref: navigationListRef
   })), [animation, autoChangeTime, children, data, onShowNavigation]);
-  return jsx("div", _extends({
+  return jsx("div", {
     css: styles.container,
     className: [IDs.container, className].join(' '),
     id: IDs.container,
     style: style,
-    ref: ref
-  }, props), Slider, IconLeft, IconRight, Navigation);
+    ref: ref,
+    ...props
+  }, Slider, IconLeft, IconRight, Navigation);
 }));
 SliderContainer.defaultProps = {
   animation: true,

package/components/slider/slider-item.js

@@ -1,5 +1,3 @@
-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 */
@@ -95,34 +93,34 @@ const SliderItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     switch (fileType) {
       case 'image':
         {
-          return jsx("img", _extends({}, props, {
+          return jsx("img", { ...props,
             className: IDs.image,
             css: styles.image,
             src: filePath
-          }));
+          });
         }
 
       case 'word':
       case 'sheet':
         {
-          return jsx("iframe", _extends({}, props, {
+          return jsx("iframe", { ...props,
             className: IDs.frame,
             css: styles.frame,
             frameBorder: 0,
             src: `http://view.officeapps.live.com/op/view.aspx?src=${filePath}`,
             title: fileName
-          }));
+          });
         }
 
       case 'pdf':
         {
-          return jsx("iframe", _extends({}, props, {
+          return jsx("iframe", { ...props,
             className: IDs.frame,
             css: styles.frame,
             frameBorder: 0,
             src: `https://docs.google.com/gview?url=${filePath}&embedded=true`,
             title: fileName
-          }));
+          });
         }
 
       case 'mp4':
@@ -141,24 +139,24 @@ const SliderItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
       case 'another':
         {
-          return jsx("iframe", _extends({}, props, {
+          return jsx("iframe", { ...props,
             className: IDs.frame,
             css: styles.frame,
             frameBorder: 0,
             src: checkURL(filePath),
             title: fileName
-          }));
+          });
         }
 
       default:
         {
-          return jsx("iframe", _extends({}, props, {
+          return jsx("iframe", { ...props,
             className: IDs.frame,
             css: styles.frame,
             frameBorder: 0,
             src: filePath,
             title: fileName
-          }));
+          });
         }
     }
   };