linear-react-components-ui 0.4.77-beta.9 → 1.0.0-rc.2

package/lib/inputs/date/index.js

@@ -1,18 +1,16 @@
 "use strict";
 
-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); }
+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); }
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 
 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"));
@@ -29,449 +27,295 @@ 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 }; }
+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; }
-
-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 _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 _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 _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 _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
-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 _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 _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+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 _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return 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 _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 _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 _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var CALENDAR_BUTTON_WIDTH = 24;
 
-var DatePicker = /*#__PURE__*/function (_Component) {
-  _inherits(DatePicker, _Component);
-
-  var _super = _createSuper(DatePicker);
-
-  function DatePicker(props) {
-    var _this;
-
-    _classCallCheck(this, DatePicker);
-
-    _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);
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      window.removeEventListener('resize', this.onScreenResize);
-      document.removeEventListener('click', this.onClickOutside);
-      document.removeEventListener('mousemove', this.onMouseMove);
-    }
-  }, {
-    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 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);
     }
+  };
 
-    return null;
-  }
-});
+  var openCalendar = function openCalendar() {
+    setShowCalendar(true);
 
-var _initialiseProps = function _initialiseProps() {
-  var _this3 = this;
+    if (_inputRef.current) {
+      setInputDimensions(_inputRef.current.getBoundingClientRect());
+    }
+  };
 
-  Object.defineProperty(this, "onScreenResize", {
-    configurable: true,
-    enumerable: true,
-    writable: true,
-    value: function value() {
-      var inputDimensions = _this3.inputRef.getBoundingClientRect();
+  var onMouseMove = function onMouseMove(event) {
+    var target = event.target;
+    setInsideDropdown(false);
 
-      _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
-        });
+    if (dropdownContainer !== undefined && dropdownContainer.current) {
+      if (target === dropdownContainer.current || dropdownContainer.current.contains(target)) {
+        setInsideDropdown(true);
       }
     }
-  });
-  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;
-        }
-      }
+  };
+
+  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);
     }
-  });
-  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
-          });
-        }
+  };
+
+  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);
       }
     }
-  });
-  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;
+  };
 
-      _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));
-      }
+  var setValue = function setValue(valueParam, e) {
+    var _inputRef$current2;
 
-      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;
+    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
+      }
+    }, 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);
         }
-      }, _this3.getCalendar(value, calendarColorStyle));
+      }, getCalendar(valueState, props === null || props === void 0 ? void 0 : props.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);
+
+    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;
+      }
+    }, 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);
     }
-  });
-  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()
-        });
+  }, [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);
       }
-
-      _this3.setState(_extends({}, params));
+    },
+    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);
     }
-  });
+  })), 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;
+exports.default = _default;