Proyectos de Subversion LeadersLinked - Antes de SPA

import React from "react";

import { useState, useEffect, useRef } from "react";

import styled from "styled-components";

import DateTime from "react-datetime";

import moment from "moment";

const DateTimeWrapper = styled.div`

  .rdtPicker {

    position: absolute;

  }

`;

const DateTimeInput = (props) => {

  // props destructuring

  const {

    dateFormat = "YYYY-MM-DD",

    timeFormat = false,

    viewMode = "days",

    onChange,

    isValidDate,

    settedDate,

  } = props;

  // states

  const [date, setDate] = useState("");

  const [formattedDate, setFormattedDate] = useState("");

  const [dateTimeOpen, setDateTimeOpen] = useState(false);

  // refs

  const dateTimeWrapperEl = useRef();

  const handleDateChange = (date) => {

    // onChange(date.format(dateFormat));

    const formattedDate = date.format(dateFormat);

    setFormattedDate(formattedDate);

    setDate(date);

    if (onChange) {

      onChange(formattedDate);

    }

    setDateTimeOpen(false);

  };

  const handleClickOutside = (e) => {

    if (

      !dateTimeWrapperEl.current.contains(e.target) &&

      dateTimeOpen &&

      !RegExp(/\brdt/).test(e.target.className)

    ) {

      setDateTimeOpen(false);

    }

  };

  useEffect(() => {

    addEventListener("click", handleClickOutside);

    return () => {

      removeEventListener("click", handleClickOutside);

    };

  }, [handleClickOutside]);

  useEffect(() => {

    setDate(moment(settedDate));

    setFormattedDate(moment(settedDate).format(dateFormat));

  }, [settedDate]);

  let isValidDateProp = {};

  if (isValidDate) {

    isValidDateProp = { ...isValidDateProp, isValidDate: isValidDate };

  }

  return (

    <React.Fragment>

      <DateTimeWrapper ref={dateTimeWrapperEl}>

        <input

          type="text"

          value={moment(date).locale("es").format(dateFormat)}

          onClick={(e) => {

            e.preventDefault();

            setDateTimeOpen(true);

          }}

          readOnly

        />

        <div

          style={{

            display: dateTimeOpen ? "block" : "none",

          }}

        >

          <DateTime

            onChange={(date) => {

              handleDateChange(date);

            }}

            value={date}

            dateFormat={dateFormat}

            timeFormat={timeFormat}

            viewMode={viewMode}

            input={false}

            // isValidDate={isValidDate}

            {...isValidDateProp}

          />

        </div>

      </DateTimeWrapper>

    </React.Fragment>

  );

};

export default DateTimeInput;