diginet-core-ui 1.4.17-beta.2 → 1.4.17-beta.3

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

@@ -8,16 +8,16 @@ import { render } from 'react-dom';
 import { bgColor, border, borderRadius, boxBorder, cursorDefault, cursorPointer, displayFlex, flexCol, flexRow, insetX, insetY, itemsCenter, justifyBetween, parseHeight, parseMaxWidth, parseMinHeight, parseMinWidth, parseWidth, parseWidthHeight, pointerEventsNone, positionAbsolute, positionRelative, shadowLarge, shadowNone, textCenter, textColor, userSelectNone } from "../../../styles/general";
 import { classNames, getProp, date as moment } from "../../../utils";
 
-/**
- * START STYLE
+/**
+ * START STYLE
  */
 
-/**
- *
- * @param {Object} unique
- * @param {Boolean} boxShadow
- * @param onClickActive
- * @returns
+/**
+ *
+ * @param {Object} unique
+ * @param {Boolean} boxShadow
+ * @param onClickActive
+ * @returns
  */
 const generateCalendarCSS = (unique, boxShadow = true, onClickActive = true, {
   colors,
@@ -216,15 +216,15 @@ const generateCalendarCSS = (unique, boxShadow = true, onClickActive = true, {
         }
     }
 `;
-/**
- * END STYLE
+/**
+ * END STYLE
  */
 
-/**
- *
- * @description return props of the typography.
- * @param {String} className
- * @returns {Object} props of the typography
+/**
+ *
+ * @description return props of the typography.
+ * @param {String} className
+ * @returns {Object} props of the typography
  */
 const typographyProps = (className, isNotDay) => {
   return {
@@ -243,11 +243,11 @@ const typographyProps = (className, isNotDay) => {
     type: isNotDay ? 'p2' : 'h6'
   };
 };
-/**
- *
- * @description return props of the button icon.
- * @param {String} className
- * @returns {Object} props of the button icon
+/**
+ *
+ * @description return props of the button icon.
+ * @param {String} className
+ * @returns {Object} props of the button icon
  */
 const buttonIconProps = className => {
   return {
@@ -257,43 +257,43 @@ const buttonIconProps = className => {
   };
 };
 
-/**
- * @description detect value is a Date object
- * @param {String | Number | Array} value
- * @returns boolean
+/**
+ * @description detect value is a Date object
+ * @param {String | Number | Array} value
+ * @returns boolean
  */
 const isValidDate = value => {
   return new Date(value) instanceof Date && !isNaN(new Date(value));
 };
-/**
- *
- * @description set Sunday (0) to the last day of week.
- * @param {Date} date
- * @returns number of day from 0 (Monday) to 6 (Sunday).
+/**
+ *
+ * @description set Sunday (0) to the last day of week.
+ * @param {Date} date
+ * @returns number of day from 0 (Monday) to 6 (Sunday).
  */
 const getDateOfWeek = date => {
   let day = date.getDay();
   if (day === 0) day = 7;
   return day - 1;
 };
-/**
- *
- * @description check day is today.
- * @param {Date} day
- * @param {Date} today
- * @param {String} className
- * @returns {Boolean} is today
+/**
+ *
+ * @description check day is today.
+ * @param {Date} day
+ * @param {Date} today
+ * @param {String} className
+ * @returns {Boolean} is today
  */
 const isToday = (day, today, className) => {
   return +moment(day).diff(today) === 0 ? className : '';
 };
-/**
- *
- * @description check day is active day.
- * @param {Date} day
- * @param {Date} active
- * @param {String} className
- * @returns {Boolean} is active day
+/**
+ *
+ * @description check day is active day.
+ * @param {Date} day
+ * @param {Date} active
+ * @param {String} className
+ * @returns {Boolean} is active day
  */
 const isActive = (day, active, className, currentZoomLevel) => {
   switch (currentZoomLevel) {
@@ -336,14 +336,14 @@ const isActive = (day, active, className, currentZoomLevel) => {
   }
   return '';
 };
-/**
- *
- * @description check day is min/max day.
- * @param {Date} day
- * @param {Date} max
- * @param {Date} min
- * @param {Object} className
- * @returns {Boolean} is limited day
+/**
+ *
+ * @description check day is min/max day.
+ * @param {Date} day
+ * @param {Date} max
+ * @param {Date} min
+ * @param {Object} className
+ * @returns {Boolean} is limited day
  */
 const isLimit = (day, max, min, className) => {
   return isBeforeLimit(min, day) || isAfterLimit(max, day) ? className : '';
@@ -366,18 +366,18 @@ const isBeforeLimit = (min, time) => {
 const isAfterLimit = (max, time) => {
   return max && isValidDate(max) && moment(new Date(time).setHours(0, 0, 0, 0)).diff(new Date(max).setHours(0, 0, 0, 0)) > 0;
 };
-/**
- *
- * @description return the table body of the calendar.
- * @param {Date} time
- * @param {Date} activeValue
- * @param {Object} className
- * @param {Boolean} displayAnotherMonth
- * @param {Function} onTableDataClick
- * @param {Date} min
- * @param {Date} max
- * @param {Number} currentZoomLevel
- * @returns {Element}
+/**
+ *
+ * @description return the table body of the calendar.
+ * @param {Date} time
+ * @param {Date} activeValue
+ * @param {Object} className
+ * @param {Boolean} displayAnotherMonth
+ * @param {Function} onTableDataClick
+ * @param {Date} min
+ * @param {Date} max
+ * @param {Number} currentZoomLevel
+ * @returns {Element}
  */
 const renderTableBody = (time, activeValue, className, displayAnotherMonth, onTableDataClick, min, max, currentZoomLevel) => {
   time = new Date(time);
@@ -425,8 +425,8 @@ const renderTableBody = (time, activeValue, className, displayAnotherMonth, onTa
   };
   switch (currentZoomLevel) {
     case 1:
-      /**
-       * months of this year
+      /**
+       * months of this year
        */
       for (let i = 0; i < 12; i++) {
         const monthsList = getGlobal(['months']).full;
@@ -435,8 +435,8 @@ const renderTableBody = (time, activeValue, className, displayAnotherMonth, onTa
       }
       break;
     case 2:
-      /**
-       * quarter of this year
+      /**
+       * quarter of this year
        */
       for (let i = 0; i < 4; i++) {
         const quarter = i + 1;
@@ -446,50 +446,50 @@ const renderTableBody = (time, activeValue, className, displayAnotherMonth, onTa
       break;
     case 3:
       {
-        /**
-         * year before this decade
+        /**
+         * year before this decade
          */
         const previousDecadeLastYear = new Date(firstYear - 1, 0, 1);
         const nextDecadeFirstYear = new Date(firstYear + 10, 0, 1);
         tableDataPush(`previous_decade-${firstYear - 1}`, previousDecadeLastYear, firstYear - 1, 'previous_month');
-        /**
-         * years of this decade
+        /**
+         * years of this decade
          */
         for (let i = 0; i < 10; i++) {
           const year = new Date(firstYear + i, min ? Number(moment(min).format('MM')) - 1 : 0, 1);
           tableDataPush(`this-decade-${i + 1}`, year, firstYear + i);
         }
-        /**
-         * year after this decade
+        /**
+         * year after this decade
          */
         tableDataPush(`next_decade-${firstYear + 10}`, nextDecadeFirstYear, firstYear + 10, 'next_month');
       }
       break;
     case 4:
       {
-        /**
-         * decade before this century
+        /**
+         * decade before this century
          */
         const lastDecadeLastCentury = new Date(firstDecade - 10, 0, 1);
         const nextCenturyFirstDecade = new Date(firstDecade + 100, 0, 1);
         tableDataPush(`previous_century-${firstYear - 1}`, lastDecadeLastCentury, `${firstDecade - 10} - ${firstDecade - 1}`, 'previous_month');
-        /**
-         * decades of this century
+        /**
+         * decades of this century
          */
         for (let i = 0; i < 10; i++) {
           const decade = new Date(firstDecade + i * 10, 0, 1);
           tableDataPush(`this-century-${i + 1}`, decade, `${firstDecade + i * 10} - ${firstDecade + i * 10 + 9}`);
         }
-        /**
-         * decade after this century
+        /**
+         * decade after this century
          */
         tableDataPush(`next_century-${firstYear + 10}`, nextCenturyFirstDecade, `${firstDecade + 100} - ${firstDecade + 100 + 9}`, 'next_month');
       }
       break;
     default:
       if (activeValue && Array.isArray(activeValue) && activeValue.length === 2 && activeValue[0] !== activeValue[1]) {
-        /**
-         * days of previous month
+        /**
+         * days of previous month
          */
         active = activeValue;
         for (let i = weekDateFirst; i > 0; i--) {
@@ -504,8 +504,8 @@ const renderTableBody = (time, activeValue, className, displayAnotherMonth, onTa
             ...typographyProps(className.day.day)
           }, '')));
         }
-        /**
-         * days of this month
+        /**
+         * days of this month
          */
         for (let i = 0; i < lastDate; i++) {
           const day = new Date(time.getFullYear(), time.getMonth(), i + 1);
@@ -518,8 +518,8 @@ const renderTableBody = (time, activeValue, className, displayAnotherMonth, onTa
             ...typographyProps(className.day.day)
           }, i + 1)));
         }
-        /**
-         * days of next month
+        /**
+         * days of next month
          */
         for (let i = 0; i < 20 - weekDateLast; i++) {
           const day = new Date(time.getFullYear(), time.getMonth() + 1,
@@ -534,8 +534,8 @@ const renderTableBody = (time, activeValue, className, displayAnotherMonth, onTa
           }, '')));
         }
       } else {
-        /**
-         * days of previous month
+        /**
+         * days of previous month
          */
         for (let i = weekDateFirst; i > 0; i--) {
           const day = new Date(time.getFullYear(), time.getMonth() - 1, displayAnotherMonth ? prevDate - i + 1 : 1);
@@ -548,8 +548,8 @@ const renderTableBody = (time, activeValue, className, displayAnotherMonth, onTa
             ...typographyProps(className.day.day)
           }, displayAnotherMonth ? prevDate - i + 1 : '')));
         }
-        /**
-         * days of this month
+        /**
+         * days of this month
          */
         for (let i = 0; i < lastDate; i++) {
           const day = new Date(time.getFullYear(), time.getMonth(), i + 1);
@@ -562,8 +562,8 @@ const renderTableBody = (time, activeValue, className, displayAnotherMonth, onTa
             ...typographyProps(className.day.day)
           }, i + 1)));
         }
-        /**
-         * days of next month
+        /**
+         * days of next month
          */
         for (let i = 0; i < 20 - weekDateLast; i++) {
           const day = new Date(time.getFullYear(), time.getMonth() + 1, displayAnotherMonth ? i + 1 : 6 - weekDateLast);
@@ -591,11 +591,11 @@ const renderTableBody = (time, activeValue, className, displayAnotherMonth, onTa
   }
   return tableBody;
 };
-/**
- *
- * @param {Object} className
- * @param {Number} currentZoomLevel
- * @returns
+/**
+ *
+ * @param {Object} className
+ * @param {Number} currentZoomLevel
+ * @returns
  */
 const renderHeader = (className, currentZoomLevel) => {
   const weekdays = getGlobal(['weekdaysLong']);
@@ -613,17 +613,17 @@ const renderHeader = (className, currentZoomLevel) => {
     className: className.table.raw
   }, !currentZoomLevel && tableHeader));
 };
-/**
- *
- * @param {Object} className
- * @param {Object} refs
- * @param {Function} dbLeftFn
- * @param {Function} leftFn
- * @param {Function} rightFn
- * @param {Function} dbRightFn
- * @param fn
- * @param {Number} currentZoomLevel
- * @returns navigator
+/**
+ *
+ * @param {Object} className
+ * @param {Object} refs
+ * @param {Function} dbLeftFn
+ * @param {Function} leftFn
+ * @param {Function} rightFn
+ * @param {Function} dbRightFn
+ * @param fn
+ * @param {Number} currentZoomLevel
+ * @returns navigator
  */
 const renderNavigator = (className, refs, dbLeftFn, leftFn, rightFn, dbRightFn, fn, currentZoomLevel = 0) => {
   const ButtonCSS = css`
@@ -655,7 +655,7 @@ const renderNavigator = (className, refs, dbLeftFn, leftFn, rightFn, dbRightFn,
     color: 'primary',
     type: 'h3',
     ref: refs.content,
-    format: ['lowercase']
+    format: ['sentence']
   }))), jsx("div", {
     className: className.navigator.around
   }, jsx(ButtonIcon, {
@@ -670,23 +670,23 @@ const renderNavigator = (className, refs, dbLeftFn, leftFn, rightFn, dbRightFn,
     ref: refs.doubleRight
   })));
 };
-/**
- *
- * @param {Date} time
- * @returns {String} month year
+/**
+ *
+ * @param {Date} time
+ * @returns {String} month year
  */
 const renderNavigatorContent = time => {
   const value = new Date(time);
   const months = getGlobal(['months', 'full']);
   return [months[value.getMonth()], value.getFullYear()];
 };
-/**
- *
- * @param {Date} time
- * @param {Object} refs
- * @param {Date} min
- * @param {Date} max
- * @param {Number} currentZoomLevel
+/**
+ *
+ * @param {Date} time
+ * @param {Object} refs
+ * @param {Date} min
+ * @param {Date} max
+ * @param {Number} currentZoomLevel
  */
 const onUpdateNavigator = (time, refs, min, max, currentZoomLevel = 0) => {
   var _refs$doubleLeft$curr, _refs$doubleLeft$curr2, _refs$doubleRight$cur, _refs$doubleRight$cur2, _refs$left$current, _refs$left$current$in, _refs$right$current, _refs$right$current$i;
@@ -729,19 +729,19 @@ const onUpdateNavigator = (time, refs, min, max, currentZoomLevel = 0) => {
     }
   });
 };
-/**
- *
- * @param {Date} time
- * @param {Object} navigatorRefs
- * @param {Date} min
- * @param {Date} max
- * @param {Element} table
- * @param {Date} activeValue
- * @param {Object} className
- * @param {Boolean} displayAnotherMonth
- * @param {Function} onTableDataClick
- * @param {Function} onUpdateNavigatorValue
- * @param {Number} currentZoomLevel
+/**
+ *
+ * @param {Date} time
+ * @param {Object} navigatorRefs
+ * @param {Date} min
+ * @param {Date} max
+ * @param {Element} table
+ * @param {Date} activeValue
+ * @param {Object} className
+ * @param {Boolean} displayAnotherMonth
+ * @param {Function} onTableDataClick
+ * @param {Function} onUpdateNavigatorValue
+ * @param {Number} currentZoomLevel
  */
 const onUpdateCalendar = (time, navigatorRefs, min, max, table, activeValue, className, displayAnotherMonth, onTableDataClick, onUpdateNavigatorValue, currentZoomLevel) => {
   onUpdateNavigator(time, navigatorRefs, min, max, currentZoomLevel);

package/components/form-control/password-input/index.js

@@ -58,15 +58,12 @@ const PasswordInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, refer
   } = props;
   const ref = useRef(null);
   const [value, setValue] = useState(valueProp || defaultValue);
-  const [secureTextState, setSecureTextState] = useState(secureText);
+  const [showPassword, setShowPassword] = useState(false);
   const _PasswordInputRoot = PasswordInputRoot(theme);
   const isError = !!error;
   useEffect(() => {
     setValue(valueProp);
   }, [valueProp]);
-  useEffect(() => {
-    setSecureTextState(secureText);
-  }, [secureText]);
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
@@ -79,11 +76,11 @@ const PasswordInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, refer
   });
   const validateResult = validates && onValidate(value, validates, true);
   const setShowHide = () => {
-    setSecureTextState(!secureTextState);
+    setShowPassword(prevState => !prevState);
   };
-  const VisibilityIcon = secureText && visibilityToggle ? jsx(ButtonIcon, {
+  const VisibilityIcon = visibilityToggle ? jsx(ButtonIcon, {
     viewType: 'ghost',
-    name: secureTextState ? 'View' : 'UnView',
+    name: showPassword ? 'View' : 'UnView',
     onClick: setShowHide
   }) : null;
   return jsx("div", {
@@ -100,7 +97,7 @@ const PasswordInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, refer
     autoComplete: autoComplete,
     autoFocus: autoFocus,
     autoWidth: autoWidth,
-    className: classNames(secureTextState && 'DGN-UI-PasswordInput-SecureText'),
+    className: classNames(secureText && !showPassword && 'DGN-UI-PasswordInput-SecureText'),
     defaultValue: defaultValue,
     delayOnChange: delayOnChange,
     disabled: disabled,
@@ -122,7 +119,7 @@ const PasswordInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, refer
     startIcon: startIcon,
     startIconProps: startIconProps,
     status: isError || validateResult ? 'danger' : status,
-    type: secureText ? 'text' : 'password',
+    type: secureText || showPassword ? 'text' : 'password',
     value: valueProp,
     viewType: viewType
   }), isError && jsx(HelperText, {
@@ -152,6 +149,10 @@ const PasswordInputRoot = ({
             ${typography.fontFamilySecurity};
         }
     }
+    input::-ms-reveal,
+    input::-ms-clear {
+        display: none;
+    }
 `;
 
 // PasswordInput.defaultProps = {
@@ -225,10 +226,10 @@ PasswordInput.propTypes = {
   status: PropTypes.oneOf(['default', 'warning', 'success', 'danger']),
   /** Style inline of component. */
   style: PropTypes.object,
-  /** Validation value, argument can:<br/>
-   * * string: the validation rule. Example required.<br/>
-   * * object: the validation rule insist name, property, message. Example {name: 'min', compareValue: 9, message: 'Error'} or {max: 99}<br/>
-   * * array: the validation rule list, insist object/string
+  /** Validation value, argument can:<br/>
+   * * string: the validation rule. Example required.<br/>
+   * * object: the validation rule insist name, property, message. Example {name: 'min', compareValue: 9, message: 'Error'} or {max: 99}<br/>
+   * * array: the validation rule list, insist object/string
    */
   validates: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.array, PropTypes.func]),
   /** The value of the input element, required for a controlled component. */

package/global/index.js

@@ -188,7 +188,7 @@ const overrideGlobal = (newGlobal, ingredient, key) => {
       }
     });
   } else {
-    globalObject[key] = newGlobalValue;
+    ingredient[key] = newGlobalValue;
   }
 };
 export default globalObject;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.4.17-beta.2",
+  "version": "1.4.17-beta.3",
   "description": "",
   "main": "index.js",
   "license": "UNLICENSED",