diginet-core-ui 1.3.69-beta.7 → 1.3.69-beta.9

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

@@ -541,8 +541,10 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       width: 'none'
     }
   }, jsx(InputBase, {
-    placeholder: placeholder,
-    ...inputProps,
+    inputProps: {
+      placeholder: !readOnly && !disabled ? placeholder : '',
+      ...inputProps
+    },
     ref: ipConRef,
     inputRef: ipRef,
     disabled: disabled,

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

@@ -8,6 +8,8 @@ import OptionWrapper from '../../others/option-wrapper';
 import { Typography } from '../../';
 import { flexRow } from '../../../styles/general';
 import theme from '../../../theme/settings';
+import { classNames } from '../../../utils';
+import { arrTypeTypography as typesTypography } from '../../typography';
 const {
   colors: {
     system: {
@@ -19,20 +21,21 @@ const {
     text: {
       normal_label
     }
-  }
+  },
+  spacing
 } = theme;
 const Label = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
+  children,
+  className,
+  color,
   disabled,
+  hoverTooltip,
+  id,
+  lineClamp,
   readOnly,
   required,
-  className,
-  children,
   type,
-  lineClamp,
-  hoverTooltip,
-  id,
-  color,
   ...props
 }, reference) => {
   const ref = useRef(null);
@@ -60,23 +63,24 @@ const Label = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     lineClamp: lineClamp,
     hoverTooltip: hoverTooltip,
     type: type,
-    className: ['DGN-UI-Label', className, readOnly ? 'read-only' : '', disabled ? 'disabled' : ''].join(' ').trim().replace(/\s+/g, ' '),
+    className: classNames('DGN-UI-Label', className, readOnly && 'read-only', disabled && 'disabled'),
     ...props
   }, children), required && jsx("span", {
     className: 'required'
-  }, " *")), [disabled, readOnly, required, className, children, type, lineClamp, hoverTooltip, color, props]);
+  }, " *")), [children, className, color, disabled, hoverTooltip, id, lineClamp, readOnly, required, type, props]);
 }));
 const LabelContainerCSS = css`
     ${flexRow};
     .required {
         color: ${danger};
     }
+    & + .DGN-UI-InputBase.outlined {
+        margin-top: ${spacing([0.5])};
+    }
 `;
 const LabelRootCSS = css`
     min-height: 16px;
-    & + .DGN-UI-InputBase.outlined {
-        margin-top: 2px;
-    }
+    margin: 0;
     word-break: break-all;
 `;
 Label.defaultProps = {
@@ -89,7 +93,6 @@ Label.defaultProps = {
   className: '',
   children: ''
 };
-const arrTypeTypography = ['t1', 't2', 't3', 't4', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p1', 'p2', 'p3', 'title1', 'title2', 'title3', 'title4', 'heading1', 'heading2', 'heading3', 'heading4', 'heading5', 'heading6', 'paragraph1', 'paragraph2', 'paragraph3'];
 Label.propTypes = {
   /** The content of the component. */
   children: PropTypes.node,
@@ -116,7 +119,7 @@ Label.propTypes = {
   hoverTooltip: PropTypes.bool,
 
   /** Consult [Typography's](https://core.diginet.com.vn/ui/?path=/docs/typography) documents. */
-  type: PropTypes.oneOf(arrTypeTypography)
+  type: PropTypes.oneOf(typesTypography)
 };
 export { Label };
 export default OptionWrapper(Label);

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

@@ -446,12 +446,10 @@ const MoneyInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     onKeyDown: onKeyDownHandler,
     onKeyUp: onKeyUp,
     onPaste: onPasteHandler
-  }), isError && jsx(HelperText, {
-    disabled: disabled,
-    ...helperTextProps
-  }, error), !isError && validateResult && jsx(HelperText, {
-    disabled: disabled,
-    ...helperTextProps
+  }), isError && jsx(HelperText, { ...helperTextProps,
+    disabled: disabled
+  }, error), !isError && validateResult && jsx(HelperText, { ...helperTextProps,
+    disabled: disabled
   }, validateResult));
 }));
 const MoneyInputRoot = css`
@@ -552,10 +550,10 @@ MoneyInput.propTypes = {
   /** style inline of input in MoneyInput component */
   inputStyle: 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]),
 
@@ -568,13 +566,13 @@ MoneyInput.propTypes = {
   /** on input function */
   onInput: PropTypes.func,
 
-  /**
-   * on change function, return an object:<br/>
-   * {<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;value: is a number or null value<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;target.value: value of input<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;...element<br/>
-   * }
+  /**
+   * on change function, return an object:<br/>
+   * {<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;value: is a number or null value<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;target.value: value of input<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;...element<br/>
+   * }
    */
   onChange: PropTypes.func,
 

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

@@ -53,7 +53,8 @@ const NumberInput = /*#__PURE__*/forwardRef(({
   className,
   maxDigit,
   autoWidth,
-  labelProps
+  labelProps,
+  helperTextProps
 }, reference) => {
   inputRef = inputRef || useRef(null);
   const pos = useRef(null);
@@ -79,13 +80,13 @@ const NumberInput = /*#__PURE__*/forwardRef(({
   const clamp = (num, min, max) => Math.min(Math.max(num, min), max);
 
   if (valueProps || valueProps === 0) valueProps = clamp(valueProps, min, max);
-  /**
-   * Convert number to format money
-   * @param vl {number} - value
-   * @type {function(*): number}
-   * @return {string}
-   * @example 1200300.123 => 1,200,300.123
-   * @example 1200300,123 => 1.200.300,123
+  /**
+   * Convert number to format money
+   * @param vl {number} - value
+   * @type {function(*): number}
+   * @return {string}
+   * @example 1200300.123 => 1,200,300.123
+   * @example 1200300,123 => 1.200.300,123
    */
 
   const parseNumberToMoney = useCallback((vl, isNumber) => {
@@ -119,13 +120,13 @@ const NumberInput = /*#__PURE__*/forwardRef(({
 
     return number;
   }, [decimalSymbol, max, value]);
-  /**
-   * Convert money to format number
-   * @param vl {string} - value
-   * @type {function(*): number}
-   * @return {number}
-   * @example 1,200,300.123 => 1200300.123
-   * @example 1.200.300,123 => 1200300.123
+  /**
+   * Convert money to format number
+   * @param vl {string} - value
+   * @type {function(*): number}
+   * @return {number}
+   * @example 1,200,300.123 => 1200300.123
+   * @example 1.200.300,123 => 1200300.123
    */
 
   const convertMoneyToNumber = useCallback((vl, isNumber) => {
@@ -305,9 +306,9 @@ const NumberInput = /*#__PURE__*/forwardRef(({
       });
     },
     onBlur: e => _onBlur(e)
-  }), !!error && jsx(HelperText, {
+  }), !!error && jsx(HelperText, { ...helperTextProps,
     disabled: disabled
-  }, error), !error && validateResult && jsx(HelperText, {
+  }, error), !error && validateResult && jsx(HelperText, { ...helperTextProps,
     disabled: disabled
   }, validateResult));
 });
@@ -397,10 +398,10 @@ NumberInput.propTypes = {
   /** style inline of input in NumberInput component */
   inputStyle: 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]),
 
@@ -444,6 +445,9 @@ NumberInput.propTypes = {
   autoWidth: PropTypes.bool,
 
   /**  [Props](https://core.diginet.com.vn/ui/?path=/docs/form-control-text-label) of label. */
-  labelProps: PropTypes.object
+  labelProps: PropTypes.object,
+
+  /**  [Props](https://core.diginet.com.vn/ui/?path=/story/form-control-text-helpertext) of helper text. */
+  helperTextProps: PropTypes.object
 };
 export default NumberInput;

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

@@ -43,6 +43,7 @@ const PhoneInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   onKeyDown,
   onKeyUp,
   labelProps,
+  helperTextProps,
   ...props
 }, reference) => {
   const ref = useRef(null);
@@ -324,7 +325,7 @@ const PhoneInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     startIconProps: {
       className: 'non-effect'
     }
-  }), !!error && jsx(HelperText, {
+  }), !!error && jsx(HelperText, { ...helperTextProps,
     disabled: disabled
   }, error));
 }));
@@ -397,13 +398,13 @@ PhoneInput.propTypes = {
   /** on input function */
   onInput: PropTypes.func,
 
-  /**
-   * on change function. Return a object, example:<br/>
-   * {<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;target: {value: "(+84) 123 456 789", ...}<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;value: 0123456789<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;countryCode: 84<br/>
-   * }
+  /**
+   * on change function. Return a object, example:<br/>
+   * {<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;target: {value: "(+84) 123 456 789", ...}<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;value: 0123456789<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;countryCode: 84<br/>
+   * }
    */
   onChange: PropTypes.func,
 
@@ -417,6 +418,9 @@ PhoneInput.propTypes = {
   inputRef: PropTypes.any,
 
   /**  [Props](https://core.diginet.com.vn/ui/?path=/docs/form-control-text-label) of label. */
-  labelProps: PropTypes.object
+  labelProps: PropTypes.object,
+
+  /**  [Props](https://core.diginet.com.vn/ui/?path=/story/form-control-text-helpertext) of helper text. */
+  helperTextProps: PropTypes.object
 };
 export default PhoneInput;

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

@@ -17,6 +17,7 @@ const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   endIcon,
   endIconProps,
   error,
+  helperTextProps,
   icon,
   iconStyle,
   inputProps,
@@ -276,10 +277,10 @@ const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     onKeyUp: onKeyUp,
     onPaste: onPaste,
     value: valueProp
-  }), isError && jsx(HelperText, {
+  }), isError && jsx(HelperText, { ...helperTextProps,
     disabled: disabled,
     status: status
-  }, error), !isError && validateResult && jsx(HelperText, {
+  }, error), !isError && validateResult && jsx(HelperText, { ...helperTextProps,
     disabled: disabled
   }, validateResult));
 }));
@@ -354,6 +355,9 @@ TextInput.propTypes = {
   /** Error displayed below input. */
   error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
 
+  /**  [Props](https://core.diginet.com.vn/ui/?path=/story/form-control-text-helpertext) of helper text. */
+  helperTextProps: PropTypes.object,
+
   /** Icon element display in the end of input (only use for type is inform, if not, use startIcon instead). */
   icon: PropTypes.any,
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.3.69-beta.7",
+  "version": "1.3.69-beta.9",
   "description": "",
   "main": "index.js",
   "license": "UNLICENSED",