linear-react-components-ui 0.4.77-beta.27 → 0.4.77-beta.28

package/lib/inputs/date/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -11,6 +11,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _moment = _interopRequireDefault(require("moment"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _BaseMask = _interopRequireDefault(require("../mask/BaseMask"));
 
 var _Dropdown = _interopRequireDefault(require("./Dropdown"));
@@ -27,6 +29,8 @@ var _icons = _interopRequireDefault(require("../../icons"));
 
 var _Dialog = _interopRequireDefault(require("./Dialog"));
 
+var _colorStyles = _interopRequireDefault(require("../../internals/colorStyles"));
+
 var _helpers = require("./helpers");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -35,287 +39,439 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
-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); }
+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); }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
 
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
 
-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 _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
 var CALENDAR_BUTTON_WIDTH = 24;
 
-var DatePicker = function DatePicker(props) {
-  var _props$showButtonOpen = props.showButtonOpen,
-      showButtonOpen = _props$showButtonOpen === void 0 ? true : _props$showButtonOpen,
-      _props$openOnFocus = props.openOnFocus,
-      openOnFocus = _props$openOnFocus === void 0 ? true : _props$openOnFocus,
-      _props$shouldCloseOnS = props.shouldCloseOnSelect,
-      shouldCloseOnSelect = _props$shouldCloseOnS === void 0 ? true : _props$shouldCloseOnS,
-      _props$setFocusOnSele = props.setFocusOnSelect,
-      setFocusOnSelect = _props$setFocusOnSele === void 0 ? true : _props$setFocusOnSele,
-      _props$showCalendarIn = props.showCalendarInDialog,
-      showCalendarInDialog = _props$showCalendarIn === void 0 ? false : _props$showCalendarIn,
-      _props$required = props.required,
-      required = _props$required === void 0 ? false : _props$required,
-      _props$value = props.value,
-      value = _props$value === void 0 ? '' : _props$value,
-      _props$name = props.name,
-      name = _props$name === void 0 ? '' : _props$name,
-      _props$dialogSize = props.dialogSize,
-      dialogSize = _props$dialogSize === void 0 ? {
-    width: '350px',
-    height: '350px'
-  } : _props$dialogSize;
-
-  var _useState = (0, _react.useState)(value ? (0, _helpers.getMomentValue)(value) : undefined),
-      _useState2 = _slicedToArray(_useState, 2),
-      valueState = _useState2[0],
-      setValueState = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(value),
-      _useState4 = _slicedToArray(_useState3, 2),
-      valueFromProps = _useState4[0],
-      setValueFromProps = _useState4[1];
-
-  var _useState5 = (0, _react.useState)(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      showCalendar = _useState6[0],
-      setShowCalendar = _useState6[1];
-
-  var _useState7 = (0, _react.useState)(),
-      _useState8 = _slicedToArray(_useState7, 2),
-      inputDimensions = _useState8[0],
-      setInputDimensions = _useState8[1];
-
-  var _useState9 = (0, _react.useState)({
-    disabled: false,
-    readOnly: false,
-    unvisible: false,
-    hideContent: false
-  }),
-      _useState10 = _slicedToArray(_useState9, 2),
-      onDenied = _useState10[0],
-      setOnDenied = _useState10[1];
-
-  var _inputRef = (0, _react.useRef)();
-
-  var buttonOpenRef = (0, _react.useRef)();
-  var dropdownContainer = (0, _react.useRef)();
-
-  var _useState11 = (0, _react.useState)(false),
-      _useState12 = _slicedToArray(_useState11, 2),
-      insideDropdown = _useState12[0],
-      setInsideDropdown = _useState12[1];
-
-  var onScreenResize = function onScreenResize() {
-    var _inputRef$current;
-
-    setInputDimensions(_inputRef === null || _inputRef === void 0 ? void 0 : (_inputRef$current = _inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.getBoundingClientRect());
-  };
-
-  var onClickOutside = function onClickOutside(event) {
-    var _buttonOpenRef$curren;
-
-    var target = event.target;
-    if (!dropdownContainer || target === _inputRef.current || target === buttonOpenRef.current) return;
-
-    if (target !== dropdownContainer.current && dropdownContainer && dropdownContainer.current && !dropdownContainer.current.contains(target) && buttonOpenRef && !(buttonOpenRef !== null && buttonOpenRef !== void 0 && (_buttonOpenRef$curren = buttonOpenRef.current) !== null && _buttonOpenRef$curren !== void 0 && _buttonOpenRef$curren.contains(target))) {
-      setShowCalendar(false);
-    }
-  };
+var DatePicker = /*#__PURE__*/function (_Component) {
+  _inherits(DatePicker, _Component);
 
-  var openCalendar = function openCalendar() {
-    setShowCalendar(true);
+  var _super = _createSuper(DatePicker);
 
-    if (_inputRef.current) {
-      setInputDimensions(_inputRef.current.getBoundingClientRect());
-    }
-  };
+  function DatePicker(props) {
+    var _this;
 
-  var onMouseMove = function onMouseMove(event) {
-    var target = event.target;
-    setInsideDropdown(false);
+    _classCallCheck(this, DatePicker);
 
-    if (dropdownContainer !== undefined && dropdownContainer.current) {
-      if (target === dropdownContainer.current || dropdownContainer.current.contains(target)) {
-        setInsideDropdown(true);
-      }
+    _this = _super.call(this, props);
+
+    _initialiseProps.call(_assertThisInitialized(_this));
+
+    var propsValue = props.value;
+    _this.state = {
+      value: propsValue ? (0, _helpers.getMomentValue)(propsValue) : undefined,
+      // eslint-disable-next-line react/no-unused-state
+      propsValue: propsValue,
+      showCalendar: false,
+      inputDimensions: null,
+      onDenied: undefined
+    };
+    return _this;
+  }
+
+  _createClass(DatePicker, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      window.addEventListener('resize', this.onScreenResize);
+      document.addEventListener('click', this.onClickOutside);
+      document.addEventListener('mousemove', this.onMouseMove);
+      if (this.inputRef) this.onScreenResize(); // TODO: Procurar solução melhor.
+      // setTimeout(() => { this.onScreenResize(); }, 300);
     }
-  };
-
-  var onInputFocus = function onInputFocus(e) {
-    if (props.onFocus) props.onFocus(e);
-    if (openOnFocus) openCalendar();
-  };
-
-  var onInputBlur = function onInputBlur(e) {
-    if (props.onBlur) props.onBlur(e);
-    if (!insideDropdown) setShowCalendar(false);
-  };
-
-  var onInputKeyDown = function onInputKeyDown(event) {
-    if (Number(event.code) === contants.keyCodes.TAB) {
-      setInsideDropdown(false);
-      setShowCalendar(false);
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      window.removeEventListener('resize', this.onScreenResize);
+      document.removeEventListener('click', this.onClickOutside);
+      document.removeEventListener('mousemove', this.onMouseMove);
     }
-  };
-
-  var onInputChange = function onInputChange(event, valueInput) {
-    if (props.onChange && event) {
-      if ((0, _moment.default)(valueInput, _helpers.PT_BR_FORMAT, true).isValid()) {
-        var newValue = (0, _moment.default)(valueInput, _helpers.PT_BR_FORMAT).format(_helpers.EN_US_FORMAT);
-        var obj = {
-          target: {
-            value: newValue,
-            name: event.target.name
-          }
-        };
-        props.onChange(obj, valueInput);
-      } else if (event.target.value === '') {
-        var _obj = {
-          target: {
-            value: '',
-            name: event.target.name
-          }
-        };
-        props.onChange(_obj, valueInput);
-        setShowCalendar(false);
-        setValueState(undefined);
-      }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$state = this.state,
+          showCalendar = _this$state.showCalendar,
+          value = _this$state.value,
+          onDenied = _this$state.onDenied;
+      var required = this.props.required;
+      if (onDenied && onDenied.unvisible) return null;
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_BaseMask.default, _extends({}, this.props, {
+        value: !value ? ' ' : value.format(_helpers.PT_BR_FORMAT),
+        mask: "00/00/0000",
+        onComplete: function onComplete(e, date) {
+          _this2.setValue(e, date);
+        },
+        onBlur: function onBlur(e) {
+          _this2.onInputBlur(e);
+        },
+        onFocus: function onFocus(e) {
+          _this2.onInputFocus(e);
+        },
+        onKeyDown: function onKeyDown(event) {
+          _this2.onInputKeyDown(event);
+        },
+        onChange: function onChange(e, val) {
+          _this2.onInputChange(e, val);
+        },
+        inputRef: function inputRef(el) {
+          _this2.inputRef = el;
+        },
+        rightElements: this.getButtonOpen(),
+        required: required,
+        handlerSetOnDenied: this.setOnDenied
+      })), showCalendar && this.getWrapperComponent());
+    }
+  }]);
+
+  return DatePicker;
+}(_react.Component);
+
+Object.defineProperty(DatePicker, "getDerivedStateFromProps", {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  value: function value(props, state) {
+    var value = props.value;
+    var propsValue = state.propsValue;
+
+    if (value && (0, _moment.default)(value, _helpers.EN_US_FORMAT).format() !== 'Invalid date' && (0, _moment.default)(propsValue, _helpers.EN_US_FORMAT).format() !== (0, _moment.default)(value, _helpers.EN_US_FORMAT).format()) {
+      return {
+        value: (0, _moment.default)(value, _helpers.EN_US_FORMAT),
+        propsValue: value
+      };
+    } else if (!value && value !== propsValue) {
+      return {
+        value: undefined,
+        propsValue: value
+      };
     }
-  };
 
-  var setValue = function setValue(valueParam, e) {
-    var _inputRef$current2;
+    return null;
+  }
+});
+
+var _initialiseProps = function _initialiseProps() {
+  var _this3 = this;
+
+  Object.defineProperty(this, "onScreenResize", {
+    configurable: true,
+    enumerable: true,
+    writable: true,
+    value: function value() {
+      var inputDimensions = _this3.inputRef.getBoundingClientRect();
 
-    if (showCalendar && setFocusOnSelect) (_inputRef$current2 = _inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
-    if (props.onComplete) props.onComplete(e, valueParam);
-    if (props.onChange) onInputChange({
-      target: {
-        value: valueParam,
-        name: name
+      _this3.setState({
+        inputDimensions: inputDimensions
+      });
+    }
+  });
+  Object.defineProperty(this, "onClickOutside", {
+    configurable: true,
+    enumerable: true,
+    writable: true,
+    value: function value(event) {
+      var dropdownContainer = _this3.dropdownContainer;
+      var target = event.target;
+      if (!_this3.dropdownContainer || target === _this3.inputRef || target === _this3.buttonOpenRef) return;
+
+      if (target !== dropdownContainer && dropdownContainer && !dropdownContainer.contains(target) && _this3.buttonOpenRef && !_this3.buttonOpenRef.contains(target)) {
+        _this3.setState({
+          showCalendar: false
+        });
       }
-    }, valueParam);
-    if (shouldCloseOnSelect) setShowCalendar(false);
-    setValueState((0, _moment.default)(valueParam, _helpers.PT_BR_FORMAT));
-  };
-
-  var shouldDisable = function shouldDisable() {
-    return props.disabled || onDenied && (onDenied.disabled || onDenied.hideContent);
-  };
-
-  var getButtonOpen = function getButtonOpen() {
-    if (!showButtonOpen) return undefined;
-    return /*#__PURE__*/_react.default.createElement(_buttons.default, {
-      key: "button-",
-      boxShadow: false,
-      icon: /*#__PURE__*/_react.default.createElement(_icons.default, {
-        name: "calendar",
-        size: 16
-      }),
-      onClick: function onClick() {
-        openCalendar();
-      },
-      customClass: "calendar-button",
-      tabIndex: -1,
-      targetRef: function targetRef(ref) {
-        buttonOpenRef.current = ref;
-      },
-      disabled: shouldDisable()
-    });
-  };
-
-  var getCalendar = function getCalendar(valueCalendar, calendarColorStyle) {
-    return /*#__PURE__*/_react.default.createElement(_calendar.default, {
-      currentDate: valueCalendar !== undefined ? valueCalendar : (0, _moment.default)(),
-      onDateChange: function onDateChange(date) {
-        setValue(date.format(_helpers.PT_BR_FORMAT), undefined);
-      },
-      colorStyle: calendarColorStyle
-    });
-  };
-
-  var getWrapperComponent = function getWrapperComponent() {
-    if (onDenied && onDenied.readOnly) return null;
-
-    if (showCalendarInDialog) {
-      return /*#__PURE__*/_react.default.createElement(_Dialog.default, {
-        dialogSize: dialogSize,
-        handlerClose: function handlerClose() {
-          setShowCalendar(false);
+    }
+  });
+  Object.defineProperty(this, "onMouseMove", {
+    configurable: true,
+    enumerable: true,
+    writable: true,
+    value: function value(event) {
+      var target = event.target;
+      _this3.insideDropdown = false;
+
+      if (_this3.dropdownContainer !== undefined) {
+        if (target === _this3.dropdownContainer || _this3.dropdownContainer.contains(target)) {
+          _this3.insideDropdown = true;
         }
-      }, getCalendar(valueState, props === null || props === void 0 ? void 0 : props.calendarColorStyle));
+      }
+    }
+  });
+  Object.defineProperty(this, "onInputFocus", {
+    configurable: true,
+    enumerable: true,
+    writable: true,
+    value: function value(e) {
+      var _this3$props = _this3.props,
+          onFocus = _this3$props.onFocus,
+          openOnFocus = _this3$props.openOnFocus;
+      if (onFocus) onFocus(e);
+      if (openOnFocus) _this3.openCalendar();
+    }
+  });
+  Object.defineProperty(this, "onInputBlur", {
+    configurable: true,
+    enumerable: true,
+    writable: true,
+    value: function value(e) {
+      var onBlur = _this3.props.onBlur;
+      if (onBlur) onBlur(e);
+      if (!_this3.insideDropdown) _this3.setState({
+        showCalendar: false
+      });
     }
+  });
+  Object.defineProperty(this, "onInputKeyDown", {
+    configurable: true,
+    enumerable: true,
+    writable: true,
+    value: function value(event) {
+      if (event.keyCode === contants.keyCodes.TAB) {
+        _this3.insideDropdown = false;
+
+        _this3.setState({
+          showCalendar: false
+        });
+      }
+    }
+  });
+  Object.defineProperty(this, "onInputChange", {
+    configurable: true,
+    enumerable: true,
+    writable: true,
+    value: function value(event, _value) {
+      var onChange = _this3.props.onChange;
+
+      if (onChange) {
+        if ((0, _moment.default)(_value, _helpers.PT_BR_FORMAT, true).isValid()) {
+          var newValue = (0, _moment.default)(_value, _helpers.PT_BR_FORMAT).format(_helpers.EN_US_FORMAT);
+          var obj = {
+            target: {
+              value: newValue,
+              name: event.target.name
+            }
+          };
+          onChange(obj, _value);
+        } else if (event.target.value === '') {
+          var _obj = {
+            target: {
+              value: '',
+              name: event.target.name
+            }
+          };
+          onChange(_obj, _value);
+
+          _this3.setState({
+            value: undefined,
+            showCalendar: false
+          });
+        }
+      }
+    }
+  });
+  Object.defineProperty(this, "setValue", {
+    configurable: true,
+    enumerable: true,
+    writable: true,
+    value: function value(e, _value2) {
+      var _this3$props2 = _this3.props,
+          setFocusOnSelect = _this3$props2.setFocusOnSelect,
+          onComplete = _this3$props2.onComplete,
+          onChange = _this3$props2.onChange,
+          name = _this3$props2.name;
+      var showCalendar = _this3.state.showCalendar;
+      if (showCalendar && setFocusOnSelect) _this3.inputRef.focus();
+      if (onComplete) onComplete(e, _value2);
+      if (onChange) _this3.onInputChange({
+        target: {
+          value: _value2,
+          name: name
+        }
+      }, _value2);
+      if (_this3.props.shouldCloseOnSelect) showCalendar = false;
 
-    return /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
-      topPosition: inputDimensions ? inputDimensions.top + inputDimensions.height + 5 : '',
-      leftPosition: inputDimensions ? inputDimensions.left : '',
-      width: inputDimensions ? inputDimensions.width + (showButtonOpen ? CALENDAR_BUTTON_WIDTH : 0) : '',
-      dropdownRef: function dropdownRef(el) {
-        dropdownContainer.current = el;
+      _this3.setState({
+        value: (0, _moment.default)(_value2, _helpers.PT_BR_FORMAT),
+        showCalendar: showCalendar
+      });
+    }
+  });
+  Object.defineProperty(this, "setOnDenied", {
+    configurable: true,
+    enumerable: true,
+    writable: true,
+    value: function value(onDenied) {
+      _this3.setState({
+        onDenied: onDenied
+      });
+    }
+  });
+  Object.defineProperty(this, "getButtonOpen", {
+    configurable: true,
+    enumerable: true,
+    writable: true,
+    value: function value() {
+      var showButtonOpen = _this3.props.showButtonOpen;
+      if (!showButtonOpen) return null;
+      return /*#__PURE__*/_react.default.createElement(_buttons.default, {
+        key: "button-",
+        boxShadow: false,
+        icon: /*#__PURE__*/_react.default.createElement(_icons.default, {
+          name: "calendar",
+          size: 16
+        }),
+        onClick: function onClick() {
+          _this3.openCalendar();
+        },
+        customClass: "calendar-button",
+        tabIndex: "-1",
+        targetRef: function targetRef(ref) {
+          _this3.buttonOpenRef = ref;
+        },
+        disabled: _this3.shouldDisable()
+      });
+    }
+  });
+  Object.defineProperty(this, "getCalendar", {
+    configurable: true,
+    enumerable: true,
+    writable: true,
+    value: function value(_value3, calendarColorStyle) {
+      return /*#__PURE__*/_react.default.createElement(_calendar.default, {
+        currentDate: _value3 !== undefined ? _value3 : (0, _moment.default)(),
+        onDateChange: function onDateChange(date) {
+          _this3.setValue(undefined, date);
+        },
+        colorStyle: calendarColorStyle
+      });
+    }
+  });
+  Object.defineProperty(this, "getWrapperComponent", {
+    configurable: true,
+    enumerable: true,
+    writable: true,
+    value: function value() {
+      var _this3$state = _this3.state,
+          value = _this3$state.value,
+          inputDimensions = _this3$state.inputDimensions,
+          onDenied = _this3$state.onDenied;
+      var _this3$props3 = _this3.props,
+          showCalendarInDialog = _this3$props3.showCalendarInDialog,
+          showButtonOpen = _this3$props3.showButtonOpen,
+          dialogSize = _this3$props3.dialogSize,
+          calendarColorStyle = _this3$props3.calendarColorStyle;
+      if (onDenied && onDenied.readOnly) return null;
+
+      if (showCalendarInDialog) {
+        return /*#__PURE__*/_react.default.createElement(_Dialog.default, {
+          dialogSize: dialogSize,
+          handlerClose: function handlerClose() {
+            _this3.setState({
+              showCalendar: false
+            });
+          }
+        }, _this3.getCalendar(value, calendarColorStyle));
       }
-    }, getCalendar(valueState, props === null || props === void 0 ? void 0 : props.calendarColorStyle));
-  };
-
-  if (onDenied && onDenied.unvisible) return null;
-  (0, _react.useEffect)(function () {
-    window.addEventListener('resize', onScreenResize);
-    document.addEventListener('click', onClickOutside);
-    document.addEventListener('mousemove', onMouseMove);
-    if (_inputRef.current) onScreenResize();
-    return function () {
-      window.removeEventListener('resize', onScreenResize);
-      document.removeEventListener('click', onClickOutside);
-      document.removeEventListener('mousemove', onMouseMove);
-    }; // TODO: Procurar solução melhor.
-    // setTimeout(() => { this.onScreenResize(); }, 300);
-  }, [_inputRef.current]);
-  (0, _react.useEffect)(function () {
-    if (value && (0, _moment.default)(value, _helpers.EN_US_FORMAT).format() !== 'Invalid date' && (0, _moment.default)(valueFromProps, _helpers.EN_US_FORMAT).format() !== (0, _moment.default)(value, _helpers.EN_US_FORMAT).format()) {
-      setValueState((0, _moment.default)(value, _helpers.EN_US_FORMAT));
-      setValueFromProps(value);
-    } else if (!value && value !== valueFromProps) {
-      setValueState(undefined);
-      setValueFromProps(value);
+
+      return /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
+        targetElement: _this3.inputRef,
+        topPosition: inputDimensions.top + inputDimensions.height + 5,
+        leftPosition: inputDimensions.left,
+        width: inputDimensions.width + (showButtonOpen ? CALENDAR_BUTTON_WIDTH : 0),
+        dropdownRef: function dropdownRef(el) {
+          _this3.dropdownContainer = el;
+        }
+      }, _this3.getCalendar(value, calendarColorStyle));
+    }
+  });
+  Object.defineProperty(this, "shouldDisable", {
+    configurable: true,
+    enumerable: true,
+    writable: true,
+    value: function value() {
+      var disabled = _this3.props.disabled;
+      var onDenied = _this3.state.onDenied;
+      return disabled || onDenied && (onDenied.disabled || onDenied.hideContent);
     }
-  }, [value]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_BaseMask.default, _extends({}, props, {
-    value: !valueState ? ' ' : valueState.format(_helpers.PT_BR_FORMAT),
-    mask: "00/00/0000",
-    onComplete: function onComplete(e, date) {
-      if (date) {
-        setValue(date, e);
+  });
+  Object.defineProperty(this, "openCalendar", {
+    configurable: true,
+    enumerable: true,
+    writable: true,
+    value: function value() {
+      var params = {
+        showCalendar: true
+      };
+
+      if (_this3.inputRef) {
+        params = _extends({}, params, {
+          inputDimensions: _this3.inputRef.getBoundingClientRect()
+        });
       }
-    },
-    onBlur: function onBlur(e) {
-      onInputBlur(e);
-    },
-    onFocus: function onFocus(e) {
-      onInputFocus(e);
-    },
-    onKeyDown: function onKeyDown(event) {
-      onInputKeyDown(event);
-    },
-    onChange: function onChange(e, date) {
-      if (date) onInputChange(e, date);
-    },
-    inputRef: function inputRef(el) {
-      _inputRef.current = el;
-    },
-    rightElements: getButtonOpen(),
-    required: required,
-    handlerSetOnDenied: function handlerSetOnDenied() {
-      return setOnDenied(onDenied);
+
+      _this3.setState(_extends({}, params));
     }
-  })), showCalendar && getWrapperComponent());
+  });
 };
 
+DatePicker.propTypes = {
+  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
+  showButtonOpen: _propTypes.default.bool,
+  shouldCloseOnSelect: _propTypes.default.bool,
+  setFocusOnSelect: _propTypes.default.bool,
+  openOnFocus: _propTypes.default.bool,
+  showCalendarInDialog: _propTypes.default.bool,
+  dialogSize: _propTypes.default.object,
+  calendarColorStyle: _propTypes.default.oneOf(['', _colorStyles.default.PRIMARY, _colorStyles.default.SUCCESS, _colorStyles.default.WARNING, _colorStyles.default.INFO, _colorStyles.default.DANGER]),
+  required: _propTypes.default.bool,
+  onComplete: _propTypes.default.func,
+  onBlur: _propTypes.default.func,
+  onFocus: _propTypes.default.func,
+  onChange: _propTypes.default.func,
+  name: _propTypes.default.string,
+  disabled: _propTypes.default.bool,
+  permissionAttr: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.arrayOf(_propTypes.default.object)])
+};
+DatePicker.defaultProps = {
+  value: '',
+  showButtonOpen: true,
+  openOnFocus: true,
+  shouldCloseOnSelect: true,
+  setFocusOnSelect: true,
+  showCalendarInDialog: false,
+  dialogSize: {
+    width: '350px',
+    height: '350px'
+  },
+  calendarColorStyle: '',
+  required: false,
+  onComplete: undefined,
+  onBlur: undefined,
+  onFocus: undefined,
+  onChange: undefined,
+  name: '',
+  disabled: false,
+  permissionAttr: undefined
+};
 var _default = DatePicker;
 exports.default = _default;