@onesy/ui-react/esm/AdvancedTextField/AdvancedTextField.js

UI for React

import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
const _excluded = ["ref", "valueDefault", "value", "validate", "prefix", "mask", "maskProactive", "thousand", "thousandSeparator", "onChange", "TextFieldProps", "className"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React from 'react';
import { is, numberWithCommas, Try } from '@onesy/utils';
import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
import TextFieldElement from '../TextField';
import { staticClassName } from '../utils';
import { jsx as _jsx } from "react/jsx-runtime";
const useStyle = styleMethod(theme => ({
  root: {}
}), {
  name: 'onesy-AdvancedTextField'
});
const AdvancedTextField = props_ => {
  const theme = useOnesyTheme();
  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyAdvancedTextField?.props?.default), props_);
  const TextField = theme?.elements?.TextField || TextFieldElement;
  const {
      ref,
      valueDefault,
      value: value_,
      validate,
      prefix,
      mask,
      maskProactive = true,
      thousand,
      thousandSeparator = '.',
      onChange: onChange_,
      TextFieldProps,
      className
    } = props,
    other = _objectWithoutProperties(props, _excluded);
  const [init, setInit] = React.useState(false);
  const [value, setValue] = React.useState(valueDefault !== undefined ? valueDefault : value_);
  const {
    classes
  } = useStyle();
  const refs = {
    root: React.useRef(undefined)
  };
  React.useEffect(() => {
    setInit(true);
  }, []);
  React.useEffect(() => {
    if (init) {
      if (value_ !== value) setValue(value_);
    }
  }, [value_]);
  const maskConstsFromIndex = index => {
    const values = [];
    for (const item of mask.slice(index)) {
      if (!is('simple', item)) break;
      values.push(item);
    }
    return values;
  };
  const onChange = value__ => {
    let valueNew = value__;

    // validate
    if (!(mask || thousand) && is('function', validate)) {
      try {
        if (!validate(valueNew)) return;
      } catch (error) {
        return;
      }
    }

    // thousand
    // clean value from prefix and thousand separator
    // make value into value with thousand separators
    // make valueNew with prefix + valueNew
    if (!['', ' ', '+', '-', prefix, `${prefix} `, `${prefix} `, `${prefix}+`, `${prefix}-`, undefined].includes(valueNew)) {
      if (thousand) {
        let previousValue = valueNew.replace(prefix, '').replace(new RegExp(`\\${thousandSeparator}`, 'g'), '');
        let addition = '';
        if (!is('number', +previousValue) || +previousValue >= Number.MAX_SAFE_INTEGER) return;
        if (is('function', validate)) {
          try {
            if (!validate(valueNew)) return;
          } catch (error_0) {
            return;
          }
        }
        const decimal = previousValue.includes('.');
        [previousValue, addition] = previousValue.split('.');
        valueNew = numberWithCommas(previousValue, thousandSeparator);
        valueNew = `${prefix !== undefined ? prefix : ''}${valueNew}${decimal ? '.' : ''}${addition !== undefined ? addition : ''}`;
      }
      // mask
      else if (is('array', mask)) {
        let previousValue_0 = valueNew.replace(prefix, '');
        previousValue_0 = (valueNew || '').split('').filter(Boolean);
        valueNew = '';

        // Update value based on mask value
        for (let i = 0; i < mask.length; i++) {
          if (!previousValue_0.length) break;

          // Constant
          if (is('string', mask[i])) {
            if (valueNew[i] !== mask[i]) valueNew += mask[i];
            if (previousValue_0[0] === mask[i]) previousValue_0.shift();
          } else {
            let added = false;
            if (is('function', mask[i])) {
              if (Try(() => mask[i](previousValue_0[0], valueNew, value__))) {
                valueNew += previousValue_0[0];
                added = true;
              }
            } else if (is('object', mask[i])) {
              const {
                pattern
              } = mask[i];
              if (new RegExp(pattern).test(previousValue_0[0])) {
                valueNew += previousValue_0[0];
                added = true;
              }
            }

            // Only if new values are added
            // do not use on removing values
            if (added && String(value__)?.length >= String(value)?.length && maskProactive) {
              const items = maskConstsFromIndex(i + 1);
              items.forEach(item_0 => valueNew += item_0);
            }
            previousValue_0.shift();
          }
        }
      }
    }

    // prefix
    if (prefix !== undefined) {
      if (['', ' ', prefix, `${prefix} `, undefined].includes(valueNew)) valueNew = '';else if (!valueNew.startsWith(prefix)) valueNew = `${prefix}${valueNew}`;
    }

    // Update inner or controlled
    if (!props.hasOwnProperty('value')) setValue(valueNew);
    if (is('function', onChange_)) onChange_(valueNew);
  };
  return /*#__PURE__*/_jsx(TextField, _objectSpread(_objectSpread({
    ref: item_1 => {
      if (ref) {
        if (is('function', ref)) ref(item_1);else ref.current = item_1;
      }
      refs.root.current = item_1;
    },
    value: value,
    onChange: onChange,
    controlled: true,
    className: classNames([staticClassName('AdvancedTextField', theme) && ['onesy-AdvancedTextField-root'], className, classes.root])
  }, other), TextFieldProps));
};
AdvancedTextField.displayName = 'onesy-AdvancedTextField';
export default AdvancedTextField;