linear-react-components-ui 1.0.10-rc.8 → 1.0.10

package/.gitlab-ci.yml

@@ -4,7 +4,7 @@ stages:
 
 lint:
   stage: lint
-  image: node:12.17
+  image: node:14.21.3
   before_script:
     - npm install
   script:
@@ -12,7 +12,7 @@ lint:
 
 units:
   stage: tests-units
-  image: node:12.17
+  image: node:14.21.3
   before_script:
     - npm install
   script:

package/.vscode/settings.json

@@ -10,5 +10,8 @@
   },
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true 
-  }
+  },
+  "cSpell.words": [
+    "licenca"
+  ]
 }

package/lib/assets/styles/file.scss

@@ -1,5 +1,7 @@
 @import "colors.scss";
 @import "effects";
+@import "commons.scss";
+
 ::-webkit-file-upload-button {
     display: none;
 }
@@ -55,6 +57,11 @@
         background-color: #d1f0d7;
         border-color: $success-border-color;
       }
+      > img {
+        width: 50%;
+        object-fit: cover;
+        height: 150px;
+      }
       > label {
         width: 100%;
         display: flex;
@@ -144,6 +151,16 @@
       }
     }
   }
+  > .errormessages {
+    width: 100%;
+    color: red;
+    font-size: 13px!important;
+    line-height: 13px;
+    margin-top: 3px;
+  }
+  > .-skeletonized {
+    height: 180px !important;
+  }
 }
 
 .input-simple-file-container {
@@ -166,6 +183,13 @@
       opacity: 0.5;
     }
   }
+  > .errormessages {
+    width: 100%;
+    color: red;
+    font-size: 13px!important;
+    line-height: 13px;
+    margin-top: 3px;
+  }
 }
 
 .popovercontainer{
@@ -189,3 +213,12 @@
       }
   }
 }
+
+.-skeletonized {
+  @extend %skeleton-component;
+  color: transparent !important;
+  text-shadow: none;
+  box-shadow: none;
+  border-color: transparent !important;
+  transition: none;
+}

package/lib/assets/styles/panel.scss

@@ -52,6 +52,21 @@
     flex: 1;
     overflow: auto;
     padding: 15px;
+    > .observer-wrapper {
+      width: 100%;
+      position: absolute;
+      pointer-events: none;
+      visibility: hidden;
+      top: 0;
+      left: 0;
+      > .observer {
+        width: 100%;
+        height: 10px;
+        bottom: 0;
+        left: 0;
+        position: absolute;
+      }
+    }
   }
 }
 

package/lib/assets/styles/shortcuts.scss

@@ -0,0 +1,59 @@
+@import "colors.scss";
+@import "commons.scss";
+
+p.shortcut-description {
+  margin-bottom: .3rem;
+  color: $font-color-default;
+  font-family: 'Roboto', sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  overflow-wrap: break-word;
+}
+
+.shortcut-component {
+  user-select: none;
+  display: inline-block;
+  padding: 0.1rem 0.3rem;
+  color: $font-color-default;
+  vertical-align: middle;
+  background-color: $default-color;
+  border: solid 1px $default-border-color;
+  border-radius: 3px;
+  box-shadow: inset 0 -1px 0 $default-border-color;
+  font-size: .9rem;
+
+  &.-danger {
+    background-color: $danger-color;
+    color: $font-color-second;
+    box-shadow: inset 0 -1px 0 $danger-actived-color;
+    border-color: $danger-color;
+  }
+
+  &.-primary {
+    background-color: $primary-color;
+    color: $font-color-second;
+    box-shadow: inset 0 -1px 0 $primary-actived-color;
+    border-color: $primary-border-color;
+  }
+
+  &.-warning {
+    background-color: $warning-color;
+    color: $font-color-second;
+    box-shadow: inset 0 -1px 0 $warning-actived-color;
+    border-color: $warning-color;
+  }
+
+  &.-success {
+    background-color: $success-color;
+    color: $font-color-second;
+    box-shadow: inset 0 -1px 0 $success-actived-color;
+    border-color: $success-color;
+  }
+
+  &.-info {
+    background-color: $info-color;
+    color: $font-color-second;
+    box-shadow: inset 0 -1px 0 $info-actived-color;
+    border-color: $info-color;
+  }
+}

package/lib/form/Field.js

@@ -9,6 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _lodash = _interopRequireDefault(require("lodash"));
 var _withFieldHOC = _interopRequireDefault(require("./withFieldHOC"));
 var _helpers = require("./helpers");
+var _excluded = ["handlerFieldChange", "handlerFieldValidade", "onChange", "onBlur", "name", "validators", "data", "fieldErrors", "handlerStoreValidators", "handlerRemoveValidators", "component", "externalFieldErrors", "originalData"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -24,6 +25,8 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var getEvents = function getEvents(_ref) {
   var _ref$validators = _ref.validators,
     validators = _ref$validators === void 0 ? [] : _ref$validators,
@@ -34,7 +37,7 @@ var getEvents = function getEvents(_ref) {
     handlerFieldChange = _ref.handlerFieldChange,
     _onChange = _ref.onChange,
     handleShowValidateMessages = _ref.handleShowValidateMessages;
-  if (!(validators || validatorFromComponent || _onBlur)) return {};
+  if (!(validators || validatorFromComponent || _onBlur || _onChange)) return {};
   var validatorsArray = (0, _helpers.getValidatorsArray)(validators, validatorFromComponent);
   return {
     onBlur: function onBlur(e) {
@@ -54,7 +57,7 @@ var getEvents = function getEvents(_ref) {
     }
   };
 };
-var getCustomProps = function getCustomProps(props, setValidatorFromComponent) {
+var getCustomProps = function getCustomProps(props, handlerSetComponentValidator) {
   var value = props.value,
     data = props.data,
     name = props.name,
@@ -74,7 +77,7 @@ var getCustomProps = function getCustomProps(props, setValidatorFromComponent) {
   } else if (component.displayName === 'CpfField' || component.displayName === 'CnpjField') {
     return {
       value: _lodash.default.get(data, name),
-      handlerSetComponentValidator: setValidatorFromComponent
+      handlerSetComponentValidator: handlerSetComponentValidator
     };
   }
   return {
@@ -83,35 +86,49 @@ var getCustomProps = function getCustomProps(props, setValidatorFromComponent) {
 };
 var Field = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var handlerFieldChange = props.handlerFieldChange,
-    onChange = props.onChange;
+    handlerFieldValidade = props.handlerFieldValidade,
+    onChange = props.onChange,
+    onBlur = props.onBlur,
+    name = props.name,
+    validators = props.validators,
+    data = props.data,
+    fieldErrors = props.fieldErrors,
+    handlerStoreValidators = props.handlerStoreValidators,
+    handlerRemoveValidators = props.handlerRemoveValidators,
+    Component = props.component,
+    externalFieldErrors = props.externalFieldErrors,
+    originalData = props.originalData,
+    rest = _objectWithoutProperties(props, _excluded);
   var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
     showValidateMessages = _useState2[0],
     setShowValidateMessages = _useState2[1];
-  var _useState3 = (0, _react.useState)(undefined),
-    _useState4 = _slicedToArray(_useState3, 2),
-    validatorFromComponent = _useState4[0],
-    setValidatorFromComponent = _useState4[1];
   var _useContext = (0, _react.useContext)(_helpers.withFieldContext),
-    handlerSetValidatorFromComponent = _useContext.handlerSetValidatorFromComponent;
+    handlerSetValidatorFromComponent = _useContext.handlerSetValidatorFromComponent,
+    validatorFromComponent = _useContext.validatorFromComponent;
+  var currentValue = _lodash.default.get(data, name);
+  var originalValue = _lodash.default.get(originalData, name);
   (0, _react.useEffect)(function () {
-    if (validatorFromComponent && handlerSetValidatorFromComponent) {
-      handlerSetValidatorFromComponent(validatorFromComponent);
+    if (currentValue && currentValue !== originalValue && (!!currentValue || currentValue === 0 || Array.isArray(currentValue) && currentValue.length > 0)) {
+      setShowValidateMessages(true);
+    } else if (_lodash.default.isEmpty(data) || _lodash.default.every(data, _lodash.default.isEmpty) || currentValue === originalValue) {
+      setShowValidateMessages(false);
     }
-  }, [validatorFromComponent]);
-  return /*#__PURE__*/_react.default.createElement(props.component, _extends({}, props, getEvents({
-    name: props.name,
-    validators: props.validators,
-    onBlur: props.onBlur,
+  }, [currentValue, originalValue]);
+  return /*#__PURE__*/_react.default.createElement(Component, _extends({}, rest, getEvents({
+    name: name,
+    validators: validators,
+    onBlur: onBlur,
     validatorFromComponent: validatorFromComponent,
-    handlerFieldValidade: props.handlerFieldValidade ? props.handlerFieldValidade : function () {},
+    handlerFieldValidade: handlerFieldValidade,
     handlerFieldChange: handlerFieldChange,
     onChange: onChange,
     handleShowValidateMessages: function handleShowValidateMessages(value) {
       return setShowValidateMessages(value);
     }
-  }), getCustomProps(props, setValidatorFromComponent), {
+  }), getCustomProps(props, handlerSetValidatorFromComponent), {
     ref: ref,
+    name: name,
     errorMessages: (0, _helpers.getErrorMessages)(_objectSpread(_objectSpread({}, props), {}, {
       fieldErrors: showValidateMessages ? props.fieldErrors : {}
     }))

package/lib/form/FieldArray.js

@@ -10,6 +10,7 @@ var _withFieldHOC = _interopRequireDefault(require("./withFieldHOC"));
 var _gridlayout = _interopRequireDefault(require("../gridlayout"));
 var _fieldset = _interopRequireDefault(require("../fieldset"));
 var _helpers = require("./helpers");
+var _excluded = ["cols", "label", "bordered", "labelContainerStyle", "skipLabel", "data", "name", "handlerStoreValidators", "component", "handlerFieldChange", "handlerFieldValidade", "changePropName", "fieldErrors", "externalMessagesErrors", "handlerRemoveValidators", "validators", "valuePropName", "originalData"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -23,10 +24,12 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-var getDefaultProps = function getDefaultProps(props) {
+var getDefaultProps = function getDefaultProps(props, handleShowValidateMessages) {
   var _ref;
   var _props$valuePropName = props.valuePropName,
     valuePropName = _props$valuePropName === void 0 ? 'value' : _props$valuePropName,
@@ -35,8 +38,14 @@ var getDefaultProps = function getDefaultProps(props) {
     data = props.data,
     name = props.name,
     handlerFieldChange = props.handlerFieldChange,
-    handlerSelecionados = props.handlerSelecionados;
-  return _ref = {}, _defineProperty(_ref, valuePropName, _lodash.default.get(data, name)), _defineProperty(_ref, changePropName, function (ids) {
+    handlerSelecionados = props.handlerSelecionados,
+    _onBlur = props.onBlur;
+  return _ref = {
+    onBlur: function onBlur(e) {
+      if (handleShowValidateMessages) handleShowValidateMessages(true);
+      if (_onBlur) _onBlur(e);
+    }
+  }, _defineProperty(_ref, valuePropName, _lodash.default.get(data, name)), _defineProperty(_ref, changePropName, function (ids) {
     if (handlerFieldChange) handlerFieldChange({
       target: {
         value: ids,
@@ -44,20 +53,16 @@ var getDefaultProps = function getDefaultProps(props) {
       }
     });
     if (handlerSelecionados) handlerSelecionados(ids);
+    if (handleShowValidateMessages) handleShowValidateMessages(true);
   }), _ref;
 };
 var getEvents = function getEvents(_ref2) {
-  var _onBlur = _ref2.onBlur,
-    _onSelect = _ref2.onSelect,
+  var _onBlur2 = _ref2.onBlur,
     handleShowValidateMessages = _ref2.handleShowValidateMessages;
   return {
     onBlur: function onBlur(e) {
       handleShowValidateMessages(true);
-      if (_onBlur) _onBlur(e);
-    },
-    onSelect: function onSelect(e) {
-      handleShowValidateMessages(true);
-      if (_onSelect) _onSelect(e);
+      if (_onBlur2) _onBlur2(e);
     }
   };
 };
@@ -66,32 +71,64 @@ var FieldArray = function FieldArray(props) {
     label = props.label,
     bordered = props.bordered,
     labelContainerStyle = props.labelContainerStyle,
-    skipLabel = props.skipLabel;
+    skipLabel = props.skipLabel,
+    data = props.data,
+    name = props.name,
+    handlerStoreValidators = props.handlerStoreValidators,
+    Component = props.component,
+    handlerFieldChange = props.handlerFieldChange,
+    handlerFieldValidade = props.handlerFieldValidade,
+    changePropName = props.changePropName,
+    fieldErrors = props.fieldErrors,
+    externalMessagesErrors = props.externalMessagesErrors,
+    handlerRemoveValidators = props.handlerRemoveValidators,
+    validators = props.validators,
+    valuePropName = props.valuePropName,
+    originalData = props.originalData,
+    rest = _objectWithoutProperties(props, _excluded);
   var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
     showValidateMessages = _useState2[0],
     setShowValidateMessages = _useState2[1];
+  var currentValue = _lodash.default.get(data, name);
+  var originalValue = _lodash.default.get(originalData, name);
+  var handleShowValidateMessages = function handleShowValidateMessages(value) {
+    setShowValidateMessages(value);
+  };
+  (0, _react.useEffect)(function () {
+    if (!_lodash.default.isEqual(currentValue, originalValue) && Array.isArray(currentValue) && currentValue.length > 0) {
+      setShowValidateMessages(true);
+    } else if (_lodash.default.isEmpty(data) || _lodash.default.every(data, _lodash.default.isEmpty) || _lodash.default.isEqual(currentValue, originalValue)) {
+      setShowValidateMessages(false);
+    }
+  }, [currentValue]);
   var content = null;
-  if (props.component) {
+  if (Component) {
     if (!skipLabel && label) {
       content = /*#__PURE__*/_react.default.createElement(_fieldset.default, {
         title: label,
         customClass: "arraycontainer ".concat(bordered && '-bordered'),
         style: labelContainerStyle,
         titleCustomClass: "label"
-      }, /*#__PURE__*/_react.default.createElement(props.component, _extends({}, props, getDefaultProps(props), getEvents(_objectSpread(_objectSpread({}, props), {}, {
+      }, /*#__PURE__*/_react.default.createElement(Component, _extends({}, rest, getDefaultProps(props, handleShowValidateMessages), getEvents(_objectSpread(_objectSpread({}, props), {}, {
         handleShowValidateMessages: function handleShowValidateMessages(value) {
           return setShowValidateMessages(value);
         }
-      })))), (0, _helpers.getErrorMessages)(_objectSpread(_objectSpread({}, props), {}, {
+      })), {
+        label: label,
+        name: name
+      })), (0, _helpers.getErrorMessages)(_objectSpread(_objectSpread({}, props), {}, {
         fieldErrors: showValidateMessages ? props.fieldErrors : {}
       })));
     } else {
-      content = /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(props.component, _extends({}, props, getDefaultProps(props), getEvents(_objectSpread(_objectSpread({}, props), {}, {
+      content = /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(Component, _extends({}, rest, getDefaultProps(props, handleShowValidateMessages), getEvents(_objectSpread(_objectSpread({}, props), {}, {
         handleShowValidateMessages: function handleShowValidateMessages(value) {
           return setShowValidateMessages(value);
         }
-      })))), (0, _helpers.getErrorMessages)(_objectSpread(_objectSpread({}, props), {}, {
+      })), {
+        label: label,
+        name: name
+      })), (0, _helpers.getErrorMessages)(_objectSpread(_objectSpread({}, props), {}, {
         fieldErrors: showValidateMessages ? props.fieldErrors : {}
       })));
     }

package/lib/form/FieldNumber.js

@@ -52,11 +52,21 @@ var getEventProps = function getEventProps(_ref) {
 };
 var FieldMask = function FieldMask(props) {
   var data = props.data,
-    name = props.name;
+    name = props.name,
+    originalData = props.originalData;
+  var currentValue = _lodash.default.get(data, name);
   var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
     showValidateMessages = _useState2[0],
     setShowValidateMessages = _useState2[1];
+  var originalValue = _lodash.default.get(originalData, name);
+  (0, _react.useEffect)(function () {
+    if (currentValue && currentValue !== originalValue && !!currentValue) {
+      setShowValidateMessages(true);
+    } else if (_lodash.default.isEmpty(data) || _lodash.default.every(data, _lodash.default.isEmpty) || currentValue === originalValue) {
+      setShowValidateMessages(false);
+    }
+  }, [currentValue, originalValue]);
   return /*#__PURE__*/_react.default.createElement(props.component, _extends({}, props, getEventProps(_objectSpread(_objectSpread({}, props), {}, {
     handleShowValidateMessages: function handleShowValidateMessages(value) {
       return setShowValidateMessages(value);
@@ -65,7 +75,7 @@ var FieldMask = function FieldMask(props) {
     errorMessages: (0, _helpers.getErrorMessages)(_objectSpread(_objectSpread({}, props), {}, {
       fieldErrors: showValidateMessages ? props.fieldErrors : {}
     })),
-    value: _lodash.default.get(data, name)
+    value: currentValue
   }));
 };
 var _default = (0, _withFieldHOC.default)(FieldMask);

package/lib/form/FieldPeriod.js

@@ -28,11 +28,21 @@ var FieldPeriod = function FieldPeriod(props) {
     fieldErrors = props.fieldErrors,
     externalMessagesErrors = props.externalMessagesErrors,
     _onChange = props.onChange,
-    validators = props.validators;
+    validators = props.validators,
+    originalData = props.originalData;
   var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
     showValidateMessages = _useState2[0],
     setShowValidateMessages = _useState2[1];
+  var currentValue = _lodash.default.get(data, nameDateInitial);
+  var originalValue = _lodash.default.get(originalData, nameDateInitial);
+  (0, _react.useEffect)(function () {
+    if (!_lodash.default.isEqual(currentValue, originalValue) && currentValue && (!!currentValue || currentValue === 0 || Array.isArray(currentValue) && currentValue.length > 0)) {
+      setShowValidateMessages(true);
+    } else if (_lodash.default.isEmpty(data) || _lodash.default.every(data, _lodash.default.isEmpty) || _lodash.default.isEqual(currentValue, originalValue)) {
+      setShowValidateMessages(false);
+    }
+  }, [currentValue]);
   var errorMessages = (0, _helpers.getErrorMessages)({
     name: nameDateInitial,
     fieldErrors: showValidateMessages ? fieldErrors : {},

package/lib/form/helpers.d.ts

@@ -10,7 +10,7 @@ import '../@types/Period.js';
 declare const securityBeforeUnload = "securityBeforeUnload";
 declare const FormContext: React__default.Context<FormContextProps>;
 declare const withFieldContext: React__default.Context<IWithFieldContext>;
-declare const changeValue: (newData: object, target: HTMLInputElement) => any;
+declare const changeValue: (data: object, target: HTMLInputElement) => any;
 declare const getErrorMessages: ({ name, fieldErrors, externalFieldErrors, externalMessagesErrors, }: IGetErrorMessagesParams) => string[];
 declare const getValidatorsArray: (validators?: Validator | Validator[], validatorFromComponent?: Validator | Validator[]) => Validator[];
 

package/lib/form/helpers.js

@@ -19,10 +19,10 @@ var FormContext = /*#__PURE__*/_react.default.createContext({});
 exports.FormContext = FormContext;
 var withFieldContext = /*#__PURE__*/_react.default.createContext({});
 exports.withFieldContext = withFieldContext;
-var changeValue = function changeValue(newData, target) {
+var changeValue = function changeValue(data, target) {
   var name = target.name,
     value = target.value;
-  return _lodash.default.set(JSON.parse(JSON.stringify(newData)), name, value);
+  return _lodash.default.set(JSON.parse(JSON.stringify(data)), name, value);
 };
 exports.changeValue = changeValue;
 var getErrorMessages = function getErrorMessages(_ref) {

package/lib/form/index.d.ts

@@ -2,7 +2,7 @@ export { default as Field } from './Field.js';
 export { default as FieldNumber } from './FieldNumber.js';
 export { default as FieldArray } from './FieldArray.js';
 export { default as FieldPeriod } from './FieldPeriod.js';
-import { IFormProps } from './types.js';
+import { FormProps } from './types.js';
 import 'react';
 import '../inputs/select/types.js';
 import '../@types/Align.js';
@@ -11,6 +11,6 @@ import '../@types/PermissionAttr.js';
 import '../inputs/base/types.js';
 import '../@types/Period.js';
 
-declare const Form: ({ submitOnPressEnterKey, dataSource, securityBeforeUnload, handlerReset, handlerSubmit, handlerValidates, style, customClass, securityTitle, securityText, securityData, onDataChange, onValidateForm, externalFieldErrors, onSubmit, skeletonize, disabled, children, }: IFormProps) => JSX.Element;
+declare const Form: ({ submitOnPressEnterKey, dataSource, securityBeforeUnload, handlerReset, handlerSubmit, handlerValidates, style, customClass, securityTitle, securityText, securityData, onDataChange, onValidateForm, externalFieldErrors, onSubmit, skeletonize, disabled, children, useInternalState, }: FormProps) => JSX.Element;
 
 export { Form as default };