diginet-core-ui 1.3.24

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

@@ -0,0 +1,73 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import { memo, useMemo, forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { jsx, css } from '@emotion/core';
+import { Typography } from '../../';
+import theme from '../../../theme/settings';
+const Label = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  required,
+  children,
+  disabled,
+  readOnly,
+  className,
+  ...props
+}, ref) => {
+  const LabelRootCSS = css`
+        margin: 0px;
+        font-weight: bold !important;
+        &.read-only,
+        &.disabled {
+            color: ${theme.colors.disabled};
+        }
+        .required {
+            color: ${theme.colors.danger};
+        }
+        & + .DGN-UI-InputBase.outlined {
+            margin-top: 2px;
+        }
+    `;
+  const LabelComp = useMemo(() => jsx(Typography, _extends({
+    type: 'p3',
+    color: theme.colors.label,
+    fullWidth: false
+  }, props, {
+    ref: ref,
+    mapping: 'label',
+    css: LabelRootCSS,
+    className: ['DGN-UI-Label', className, readOnly ? 'read-only' : '', disabled ? 'disabled' : ''].join(' ').trim()
+  }), children, required ? jsx("span", {
+    className: 'required'
+  }, " *") : null), [children, required, readOnly, disabled]);
+  return LabelComp;
+}));
+Label.defaultProps = {
+  required: false,
+  disabled: false,
+  readOnly: false,
+  className: '',
+  children: ''
+};
+Label.propTypes = {
+  /** prevent all event if true, hide all icon */
+  disabled: PropTypes.bool,
+
+  /** prevent all event if true */
+  readOnly: PropTypes.bool,
+
+  /** auto focus after first render */
+  required: PropTypes.bool,
+
+  /** class use for label tag */
+  className: PropTypes.string,
+
+  /** the content to display as label */
+  children: PropTypes.node,
+
+  /** any props else */
+  props: PropTypes.any
+};
+export default Label;

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

@@ -0,0 +1,491 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import { memo, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
+import PropTypes from 'prop-types';
+import { jsx, css } from '@emotion/core';
+import locale from '../../../locale';
+import { InputBase, Label, HelperText } from '../../';
+import { onValidate } from '../../../utils';
+const MoneyInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  viewType,
+  valueTypeReturn,
+  required,
+  disabledNegative,
+  nonStyle,
+  allowZero,
+  thousandSeparator,
+  decimalDigit,
+  className,
+  label,
+  defaultValue,
+  value,
+  placeholder,
+  startIcon,
+  endIcon,
+  autoComplete,
+  autoFocus,
+  disabled,
+  readOnly,
+  multiline,
+  onConfirm,
+  refs,
+  inputRef,
+  inputProps,
+  iconStyle,
+  inputStyle,
+  labelProps,
+  errorProps,
+  error,
+  onChange,
+  onBlur,
+  onFocus,
+  onInput,
+  onKeyDown,
+  onKeyUp,
+  validates,
+  ...props
+}, reference) => {
+  const ref = useRef(null);
+  const local = useRef({
+    isSpecialSymbol: false,
+    isDeleteDecimalSymbol: false,
+    isPaste: false,
+    clipboardText: ''
+  });
+
+  if (!inputRef) {
+    inputRef = useRef(null);
+  }
+
+  const separatorSymbol = typeof thousandSeparator === 'string' ? thousandSeparator : locale.get() === 'vi' ? '.' : ',';
+  const decimalSymbol = separatorSymbol === '.' ? ',' : '.';
+  const thousandSeparatorPattern = new RegExp(`[0-9]|Backspace|Delete|Arrow|Home|End|Tab${decimalDigit === 0 ? '' : '|\\' + decimalSymbol}${disabledNegative ? '' : '|\-'}`);
+  const isError = !!error && !value && value !== 0;
+  /* Start styled */
+
+  const MoneyInputRoot = css`
+        display: block;
+        position: relative;
+        margin-bottom: 20px;
+    `;
+  /* End styled */
+
+  /* Start handler */
+
+  const getThousandSeparator = number => {
+    let decimal;
+    [number, decimal = ''] = number.split(decimalSymbol);
+    if (!number || String(+number) === 'NaN') return number; // number = +number;
+    // return number.toLocaleString(separatorSymbol === '.' ? 'vi' : 'en');
+
+    return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, separatorSymbol) + (decimal ? decimalSymbol + decimal : '');
+  };
+
+  const getValueWithDecimal = v => {
+    if (v && typeof decimalDigit === 'number') {
+      let [number, decimal] = v.split(decimalSymbol);
+
+      if (decimal && decimal.length > decimalDigit) {
+        if (decimalDigit) {
+          decimal = decimal.slice(0, decimalDigit);
+          return number + decimalSymbol + decimal;
+        } else {
+          return number;
+        }
+      }
+    }
+
+    return v;
+  };
+
+  const isDeleteSymbol = v => {
+    const valueArr = v.split(separatorSymbol);
+
+    for (let i = 0; i < valueArr.length; i++) {
+      if (valueArr[i].length > 3) {
+        return true;
+      }
+    }
+
+    return false;
+  };
+
+  const onKeyDownHandler = e => {
+    e.stopPropagation();
+    const key = e.key;
+    const keyCode = e.keyCode;
+    const value = inputRef.current.value;
+    let cursor = inputRef.current.selectionStart;
+
+    if (key.charCodeAt(0) > 127) {
+      local.current.isSpecialSymbol = true;
+
+      if (local.current.currentKeyCode === 8) {
+        local.current.currentKeyCode = null;
+        inputRef.current.value = local.current.currentValue;
+      }
+
+      e.preventDefault();
+      return false;
+    }
+
+    if (!thousandSeparatorPattern.test(key) && !(/a|x|c|v/i.test(key) && e.ctrlKey)) {
+      local.current.currentKey = key;
+      local.current.currentKeyCode = keyCode;
+      e.preventDefault();
+      return false;
+    }
+
+    if (keyCode === 8) {
+      if (local.current.currentKeyCode === 231 || local.current.isSpecialSymbol) {
+        setTimeout(() => {
+          local.current.isSpecialSymbol = false;
+        }, 100);
+        e.preventDefault();
+        return false;
+      }
+
+      local.current.currentKeyCode = 8;
+      local.current.currentValue = value;
+    }
+
+    if (value.includes('-') && cursor === 0 && /[1-9]/.test(key)) {
+      inputRef.current.value = value.replace('-', `-${key}`);
+      inputRef.current.setSelectionRange(2, 2);
+      e.preventDefault();
+      return false;
+    }
+
+    if (key === '-' && (cursor !== 0 || value[0] === '-') || key === decimalSymbol && value.includes(key) || key === '0' && !allowZero && (cursor === 0 || cursor === 1 && value.includes('-'))) {
+      e.preventDefault();
+      return false;
+    }
+
+    if (/x/i.test(key)) {
+      local.current.clipboardText = window.getSelection().toString();
+    }
+
+    local.current.isSpecialSymbol = false;
+    local.current.isDeleteDecimalSymbol = key === 'Backspace' && value[cursor - 1] === decimalSymbol;
+    local.current.currentKey = key;
+    !!onKeyDown && onKeyDown(e);
+  };
+
+  const onPasteHandler = e => {
+    var _local$current$clipbo;
+
+    const value = e.target.value;
+    const existMinus = value.includes('-');
+    const pattern = new RegExp(`^${disabledNegative || existMinus ? '' : '-?'}(?:\\d{1,3}(?:,\\d{3})*|\\d+)(?:\\${decimalSymbol}\\d+)?$`, 'g');
+    local.current.clipboardText = (e.clipboardData || window.clipboardData).getData('text');
+    const decimalSymbolDigit = (_local$current$clipbo = local.current.clipboardText.match(new RegExp(decimalSymbol, 'g'))) === null || _local$current$clipbo === void 0 ? void 0 : _local$current$clipbo.length;
+    const selectionText = window.getSelection().toString(); // Only includes number and decimalSymbol
+
+    if (!pattern.test(local.current.clipboardText) || decimalSymbolDigit && value.includes(decimalSymbol) && !selectionText.includes(decimalSymbol)) {
+      e.preventDefault();
+      return;
+    }
+
+    local.current.isPaste = true;
+  };
+
+  const onChangeHandler = e => {
+    const value = e.target.value;
+
+    if (/[a-z]/i.test(value)) {
+      const length = value.match(/[a-z]/ig).length;
+      e.target.value = value.replace(/[a-z]/ig, '');
+
+      if (length === 1) {
+        const index = value.match(/[a-z]/i).index;
+        e.target.setSelectionRange(index, index);
+      }
+
+      return;
+    }
+
+    if (!value) {
+      e.value = null;
+      !!onChange && onChange(e);
+      e.value = undefined;
+      return;
+    }
+
+    let result = value;
+    let cursor = e.target.selectionStart;
+    const el = { ...e
+    }; // el.target = {...e.target}
+
+    const hasDecimal = result.includes(decimalSymbol);
+    let [number, decimal = ''] = result.split(decimalSymbol);
+
+    if (hasDecimal) {
+      if (typeof decimalDigit === 'number') {
+        decimal = decimal.replaceAll(separatorSymbol, '').substr(0, decimalDigit);
+      }
+
+      decimal = (hasDecimal ? decimalSymbol : '') + decimal;
+      result = number + decimal;
+    }
+
+    if (thousandSeparator && (thousandSeparatorPattern.test(local.current.currentKey) || local.current.isPaste || /x/i.test(local.current.currentKey))) {
+      const decimalSymbolIndex = result.indexOf(decimalSymbol);
+      number = number.replaceAll(separatorSymbol, '');
+
+      if (local.current.currentKey === decimalSymbol) {
+        cursor = number.length + Math.ceil(number.length / 3);
+      } else if (!isNaN(local.current.currentKey)) {
+        if ((decimalSymbolIndex === -1 || cursor <= decimalSymbolIndex) && number.length % 3 === 1) {
+          cursor++;
+        }
+      } else if (local.current.currentKey === 'Backspace') {
+        if (local.current.isDeleteDecimalSymbol) {
+          cursor++;
+        } else if (number.length % 3 === 0 && !isDeleteSymbol(value)) {
+          cursor--;
+        }
+      } else if (local.current.currentKey === 'Delete') {
+        if (isDeleteSymbol(value)) {
+          cursor++;
+        } else if (number.length % 3 === 0 && value[cursor] !== separatorSymbol) {
+          cursor--;
+        }
+      } else if (local.current.isPaste) {
+        var _result$slice$match, _local$current$clipbo2;
+
+        const simpleNumber = number + decimal;
+        const cursorBefore = cursor - local.current.clipboardText.length;
+        const cursorAfter = cursorBefore - (((_result$slice$match = result.slice(0, cursorBefore).match(new RegExp(`\\${separatorSymbol}`, 'g'))) === null || _result$slice$match === void 0 ? void 0 : _result$slice$match.length) || 0) + local.current.clipboardText.length;
+        const decimalSymbolIndex = (simpleNumber.indexOf(decimalSymbol) + 1 || number.length + 1) - 1;
+        const spaceQuantity = Math.floor((number.length - 1) / 3) - Math.floor(Math.max(0, decimalSymbolIndex - cursorAfter) / 3);
+        cursor = cursorAfter + spaceQuantity - (((_local$current$clipbo2 = local.current.clipboardText.match(new RegExp(`\\${separatorSymbol}`, 'g'))) === null || _local$current$clipbo2 === void 0 ? void 0 : _local$current$clipbo2.length) || 0);
+        local.current.isPaste = false;
+        local.current.clipboardText = '';
+      } else if (/x/i.test(local.current.currentKey)) {
+        cursor = cursor - +(Math.ceil(number.length / 3) !== Math.ceil((number.length + local.current.clipboardText.length) / 3));
+      }
+
+      result = number + decimal;
+      cursor = Math.max(0, cursor);
+      e.target.value = getThousandSeparator(number) + decimal;
+      e.target.setSelectionRange(cursor, cursor);
+    } else {
+      e.target.value = result;
+      e.target.setSelectionRange(cursor, cursor);
+    } // el.target.value = result;
+
+
+    if (valueTypeReturn === 'string') {
+      el.value = result;
+    } else {
+      el.value = String(+result.replace(',', '.')) !== 'NaN' ? +result.replace(',', '.') : result;
+    }
+
+    !!onChange && onChange(el);
+  };
+
+  useEffect(() => {
+    !!refs && refs(ref);
+
+    if (defaultValue !== undefined && defaultValue !== '') {
+      const v = getValueWithDecimal(defaultValue.toString().replace('.', decimalSymbol));
+      inputRef.current.value = thousandSeparator ? getThousandSeparator(v) : v;
+    }
+  }, []);
+  useEffect(() => {
+    if (placeholder !== undefined) {
+      inputRef.current.placeholder = placeholder;
+    }
+  }, [placeholder]);
+  useEffect(() => {
+    if (!isNaN(value)) {
+      if (value === null) {
+        inputRef.current.value = '';
+      } else {
+        const v = getValueWithDecimal(value.toString().replace('.', decimalSymbol));
+        inputRef.current.value = thousandSeparator ? getThousandSeparator(v) : v;
+      }
+    }
+  }, [value]);
+  useEffect(() => {
+    const valueInput = inputRef.current.value;
+    inputRef.current.value = getValueWithDecimal(valueInput);
+  }, [decimalDigit]);
+  /* End handler */
+
+  useImperativeHandle(reference, () => {
+    ref.current.getThousandSeparator = getThousandSeparator;
+    return ref.current;
+  });
+  const validateResult = validates && onValidate(value, validates, true);
+  return jsx("div", _extends({
+    ref: ref,
+    css: MoneyInputRoot,
+    className: ('DGN-UI-Money-Input ' + className).trim()
+  }, props), !!label && jsx(Label, {
+    required: required,
+    disabled: disabled
+  }, label), jsx(InputBase, {
+    inputRef: inputRef,
+    viewType: viewType,
+    defaultValue: defaultValue,
+    value: value,
+    placeholder: placeholder,
+    autoFocus: autoFocus,
+    disabled: disabled,
+    readOnly: readOnly,
+    multiline: multiline,
+    status: isError || validateResult ? 'danger' : 'default',
+    inputProps: inputProps,
+    inputStyle: inputStyle,
+    startIcon: startIcon,
+    endIcon: endIcon,
+    nonStyle: nonStyle,
+    onChange: onChangeHandler,
+    onBlur: onBlur,
+    onFocus: onFocus,
+    onInput: onInput,
+    onKeyDown: onKeyDownHandler,
+    onKeyUp: onKeyUp,
+    onPaste: onPasteHandler
+  }), isError && jsx(HelperText, {
+    disabled: disabled
+  }, error), !isError && validateResult && jsx(HelperText, {
+    disabled: disabled
+  }, validateResult));
+}));
+MoneyInput.defaultProps = {
+  viewType: 'underlined',
+  valueTypeReturn: 'number',
+  label: '',
+  placeholder: '',
+  className: '',
+  error: '',
+  startIcon: '',
+  endIcon: '',
+  required: false,
+  nonStyle: false,
+  autoFocus: false,
+  disabled: false,
+  readOnly: false,
+  multiline: false,
+  allowZero: false,
+  disabledNegative: false,
+  thousandSeparator: false,
+  inputProps: {}
+};
+MoneyInput.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']),
+
+  /** label for input */
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+
+  /** default value is displayed for first render */
+  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /** the displayed value for each change */
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /** number of decimal places allowed */
+  decimalDigit: PropTypes.number,
+
+  /** hints for input */
+  placeholder: PropTypes.string,
+
+  /** class of input */
+  className: PropTypes.string,
+
+  /** 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,
+
+  /** icon at end */
+  endIcon: PropTypes.any,
+
+  /** prevent all event if true, hide all icon */
+  disabled: PropTypes.bool,
+
+  /** transparent border color if true */
+  nonStyle: PropTypes.bool,
+
+  /** prevent all event if true */
+  readOnly: PropTypes.bool,
+
+  /** auto focus after first render */
+  autoFocus: PropTypes.bool,
+
+  /** allow enter number 0 */
+  allowZero: PropTypes.bool,
+
+  /** negative numbers are not allowed if true */
+  disabledNegative: PropTypes.bool,
+
+  /** allow thousand separator for number */
+  thousandSeparator: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+
+  /** At least one character is required */
+  required: PropTypes.bool,
+
+  /** props of input in MoneyInput component */
+  inputProps: PropTypes.object,
+
+  /** style inline of input in MoneyInput component */
+  inputStyle: PropTypes.object,
+
+  /** any props of label in MoneyInput component */
+  labelProps: PropTypes.object,
+
+  /** any props of error in MoneyInput component */
+  errorProps: PropTypes.object,
+
+  /** The function to get ref of MoneyInput 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/>
+   * * array: the validation rule list, insist object/string
+   */
+  validates: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.array, PropTypes.func]),
+
+  /** on key down function */
+  onKeyDown: PropTypes.func,
+
+  /** on key up function */
+  onKeyUp: PropTypes.func,
+
+  /** 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/>
+   * }
+   */
+  onChange: PropTypes.func,
+
+  /** on blur function */
+  onBlur: PropTypes.func,
+
+  /** on focus function */
+  onFocus: PropTypes.func,
+
+  /** inputRef of MoneyInput component */
+  inputRef: PropTypes.any
+};
+export default MoneyInput;