linear-react-components-ui 1.1.7 → 1.1.9

package/lib/inputs/period/index.js

@@ -93,19 +93,6 @@ const PeriodPicker = props => {
       document.removeEventListener('keydown', onCloseCalendarWithoutFocus);
     };
   }, []);
-  (0, _react.useEffect)(() => {
-    if (valueFinal && valueInitial && (0, _moment.default)(valueFinal).isBefore((0, _moment.default)(valueInitial))) {
-      setValueInitial(valueFinal);
-      setValueFinal(valueInitial);
-    } else if (props.onChange) {
-      const initial = valueInitial ? valueInitial.format('YYYY-MM-DD') : '';
-      const final = valueFinal ? valueFinal.format('YYYY-MM-DD') : '';
-      props.onChange(undefined, '', {
-        initial,
-        final
-      });
-    }
-  }, [valueInitial, valueFinal]);
   (0, _react.useEffect)(() => {
     if (props.value && !((0, _moment.default)(props.value.initial).isSame(valueInitial) || (0, _moment.default)(props.value.final).isSame(valueFinal))) {
       const {
@@ -161,6 +148,16 @@ const PeriodPicker = props => {
       }
     }
   };
+  const onDateChange = date => {
+    if (props.onChange) {
+      const initial = date.initial ? date.initial.format('YYYY-MM-DD') : '';
+      const final = date.final ? date.final.format('YYYY-MM-DD') : '';
+      props.onChange(undefined, '', {
+        initial,
+        final
+      });
+    }
+  };
   const setValue = function (event, value) {
     var _inputInitialRef$curr, _inputFinalRef$curren;
     let shouldOpenDropdown = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
@@ -168,10 +165,32 @@ const PeriodPicker = props => {
     const dateObj = (0, _moment.default)(value, 'DD/MM/YYYY');
     if (showCalendarValueInitial) (_inputInitialRef$curr = inputInitialRef.current) === null || _inputInitialRef$curr === void 0 ? void 0 : _inputInitialRef$curr.focus();
     if (showCalendarValueFinal) (_inputFinalRef$curren = inputFinalRef.current) === null || _inputFinalRef$curren === void 0 ? void 0 : _inputFinalRef$curren.focus();
-    if (valueDateName === 'valueInitial') {
+    if (valueDateName === 'valueFinal' && valueInitial && dateObj.isBefore(valueInitial)) {
+      setValueInitial(dateObj);
+      setValueFinal(valueInitial);
+      onDateChange({
+        initial: dateObj,
+        final: valueInitial
+      });
+    } else if (valueDateName === 'valueInitial' && valueFinal && dateObj.isAfter(valueFinal)) {
+      setValueInitial(valueFinal);
+      setValueFinal(dateObj);
+      onDateChange({
+        initial: valueFinal,
+        final: dateObj
+      });
+    } else if (valueDateName === 'valueInitial') {
       setValueInitial(dateObj);
+      onDateChange({
+        initial: dateObj,
+        final: valueFinal
+      });
     } else {
       setValueFinal(dateObj);
+      onDateChange({
+        initial: valueInitial,
+        final: dateObj
+      });
     }
     if (valueDateName === 'valueInitial' && !valueFinal && shouldOpenDropdown) {
       var _inputFinalRef$curren2;
@@ -239,11 +258,13 @@ const PeriodPicker = props => {
   });
   const getCalendar = (value, calendarColorStyleCalendar, valueDateName) => /*#__PURE__*/_react.default.createElement(_calendar.default, {
     currentDate: value !== undefined ? (0, _moment.default)(value) : (0, _moment.default)(),
-    onDateChange: date => setValue({
-      target: {
-        name: valueDateName
-      }
-    }, date),
+    onDateChange: date => {
+      setValue({
+        target: {
+          name: valueDateName
+        }
+      }, date);
+    },
     colorStyle: calendarColorStyleCalendar
   });
   const setPeriodDates = (selected, dates) => {
@@ -337,12 +358,11 @@ const PeriodPicker = props => {
     name: "valueInitial",
     value: !valueInitial ? '' : (0, _moment.default)(valueInitial).format('DD/MM/YYYY'),
     mask: "00/00/0000",
-    onComplete: (e, date) => {
-      setValue(e, date, true);
+    onComplete: e => {
+      setValue(e, e.target.value, true);
     },
     onFocus: onInputFocus,
     onBlur: e => onInputBlur(e),
-    isDateField: true,
     onChange: onInputChange,
     inputRef: el => {
       inputInitialRef.current = el;
@@ -359,9 +379,8 @@ const PeriodPicker = props => {
     name: "valueFinal",
     value: !valueFinal ? '' : (0, _moment.default)(valueFinal).format('DD/MM/YYYY'),
     mask: "00/00/0000",
-    isDateField: true,
-    onComplete: (e, date) => {
-      setValue(e, date, true);
+    onComplete: e => {
+      setValue(e, e.target.value, true);
     },
     onFocus: onInputFocus,
     onBlur: e => onInputBlur(e),

package/lib/inputs/search/index.d.ts

@@ -1,6 +1,5 @@
 import { ISearchProps } from '../types.js';
 import 'react';
-import 'imask';
 import '../../@types/PermissionAttr.js';
 import '../../@types/DataCombo.js';
 import '../base/types.js';

package/lib/inputs/select/ActionButtons.d.ts

@@ -1,6 +1,5 @@
 import { IActionButtonsSelectProps } from '../types.js';
 import 'react';
-import 'imask';
 import '../../@types/PermissionAttr.js';
 import '../../@types/DataCombo.js';
 import '../base/types.js';

package/lib/inputs/select/Dropdown.d.ts

@@ -1,6 +1,5 @@
 import { IDropdownSelectProps } from '../types.js';
 import 'react';
-import 'imask';
 import '../../@types/PermissionAttr.js';
 import '../../@types/DataCombo.js';
 import '../base/types.js';

package/lib/inputs/select/helper.d.ts

@@ -1,7 +1,6 @@
 import { IDropdownSelectProps } from '../types.js';
 import { GetSimpleFilteredParams, GetMultipleFilteredParams } from './types.js';
 import 'react';
-import 'imask';
 import '../../@types/PermissionAttr.js';
 import '../../@types/DataCombo.js';
 import '../base/types.js';

package/lib/inputs/types.d.ts

@@ -1,5 +1,4 @@
 import { ReactNode, MouseEvent, MutableRefObject, CSSProperties, KeyboardEvent, ReactElement } from 'react';
-import IMask from 'imask';
 import { PermissionAttr, OnDenied } from '../@types/PermissionAttr.js';
 import { DataCombo } from '../@types/DataCombo.js';
 import { IBaseProps, CustomInputEvent } from './base/types.js';
@@ -64,7 +63,7 @@ interface IMaskHOCProps {
     inputRef?: MutableRefObject<HTMLInputElement | HTMLTextAreaElement | null> | ((ref: HTMLInputElement | HTMLTextAreaElement | null) => void);
     placeholderChar?: string;
     lazy?: boolean;
-    definitions?: IMask.AllMaskedOptions['definitions'];
+    definitions?: any;
     groups?: object;
     pattern?: string;
     format?: () => void;
@@ -99,7 +98,7 @@ interface IMaskHOCProps {
     rounded?: boolean;
     errorMessages?: string[];
     skeletonize?: boolean;
-    mask?: IMask.AnyMask;
+    mask?: any;
     isDateField?: boolean;
     autoCompleteMask?: 'left' | 'right';
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "linear-react-components-ui",
-  "version": "1.1.7",
+  "version": "1.1.9",
   "description": "Linear Sistemas ReactJs Components",
   "main": "lib/index.js",
   "module": "lib/index.cjs",
@@ -46,12 +46,12 @@
     "browserslist": "4.23.0",
     "esbuild": "0.21.5",
     "history": "5.0.0",
-    "imask": "6.4.3",
     "init": "0.1.2",
     "lodash": "4.17.21",
     "moment": "2.30.1",
     "prop-types": "15.8.1",
     "react-dev-utils": "12.0.0",
+    "react-imask": "^7.6.1",
     "react-router-dom": "6.21.3",
     "react-syntax-highlighter": "15.5.0",
     "semver": "7.5.4",

package/lib/inputs/mask/imaskHOC.d.ts

@@ -1,20 +0,0 @@
-import React__default from 'react';
-import { IMaskHOCProps } from '../types.js';
-import 'imask';
-import '../../@types/PermissionAttr.js';
-import '../../@types/DataCombo.js';
-import '../base/types.js';
-import '../../@types/Align.js';
-import '../../@types/Period.js';
-import '../../internals/types.js';
-import '../../@types/Position.js';
-import '../../drawer/types.js';
-import '../../@types/Icon.js';
-import '../../icons/helper.js';
-
-declare const IMaskHOC: <ComponentProps extends IMaskHOCProps>(ComposedComponent: React__default.ComponentType<ComponentProps>) => {
-    (props: ComponentProps): JSX.Element;
-    displayName: string;
-};
-
-export { IMaskHOC as default };

package/lib/inputs/mask/imaskHOC.js

@@ -1,205 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _imask = _interopRequireDefault(require("imask"));
-var helpers = _interopRequireWildcard(require("./helpers"));
-var _permissionValidations = require("../../permissionValidations");
-var _format_number = require("../number/format_number");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
-const options = [_permissionValidations.OPTIONS_ON_DENIED.disabled, _permissionValidations.OPTIONS_ON_DENIED.unvisible, _permissionValidations.OPTIONS_ON_DENIED.readOnly, _permissionValidations.OPTIONS_ON_DENIED.hideContent];
-const IMaskHOC = ComposedComponent => {
-  const MaskedComponent = props => {
-    const {
-      permissionAttr,
-      skeletonize,
-      inputRef,
-      placeholderChar = '_',
-      lazy = false,
-      pattern = '',
-      radix = ' ',
-      thousandsSeparator = '',
-      mapToRadix = [],
-      scale = 2,
-      signed = false,
-      normalizeZeros = true,
-      padFractionalZeros = true,
-      mask,
-      commit = () => {},
-      parse,
-      format,
-      definitions,
-      groups,
-      min,
-      max,
-      dispatch,
-      value = '',
-      onChange,
-      isDateField = false,
-      autoCompleteMask
-    } = props;
-    const maskOptions = {
-      placeholderChar: placeholderChar === '' ? ' ' : placeholderChar,
-      lazy,
-      pattern,
-      radix,
-      thousandsSeparator,
-      mapToRadix,
-      scale,
-      signed,
-      normalizeZeros,
-      padFractionalZeros,
-      mask,
-      commit,
-      parse,
-      format,
-      definitions,
-      groups,
-      min,
-      max,
-      dispatch
-    };
-    const [onDenied] = (0, _react.useState)((0, _permissionValidations.actionsOnPermissionDenied)(options, permissionAttr));
-    const elementRef = (0, _react.useRef)(null);
-    const maskRef = (0, _react.useRef)(null);
-    const {
-      hideContent,
-      unvisible,
-      disabled,
-      readOnly
-    } = onDenied;
-    const dontInitMask = hideContent || unvisible || skeletonize;
-    const disableCallbacks = disabled || readOnly;
-    const setValue = newValue => {
-      if (maskRef.current) {
-        if (props.unmask) maskRef.current.unmaskedValue = newValue.toString();
-        maskRef.current.value = String(newValue);
-      }
-    };
-    const onAccept = (0, _react.useCallback)(() => {
-      if (onChange && !disableCallbacks && maskRef.current) {
-        const {
-          unmaskedValue,
-          value: maskedValue,
-          el
-        } = maskRef.current;
-        const name = el.name || el.input && el.input.name;
-        onChange({
-          target: {
-            value: isDateField ? maskedValue : unmaskedValue,
-            name
-          }
-        }, props.unmask ? unmaskedValue : maskRef.current.value);
-      }
-    }, [onChange]);
-    const onComplete = (0, _react.useCallback)(() => {
-      if (props.onComplete && !disableCallbacks && maskRef.current) {
-        const {
-          unmaskedValue,
-          value: maskedValue,
-          el
-        } = maskRef.current;
-        const name = el.name || el.input && el.input.name;
-        props.onComplete({
-          target: {
-            value: isDateField ? maskedValue : unmaskedValue,
-            name
-          }
-        }, props.unmask ? unmaskedValue : maskRef.current.value);
-      }
-    }, [props.onComplete]);
-    const autoCompleteMaskValue = (0, _react.useCallback)(eventTargetValue => {
-      if (autoCompleteMask && eventTargetValue.length && maskRef.current && elementRef.current) {
-        const sizeMask = maskRef.current.mask.toString().replace(/\D+/g, '').length;
-        if (sizeMask > eventTargetValue.length) {
-          switch (autoCompleteMask) {
-            case 'left':
-              setValue(eventTargetValue.padStart(sizeMask, '0'));
-              break;
-            case 'right':
-              setValue(eventTargetValue.padEnd(sizeMask, '0'));
-              break;
-            default:
-              setValue(eventTargetValue);
-              break;
-          }
-        }
-      }
-    }, [autoCompleteMask, maskRef.current, elementRef.current]);
-    const getMask = () => {
-      const element = elementRef.current;
-      if (element) {
-        const maskCurrent = maskRef.current;
-        if (!maskCurrent) {
-          maskRef.current = (0, _imask.default)(element, maskOptions);
-          if (value && typeof value !== 'number' && value.trim() !== '' || value && typeof value === 'number') onAccept();
-          setValue(value);
-        } else {
-          maskCurrent.updateOptions(maskOptions);
-        }
-      }
-    };
-    const destroyMask = () => {
-      if (maskRef.current) {
-        maskRef.current.destroy();
-        maskRef.current = null;
-      }
-    };
-    (0, _react.useEffect)(() => {
-      if (props.handlerSetOnDenied) props.handlerSetOnDenied(onDenied);
-      if (!props.mask || dontInitMask) return;
-      getMask();
-    }, [maskOptions]);
-    (0, _react.useEffect)(() => {
-      if (!maskRef.current) return;
-      const maskCurrent = maskRef.current;
-      maskCurrent.on('accept', onAccept);
-      maskCurrent.on('complete', onComplete);
-
-      // eslint-disable-next-line consistent-return
-      return () => {
-        maskCurrent.off('accept', onAccept);
-        maskCurrent.off('complete', onComplete);
-      };
-    }, [onAccept, onComplete]);
-    (0, _react.useEffect)(() => {
-      if (maskOptions.mask && !dontInitMask) {
-        if (maskRef.current) {
-          const formattedValue = isDateField ? value : (0, _format_number.numberToPtBR)(value) || '';
-          setValue(formattedValue);
-        } else {
-          getMask();
-        }
-      } else if (!dontInitMask) {
-        destroyMask();
-        if (value && elementRef.current) elementRef.current.value = value;
-      }
-    }, [value, isDateField]);
-    (0, _react.useEffect)(() => destroyMask, []);
-    return /*#__PURE__*/_react.default.createElement(ComposedComponent, _extends({}, helpers.extractNonMaskProps(props, maskOptions), {
-      onDeniedActions: onDenied,
-      defaultValue: value,
-      onBlur: e => {
-        autoCompleteMaskValue(e.target.value);
-        if (props.onBlur) props.onBlur(e);
-      },
-      onChange: e => setValue(e.target.value),
-      inputRef: el => {
-        elementRef.current = el;
-        if (inputRef) {
-          if (typeof inputRef === 'object') inputRef.current = el;else inputRef(el);
-        }
-      }
-    }));
-  };
-  const nestedComponentName = ComposedComponent.displayName || ComposedComponent.name || 'Component';
-  MaskedComponent.displayName = "IMask(".concat(nestedComponentName, ")");
-  return MaskedComponent;
-};
-var _default = exports.default = IMaskHOC;