design-zystem 1.0.74 → 1.0.76
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
|
@@ -191,7 +191,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
191
191
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
192
192
|
|
|
193
193
|
"use strict";
|
|
194
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ ModalConfirmation: () => (/* binding */ ModalConfirmation),\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var
|
|
194
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ ModalConfirmation: () => (/* binding */ ModalConfirmation),\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 _Col_Col__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Col/Col */ \"./src/Components/Col/Col.jsx\");\n/* harmony import */ var _Row_Row__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Row/Row */ \"./src/Components/Row/Row.jsx\");\n/* harmony import */ var _Button_Button__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Button/Button */ \"./src/Components/Button/Button.jsx\");\n/* harmony import */ var _Text_Text__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../Text/Text */ \"./src/Components/Text/Text.jsx\");\n/* harmony import */ var _Modal_Modal__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../Modal/Modal */ \"./src/Components/Modal/Modal.jsx\");\n\n\n\n\n\n\nvar ModalConfirmation = function ModalConfirmation(props) {\n var isOpen = props.isOpen,\n onConfirm = props.onConfirm,\n onCancel = props.onCancel,\n isLoading = props.isLoading,\n width = props.width;\n if (!isOpen) return null;\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Modal_Modal__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n showModal: isOpen,\n closeModal: onCancel,\n width: width\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Col_Col__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n gap: \"16\",\n justifyContent: \"center\",\n alignItems: \"center\",\n fullWidth: true\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Row_Row__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n gap: \"8\",\n justifyContent: \"center\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Text_Text__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n align: \"center\",\n margin: \"1em 0\",\n size: \"xl\"\n }, \"\\xCAtes-vous s\\xFBr de vouloir faire cette action ?\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Row_Row__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n gap: \"8\",\n justifyContent: \"center\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Button_Button__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n onClick: onCancel,\n variant: \"danger\"\n }, \"Annuler\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Button_Button__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n variant: \"success\",\n onClick: onConfirm,\n isLoading: isLoading\n }, \"Confirmer\"))));\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ModalConfirmation);\n\n//# sourceURL=webpack://YourLibraryName/./src/Components/ModalConfirmation/ModalConfirmation.jsx?");
|
|
195
195
|
|
|
196
196
|
/***/ }),
|
|
197
197
|
|
|
@@ -224,7 +224,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
224
224
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
225
225
|
|
|
226
226
|
"use strict";
|
|
227
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ Select: () => (/* binding */ Select)\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_2__ = __webpack_require__(/*! styled-components */ \"./node_modules/styled-components/dist/styled-components.browser.esm.js\");\n/* harmony import */ var _Text_Text__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Text/Text */ \"./src/Components/Text/Text.jsx\");\nvar _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;\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; }\nfunction _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }\n\n\n\nvar shouldForwardProp = function shouldForwardProp(prop) {\n return ![\"width\", \"disabled\", \"dropAbove\", \"color\", \"backgroundColor\", \"height\"].includes(prop);\n};\nvar StyledContainer = styled_components__WEBPACK_IMPORTED_MODULE_2__[\"default\"].div.withConfig({\n shouldForwardProp: shouldForwardProp\n})(_templateObject || (_templateObject = _taggedTemplateLiteral([\"\\n display: flex;\\n flex-direction: column;\\n width: \", \";\\n flex: 1;\\n overflow-y: visible;\\n min-width: 100px;\\n\"])), function (props) {\n return props.width || \"100%\";\n});\nvar SelectWrapper = styled_components__WEBPACK_IMPORTED_MODULE_2__[\"default\"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([\"\\n position: relative;\\n width: 100%;\\n\"])));\nvar SelectInput = styled_components__WEBPACK_IMPORTED_MODULE_2__[\"default\"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([\"\\n width: 100%;\\n border-radius: 5px;\\n cursor: \", \";\\n background-color: \", \";\\n height: \", \";\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n white-space: nowrap;\\n overflow: hidden;\\n text-overflow: ellipsis;\\n color: \", \";\\n background-color: \", \";\\n\\n &:focus,\\n &:hover {\\n border-color: \", \";\\n box-shadow: \", \";\\n }\\n\"])), function (props) {\n return props.disabled ? \"not-allowed\" : \"pointer\";\n}, function (props) {\n return props.disabled ? \"#dddddd77\" : \"#EEE7\";\n}, function (props) {\n return props.height || \"40px\";\n}, function (props) {\n return props.color || \"\";\n}, function (props) {\n return props.backgroundColor || \"\";\n}, function (props) {\n return props.disabled ? \"#ccc\" : \"#4382f7\";\n}, function (props) {\n return props.disabled ? \"none\" : \"0 0 0 1px #b0b0b0 inset, 0 0 10px rgba(24, 49, 75, 0.188)\";\n});\nvar Dropdown = styled_components__WEBPACK_IMPORTED_MODULE_2__[\"default\"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral([\"\\n position: absolute;\\n \", \"\\n left: 0;\\n right: 0;\\n border: 1px solid #ccc;\\n border-top: none;\\n border-radius: 0 0 5px 5px;\\n background: #fff;\\n max-height: 300px;\\n z-index: 9999;\\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\\n display: flex;\\n flex-direction: column;\\n\"])), function (props) {\n return props.dropAbove ? \"bottom: 100%;\" : \"top: 100%;\";\n});\nvar Option = styled_components__WEBPACK_IMPORTED_MODULE_2__[\"default\"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral([\"\\n padding: 8px;\\n cursor: pointer;\\n\\n &:hover {\\n background: #f1f1f1;\\n }\\n\"])));\nvar DropdownList = styled_components__WEBPACK_IMPORTED_MODULE_2__[\"default\"].div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral([\"\\n overflow-y: scroll;\\n\"])));\nvar SearchInput = styled_components__WEBPACK_IMPORTED_MODULE_2__[\"default\"].input(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral([\"\\n position: relative;\\n width: 100%;\\n padding: 8px;\\n border: none;\\n border-bottom: 1px solid #ccc;\\n outline: none;\\n\\n &:focus {\\n border-color: #4382f7;\\n box-shadow: 0 0 0 1px #4382f7 inset, 0 0 10px rgba(24, 49, 75, 0.188);\\n }\\n\"])));\nvar Select = function Select(_ref) {\n var label = _ref.label,\n value = _ref.value,\n onChange = _ref.onChange,\n options = _ref.options,\n placeholder = _ref.placeholder,\n width = _ref.width,\n height = _ref.height,\n required = _ref.required,\n disabled = _ref.disabled,\n color = _ref.color,\n backgroundColor = _ref.backgroundColor;\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)(\"\"),\n _useState4 = _slicedToArray(_useState3, 2),\n searchTerm = _useState4[0],\n setSearchTerm = _useState4[1];\n var _useState5 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),\n _useState6 = _slicedToArray(_useState5, 2),\n dropAbove = _useState6[0],\n setDropAbove = _useState6[1];\n var containerRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n var dropdownRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n var selectedOption = options.find(function (option) {\n return option.value === value;\n });\n var handleSelect = function handleSelect(option) {\n onChange(option.value);\n setIsOpen(false);\n };\n var handleToggle = function handleToggle() {\n if (!disabled) {\n var _dropdownRef$current;\n var containerRect = containerRef.current.getBoundingClientRect();\n var dropdownHeight = ((_dropdownRef$current = dropdownRef.current) === null || _dropdownRef$current === void 0 ? void 0 : _dropdownRef$current.getBoundingClientRect().height) || 300; // Default to 300 if undefined\n\n var isDropdownOverflowing = containerRect.bottom + dropdownHeight > window.innerHeight;\n setDropAbove(isDropdownOverflowing);\n setIsOpen(!isOpen);\n }\n };\n var handleSearch = function handleSearch(e) {\n setSearchTerm(e.target.value);\n };\n var filteredOptions = options.filter(function (option) {\n return option.label.toLowerCase().includes(searchTerm.toLowerCase());\n });\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {\n var handleClickOutside = function handleClickOutside(event) {\n if (containerRef.current && !containerRef.current.contains(event.target)) {\n setIsOpen(false);\n }\n };\n document.addEventListener(\"mousedown\", handleClickOutside);\n return function () {\n document.removeEventListener(\"mousedown\", handleClickOutside);\n };\n }, []);\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(StyledContainer, {\n width: width\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Text_Text__WEBPACK_IMPORTED_MODULE_1__.Text, null, label, \" \", required && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Text_Text__WEBPACK_IMPORTED_MODULE_1__.Text, {\n style: {\n color: \"red\"\n }\n }, \"*\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(SelectWrapper, {\n ref: containerRef\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(SelectInput, {\n height: height,\n color: color,\n backgroundColor: backgroundColor,\n onClick: handleToggle,\n tabIndex: 0,\n disabled: disabled\n }, selectedOption ? selectedOption.label : placeholder), isOpen && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Dropdown, {\n ref: dropdownRef,\n dropAbove: dropAbove\n }, !dropAbove && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(SearchInput, {\n type: \"text\",\n placeholder: \"Rechercher...\",\n value: searchTerm,\n onChange: handleSearch\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(DropdownList, null, filteredOptions.map(function (option) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Option, {\n key: option.value,\n onClick: function onClick() {\n return handleSelect(option);\n }\n }, option.label);\n })), dropAbove && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(SearchInput, {\n type: \"text\",\n placeholder: \"Rechercher...\",\n value: searchTerm,\n onChange: handleSearch\n }))));\n};\n\n//# sourceURL=webpack://YourLibraryName/./src/Components/Select/Select.jsx?");
|
|
227
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ Select: () => (/* binding */ Select)\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_2__ = __webpack_require__(/*! styled-components */ \"./node_modules/styled-components/dist/styled-components.browser.esm.js\");\n/* harmony import */ var _Text_Text__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Text/Text */ \"./src/Components/Text/Text.jsx\");\nvar _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;\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; }\nfunction _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }\n\n\n\nvar shouldForwardProp = function shouldForwardProp(prop) {\n return ![\"width\", \"disabled\", \"dropAbove\", \"color\", \"backgroundColor\", \"height\"].includes(prop);\n};\nvar StyledContainer = styled_components__WEBPACK_IMPORTED_MODULE_2__[\"default\"].div.withConfig({\n shouldForwardProp: shouldForwardProp\n})(_templateObject || (_templateObject = _taggedTemplateLiteral([\"\\n display: flex;\\n flex-direction: column;\\n width: \", \";\\n flex: 1;\\n overflow-y: visible;\\n min-width: 100px;\\n\"])), function (props) {\n return props.width || \"100%\";\n});\nvar SelectWrapper = styled_components__WEBPACK_IMPORTED_MODULE_2__[\"default\"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([\"\\n position: relative;\\n width: 100%;\\n\"])));\nvar SelectInput = styled_components__WEBPACK_IMPORTED_MODULE_2__[\"default\"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([\"\\n width: 100%;\\n border-radius: 5px;\\n cursor: \", \";\\n background-color: \", \";\\n height: \", \";\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n white-space: nowrap;\\n overflow: hidden;\\n text-overflow: ellipsis;\\n color: \", \";\\n background-color: \", \";\\n border: 1px solid #bebebe;\\n\\n &:focus,\\n &:hover {\\n border-color: \", \";\\n box-shadow: \", \";\\n }\\n\"])), function (props) {\n return props.disabled ? \"not-allowed\" : \"pointer\";\n}, function (props) {\n return props.disabled ? \"#dddddd77\" : \"#EEE7\";\n}, function (props) {\n return props.height || \"40px\";\n}, function (props) {\n return props.color || \"\";\n}, function (props) {\n return props.backgroundColor || \"\";\n}, function (props) {\n return props.disabled ? \"#ccc\" : \"#4382f7\";\n}, function (props) {\n return props.disabled ? \"none\" : \"0 0 0 1px #b0b0b0 inset, 0 0 10px rgba(24, 49, 75, 0.188)\";\n});\nvar Dropdown = styled_components__WEBPACK_IMPORTED_MODULE_2__[\"default\"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral([\"\\n position: absolute;\\n \", \"\\n left: 0;\\n right: 0;\\n border: 1px solid #ccc;\\n border-top: none;\\n border-radius: 0 0 5px 5px;\\n background: #fff;\\n max-height: 300px;\\n z-index: 9999;\\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\\n display: flex;\\n flex-direction: column;\\n\"])), function (props) {\n return props.dropAbove ? \"bottom: 100%;\" : \"top: 100%;\";\n});\nvar Option = styled_components__WEBPACK_IMPORTED_MODULE_2__[\"default\"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral([\"\\n padding: 8px;\\n cursor: pointer;\\n\\n &:hover {\\n background: #f1f1f1;\\n }\\n\"])));\nvar DropdownList = styled_components__WEBPACK_IMPORTED_MODULE_2__[\"default\"].div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral([\"\\n overflow-y: scroll;\\n\"])));\nvar SearchInput = styled_components__WEBPACK_IMPORTED_MODULE_2__[\"default\"].input(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral([\"\\n position: relative;\\n width: 100%;\\n padding: 8px;\\n border: none;\\n border-bottom: 1px solid #ccc;\\n outline: none;\\n\\n &:focus {\\n border-color: #4382f7;\\n box-shadow: 0 0 0 1px #4382f7 inset, 0 0 10px rgba(24, 49, 75, 0.188);\\n }\\n\"])));\nvar Select = function Select(_ref) {\n var label = _ref.label,\n value = _ref.value,\n onChange = _ref.onChange,\n options = _ref.options,\n placeholder = _ref.placeholder,\n width = _ref.width,\n height = _ref.height,\n required = _ref.required,\n disabled = _ref.disabled,\n color = _ref.color,\n backgroundColor = _ref.backgroundColor;\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)(\"\"),\n _useState4 = _slicedToArray(_useState3, 2),\n searchTerm = _useState4[0],\n setSearchTerm = _useState4[1];\n var _useState5 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),\n _useState6 = _slicedToArray(_useState5, 2),\n dropAbove = _useState6[0],\n setDropAbove = _useState6[1];\n var containerRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n var dropdownRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n var selectedOption = options.find(function (option) {\n return option.value === value;\n });\n var handleSelect = function handleSelect(option) {\n onChange(option.value);\n setIsOpen(false);\n };\n var handleToggle = function handleToggle() {\n if (!disabled) {\n var _dropdownRef$current;\n var containerRect = containerRef.current.getBoundingClientRect();\n var dropdownHeight = ((_dropdownRef$current = dropdownRef.current) === null || _dropdownRef$current === void 0 ? void 0 : _dropdownRef$current.getBoundingClientRect().height) || 300; // Default to 300 if undefined\n\n var isDropdownOverflowing = containerRect.bottom + dropdownHeight > window.innerHeight;\n setDropAbove(isDropdownOverflowing);\n setIsOpen(!isOpen);\n }\n };\n var handleSearch = function handleSearch(e) {\n setSearchTerm(e.target.value);\n };\n var filteredOptions = options.filter(function (option) {\n return option.label.toLowerCase().includes(searchTerm.toLowerCase());\n });\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {\n var handleClickOutside = function handleClickOutside(event) {\n if (containerRef.current && !containerRef.current.contains(event.target)) {\n setIsOpen(false);\n }\n };\n document.addEventListener(\"mousedown\", handleClickOutside);\n return function () {\n document.removeEventListener(\"mousedown\", handleClickOutside);\n };\n }, []);\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(StyledContainer, {\n width: width\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Text_Text__WEBPACK_IMPORTED_MODULE_1__.Text, null, label, \" \", required && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Text_Text__WEBPACK_IMPORTED_MODULE_1__.Text, {\n style: {\n color: \"red\"\n }\n }, \"*\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(SelectWrapper, {\n ref: containerRef\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(SelectInput, {\n height: height,\n color: color,\n backgroundColor: backgroundColor,\n onClick: handleToggle,\n tabIndex: 0,\n disabled: disabled\n }, selectedOption ? selectedOption.label : placeholder), isOpen && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Dropdown, {\n ref: dropdownRef,\n dropAbove: dropAbove\n }, !dropAbove && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(SearchInput, {\n type: \"text\",\n placeholder: \"Rechercher...\",\n value: searchTerm,\n onChange: handleSearch\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(DropdownList, null, filteredOptions.map(function (option) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Option, {\n key: option.value,\n onClick: function onClick() {\n return handleSelect(option);\n }\n }, option.label);\n })), dropAbove && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(SearchInput, {\n type: \"text\",\n placeholder: \"Rechercher...\",\n value: searchTerm,\n onChange: handleSearch\n }))));\n};\n\n//# sourceURL=webpack://YourLibraryName/./src/Components/Select/Select.jsx?");
|
|
228
228
|
|
|
229
229
|
/***/ }),
|
|
230
230
|
|