diginet-core-ui 1.3.34 → 1.3.35

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

@@ -57,65 +57,65 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   /* Start styled */
 
   const DropdownBoxRoot = css`
-        &.DGN-UI-Dropdown-Box {
-            ${displayBlock}
-            ${positionRelative}
+                &.DGN-UI-Dropdown-Box {
+                    ${displayBlock}
+                    ${positionRelative}
             min-width: 150px;
-            height: max-content;
-            .end-icon > .DGN-UI-Icon {
-                transition: transform 250ms;
-            }
-            &.dropdown-showing {
-                .end-icon > .DGN-UI-ButtonIcon {
-                    transform: rotateX(180deg);
-                }
-            }
-            .DGN-UI-InputBase {
-                background-color: ${bgColor ? bgColor === true ? fillDisabled : bgColor : 'inherit'};
-                &.underlined {
-                    height: 32px;
-                }
-                &.dropdown-focus {
-                    background-color: inherit;
-                    &::after {
-                        border-bottom-color: ${info};
-                        transform: scaleX(1);
+                    height: max-content;
+                    .end-icon > .DGN-UI-Icon {
+                        transition: transform 250ms;
+                    }
+                    &.dropdown-showing {
+                        .end-icon > .DGN-UI-ButtonIcon {
+                            transform: rotateX(180deg);
+                        }
+                    }
+                    .DGN-UI-InputBase {
+                        background-color: ${bgColor ? bgColor === true ? fillDisabled : bgColor : 'inherit'};
+                        &.underlined {
+                            height: 32px;
+                        }
+                        &.dropdown-focus {
+                            background-color: inherit;
+                            &::after {
+                                border-bottom-color: ${info};
+                                transform: scaleX(1);
+                            }
+                        }
                     }
                 }
-            }
-        }
-    `;
+            `;
   const DropdownBoxCSS = css`
-        ${displayBlock}
-        ${paragraph1};
-        ${positionFixed}
-        ${borderBox}
+                ${displayBlock}
+                ${paragraph1};
+                ${positionFixed}
+                ${borderBox}
         ${borderRadius4px}
 		width: 100%;
-		height: auto;
-        max-height: 80%;
-		overflow: auto;
-        padding: 16px;
-        background-color: #FFF;
-		box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-        opacity: 0;
-        transition: opacity 0.3s;
-        z-index: ${zIndex};
-		&::-webkit-scrollbar {
-			${borderRadius4px}
-            width: 8px;
-			background-color: #FFF !important;
-		}
-		&::-webkit-scrollbar-thumb {
-			${borderRadius4px}
-            mix-blend-mode: normal;
-			background-color: ${scrollbar} !important;
-			background-clip: content-box;
-		}
-        .DGN-UI-TreeView {
-            padding: 1px;
-        }
-    `;
+                height: auto;
+                max-height: 80%;
+                overflow: auto;
+                padding: 16px;
+                background-color: #fff;
+                box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+                opacity: 0;
+                transition: opacity 0.3s;
+                z-index: ${zIndex};
+                &::-webkit-scrollbar {
+                    ${borderRadius4px}
+                    width: 8px;
+                    background-color: #fff !important;
+                }
+                &::-webkit-scrollbar-thumb {
+                    ${borderRadius4px}
+                    mix-blend-mode: normal;
+                    background-color: ${scrollbar} !important;
+                    background-clip: content-box;
+                }
+                .DGN-UI-TreeView {
+                    padding: 1px;
+                }
+            `;
   /* End styled */
 
   /* Start handler */

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

@@ -26,20 +26,6 @@ const Label = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   className,
   ...props
 }, ref) => {
-  const LabelRootCSS = css`
-        ${ellipsis}
-        margin: 0px;
-        &.read-only,
-        &.disabled {
-            color: ${systemDisabled};
-        }
-        .required {
-            color: ${danger};
-        }
-        & + .DGN-UI-InputBase.outlined {
-            margin-top: 2px;
-        }
-    `;
   const LabelComp = useMemo(() => jsx(Typography, {
     type: 'h6',
     color: normal_label,
@@ -47,13 +33,28 @@ const Label = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     ref: ref,
     mapping: 'label',
     css: LabelRootCSS,
-    className: ['DGN-UI-Label', className, readOnly ? 'read-only' : '', disabled ? 'disabled' : ''].join(' ').trim(),
+    className: ['DGN-UI-Label', className, readOnly ? 'read-only' : '', disabled ? 'disabled' : ''].join(' ').trim().replace(/\s+/g, ' '),
     ...props
   }, children, required ? jsx("span", {
     className: 'required'
   }, " *") : null), [children, required, readOnly, disabled]);
   return LabelComp;
 }));
+const LabelRootCSS = css`
+    ${ellipsis}
+    min-height: 16px;
+    margin: 0px;
+    &.read-only,
+    &.disabled {
+        color: ${systemDisabled};
+    }
+    .required {
+        color: ${danger};
+    }
+    & + .DGN-UI-InputBase.outlined {
+        margin-top: 2px;
+    }
+`;
 Label.defaultProps = {
   required: false,
   disabled: false,

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

@@ -7,6 +7,87 @@ import { jsx, css } from '@emotion/core';
 import locale from '../../../locale';
 import { InputBase, Label, HelperText } from '../../';
 import { onValidate } from '../../../utils';
+import { displayBlock, positionRelative } from '../../../styles/general';
+import { getGlobal } from '../../../global';
+
+const num2WordsVi = function () {
+  let t = ['không', 'một', 'hai', 'ba', 'bốn', 'năm', 'sáu', 'bảy', 'tám', 'chín'],
+      r = function (r, n) {
+    let o = '',
+        a = Math.floor(r / 10),
+        e = r % 10;
+    return a > 1 ? (o = ' ' + t[a] + ' mươi', 1 === e && (o += ' mốt')) : 1 === a ? (o = ' mười', 1 === e && (o += ' một')) : n && e > 0 && (o = ' lẻ'), 5 === e && a >= 1 ? o += ' lăm' : 4 === e && a >= 1 ? o += ' tư' : (e > 1 || 1 === e && 0 === a) && (o += ' ' + t[e]), o;
+  },
+      n = function (n, o) {
+    var a = '',
+        e = Math.floor(n / 100),
+        n = n % 100;
+    return o || e > 0 ? (a = ' ' + t[e] + ' trăm', a += r(n, !0)) : a = r(n, !1), a;
+  },
+      o = function (t, r) {
+    var o = '',
+        a = Math.floor(t / 1e6),
+        t = t % 1e6;
+    a > 0 && (o = n(a, r) + ' triệu', r = !0);
+    var e = Math.floor(t / 1e3),
+        t = t % 1e3;
+    return e > 0 && (o += n(e, r) + ' ngàn', r = !0), t > 0 && (o += n(t, r)), o;
+  };
+
+  return {
+    convert: function (r) {
+      let ty;
+      if (0 === r) return t[0];
+      let n = '',
+          a = '';
+
+      do ty = r % 1e9, r = Math.floor(r / 1e9), n = r > 0 ? o(ty, !0) + a + n : o(ty, !1) + a + n, a = ' tỷ'; while (r > 0);
+
+      return n.trim();
+    }
+  };
+}();
+
+var a = ['', 'one ', 'two ', 'three ', 'four ', 'five ', 'six ', 'seven ', 'eight ', 'nine ', 'ten ', 'eleven ', 'twelve ', 'thirteen ', 'fourteen ', 'fifteen ', 'sixteen ', 'seventeen ', 'eighteen ', 'nineteen '];
+var b = ['', '', 'twenty', 'thirty', 'forty', 'fifty', 'sixty', 'seventy', 'eighty', 'ninety'];
+
+const num2WordsEn = n => {
+  const arr = x => Array.from(x);
+
+  const num = x => Number(x) || 0;
+
+  const isEmpty = xs => xs.length === 0;
+
+  const take = n => xs => xs.slice(0, n);
+
+  const drop = n => xs => xs.slice(n);
+
+  const reverse = xs => xs.slice(0).reverse();
+
+  const comp = f => g => x => f(g(x));
+
+  const not = x => !x;
+
+  const chunk = n => xs => isEmpty(xs) ? [] : [take(n)(xs), ...chunk(n)(drop(n)(xs))];
+
+  let a = ['', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten', 'eleven', 'twelve', 'thirteen', 'fourteen', 'fifteen', 'sixteen', 'seventeen', 'eighteen', 'nineteen'];
+  let b = ['', '', 'twenty', 'thirty', 'forty', 'fifty', 'sixty', 'seventy', 'eighty', 'ninety'];
+  let g = ['', 'thousand', 'million', 'billion', 'trillion', 'quadrillion', 'quintillion', 'sextillion', 'septillion', 'octillion', 'nonillion']; // this part is really nasty still
+  // it might edit this again later to show how Monoids could fix this up
+
+  let makeGroup = ([ones, tens, huns]) => {
+    return [num(huns) === 0 ? '' : a[huns] + ' hundred ', num(ones) === 0 ? b[tens] : b[tens] && b[tens] + '-' || '', a[tens + ones] || a[ones]].join('');
+  }; // "thousands" constructor; no real good names for this, i guess
+
+
+  let thousand = (group, i) => group === '' ? group : `${group} ${g[i]}`; // execute !
+
+
+  if (typeof n === 'number') return num2WordsEn(String(n));
+  if (n === '0') return 'zero';
+  return comp(chunk(3))(reverse)(arr(n)).map(makeGroup).map(thousand).filter(comp(not)(isEmpty)).reverse().join(' ');
+};
+
 const MoneyInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   viewType,
   valueTypeReturn,
@@ -44,6 +125,7 @@ const MoneyInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   onKeyDown,
   onKeyUp,
   validates,
+  convertToWords,
   ...props
 }, reference) => {
   const ref = useRef(null);
@@ -65,8 +147,8 @@ const MoneyInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   /* Start styled */
 
   const MoneyInputRoot = css`
-        display: block;
-        position: relative;
+        ${displayBlock}
+        ${positionRelative}
         margin-bottom: 20px;
     `;
   /* End styled */
@@ -305,10 +387,15 @@ const MoneyInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         inputRef.current.value = '';
       } else {
         const v = getValueWithDecimal(value.toString().replace('.', decimalSymbol));
-        inputRef.current.value = thousandSeparator ? getThousandSeparator(v) : v;
+
+        if (convertToWords && !decimalDigit && (disabled || readOnly)) {
+          inputRef.current.value = Number.isInteger(value) ? locale.get() === 'vi' ? num2WordsVi.convert(value) : num2WordsEn(value) : getGlobal('helperInvalid');
+        } else {
+          inputRef.current.value = thousandSeparator ? getThousandSeparator(v) : v;
+        }
       }
     }
-  }, [value]);
+  }, [disabled, readOnly, value]);
   useEffect(() => {
     const valueInput = inputRef.current.value;
     inputRef.current.value = getValueWithDecimal(valueInput);
@@ -316,8 +403,16 @@ const MoneyInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   /* End handler */
 
   useImperativeHandle(reference, () => {
-    ref.current.getThousandSeparator = getThousandSeparator;
-    return ref.current;
+    const currentRef = ref.current || {};
+    const _instance = {
+      getThousandSeparator: getThousandSeparator
+    }; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    currentRef.getThousandSeparator = getThousandSeparator;
+    return currentRef;
   });
   const validateResult = validates && onValidate(value, validates, true);
   return jsx("div", {
@@ -375,7 +470,8 @@ MoneyInput.defaultProps = {
   allowZero: false,
   disabledNegative: false,
   thousandSeparator: false,
-  inputProps: {}
+  inputProps: {},
+  convertToWords: false
 };
 MoneyInput.propTypes = {
   /** the type of border you want to display */
@@ -438,6 +534,9 @@ MoneyInput.propTypes = {
   /** At least one character is required */
   required: PropTypes.bool,
 
+  /** Convert money from number to words when readOnly || disabled */
+  convertToWords: PropTypes.bool,
+
   /** props of input in MoneyInput component */
   inputProps: PropTypes.object,
 

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

@@ -30,126 +30,123 @@ const Radio = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     allowSymbol: false
   }));
   const formCheck = css`
-        display: block;
-        position: relative;
-        cursor: pointer;
-        user-select: none;
-        &.disabled {
-            pointer-events: none;
-        }
-        width: max-content;
-    `;
+                display: block;
+                position: relative;
+                cursor: pointer;
+                user-select: none;
+                &.disabled {
+                    pointer-events: none;
+                }
+                width: max-content;
+            `;
   const formCheckInput = css`
-        display: none;
-        position: absolute;
-        box-sizing: border-box;
-        &:disabled + label {
-            pointer-events: none;
-        }
-        &:checked + label::after {
-            background-color: ${theme.colors.primary};
-            border: 1px solid ${theme.colors.primary};
-            transform: scale(.5);
-            z-index: 0;
-            -webkit-transform: scale(.6);
-            -ms-transform: scale(.6);
-        }
-        &:checked + label::before {
-            border: 1px solid ${theme.colors.primary};
-        }
-        &:not(:checked) + label:hover::after,
-        &:not(:checked) + label:hover::before {
-            background: ${theme.colors.hover};
-            border: 1px solid ${theme.colors.primary};
-        }
-        &:not(:checked) + label::after,
-        &:not(:checked) + label::before {
-            background-color: white;
-            border: 1px solid ${theme.colors.border};
-        }
-        &:checked:disabled + label::after{
-            pointer-events: none;
-            cursor: not-allowed;
-            background: ${theme.colors.disabled};
-            border: 1px solid ${theme.colors.disabled};
-        }
-        &:checked:disabled + label::before{
-            pointer-events: none;
-            cursor: not-allowed;
-            background: ${theme.colors.dark12};
-            border: 1px solid ${theme.colors.disabled};
-        }
-        &:not(:checked):disabled + label::after{
-            pointer-events: none;
-            cursor: not-allowed;
-            background:${theme.colors.dark12};
-            border: 1px solid ${theme.colors.disabled};
-        }
-        &:not(:checked):disabled + label::before{
-            pointer-events: none;
-            cursor: not-allowed;
-            background: ${theme.colors.dark12};
-            border: 1px solid ${theme.colors.disabled};
-        }
-        
-    `;
+                display: none;
+                position: absolute;
+                box-sizing: border-box;
+                &:disabled + label {
+                    pointer-events: none;
+                }
+                &:checked + label::after {
+                    background-color: ${theme.colors.primary};
+                    border: 1px solid ${theme.colors.primary};
+                    transform: scale(0.5);
+                    z-index: 0;
+                    -webkit-transform: scale(0.6);
+                    -ms-transform: scale(0.6);
+                }
+                &:checked + label::before {
+                    border: 1px solid ${theme.colors.primary};
+                }
+                &:not(:checked) + label:hover::after,
+                &:not(:checked) + label:hover::before {
+                    background: ${theme.colors.hover};
+                    border: 1px solid ${theme.colors.primary};
+                }
+                &:not(:checked) + label::after,
+                &:not(:checked) + label::before {
+                    background-color: white;
+                    border: 1px solid ${theme.colors.border};
+                }
+                &:checked:disabled + label::after {
+                    pointer-events: none;
+                    cursor: not-allowed;
+                    background: ${theme.colors.disabled};
+                    border: 1px solid ${theme.colors.disabled};
+                }
+                &:checked:disabled + label::before {
+                    pointer-events: none;
+                    cursor: not-allowed;
+                    background: ${theme.colors.dark12};
+                    border: 1px solid ${theme.colors.disabled};
+                }
+                &:not(:checked):disabled + label::after {
+                    pointer-events: none;
+                    cursor: not-allowed;
+                    background: ${theme.colors.dark12};
+                    border: 1px solid ${theme.colors.disabled};
+                }
+                &:not(:checked):disabled + label::before {
+                    pointer-events: none;
+                    cursor: not-allowed;
+                    background: ${theme.colors.dark12};
+                    border: 1px solid ${theme.colors.disabled};
+                }
+            `;
   const formCheckLabel = css`
-        display: block;
-        cursor: pointer;
-        position: relative;
-        padding-left: 2.19rem;
-        ${typography.paragraph1};
-        margin-bottom: 0;
-        transition: .28s ease;
-        -o-transition: .28s ease;
-        -webkit-transition: .28s ease;
-        &::after {
-            box-sizing: border-box;
-            content: "";
-            position: absolute;
-            height: 18px;
-            left: 0;
-            margin: 2px;
-            transition: .28s ease;
-            top: 0;
-            width: 18px;
-            z-index: 0;
-            border-radius: 50%;
-            -webkit-transition: .28s ease;
-        }
-        &::before {
-            box-sizing: border-box;
-            content: "";
-            position: absolute;
-            height: 18px;
-            left: 0;
-            margin: 2px;
-            transition: .28s ease;
-            top: 0;
-            width: 18px;
-            z-index: 0;
-            border-radius: 50%;
-            -webkit-transition: .28s ease;
-        }
-        &:hover::after{
-            background: ${theme.colors.hover};
-            border: 1px solid ${theme.colors.primary};
-        }
-        &:hover::before{
-            background: ${theme.colors.hover};
-            border: 1px solid ${theme.colors.primary};
-        }
-        &:hover::after {
-			box-shadow:
-                0 0 2px 2px ${theme.colors.focus};
-			background-color:${theme.colors.focus};
-		}
-        &:hover::before {
-			box-shadow:
-                0 0 2px 2px ${theme.colors.focus};
-			background-color:${theme.colors.focus};
-		}
-    `;
+                display: block;
+                cursor: pointer;
+                position: relative;
+                padding-left: 2.19rem;
+                ${typography.paragraph1};
+                margin-bottom: 0;
+                transition: 0.28s ease;
+                -o-transition: 0.28s ease;
+                -webkit-transition: 0.28s ease;
+                &::after {
+                    box-sizing: border-box;
+                    content: '';
+                    position: absolute;
+                    height: 18px;
+                    left: 0;
+                    margin: 2px;
+                    transition: 0.28s ease;
+                    top: 0;
+                    width: 18px;
+                    z-index: 0;
+                    border-radius: 50%;
+                    -webkit-transition: 0.28s ease;
+                }
+                &::before {
+                    box-sizing: border-box;
+                    content: '';
+                    position: absolute;
+                    height: 18px;
+                    left: 0;
+                    margin: 2px;
+                    transition: 0.28s ease;
+                    top: 0;
+                    width: 18px;
+                    z-index: 0;
+                    border-radius: 50%;
+                    -webkit-transition: 0.28s ease;
+                }
+                &:hover::after {
+                    background: ${theme.colors.hover};
+                    border: 1px solid ${theme.colors.primary};
+                }
+                &:hover::before {
+                    background: ${theme.colors.hover};
+                    border: 1px solid ${theme.colors.primary};
+                }
+                &:hover::after {
+                    box-shadow: 0 0 2px 2px ${theme.colors.focus};
+                    background-color: ${theme.colors.focus};
+                }
+                &:hover::before {
+                    box-shadow: 0 0 2px 2px ${theme.colors.focus};
+                    background-color: ${theme.colors.focus};
+                }
+            `;
 
   const handleChange = e => {
     const el = { ...e
@@ -197,11 +194,11 @@ const Radio = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     defaultChecked: defaultChecked,
     css: formCheckInput,
     id: id || unique,
-    onChange: !!onChange ? handleChange : null
+    onChange: onChange ? handleChange : null
   }), jsx("label", {
     css: formCheckLabel,
     htmlFor: id || unique
-  }, " ", label || value));
+  }, ' ', label || value));
 }));
 Radio.defaultProps = {
   disabled: false,
@@ -211,18 +208,18 @@ Radio.defaultProps = {
   className: ''
 };
 Radio.propTypes = {
-  /** 
-   * If `true`, the component is disabled.
+  /**
+   * If `true`, the component is disabled.
    */
   disabled: PropTypes.bool,
 
-  /** 
-  * If `true`, the component is checked. 
-  */
+  /**
+   * If `true`, the component is checked.
+   */
   checked: PropTypes.bool,
 
-  /** 
-   * If `true`, the component is defaultChecked.
+  /**
+   * If `true`, the component is defaultChecked.
    */
   defaultChecked: PropTypes.bool,
 
@@ -244,11 +241,11 @@ Radio.propTypes = {
   /** props for input */
   inputProps: PropTypes.object,
 
-  /** Callback fired when the state is changed.
-   *
-   * @param {object} event The event source of the callback.
-   * You can pull out the new value by accessing `event.target.value` (string).
-   * You can pull out the new checked state by accessing `event.target.checked` (boolean).
+  /** Callback fired when the state is changed.
+   *
+   * @param {object} event The event source of the callback.
+   * You can pull out the new value by accessing `event.target.value` (string).
+   * You can pull out the new checked state by accessing `event.target.checked` (boolean).
    *  */
   onChange: PropTypes.func
 };