design-zystem 1.0.188 → 1.0.190
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +2 -2
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -125,7 +125,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
125
125
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
126
126
|
|
|
127
127
|
"use strict";
|
|
128
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ Col: () => (/* binding */ Col),\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! styled-components */ \"./node_modules/styled-components/dist/styled-components.browser.esm.js\");\nvar _excluded = [\"children\"];\nvar _templateObject;\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\nfunction _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }\n\n\nvar shouldForwardPropCol = function shouldForwardPropCol(prop) {\n return ![\"gap\", \"justifyContent\", \"alignItems\", \"size\", \"margin\", \"padding\", \"fullHeight\", \"fullWidth\"].includes(prop);\n};\nvar StyledCol = styled_components__WEBPACK_IMPORTED_MODULE_1__[\"default\"].div.withConfig({\n shouldForwardProp: shouldForwardPropCol\n})(_templateObject || (_templateObject = _taggedTemplateLiteral([\"\\n display: flex;\\n flex-direction: column;\\n overflow: visible;\\n max-height: 100%;\\n height: \", \";\\n width: \", \";\\n flex: \", \";\\n max-width: \", \";\\n gap: \", \";\\n margin: \", \";\\n padding: \", \";\\n justify-content: \", \";\\n align-items: \", \";\\n box-sizing: border-box;\\n\"])), function (props) {\n return props.fullHeight ? \"100%\" : \"fit-content\";\n}, function (props) {\n return props.fullWidth ? \"100%\" : \"fit-content\";\n}, function (props) {\n return props.size ? \"1 1 \".concat(props.size / 12 * 100, \"%\") : \"auto\";\n}, function (props) {\n return props.size ? \"\".concat(props.size / 12 * 100, \"%\") : \"100%\";\n}, function (props) {\n return props.gap ? \"\".concat(props.gap, \"px\") : \"0\";\n}, function (props) {\n return props.margin || \"0\";\n}, function (props) {\n return props.padding || \"0\";\n}, function (props) {\n return props.justifyContent || \"flex-start\";\n}, function (props) {\n return props.alignItems || \"flex-start\";\n});\nvar Col = function Col(props) {\n var children = props.children,\n otherProps = _objectWithoutProperties(props, _excluded);\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(StyledCol, otherProps, children);\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Col);\n\n//# sourceURL=webpack://YourLibraryName/./src/Components/Col/Col.jsx?");
|
|
128
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ Col: () => (/* binding */ Col),\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! styled-components */ \"./node_modules/styled-components/dist/styled-components.browser.esm.js\");\nvar _excluded = [\"children\"];\nvar _templateObject;\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\nfunction _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }\n\n\nvar shouldForwardPropCol = function shouldForwardPropCol(prop) {\n return ![\"gap\", \"justifyContent\", \"alignItems\", \"size\", \"margin\", \"padding\", \"fullHeight\", \"fullWidth\"].includes(prop);\n};\nvar StyledCol = styled_components__WEBPACK_IMPORTED_MODULE_1__[\"default\"].div.withConfig({\n shouldForwardProp: shouldForwardPropCol\n})(_templateObject || (_templateObject = _taggedTemplateLiteral([\"\\n display: flex;\\n flex-direction: column;\\n overflow: visible;\\n max-height: 100%;\\n height: \", \";\\n width: \", \";\\n flex: \", \";\\n max-width: \", \";\\n gap: \", \";\\n margin: \", \";\\n padding: \", \";\\n justify-content: \", \";\\n align-items: \", \";\\n box-sizing: border-box;\\n\"])), function (props) {\n return props.fullHeight ? \"100%\" : \"fit-content\";\n}, function (props) {\n return props.fullWidth ? \"100%\" : props.size ? \"\".concat(props.size / 12 * 100, \"%\") : \"fit-content\";\n}, function (props) {\n return props.size ? \"1 1 \".concat(props.size / 12 * 100, \"%\") : \"auto\";\n}, function (props) {\n return props.fullWidth ? \"100%\" : props.size ? \"\".concat(props.size / 12 * 100, \"%\") : \"100%\";\n}, function (props) {\n return props.gap ? \"\".concat(props.gap, \"px\") : \"0\";\n}, function (props) {\n return props.margin || \"0\";\n}, function (props) {\n return props.padding || \"0\";\n}, function (props) {\n return props.justifyContent || \"flex-start\";\n}, function (props) {\n return props.alignItems || \"flex-start\";\n});\nvar Col = function Col(props) {\n var children = props.children,\n otherProps = _objectWithoutProperties(props, _excluded);\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(StyledCol, otherProps, children);\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Col);\n\n//# sourceURL=webpack://YourLibraryName/./src/Components/Col/Col.jsx?");
|
|
129
129
|
|
|
130
130
|
/***/ }),
|
|
131
131
|
|
|
@@ -136,7 +136,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
136
136
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
137
137
|
|
|
138
138
|
"use strict";
|
|
139
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ DatePicker: () => (/* binding */ DatePicker)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _DatePicker_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./DatePicker.css */ \"./src/Components/DatePicker/DatePicker.css\");\n/* harmony import */ var _Button_Button__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Button/Button */ \"./src/Components/Button/Button.jsx\");\n/* harmony import */ var _Icon_Icon__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Icon/Icon */ \"./src/Components/Icon/Icon.jsx\");\n/* harmony import */ var _index__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../index */ \"./src/index.jsx\");\n/* harmony import */ var _data_colors__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../data/colors */ \"./src/data/colors.js\");\nfunction _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(r, a) { if (r) { if (\"string\" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return \"Object\" === t && r.constructor && (t = r.constructor.name), \"Map\" === t || \"Set\" === t ? Array.from(r) : \"Arguments\" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }\nfunction _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }\nfunction _iterableToArrayLimit(r, l) { var t = null == r ? null : \"undefined\" != typeof Symbol && r[Symbol.iterator] || r[\"@@iterator\"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t[\"return\"] && (u = t[\"return\"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }\nfunction _arrayWithHoles(r) { if (Array.isArray(r)) return r; }\n\n\n\n\n\n\nvar DatePicker = function DatePicker(_ref) {\n var onChange = _ref.onChange,\n _ref$size = _ref.size,\n size = _ref$size === void 0 ? \"s\" : _ref$size;\n var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),\n _useState2 = _slicedToArray(_useState, 2),\n isOpen = _useState2[0],\n setIsOpen = _useState2[1];\n var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null),\n _useState4 = _slicedToArray(_useState3, 2),\n startDate = _useState4[0],\n setStartDate = _useState4[1];\n var _useState5 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null),\n _useState6 = _slicedToArray(_useState5, 2),\n endDate = _useState6[0],\n setEndDate = _useState6[1];\n var _useState7 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(new Date()),\n _useState8 = _slicedToArray(_useState7, 2),\n currentMonth = _useState8[0],\n setCurrentMonth = _useState8[1];\n var _useState9 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),\n _useState0 = _slicedToArray(_useState9, 2),\n isSelectingEnd = _useState0[0],\n setIsSelectingEnd = _useState0[1];\n var ref = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n var isFiltered = !!startDate && !!endDate;\n var toggleCalendar = function toggleCalendar() {\n return setIsOpen(function (prev) {\n return !prev;\n });\n };\n var resetDates = function resetDates() {\n setStartDate(null);\n setEndDate(null);\n setIsSelectingEnd(false);\n if (onChange) onChange(null, null);\n };\n var handleDateSelect = function handleDateSelect(date) {\n if (!startDate || startDate && endDate) {\n setStartDate(date);\n setEndDate(null);\n setIsSelectingEnd(true);\n } else if (isSelectingEnd) {\n if (date >= startDate) {\n setEndDate(date);\n setIsSelectingEnd(false);\n if (onChange) onChange(startDate, date);\n } else {\n setStartDate(date);\n setEndDate(null);\n }\n }\n };\n var navigateMonth = function navigateMonth(direction) {\n var newMonth = new Date(currentMonth);\n newMonth.setMonth(currentMonth.getMonth() + direction);\n setCurrentMonth(newMonth);\n };\n var getDaysInMonth = function getDaysInMonth(date) {\n var year = date.getFullYear();\n var month = date.getMonth();\n var firstDay = new Date(year, month, 1);\n var lastDay = new Date(year, month + 1, 0);\n var daysInMonth = lastDay.getDate();\n var startingDayOfWeek = firstDay.getDay();\n var days = [];\n for (var i = startingDayOfWeek - 1; i >= 0; i--) {\n var prevDate = new Date(year, month, -i);\n days.push({\n date: prevDate,\n isCurrentMonth: false\n });\n }\n for (var day = 1; day <= daysInMonth; day++) {\n var d = new Date(year, month, day);\n days.push({\n date: d,\n isCurrentMonth: true\n });\n }\n var remainingDays = 42 - days.length;\n for (var _day = 1; _day <= remainingDays; _day++) {\n var nextDate = new Date(year, month + 1, _day);\n days.push({\n date: nextDate,\n isCurrentMonth: false\n });\n }\n return days;\n };\n var isDateInRange = function isDateInRange(date) {\n if (!startDate) return false;\n if (!endDate) return date.getTime() === startDate.getTime();\n return date >= startDate && date <= endDate;\n };\n var isDateStart = function isDateStart(date) {\n return startDate && date.getTime() === startDate.getTime();\n };\n var isDateEnd = function isDateEnd(date) {\n return endDate && date.getTime() === endDate.getTime();\n };\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {\n var handleClickOutside = function handleClickOutside(event) {\n if (ref.current && !ref.current.contains(event.target)) {\n setIsOpen(false);\n }\n };\n document.addEventListener(\"mousedown\", handleClickOutside);\n return function () {\n return document.removeEventListener(\"mousedown\", handleClickOutside);\n };\n }, []);\n var monthNames = [\"Janvier\", \"Février\", \"Mars\", \"Avril\", \"Mai\", \"Juin\", \"Juillet\", \"Août\", \"Septembre\", \"Octobre\", \"Novembre\", \"Décembre\"];\n var dayNames = [\"Lun\", \"Mar\", \"Mer\", \"Jeu\", \"Ven\", \"Sam\", \"Dim\"];\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"date-picker-container\",\n ref: ref\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Button_Button__WEBPACK_IMPORTED_MODULE_2__.Button, {\n onClick: toggleCalendar,\n size: size,\n iconLeft: \"calendar\"\n }), isFiltered && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"span\", {\n style: {\n position: \"absolute\",\n top: -6,\n right: -6,\n background: _data_colors__WEBPACK_IMPORTED_MODULE_5__.colors.red_950,\n borderRadius: \"50%\",\n width: 18,\n height: 18,\n fontSize: 30,\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n zIndex: 2\n },\n onClick: resetDates\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_Icon__WEBPACK_IMPORTED_MODULE_3__.Icon, {\n name: \"xmark\",\n size: \"s\",\n color: _data_colors__WEBPACK_IMPORTED_MODULE_5__.colors.white\n })), isOpen && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"date-picker-popup\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"date-picker-content\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"calendar-container\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"calendar-header\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"button\", {\n onClick: function onClick() {\n return navigateMonth(-1);\n },\n className: \"calendar-nav-button\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"svg\", {\n className: \"calendar-nav-icon\",\n fill: \"none\",\n stroke: \"currentColor\",\n viewBox: \"0 0 24 24\",\n xmlns: \"http://www.w3.org/2000/svg\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"path\", {\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\",\n strokeWidth: 2,\n d: \"M15 19l-7-7 7-7\"\n }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"h3\", {\n className: \"calendar-month-title\"\n }, monthNames[currentMonth.getMonth()], \" \", currentMonth.getFullYear()), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"button\", {\n onClick: function onClick() {\n return navigateMonth(1);\n },\n className: \"calendar-nav-button\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"svg\", {\n className: \"calendar-nav-icon\",\n fill: \"none\",\n stroke: \"currentColor\",\n viewBox: \"0 0 24 24\",\n xmlns: \"http://www.w3.org/2000/svg\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"path\", {\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\",\n strokeWidth: 2,\n d: \"M9 5l7 7-7 7\"\n })))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"calendar-days-header\"\n }, dayNames.map(function (day) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n key: day,\n className: \"calendar-day-name\"\n }, day);\n })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"calendar-days-grid\"\n }, getDaysInMonth(currentMonth).map(function (day, index) {\n var isInRange = isDateInRange(day.date);\n var isStart = isDateStart(day.date);\n var isEnd = isDateEnd(day.date);\n var isToday = (0,_index__WEBPACK_IMPORTED_MODULE_4__.formatDate)(day.date, \"weekdayYear\") === (0,_index__WEBPACK_IMPORTED_MODULE_4__.formatDate)(new Date(), \"weekdayYear\");\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"button\", {\n key: index,\n onClick: function onClick() {\n return day.isCurrentMonth && handleDateSelect(day.date);\n },\n className: \"\\n calendar-day-button\\n \".concat(!day.isCurrentMonth ? \"calendar-day-disabled\" : \"\", \"\\n \").concat(isInRange ? \"calendar-day-in-range\" : \"\", \"\\n \").concat(isStart || isEnd ? \"calendar-day-selected\" : \"\", \"\\n \").concat(isToday && !isInRange ? \"calendar-day-today\" : \"\", \"\\n \"),\n disabled: !day.isCurrentMonth\n }, day.date.getDate());\n })), startDate && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"selected-dates-display\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"selected-dates-text\"\n }, endDate ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"span\", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"strong\", null, \"Du:\"), \" \", (0,_index__WEBPACK_IMPORTED_MODULE_4__.formatDate)(startDate, \"weekday\"), \" \", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"strong\", null, \"Au:\"), \" \", (0,_index__WEBPACK_IMPORTED_MODULE_4__.formatDate)(endDate, \"weekday\")) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"span\", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"strong\", null, \"D\\xE9but:\"), \" \", (0,_index__WEBPACK_IMPORTED_MODULE_4__.formatDate)(startDate, \"weekday\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"span\", {\n className: \"select-end-date-hint\"\n }, \"(S\\xE9lectionnez la date de fin)\")))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"reset-button-container\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"button\", {\n onClick: resetDates,\n className: \"reset-button\"\n }, \"R\\xE9initialiser\"))))));\n};\n\n\n//# sourceURL=webpack://YourLibraryName/./src/Components/DatePicker/DatePicker.jsx?");
|
|
139
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ DatePicker: () => (/* binding */ DatePicker)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _DatePicker_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./DatePicker.css */ \"./src/Components/DatePicker/DatePicker.css\");\n/* harmony import */ var _Button_Button__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Button/Button */ \"./src/Components/Button/Button.jsx\");\n/* harmony import */ var _Icon_Icon__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Icon/Icon */ \"./src/Components/Icon/Icon.jsx\");\n/* harmony import */ var _index__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../index */ \"./src/index.jsx\");\n/* harmony import */ var _data_colors__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../data/colors */ \"./src/data/colors.js\");\nfunction _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(r, a) { if (r) { if (\"string\" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return \"Object\" === t && r.constructor && (t = r.constructor.name), \"Map\" === t || \"Set\" === t ? Array.from(r) : \"Arguments\" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }\nfunction _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }\nfunction _iterableToArrayLimit(r, l) { var t = null == r ? null : \"undefined\" != typeof Symbol && r[Symbol.iterator] || r[\"@@iterator\"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t[\"return\"] && (u = t[\"return\"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }\nfunction _arrayWithHoles(r) { if (Array.isArray(r)) return r; }\n\n\n\n\n\n\nvar DatePicker = function DatePicker(_ref) {\n var onChange = _ref.onChange,\n _ref$size = _ref.size,\n size = _ref$size === void 0 ? \"s\" : _ref$size;\n var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),\n _useState2 = _slicedToArray(_useState, 2),\n isOpen = _useState2[0],\n setIsOpen = _useState2[1];\n var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null),\n _useState4 = _slicedToArray(_useState3, 2),\n startDate = _useState4[0],\n setStartDate = _useState4[1];\n var _useState5 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null),\n _useState6 = _slicedToArray(_useState5, 2),\n endDate = _useState6[0],\n setEndDate = _useState6[1];\n var _useState7 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(new Date()),\n _useState8 = _slicedToArray(_useState7, 2),\n currentMonth = _useState8[0],\n setCurrentMonth = _useState8[1];\n var _useState9 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),\n _useState0 = _slicedToArray(_useState9, 2),\n isSelectingEnd = _useState0[0],\n setIsSelectingEnd = _useState0[1];\n var ref = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n var isFiltered = !!startDate && !!endDate;\n var toggleCalendar = function toggleCalendar() {\n return setIsOpen(function (prev) {\n return !prev;\n });\n };\n var resetDates = function resetDates() {\n setStartDate(null);\n setEndDate(null);\n setIsSelectingEnd(false);\n if (onChange) onChange(null, null);\n };\n var handleDateSelect = function handleDateSelect(date) {\n if (!startDate || startDate && endDate) {\n setStartDate(date);\n setEndDate(null);\n setIsSelectingEnd(true);\n } else if (isSelectingEnd) {\n if (date >= startDate) {\n setEndDate(date);\n setIsSelectingEnd(false);\n if (onChange) onChange(startDate, date);\n } else {\n setStartDate(date);\n setEndDate(null);\n }\n }\n };\n var navigateMonth = function navigateMonth(direction) {\n var newMonth = new Date(currentMonth);\n newMonth.setMonth(currentMonth.getMonth() + direction);\n setCurrentMonth(newMonth);\n };\n var getDaysInMonth = function getDaysInMonth(date) {\n var year = date.getFullYear();\n var month = date.getMonth();\n var firstDay = new Date(year, month, 1);\n var lastDay = new Date(year, month + 1, 0);\n var daysInMonth = lastDay.getDate();\n var startingDayOfWeek = firstDay.getDay();\n var days = [];\n for (var i = startingDayOfWeek - 1; i >= 0; i--) {\n var prevDate = new Date(year, month, -i);\n days.push({\n date: prevDate,\n isCurrentMonth: false\n });\n }\n for (var day = 1; day <= daysInMonth; day++) {\n var d = new Date(year, month, day);\n days.push({\n date: d,\n isCurrentMonth: true\n });\n }\n var remainingDays = 42 - days.length;\n for (var _day = 1; _day <= remainingDays; _day++) {\n var nextDate = new Date(year, month + 1, _day);\n days.push({\n date: nextDate,\n isCurrentMonth: false\n });\n }\n return days;\n };\n var isDateInRange = function isDateInRange(date) {\n if (!startDate) return false;\n if (!endDate) return date.getTime() === startDate.getTime();\n return date >= startDate && date <= endDate;\n };\n var isDateStart = function isDateStart(date) {\n return startDate && date.getTime() === startDate.getTime();\n };\n var isDateEnd = function isDateEnd(date) {\n return endDate && date.getTime() === endDate.getTime();\n };\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {\n var handleClickOutside = function handleClickOutside(event) {\n if (ref.current && !ref.current.contains(event.target)) {\n setIsOpen(false);\n }\n };\n document.addEventListener(\"mousedown\", handleClickOutside);\n return function () {\n return document.removeEventListener(\"mousedown\", handleClickOutside);\n };\n }, []);\n var monthNames = [\"Janvier\", \"Février\", \"Mars\", \"Avril\", \"Mai\", \"Juin\", \"Juillet\", \"Août\", \"Septembre\", \"Octobre\", \"Novembre\", \"Décembre\"];\n var dayNames = [\"Lun\", \"Mar\", \"Mer\", \"Jeu\", \"Ven\", \"Sam\", \"Dim\"];\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"date-picker-container\",\n ref: ref\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Button_Button__WEBPACK_IMPORTED_MODULE_2__.Button, {\n onClick: toggleCalendar,\n size: size,\n iconLeft: \"calendar\"\n }), isFiltered && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"span\", {\n style: {\n position: \"absolute\",\n top: -6,\n right: -6,\n background: _data_colors__WEBPACK_IMPORTED_MODULE_5__.colors.red_950,\n borderRadius: \"50%\",\n width: 18,\n height: 18,\n fontSize: 30,\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n zIndex: 2\n },\n onClick: resetDates\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_Icon__WEBPACK_IMPORTED_MODULE_3__.Icon, {\n name: \"xmark\",\n size: \"s\",\n color: _data_colors__WEBPACK_IMPORTED_MODULE_5__.colors.white\n })), isOpen && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"date-picker-popup\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"date-picker-content\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"calendar-container\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"calendar-header\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"button\", {\n onClick: function onClick() {\n return navigateMonth(-1);\n },\n className: \"calendar-nav-button\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"svg\", {\n className: \"calendar-nav-icon\",\n fill: \"none\",\n stroke: \"currentColor\",\n viewBox: \"0 0 24 24\",\n xmlns: \"http://www.w3.org/2000/svg\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"path\", {\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\",\n strokeWidth: 2,\n d: \"M15 19l-7-7 7-7\"\n }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"h3\", {\n className: \"calendar-month-title\"\n }, monthNames[currentMonth.getMonth()], \" \", currentMonth.getFullYear()), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"button\", {\n onClick: function onClick() {\n return navigateMonth(1);\n },\n className: \"calendar-nav-button\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"svg\", {\n className: \"calendar-nav-icon\",\n fill: \"none\",\n stroke: \"currentColor\",\n viewBox: \"0 0 24 24\",\n xmlns: \"http://www.w3.org/2000/svg\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"path\", {\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\",\n strokeWidth: 2,\n d: \"M9 5l7 7-7 7\"\n })))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"calendar-days-header\"\n }, dayNames.map(function (day) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n key: day,\n className: \"calendar-day-name\"\n }, day);\n })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"calendar-days-grid\"\n }, getDaysInMonth(currentMonth).map(function (day, index) {\n var isInRange = isDateInRange(day.date);\n var isStart = isDateStart(day.date);\n var isEnd = isDateEnd(day.date);\n var isToday = (0,_index__WEBPACK_IMPORTED_MODULE_4__.formatDate)(day.date, \"weekdayYear\") === (0,_index__WEBPACK_IMPORTED_MODULE_4__.formatDate)(new Date(), \"weekdayYear\");\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"button\", {\n key: index,\n onClick: function onClick() {\n return day.isCurrentMonth && handleDateSelect(day.date);\n },\n className: \"\\n calendar-day-button\\n \".concat(!day.isCurrentMonth ? \"calendar-day-disabled\" : \"\", \"\\n \").concat(isInRange ? \"calendar-day-in-range\" : \"\", \"\\n \").concat(isStart || isEnd ? \"calendar-day-selected\" : \"\", \"\\n \").concat(isToday && !isInRange ? \"calendar-day-today\" : \"\", \"\\n \"),\n disabled: !day.isCurrentMonth\n }, day.date.getDate());\n })), startDate && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"selected-dates-display\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"selected-dates-text\"\n }, endDate ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"span\", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"strong\", null, \"Du:\"), \" \", (0,_index__WEBPACK_IMPORTED_MODULE_4__.formatDate)(startDate, \"weekday\", \"fr\"), \" \", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"strong\", null, \"Au:\"), \" \", (0,_index__WEBPACK_IMPORTED_MODULE_4__.formatDate)(endDate, \"weekday\", \"fr\")) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"span\", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"strong\", null, \"D\\xE9but:\"), \" \", (0,_index__WEBPACK_IMPORTED_MODULE_4__.formatDate)(startDate, \"weekday\", \"fr\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"span\", {\n className: \"select-end-date-hint\"\n }, \"(S\\xE9lectionnez la date de fin)\")))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"reset-button-container\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"button\", {\n onClick: resetDates,\n className: \"reset-button\"\n }, \"R\\xE9initialiser\"))))));\n};\n\n\n//# sourceURL=webpack://YourLibraryName/./src/Components/DatePicker/DatePicker.jsx?");
|
|
140
140
|
|
|
141
141
|
/***/ }),
|
|
142
142
|
|