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

Wulper Studio Library Components CMS

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["variant", "size", "backgroundColor", "error", "errorMessage", "label", "disabledHoverVariantOutAndFlo", "id", "helperNode", "errorVariant"],
  _excluded2 = ["variant"];
import React from 'react';
import { Box } from '@mui/material';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { InputLabel, ErrorAlert, BaseInputVariant, WrapperInputVariant } from '../../base';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var Localization = function Localization(_ref) {
  var children = _ref.children;
  return /*#__PURE__*/_jsx(LocalizationProvider, {
    dateAdapter: 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 = _objectWithoutProperties(_ref2, _excluded);
  var _React$useState = React.useState(false),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    onFocusInput = _React$useState2[0],
    setOnFocusInput = _React$useState2[1];
  return /*#__PURE__*/_jsxs(Box, {
    children: [variant === 'labelOut' && label && /*#__PURE__*/_jsx(InputLabel, {
      variant: variant,
      htmlFor: id,
      focused: onFocusInput,
      children: label
    }), /*#__PURE__*/_jsxs(WrapperInputVariant, {
      variant: variant,
      error: error,
      size: size,
      backgroundColor: backgroundColor,
      disabledHoverVariantOutAndFlo: disabledHoverVariantOutAndFlo,
      children: [variant !== 'labelOut' && label && /*#__PURE__*/_jsx(InputLabel, {
        variant: variant,
        htmlFor: id,
        focused: onFocusInput,
        children: label
      }), /*#__PURE__*/_jsx(Localization, {
        children: /*#__PURE__*/_jsx(DatePicker, Object.assign({
          slots: {
            textField: BaseInputVariant
          },
          slotProps: {
            textField: function textField(_ref3) {
              var _ = _ref3.variant,
                params = _objectWithoutProperties(_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__*/_jsx(ErrorAlert, {
      variant: errorVariant,
      children: errorMessage
    })]
  });
};
export default InputDatePickerLabelOut;