diginet-core-ui 1.3.67 → 1.3.68

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

@@ -45,20 +45,24 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   onKeyDown,
   onKeyUp,
   delayOnChange,
+  autoWidth,
   ...props
 }, reference) => {
+  const _onChange = e => {
+    onChange && onChange(e);
+    dynamicWidth(e);
+  };
+
   const {
     bind
-  } = useInput({
-    defaultValue,
-    valueProp,
-    onChange,
-    onInput,
-    delayOnChange
-  });
+  } = useInput(defaultValue, valueProp, _onChange, onInput, delayOnChange);
+  if (!autoWidth && inputProps !== null && inputProps !== void 0 && inputProps.autoWidth) autoWidth = inputProps.autoWidth;
   if (!inputBaseRef) inputBaseRef = useRef(null);
   const ref = useRef(null);
   const valueArray = useRef([]);
+  const canvas = document.createElement('canvas');
+  const styleInputBase = useRef(null);
+  const widthInit = useRef(null);
   const isEnabled = !readOnly && !disabled;
   /* Start styled */
 
@@ -68,6 +72,7 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                 align-items: center;
                 position: relative;
                 height: max-content;
+                width: ${autoWidth ? 'max-content' : 'auto'};
                 &:hover,
                 &:focus-within {
                     .start-icon:not(.non-effect) {
@@ -231,9 +236,10 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                 flex: 1 1 auto;
             `;
   const inputCSS = css`
-                width: 100%;
+                width: ${autoWidth ? '10px' : '100%'};
                 border: none;
                 outline: none;
+                transition: all 0.1s;
                 color: ${colors.input};
                 background-color: transparent;
                 padding-top: 0;
@@ -507,6 +513,12 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       if (multiline && !/\d+/.test(rows)) {
         inputBaseRef.current.style.height = 0;
         inputBaseRef.current.style.height = Math.max(defaultHeight, inputBaseRef.current.scrollHeight) + 'px';
+      } else {
+        dynamicWidth({
+          target: {
+            value: valueProp
+          }
+        });
       }
     }
 
@@ -532,8 +544,27 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, [disabled]);
   /* End handler */
 
+  const saveInitInfo = refs => {
+    inputBaseRef.current = refs;
+    if (!autoWidth) return;
+    const style = window.getComputedStyle(refs) || refs.currentStyle;
+    if (!widthInit.current) widthInit.current = parseInt(style.width);
+    styleInputBase.current = style;
+  };
+
+  const dynamicWidth = e => {
+    if (!autoWidth || !inputBaseRef.current) return;
+    if (!canvas || !styleInputBase.current || !inputBaseRef.current) return;
+    const context = canvas.getContext('2d');
+    context.font = styleInputBase.current.font;
+    const {
+      width
+    } = context.measureText(e.target.value);
+    inputBaseRef.current.style.width = `${Math.max(width, widthInit.current)}px`;
+  };
   /* Start component */
 
+
   const newClass = (viewType === 'outlined' ? 'outlined' : 'underlined') + (nonStyle ? ' non-style' : '');
   const MultipleInputComp = jsx("div", {
     css: multilineCSS,
@@ -605,7 +636,10 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     readOnly: readOnly,
     style: inputStyle || (inputProps === null || inputProps === void 0 ? void 0 : inputProps.style),
     className: [newClass, inputProps === null || inputProps === void 0 ? void 0 : inputProps.className].join(' '),
-    ref: inputBaseRef,
+    ref: refs => {
+      if (!refs) return;
+      saveInitInfo(refs);
+    },
     css: inputCSS,
     onKeyDown: onKeyDown,
     onKeyUp: onKeyUp,
@@ -744,6 +778,9 @@ InputBase.propTypes = {
   inputRef: PropTypes.any,
 
   /** delayOnChange of InputBase component */
-  delayOnChange: PropTypes.number
+  delayOnChange: PropTypes.number,
+
+  /** autoWidth of TextInput component, don't run with multiline = true */
+  autoWidth: PropTypes.bool
 };
 export default InputBase;

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

@@ -123,6 +123,7 @@ const MoneyInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   convertToWords,
   prefix,
   suffix,
+  labelProps,
   ...props
 }, reference) => {
   const ref = useRef(null);
@@ -418,7 +419,7 @@ const MoneyInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     css: MoneyInputRoot,
     className: ['DGN-UI-Money-Input', className].join(' ').trim().replace(/\s+/g, ' '),
     ...props
-  }, !!label && jsx(Label, {
+  }, !!label && jsx(Label, { ...labelProps,
     required: required,
     disabled: disabled
   }, label), jsx(InputBase, {
@@ -581,6 +582,9 @@ MoneyInput.propTypes = {
   onFocus: PropTypes.func,
 
   /** inputRef of MoneyInput component */
-  inputRef: PropTypes.any
+  inputRef: PropTypes.any,
+
+  /**  [Props](https://core.diginet.com.vn/ui/?path=/docs/form-control-text-label) of label. */
+  labelProps: PropTypes.object
 };
 export default MoneyInput;

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

@@ -51,7 +51,9 @@ const NumberInput = /*#__PURE__*/forwardRef(({
   delayOnChange,
   fixedDecimalDigit,
   className,
-  maxDigit
+  maxDigit,
+  autoWidth,
+  labelProps
 }, reference) => {
   inputRef = inputRef || useRef(null);
   const pos = useRef(null);
@@ -156,7 +158,7 @@ const NumberInput = /*#__PURE__*/forwardRef(({
     let value = (_e$value = e.value) !== null && _e$value !== void 0 ? _e$value : e.target.value;
     if (fixedDecimalDigit) value = Number(value).toFixed(decimalDigit);
 
-    if (value && (typeof min !== 'undefined' || typeof max !== 'undefined')) {
+    if ((value || value === '' && typeof min !== 'undefined') && (typeof min !== 'undefined' || typeof max !== 'undefined')) {
       value = convertMoneyToNumber(value);
 
       if (Number(value) < min || Number(value) > max) {
@@ -269,7 +271,7 @@ const NumberInput = /*#__PURE__*/forwardRef(({
     ref: ref,
     css: NumberInputRoot,
     className: ['DGN-UI-NumberInput', className].join(' ').trim().replace(/\s+/g, ' ')
-  }, !!label && jsx(Label, {
+  }, !!label && jsx(Label, { ...labelProps,
     required: required,
     disabled: disabled
   }, label), jsx(InputBase, {
@@ -283,6 +285,7 @@ const NumberInput = /*#__PURE__*/forwardRef(({
     readOnly: readOnly,
     status: !!error || validateResult ? 'danger' : 'default',
     inputProps: inputProps,
+    autoWidth: autoWidth,
     inputStyle: inputStyle,
     startIcon: startIcon,
     endIcon: endIcon,
@@ -435,6 +438,12 @@ NumberInput.propTypes = {
   className: PropTypes.string,
 
   /** max character is number of NumberInput component */
-  maxDigit: PropTypes.number
+  maxDigit: PropTypes.number,
+
+  /** autoWidth of TextInput component, don't run with multiline = true */
+  autoWidth: PropTypes.bool,
+
+  /**  [Props](https://core.diginet.com.vn/ui/?path=/docs/form-control-text-label) of label. */
+  labelProps: PropTypes.object
 };
 export default NumberInput;

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

@@ -42,6 +42,7 @@ const PhoneInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   onInput,
   onKeyDown,
   onKeyUp,
+  labelProps,
   ...props
 }, reference) => {
   const ref = useRef(null);
@@ -295,7 +296,7 @@ const PhoneInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       marginBottom: '20px'
     },
     ...props
-  }, jsx(Label, {
+  }, jsx(Label, { ...labelProps,
     required: required,
     disabled: disabled
   }, label), jsx(InputBase, {
@@ -413,6 +414,9 @@ PhoneInput.propTypes = {
   onFocus: PropTypes.func,
 
   /** inputRef of PhoneInput component */
-  inputRef: PropTypes.any
+  inputRef: PropTypes.any,
+
+  /**  [Props](https://core.diginet.com.vn/ui/?path=/docs/form-control-text-label) of label. */
+  labelProps: PropTypes.object
 };
 export default PhoneInput;

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

@@ -66,6 +66,7 @@ const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   onKeyUp,
   onPaste,
   validates,
+  autoWidth,
   ...props
 }, reference) => {
   const ref = useRef(null);
@@ -244,11 +245,12 @@ const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   }, [error, value]);
   useEffect(() => {
-    if (placeholder !== undefined) {
+    if (placeholder !== undefined && inputRef.current) {
       inputRef.current.placeholder = placeholder;
     }
   }, [placeholder]);
   useEffect(() => {
+    if (!inputRef.current) return;
     inputRef.current.readOnly = !!readOnly;
 
     if (/^(quick)?Edit/i.test(type) && !multiline && readOnly) {
@@ -347,6 +349,7 @@ const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     disabled: disabled,
     readOnly: readOnly,
     multiline: multiline,
+    autoWidth: autoWidth,
     rows: rows,
     maxRows: maxRows,
     status: isError || validateResult ? 'danger' : 'default',
@@ -387,7 +390,8 @@ TextInput.defaultProps = {
   disabled: false,
   readOnly: false,
   multiline: false,
-  iconStyle: {}
+  iconStyle: {},
+  autoWidth: false
 };
 TextInput.propTypes = {
   /** type of input */
@@ -500,6 +504,12 @@ TextInput.propTypes = {
   validates: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.array, PropTypes.func]),
 
   /** inputRef of TextInput component */
-  inputRef: PropTypes.any
+  inputRef: PropTypes.any,
+
+  /** autoWidth of TextInput component, don't run with multiline = true */
+  autoWidth: PropTypes.bool,
+
+  /** If `true`, a textarea element is rendered. */
+  multiline: PropTypes.bool
 };
 export default TextInput;