albinasoft-ui-package 1.0.77 → 1.0.79

package/dist/assets/css/custom-datetime-picker.css

@@ -7,7 +7,7 @@
 .react-datepicker__year-read-view--down-arrow,
 .react-datepicker__month-read-view--down-arrow,
 .react-datepicker__month-year-read-view--down-arrow {
-  border-color: var(--bs-border-color);
+  border-color: var(--bs-body-color);
   border-style: solid;
   border-width: 3px 3px 0 0;
   content: "";
@@ -28,7 +28,7 @@
   font-family: var(--bs-body-font-family, "Helvetica Neue", Helvetica, Arial, sans-serif);
   font-size: 0.8rem;
   background-color: var(--bs-body-bg);
-  color: var(--bs-body-color);
+  color: var(--bs-text-primary);
   border: 1px solid var(--bs-border-color);
   border-radius: var(--bs-border-radius);
   display: inline-block;
@@ -38,12 +38,14 @@
 
 /* Zaman Seçimi */
 .react-datepicker--time-only .react-datepicker__time-container {
+  height:auto;
   border-left: 0;
 }
 .react-datepicker--time-only .react-datepicker__time,
 .react-datepicker--time-only .react-datepicker__time-box {
   border-bottom-left-radius: 0.3rem;
   border-bottom-right-radius: 0.3rem;
+  height: auto;
 }
 
 .react-datepicker-popper {
@@ -54,8 +56,8 @@
   stroke: var(--bs-border-color);
 }
 .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle {
-  fill: var(--bs-light-bg-subtle);
-  color: var(--bs-light-bg-subtle);
+  fill: var(--bs-body-bg);
+  color: var(--bs-body-bg);
 }
 .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle {
   fill: var(--bs-white);
@@ -99,7 +101,7 @@
 .react-datepicker-time__header,
 .react-datepicker-year-header {
   margin-top: 0;
-  color: var(--bs-body-color);
+  color: var(--bs-text-primary);
   font-weight: bold;
   font-size: 0.944rem;
 }
@@ -247,7 +249,7 @@ h2.react-datepicker__current-month {
 /* Zaman Kutucuğu */
 .react-datepicker__time-container {
   float: right;
-  border-left: 1px solid var(--bs-border-color);
+  /* border-left: 1px solid var(--bs-border-color); */
   width: 85px;
 }
 .react-datepicker__time-container--with-today-button {
@@ -260,7 +262,7 @@ h2.react-datepicker__current-month {
 }
 .react-datepicker__time-container .react-datepicker__time {
   position: relative;
-  background: var(--bs-white, #fff);
+  background: var(--bs-body-bg) !important;
   border-bottom-right-radius: 0.3rem;
 }
 .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
@@ -273,7 +275,8 @@ h2.react-datepicker__current-month {
 .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
   list-style: none;
   margin: 0;
-  height: calc(195px + 1.7rem / 2);
+  /* height: calc(250px + 1.7rem / 2); */
+  height: 250px;
   overflow-y: scroll;
   padding-right: 0;
   padding-left: 0;
@@ -284,6 +287,7 @@ h2.react-datepicker__current-month {
   height: 30px;
   padding: 5px 10px;
   white-space: nowrap;
+  color: var(--bs-text-primary) !important;
 }
 .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
   cursor: pointer;
@@ -334,7 +338,7 @@ h2.react-datepicker__current-month {
 .react-datepicker__day-name,
 .react-datepicker__day,
 .react-datepicker__time-name {
-  color: var(--bs-body-color, #000);
+  color: var(--bs-text-primary);
   display: inline-block;
   width: 1.7rem;
   line-height: 1.7rem;
@@ -552,13 +556,13 @@ h2.react-datepicker__current-month {
 .react-datepicker__month-year-read-view:hover {
   cursor: pointer;
 }
-.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
+/* .react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
 .react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
 .react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,
 .react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,
 .react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {
   border-top-color: var(--bs-gray-400, var(--bs-gray, rgb(178,178,178)));
-}
+} */
 .react-datepicker__year-read-view--down-arrow,
 .react-datepicker__month-read-view--down-arrow,
 .react-datepicker__month-year-read-view--down-arrow {
@@ -571,7 +575,8 @@ h2.react-datepicker__current-month {
 .react-datepicker__year-dropdown,
 .react-datepicker__month-dropdown,
 .react-datepicker__month-year-dropdown {
-  background-color: var(--bs-light-bg-subtle, #f0f0f0);
+  background-color: var(--bs-body-bg) !important;
+  border: 1px solid var(--bs-border-color) !important;
   position: absolute;
   width: 50%;
   left: 25%;
@@ -579,7 +584,6 @@ h2.react-datepicker__current-month {
   z-index: 1;
   text-align: center;
   border-radius: 0.3rem;
-  border: 1px solid var(--bs-border-color);
 }
 .react-datepicker__year-dropdown:hover,
 .react-datepicker__month-dropdown:hover,
@@ -597,6 +601,7 @@ h2.react-datepicker__current-month {
 .react-datepicker__year-option,
 .react-datepicker__month-option,
 .react-datepicker__month-year-option {
+  color: var(--bs-text-primary) !important;
   line-height: 20px;
   width: 100%;
   display: block;
@@ -754,7 +759,7 @@ h2.react-datepicker__current-month {
   right: 8px;
   top: 70%;
   transform: translateY(-50%) rotate(-135deg);
-  border: solid var(--bs-black, #000);
+  border: solid var(--bs-body-color);
   border-width: 0 2px 2px 0;
   display: inline-block;
   width: 15px;
@@ -766,7 +771,7 @@ h2.react-datepicker__current-month {
   right: 8px;
   top: 30%;
   transform: translateY(-50%) rotate(45deg);
-  border: solid var(--bs-black, #000);
+  border: solid var(--bs-body-color);
   border-width: 0 2px 2px 0;
   display: inline-block;
   width: 15px;

package/dist/components/CustomDateTimePicker.d.ts

@@ -25,6 +25,7 @@ interface CustomDateTimePickerProps {
     showYearDropdown?: boolean;
     timeFormat?: TimeFormat;
     timeIntervals?: number;
+    submitted?: boolean;
     onChange: (date: Date | null) => void;
 }
 declare const CustomDateTimePicker: React.FC<CustomDateTimePickerProps>;

package/dist/components/CustomDateTimePicker.js

@@ -21,18 +21,25 @@ var customTrLocale = {
     localize: {
         month: function (n) {
             var months = [
-                "Ocak", "Şubat", "Mart", "Nisan", "Mayıs", "Haziran",
-                "Temmuz", "Ağustos", "Eylül", "Ekim", "Kasım", "Aralık"
+                "Ocak",
+                "Şubat",
+                "Mart",
+                "Nisan",
+                "Mayıs",
+                "Haziran",
+                "Temmuz",
+                "Ağustos",
+                "Eylül",
+                "Ekim",
+                "Kasım",
+                "Aralık",
             ];
             return months[n];
         },
         day: function (n) {
-            var days = [
-                "Pzr", "Pts", "Sal", "Çrş", "Prş", "Cum", "Cts"
-            ];
+            var days = ["Pzr", "Pts", "Sal", "Çrş", "Prş", "Cum", "Cts"];
             return days[n];
         },
-        // Diğer lokalizasyon fonksiyonları eklenebilir
     },
     formatLong: {
         date: function () { return "dd.MM.yyyy"; },
@@ -40,18 +47,20 @@ var customTrLocale = {
         dateTime: function () { return "dd.MM.yyyy HH:mm"; },
     },
     options: {
-        weekStartsOn: 1 // Haftanın başlangıcı: Pazartesi
-    }
+        weekStartsOn: 1,
+    },
 };
 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, showYearDropdown = _a.showYearDropdown, _e = _a.timeFormat, timeFormat = _e === void 0 ? TimeFormat.HM : _e, timeIntervals = _a.timeIntervals, onChange = _a.onChange;
+    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, showYearDropdown = _a.showYearDropdown, _e = _a.timeFormat, timeFormat = _e === void 0 ? TimeFormat.HM : _e, timeIntervals = _a.timeIntervals, submitted = _a.submitted, onChange = _a.onChange;
+    // Eğer form gönderildiyse ve required field boşsa hata durumu geçerli olsun.
+    var isInvalid = submitted && required && !value;
     return (react_1.default.createElement("div", { className: "col-12", 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("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("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, showYearDropdown: showYearDropdown || false, showTimeCaption: false, timeFormat: timeFormat, locale: customTrLocale, dateFormat: showTimeSelectOnly
+                        react_1.default.createElement(react_datepicker_1.default, { id: id, name: name, selected: value, onChange: onChange, className: "form-control ".concat(className || "", " ").concat(submitted ? (isInvalid ? "is-invalid" : "is-valid") : ""), placeholderText: placeholder, disabled: disabled, required: required, showTimeSelect: showTimeSelect || false, showTimeSelectOnly: showTimeSelectOnly || false, showYearDropdown: showYearDropdown || false, showTimeCaption: false, timeFormat: timeFormat, locale: customTrLocale, dateFormat: showTimeSelectOnly
                                 ? timeFormat
                                 : showTimeSelect
                                     ? "dd.MM.yyyy HH:mm"
@@ -62,11 +71,11 @@ var CustomDateTimePicker = function (_a) {
                                     : timeIntervals
                                         ? timeIntervals
                                         : 30 }))),
-                required && !value && (react_1.default.createElement("div", { className: "invalid-feedback text-danger mt-2" },
+                react_1.default.createElement("div", { className: "invalid-feedback text-danger mt-2 ".concat(isInvalid ? "d-flex" : "") },
                     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 || "Tarih seçimi zorunludur."))),
                 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/package.json

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