diginet-core-ui 1.3.35-beta.6 → 1.3.35-beta.7

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

@@ -1856,6 +1856,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     ref.current.allNewAttached = allNewAttached;
     ref.current.attached = attached;
     ref.current.clear = clearAllAttached;
+    ref.current.openFileDialog = triggerClickInput;
     return ref.current;
   });
   return jsx("div", { ...props,

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

@@ -1,7 +1,7 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { useState, useRef, forwardRef, useMemo, useCallback, useEffect } from 'react';
+import { useState, useRef, forwardRef, useMemo, useCallback, useEffect, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import locale from '../../../locale';
@@ -16,6 +16,7 @@ const NumberInputRoot = css`
     margin-bottom: 20px;
 `;
 const regexValidNumber = /[^0-9.,-]/g;
+const regexThousandNumber = /(\d)(?=(\d{3})+\b)/g;
 const NumberInput = /*#__PURE__*/forwardRef(({
   viewType,
   required,
@@ -33,22 +34,14 @@ const NumberInput = /*#__PURE__*/forwardRef(({
   placeholder,
   startIcon,
   endIcon,
-  valueTypeReturn,
-  autoComplete,
   autoFocus,
   disabled,
   readOnly,
-  refs,
   inputRef,
   inputProps,
-  iconStyle,
   inputStyle,
-  labelProps,
-  errorProps,
   error,
-  format,
   onChange,
-  onBlur,
   onFocus,
   onInput,
   onKeyDown,
@@ -56,13 +49,15 @@ const NumberInput = /*#__PURE__*/forwardRef(({
   validates,
   delayOnChange,
   fixedDecimalDigit,
-  ...props
+  className
 }, reference) => {
   inputRef = inputRef || useRef(null);
   const pos = useRef(null);
   const ref = useRef(null);
   const globalRef = useRef({});
-  const [value, setValue] = useState(defaultValue);
+  const [value, setValue] = useState(defaultValue); // nếu không cho nhập số âm mà max là âm thì remove giá trị max
+
+  if (max < 0 && disabledNegative) max = null;
 
   if (thousandSymbol) {
     thousandSymbol = useMemo(() => {
@@ -109,7 +104,7 @@ const NumberInput = /*#__PURE__*/forwardRef(({
       pos.current = 2;
     }
 
-    number[0] = (_number2 = number) === null || _number2 === void 0 ? void 0 : _number2[0].replace(/(\d)(?=(\d{3})+\b)/g, '$1' + thousandSymbol); // add thousand symbol to number
+    number[0] = (_number2 = number) === null || _number2 === void 0 ? void 0 : _number2[0].replace(regexThousandNumber, '$1' + thousandSymbol); // add thousand symbol to number
 
     if (!decimalDigit) number.length = 1;else if (number[1]) number[1] = (_number$ = number[1]) === null || _number$ === void 0 ? void 0 : _number$.slice(0, decimalDigit || 0);
     number = number.join(decimalSymbol); // keep focus position
@@ -121,7 +116,7 @@ const NumberInput = /*#__PURE__*/forwardRef(({
     }
 
     return number;
-  }, [decimalSymbol, value]);
+  }, [decimalSymbol, max, value]);
   /**
    * Convert money to format number
    * @param vl {string} - value
@@ -145,6 +140,7 @@ const NumberInput = /*#__PURE__*/forwardRef(({
     var _e$target$value;
 
     let valueT = (_e$target$value = e.target.value) !== null && _e$target$value !== void 0 ? _e$target$value : e.value;
+    if (disabledNegative && Number(valueT || 0) < 0) return;
     valueT = parseNumberToMoney(valueT);
     const returnValue = convertMoneyToNumber(valueT);
     e.value = globalRef.current.value = !isNaN(parseFloat(returnValue)) ? parseFloat(returnValue) : null;
@@ -253,12 +249,25 @@ const NumberInput = /*#__PURE__*/forwardRef(({
   useEffect(() => {
     var _valueProps;
 
-    if (typeof valueProps !== 'undefined') setValue(parseNumberToMoney((_valueProps = valueProps) === null || _valueProps === void 0 ? void 0 : _valueProps.toString().replace(regexValidNumber, ''), true));
+    if (typeof valueProps !== 'undefined') if (disabledNegative && Number(valueProps || 0) < 0) {
+      // nếu không cho nhập số âm mà value đầu vào là âm thì reset value về 0
+      valueProps = clamp(0, min, max);
+    }
+    setValue(parseNumberToMoney((_valueProps = valueProps) === null || _valueProps === void 0 ? void 0 : _valueProps.toString().replace(regexValidNumber, ''), true));
   }, [valueProps]);
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    const _instance = {}; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
   return jsx("div", {
     ref: ref,
     css: NumberInputRoot,
-    ...props
+    className: ['DGN-UI-NumberInput', className].join(' ').trim().replace(/\s+/g, ' ')
   }, !!label && jsx(Label, {
     required: required,
     disabled: disabled
@@ -316,15 +325,13 @@ NumberInput.defaultProps = {
   decimalDigit: 0,
   thousandSeparator: false,
   min: -Infinity,
-  max: Infinity
+  max: Infinity,
+  className: ''
 };
 NumberInput.propTypes = {
   /** the type of border you want to display */
   viewType: PropTypes.oneOf(['underlined', 'outlined']),
 
-  /** the type of value which you want to return */
-  valueTypeReturn: PropTypes.oneOf(['number', 'string']),
-
   /** separator symbol */
   decimalSymbol: PropTypes.oneOf([',', '.']),
 
@@ -355,9 +362,6 @@ NumberInput.propTypes = {
   /** error for input */
   error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
 
-  /** type auto complete of input (like new-password) */
-  autoComplete: PropTypes.string,
-
   /** icon at start */
   startIcon: PropTypes.any,
 
@@ -388,25 +392,6 @@ NumberInput.propTypes = {
   /** style inline of input in NumberInput component */
   inputStyle: PropTypes.object,
 
-  /** any props of label in NumberInput component */
-  labelProps: PropTypes.object,
-
-  /** any props of error in NumberInput component */
-  errorProps: PropTypes.object,
-
-  /**
-   * the format to display value<br/>
-   * * function: value => function(value)<br/>
-   * * string: Example: '#.###', '# ###', '#.### 2%', '#.### %%'<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;#: integer part digit<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;. / '_': separator symbol<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;%: decimal digit, '2%' === '%%'
-   */
-  format: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-
-  /** The function to get ref of NumberInput component */
-  refs: PropTypes.func,
-
   /** 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/>
@@ -426,9 +411,6 @@ NumberInput.propTypes = {
   /** on change function */
   onChange: PropTypes.func,
 
-  /** on blur function */
-  onBlur: PropTypes.func,
-
   /** on focus function */
   onFocus: PropTypes.func,
 
@@ -442,6 +424,9 @@ NumberInput.propTypes = {
   delayOnChange: PropTypes.number,
 
   /** inputRef of delayOnChange component */
-  thousandSeparator: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['.', ','])])
+  thousandSeparator: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['.', ','])]),
+
+  /** className of component */
+  className: PropTypes.string
 };
 export default NumberInput;

package/components/modal/header.js

@@ -1,102 +1,100 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { memo, useMemo, useEffect, useContext, useRef, forwardRef } from 'react';
+import { memo, useMemo, useContext, useRef, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import ModalContext from './context';
-import { brand22 } from '../../styles/colors';
 import { ButtonIcon, Typography } from '../';
+import { alignCenter, borderBox, flexRow, justifyBetween, positionRelative } from '../../styles/general';
+import { color as colors } from '../../styles/colors';
+const {
+  fill: {
+    headerbar
+  }
+} = colors;
 const ModalHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   title,
   className,
   children,
   style,
-  refs,
-  ...props
-}, ref) => {
-  if (!ref) {
-    ref = useRef(null);
-  }
-
+  showClose
+}, reference) => {
   const modal = useContext(ModalContext);
-  const ModalHeaderBox = css`
-        display: flex;
-        position: relative;
-        background-color: ${brand22};
-        width: 100%;
-        height: 56px;
-        padding: 16px 24px;
-        margin-bottom: 2px;
-        align-items: center;
-        justify-content: space-between;
-        border-radius: 4px 4px 0px 0px;
-        box-sizing: border-box;
-        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
-        cursor: ${modal.onMoveModal ? 'move' : 'inherit'};
-        order: 1;
-    `;
-  const HeaderTitle = css`
-        display: flex;
-        position: relative;
-        align-items: center;
-        width: calc(100% - 40px);
-    `;
-  const ClearIconBox = css`
-        display: flex;
-        position: relative;
-        width: 24px;
-        height: 24px;
-        justify-content: center;
-        align-items: center;
-        margin-left: 16px;
-    `;
-  useEffect(() => {
-    !!refs && refs(ref);
-  }, []);
-  const Header = useMemo(() => jsx("div", {
-    css: ModalHeaderBox,
-    className: 'DGN-UI-Modal-Header ' + className,
-    ...props,
+  const ref = useRef(null);
+
+  const _ModalHeaderCSS = ModalHeaderCSS(modal);
+
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    const _instance = {}; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
+  return useMemo(() => jsx("div", {
+    css: _ModalHeaderCSS,
+    className: ['DGN-UI-Modal-Header', className].join(' ').trim().replace(/\s+/g, ' '),
     style: style,
     onMouseDown: modal.onMoveModal,
     ref: ref
-  }, jsx("div", {
-    css: HeaderTitle
   }, jsx(Typography, {
     type: 'h3',
     style: {
       whiteSpace: 'nowrap',
       overflow: 'hidden',
-      textOverflow: 'ellipsis'
+      textOverflow: 'ellipsis',
+      width: '100%'
     }
-  }, children ? children : title)), jsx("div", {
-    css: ClearIconBox
-  }, jsx(ButtonIcon, {
+  }, children ? children : title), showClose && jsx(ButtonIcon, {
     viewType: 'ghost',
-    name: 'close',
+    name: 'Close',
+    style: {
+      marginLeft: 16
+    },
     onClick: modal.close
-  }))), [children, title, style]);
-  return Header;
+  })), [children, title, style, className, showClose]);
 }));
+
+const ModalHeaderCSS = modal => css`
+    ${flexRow};
+    ${positionRelative};
+    ${justifyBetween};
+    ${alignCenter};
+    ${borderBox};
+    background-color: ${headerbar};
+    width: 100%;
+    height: 56px;
+    padding: 16px 24px;
+    margin-bottom: 2px;
+    border-radius: 4px 4px 0px 0px;
+    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
+    cursor: ${modal.onMoveModal ? 'move' : 'inherit'};
+    order: 1;
+`;
+
 ModalHeader.defaultProps = {
   title: '',
-  className: ''
+  className: '',
+  style: {},
+  showClose: true
 };
 ModalHeader.propTypes = {
-  /** customize style inline */
+  /**  style inline of component */
   style: PropTypes.object,
 
-  /** class of ModalHeader */
+  /** class for component */
   className: PropTypes.string,
 
-  /** get modal header ref by function */
-  refs: PropTypes.func,
+  /** content for header (not work when have children) */
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 
-  /** title for header */
-  title: PropTypes.node,
+  /** content in header (priority) */
+  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 
-  /** child content in header (like title) */
-  children: PropTypes.node
+  /** show close modal button */
+  showClose: PropTypes.bool
 };
 export default ModalHeader;

package/package.json

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