@wulperstudio/cms/node/components/InputDatePickerLabelOut/InputDatePickerLabelOut.js

Wulper Studio Library Components CMS

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _material = require("@mui/material");
var _DatePicker = require("@mui/x-date-pickers/DatePicker");
var _AdapterDateFns = require("@mui/x-date-pickers/AdapterDateFns");
var _LocalizationProvider = require("@mui/x-date-pickers/LocalizationProvider");
var _base = require("../../base");
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["variant", "size", "backgroundColor", "error", "errorMessage", "label", "disabledHoverVariantOutAndFlo", "id", "helperNode", "errorVariant"],
  _excluded2 = ["variant"];
var Localization = function Localization(_ref) {
  var children = _ref.children;
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_LocalizationProvider.LocalizationProvider, {
    dateAdapter: _AdapterDateFns.AdapterDateFns,
    children: children
  });
};
var InputDatePickerLabelOut = function InputDatePickerLabelOut(_ref2) {
  var _ref2$variant = _ref2.variant,
    variant = _ref2$variant === void 0 ? 'divider' : _ref2$variant,
    size = _ref2.size,
    backgroundColor = _ref2.backgroundColor,
    error = _ref2.error,
    errorMessage = _ref2.errorMessage,
    label = _ref2.label,
    disabledHoverVariantOutAndFlo = _ref2.disabledHoverVariantOutAndFlo,
    id = _ref2.id,
    helperNode = _ref2.helperNode,
    errorVariant = _ref2.errorVariant,
    props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
  var _React$useState = _react["default"].useState(false),
    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
    onFocusInput = _React$useState2[0],
    setOnFocusInput = _React$useState2[1];
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
    children: [variant === 'labelOut' && label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.InputLabel, {
      variant: variant,
      htmlFor: id,
      focused: onFocusInput,
      children: label
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_base.WrapperInputVariant, {
      variant: variant,
      error: error,
      size: size,
      backgroundColor: backgroundColor,
      disabledHoverVariantOutAndFlo: disabledHoverVariantOutAndFlo,
      children: [variant !== 'labelOut' && label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.InputLabel, {
        variant: variant,
        htmlFor: id,
        focused: onFocusInput,
        children: label
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Localization, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DatePicker.DatePicker, Object.assign({
          slots: {
            textField: _base.BaseInputVariant
          },
          slotProps: {
            textField: function textField(_ref3) {
              var _ = _ref3.variant,
                params = (0, _objectWithoutProperties2["default"])(_ref3, _excluded2);
              return Object.assign({}, params, {
                onFocus: function onFocus(e) {
                  setOnFocusInput(true);
                  params.onFocus(e);
                },
                onBlur: function onBlur(e) {
                  setOnFocusInput(false);
                  params.onBlur(e);
                },
                variant: variant,
                fullWidth: true
              });
            }
          }
        }, props))
      })]
    }), helperNode, error && /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.ErrorAlert, {
      variant: errorVariant,
      children: errorMessage
    })]
  });
};
var _default = exports["default"] = InputDatePickerLabelOut;