diginet-core-ui 1.3.43-beta.5 → 1.3.44-beta.1

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

@@ -0,0 +1,12 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M34.66 9.48L25.43 0.34C25.22 0.12 24.92 0 24.62 0H8.46C6.55 0 5 1.54 5 3.43V35.57C5 37.46 6.55 39 8.46 39H10.31H29.68H31.53C33.44 39 34.99 37.46 34.99 35.57V18.04V16.98V11.42V11.31V10.28C35 9.97 34.87 9.68 34.66 9.48ZM25.77 3.9L31.06 9.14H26.92C26.28 9.14 25.77 8.63 25.77 8V3.9ZM32.69 18.13V35.58C32.69 36.21 32.17 36.72 31.54 36.72H26.38H13.62H8.46C7.82 36.72 7.31 36.21 7.31 35.58V3.43C7.31 2.8 7.83 2.29 8.46 2.29H23.46V8C23.46 9.89 25.01 11.43 26.92 11.43H31.04C31.05 11.43 31.06 11.43 31.07 11.43H32.69V16.99V18.13V18.13Z" fill="#2680EB"/>
+<path d="M30.79 28.13C30.79 27.5 30.27 26.99 29.64 26.99H19.23C18.59 26.99 18.08 27.5 18.08 28.13C18.08 28.76 18.6 29.27 19.23 29.27H29.64C30.27 29.27 30.79 28.76 30.79 28.13Z" fill="#FF8C00"/>
+<path d="M29.64 22.41H19.23C18.59 22.41 18.08 22.92 18.08 23.55C18.08 24.18 18.6 24.69 19.23 24.69H29.64C30.28 24.69 30.79 24.18 30.79 23.55C30.79 22.92 30.27 22.41 29.64 22.41Z" fill="#FF8C00"/>
+<path d="M19.23 31.56C18.59 31.56 18.08 32.07 18.08 32.7C18.08 33.33 18.6 33.84 19.23 33.84H25.02C25.66 33.84 26.17 33.33 26.17 32.7C26.17 32.07 25.65 31.56 25.02 31.56H19.23Z" fill="#FF8C00"/>
+<path d="M10.0601 25.8101H11.2001V23.5701H10.2401V22.8501C10.8601 22.7501 11.1701 22.6401 11.5201 22.4301H12.3901V25.8201H13.3301V26.7601H10.0601V25.8101Z" fill="#FF8C00"/>
+<path d="M14.8801 25.9401C14.8801 25.4501 15.2401 25.0501 15.7801 25.0501C16.3201 25.0501 16.6801 25.4501 16.6801 25.9401C16.6801 26.4301 16.3201 26.8301 15.7801 26.8301C15.2401 26.8301 14.8801 26.4301 14.8801 25.9401Z" fill="#FF8C00"/>
+<path d="M9.91999 33.17C11.09 32.23 11.94 31.5 11.94 30.91C11.94 30.52 11.69 30.34 11.3 30.34C10.98 30.34 10.72 30.55 10.49 30.75L9.85999 30.12C10.34 29.64 10.78 29.42 11.47 29.42C12.41 29.42 13.06 29.98 13.06 30.84C13.06 31.54 12.33 32.3 11.61 32.9C11.85 32.87 12.18 32.85 12.4 32.85H13.28V33.83H9.91999V33.17Z" fill="#FF8C00"/>
+<path d="M14.88 33.03C14.88 32.54 15.24 32.14 15.78 32.14C16.32 32.14 16.68 32.54 16.68 33.03C16.68 33.52 16.32 33.92 15.78 33.92C15.24 33.92 14.88 33.53 14.88 33.03Z" fill="#FF8C00"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.83 6.84C21.71 6.72 21.55 6.65 21.38 6.65H18.64C18.72 6.49 18.76 6.31 18.76 6.13C18.76 5.51 18.26 5 17.65 5H17.64C17.15 5.03 16.68 5.22 16.3 5.54C15.95 5.81 15.63 6.1 15.33 6.41C15.02 6.1 14.7 5.81 14.35 5.54C13.97 5.22 13.5 5.03 13.01 5C12.39 5 11.89 5.5 11.89 6.13C11.89 6.31 11.93 6.49 12.01 6.65H9.27001C8.92001 6.65 8.64001 6.94 8.64001 7.29V8.54C8.64001 8.89 8.92001 9.18 9.27001 9.18H21.38C21.73 9.18 22.01 8.89 22.01 8.54V7.29C22.01 7.12 21.94 6.96 21.83 6.84ZM12.88 6.65C12.86 6.63 12.84 6.61 12.81 6.59C12.72 6.54 12.64 6.47 12.58 6.39C12.54 6.31 12.51 6.22 12.52 6.13C12.52 6 12.57 5.88 12.66 5.78C12.75 5.69 12.88 5.64 13 5.64C13.36 5.67 13.7 5.82 13.98 6.05C14.17 6.2 14.36 6.36 14.53 6.53C14.57 6.56 14.62 6.61 14.66 6.65H12.88ZM18.07 6.39C18.01 6.47 17.93 6.54 17.84 6.59C17.81 6.61 17.79 6.63 17.77 6.65H15.99L16.11 6.53C16.29 6.36 16.47 6.2 16.67 6.06C16.95 5.82 17.29 5.68 17.64 5.64C17.77 5.64 17.9 5.69 17.99 5.79C18.08 5.88 18.13 6 18.13 6.14C18.13 6.22 18.11 6.31 18.07 6.39Z" fill="#FFAA00"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.82001 9.74V15.98C9.83001 16.54 10.27 17 10.82 17H19.83C20.09 17 20.35 16.89 20.53 16.7C20.72 16.51 20.83 16.25 20.83 15.98V9.74H9.82001ZM15.57 15.23V15.71C15.57 15.79 15.51 15.85 15.44 15.85H15.12C15.05 15.85 14.99 15.79 14.99 15.71V15.28C14.71 15.26 14.44 15.21 14.18 15.11C14.06 15.07 14 14.94 14.03 14.81L14.08 14.61C14.1 14.54 14.15 14.48 14.21 14.44C14.28 14.41 14.35 14.41 14.42 14.43C14.65 14.53 14.9 14.57 15.14 14.58C15.48 14.58 15.72 14.44 15.72 14.2C15.72 13.97 15.52 13.82 15.09 13.67C14.45 13.45 14.01 13.15 14.01 12.57C14.03 12 14.46 11.54 15.01 11.49V11.05C15.01 10.97 15.08 10.91 15.15 10.9H15.47C15.54 10.91 15.6 10.97 15.6 11.05V11.45C15.82 11.45 16.03 11.49 16.24 11.56C16.37 11.6 16.44 11.73 16.41 11.86L16.36 12.04C16.35 12.11 16.3 12.17 16.24 12.21C16.18 12.24 16.11 12.25 16.04 12.22C15.85 12.16 15.64 12.12 15.44 12.12C15.05 12.12 14.93 12.29 14.93 12.46C14.93 12.66 15.14 12.79 15.64 12.98C16.35 13.23 16.64 13.57 16.63 14.12C16.61 14.71 16.16 15.19 15.57 15.23Z" fill="#FFAA00"/>
+</svg>

package/components/form-control/helper-text/index.js

@@ -5,66 +5,68 @@ import { memo, forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import { Typography } from '../../';
-import theme from '../../../theme/settings';
 import { getGlobal } from '../../../global';
+import theme from '../../../theme/settings';
+const {
+  colors: {
+    system: {
+      disabled: systemDisabled
+    },
+    semantic: {
+      success,
+      warning,
+      danger,
+      info
+    }
+  },
+  spacing
+} = theme;
+const colorMap = new Map([['default', danger], ['success', success], ['warning', warning], ['danger', danger], ['info', info]]);
 const HelperText = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   disabled,
   status,
   className,
+  style,
   children,
-  ...props
+  id
 }, ref) => {
-  /* Start styled */
-  const HelperTextRoot = css`
-        margin-top: 4px;
-        &.info {
-            color: ${theme.colors.info};
-        }
-        &.success {
-            color: ${theme.colors.success};
-        }
-        &.warning {
-            color: ${theme.colors.warning};
-        }
-        &.danger {
-            color: ${theme.colors.danger};
-        }
-        &.disabled {
-            color: ${theme.colors.disabled};
-        }
-    `;
-  /* End styled */
-
+  const color = colorMap.get(status);
   return jsx(Typography, {
     ref: ref,
+    id: id,
     type: 'p3',
-    color: theme.colors.danger,
+    color: disabled ? systemDisabled : color,
     fullWidth: false,
-    css: HelperTextRoot,
-    className: ['DGN-UI-HelperText', className, status, disabled ? 'disabled' : ''].join(' ').trim(),
-    ...props
+    css: HelperTextRootCSS,
+    className: ['DGN-UI-HelperText', className].join(' ').trim().replace(/\s+/g, ' '),
+    style: style,
+    lineClamp: 1
   }, typeof children === 'boolean' ? getGlobal('thisFieldIsRequired') : children);
 }));
+const HelperTextRootCSS = css`
+    margin-top: ${spacing()}px;
+`;
 HelperText.defaultProps = {
   disabled: false,
   status: 'default',
   className: '',
+  style: {},
   children: ''
 };
 HelperText.propTypes = {
-  /** prevent all event if true */
+  /** If true, the component is disabled. */
   disabled: PropTypes.bool,
 
   /** status type to display color for input (only available for type is inform) */
   status: PropTypes.oneOf(['default', 'warning', 'success', 'danger', 'info']),
 
-  /** class use in for helper text */
+  /** Class for component. */
   className: PropTypes.string,
 
-  /** the content to display in HelperText */
-  children: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  /** Style inline of component. */
+  style: PropTypes.object,
 
-  /** any props else */
-  props: PropTypes.any
+  /** Content to display in component. */
+  children: PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
 };
 export default HelperText;

package/components/form-control/number-input/index2.js

@@ -221,14 +221,14 @@ const NumberInput = /*#__PURE__*/forwardRef(({
       e.preventDefault();
     } // key arrow down
     else if (keyCode === 40) {
-      _onInput({ ...e,
-        target: { ...e.target,
-          value: Number(convertMoneyToNumber(value) || 0) - step
-        }
-      });
+        _onInput({ ...e,
+          target: { ...e.target,
+            value: Number(convertMoneyToNumber(value) || 0) - step
+          }
+        });
 
-      e.preventDefault();
-    } // disabled negative
+        e.preventDefault();
+      } // disabled negative
 
 
     const disabled180 = (keyCode === 189 || keyCode === 109) && (disabledNegative || value.includes('-')); // Block event if include conditions

package/components/form-control/time-picker/index.js

@@ -3,8 +3,9 @@
 /** @jsx jsx */
 import { jsx, css } from '@emotion/core';
 import PropTypes from 'prop-types';
-import React, { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
+import React, { forwardRef, memo, useEffect, useMemo, useRef } from 'react';
 import { Cancel as CancelIcon, Clock as ClockIcon } from '../../../icons';
+import HelperText from '../helper-text';
 import { randomString, useOnClickOutside } from '../../../utils';
 import theme from '../../../theme/settings';
 import Swiper from './swiper';
@@ -432,21 +433,10 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                         }
                     `
     },
-    error: {
-      outlined: css`
-                        color: ${theme.colors.danger};
-                        ${typography.paragraph3};
-                        margin-top: 8px;
-                        pointer-events: none;
-                    `,
-      underlined: css`
-                        color: ${theme.colors.danger};
-                        ${typography.paragraph3};
-                        bottom: -20px;
-                        position: absolute;
-                        pointer-events: none;
-                    `
-    },
+    error: css`
+                    position: absolute;
+                    top: 100%;
+                `,
     clock: {
       container: css`
                         background-color: white;
@@ -762,9 +752,10 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     onChange: selected => setInputSecond(selected),
     parentNode: swiperWrapperSecondsRef
   })) : null), [activeHeight, activeWidth, allowSeconds, defaultValue, disabled, error, value, viewType]);
-  const ErrorMemo = useMemo(() => error && jsx("span", {
-    css: styles.error[viewType]
-  }, error), [error]);
+  const ErrorMemo = useMemo(() => error && jsx(HelperText, {
+    css: styles.error,
+    disabled: disabled
+  }, error), [error, disabled]);
   const MainMemo = useMemo(() => jsx("div", {
     className: IDs.main,
     css: styles.main[viewType],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.3.43-beta.5",
+  "version": "1.3.44-beta.1",
   "description": "",
   "main": "index.js",
   "license": "UNLICENSED",

package/readme.md

@@ -38,6 +38,18 @@ npm test
 ```
 
 ## Changelog
+## 1.3.44
+- \[Added\]: MenuIcon – MHRP09N0033
+- \[Changed\]: Modal – Add prop className
+- \[Changed\]: Slider – Update design button next, previous
+- \[Changed\]: Settings – Return CORE typography in setting
+- \[Changed\]: PagingInfo – Update design typeShort (Design update)
+- \[Fixed\]: DatePicker – Fix bug clearable when readOnly, picker out of screen
+- \[Fixed\]: DropdownBox – Fix bug press Tab close DropdownBox
+- \[Fixed\]: ButtonIcon – Change element tag from button to div; Fix ripple effect circular
+- \[Fixed\]: DatePicker – Fix bug warning proptype, keydown Tab not close DatePicker
+- \[Fixed\]: InputBase – Fix css disabled
+
 ## 1.3.43
 - \[Added\]: MenuIcon – MHRM00N0002, MHRM39N0018, MHRM39N0019, MHRM00N0003, MHRM00N0004 , MHRM13N0002, MHRM13N0003, MHRM29N0004
 - \[Changed\]: Checkbox - Add labelProps

package/theme/make-styles.js

@@ -65,11 +65,14 @@ const separateStyle = (className, style) => {
 };
 
 const createStyle = (className, style) => {
+  const styleInnerHTML = `${/@media/.test(className) ? '' : '.'}${className} {${style}}`; // Nếu đã có style trong head thì không thêm vào nữa
+
+  if (checkExist(styleInnerHTML)) return;
   const styleEl = document.createElement('style');
   styleEl.type = 'text/css';
   styleEl.dataMeta = 'makeStyles';
   document.head.appendChild(styleEl);
-  styleEl.appendChild(document.createTextNode(`${/@media/.test(className) ? '' : '.'}${className} {${style}}`));
+  styleEl.appendChild(document.createTextNode(styleInnerHTML));
   makeStylesEls.push(styleEl);
 };
 
@@ -92,4 +95,12 @@ const getEndBraces = (str, start) => {
   return temp;
 };
 
+const checkExist = styleInnerHTML => {
+  let isExist = false;
+  makeStylesEls.some(el => {
+    if (el.innerHTML === styleInnerHTML) isExist = true;
+  });
+  return isExist;
+};
+
 export default makeStyle;