linear-react-components-ui 1.1.21-beta.3 → 1.1.21-beta.5

package/lib/form/index.js

@@ -68,7 +68,8 @@ const Form = _ref => {
     skeletonize,
     disabled,
     children,
-    useInternalState = false
+    useInternalState = false,
+    onValidateErrorsOnTab
   } = _ref;
   const formId = (0, _uuid.v1)();
   const [data, setData] = (0, _react.useState)(dataSource);
@@ -80,6 +81,7 @@ const Form = _ref => {
   const context = (0, _react.useContext)(_withFormSecurity.FormSecurityContext);
   const formRef = (0, _react.useRef)(null);
   const fieldsValidators = (0, _react.useRef)({});
+  const tabsWithErrorRef = (0, _react.useRef)([]);
   const usedData = useInternalState ? data : dataSource;
   const getValidatesErrorMessages = (validators, fieldValue) => {
     const validatorsArray = !(validators instanceof Array) ? [validators] : validators;
@@ -94,7 +96,7 @@ const Form = _ref => {
   };
   const getErrorMessages = (currentData, currentValidators) => {
     const dataValidate = currentData || usedData;
-    let currentFieldErrors = _lodash.default.pickBy(fieldErrors, (error, fieldName) => {
+    let currentFieldErrors = _lodash.default.pickBy(fieldErrors, (__, fieldName) => {
       const fieldValidatorsNames = Object.keys(currentValidators);
       return fieldValidatorsNames.includes(fieldName);
     });
@@ -183,6 +185,23 @@ const Form = _ref => {
     event.preventDefault();
     if (_lodash.default.isEqual(usedData, originalData)) return;
   };
+  const onValidateTabErrors = (0, _react.useCallback)(props => {
+    if (!props.tabId) return;
+    const tabIndex = [...tabsWithErrorRef.current].findIndex(tab => tab.name === props.name);
+    if (tabIndex !== -1) {
+      const novasTabs = [...tabsWithErrorRef.current];
+      novasTabs[tabIndex] = props;
+      tabsWithErrorRef.current = [...novasTabs];
+    } else {
+      tabsWithErrorRef.current = [...tabsWithErrorRef.current, props];
+    }
+    if (onValidateErrorsOnTab) {
+      const tabIdsWithErrors = _lodash.default.uniq(_lodash.default.compact(tabsWithErrorRef.current.map(tab => {
+        if (tab.hasErrors) return String(tab.tabId);
+      })));
+      onValidateErrorsOnTab(tabIdsWithErrors);
+    }
+  }, [onValidateErrorsOnTab]);
   const formProps = () => {
     let propsForm = null;
     if (!disabled) {
@@ -213,7 +232,9 @@ const Form = _ref => {
     if (onDataChange && useInternalState) onDataChange(usedData);
 
     // TODO - Usar debounce para evitar chamada a cada letra digitada
-    if (onValidateForm) onValidateForm(checkIsValid(usedData, true));
+    if (onValidateForm) {
+      onValidateForm(checkIsValid(usedData, true));
+    }
     if (!disabled) {
       handlerSubmit(onFormSubmit);
       if (handlerReset) handlerReset(onReset);
@@ -229,10 +250,13 @@ const Form = _ref => {
   }, [JSON.stringify(dataSource), useInternalState]);
   (0, _react.useEffect)(() => {
     if (securityBeforeUnload) {
-      if (context) context.setSecurityBeforeUnload(true);
+      if (Object.entries(context).length) context.setSecurityBeforeUnload(true);
       window.addEventListener('beforeunload', onBeforeUnload);
     }
-    return () => window.removeEventListener('beforeunload', onBeforeUnload);
+    return () => {
+      if (securityBeforeUnload && Object.entries(context).length) context.setSecurityBeforeUnload(false);
+      window.removeEventListener('beforeunload', onBeforeUnload);
+    };
   }, [securityBeforeUnload, onBeforeUnload]);
   (0, _react.useEffect)(() => {
     if (!disabled && submitOnPressEnterKey !== submitFormOnEnter) {
@@ -250,6 +274,7 @@ const Form = _ref => {
     skeletonize,
     handlerFieldChange: onFieldChange,
     handlerFieldValidate: onValidate,
+    handleValidationErrorsOnTab: onValidateTabErrors,
     handlerStoreValidators: (fieldName, fieldValidates) => {
       fieldsValidators.current = _objectSpread(_objectSpread({}, fieldsValidators.current), {}, {
         [fieldName]: fieldValidates

package/lib/form/types.d.ts

@@ -19,6 +19,11 @@ type OnFielChangeEvent = Event & {
 type CustomKeyboardEvent = ChangeEvent<HTMLInputElement> & {
     keyCode: number;
 };
+type PropsValidateTabErrors = {
+    name: string;
+    tabId?: string | number;
+    hasErrors: boolean;
+};
 type BaseFormProps = {
     dataSource: object;
     children: ReactNode;
@@ -27,6 +32,7 @@ type BaseFormProps = {
     handlerReset?: (value: () => void) => void;
     handlerValidates?: (value: any) => void;
     onValidateForm?: (value: boolean) => void;
+    onValidateErrorsOnTab?: (tabIds: Array<string | number>) => void;
     submitOnPressEnterKey?: boolean;
     style?: CSSProperties;
     customClass?: string;
@@ -95,6 +101,8 @@ interface IFieldProps extends WithFieldProps {
     disabled?: boolean;
     currencySymbol?: string;
     checked?: boolean;
+    tabId?: string | number;
+    handleValidationErrorsOnTab?: (props: PropsValidateTabErrors) => void;
 }
 interface CustomEvent {
     target: {
@@ -135,6 +143,7 @@ interface IFieldArrayProps extends WithFieldProps {
     hintPosition?: 'below' | 'onLabelRight';
     themePopover?: 'light' | 'dark';
     popoverAlign?: 'right' | 'left';
+    tabId?: string | number;
 }
 type PeriodChangeEvent = {
     initial: string;
@@ -172,6 +181,7 @@ interface IFieldPeriodProps extends WithFieldProps {
     hintPosition?: 'below' | 'onLabelRight';
     themePopover?: 'light' | 'dark';
     popoverAlign?: 'right' | 'left';
+    tabId?: string | number;
 }
 interface FormContextProps {
     skeletonize?: boolean;
@@ -184,6 +194,7 @@ interface FormContextProps {
     fieldErrors: object;
     externalFieldErrors?: object;
     isFormValid?: boolean;
+    handleValidationErrorsOnTab?: (props: PropsValidateTabErrors) => void;
 }
 interface WithFieldProps {
     name: string;
@@ -192,6 +203,7 @@ interface WithFieldProps {
     handlerRemoveValidators?: (name: string) => void;
     validators?: Validator | Validator[] | PeriodValidator | PeriodValidator[];
     customClass?: string;
+    handleValidationErrorsOnTab?: (props: PropsValidateTabErrors) => void;
 }
 interface IWithFieldContext {
     validatorFromComponent: Validator | Validator[] | undefined;
@@ -240,4 +252,4 @@ type FieldValidator = {
     [name: string]: Validator | Validator[];
 };
 
-export { CustomEvent, CustomKeyboardEvent, FieldErrors, FieldValidator, FormContextProps, FormProps, IEventParams, IFieldArrayProps, IFieldPeriodProps, IFieldProps, IFormSecurityContext, IGetErrorMessagesParams, IWithFieldContext, IWithFormSecurity, OnFielChangeEvent, PeriodChangeEvent, PeriodValidator, Validator, WithFieldProps };
+export { CustomEvent, CustomKeyboardEvent, FieldErrors, FieldValidator, FormContextProps, FormProps, IEventParams, IFieldArrayProps, IFieldPeriodProps, IFieldProps, IFormSecurityContext, IGetErrorMessagesParams, IWithFieldContext, IWithFormSecurity, OnFielChangeEvent, PeriodChangeEvent, PeriodValidator, PropsValidateTabErrors, Validator, WithFieldProps };

package/lib/form/withFieldHOC.js

@@ -51,7 +51,8 @@ const withFieldHOC = WrappedComponent => {
         externalFieldErrors,
         handlerStoreValidators,
         handlerRemoveValidators,
-        skeletonize
+        skeletonize,
+        handleValidationErrorsOnTab
       } = _ref;
       return /*#__PURE__*/_react.default.createElement(EnhancedComponent, _extends({}, props, {
         skeletonize: skeletonize,
@@ -62,7 +63,8 @@ const withFieldHOC = WrappedComponent => {
         data: data,
         fieldErrors: fieldErrors,
         externalFieldErrors: externalFieldErrors,
-        forwardedRef: ref
+        forwardedRef: ref,
+        handleValidationErrorsOnTab: handleValidationErrorsOnTab
       }));
     });
   }

package/lib/inputs/base/InputTextBase.js

@@ -28,6 +28,7 @@ const InputTextBase = props => {
   const {
     textAlign = 'left',
     value,
+    defaultValue,
     type = 'text',
     readOnly = false,
     placeHolder,
@@ -72,7 +73,8 @@ const InputTextBase = props => {
     readOnlyClass,
     autoComplete = 'on',
     themePopover = 'light',
-    popoverAlign = 'left'
+    popoverAlign = 'left',
+    tabIndex
   } = props;
   let propsInput;
   const options = [_permissionValidations.OPTIONS_ON_DENIED.disabled, _permissionValidations.OPTIONS_ON_DENIED.unvisible, _permissionValidations.OPTIONS_ON_DENIED.readOnly, _permissionValidations.OPTIONS_ON_DENIED.hideContent];
@@ -86,13 +88,18 @@ const InputTextBase = props => {
   (0, _react.useEffect)(() => {
     if (handlerSetOnDenied) handlerSetOnDenied(onDenied);
   }, []);
-  const applyTabIndex = () => readOnly ? -1 : 0;
+  const applyTabIndex = () => {
+    if (readOnly) return -1;
+    if (tabIndex) return tabIndex;
+    return 0;
+  };
   const shouldDisable = () => disabled || onDenied.disabled;
   const shouldBeReadOnly = () => readOnly || onDenied.readOnly;
   const inputProps = () => {
     const disableCallbacks = shouldBeReadOnly() || shouldDisable() || hideContent;
     propsInput = {
       value: hideContent ? '' : value,
+      defaultValue,
       accept,
       type,
       readOnly: shouldBeReadOnly(),

package/lib/inputs/base/types.d.ts

@@ -95,6 +95,8 @@ interface IBaseProps {
     autoComplete?: 'on' | 'off';
     themePopover?: 'light' | 'dark';
     popoverAlign?: 'right' | 'left';
+    tabIndex?: number;
+    defaultValue?: string | string[];
 }
 
 export { CustomInputEvent, IBaseProps, InputLabelProps };

package/lib/inputs/date/Dialog.js

@@ -14,12 +14,13 @@ const Dialog = _ref => {
     dialogSize
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_base.default, {
+    closeOnEsc: true,
+    closeOnOutsideClick: true,
+    handlerClose: () => handlerClose(false),
+    wrapperClassName: "",
     width: dialogSize.width,
     height: dialogSize.height,
-    onOpenChange: handlerClose,
-    closeOnOutsideClick: true,
-    closeOnEsc: true,
-    wrapperClassName: ""
+    onOpenChange: handlerClose
   }, children);
 };
 var _default = exports.default = Dialog;

package/lib/inputs/date/Dropdown.js

@@ -6,26 +6,32 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = require("react");
 var _reactDom = _interopRequireDefault(require("react-dom"));
-var _helpers = require("./helpers");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const body = document.getElementsByTagName('body')[0];
+const CALENDAR_BUTTON_WIDTH = 24;
+const CALENDAR_MIN_WIDTH = 250;
 const Dropdown = props => {
   const {
+    containerRef,
+    showButtonOpen,
     dropdownRef,
-    children
+    children,
+    inputDimensions
   } = props;
   const elementRef = (0, _react.useRef)(document.createElement('div'));
+  const width = inputDimensions && inputDimensions.width + (showButtonOpen ? CALENDAR_BUTTON_WIDTH : 0) + 4 || CALENDAR_MIN_WIDTH;
   (0, _react.useEffect)(() => {
     elementRef.current.className = 'datepicker-component';
-    elementRef.current.setAttribute('style', (0, _helpers.getCalendarDropdownStyle)(props));
-    body.appendChild(elementRef.current);
+    elementRef.current.style.width = String(width).concat('px');
+    elementRef.current.style.top = String(inputDimensions?.bottom).concat('px');
+    containerRef.current?.appendChild(elementRef.current);
     dropdownRef(elementRef.current);
     return () => {
-      body.removeChild(elementRef.current);
+      containerRef.current?.removeChild(elementRef.current);
     };
   }, []);
   (0, _react.useEffect)(() => {
-    elementRef.current.setAttribute('style', (0, _helpers.getCalendarDropdownStyle)(props));
+    elementRef.current.style.width = String(width).concat('px');
+    elementRef.current.style.top = String(inputDimensions?.bottom).concat('px');
   }, [props]);
   return /*#__PURE__*/_reactDom.default.createPortal(children, elementRef.current);
 };

package/lib/inputs/date/helpers.d.ts

@@ -1,17 +1,37 @@
+import * as imask from 'imask';
 import moment from 'moment';
-import { IDateDropdownProps } from './types.js';
-import 'react';
-import '../../@types/ColorStyles.js';
-import '../../@types/PermissionAttr.js';
-import '../base/types.js';
-import '../../@types/Align.js';
-import '../../@types/Period.js';
-import '../../internals/types.js';
-import '../../@types/Position.js';
 
 declare const PT_BR_FORMAT = "DD/MM/YYYY";
+declare const PT_BR_FORMAT_DATETIME = "DD/MM/YYYY HH:mm";
 declare const EN_US_FORMAT = "YYYY-MM-DD";
-declare const getCalendarDropdownStyle: ({ topPosition, leftPosition, width, minWidth, }: IDateDropdownProps) => string;
+declare const EN_US_FORMAT_DATETIME = "YYYY-MM-DD HH.mm";
 declare const getMomentValue: (value: string) => moment.Moment;
+declare const blocksDateTimeFormat: {
+    DD: {
+        mask: typeof imask.MaskedRange;
+        from: number;
+        to: number;
+    };
+    MM: {
+        mask: typeof imask.MaskedRange;
+        from: number;
+        to: number;
+    };
+    YYYY: {
+        mask: typeof imask.MaskedRange;
+        from: number;
+        to: number;
+    };
+    HH: {
+        mask: typeof imask.MaskedRange;
+        from: number;
+        to: number;
+    };
+    mm: {
+        mask: typeof imask.MaskedRange;
+        from: number;
+        to: number;
+    };
+};
 
-export { EN_US_FORMAT, PT_BR_FORMAT, getCalendarDropdownStyle, getMomentValue };
+export { EN_US_FORMAT, EN_US_FORMAT_DATETIME, PT_BR_FORMAT, PT_BR_FORMAT_DATETIME, blocksDateTimeFormat, getMomentValue };

package/lib/inputs/date/helpers.js

@@ -3,24 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getMomentValue = exports.getCalendarDropdownStyle = exports.PT_BR_FORMAT = exports.EN_US_FORMAT = void 0;
+exports.getMomentValue = exports.blocksDateTimeFormat = exports.PT_BR_FORMAT_DATETIME = exports.PT_BR_FORMAT = exports.EN_US_FORMAT_DATETIME = exports.EN_US_FORMAT = void 0;
 var _moment = _interopRequireDefault(require("moment"));
+var _reactImask = require("react-imask");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const PT_BR_FORMAT = exports.PT_BR_FORMAT = 'DD/MM/YYYY';
+const PT_BR_FORMAT_DATETIME = exports.PT_BR_FORMAT_DATETIME = 'DD/MM/YYYY HH:mm';
 const EN_US_FORMAT = exports.EN_US_FORMAT = 'YYYY-MM-DD';
-const getCalendarDropdownStyle = _ref => {
-  let {
-    topPosition,
-    leftPosition,
-    width,
-    minWidth
-  } = _ref;
-  return `top: ${topPosition}px;
-  left: ${leftPosition}px;
-  width: ${width}px;
-  min-width: ${minWidth}px;`;
-};
-exports.getCalendarDropdownStyle = getCalendarDropdownStyle;
+const EN_US_FORMAT_DATETIME = exports.EN_US_FORMAT_DATETIME = 'YYYY-MM-DD HH.mm';
 const getMomentValue = value => {
   let newValue = value;
   if ((0, _moment.default)(newValue, PT_BR_FORMAT, true).isValid()) {
@@ -28,4 +18,31 @@ const getMomentValue = value => {
   }
   return typeof newValue === 'string' ? (0, _moment.default)(newValue, EN_US_FORMAT) : newValue;
 };
-exports.getMomentValue = getMomentValue;
+exports.getMomentValue = getMomentValue;
+const blocksDateTimeFormat = exports.blocksDateTimeFormat = {
+  DD: {
+    mask: _reactImask.IMask.MaskedRange,
+    from: 1,
+    to: 31
+  },
+  MM: {
+    mask: _reactImask.IMask.MaskedRange,
+    from: 1,
+    to: 12
+  },
+  YYYY: {
+    mask: _reactImask.IMask.MaskedRange,
+    from: 1900,
+    to: 2999
+  },
+  HH: {
+    mask: _reactImask.IMask.MaskedRange,
+    from: 0,
+    to: 23
+  },
+  mm: {
+    mask: _reactImask.IMask.MaskedRange,
+    from: 0,
+    to: 59
+  }
+};