kwikid-components-react/components/kwikui/inputs/input-datetime/InputDateTime.js

KwikID's Component Library in React

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _moment = _interopRequireDefault(require("@date-io/moment"));
var _core = require("@material-ui/core");
var _pickers = require("@material-ui/pickers");
require("date-fns");
var _kwikidToolkit = require("kwikid-toolkit");
var _react = _interopRequireDefault(require("react"));
var _Messages = _interopRequireDefault(require("../../messages/Messages"));
var _InputDateTime = require("./InputDateTime.definition");
var _InputDateTime2 = require("./InputDateTime.style");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const inputDateTimeTheme = (0, _core.createTheme)({
  overrides: {
    MuiOutlinedInput: {
      notchedOutline: {
        border: "0px !important"
      }
    },
    MuiFormControl: {
      root: {
        width: "100% !important"
      }
    }
  }
});
const KwikUIInputDateTime = _ref => {
  let {
    customStyles = {
      wrapper: {},
      container: {},
      label: {},
      input: {}
    },
    disabled = false,
    id = "input-time",
    label = undefined,
    maxDateTime = undefined,
    messages = [],
    minDateTime = undefined,
    placeholder = undefined,
    postfix = "",
    prefix = "",
    required = true,
    shape = _InputDateTime.IKwikUIInputDateTimeShape.CURVED,
    size = _InputDateTime.IKwikUIInputDateTimeSize.M,
    updateOn = _InputDateTime.IKwikUIInputDateTimeUpdateOn.CHANGE,
    value = undefined,
    variant = _InputDateTime.IKwikUIInputDateTimeVariant.DATETIME,
    onInput = undefined,
    onInputValidate = undefined
  } = _ref;
  const [valid, setValid] = _react.default.useState(undefined);
  const [inputFocused, setInputFocused] = _react.default.useState(undefined);
  const handleOnInput = newValue => {
    if (onInputValidate) {
      const validation = onInputValidate(id, newValue);
      setValid(validation === null || validation === void 0 ? void 0 : validation.isValid);
    } else {
      setValid(true);
    }
    if (onInput && !disabled) {
      onInput(id, newValue);
    }
  };
  return /*#__PURE__*/_react.default.createElement(_InputDateTime2.KwikUIStyleInputDateTimeWrapper, {
    style: customStyles.wrapper
  }, /*#__PURE__*/_react.default.createElement(_InputDateTime2.KwikUIStyleInputDateTimeContainer, {
    size: size,
    shape: shape,
    disabled: disabled,
    className: `
          input input-time
          ${valid === false ? "input-error" : ""}
          ${valid !== false && inputFocused ? "input-focused" : ""}
        `,
    style: customStyles.container
  }, label && /*#__PURE__*/_react.default.createElement(_InputDateTime2.KwikUIStyleInputDateTimeLabel, {
    size: size,
    disabled: disabled,
    style: customStyles.label
  }, label, required && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "\xA0*")), (0, _kwikidToolkit.isNotEmptyValue)(prefix) && /*#__PURE__*/_react.default.createElement("div", {
    id: "prefix"
  }, prefix), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      ...{
        width: "100%"
      },
      ...customStyles.input
    }
  }, /*#__PURE__*/_react.default.createElement(_pickers.MuiPickersUtilsProvider, {
    utils: _moment.default
  }, /*#__PURE__*/_react.default.createElement(_core.MuiThemeProvider, {
    theme: inputDateTimeTheme
  }, variant === _InputDateTime.IKwikUIInputDateTimeVariant.DATE ? /*#__PURE__*/_react.default.createElement(_pickers.DatePicker, {
    id: id,
    value: value,
    format: "DD-MM-yyyy",
    disabled: disabled,
    placeholder: placeholder,
    inputVariant: "outlined",
    helperText: "",
    onFocus: () => {
      setInputFocused(true);
    },
    onChange: e => {
      if (updateOn === _InputDateTime.IKwikUIInputDateTimeUpdateOn.CHANGE) {
        handleOnInput(e);
      }
    },
    onBlur: e => {
      if (updateOn === _InputDateTime.IKwikUIInputDateTimeUpdateOn.BLUR) {
        handleOnInput(e);
      }
      setInputFocused(false);
    }
  }) : variant === _InputDateTime.IKwikUIInputDateTimeVariant.TIME ? /*#__PURE__*/_react.default.createElement(_pickers.TimePicker, {
    id: id,
    value: value,
    format: "hh:mm A",
    disabled: disabled,
    placeholder: placeholder,
    helperText: "",
    inputVariant: "outlined",
    onFocus: () => {
      setInputFocused(true);
    },
    onChange: e => {
      if (updateOn === _InputDateTime.IKwikUIInputDateTimeUpdateOn.CHANGE) {
        handleOnInput(e);
      }
    },
    onBlur: e => {
      if (updateOn === _InputDateTime.IKwikUIInputDateTimeUpdateOn.BLUR) {
        handleOnInput(e);
      }
      setInputFocused(false);
    }
  }) : /*#__PURE__*/_react.default.createElement(_pickers.DateTimePicker, {
    id: id,
    value: value,
    format: "DD-MM-yyyy hh:mm A",
    helperText: "",
    disabled: disabled,
    placeholder: placeholder,
    inputVariant: "outlined",
    onFocus: () => {
      setInputFocused(true);
    },
    onChange: e => {
      if (updateOn === _InputDateTime.IKwikUIInputDateTimeUpdateOn.CHANGE) {
        handleOnInput(e);
      }
    },
    onBlur: e => {
      if (updateOn === _InputDateTime.IKwikUIInputDateTimeUpdateOn.BLUR) {
        handleOnInput(e);
      }
      setInputFocused(false);
    }
  })))), (0, _kwikidToolkit.isNotEmptyValue)(postfix) && /*#__PURE__*/_react.default.createElement("div", {
    id: "postfix"
  }, postfix)), (0, _kwikidToolkit.isNotEmptyValue)(messages) && /*#__PURE__*/_react.default.createElement(_InputDateTime2.KwikUIStyleInputDateTimeMessagesContainer, null, /*#__PURE__*/_react.default.createElement(_Messages.default, {
    messages: messages,
    size: size
  })));
};
var _default = exports.default = KwikUIInputDateTime;