wini-web-components 0.3.1 → 0.4.0

package/src/component/checkbox/checkbox.tsx

@@ -1,59 +0,0 @@
-import React, { CSSProperties } from 'react';
-import './checkbox.css';
-
-interface CheckboxProps {
-    onChange?: (value: boolean) => void,
-    value?: boolean,
-    checkColor?: string,
-    disabled?: false,
-    style?: CSSProperties,
-    /** default 2.4rem **/ 
-    size?: number | string,
-}
-
-interface CheckboxState {
-    value?: boolean,
-}
-
-export class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
-    state: Readonly<CheckboxState> = {
-        value: this.props.value ?? false
-    }
-
-    componentDidUpdate(prevProps: Readonly<CheckboxProps>): void {
-        if (prevProps.value !== this.props.value) {
-            this.setState({ value: this.props.value })
-        }
-    }
-
-    render() {
-        let convertStyle: CSSProperties = {
-            width: this.props.size ?? '2.4rem',
-            height: this.props.size ?? '2.4rem',
-        }
-        if (this.props.style) {
-            delete this.props.style.width
-            delete this.props.style.minWidth
-            delete this.props.style.maxWidth
-            delete this.props.style.height
-            delete this.props.style.minHeight
-            delete this.props.style.maxHeight
-            convertStyle = {
-                ...this.props.style,
-                ...convertStyle
-            }
-        }
-        return <label className="checkbox-container row" style={convertStyle} >
-            <input type="checkbox" checked={this.state.value} disabled={this.props.disabled}
-                onChange={() => {
-                    const newValue = !this.state.value
-                    this.setState({ value: newValue })
-                    if (this.props.onChange) this.props.onChange(newValue)
-                }}
-            />
-            <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" >
-                <path d="M6.72 11.52 L10.8 15.6 L18 7.2" fill="none" strokeLinecap="round" stroke={this.props.checkColor ?? '#ffffff'} />
-            </svg>
-        </label>
-    }
-}

package/src/component/component-status.tsx

@@ -1,53 +0,0 @@
-import React from "react"
-
-export const enum ComponentStatus {
-    INFOR = 1,
-    ERROR = 2,
-    WARNING = 3,
-    SUCCSESS = 4,
-}
-
-export const getStatusIcon = (status: ComponentStatus) => {
-    switch (status) {
-        case ComponentStatus.ERROR:
-            return errorSvg
-        case ComponentStatus.WARNING:
-            return warningSvg
-        case ComponentStatus.SUCCSESS:
-            return successSvg
-        default:
-            return inforSvg
-    }
-}
-
-const inforSvg = (
-    <div style={{ width: '3.6rem', height: '3.6rem' }}>
-        <svg width='100%' height='100%' viewBox='0 0 36 36' fill='none' xmlns='http://www.w3.org/2000/svg' >
-            <path d='M18.0003 3.41669C15.116 3.41669 12.2965 4.27198 9.89826 5.87442C7.50005 7.47686 5.63087 9.75446 4.52709 12.4192C3.42331 15.084 3.13451 18.0162 3.69721 20.8451C4.25991 23.674 5.64884 26.2725 7.68836 28.312C9.72787 30.3515 12.3264 31.7404 15.1553 32.3031C17.9842 32.8658 20.9164 32.577 23.5811 31.4733C26.2459 30.3695 28.5235 28.5003 30.1259 26.1021C31.7284 23.7039 32.5837 20.8843 32.5837 18C32.5795 14.1336 31.0417 10.4267 28.3077 7.69266C25.5737 4.95867 21.8668 3.42087 18.0003 3.41669V3.41669ZM19.2496 26.1715H16.7401V15.5695H19.2496V26.1715ZM19.0418 12.2384C18.9034 12.3653 18.7407 12.463 18.5637 12.5256C18.3866 12.5883 18.1987 12.6146 18.0113 12.603C17.8204 12.6157 17.6289 12.5899 17.4481 12.5273C17.2673 12.4647 17.101 12.3664 16.9588 12.2384C16.8333 12.1032 16.7363 11.9441 16.6737 11.7706C16.611 11.5971 16.584 11.4127 16.5943 11.2285C16.5815 11.04 16.6073 10.8509 16.67 10.6727C16.7327 10.4945 16.8309 10.3309 16.9588 10.1919C17.1013 10.0644 17.2678 9.96649 17.4484 9.9039C17.6291 9.84131 17.8204 9.81526 18.0113 9.82728C18.1987 9.81637 18.3864 9.843 18.5633 9.90561C18.7403 9.96822 18.903 10.0655 19.0418 10.1919C19.1697 10.3309 19.268 10.4945 19.3307 10.6727C19.3934 10.8509 19.4191 11.04 19.4064 11.2285C19.4166 11.4127 19.3896 11.5971 19.327 11.7706C19.2644 11.9441 19.1674 12.1032 19.0418 12.2384Z' fill='#366AE2' />
-        </svg>
-    </div>
-)
-
-const errorSvg = (
-    <div style={{ width: '3.6rem', height: '3.6rem' }}>
-        <svg width='100%' height='100%' viewBox='0 0 36 36' fill='none' xmlns='http://www.w3.org/2000/svg' >
-            <path d='M18.0003 3.41669C15.116 3.41669 12.2965 4.27198 9.89826 5.87442C7.50005 7.47686 5.63087 9.75446 4.52709 12.4192C3.42331 15.084 3.13451 18.0162 3.69721 20.8451C4.25991 23.674 5.64884 26.2725 7.68836 28.312C9.72787 30.3515 12.3264 31.7404 15.1553 32.3031C17.9842 32.8658 20.9164 32.577 23.5811 31.4733C26.2459 30.3695 28.5235 28.5003 30.1259 26.1021C31.7284 23.7039 32.5837 20.8843 32.5837 18C32.5724 14.1357 31.0324 10.4329 28.2999 7.70044C25.5674 4.96797 21.8646 3.42791 18.0003 3.41669V3.41669ZM24.016 22.2972L22.2976 24.0156L18.0003 19.7184L13.7031 24.0156L11.9847 22.2972L16.2819 18L11.9847 13.7028L13.7031 11.9844L18.0003 16.2816L22.2976 11.9844L24.016 13.7028L19.7187 18L24.016 22.2972Z' fill='#E14337' />
-        </svg>
-    </div>
-)
-
-const warningSvg = (
-    <div style={{ width: '3.6rem', height: '3.6rem' }}>
-        <svg width='100%' height='100%' viewBox='0 0 36 36' fill='none' xmlns='http://www.w3.org/2000/svg' >
-            <path d='M32.1516 25.8877L21.3215 5.41379C21.0014 4.81074 20.5231 4.30622 19.938 3.95437C19.3529 3.60252 18.6831 3.41663 18.0003 3.41663C17.3176 3.41663 16.6477 3.60252 16.0626 3.95437C15.4775 4.30622 14.9993 4.81074 14.6792 5.41379L3.84901 25.8877C3.54781 26.459 3.39954 27.0984 3.41863 27.744C3.43771 28.3895 3.6235 29.0191 3.95793 29.5716C4.29235 30.1241 4.76404 30.5806 5.32713 30.8969C5.89022 31.2131 6.52555 31.3783 7.17136 31.3763H28.8293C29.4751 31.3783 30.1104 31.2131 30.6735 30.8969C31.2366 30.5806 31.7083 30.1241 32.0427 29.5716C32.3771 29.0191 32.5629 28.3895 32.582 27.744C32.6011 27.0984 32.4528 26.459 32.1516 25.8877ZM18.0003 27.7294C17.6397 27.7294 17.2871 27.6224 16.9873 27.4221C16.6874 27.2217 16.4537 26.9369 16.3157 26.6037C16.1776 26.2705 16.1415 25.9039 16.2119 25.5502C16.2823 25.1965 16.4559 24.8715 16.7109 24.6165C16.966 24.3615 17.2909 24.1878 17.6446 24.1175C17.9983 24.0471 18.3649 24.0832 18.6981 24.2212C19.0313 24.3593 19.3161 24.593 19.5165 24.8928C19.7168 25.1927 19.8238 25.5453 19.8238 25.9059C19.8238 26.3895 19.6317 26.8533 19.2897 27.1953C18.9477 27.5373 18.4839 27.7294 18.0003 27.7294ZM19.216 21.6512H16.7847L16.1769 11.926H19.8238L19.216 21.6512Z' fill='#FC6B03' />
-        </svg>
-    </div>
-)
-
-const successSvg = (
-    <div style={{ width: '3.6rem', height: '3.6rem' }}>
-        <svg width='100%' height='100%' viewBox='0 0 36 36' fill='none' xmlns='http://www.w3.org/2000/svg' >
-            <path d='M18.0003 3.41669C15.116 3.41669 12.2965 4.27198 9.89826 5.87442C7.50005 7.47686 5.63087 9.75446 4.52709 12.4192C3.42331 15.084 3.13451 18.0162 3.69721 20.8451C4.25991 23.674 5.64884 26.2725 7.68836 28.312C9.72787 30.3515 12.3264 31.7404 15.1553 32.3031C17.9842 32.8658 20.9164 32.577 23.5811 31.4733C26.2459 30.3695 28.5235 28.5003 30.1259 26.1021C31.7284 23.7039 32.5837 20.8843 32.5837 18C32.5724 14.1357 31.0324 10.4329 28.2999 7.70044C25.5674 4.96797 21.8646 3.42791 18.0003 3.41669V3.41669ZM15.5698 24.5795L8.99026 18L10.7087 16.2816L15.5698 21.1427L25.292 11.4205L27.0104 13.1389L15.5698 24.5795Z' fill='#39AC6D' />
-        </svg>
-    </div>
-)

package/src/component/date-picker/date-picker.css

@@ -1,114 +0,0 @@
-.date-picker-container {
-    border-radius: 0.4rem;
-    justify-content: start;
-    width: 100%;
-    height: 4rem;
-    max-height: 100%;
-    box-sizing: border-box;
-    padding: 0.8rem;
-    column-gap: 6px;
-    width: 16rem;
-    position: relative;
-    border: 0.5px solid #00358033;
-    border-radius: 4px;
-}
-
-.date-picker-container>.input-field-value {
-    width: 100% !important;
-    flex: 1;
-    display: flex;
-    font: inherit;
-    color: inherit;
-    font-size: inherit;
-    font-family: inherit;
-    font-weight: inherit;
-    line-height: inherit;
-    text-align: inherit;
-    text-overflow: inherit;
-}
-
-.date-picker-container.disabled {
-    background-color: var(--disabled-background) !important;
-    pointer-events: none !important;
-}
-
-.date-picker-container.helper-text {
-    overflow: visible !important;
-    border-color: var(--helper-text-color) !important;
-}
-
-.date-picker-container.helper-text::after {
-    content: attr(helper-text);
-    color: #e14337;
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    width: max-content;
-    font-size: inherit;
-    line-height: inherit;
-    font-family: inherit;
-    font-weight: inherit;
-    transform: translate(-7.5%, 92.5%) scale(0.85);
-}
-
-.date-picker-container .input-field-value {
-    flex: 1;
-    width: 100%;
-    background-color: transparent !important;
-    font: inherit;
-    color: inherit;
-    font-size: inherit;
-    font-family: inherit;
-    font-weight: inherit;
-    line-height: inherit;
-    text-align: inherit;
-    text-overflow: inherit;
-}
-
-.date-picker-container .input-field-value>input {
-    border: none;
-    outline: none;
-    transition: 0.4s;
-    background-color: transparent;
-    padding: 0;
-    min-width: 0;
-    width: 100%;
-    font: inherit;
-    color: inherit;
-    font-size: inherit;
-    font-family: inherit;
-    font-weight: inherit;
-    line-height: inherit;
-    text-align: inherit;
-    text-overflow: inherit;
-}
-
-.date-picker-container .input-field-value>input::placeholder {
-    opacity: 0.6;
-}
-
-.date-picker-popup-container {
-    position: absolute;
-}
-
-.date-picker-popup-container .picker-popup-footer {
-    justify-content: center;
-    gap: 0.8rem;
-    padding: 1.6rem;
-}
-
-.date-picker-popup-container .reset-value-button {
-    color: #00204D99;
-    background-color: #F2F5F8;
-    padding: 0.6rem 1.2rem;
-    border-radius: 2.4rem;
-    width: fit-content;
-}
-
-.date-picker-popup-container .apply-value-button {
-    color: #ffffff;
-    background-color: var(--infor-color);
-    padding: 0.6rem 1.2rem;
-    border-radius: 2.4rem;
-    width: fit-content;
-}

package/src/component/date-picker/date-picker.tsx

@@ -1,363 +0,0 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import React, { CSSProperties } from 'react'
-import ReactDOM from 'react-dom'
-import './date-picker.css'
-import { CalendarType, Calendar } from '../export-component'
-import { endDate, inRangeTime, startDate, today } from '../calendar/calendar'
-import { differenceInCalendarDays } from 'date-fns'
-
-const CalendarIcon = ({ color = '#00204D99', width = '1.6rem', height = '1.6rem' }: { color?: string, width?: string | number, height?: string | number }) => (
-    <svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 17 16' fill='none' style={{ width: width, height: height }}>
-        <path d='M12.3876 2.99967V1.88856C12.3876 1.74122 12.3291 1.59991 12.2249 1.49573C12.1207 1.39154 11.9794 1.33301 11.832 1.33301C11.6847 1.33301 11.5434 1.39154 11.4392 1.49573C11.335 1.59991 11.2765 1.74122 11.2765 1.88856V2.99967H12.3876Z' fill={color} />
-        <path d='M5.72092 2.99967V1.88856C5.72092 1.74122 5.66239 1.59991 5.5582 1.49573C5.45401 1.39154 5.31271 1.33301 5.16536 1.33301C5.01802 1.33301 4.87671 1.39154 4.77253 1.49573C4.66834 1.59991 4.60981 1.74122 4.60981 1.88856V2.99967H5.72092Z' fill={color} />
-        <path d='M13.4987 14.1108H3.4987C3.05667 14.1108 2.63275 13.9352 2.32019 13.6226C2.00763 13.3101 1.83203 12.8861 1.83203 12.4441V5.2219C1.83203 4.77987 2.00763 4.35595 2.32019 4.04339C2.63275 3.73082 3.05667 3.55523 3.4987 3.55523H13.4987C13.9407 3.55523 14.3646 3.73082 14.6772 4.04339C14.9898 4.35595 15.1654 4.77987 15.1654 5.2219V12.4441C15.1654 12.8861 14.9898 13.3101 14.6772 13.6226C14.3646 13.9352 13.9407 14.1108 13.4987 14.1108ZM14.0543 6.33301H2.94314V12.4441C2.94314 12.5915 3.00167 12.7328 3.10586 12.837C3.21005 12.9411 3.35136 12.9997 3.4987 12.9997H13.4987C13.646 12.9997 13.7873 12.9411 13.8915 12.837C13.9957 12.7328 14.0543 12.5915 14.0543 12.4441V6.33301Z' fill={color} />
-        <path d='M6.27648 7.44412H4.05425V9.11079H6.27648V7.44412Z' fill={color} />
-        <path d='M9.60981 7.44412H7.38759V9.11079H9.60981V7.44412Z' fill={color} />
-        <path d='M6.27648 10.2219H4.05425V11.8886H6.27648V10.2219Z' fill={color} />
-        <path d='M9.60981 10.2219H7.38759V11.8886H9.60981V10.2219Z' fill={color} />
-        <path d='M12.9431 7.44412H10.7209V9.11079H12.9431V7.44412Z' fill={color} />
-    </svg>
-)
-
-const dateToString = (x: Date, y: string = "dd/mm/yyyy") => {
-    let splitDateTime: Array<string> = y.split(" ");
-    let dateFormat = splitDateTime[0]
-    let timeFormat = splitDateTime[1]
-    if (dateFormat.includes('hh')) {
-        dateFormat = splitDateTime[1]
-        timeFormat = splitDateTime[0]
-    }
-    let dateConvert: string = dateFormat.split(y.includes("/") ? "/" : "-").map(type => {
-        switch (type.toLowerCase()) {
-            case "dd":
-                return x.getDate() < 10 ? `0${x.getDate()}` : `${x.getDate()}`;
-            case "mm":
-                return (x.getMonth() + 1) < 10 ? `0${(x.getMonth() + 1)}` : `${(x.getMonth() + 1)}`;
-            case "yyyy":
-                return `${x.getFullYear()}`;
-            default:
-                return ''
-        }
-    }).join(y.includes("/") ? "/" : "-");
-    if (timeFormat) {
-        let timeConvert = timeFormat.split(":").map(type => {
-            switch (type) {
-                case "hh":
-                    return x.getHours() < 10 ? `0${x.getHours()}` : `${x.getHours()}`;
-                case "mm":
-                    return x.getMinutes() < 10 ? `0${x.getMinutes()}` : `${x.getMinutes()}`;
-                case "ss":
-                    return x.getSeconds() < 10 ? `0${x.getSeconds()}` : `${x.getSeconds()}`;
-                default:
-                    return 'D'
-            }
-        }).join(":")
-        return dateConvert + " " + timeConvert;
-    }
-    return dateConvert;
-}
-
-const stringToDate = (_date: string, _format: string = "dd/MM/yyyy", _delimiter: string = "/") => {
-    let dayformat: string = _format;
-    let hourformat: string = '';
-    let day: string = _date;
-    let hours: string = '';
-    let isHour: boolean = false;
-    if (_format.trim().indexOf(" ") > -1) {
-        dayformat = _format.trim().split(" ")[0];
-        hourformat = _format.trim().split(" ")[1];
-        day = _date.trim().split(" ")[0];
-        hours = _date.trim().split(" ")[1] ?? '00:00:00';
-        isHour = true;
-    }
-    let formatLowerCase: string = dayformat.toLowerCase();
-    let formatItems: Array<string> = formatLowerCase.split(_delimiter);
-    let dateItems: Array<string> = day.split(_delimiter);
-    let monthIndex: number = formatItems.indexOf("mm");
-    let dayIndex: number = formatItems.indexOf("dd");
-    let yearIndex: number = formatItems.indexOf("yyyy");
-    let hour: number = 0;
-    let min: number = 0;
-    let sec: number = 0;
-    if (isHour) {
-        let tmpHour: Array<string> = hourformat.split(":");
-        let hourindex: number = tmpHour.indexOf("HH");
-        if (hourindex < 0) {
-            hourindex = tmpHour.indexOf("hh");
-        }
-        let mmindex: number = tmpHour.indexOf("mm");
-        let ssindex: number = tmpHour.indexOf("ss");
-        let time: Array<string> = hours.split(":");
-        hour = parseInt(time[hourindex] ?? '0'); min = parseInt(time[mmindex] ?? '0'); sec = parseInt(time[ssindex] ?? '0');
-    }
-    let month: number = parseInt(dateItems[monthIndex]);
-    month -= 1;
-    var formatedDate = new Date(parseInt(dateItems[yearIndex]), month, parseInt(dateItems[dayIndex] ?? '0'), hour, min, sec);
-    return formatedDate;
-}
-
-interface DatePickerProps {
-    value?: string,
-    min: Date,
-    max: Date,
-    onChange?: (e?: string) => void,
-    disabled?: boolean,
-    helperText?: string,
-    helperTextColor?: string,
-    placeholder?: string,
-    className?: string,
-    hideButtonToday?: boolean,
-    style?: CSSProperties,
-    /* default: DATE */
-    pickerType?: CalendarType,
-    /* y: dd/mm/yyy || dd/mm/yyyy hh:mm:ss || hh:mm:ss dd/mm/yyyy, default: dd/mm/yyyy */
-    formatDate?: string
-}
-
-interface DatePickerState {
-    value?: string,
-    offset: DOMRect,
-    isOpen: boolean,
-    style?: Object
-}
-
-
-export class DatePicker extends React.Component<DatePickerProps, DatePickerState> {
-    constructor(props: DatePickerProps) {
-        super(props)
-        this.state = {
-            value: props.value,
-            offset: {
-                x: 0,
-                y: 0,
-                height: 0,
-                width: 0,
-                bottom: 0,
-                left: 0,
-                right: 0,
-                top: 0,
-                toJSON: function () {
-                    throw new Error('Function not implemented.')
-                }
-            },
-            isOpen: false,
-        }
-    }
-
-    getNewValue = (value?: string) => {
-        const params: string = value ?? this.state?.value ?? ''
-        if (params.trim()?.length) {
-            switch (this.props.pickerType) {
-                case CalendarType.YEAR:
-                    return new Date(parseInt(params), 1, 1)
-                case CalendarType.MONTH:
-                    let splitParams: Array<string> = params.includes('/') ? params.split('/') : params.split('-')
-                    return new Date(parseInt(splitParams[1] ?? `${today.getFullYear()}`), parseInt(splitParams[0] ?? `${today.getMonth()}`), 1)
-                case CalendarType.DATETIME:
-                    return stringToDate(params, this.props.formatDate ?? 'dd/mm/yyyy hh:mm')
-                default:
-                    return stringToDate(params)
-            }
-        }
-        return undefined
-    }
-
-    componentDidUpdate(prevProps: DatePickerProps, prevState: DatePickerState) {
-        if (prevProps.value !== this.props.value) {
-            this.setState({
-                ...this.state,
-                value: this.props.value,
-            })
-        }
-        if (prevState.isOpen !== this.state.isOpen && this.state.isOpen) {
-            const thisPopupRect = document.body.querySelector('.date-picker-popup-container')?.getBoundingClientRect()
-            if (thisPopupRect) {
-                let style: { top?: string, left?: string, right?: string, bottom?: string, width?: string, height?: string } | undefined;
-                if (thisPopupRect.right > document.body.offsetWidth) {
-                    style = {
-                        top: this.state.offset.y + this.state.offset.height + 2 + 'px',
-                        right: document.body.offsetWidth - this.state.offset.left + 'px'
-                    }
-                }
-                if ((thisPopupRect.bottom - 20) > document.body.offsetHeight) {
-                    style = style ? {
-                        ...style,
-                        top: undefined,
-                        bottom: document.body.offsetHeight - this.state.offset.top + 'px'
-                    } : {
-                        left: this.state.offset.x + 'px',
-                        bottom: document.body.offsetHeight - this.state.offset.top + 'px'
-                    }
-                }
-                if (style) this.setState({ ...this.state, style: style })
-            }
-        }
-    }
-
-    render() {
-        let maxLength = 10
-        switch (this.props.pickerType) {
-            case CalendarType.YEAR:
-                maxLength = 4
-                break;
-            case CalendarType.MONTH:
-                maxLength = 7
-                break;
-            case CalendarType.DATETIME:
-                maxLength = 19
-                break;
-            default:
-                break;
-        }
-        return <label className={`date-picker-container row ${this.props.className ?? 'placeholder-2'} ${this.props.disabled ? 'disabled' : ''} ${this.props.helperText?.length && 'helper-text'}`}
-            helper-text={this.props.helperText}
-            style={this.props.style ? { ...({ '--helper-text-color': this.props.helperTextColor ?? '#e14337' } as CSSProperties), ...this.props.style } : ({ '--helper-text-color': this.props.helperTextColor ?? '#e14337' } as CSSProperties)}
-        >
-            <div className='input-field-value row' style={{ height: '4rem' }}>
-                <input
-                    autoComplete='off'
-                    value={this.state.value ?? ''}
-                    onChange={(ev) => this.setState({ ...this.state, value: ev.target.value })}
-                    placeholder={this.props.placeholder}
-                    maxLength={maxLength}
-                    onBlur={ev => {
-                        const inputValue = ev.target.value.trim()
-                        switch (this.props.pickerType) {
-                            case CalendarType.YEAR:
-                                let minYear = (this.props.min ?? startDate).getFullYear()
-                                let maxYear = (this.props.min ?? endDate).getFullYear()
-                                if (!isNaN(parseInt(inputValue)) && parseInt(inputValue) <= maxYear && parseInt(inputValue) >= minYear) {
-                                    this.setState({ ...this.state, isOpen: false, value: inputValue })
-                                    if (this.props.onChange) this.props.onChange(inputValue)
-                                } else {
-                                    this.setState({ ...this.state, isOpen: false, value: undefined })
-                                    if (this.props.onChange) this.props.onChange(undefined)
-                                }
-                                break
-                            case CalendarType.MONTH:
-                                if (inputValue.match(/[0-9]{1,2}(\/|-)[0-9]{4}/g)) {
-                                    let dateValue = stringToDate(`1/${inputValue}`, 'dd/MM/yyyy', '/')
-                                    if (inRangeTime(dateValue, this.props.min ?? startDate ?? startDate, this.props.min ?? endDate ?? endDate)) {
-                                        this.setState({ ...this.state, isOpen: false, value: dateToString(dateValue) })
-                                        if (this.props.onChange) this.props.onChange(dateToString(dateValue))
-                                    } else {
-                                        this.setState({ ...this.state, isOpen: false, value: undefined })
-                                        if (this.props.onChange) this.props.onChange(undefined)
-                                    }
-                                } else {
-                                    this.setState({ ...this.state, isOpen: false, value: undefined })
-                                    if (this.props.onChange) this.props.onChange(undefined)
-                                }
-                                break
-                            case CalendarType.DATETIME:
-                                let dateTimeValue: Date | undefined = undefined
-                                if (inputValue.match(/[0-9]{1,2}(\/|-)[0-9]{1,2}(\/|-)[0-9]{4}/g)) {
-                                    dateTimeValue = stringToDate(inputValue, this.props.formatDate ?? 'dd/mm/yyyy hh:mm', '/')
-                                    if (inRangeTime(dateTimeValue, this.props.min ?? startDate, this.props.min ?? endDate)) {
-                                    } else if (differenceInCalendarDays(this.props.min ?? startDate, dateTimeValue) > -1) {
-                                        dateTimeValue = this.props.min ?? startDate
-                                    } else if (differenceInCalendarDays(dateTimeValue, this.props.min ?? endDate) > -1) {
-                                        dateTimeValue = this.props.min ?? startDate
-                                    } else {
-                                        dateTimeValue = undefined
-                                    }
-                                }
-                                const stateDateTimeValue = dateTimeValue ? dateToString(dateTimeValue, this.props.formatDate ?? 'dd/mm/yyyy hh:mm') : dateTimeValue
-                                this.setState({ ...this.state, isOpen: false, value: stateDateTimeValue })
-                                if (this.props.onChange) this.props.onChange(stateDateTimeValue)
-                                break;
-                            default:
-                                let dateValue: Date | undefined = undefined
-                                if (inputValue.match(/[0-9]{1,2}(\/|-)[0-9]{1,2}(\/|-)[0-9]{4}/g)) {
-                                    dateValue = stringToDate(inputValue, 'dd/MM/yyyy', '/')
-                                    if (inRangeTime(dateValue, this.props.min ?? startDate, this.props.min ?? endDate)) {
-                                    } else if (differenceInCalendarDays(this.props.min ?? startDate, dateValue) > -1) {
-                                        dateValue = this.props.min ?? startDate
-                                    } else if (differenceInCalendarDays(dateValue, this.props.min ?? endDate) > -1) {
-                                        dateValue = this.props.max ?? endDate
-                                    } else {
-                                        dateValue = undefined
-                                    }
-                                }
-                                const stateDateValue = dateValue ? dateToString(dateValue) : dateValue
-                                this.setState({ ...this.state, isOpen: false, value: stateDateValue })
-                                if (this.props.onChange) this.props.onChange(stateDateValue)
-                                break;
-                        }
-                    }}
-                />
-            </div>
-            <button type='button' onClick={(ev) => {
-                if (!this.state.isOpen) {
-                    this.setState({
-                        ...this.state,
-                        isOpen: true,
-                        style: undefined,
-                        offset: ((ev.target as HTMLElement).closest('.date-picker-container') ?? (ev.target as HTMLElement)).getBoundingClientRect()
-                    })
-                }
-            }} className='row' style={{ padding: '0.4rem' }}><CalendarIcon /></button>
-            {this.state.isOpen &&
-                ReactDOM.createPortal(
-                    <div className={`popup-overlay hidden-overlay`} onClick={(ev) => {
-                        if ((ev.target as HTMLElement).classList.contains('popup-overlay'))
-                            this.setState({ ...this.state, isOpen: false })
-                    }}>
-                        <Calendar
-                            value={this.getNewValue()}
-                            type={this.props.pickerType ?? CalendarType.DATE}
-                            className='date-picker-popup-container'
-                            style={this.state.style ?? { top: this.state.offset.y + this.state.offset.height + 2 + 'px', left: this.state.offset.x + 'px', border: 'none', boxShadow: '-20px 20px 40px -4px rgba(145, 158, 171, 0.24), 0px 0px 2px 0px rgba(145, 158, 171, 0.24)' }}
-                            onSelect={(dateValue: Date) => {
-                                switch (this.props.pickerType) {
-                                    case CalendarType.YEAR:
-                                        this.setState({ ...this.state, value: dateValue.getFullYear().toString(), isOpen: false })
-                                        if (this.props.onChange) this.props.onChange(dateValue.getFullYear().toString())
-                                        break;
-                                    case CalendarType.MONTH:
-                                        var newValue = dateToString(dateValue)
-                                        this.setState({ ...this.state, value: newValue.split('/').slice(1).join('/'), isOpen: false })
-                                        if (this.props.onChange) this.props.onChange(newValue.split('/').slice(1).join('/'))
-                                        break;
-                                    case CalendarType.DATETIME:
-                                        var newValue = dateToString(dateValue, this.props.formatDate ?? 'dd/mm/yyyy hh:mm')
-                                        this.setState({ ...this.state, value: newValue })
-                                        break;
-                                    default:
-                                        var newValue = dateToString(dateValue)
-                                        this.setState({ ...this.state, value: newValue, isOpen: false })
-                                        if (this.props.onChange) this.props.onChange(newValue)
-                                        break;
-                                }
-                            }}
-                            footer={(this.props.pickerType === CalendarType.DATETIME || !this.props.hideButtonToday) && <div className='row picker-popup-footer' >
-                                {this.props.pickerType === undefined || this.props.pickerType === CalendarType.DATE || this.props.pickerType === CalendarType.DATETIME ?
-                                    <button
-                                        type='button'
-                                        className='row button-text-3'
-                                        style={{ color: 'var(--infor-color)', width: 'fit-content' }}
-                                        onClick={() => {
-                                            let format = this.props.formatDate ?? (this.props.pickerType === CalendarType.DATETIME ? 'dd/mm/yyyy hh:mm' : 'dd/mm/yyyy')
-                                            this.setState({ ...this.state, isOpen: false, value: dateToString(today, format) })
-                                            if (this.props.onChange) this.props.onChange(dateToString(today, format))
-                                        }}
-                                    >
-                                        Today
-                                    </button> : null}
-                                {this.props.pickerType === CalendarType.DATETIME ? <>
-                                    <div style={{ flex: 1 }}></div>
-                                    <button type='button' className='row button-primary' style={{ padding: '0.6rem 0.8rem' }} onClick={() => {
-                                        this.setState({ ...this.state, isOpen: false })
-                                        if (this.props.onChange) this.props.onChange(this.state.value)
-                                    }} >
-                                        <div className='button-text-3'>Submit</div>
-                                    </button>
-                                </> : null}
-                            </div>}
-                        />
-                    </div>,
-                    document.body
-                )}
-        </label>
-    }
-}