diginet-core-ui 1.3.45 → 1.3.47

package/components/rating/index.js

@@ -1,35 +1,36 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { memo, useMemo, useRef, useState, useEffect, forwardRef, Fragment } from 'react';
+import { memo, useMemo, useRef, useState, useEffect, forwardRef, Fragment, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import { StarHalf, StarOutline } from '../../icons';
 import { randomString } from '../../utils';
 import { hexToRGBA } from '../../styles/color-helper';
 import { color as colors } from '../../styles/colors';
-import { typography } from '../../styles/typography';
+import theme from '../../theme/settings';
 import { alignCenter, border, cursorPointer, flexRow, flexRowReverse, inlineFlex, outlineNone, overflowHidden, pointerEventsNone, positionAbsolute, positionRelative } from '../../styles/general';
 const {
-  paragraph3
-} = typography;
-const {
-  system: {
-    active,
-    rest
+  colors: {
+    system: {
+      active,
+      rest,
+      white
+    },
+    semantic: {
+      info
+    },
+    line: {
+      normal
+    }
   },
-  semantic: {
-    success,
-    warning,
-    danger,
-    info
+  typography: {
+    paragraph3
   },
-  line: {
-    normal
-  }
-} = colors;
-const colorMap = new Map([['primary', active], ['success', success], ['warning', warning], ['danger', danger], ['info', info]]);
+  spacing
+} = theme;
 const Rating = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  id,
   disabled,
   readOnly,
   half,
@@ -42,133 +43,61 @@ const Rating = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   color,
   className,
   style,
-  starStyle,
-  onRating,
-  ...props
-}, ref) => {
-  if (!ref) {
-    ref = useRef(null);
-  }
-
-  const selectRef = useRef(null);
+  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 _color = colorMap.get(color) || color;
+  const _color = colors[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`
-        ${flexRow}
-        ${positionAbsolute}
-        ${alignCenter}
-        ${overflowHidden}
-        width: 50%;
-        svg {
-            ${cursorPointer}
-            color: 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 {
-                color: ${_color};
-            }
-            &.chosen {
-                &.disabled svg {
-                    color: ${rest} !important;
-                }
-            }
-        }
-    `;
-  const RatingItem = css`
-        ${inlineFlex}
-        ${positionRelative}
-        ${alignCenter}
-        svg {
-            transition: color 0.15s linear;
-        }
-        &:hover ~ span > span.css-${RatingItemHaft.name}, ${half ? '' : `&:hover,`} &:hover ~ span.full,
-        &.chosen ~ span > span.css-${RatingItemHaft.name}, ${half ? '' : `&.chosen,`} &.chosen ~ span.full {
-            svg {
-                color: ${_color};
-            }
-        }
-        &.disabled {
-            &.chosen {
-                svg {
-                    color: ${rest} !important;
-                }
-            }
-        }
-    `;
+  const _RatingItemHaftCSS = RatingItemHaftCSS(_color);
+
+  const _RatingItemCSS = RatingItemCSS(_RatingItemHaftCSS.name, _color, half);
 
   const onSelectValue = e => {
     if (disabled || readOnly) return;
     const newValue = +e.target.value;
     e.value = newValue;
     setValueState(newValue);
-    !!onRating && onRating(e);
+    !!onRating && onRating(e, newValue);
   };
 
   const _onRating = (e, value, isHalf = false) => {
     if (disabled || readOnly || half && !isHalf) return;
     setValueState(value);
-    !!onRating && onRating(e);
+    !!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", {
-      css: RatingRoot,
+      id: id,
+      css: RatingRootCSS,
       ref: ref,
       style: style,
-      className: ['DGN-UI-Rating', className, disabled && 'disabled', readOnly ? 'read-only' : ''].join(' ').trim(),
-      ...props
+      className: ['DGN-UI-Rating', className, disabled ? 'disabled' : '', readOnly ? 'read-only' : ''].join(' ').trim().replace(/\s+/g, ' ')
     }, selector && jsx("select", {
-      css: RatingSelect,
-      ref: selectRef,
-      name: `Rating-Select-${unique}`,
-      id: `Rating-Select-${unique}`,
+      css: RatingSelectCSS,
+      name: `DGN-UI-Rating-Select-${unique}`,
+      id: `DGN-UI-Rating-Select-${unique}`,
       disabled: disabled,
       value: valueState,
       onChange: onSelectValue
@@ -185,8 +114,7 @@ const Rating = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       key: i,
       value: idx + 1
     }, idx + 1))), ArrayRating.map(i => jsx("span", {
-      css: RatingItem,
-      style: starStyle,
+      css: _RatingItemCSS,
       key: i,
       className: ['DGN-UI-Rating-Item', disabled && 'disabled', i <= valueState && 'chosen'].join(' ').trim().replace(/\s+/g, ' '),
       onClick: e => _onRating(e, i)
@@ -195,17 +123,17 @@ const Rating = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       height: height,
       color: disabled ? rest : color || 'currentColor'
     }), jsx("span", {
-      css: RatingItemHaft,
-      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)
+      css: _RatingItemHaftCSS,
+      className: ['DGN-UI-Rating-Item-Star right', disabled && 'disabled', half && 'half', i <= valueState ? 'chosen' : ''].join(' ').trim().replace(/\s+/g, ' '),
+      onClick: e => half && _onRating(e, i, true)
     }, jsx(StarHalf, {
       width: width,
       height: height,
       color: 'currentColor'
     })), jsx("span", {
-      css: RatingItemHaft,
-      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)
+      css: _RatingItemHaftCSS,
+      className: ['DGN-UI-Rating-Item-Star left', disabled && 'disabled', half && 'half', i - 0.5 <= valueState ? 'chosen' : ''].join(' ').trim().replace(/\s+/g, ' '),
+      onClick: e => half && _onRating(e, i - 0.5, true)
     }, jsx(StarHalf, {
       width: width,
       height: height,
@@ -213,6 +141,85 @@ const Rating = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     })))));
   }, [half, color, quantity, readOnly, disabled, selector, width, height, onRating, valueState]);
 }));
+const RatingRootCSS = css`
+    ${inlineFlex};
+    ${flexRowReverse};
+    &.disabled,
+    &.read-only {
+        ${pointerEventsNone};
+    }
+`;
+const RatingSelectCSS = css`
+    ${outlineNone};
+    ${paragraph3};
+    ${border(1, normal)}
+    margin-left: ${spacing()}px;
+    color: ${active};
+    &:hover {
+        border-color: ${active};
+        background-color: ${hexToRGBA(active, 0.2)};
+    }
+    &:active,
+    &:focus {
+        border-color: ${info};
+    }
+    option {
+        background-color: ${white};
+    }
+`;
+
+const RatingItemHaftCSS = color => css`
+    ${flexRow};
+    ${positionAbsolute};
+    ${overflowHidden};
+    width: 50%;
+    svg {
+        ${cursorPointer}
+        color: 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 {
+            color: ${color};
+        }
+        &.chosen {
+            &.disabled svg {
+                color: ${rest} !important;
+            }
+        }
+    }
+`;
+
+const RatingItemCSS = (RatingItemHaftCSSName, color, half) => css`
+    ${inlineFlex};
+    ${positionRelative};
+    ${alignCenter};
+    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 {
+            color: ${color};
+        }
+    }
+    &.disabled {
+        &.chosen {
+            svg {
+                color: ${rest} !important;
+            }
+        }
+    }
+`;
+
 Rating.defaultProps = {
   disabled: false,
   readOnly: false,
@@ -225,49 +232,51 @@ Rating.defaultProps = {
   className: ''
 };
 Rating.propTypes = {
-  /** prevent all events and effect */
+  /** If true, the component is disabled. */
   disabled: PropTypes.bool,
 
-  /** prevent all events and effect and keep style */
+  /** Removes all hover effects and pointer events. */
   readOnly: PropTypes.bool,
 
-  /** allows rating with an odd number of stars */
+  /** Allows rating with an odd number of stars. */
   half: PropTypes.bool,
 
-  /** display select box to select by number */
+  /** Display select box to select by number. */
   selector: PropTypes.bool,
 
-  /** The default number of stars is selected */
+  /** The default number of stars is selected. */
   defaultValue: PropTypes.number,
 
-  /** The number of stars is selected */
+  /** The number of stars is selected. */
   value: PropTypes.number,
 
-  /** the maximum number of stars allowed to rate */
+  /** The maximum number of stars allowed to rate. */
   quantity: PropTypes.number,
 
-  /** width of star icon */
+  /** Width of star icon. */
   width: PropTypes.number,
 
-  /** height of star icon */
+  /** Height of star icon. */
   height: PropTypes.number,
 
-  /** color of stars, ['primary', 'info', 'success', 'warning', 'danger', #hex, rgb(#, #, #)] */
+  /** Color of stars, ['primary', 'info', 'success', 'warning', 'danger', #hex, rgb(#, #, #)]. */
   color: PropTypes.string,
 
-  /** class name of Rating component */
+  /** Class for component. */
   className: PropTypes.string,
 
-  /** style inline of Rating component */
+  /** Style inline of 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)
-   */
+  * 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/typography/index.js

@@ -26,79 +26,18 @@ const {
 } = typography;
 const {
   system: {
-    active,
     rest
   },
-  semantic: {
-    success,
-    warning,
-    danger,
-    info
-  },
   text: {
-    main
+    main,
+    tooltip: textTooltip
   },
   fill: {
     tooltip: fillTooltip
-  },
-  text: {
-    tooltip: textTooltip
   }
 } = colors;
 const typographyMap = new Map([['t1', title1], ['t2', title2], ['t3', title3], ['t4', title4], ['h1', heading1], ['h2', heading2], ['h3', heading3], ['h4', heading4], ['h5', heading5], ['h6', heading6], ['p1', paragraph1], ['p2', paragraph2], ['p3', paragraph3]]);
-const colorMap = new Map([['default', main], ['primary', active], ['secondary', rest], ['success', success], ['warning', warning], ['danger', danger], ['info', info]]);
-
-const getDirectionPopover = direction => {
-  switch (direction) {
-    case 'top':
-      return {
-        anchorOrigin: {
-          vertical: 'top',
-          horizontal: 'center'
-        },
-        transformOrigin: {
-          vertical: 'bottom',
-          horizontal: 'center'
-        }
-      };
-
-    case 'left':
-      return {
-        anchorOrigin: {
-          vertical: 'center',
-          horizontal: 'left'
-        },
-        transformOrigin: {
-          vertical: 'center',
-          horizontal: 'right'
-        }
-      };
-
-    case 'right':
-      return {
-        anchorOrigin: {
-          vertical: 'center',
-          horizontal: 'right'
-        },
-        transformOrigin: {
-          vertical: 'center',
-          horizontal: 'left'
-        }
-      };
-
-    default:
-      return {
-        anchorOrigin: {
-          vertical: 'bottom',
-          horizontal: 'center'
-        },
-        transformOrigin: {
-          vertical: 'top',
-          horizontal: 'center'
-        }
-      };
-  }
-};
+const colorMap = new Map([['default', main], ['secondary', rest]]);
 
 const isTextClamped = elm => (elm === null || elm === void 0 ? void 0 : elm.scrollHeight) > (elm === null || elm === void 0 ? void 0 : elm.clientHeight);
 
@@ -119,6 +58,9 @@ const Typography = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 }, reference) => {
   const ref = useRef(null);
   const [openTooltip, setOpenTooltip] = useState(false);
+
+  const _TextRootCSS = TextRootCSS(color, type, lineClamp);
+
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     const _instance = {}; // methods
@@ -131,7 +73,9 @@ const Typography = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   const classNames = inTooltip => ['DGN-UI-Typography', center && 'DGN-Typography-center', fullWidth && 'DGN-Typography-fullWidth', `DGN-Typography-${type}`, uppercase && `DGN-Typography-Uppercase`, capitalize && 'DGN-Typography-Capitalize', !inTooltip && lineClamp && 'DGN-Typography-Clamp', className].join(' ').trim().replace(/\s+/g, ' ');
 
-  const setHoverTooltip = open => {
+  const setHoverTooltip = (open, isTooltip) => {
+    !isTooltip && setOpenTooltip(false);
+
     if (hoverTooltip && isTextClamped(ref.current)) {
       setOpenTooltip(open);
     }
@@ -151,11 +95,11 @@ const Typography = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     style: {
       color: textTooltip
     },
-    onMouseEnter: () => setHoverTooltip(true),
-    onMouseLeave: () => setHoverTooltip(false),
-    ...getDirectionPopover(tooltipDirection)
+    onMouseEnter: () => setHoverTooltip(true, true),
+    onMouseLeave: () => setHoverTooltip(false, true),
+    direction: tooltipDirection
   }, renderHTML(renderChildren(), mapping, {
-    css: TextRoot(color, type, lineClamp),
+    css: _TextRootCSS,
     className: classNames(true),
     style: {
       color: textTooltip,
@@ -164,7 +108,7 @@ const Typography = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   })), [openTooltip, tooltipDirection, children, mapping, color, type, lineClamp]);
   return jsx(Fragment, null, renderHTML(renderChildren(), mapping, {
     ref: ref,
-    css: TextRoot(color, type, lineClamp),
+    css: _TextRootCSS,
     className: classNames(false),
     onMouseEnter: () => setHoverTooltip(true),
     onMouseLeave: () => setHoverTooltip(false),
@@ -172,7 +116,7 @@ const Typography = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }), hoverTooltip && renderTooltip);
 }));
 
-const TextRoot = (color, type, lineClamp) => css`
+const TextRootCSS = (color, type, lineClamp) => css`
     ${displayInlineBlock};
     ${positionRelative};
     ${breakWord};
@@ -213,7 +157,7 @@ Typography.defaultProps = {
   mapping: 'span',
   className: '',
   hoverTooltip: false,
-  tooltipDirection: 'down'
+  tooltipDirection: 'bottom'
 };
 /** type of text<br/>
  * h1: Title <br/>
@@ -246,7 +190,7 @@ Typography.propTypes = {
   /** text-transform is uppercase if true */
   uppercase: PropTypes.bool,
 
-  /** text-transform is capitalize if true (and uppercase is false) */
+  /** text-transform is capitalized if true (and uppercase is false) */
   capitalize: PropTypes.bool,
 
   /** The line-clamp property truncates text at a specific number of lines. */
@@ -256,7 +200,7 @@ Typography.propTypes = {
   hoverTooltip: PropTypes.bool,
 
   /** Tooltip direction */
-  tooltipDirection: PropTypes.oneOf(['top', 'down', 'left', 'right']),
+  tooltipDirection: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
 
   /** allows maximum screen width if true */
   fullWidth: PropTypes.bool,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.3.45",
+  "version": "1.3.47",
   "description": "The DigiNet core ui",
   "homepage": "https://diginet.com.vn",
   "main": "index.js",

package/readme.md

@@ -38,6 +38,19 @@ npm test
 ```
 
 ## Changelog
+## 1.3.47
+- \[Fixed\]: Rating – Fix bug icon render incorrect, return value in func onRating
+
+## 1.3.46
+- \[Added\]: MenuIcon – MHRM09N1025
+- \[Changed\]: Dropdown – Ref set value not in dataSource
+- \[Changed\]: Dropdown – Add logic if multiple then selectBox is true
+- \[Fixed\]: Typography – Fix bug tooltip show wrong when hover
+- \[Fixed\]: Avatar – Fix bug flickering
+- \[Fixed\]: Radio – Fix cursor pointer:none when readonly - Fix event onchange - Fix warning
+- \[Fixed\]: Dropdown – Bug not reload dataSource when onClear
+- \[Fixed\]: Dropdown – Fix bug scroll to top after load more
+
 ## 1.3.45
 - \[Added\]: MenuIcon – MHRM00N0005, MHRM09N1015, MHRM09N1400, MHRP25L0101, MHRP25L0501, MHRM09N1020
 - \[Changed\]: LineChart – Allow pointsColor, pathColor use CORE colors; Add prop className, style, pointHoverAlignment