diginet-core-ui 1.3.46 → 1.3.47

package/components/form-control/dropdown/index.js

@@ -1801,14 +1801,14 @@ Dropdown.propTypes = {
   /** display this icon if not found the icon follow iconExpr */
   iconDefault: PropTypes.string,
 
-  /** field name used for icon display<br/>
-   * Example:<br/>
-   * &nbsp;&nbsp;string: 'icon'<br/>
-   * &nbsp;&nbsp;object: {<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key: 'icon',<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prefix: 'https://imglink.com',<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;suffix: '.jpg'<br/>
-   * &nbsp;&nbsp;}
+  /** field name used for icon display<br/>
+   * Example:<br/>
+   * &nbsp;&nbsp;string: 'icon'<br/>
+   * &nbsp;&nbsp;object: {<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key: 'icon',<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prefix: 'https://imglink.com',<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;suffix: '.jpg'<br/>
+   * &nbsp;&nbsp;}
    */
   iconExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
     key: PropTypes.string,
@@ -1826,9 +1826,9 @@ Dropdown.propTypes = {
   /** field name used for text display in input */
   keyExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
 
-  /** field name used for text display<br/>
-   * Example: 'name', '{id} - {name}', '{age} age(s)'<br/>
-   * Note: don't use 'id - name', return undefined
+  /** field name used for text display<br/>
+   * Example: 'name', '{id} - {name}', '{age} age(s)'<br/>
+   * Note: don't use 'id - name', return undefined
    */
   displayExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
 
@@ -1838,9 +1838,9 @@ Dropdown.propTypes = {
   /** the field name used for the returned result */
   valueExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
-  /**
-   * duration wait enter search content on search<br/>
-   * Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
+  /**
+   * duration wait enter search content on search<br/>
+   * Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
    */
   searchDelayTime: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
@@ -1907,19 +1907,19 @@ Dropdown.propTypes = {
   /** The array of elements that appear in the dropdown */
   dataSource: PropTypes.array,
 
-  /** function displays items by custom<br/>
-   * renderItem={(data, index) => data.name + ' - ' + data.role}<br/>
-   * --> such as: displayExpr={'name - role'}
+  /** function displays items by custom<br/>
+   * renderItem={(data, index) => data.name + ' - ' + data.role}<br/>
+   * --> such as: displayExpr={'name - role'}
    */
   renderItem: PropTypes.func,
 
-  /** function displays selected items by custom, example:<br/>
-   * renderItem={(data, index) => index + ' - ' + data.name}<br/>
+  /** function displays selected items by custom, example:<br/>
+   * renderItem={(data, index) => index + ' - ' + data.name}<br/>
    */
   renderSelectedItem: PropTypes.func,
 
-  /** the function will run when entering input<br/>
-   * if undefined: the filter function will run (default)
+  /** the function will run when entering input<br/>
+   * if undefined: the filter function will run (default)
    */
   onInput: PropTypes.func,
 
@@ -1938,19 +1938,19 @@ Dropdown.propTypes = {
   /** the contents in Dropdown box (Exp: TreeView) */
   children: PropTypes.node,
 
-  /**
-   * ref methods
-   *
-   * how to get component element? ref.current
-   *
-   * how to call method? ref.current.instance.{method}
-   *
-   * * showDropdown(): Show dropdown
-   * * closeDropdown(): Close dropdown
-   * * onClear(): Clear selected value
-   * * setPreviousValue(): Set value to previous value
-   * * setValue(value): Set value of dropdown
-   *  * @param {value} - string || number || array
+  /**
+   * ref methods
+   *
+   * how to get component element? ref.current
+   *
+   * how to call method? ref.current.instance.{method}
+   *
+   * * showDropdown(): Show dropdown
+   * * closeDropdown(): Close dropdown
+   * * onClear(): Clear selected value
+   * * setPreviousValue(): Set value to previous value
+   * * setValue(value): Set value of dropdown
+   *  * @param {value} - string || number || array
    */
   reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)

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/package.json

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

package/readme.md

@@ -38,6 +38,9 @@ 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