diginet-core-ui 1.4.31 → 1.4.33

package/assets/images/menu/dhr/MHRP29N0030.svg

@@ -0,0 +1,11 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1765_74)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M31.5 7H24.5V3.5C24.5 1.6 22.9 0 21 0H14C12.1 0 10.5 1.6 10.5 3.5V7H3.5C1.6 7 0 8.6 0 10.5V17.2C0.1 18.2 1 19 2 19H13V18C13 16.9 13.9 16 15 16H20C21.1 16 22 16.9 22 18V19H25.8C27.3 17.7 29.3 16.9 31.4 16.9C32.6 16.9 33.8 17.2 34.8 17.6C35 17.4 35 17.2 35 17V10.5C35 8.6 33.4 7 31.5 7ZM21 7H14V3.5H21V7ZM15 18V22H20V18H15ZM24.1 21H22V22C22 23.1 21.1 24 20 24H15C13.9 24 13 23.1 13 22V21H2C1.3 21 0.6 20.8 0 20.5V29.8C0 31.7 1.6 33.3 3.5 33.3H25.5C24 30.8 22.8 28 22.8 25.6C22.8 23.9 23.3 22.3 24.1 21Z" fill="#2680EB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.8999 25.5C23.8999 21.3 27.2999 18 31.3999 18C35.4999 18 38.8999 21.4 38.8999 25.5C38.8999 30.1 33.9999 36.4 32.0999 38.6C31.6999 39.1 30.9999 39.1 30.5999 38.6C28.7999 36.4 23.8999 30.1 23.8999 25.5ZM27.5999 24.5C26.8999 27.5 29.4999 30.1 32.4999 29.4C33.8999 29.1 35.0999 27.9 35.3999 26.5C36.0999 23.5 33.4999 20.9 30.4999 21.6C29.0999 22 27.8999 23.1 27.5999 24.5Z" fill="#FF8C00"/>
+</g>
+<defs>
+<clipPath id="clip0_1765_74">
+<rect width="39" height="39" fill="white"/>
+</clipPath>
+</defs>
+</svg>

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

@@ -119,6 +119,7 @@ const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     if (isZoomOutAble) {
       let zoomOutLevel = currentZoomLevel + 1;
       if (zoomOutLevel === 2 && minZoom !== 'quarter') zoomOutLevel++; // skip quarter
+      onUpdate(navigatorValue.current);
       setCurrentZoomLevel(zoomOutLevel);
       return;
     }
@@ -173,7 +174,8 @@ const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
   const setPrevMonth = e => {
     let time = null;
     switch (currentZoomLevel) {
-      case (1, 2):
+      case 1:
+      case 2:
         time = new Date(getCurrentTime()[2] - 1, getCurrentTime()[1]); // set year = current year - 1
         break;
       case 3:
@@ -195,7 +197,8 @@ const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
   const setNextMonth = e => {
     let time = null;
     switch (currentZoomLevel) {
-      case (1, 2):
+      case 1:
+      case 2:
         time = new Date(getCurrentTime()[2] + 1, getCurrentTime()[1]); // set year = current year + 1
         break;
       case 3:

package/components/form-control/date-range-picker/index.js

@@ -726,6 +726,7 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
     }
   };
   const onInputFocus = () => {
+    if (!isEnable) return;
     const el = ipConRef.current;
     if (!el.classList.contains(unique.focus)) {
       el.classList.add(unique.focus);

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

@@ -3,36 +3,14 @@
 import { css, jsx } from '@emotion/core';
 import { Typography } from "../..";
 import PropTypes from 'prop-types';
-import { Fragment, forwardRef, memo, useEffect, useMemo, useRef, useState } from 'react';
-import { cursorNoDrop, cursorPointer, displayBlock, flexRow, itemsCenter, positionAbsolute, positionRelative } from "../../../styles/general";
+import { Fragment, forwardRef, memo, useEffect, useRef, useState } from 'react';
+import { borderRadius, cursorNoDrop, cursorPointer, displayBlock, flexRow, itemsCenter, parseMinHeight, parseMinWidth, parseWidthHeight, positionAbsolute, positionRelative } from "../../../styles/general";
 import { useTheme } from "../../../theme";
 import useThemeProps from "../../../theme/utils/useThemeProps";
-import { randomString as generateRandom } from "../../../utils";
+import { classNames, getProp } from "../../../utils";
 const Toggle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
   const theme = useTheme();
-  const {
-    colors: {
-      system: {
-        rest: clRest,
-        active: clActive,
-        disabled: systemDisabled,
-        active: systemActive
-      },
-      text: {
-        main: clTextMain
-      },
-      fill: {
-        focus: clFillFocus,
-        hover: fillHover
-      },
-      standard: clStandard,
-      semantic: {
-        danger: clDanger
-      }
-    },
-    spacing
-  } = theme;
 
   // props priority: `inProps` > `themeDefaultProps`
   const props = useThemeProps({
@@ -40,113 +18,32 @@ const Toggle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) =
     name: 'Toggle'
   });
   const {
-    id,
+    checked,
     disabled,
-    readOnly,
-    name,
     height,
-    width,
-    label,
-    checked,
-    defaultChecked,
-    onChange,
-    inputRef: inputRefProp,
+    hoverTooltip,
+    id,
     inputProps,
+    inputRef: inputRefProp,
+    label,
     lineClamp,
-    hoverTooltip,
+    name,
+    readOnly,
     required,
+    width,
+    defaultChecked,
+    onChange,
     ...other
   } = props;
   const ref = useRef(null);
   const inputRef = inputRefProp || useRef(null);
   const [checkedState, setCheckedState] = useState(Boolean(checked !== undefined ? checked : defaultChecked));
-  const padding = spacing(0.5);
-  const formCheck = css`
-            ${positionRelative};
-            min-height: ${height}px;
-            padding: ${padding}px;
-        `;
-  const toggle = css`
-            ${flexRow};
-            ${itemsCenter};
-            ${positionRelative};
-            ${cursorPointer};
-            margin: 0;
-        `;
-  const slider = css`
-            ${positionRelative};
-            ${displayBlock};
-            height: ${height}px;
-            width: ${width}px;
-            min-width: ${width}px;
-            border-radius: ${height}px;
-            background: ${clStandard};
-            outline: 1px solid ${clRest};
-            &.disabled {
-                outline: 1px solid ${systemDisabled} !important;
-            }
-            &.disabled,
-            &.read-only {
-                ${cursorNoDrop};
-            }
-            &::after {
-                ${positionAbsolute};
-                background: ${clRest};
-                width: ${height - spacing(1)}px;
-                height: ${height - spacing(1)}px;
-                content: '';
-                top: 2px;
-                left: 2px;
-                border-radius: 100%;
-                transition: 0.3s ease-in-out;
-                margin: 0px auto;
-            }
-            &:not(.disabled):not(.read-only) {
-                &:active,
-                &:focus {
-                    box-shadow: 0 0 0 2px ${clFillFocus};
-                }
-            }
-        `;
-  const checkbox = css`
-            left: 0;
-            &:checked + label > span.css-${slider.name} {
-                background: ${systemActive};
-                outline-color: ${systemActive};
-                &::after {
-                    background: ${clStandard};
-                    left: ${width - height}px;
-                }
-                &.disabled {
-                    background: ${systemDisabled} !important;
-                }
-            }
-            &:not(:checked) + label > span.css-${slider.name} {
-                &:not(.disabled):not(.read-only) {
-                    &:hover {
-                        box-shadow: 0 0 0 2px ${fillHover};
-                        outline-color: ${systemActive};
-                        background-color: ${fillHover};
-                    }
-                    &:hover:after {
-                        background-color: ${clActive};
-                    }
-                    &:active,
-                    &:focus {
-                        background-color: ${clFillFocus};
-                    }
-                }
-                &.disabled:after {
-                    background: ${systemDisabled} !important;
-                }
-            }
-        `;
-  const idDefault = generateRandom(10, {
-    allowNumber: false,
-    allowSymbol: false
-  });
+  const isEnable = !readOnly && !disabled;
+  const _FormCheckCSS = FormCheckCSS(height, theme);
+  const _ToggleCSS = ToggleCSS(theme);
+  const _SliderCSS = SliderCSS(checkedState, disabled, isEnable, width, height, theme);
   const handleChange = () => {
-    if (disabled || readOnly) return;
+    if (!isEnable) return;
     setCheckedState(checked !== undefined ? Boolean(checked) : !checkedState);
     const e = {
       value: !checkedState,
@@ -160,10 +57,10 @@ const Toggle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) =
   useEffect(() => {
     if (checked !== undefined) setCheckedState(Boolean(checked));
   }, [checked]);
-  return useMemo(() => jsx("div", {
-    id: 'DGN-Core-Toggle-' + (id ? id : idDefault),
-    css: formCheck,
+  return jsx("div", {
+    css: _FormCheckCSS,
     ref: ref,
+    id: 'DGN-Core-Toggle' + (id ? `-${id}` : ''),
     ...other
   }, jsx("input", {
     ...inputProps,
@@ -173,31 +70,107 @@ const Toggle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) =
     type: "checkbox",
     disabled: disabled,
     readOnly: readOnly,
-    css: checkbox,
     checked: checkedState,
     onChange: handleChange
   }), jsx("label", {
-    css: toggle,
+    css: _ToggleCSS,
     onClick: handleChange
   }, jsx("span", {
-    css: slider,
-    className: `${disabled ? 'disabled' : ''} ${readOnly ? 'read-only' : ''}`
+    css: _SliderCSS,
+    className: classNames(disabled && 'disabled', readOnly && 'readOnly')
   }), label !== undefined && jsx(Typography, {
     type: 'p1',
-    style: {
-      color: disabled ? systemDisabled : clTextMain,
-      marginBottom: 0,
-      marginLeft: spacing(2.5)
-    },
+    color: disabled ? 'system/disabled' : 'text/main',
     hoverTooltip: hoverTooltip,
     lineClamp: lineClamp || null,
     mapping: 'label'
-  }, jsx(Fragment, null, label, required && jsx("span", {
-    style: {
-      color: disabled ? systemDisabled : clDanger
-    }
-  }, "*"))))), [disabled, onChange, checkedState, readOnly, theme]);
+  }, jsx(Fragment, null, label, required && jsx(Typography, {
+    color: 'danger',
+    fullWidth: false
+  }, "*")))));
 }));
+const FormCheckCSS = (height, {
+  spacing
+}) => css`
+    ${positionRelative};
+    ${parseMinHeight(height)};
+    padding: ${spacing([0.5])};
+`;
+const ToggleCSS = ({
+  spacing
+}) => css`
+    ${flexRow};
+    ${itemsCenter};
+    ${positionRelative};
+    ${cursorPointer};
+    gap: ${spacing([1.5])};
+`;
+const CheckedSliderCSS = (isEnable, disabled, width, height, colors) => css`
+    background: ${getProp(colors, disabled ? 'system/disabled' : 'system/active')};
+    outline: 1px solid ${getProp(colors, disabled ? 'system/disabled' : 'system/active')};
+    &::after {
+        left: ${width - height}px;
+        background: ${getProp(colors, 'system/standard')};
+    }
+    ${isEnable && css`
+        &:hover {
+            box-shadow: 0 0 0 2px ${getProp(colors, 'fill/hover')};
+        }
+        &:focus {
+            box-shadow: 0 0 0 2px ${getProp(colors, 'fill/focus')};
+        }
+        &:active {
+            box-shadow: 0 0 0 2px ${getProp(colors, 'fill/pressed')};
+        }
+    `}
+`;
+const NotCheckedSliderCSS = (isEnable, disabled, colors) => css`
+    background: ${getProp(colors, 'system/standard')};
+    outline: 1px solid ${getProp(colors, disabled ? 'system/disabled' : 'system/rest')};
+    &::after {
+        left: 2px;
+        background: ${getProp(colors, disabled ? 'system/disabled' : 'system/rest')};
+    }
+    ${isEnable && css`
+        &:hover {
+            box-shadow: 0 0 0 2px ${getProp(colors, 'fill/hover')};
+            outline-color: ${getProp(colors, 'system/active')};
+            background-color: ${getProp(colors, 'fill/hover')};
+        }
+        &:focus {
+            box-shadow: 0 0 0 2px ${getProp(colors, 'fill/focus')};
+            background-color: ${getProp(colors, 'fill/focus')};
+        }
+        &:active {
+            box-shadow: 0 0 0 2px ${getProp(colors, 'fill/pressed')};
+            background-color: ${getProp(colors, 'fill/pressed')};
+        }
+        &:hover:after {
+            background-color: ${getProp(colors, 'system/active')};
+        }
+    `}
+`;
+const SliderCSS = (checkedState, disabled, isEnable, width, height, {
+  colors,
+  spacing
+}) => css`
+    ${positionRelative};
+    ${displayBlock};
+    ${parseWidthHeight(width, height)};
+    ${parseMinWidth(width)};
+    ${borderRadius(height)};
+    ${!isEnable && cursorNoDrop}
+    &::after {
+        ${positionAbsolute};
+        ${parseWidthHeight(height - spacing(1), height - spacing(1))};
+        content: '';
+        top: 2px;
+        border-radius: 100%;
+        transition: 0.3s ease-in-out;
+        margin: 0px auto;
+    }
+    ${checkedState ? CheckedSliderCSS(isEnable, disabled, width, height, colors) : NotCheckedSliderCSS(isEnable, disabled, colors)};
+`;
 
 // Toggle.defaultProps = {
 //     disabled: false,

package/components/slider/slider-item.js

@@ -67,7 +67,7 @@ const SliderItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             className: IDs.frame,
             css: _FrameCSS,
             frameBorder: 0,
-            src: `https://view.officeapps.live.com/op/view.aspx?src=${filePath}`,
+            src: `https://view.officeapps.live.com/op/view.aspx?src=${filePath}&activeCell=A1`,
             title: fileName
           });
         }

package/icons/basic.js

@@ -1700,7 +1700,7 @@ export const Colors = /*#__PURE__*/memo(({
     rx: "2.79582",
     ry: "2.78742",
     transform: "matrix(0.497747 0.867322 -0.864719 0.502257 3.80195 13.6001)",
-    fill: "system/active"
+    fill: "#111D5E"
   }), /*#__PURE__*/React.createElement("ellipse", {
     rx: "2.79582",
     ry: "2.78742",

package/package.json

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

package/readme.md

@@ -41,7 +41,19 @@ npm test
 ```
 
 ## Changelog
+## 1.4.33
+
+-   \[Added\]: IconMenu – Add MHRP29N0030
+
+## 1.4.32
+
+-   \[Fixed\]: Slider – Fix show excel not focus first cell
+-   \[Fixed\]: Toggle – Fix color not match design
+-   \[Fixed\]: DateRangePicker – Fix still open picker when read-only
+-   \[Fixed\]: DatePicker – Fix wrong navigation content
+
 ## 1.4.31
+
 -   \[Added\]: Skeleton – Add the new Skeleton library
 
 ## 1.4.30