albinasoft-ui-package 1.0.50 → 1.0.52

package/dist/components/CustomDateTimePicker.d.ts

@@ -1,5 +1,6 @@
-import React from 'react';
-import 'react-datepicker/dist/react-datepicker.css';
+import React from "react";
+import "react-datepicker/dist/react-datepicker.css";
+import "../assets/css/custom-datetime-picker.css";
 declare enum TimeFormat {
     H = "HH",
     M = "mm",

package/dist/components/CustomDateTimePicker.js

@@ -9,6 +9,7 @@ var react_datepicker_1 = __importDefault(require("react-datepicker"));
 require("react-datepicker/dist/react-datepicker.css");
 var react_bootstrap_1 = require("react-bootstrap");
 var fa_1 = require("react-icons/fa");
+require("../assets/css/custom-datetime-picker.css");
 var TimeFormat;
 (function (TimeFormat) {
     TimeFormat["H"] = "HH";
@@ -18,18 +19,28 @@ var TimeFormat;
 exports.TimeFormat = TimeFormat;
 var CustomDateTimePicker = 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, errorMessage = _a.errorMessage, _c = _a.conditionalErrorVisible, conditionalErrorVisible = _c === void 0 ? false : _c, conditionalErrorMessage = _a.conditionalErrorMessage, tooltip = _a.tooltip, description = _a.description, _d = _a.disabled, disabled = _d === void 0 ? false : _d, className = _a.className, style = _a.style, showTimeSelect = _a.showTimeSelect, showTimeSelectOnly = _a.showTimeSelectOnly, _e = _a.timeFormat, timeFormat = _e === void 0 ? TimeFormat.HM : _e, timeIntervals = _a.timeIntervals, onChange = _a.onChange;
-    return (react_1.default.createElement("div", { className: className },
+    return (react_1.default.createElement("div", { className: "col-12" },
         react_1.default.createElement("div", { className: "form-group" },
             react_1.default.createElement("label", { htmlFor: id, className: "form-label" }, label),
             react_1.default.createElement("div", { className: "position-relative" },
-                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(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("div", null,
-                        react_1.default.createElement(react_datepicker_1.default, { id: id, name: name, selected: value, onChange: onChange, className: "form-control ".concat(className || ''), placeholderText: placeholder, disabled: disabled, required: required, showTimeSelect: showTimeSelect || false, showTimeSelectOnly: showTimeSelectOnly || false, showTimeCaption: false, timeFormat: timeFormat, dateFormat: showTimeSelectOnly ? timeFormat : showTimeSelect ? "dd.MM.yyyy HH:mm" : "dd.MM.yyyy", timeIntervals: timeFormat == TimeFormat.H ? 60 : timeFormat == TimeFormat.M ? 1 : timeIntervals ? timeIntervals : 30 }))),
+                        react_1.default.createElement(react_datepicker_1.default, { id: id, name: name, selected: value, onChange: onChange, className: "form-control ".concat(className || ""), placeholderText: placeholder, disabled: disabled, required: required, showTimeSelect: showTimeSelect || false, showTimeSelectOnly: showTimeSelectOnly || false, showTimeCaption: false, timeFormat: timeFormat, dateFormat: showTimeSelectOnly
+                                ? timeFormat
+                                : showTimeSelect
+                                    ? "dd.MM.yyyy HH:mm"
+                                    : "dd.MM.yyyy", timeIntervals: timeFormat == TimeFormat.H
+                                ? 60
+                                : timeFormat == TimeFormat.M
+                                    ? 1
+                                    : timeIntervals
+                                        ? timeIntervals
+                                        : 30 }))),
                 required && !value && (react_1.default.createElement("div", { className: "invalid-feedback text-danger mt-2" },
                     react_1.default.createElement("div", { className: "description-icon" },
                         react_1.default.createElement(fa_1.FaExclamationTriangle, null)),
                     react_1.default.createElement("div", { className: "description-text" },
-                        react_1.default.createElement("span", null, errorMessage || 'This field is required.')))),
+                        react_1.default.createElement("span", null, errorMessage || "This field is required.")))),
                 conditionalErrorVisible && (react_1.default.createElement("div", { className: "conditional-error-message text-warning mt-2" },
                     react_1.default.createElement("div", { className: "description-icon" },
                         react_1.default.createElement(fa_1.FaExclamationTriangle, null)),

package/dist/components/CustomInput.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 declare enum InputType {
     TEXT = "text",
     NUMBER = "number",

package/dist/components/CustomInput.js

@@ -22,11 +22,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InputType = exports.CustomInput = void 0;
 var react_1 = __importStar(require("react"));
 var react_bootstrap_1 = require("react-bootstrap");
 var fa_1 = require("react-icons/fa");
+var react_input_mask_1 = __importDefault(require("react-input-mask"));
 var InputType;
 (function (InputType) {
     InputType["TEXT"] = "text";
@@ -40,25 +44,32 @@ exports.InputType = InputType;
 var CustomInput = function (_a) {
     var id = _a.id, name = _a.name, label = _a.label, _b = _a.inputType, inputType = _b === void 0 ? InputType.TEXT : _b, value = _a.value, placeholder = _a.placeholder, _c = _a.required, required = _c === void 0 ? false : _c, errorMessage = _a.errorMessage, _d = _a.conditionalErrorVisible, conditionalErrorVisible = _d === void 0 ? false : _d, conditionalErrorMessage = _a.conditionalErrorMessage, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.readOnly, readOnly = _f === void 0 ? false : _f, buttonIcon = _a.buttonIcon, buttonClass = _a.buttonClass, buttonTooltip = _a.buttonTooltip, description = _a.description, tooltip = _a.tooltip, style = _a.style, mainClass = _a.mainClass, className = _a.className, buttonOnClick = _a.buttonOnClick, onChange = _a.onChange;
     var _g = (0, react_1.useState)(false), showPassword = _g[0], setShowPassword = _g[1];
-    var handleType = inputType === InputType.PASSWORD && showPassword ? InputType.TEXT : inputType;
+    var handleType = inputType === InputType.PASSWORD && showPassword
+        ? InputType.TEXT
+        : inputType;
     var togglePasswordVisibility = function () {
         setShowPassword(function (prev) { return !prev; });
     };
+    var renderInput = function () {
+        // If inputType is TEL, use ReactInputMask
+        if (inputType === InputType.TEL) {
+            return (react_1.default.createElement(react_input_mask_1.default, { mask: "0(999) 999 99 99", value: value, onChange: onChange, className: "form-control ".concat(className), style: style, required: required, disabled: disabled, readOnly: readOnly, autoComplete: "new-password" }));
+        }
+        // Otherwise, return a normal input element
+        return (react_1.default.createElement("input", { id: id, name: name, type: handleType, value: value, placeholder: placeholder, onChange: onChange, className: "form-control ".concat(className), style: style, required: required, disabled: disabled, readOnly: readOnly, autoComplete: "new-password" }));
+    };
     return (react_1.default.createElement("div", { className: mainClass },
         react_1.default.createElement("div", { className: "form-group" },
             react_1.default.createElement("label", { htmlFor: id, className: "form-label" }, label),
             react_1.default.createElement("div", { className: "input-group position-relative" },
-                tooltip ? (react_1.default.createElement(react_bootstrap_1.OverlayTrigger, { placement: "bottom", overlay: react_1.default.createElement(react_bootstrap_1.Tooltip, { id: "tooltip-".concat(tooltip) }, tooltip) },
-                    react_1.default.createElement("input", { id: id, name: name, type: handleType, value: value, placeholder: placeholder, onChange: onChange, className: "form-control ".concat(className), style: style, required: required, disabled: disabled, readOnly: readOnly, autoComplete: "new-password" // Modern tarayıcılarda autocomplete autofill engellemek için
-                     }))) : (react_1.default.createElement("input", { id: id, name: name, type: handleType, value: value, placeholder: placeholder, onChange: onChange, className: "form-control ".concat(className), style: style, required: required, disabled: disabled, readOnly: readOnly, autoComplete: "new-password" // Modern tarayıcılarda autocomplete autofill engellemek için
-                 })),
+                tooltip ? (react_1.default.createElement(react_bootstrap_1.OverlayTrigger, { placement: "bottom", overlay: react_1.default.createElement(react_bootstrap_1.Tooltip, { id: "tooltip-".concat(tooltip) }, tooltip) }, renderInput())) : (renderInput()),
                 inputType === InputType.PASSWORD && (react_1.default.createElement("button", { type: "button", onClick: togglePasswordVisibility, className: "btn btn-outline-secondary", title: showPassword ? "Parolayı Gizle" : "Parolayı Göster" }, showPassword ? react_1.default.createElement(fa_1.FaEyeSlash, null) : react_1.default.createElement(fa_1.FaEye, null))),
                 buttonIcon && buttonOnClick && (react_1.default.createElement("button", { type: "button", onClick: buttonOnClick, className: buttonClass || "btn btn-outline-secondary", title: buttonTooltip || "" }, buttonIcon)),
                 required && (react_1.default.createElement("div", { className: "invalid-feedback text-danger" },
                     react_1.default.createElement("div", { className: "description-icon" },
                         react_1.default.createElement(fa_1.FaExclamationTriangle, null)),
                     react_1.default.createElement("div", { className: "description-text" },
-                        react_1.default.createElement("span", null, errorMessage || 'Bu alan boş bırakılamaz.')))),
+                        react_1.default.createElement("span", null, errorMessage || "Bu alan boş bırakılamaz.")))),
                 conditionalErrorVisible && (react_1.default.createElement("div", { className: "conditional-error-message text-warning" },
                     react_1.default.createElement("div", { className: "description-icon" },
                         react_1.default.createElement(fa_1.FaExclamationTriangle, null)),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "albinasoft-ui-package",
-  "version": "1.0.50",
+  "version": "1.0.52",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
@@ -15,6 +15,7 @@
     "react-datepicker": "^7.5.0",
     "react-dom": "^18.0.0",
     "react-icons": "^5.4.0",
+    "react-input-mask": "^2.0.4",
     "react-quill": "^2.0.0",
     "react-router-dom": "^7.1.1",
     "react-toastify": "^10.0.6"
@@ -22,6 +23,7 @@
   "devDependencies": {
     "@types/react": "^19.0.1",
     "@types/react-bootstrap": "^0.32.37",
+    "@types/react-input-mask": "^3.0.6",
     "typescript": "^4.5.0"
   },
   "peerDependencies": {

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

@@ -1,41 +0,0 @@
-.autocomplete-container {
-  position: relative; /* Dropdown'u input'un kapsayıcısına bağlamak için */
-}
-
-.autocomplete-dropdown {
-  background-color: white;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  z-index: 1050;
-  max-height: 200px;
-  overflow-y: auto;
-  position: absolute;
-  width: 100%;
-}
-
-.autocomplete-option {
-  padding: 8px 12px;
-  cursor: pointer;
-}
-
-.autocomplete-option:hover {
-  background-color: #f1f1f1;
-}
-
-/* Dark Mode */
-.dark .autocomplete-dropdown {
-  background-color: #333;
-  color: #fff;
-  border: 1px solid #444;
-}
-
-.dark .autocomplete-option:hover {
-  background-color: #444;
-}
-
-mark {
-  background-color: yellow;
-  color: black;
-  font-weight: bold;
-}

package/dist/assets/css/custom-select.css

@@ -1,47 +0,0 @@
-
-  
-  .dropdown-menu {
-    background: white;
-  }
-  
-  .dark .dropdown-menu {
-    background: #222738;
-  }
-  
-  .dropdown-menu::-webkit-scrollbar-thumb {
-    background-color: #888; /* Scrollbar rengi */
-  }
-  
-  .dropdown-menu::-webkit-scrollbar-thumb:hover {
-    background-color: #555; /* Hover durumunda daha koyu */
-  }
-  
-  .dark .dropdown-menu::-webkit-scrollbar-thumb {
-    background-color: #444; /* Dark tema için scrollbar rengi */
-  }
-  
-  .dark .dropdown-menu::-webkit-scrollbar-thumb:hover {
-    background-color: #666; /* Dark tema hover */
-  }
-  
-  .dropdown-menu::-webkit-scrollbar-track {
-    background: transparent; /* Scrollbar arka planı */
-  }
-  
-  .dark .dropdown-menu::-webkit-scrollbar-track {
-    background: #151824; /* Dark tema için arka plan */
-  }
-  
-  .dropdown-item {
-    padding: 8px 12px;
-    cursor: pointer;
-  }
-  
-  .dropdown-item:hover {
-    background: #f1f1f1;
-  }
-  
-  .dark .dropdown-item:hover {
-    background: #151824;
-  }
-