jamespot-react-components 1.0.16 → 1.0.67

package/src/components/Form/Input/JRCFormDateTime/JRCFormDateTime.tsx

@@ -1,1079 +0,0 @@
-import * as React from 'react';
-import { Field, FieldArray } from 'redux-form';
-import { StyledDescription, JRCWritableFormInputProps } from '../JRCFormFieldRender';
-import FormLabel from '../../Common/FormLabel';
-import { ControlsProps, useControls } from '../ReduxFormControls';
-import { useIntl } from 'react-intl';
-import styled from 'styled-components';
-import moment from 'moment';
-import { ClickAwayListener } from '../../Common/ClickAwayListener';
-
-export type JRCFormDateTimeInputCustomProps = React.ComponentPropsWithoutRef<'input'>;
-
-export interface JRCFormDateTimeCustomMulti {
-    isMulti?: boolean;
-}
-
-export type JRCFormDateTimeCustomFieldProps = JRCFormDateTimeInputCustomProps &
-    ControlsProps &
-    JRCFormDateTimeCustomMulti;
-
-export interface JRCFormDateTimeCustomProps {
-    input?: any;
-    label?: string | JSX.Element;
-    htmlFor?: string;
-    description?: string;
-    range?: boolean;
-    isMulti?: boolean;
-    start?: string;
-    end?: string;
-    name?: string;
-    id?: string;
-}
-
-const Container = styled.div`
-    position: absolute;
-    max-width: 300px;
-    top: 32px;
-    padding: 0px 10px;
-    border: 1px solid #657786;
-    border-radius: 5px;
-    background-color: white;
-    z-index: 99;
-`;
-
-const DaysStyled = styled.div`
-    display: flex;
-    flex: 1;
-    flex-wrap: wrap;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-`;
-
-const DayStyled = styled.div`
-    width: calc(100% / 7);
-    display: flex;
-    font-size: 16;
-    color: black;
-    align-items: center;
-    justify-content: center;
-    padding: 8px 0px;
-    cursor: pointer;
-    &:hover {
-        background-color: #f5f8fa;
-    }
-`;
-
-const HeadingStyled = styled.div`
-    display: flex;
-    flex: 1;
-    width: 100%;
-    flex-direction: row;
-    justify-content: space-between;
-    alignitems: center;
-    padding: 15px;
-    border-top-right-radius: 12px;
-    border-top-left-radius: 12px;
-`;
-
-const HeadingDate = styled.span`
-    display: flex;
-    flexdirection: row;
-    flex: 1;
-`;
-
-const HeadingFormat = styled.span`
-    fontsize: 16;
-    color: #657786;
-    margin-right: 10px;
-    text-transform: capitalize;
-`;
-
-const Labels = styled.div`
-    width: calc(100% / 7);
-    display: flex;
-    font-size: 16;
-    color: black;
-    align-items: center;
-    justify-content: center;
-    padding: 8px 0px;
-`;
-
-const Label = styled.span`
-    font-size: 16px;
-`;
-
-const Arrow = styled.span`
-    font-size: 28px;
-    color: #aab8c2;
-    cursor: pointer;
-    &:hover {
-        color: #657786;
-    }
-`;
-
-const Bullet = styled.span`
-    font-size: 22px;
-    transform: translateY(2px);
-    color: #aab8c2;
-    padding-right: 8px;
-    padding-left: 8px;
-    cursor: pointer;
-    &:hover {
-        color: #657786;
-    }
-`;
-
-const EditDisplay = styled.div`
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-`;
-
-const ContainerSelect = styled.div`
-    position: relative;
-    display: flex;
-    flex: 1;
-    width: 100%;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: center;
-`;
-
-const HideSelect = styled.select`
-    width: 50%;
-    font-size: 0px;
-    margin: 15px 0px;
-    text-align: center;
-    text-align-last: center;
-    -moz-text-align-last: center;
-    border: 0px;
-    outline: 0px;
-    height: 30px;
-    border: 1px solid #e3e3e3;
-    -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
-    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
-    -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-    -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-    -o-transition: border linear 0.2s, box-shadow linear 0.2s;
-    transition: border linear 0.2s, box-shadow linear 0.2s;
-    @-moz-document url-prefix() {
-        -moz-appearance: none;
-        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")
-            no-repeat center right;
-    }
-`;
-
-const SelectedMonth = styled.div`
-    padding: 5px 15px;
-    margin-right: 5px;
-    margin-bottom: 5px;
-    border-radius: 15px;
-    cursor: pointer;
-    &:hover {
-        background-color: #aab8c2 !important;
-    }
-`;
-
-const ContainerMonth = styled.div`
-    display: flex;
-    flex: 1;
-    flex-directyion: row;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: center;
-    margin: 5px 0px;
-`;
-
-const DoubleDot = styled.span`
-    padding: 0px 1px;
-`;
-
-const ContainerHours = styled.div`
-    position: absolute;
-    transform: translate(0%, 0px);
-    -webkit-transform: translate(0%, 0px);
-    -ms-transform: translate(0%, 0px);
-`;
-
-const InputSchedule = styled.input`
-    width: 35px;
-    margin: 0px !important;
-    padding: 0px !important;
-    text-align: center;
-    border: none !important;
-    box-shadow: none !important;
-    -moz-appearance: textfield;
-    &::-webkit-inner-spin-button {
-        -webkit-appearance: none !important;
-        margin: 0 !important;
-    }
-`;
-
-const InputDate = styled.div`
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    padding: 6px 10px;
-    max-width: 300px;
-    width: 100%;
-    background-color: #fff;
-    border-radius: 4px;
-    border: 1px solid #e3e3e3;
-    -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
-    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
-    -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-    -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-    -o-transition: border linear 0.2s, box-shadow linear 0.2s;
-    transition: border linear 0.2s, box-shadow linear 0.2s;
-`;
-
-const SpanDate = styled.span`
-    color: #657786;
-`;
-
-const IconDate = styled.div`
-    height: 18px;
-    cursor: pointer;
-    margin-left: 8px;
-`;
-
-const InputMultiDateTime = styled.div`
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: flex-start;
-    padding: 6px 10px;
-    background-color: #fff;
-    border-radius: 4px;
-    border: 1px solid #e3e3e3;
-    -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
-    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
-    -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-    -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-    -o-transition: border linear 0.2s, box-shadow linear 0.2s;
-    transition: border linear 0.2s, box-shadow linear 0.2s;
-`;
-
-const MultiDateTime = styled.div`
-    display: flex;
-    flex-wrap: wrap;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: baseline;
-`;
-
-const IconPlus = styled.div`
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    padding: 7px 11px;
-    background-color: #e3e3e3;
-    border-radius: 4px;
-    cursor: pointer;
-    &:hover {
-        background-color: #aab8c2;
-    }
-`;
-
-const IconCross = styled.div`
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    height: 25px;
-    width: 25px;
-    padding-top: 2px;
-    padding-right: 1px;
-    margin: 3px 2px;
-    background-color: #e3e3e3;
-    border-radius: 50%;
-    cursor: pointer;
-    &:hover {
-        background-color: #aab8c2;
-    }
-`;
-
-const ContainerMulti = styled.div`
-    display: flex;
-    flex-direction: row;
-`;
-
-const Minute = ({ input, selectedMinute, setSelectedMinute, selectedHour, startDate, endDate, ranged }: any) => {
-    const handleChangeMinute = (event: any) => {
-        if (event.target.value >= 0 && event.target.value <= 59) {
-            let m = '';
-            let value = event.target.value;
-
-            if (event.target.value.length > 2) {
-                value = event.target.value.slice(-2);
-            }
-
-            if (value === '0') {
-                m = '00';
-            } else if (value === '1') {
-                m = '01';
-            } else if (value === '2') {
-                m = '02';
-            } else if (value === '3') {
-                m = '03';
-            } else if (value === '4') {
-                m = '04';
-            } else if (value === '5') {
-                m = '05';
-            } else if (value === '6') {
-                m = '06';
-            } else if (value === '7') {
-                m = '07';
-            } else if (value === '8') {
-                m = '08';
-            } else if (value === '9') {
-                m = '09';
-            }
-
-            setSelectedMinute(value);
-            if (input !== undefined) {
-                !ranged
-                    ? input.onChange(`${startDate.format('YYYY-MM-DD')}T${selectedHour}:${value}`)
-                    : input.onChange([
-                          `${startDate.format('YYYY-MM-DD')}T${selectedHour}:${value}`,
-                          `${endDate.format('YYYY-MM-DD')}T${selectedHour}:${value}`,
-                      ]);
-            }
-
-            if (m !== '') {
-                setSelectedMinute(m);
-                if (input !== undefined) {
-                    !ranged
-                        ? input.onChange(`${startDate.format('YYYY-MM-DD')}T${selectedHour}:${m}`)
-                        : input.onChange([
-                              `${startDate.format('YYYY-MM-DD')}T${selectedHour}:${m}`,
-                              `${endDate.format('YYYY-MM-DD')}T${selectedHour}:${m}`,
-                          ]);
-                }
-            }
-        } else if (event.target.value > 59) {
-            setSelectedMinute('59');
-            if (input !== undefined) {
-                !ranged
-                    ? input.onChange(`${startDate.format('YYYY-MM-DD')}T${selectedHour}:59`)
-                    : input.onChange([
-                          `${startDate.format('YYYY-MM-DD')}T${selectedHour}:59`,
-                          `${endDate.format('YYYY-MM-DD')}T${selectedHour}:59`,
-                      ]);
-            }
-        } else {
-            setSelectedMinute('00');
-            if (input !== undefined) {
-                !ranged
-                    ? input.onChange(`${startDate.format('YYYY-MM-DD')}T${selectedHour}:00`)
-                    : input.onChange([
-                          `${startDate.format('YYYY-MM-DD')}T${selectedHour}:00`,
-                          `${endDate.format('YYYY-MM-DD')}T${selectedHour}:00`,
-                      ]);
-            }
-        }
-    };
-
-    return (
-        <InputSchedule
-            key="minute"
-            name="minute"
-            type="number"
-            value={selectedMinute}
-            onChange={handleChangeMinute}
-            min="0"
-            max="59"
-        />
-    );
-};
-
-const Hour = ({
-    input,
-    setSelectedHours,
-    setSelectedHour,
-    selectedMinute,
-    selectedHour,
-    startDate,
-    endDate,
-    ranged,
-}: any) => {
-    const handleChangeHour = (event: any) => {
-        if (event.target.value >= 0 && event.target.value <= 23) {
-            let h = '';
-            let value = event.target.value;
-
-            if (event.target.value.length > 2) {
-                value = event.target.value.slice(-2);
-            }
-
-            if (value === '0') {
-                h = '00';
-            } else if (value === '1') {
-                h = '01';
-            } else if (value === '2') {
-                h = '02';
-            } else if (value === '3') {
-                h = '03';
-            } else if (value === '4') {
-                h = '04';
-            } else if (value === '5') {
-                h = '05';
-            } else if (value === '6') {
-                h = '06';
-            } else if (value === '7') {
-                h = '07';
-            } else if (value === '8') {
-                h = '08';
-            } else if (value === '9') {
-                h = '09';
-            }
-
-            setSelectedHours(`${value}:00`);
-            setSelectedHour(value);
-            if (input !== undefined) {
-                !ranged
-                    ? input.onChange(`${startDate.format('YYYY-MM-DD')}T${value}:${selectedMinute}`)
-                    : input.onChange([
-                          `${startDate.format('YYYY-MM-DD')}T${value}:${selectedMinute}`,
-                          `${endDate.format('YYYY-MM-DD')}T${value}:${selectedMinute}`,
-                      ]);
-            }
-
-            if (h !== '') {
-                setSelectedHours(`${h}:00`);
-                setSelectedHour(h);
-                if (input !== undefined) {
-                    !ranged
-                        ? input.onChange(`${startDate.format('YYYY-MM-DD')}T${selectedHour}:${h}`)
-                        : input.onChange([
-                              `${startDate.format('YYYY-MM-DD')}T${selectedHour}:${h}`,
-                              `${endDate.format('YYYY-MM-DD')}T${selectedHour}:${h}`,
-                          ]);
-                }
-            }
-        } else if (event.target.value > 23) {
-            setSelectedHours(`23:${selectedMinute}`);
-            setSelectedHour(`23`);
-            if (input !== undefined) {
-                !ranged
-                    ? input.onChange(`${startDate.format('YYYY-MM-DD')}T23:${selectedMinute}`)
-                    : input.onChange([
-                          `${startDate.format('YYYY-MM-DD')}T23:${selectedMinute}`,
-                          `${endDate.format('YYYY-MM-DD')}T23:${selectedMinute}`,
-                      ]);
-            }
-        } else {
-            setSelectedHours(`00:${selectedMinute}`);
-            setSelectedHour(`00`);
-            if (input !== undefined) {
-                !ranged
-                    ? input.onChange(`${startDate.format('YYYY-MM-DD')}T23:${selectedMinute}`)
-                    : input.onChange([
-                          `${startDate.format('YYYY-MM-DD')}T23:${selectedMinute}`,
-                          `${endDate.format('YYYY-MM-DD')}T00:${selectedMinute}`,
-                      ]);
-            }
-        }
-    };
-
-    return (
-        <InputSchedule
-            key="hour"
-            name="hour"
-            type="number"
-            value={selectedHour}
-            onChange={handleChangeHour}
-            min="0"
-            max="23"
-        />
-    );
-};
-
-const Hours = ({
-    input,
-    setSelectedHours,
-    setSelectedHour,
-    setSelectedMinute,
-    selectedHours,
-    startDate,
-    endDate,
-    ranged,
-}: any) => {
-    const hours = new Array(24).fill(0).reduce((acc, cur, index) => {
-        return acc.concat([
-            moment({ hour: index }).format('HH:mm'),
-            moment({ hour: index, minute: 30 }).format('HH:mm'),
-        ]);
-    }, []);
-
-    const handleChange = (event: any) => {
-        setSelectedHours(event.target.value);
-        setSelectedHour(event.target.value.charAt(0) + event.target.value.charAt(1));
-        setSelectedMinute(event.target.value.charAt(3) + event.target.value.charAt(4));
-        if (input !== undefined) {
-            !ranged
-                ? input.onChange(`${startDate.format('YYYY-MM-DD')}T${event.target.value}`)
-                : input.onChange([
-                      `${startDate.format('YYYY-MM-DD')}T${event.target.value}`,
-                      `${endDate.format('YYYY-MM-DD')}T${event.target.value}`,
-                  ]);
-        }
-    };
-
-    return (
-        <HideSelect value={selectedHours} onChange={handleChange}>
-            {hours.map((ho: string, i: number) => (
-                <option key={`${i}_${ho}`} value={ho}>
-                    {ho}
-                </option>
-            ))}
-        </HideSelect>
-    );
-};
-
-const SelectMonth = ({ m, selectedMonth, changeMonth, i }: any) => {
-    let className: any = {};
-
-    if (m == selectedMonth) {
-        className = {
-            backgroundColor: '#657786',
-            color: 'white',
-            fontWeight: '400',
-        };
-    } else {
-        className = {
-            backgroundColor: '#E1E8ED',
-        };
-    }
-
-    return (
-        <SelectedMonth
-            style={{ ...className }}
-            onClick={() => {
-                moment().set('month', i);
-                changeMonth(i);
-            }}>
-            {m}
-        </SelectedMonth>
-    );
-};
-
-const Months = ({ selectedMonth, changeMonth, switchs }: any) => (
-    <ContainerMonth style={switchs ? { display: 'none' } : { display: 'flex' }}>
-        {moment.months().map((m: string, i: number) => (
-            <SelectMonth key={i} m={m} i={i} selectedMonth={selectedMonth} changeMonth={changeMonth} />
-        ))}
-    </ContainerMonth>
-);
-
-const HeadingMonth = ({ date, changeMonth, switchs, setSwitchs }: any) => (
-    <HeadingStyled style={switchs ? { display: 'flex' } : { display: 'none' }}>
-        <HeadingDate>
-            <HeadingFormat>{date.format('MMMM')}</HeadingFormat>
-            <HeadingFormat>{date.format('YYYY')}</HeadingFormat>
-        </HeadingDate>
-
-        <EditDisplay>
-            <Arrow onClick={() => changeMonth(date.month() - 1)}>&lsaquo;</Arrow>
-            <Bullet onClick={() => setSwitchs(!switchs)}>&#8226;</Bullet>
-            <Arrow onClick={() => changeMonth(date.month() + 1)}>&rsaquo;</Arrow>
-        </EditDisplay>
-    </HeadingStyled>
-);
-
-const HeadingYear = ({ date, changeYear, switchs, setSwitchs }: any) => (
-    <HeadingStyled style={switchs ? { display: 'none' } : { display: 'flex' }}>
-        <HeadingDate>
-            <HeadingFormat>{date.format('YYYY')}</HeadingFormat>
-        </HeadingDate>
-
-        <EditDisplay>
-            <Arrow onClick={() => changeYear(date.year() - 1)}>&lsaquo;</Arrow>
-            <Bullet onClick={() => setSwitchs(!switchs)}>&#8226;</Bullet>
-            <Arrow onClick={() => changeYear(date.year() + 1)}>&rsaquo;</Arrow>
-        </EditDisplay>
-    </HeadingStyled>
-);
-
-const DateTime = ({ input, range, start, end, isMulti, name }: JRCFormDateTimeCustomProps) => {
-    const ranged = range || false;
-    moment.locale(window.navigator.language);
-    const [display, setDisplay] = React.useState(false);
-    const [switchs, setSwitchs] = React.useState(true);
-    const [selectedHours, setSelectedHours] = React.useState(
-        typeof input.value === 'string' && input.value !== '' ? input.value.slice(-5) : `00:00`,
-    );
-    const [selectedHour, setSelectedHour] = React.useState(
-        typeof input.value === 'string' && input.value !== '' ? input.value.slice(11, 13) : `00`,
-    );
-    const [selectedMinute, setSelectedMinute] = React.useState(
-        typeof input.value === 'string' && input.value !== '' ? input.value.slice(-2) : `00`,
-    );
-    const [selectedMonth, setSelectedMonth] = React.useState(
-        typeof input.value === 'string' && input.value !== ''
-            ? moment()
-                  .month(parseInt(input.value.slice(6, 7)) - 1)
-                  .format('MMMM')
-            : `MM`,
-    );
-    const inputDate =
-        typeof input.value === 'string' && input.value !== '' && moment(input.value.slice(0, 10)).isValid()
-            ? moment(input.value.slice(0, 10))
-            : undefined;
-    const [date, setDate] = React.useState(inputDate ? inputDate : moment());
-    //const current = moment();
-    const s = start ? moment(start).isValid() : false;
-    const e = end ? moment(end).isValid() : false;
-    const [startDate, setStartDate] = React.useState(s ? moment(start) : null);
-    const [endDate, setEndDate] = React.useState(e ? moment(end) : null);
-
-    const changeDisplay = () => {
-        setDisplay(!display);
-    };
-
-    const resetDate = () => {
-        setDate(moment());
-    };
-
-    const changeYear = (year: number) => {
-        const d = date.clone();
-        d.year(year);
-        setDate(d);
-    };
-
-    const changeMonth = (month: number) => {
-        const d = date.clone();
-        d.month(month);
-        setDate(d);
-        const newMonth = d.format('MMMM');
-        setSelectedMonth(newMonth);
-    };
-
-    const changeDate = (date: any) => {
-        let start = null;
-        let end = null;
-        if (ranged) {
-            // FIXME TYPESCRIPT-STRICT
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
-            let start = startDate.clone();
-            // FIXME TYPESCRIPT-STRICT
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
-            let end = endDate.clone();
-            if (ranged) {
-                if (startDate === null || date.isBefore(startDate, 'day') || !startDate.isSame(endDate, 'day')) {
-                    start = moment(date);
-                    end = moment(date);
-                } else if (date.isSame(startDate, 'day') && date.isSame(endDate, 'day')) {
-                    // FIXME TYPESCRIPT-STRICT
-                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                    // @ts-ignore
-                    start = null;
-                    // FIXME TYPESCRIPT-STRICT
-                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                    // @ts-ignore
-                    end = null;
-                } else if (date.isAfter(startDate, 'day')) {
-                    end = moment(date);
-                }
-            } else {
-                start = moment(date);
-                end = moment(date);
-            }
-
-            setStartDate(start);
-            setEndDate(end);
-        } else {
-            start = date.clone();
-            end = date.clone();
-        }
-        if (input !== undefined) {
-            !ranged
-                ? input.onChange(`${start.format('YYYY-MM-DD')}T${selectedHours}`)
-                : input.onChange([
-                      `${start.format('YYYY-MM-DD')}T${selectedHours}`,
-                      `${end.format('YYYY-MM-DD')}T${selectedHours}`,
-                  ]);
-            setDate(date);
-        }
-    };
-
-    const Day = ({ currentDate, date, startDate, endDate, onClick }: any) => {
-        let className: any = {};
-
-        if (moment().isSame(date, 'day')) {
-            className = {
-                ...className,
-                fontWeight: 'normal',
-            };
-        }
-
-        if (date.isSame(startDate, 'day')) {
-            className = {
-                ...className,
-                backgroundColor: '#AAB8C2',
-                borderTopLeftRadius: '12px',
-                borderBottomLeftRadius: '12px',
-                fontWeight: 'normal',
-                color: 'white',
-            };
-        }
-
-        if (date.isBetween(startDate, endDate, 'day')) {
-            className = {
-                ...className,
-                backgroundColor: '#E1E8ED',
-                fontWeight: 'normal',
-                color: 'white',
-            };
-        }
-
-        if (date.isSame(endDate, 'day')) {
-            className = {
-                ...className,
-                backgroundColor: '#AAB8C2',
-                borderBottomRightRadius: '12px',
-                borderTopRightRadius: '12px',
-                fontWeight: 'normal',
-                color: 'white',
-            };
-        }
-
-        if (!date.isSame(currentDate, 'month')) {
-            className = {
-                ...className,
-                fontWeight: 'normal',
-                color: 'rgba(0, 0, 0, 0.2)',
-            };
-        }
-
-        if (date.isSame(currentDate, 'day') && date.isSame(currentDate, 'month')) {
-            className = {
-                ...className,
-                fontWeight: '900',
-                color: 'black',
-            };
-            if (startDate == null && endDate == null)
-                className = {
-                    ...className,
-                    backgroundColor: '#E1E8ED',
-                    borderRadius: '12px',
-                };
-        }
-
-        return (
-            <DayStyled style={{ ...className }} onClick={() => onClick(date)}>
-                <span
-                    style={{ ...className }}
-                    // currentDate={date}
-                >
-                    {date.date()}
-                </span>
-            </DayStyled>
-        );
-    };
-
-    const Days = ({ date, startDate, endDate, onClick }: any) => {
-        const thisDate = moment(date);
-        const daysInMonth = moment(date).daysInMonth();
-        const firstDayDate = moment(date).startOf('month');
-        const previousMonth = moment(date).subtract(1, 'month');
-        const previousMonthDays = previousMonth.daysInMonth();
-        const nextsMonth = moment(date).add(1, 'month');
-        const days = [];
-        const labels = [];
-
-        for (let i = 1; i <= 7; i++) {
-            labels.push(
-                <Labels key={i}>
-                    <Label>{moment().day(i).format('dd')}</Label>
-                </Labels>,
-            );
-        }
-
-        for (let i = firstDayDate.day(); i > 1; i--) {
-            previousMonth.date(previousMonthDays - i + 2);
-
-            days.push(
-                <Day
-                    key={moment(previousMonth).format('DD MM YYYY')}
-                    onClick={(date: any) => onClick(date)}
-                    currentDate={date}
-                    date={moment(previousMonth)}
-                    startDate={startDate}
-                    endDate={endDate}
-                />,
-            );
-        }
-
-        for (let i = 1; i <= daysInMonth; i++) {
-            thisDate.date(i);
-
-            days.push(
-                <Day
-                    key={moment(thisDate).format('DD MM YYYY')}
-                    onClick={(date: any) => onClick(date)}
-                    currentDate={date}
-                    date={moment(thisDate)}
-                    startDate={startDate}
-                    endDate={endDate}
-                />,
-            );
-        }
-
-        const daysCount = days.length;
-        for (let i = 1; i <= 42 - daysCount; i++) {
-            nextsMonth.date(i);
-            days.push(
-                <Day
-                    key={moment(nextsMonth).format('DD MM YYYY')}
-                    onClick={(date: any) => onClick(date)}
-                    currentDate={date}
-                    date={moment(nextsMonth)}
-                    startDate={startDate}
-                    endDate={endDate}
-                />,
-            );
-        }
-        return (
-            <DaysStyled style={switchs ? { display: 'flex' } : { display: 'none' }}>
-                {labels.concat()}
-                {days.concat()}
-            </DaysStyled>
-        );
-    };
-
-    const handleClickAway = () => {
-        setDisplay(false);
-    };
-
-    const className: any = {
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'flex-start',
-        alignItems: 'flex-start',
-        position: 'relative',
-    };
-    return (
-        <ClickAwayListener onClickAway={handleClickAway} style={className} key={`ClickAwayListener-${name}`}>
-            <InputDate>
-                <SpanDate>
-                    {inputDate ? date.format('YYYY-MM-DD') : `YYYY-MM-DD`} {selectedHour}:{selectedMinute}
-                </SpanDate>
-                <IconDate onClick={changeDisplay}>
-                    <svg
-                        version="1.1"
-                        id="Capa_3"
-                        xmlns="http://www.w3.org/2000/svg"
-                        x="0px"
-                        y="0px"
-                        width="18px"
-                        height="18px"
-                        viewBox="0 0 36.447 36.447"
-                        enableBackground="new 0 0 36.447 36.447">
-                        <g>
-                            <g>
-                                <path
-                                    d="M30.224,3.948h-1.098V2.75c0-1.517-1.197-2.75-2.67-2.75c-1.474,0-2.67,1.233-2.67,2.75v1.197h-2.74V2.75
-                  c0-1.517-1.197-2.75-2.67-2.75c-1.473,0-2.67,1.233-2.67,2.75v1.197h-2.74V2.75c0-1.517-1.197-2.75-2.67-2.75
-                  c-1.473,0-2.67,1.233-2.67,2.75v1.197H6.224c-2.343,0-4.25,1.907-4.25,4.25v24c0,2.343,1.907,4.25,4.25,4.25h24
-                  c2.344,0,4.25-1.907,4.25-4.25v-24C34.474,5.855,32.567,3.948,30.224,3.948z M25.286,2.75c0-0.689,0.525-1.25,1.17-1.25
-                  c0.646,0,1.17,0.561,1.17,1.25v4.896c0,0.689-0.524,1.25-1.17,1.25c-0.645,0-1.17-0.561-1.17-1.25V2.75z M17.206,2.75
-                  c0-0.689,0.525-1.25,1.17-1.25s1.17,0.561,1.17,1.25v4.896c0,0.689-0.525,1.25-1.17,1.25s-1.17-0.561-1.17-1.25V2.75z M9.125,2.75
-                  c0-0.689,0.525-1.25,1.17-1.25s1.17,0.561,1.17,1.25v4.896c0,0.689-0.525,1.25-1.17,1.25s-1.17-0.561-1.17-1.25V2.75z
-                  M31.974,32.198c0,0.965-0.785,1.75-1.75,1.75h-24c-0.965,0-1.75-0.785-1.75-1.75v-22h27.5V32.198z"
-                                />
-                                <rect x="6.724" y="14.626" width="4.595" height="4.089" />
-                                <rect x="12.857" y="14.626" width="4.596" height="4.089" />
-                                <rect x="18.995" y="14.626" width="4.595" height="4.089" />
-                                <rect x="25.128" y="14.626" width="4.596" height="4.089" />
-                                <rect x="6.724" y="20.084" width="4.595" height="4.086" />
-                                <rect x="12.857" y="20.084" width="4.596" height="4.086" />
-                                <rect x="18.995" y="20.084" width="4.595" height="4.086" />
-                                <rect x="25.128" y="20.084" width="4.596" height="4.086" />
-                                <rect x="6.724" y="25.54" width="4.595" height="4.086" />
-                                <rect x="12.857" y="25.54" width="4.596" height="4.086" />
-                                <rect x="18.995" y="25.54" width="4.595" height="4.086" />
-                                <rect x="25.128" y="25.54" width="4.596" height="4.086" />
-                            </g>
-                        </g>
-                    </svg>
-                </IconDate>
-            </InputDate>
-            {display && (
-                <Container style={isMulti ? { minWidth: '300px' } : { maxWidth: '300px' }}>
-                    <div>
-                        <HeadingMonth
-                            switchs={switchs}
-                            setSwitchs={setSwitchs}
-                            date={date}
-                            changeMonth={(month: any) => changeMonth(month)}
-                            resetDate={() => resetDate()}
-                        />
-                        <Days
-                            onClick={(date: any) => changeDate(date)}
-                            date={date}
-                            startDate={startDate}
-                            endDate={endDate}
-                        />
-
-                        <HeadingYear
-                            changeYear={changeYear}
-                            switchs={switchs}
-                            setSwitchs={setSwitchs}
-                            date={date}
-                            resetDate={() => resetDate()}
-                        />
-                        <Months selectedMonth={selectedMonth} changeMonth={changeMonth} switchs={switchs} />
-                    </div>
-
-                    <ContainerSelect>
-                        <ContainerHours>
-                            <Hour
-                                input={input}
-                                setSelectedHour={setSelectedHour}
-                                setSelectedHours={setSelectedHours}
-                                selectedMinute={selectedMinute}
-                                selectedHour={selectedHour}
-                                startDate={startDate}
-                                endDate={endDate}
-                                ranged={ranged}
-                            />
-                            <DoubleDot>:</DoubleDot>
-                            <Minute
-                                input={input}
-                                setSelectedMinute={setSelectedMinute}
-                                selectedHour={selectedHour}
-                                selectedMinute={selectedMinute}
-                                startDate={startDate}
-                                endDate={endDate}
-                                ranged={ranged}
-                            />
-                        </ContainerHours>
-                        <Hours
-                            input={input}
-                            setSelectedHours={setSelectedHours}
-                            setSelectedHour={setSelectedHour}
-                            setSelectedMinute={setSelectedMinute}
-                            selectedHours={selectedHours}
-                            startDate={startDate}
-                            endDate={endDate}
-                            ranged={ranged}
-                        />
-                    </ContainerSelect>
-                </Container>
-            )}
-        </ClickAwayListener>
-    );
-};
-
-export const JRCFormDateTimeCustomMulti = (props: any) => {
-    const { fields } = props;
-
-    return (
-        <InputMultiDateTime>
-            <MultiDateTime>
-                {fields.map((f: any, i: number) => (
-                    <ContainerMulti key={`multi-${i}`}>
-                        <Field name={f} component={DateTime} {...props} id={i} />
-                        <IconCross
-                            onClick={() => {
-                                fields.remove(i);
-                            }}>
-                            &#10005;
-                        </IconCross>
-                    </ContainerMulti>
-                ))}
-            </MultiDateTime>
-            {fields.length < 3 && <IconPlus onClick={() => fields.push('')}>&#43;</IconPlus>}
-        </InputMultiDateTime>
-    );
-};
-
-export const JRCFormDateTimeCustom = (props: JRCFormDateTimeCustomProps) => {
-    const multi = props.isMulti || false;
-    return (
-        <React.Fragment>
-            <FormLabel htmlFor={props.htmlFor}>{props.label}</FormLabel>
-            {multi ? <JRCFormDateTimeCustomMulti {...props} /> : <DateTime {...props} id="single" />}
-            {props.description && <StyledDescription>{props.description}</StyledDescription>}
-        </React.Fragment>
-    );
-};
-
-// export const JRCFormDateTimeCustomField = (props: JRCFormDateTimeCustomProps) => {
-//     const intl = useIntl();
-//     const validate = useControls({ ...props, intl });
-//     const multi = props.isMulti || false;
-//     return (
-//         <React.Fragment>
-//             {multi ? (
-//                 <FieldArray
-//                     component={JRCFormDateTimeCustom}
-//                     name={props.name}
-//                     validate={validate}
-//                     {...props}
-//                 />
-//             ) : (
-//                 <Field
-//                     component={JRCFormDateTimeCustom}
-//                     name={props.name}
-//                     validate={validate}
-//                     {...props}
-//                 />
-//             )}
-//         </React.Fragment>
-//     );
-// };
-
-export interface JRCFormDateProps extends JRCWritableFormInputProps {
-    range?: boolean;
-    isMulti?: boolean;
-    start?: string;
-    end?: string;
-}
-
-/**
- * Component used as a <input type="text"/>
- * @param props JRCFormDateProps
- * validation props: minValue, maxValue, required
- * @returns JSX.Element
- */
-export const JRCFormDatetimeField = (props: JRCFormDateProps) => {
-    const validate = useControls({
-        intl: useIntl(),
-        required: props.required,
-    });
-    return (
-        <>
-            {props.isMulti ? (
-                // FIXME TYPESCRIPT-STRICT
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-ignore
-                <FieldArray component={JRCFormDateTimeCustom} name={props.name} validate={validate} {...props} />
-            ) : (
-                // FIXME TYPESCRIPT-STRICT
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-ignore
-                <Field component={JRCFormDateTimeCustom} name={props.name} validate={validate} {...props} />
-            )}
-        </>
-        // <Field
-        //     component={JRCFormFieldRender}
-        //     renderInputFct={(input: WrappedFieldInputProps) => JRCFormDateTimeCustom(props, input)}
-        //     validate={validate}
-        //     htmlFor={props.name}
-        //     {...props}
-        // />
-    );
-};