albinasoft-ui-package 1.0.33 → 1.0.34

package/dist/assets/css/custom-autocomplete-input.css

@@ -33,3 +33,9 @@
 .dark .autocomplete-option:hover {
   background-color: #444;
 }
+
+mark {
+  background-color: yellow;
+  color: black;
+  font-weight: bold;
+}

package/dist/components/CustomAutocompleteInput.js

@@ -63,11 +63,13 @@ var react_1 = __importStar(require("react"));
 var fa_1 = require("react-icons/fa");
 var react_bootstrap_1 = require("react-bootstrap");
 require("../assets/css/custom-autocomplete-input.css");
+var CustomInput_1 = __importStar(require("./CustomInput"));
 var CustomAutocompleteInput = function (_a) {
     var id = _a.id, name = _a.name, label = _a.label, value = _a.value, placeholder = _a.placeholder, _b = _a.required, required = _b === void 0 ? false : _b, description = _a.description, errorMessage = _a.errorMessage, conditionalErrorVisible = _a.conditionalErrorVisible, conditionalErrorMessage = _a.conditionalErrorMessage, _c = _a.disabled, disabled = _c === void 0 ? false : _c, tooltip = _a.tooltip, _d = _a.className, className = _d === void 0 ? '' : _d, style = _a.style, fetchOptions = _a.fetchOptions, onSelect = _a.onSelect;
     var _e = (0, react_1.useState)(value || ''), inputValue = _e[0], setInputValue = _e[1];
-    var _f = (0, react_1.useState)([]), options = _f[0], setOptions = _f[1];
-    var _g = (0, react_1.useState)(false), isDropdownVisible = _g[0], setIsDropdownVisible = _g[1];
+    var _f = (0, react_1.useState)(null), selectedValue = _f[0], setSelectedValue = _f[1];
+    var _g = (0, react_1.useState)([]), options = _g[0], setOptions = _g[1];
+    var _h = (0, react_1.useState)(false), isDropdownVisible = _h[0], setIsDropdownVisible = _h[1];
     var dropdownRef = (0, react_1.useRef)(null);
     // Input değiştiğinde fetchOptions çağır
     var handleInputChange = function (e) { return __awaiter(void 0, void 0, void 0, function () {
@@ -77,6 +79,7 @@ var CustomAutocompleteInput = function (_a) {
                 case 0:
                     value = e.target.value;
                     setInputValue(value);
+                    setSelectedValue(null);
                     if (!value) return [3 /*break*/, 5];
                     _a.label = 1;
                 case 1:
@@ -104,28 +107,43 @@ var CustomAutocompleteInput = function (_a) {
     }); };
     // Seçim yapıldığında onSelect çağır
     var handleOptionClick = function (option) {
+        setSelectedValue(option);
         onSelect(option);
+        //setIsDropdownVisible(false);
+        //setInputValue(option);
+    };
+    var handleReset = function () {
         setIsDropdownVisible(false);
-        setInputValue(option);
+        setInputValue('');
+        setSelectedValue('');
     };
     // Dropdown dışında tıklanıldığında dropdown'u kapat
     (0, react_1.useEffect)(function () {
-        var handleClickOutside = function (event) {
-            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-                setIsDropdownVisible(false);
-            }
-        };
-        document.addEventListener('mousedown', handleClickOutside);
-        return function () {
-            document.removeEventListener('mousedown', handleClickOutside);
-        };
+        // const handleClickOutside = (event: MouseEvent) => {
+        //     if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        //         setIsDropdownVisible(false);
+        //     }
+        // };
+        // document.addEventListener('mousedown', handleClickOutside);
+        // return () => {
+        //     document.removeEventListener('mousedown', handleClickOutside);
+        // };
     }, []);
+    var highlightMatch = function (option, query) {
+        // Kullanıcı girişini regex için güvenli hale getir
+        var escapedQuery = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+        var regex = new RegExp("(".concat(escapedQuery, ")"), 'gi');
+        var highlighted = option.replace(regex, '<mark>$1</mark>');
+        return highlighted;
+    };
     return (react_1.default.createElement("div", { className: "autocomplete-container ".concat(className), style: style },
         react_1.default.createElement("div", { className: "form-group" },
             react_1.default.createElement("label", { htmlFor: id, className: "form-label" }, label),
             react_1.default.createElement(react_bootstrap_1.OverlayTrigger, { placement: "bottom", overlay: tooltip ? react_1.default.createElement(react_bootstrap_1.Tooltip, { id: "tooltip-".concat(id) }, tooltip) : react_1.default.createElement(react_1.default.Fragment, null) },
-                react_1.default.createElement("input", { id: id, name: name, type: "text", value: inputValue, onChange: handleInputChange, placeholder: placeholder, className: "form-control", required: required, disabled: disabled })),
-            isDropdownVisible && (react_1.default.createElement("div", { className: "autocomplete-dropdown", ref: dropdownRef }, options.map(function (option, index) { return (react_1.default.createElement("div", { key: index, className: "autocomplete-option", onClick: function () { return handleOptionClick(option); } }, option)); }))),
+                react_1.default.createElement(CustomInput_1.default, { id: id, name: name, inputType: CustomInput_1.InputType.TEXT, value: inputValue, onChange: handleInputChange, placeholder: placeholder, buttonIcon: react_1.default.createElement(fa_1.FaTimes, null), buttonClass: 'btn btn-danger bg-soft-danger', buttonOnClick: handleReset, className: "form-control", required: required, disabled: disabled })),
+            isDropdownVisible && (react_1.default.createElement("div", { className: "autocomplete-dropdown", ref: dropdownRef }, options.map(function (option, index) { return (react_1.default.createElement("div", { key: index, className: "autocomplete-option", onClick: function () { return handleOptionClick(option); }, dangerouslySetInnerHTML: {
+                    __html: highlightMatch(option, inputValue), // Highlighting
+                } })); }))),
             errorMessage && (react_1.default.createElement("div", { className: "invalid-feedback text-danger mt-2" },
                 react_1.default.createElement(fa_1.FaExclamationTriangle, { className: "me-1" }),
                 errorMessage)),

package/dist/components/CustomModal.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import '../assets/css/custom-autocomplete-input.css';
 interface CustomModalProps {
     show: boolean;
     title?: string;

package/dist/components/CustomModal.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var react_bootstrap_1 = require("react-bootstrap");
+require("../assets/css/custom-autocomplete-input.css");
 var CustomModal = function (_a) {
     var show = _a.show, _b = _a.title, title = _b === void 0 ? 'Default Title' : _b, _c = _a.size, size = _c === void 0 ? 'lg' : _c, onHide = _a.onHide, children = _a.children, footer = _a.footer, style = _a.style, bodyStyle = _a.bodyStyle;
     return (react_1.default.createElement(react_bootstrap_1.Modal, { show: show, onHide: onHide, size: size !== 'fullscreen' ? size : undefined, fullscreen: size === 'fullscreen' ? true : undefined, centered: size !== 'fullscreen', style: style },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "albinasoft-ui-package",
-  "version": "1.0.33",
+  "version": "1.0.34",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {