\n {`${displayOf} `}\n \n {totalResult > 0\n ? currentPage * slice + 1 - slice\n : 0}{\" \"}\n \n {`${at} `}\n \n {currentPage * slice > totalResult\n ? totalResult\n : currentPage * slice}{\" \"}\n \n {`${outOf} `}\n \n {items}\n \n
\n{error}
\n )}\n \n );\n}\n\nDatePicker.defaultProps = {\n range: false,\n multiDates: false,\n getValue: () => {},\n emptyDates: false,\n startDatePlaceholderText: \"Début\",\n endDatePlaceholderText: \"Fin\",\n disableAfterDay: 1,\n disableBeforeDay: 0,\n displayFormat: \"DD/MM/YYYY\",\n formatDate: \"YYYY-MM-DD\",\n nameStart: \"start\",\n nameEnd: \"end\",\n showClearDate: false,\n errorFormat: false,\n disabled: false,\n placeholder: \"01/01/1970\",\n language: \"fr\",\n anchorDirection: \"left\",\n value: {},\n error: \"\",\n color: \"light\",\n centerInputValue: true,\n};\n\nDatePicker.propTypes = {\n range: PropTypes.bool,\n multiDates: PropTypes.bool,\n getValue: PropTypes.func,\n emptyDates: PropTypes.bool,\n disabled: PropTypes.bool,\n startDatePlaceholderText: PropTypes.string,\n endDatePlaceholderText: PropTypes.string,\n disableAfterDay: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),\n disableBeforeDay: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),\n displayFormat: PropTypes.string,\n formatDate: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n name: PropTypes.string.isRequired,\n nameStart: PropTypes.string,\n nameEnd: PropTypes.string,\n errorFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n showClearDate: PropTypes.bool,\n placeholder: PropTypes.string,\n language: PropTypes.string,\n anchorDirection: PropTypes.oneOf([\"left\", \"right\"]),\n value: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.shape({}),\n PropTypes.arrayOf(PropTypes.string),\n ]),\n error: PropTypes.string,\n color: PropTypes.oneOf([\"light\", \"white\", \"gray\"]),\n centerInputValue: PropTypes.bool,\n};\n\nexport default DatePicker;\n","import { useEffect, useRef, useState } from \"react\";\nimport moment from \"moment/moment\";\n\nfunction useDayPickerSingleDate(value, getValue, format) {\n const inputRef = useRef();\n\n const [focused, setFocused] = useState(false);\n const [selectedDates, setSelectedDates] = useState([]);\n\n const dateInputDiv = document.querySelector(\".react-tag-input\");\n\n // recalculate height date input after scroll and focus on bottom of the date input div\n function dateInputScroll() {\n const dateInputDivHeight = dateInputDiv.scrollHeight;\n\n setTimeout(() => {\n dateInputDiv.scrollTop = dateInputDivHeight;\n }, 100);\n }\n\n function handleClickOutside(event) {\n if (inputRef?.current?.contains(event.target)) {\n setFocused(true);\n } else if (\n event?.target?.className?.includes &&\n !event.target.className.includes(\"react-tag-input__tag__remove\")\n ) {\n setFocused(false);\n }\n }\n\n const formatDateISO = (date) =>\n moment.utc(date).startOf(\"day\").toISOString();\n const formatDate = (date) => moment.utc(date).startOf(\"day\").format(format);\n\n const handleDateChange = (date) => {\n const formattedDate = formatDateISO(date);\n dateInputScroll();\n\n if (selectedDates.includes(formattedDate)) {\n setSelectedDates(\n selectedDates.filter(\n (selectedDate) => selectedDate !== formattedDate\n )\n );\n } else {\n setSelectedDates([...selectedDates, formattedDate]);\n }\n };\n\n const handleDatesChange = (dates) => {\n setSelectedDates(\n dates.map((date) =>\n moment.utc(date, \"DD/MM/YYYY\").startOf(\"day\").toISOString()\n )\n );\n dateInputScroll();\n };\n\n const isDayHighlighted = (day) =>\n selectedDates.includes(day.utc().startOf(\"day\").toISOString());\n\n const isOutsideRange = (day) => moment(day).isBefore(moment(), \"day\");\n const hidePlaceholderInput = !!selectedDates?.length;\n\n useEffect(() => {\n document.addEventListener(\"click\", handleClickOutside);\n\n return () => {\n document.removeEventListener(\"click\", handleClickOutside);\n };\n }, []);\n\n useEffect(() => {\n getValue(selectedDates.map((date) => formatDateISO(date)));\n }, [selectedDates]);\n\n useEffect(() => {\n if (\n Array.isArray(value) &&\n JSON.stringify(value.map((date) => formatDateISO(date))) !==\n JSON.stringify(selectedDates)\n ) {\n setSelectedDates(value.map((day) => formatDateISO(day)));\n }\n }, [value]);\n\n const formattedDates = selectedDates?.map((date) => formatDate(date));\n\n return {\n formattedDates,\n hidePlaceholderInput,\n focused,\n inputRef,\n isDayHighlighted,\n isOutsideRange,\n handleDateChange,\n handleDatesChange,\n };\n}\n\nexport default useDayPickerSingleDate;\n","import React, { useState, useEffect } from \"react\";\nimport PropTypes from \"prop-types\";\nimport ReactTagInput from \"@pathofdev/react-tag-input\";\nimport \"@pathofdev/react-tag-input/build/index.css\";\n\nfunction InputTag({\n placeholder,\n getValue,\n name,\n value,\n removeOnBackspace,\n maxTags,\n editable,\n readOnly,\n}) {\n const [tags, setTags] = useState(value);\n\n useEffect(() => {\n if (\n value &&\n (value.length !== tags.length ||\n JSON.stringify(value) !== JSON.stringify(tags))\n ) {\n setTags(value);\n }\n }, [value]);\n\n return (\n\n
{label}
\n {subText && (\n