albinasoft-ui-package 1.0.73 → 1.0.75

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

@@ -1,7 +1,3 @@
-.react-datepicker-wrapper {
-  display: block;
-}
-
 .react-datepicker-popper {
   z-index: 5;
 }
@@ -19,8 +15,9 @@
   top: 6px;
   width: 9px;
 }
+
 .react-datepicker-wrapper {
-  display: inline-block;
+  display: block;
   padding: 0;
   border: 0;
 }

package/dist/components/CustomForm.d.ts

@@ -66,6 +66,7 @@ interface RadioButtonElement {
     onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 interface SelectElement {
+    required: boolean;
     id?: string;
     type: ElementType;
     label: string;

package/dist/components/CustomForm.js

@@ -115,16 +115,29 @@ var CustomForm = function (_a) {
     showCancelButton = _e === void 0 ? false : _e;
     var formRef = (0, react_1.useRef)(null);
     var _f = (0, react_1.useState)(false), isLoading = _f[0], setIsLoading = _f[1];
+    var _g = (0, react_1.useState)(false), submitted = _g[0], setSubmitted = _g[1];
     var handleConfirm = function (e) { return __awaiter(void 0, void 0, void 0, function () {
-        var form, isValid, formValues_1, error_1;
+        var form, customSelectValid, isValid, formValues_1, error_1;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
                     e.preventDefault();
+                    setSubmitted(true); // Form gönderimi tetiklendi
                     form = formRef.current;
                     if (!form)
                         return [2 /*return*/];
-                    isValid = form.checkValidity();
+                    customSelectValid = true;
+                    elements.forEach(function (element) {
+                        if (element.type === ElementType.SELECT && element.required) {
+                            var selectElement = element;
+                            // Eğer değer boş (string) veya boş array ise geçersiz kabul edin
+                            if ((Array.isArray(selectElement.value) && selectElement.value.length === 0) ||
+                                (!Array.isArray(selectElement.value) && !selectElement.value)) {
+                                customSelectValid = false;
+                            }
+                        }
+                    });
+                    isValid = form.checkValidity() && customSelectValid;
                     if (!isValid) return [3 /*break*/, 6];
                     setIsLoading(true);
                     _a.label = 1;
@@ -136,7 +149,6 @@ var CustomForm = function (_a) {
                             element instanceof HTMLTextAreaElement ||
                             element instanceof HTMLSelectElement) {
                             if (element.id) {
-                                //RichTextbox boş göndermemesi için
                                 var name_1 = element.name || element.id;
                                 if (element instanceof HTMLInputElement &&
                                     element.type === ElementType.RADIO) {
@@ -154,7 +166,7 @@ var CustomForm = function (_a) {
                                     formValues_1[name_1] = selectedOptions;
                                 }
                                 else if (element instanceof HTMLSelectElement) {
-                                    formValues_1[name_1] = [element.value]; // Tekli seçim bile array olarak döner
+                                    formValues_1[name_1] = [element.value];
                                 }
                                 else {
                                     formValues_1[name_1] = element.value;
@@ -162,10 +174,10 @@ var CustomForm = function (_a) {
                             }
                         }
                     });
-                    // CustomForm elemanlarını kontrol etme
+                    // Özel elemanlar için (örneğin RichTextbox) değerleri ekleyin
                     elements.forEach(function (element) {
                         if ("value" in element && element.type === ElementType.RICHTEXTBOX) {
-                            formValues_1[element.id] = element.value; // RichTextbox değerini ekleme
+                            formValues_1[element.id] = element.value;
                         }
                     });
                     return [4 /*yield*/, onSubmit(formValues_1)];
@@ -177,7 +189,7 @@ var CustomForm = function (_a) {
                     react_toastify_1.toast.error("Form gönderimi sırasında bir hata oluştu.");
                     return [3 /*break*/, 5];
                 case 4:
-                    setIsLoading(false); // Loading state'i durdur
+                    setIsLoading(false);
                     return [7 /*endfinally*/];
                 case 5: return [3 /*break*/, 7];
                 case 6:
@@ -209,7 +221,7 @@ var CustomForm = function (_a) {
                 var colId = _a[0], innerRows = _a[1];
                 return (react_1.default.createElement("div", { className: "col", key: "col-".concat(rowId, "-").concat(colId) }, Object.entries(innerRows).map(function (_a) {
                     var innerRowId = _a[0], elements = _a[1];
-                    return (react_1.default.createElement("div", { className: "row ".concat(innerRowCustomClass), key: "inner-row-".concat(rowId, "-").concat(colId, "-").concat(innerRowId) }, elements.map(function (element) { return (react_1.default.createElement("div", { className: element.colClass || "col-12", key: element.id }, element.type === ElementType.TEXT ? (react_1.default.createElement(CustomText_1.default, __assign({}, element))) : element.type === ElementType.INPUT ? (react_1.default.createElement(CustomInput_1.default, __assign({}, element))) : element.type === ElementType.TEXTAREA ? (react_1.default.createElement(CustomTextarea_1.default, __assign({}, element))) : element.type === ElementType.CHECKBOX ? (react_1.default.createElement(CustomCheckbox_1.default, __assign({}, element))) : element.type === ElementType.RADIO ? (react_1.default.createElement(CustomRadioButton_1.default, __assign({}, element))) : element.type === ElementType.SELECT ? (react_1.default.createElement(CustomSelect_1.default, __assign({}, element))) : element.type === ElementType.DATETIMEPICKER ? (react_1.default.createElement(CustomDateTimePicker_1.default, __assign({}, element))) : element.type === ElementType.DIVIDER ? (react_1.default.createElement(CustomDivider_1.default, __assign({}, element))) : element.type === ElementType.RICHTEXTBOX ? (react_1.default.createElement(CustomRichTextbox_1.default, __assign({}, element))) : element.type === ElementType.TREEVIEW ? (react_1.default.createElement(CustomTreeView_1.default, __assign({}, element))) : element.type === ElementType.BUTTON ? (react_1.default.createElement(CustomButton_1.default, __assign({}, element, { isLoading: isLoading }))) : element.type === ElementType.AUTOCOMPLETEINPUT ? (react_1.default.createElement(CustomAutocompleteInput_1.default, __assign({}, element))) : element.type === ElementType.FILEUPLOADER ? (
+                    return (react_1.default.createElement("div", { className: "row ".concat(innerRowCustomClass), key: "inner-row-".concat(rowId, "-").concat(colId, "-").concat(innerRowId) }, elements.map(function (element) { return (react_1.default.createElement("div", { className: element.colClass || "col-12", key: element.id }, element.type === ElementType.TEXT ? (react_1.default.createElement(CustomText_1.default, __assign({}, element))) : element.type === ElementType.INPUT ? (react_1.default.createElement(CustomInput_1.default, __assign({}, element))) : element.type === ElementType.TEXTAREA ? (react_1.default.createElement(CustomTextarea_1.default, __assign({}, element))) : element.type === ElementType.CHECKBOX ? (react_1.default.createElement(CustomCheckbox_1.default, __assign({}, element))) : element.type === ElementType.RADIO ? (react_1.default.createElement(CustomRadioButton_1.default, __assign({}, element))) : element.type === ElementType.SELECT ? (react_1.default.createElement(CustomSelect_1.default, __assign({}, element, { submitted: submitted }))) : element.type === ElementType.DATETIMEPICKER ? (react_1.default.createElement(CustomDateTimePicker_1.default, __assign({}, element))) : element.type === ElementType.DIVIDER ? (react_1.default.createElement(CustomDivider_1.default, __assign({}, element))) : element.type === ElementType.RICHTEXTBOX ? (react_1.default.createElement(CustomRichTextbox_1.default, __assign({}, element))) : element.type === ElementType.TREEVIEW ? (react_1.default.createElement(CustomTreeView_1.default, __assign({}, element))) : element.type === ElementType.BUTTON ? (react_1.default.createElement(CustomButton_1.default, __assign({}, element, { isLoading: isLoading }))) : element.type === ElementType.AUTOCOMPLETEINPUT ? (react_1.default.createElement(CustomAutocompleteInput_1.default, __assign({}, element))) : element.type === ElementType.FILEUPLOADER ? (
                     // FILEUPLOADER elemanı için CustomFileUploader'ı render ediyoruz
                     react_1.default.createElement(react_1.default.Fragment, null,
                         react_1.default.createElement(CustomFileUploader_1.default, { url: element.url, multi: element.multi, allowedTypes: element.allowedTypes, maxFile: element.maxFile, maxSize: element.maxSize, onUploadComplete: element.onUploadComplete, onRemoveUploaded: element.onRemoveUploaded, onPendingChange: element.onPendingChange, label: element.label }))) : null)); })));

package/dist/components/CustomSelect.d.ts

@@ -25,6 +25,7 @@ interface CustomSelectProps {
     mainClass?: string;
     style?: React.CSSProperties;
     mainStyle?: React.CSSProperties;
+    submitted?: boolean;
     onChange: (value: string | string[]) => void;
 }
 declare const CustomSelect: React.FC<CustomSelectProps>;

package/dist/components/CustomSelect.js

@@ -37,15 +37,16 @@ var fa_1 = require("react-icons/fa");
 require("../assets/css/custom-select.css");
 var CustomSelect = function (_a) {
     var _b;
-    var id = _a.id, name = _a.name, label = _a.label, options = _a.options, value = _a.value, _c = _a.searchable, searchable = _c === void 0 ? true : _c, _d = _a.required, required = _d === void 0 ? false : _d, _e = _a.multiple, multiple = _e === void 0 ? false : _e, _f = _a.placeholder, placeholder = _f === void 0 ? "Seçiniz..." : _f, errorMessage = _a.errorMessage, conditionalErrorVisible = _a.conditionalErrorVisible, conditionalErrorMessage = _a.conditionalErrorMessage, tooltip = _a.tooltip, description = _a.description, _g = _a.disabled, disabled = _g === void 0 ? false : _g, className = _a.className, mainClass = _a.mainClass, style = _a.style, mainStyle = _a.mainStyle, onChange = _a.onChange;
+    var id = _a.id, name = _a.name, label = _a.label, options = _a.options, value = _a.value, _c = _a.searchable, searchable = _c === void 0 ? true : _c, _d = _a.required, required = _d === void 0 ? false : _d, _e = _a.multiple, multiple = _e === void 0 ? false : _e, _f = _a.placeholder, placeholder = _f === void 0 ? "Seçiniz..." : _f, errorMessage = _a.errorMessage, conditionalErrorVisible = _a.conditionalErrorVisible, conditionalErrorMessage = _a.conditionalErrorMessage, tooltip = _a.tooltip, description = _a.description, _g = _a.disabled, disabled = _g === void 0 ? false : _g, className = _a.className, mainClass = _a.mainClass, style = _a.style, mainStyle = _a.mainStyle, submitted = _a.submitted, onChange = _a.onChange;
     var _h = (0, react_1.useState)(""), inputValue = _h[0], setInputValue = _h[1];
     var _j = (0, react_1.useState)(false), dropdownVisible = _j[0], setDropdownVisible = _j[1];
+    // Dropdown genişliği için
     var _k = (0, react_1.useState)(undefined), dropdownWidth = _k[0], setDropdownWidth = _k[1];
-    var _l = (0, react_1.useState)(false), isInvalid = _l[0], setIsInvalid = _l[1]; // Bu state ile Select’i "kırmızı" göstereceğiz
+    var _l = (0, react_1.useState)(false), isInvalid = _l[0], setIsInvalid = _l[1];
     var containerRef = (0, react_1.useRef)(null);
     var currentValues = Array.isArray(value) ? value : [value];
     var selectedValue = Array.isArray(value) ? value[0] : value;
-    // Dropdown genişliğini ayarla
+    // Kapsayıcının genişliğini ölç
     (0, react_1.useEffect)(function () {
         var updateDropdownWidth = function () {
             if (containerRef.current) {
@@ -62,10 +63,11 @@ var CustomSelect = function (_a) {
             window.removeEventListener("resize", updateDropdownWidth);
         };
     }, [containerRef.current]);
-    // Dropdown dışına tıklayınca kapanmasını sağla
+    // Dış tıklamada dropdown'ı kapat
     (0, react_1.useEffect)(function () {
         var handleClickOutside = function (event) {
-            if (containerRef.current && !containerRef.current.contains(event.target)) {
+            if (containerRef.current &&
+                !containerRef.current.contains(event.target)) {
                 setDropdownVisible(false);
             }
         };
@@ -74,55 +76,36 @@ var CustomSelect = function (_a) {
             document.removeEventListener("mousedown", handleClickOutside);
         };
     }, []);
-    // Bir değer seçildiğinde güncelle
-    var toggleValue = function (selectedValue) {
+    var toggleValue = function (selectedVal) {
         if (multiple) {
-            var newValue = currentValues.includes(selectedValue)
-                ? currentValues.filter(function (v) { return v !== selectedValue; })
-                : __spreadArray(__spreadArray([], currentValues, true), [selectedValue], false);
+            var newValue = currentValues.includes(selectedVal)
+                ? currentValues.filter(function (v) { return v !== selectedVal; })
+                : __spreadArray(__spreadArray([], currentValues, true), [selectedVal], false);
             onChange(newValue);
         }
         else {
-            onChange(selectedValue);
+            onChange(selectedVal);
             setDropdownVisible(false);
         }
         setInputValue("");
     };
-    // Arama filtresi
     var filteredOptions = options.filter(function (option) {
         return option.label.toLowerCase().includes(inputValue.toLowerCase());
     });
-    // "onInvalid" ve "onInput" event’lerini kullanarak validasyon durumunu yönetiyoruz
     var handleInvalid = function () {
         setIsInvalid(true);
     };
     var handleInput = function () {
-        // Herhangi bir şey yazıldığında veya değiştiğinde validasyonu sıfırlayabilirsiniz
         setIsInvalid(false);
     };
     return (react_1.default.createElement("div", { className: mainClass, style: mainStyle, ref: containerRef },
         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={`select-container form-control ${disabled ? "disabled" : ""} ${
-                //   isInvalid ? "is-invalid" : "is-valid"
-                // }`}
-                // className={`select-container form-control ${disabled ? "disabled" : ""} ${isInvalid ? "is-invalid" :
-                //   Array.isArray(value)
-                //     ? value.length > 0
-                //       ? "is-valid"
-                //       : "is-invalid"
-                //     : value
-                //       ? "is-valid"
-                //       : "is-invalid"
-                // }`}
-                className: "select-container form-control ".concat(disabled ? "disabled" : "", " \n          ").concat(Array.isArray(value)
-                    ? value.length > 0
-                        ? "is-valid"
-                        : "is-invalid"
-                    : value
-                        ? "is-valid"
-                        : "is-invalid"), onClick: function () { return !disabled && setDropdownVisible(!dropdownVisible); }, style: { cursor: disabled ? "not-allowed" : "pointer" } }, multiple ? (currentValues.length > 0 ? (currentValues.map(function (val) {
+            react_1.default.createElement("div", { className: "select-container form-control ".concat(disabled ? "disabled" : "", " \n    ").concat(submitted
+                    ? (Array.isArray(value)
+                        ? (value.length > 0 ? "is-valid" : "is-invalid")
+                        : (value ? "is-valid" : "is-invalid"))
+                    : ""), onClick: function () { return !disabled && setDropdownVisible(!dropdownVisible); }, style: { cursor: disabled ? "not-allowed" : "pointer" } }, multiple ? (currentValues.length > 0 ? (currentValues.map(function (val) {
                 var option = options.find(function (opt) { return opt.value === val; });
                 return (react_1.default.createElement("span", { key: val, className: "badge bg-primary m-1" },
                     react_1.default.createElement("span", null, option === null || option === void 0 ? void 0 : option.label),
@@ -143,15 +126,33 @@ var CustomSelect = function (_a) {
                     position: "absolute",
                     zIndex: 10,
                     width: dropdownWidth,
-                    maxHeight: "200px",
-                    overflowY: "auto", // Fazla seçenekler dikey scroll ile görünür
+                    overflow: "visible", // Dışa taşmasına izin ver
                 } },
-                searchable && (react_1.default.createElement("input", { type: "text", 
-                    // Bu input validasyona girmesin diye name/id vermiyoruz ve required vermiyoruz
-                    placeholder: "Ara...", className: "form-control search-input", value: inputValue, onChange: function (e) { return setInputValue(e.target.value); } })),
-                filteredOptions.length > 0 ? (filteredOptions.map(function (option) { return (react_1.default.createElement("div", { key: option.id, className: "dropdown-item ".concat(currentValues.includes(option.value) ? "selected" : ""), onClick: function () { return toggleValue(option.value); } },
-                    currentValues.includes(option.value) && react_1.default.createElement(fa_1.FaCheck, { className: "me-2 text-success" }),
-                    option.label)); })) : (react_1.default.createElement("div", { className: "dropdown-item text-muted" }, "Uygun se\u00E7enek yok")))),
+                react_1.default.createElement("div", { style: {
+                        maxHeight: "200px",
+                        overflowY: "auto",
+                        //paddingBottom: "40px", // Kapama butonunun yer açması için
+                    } },
+                    searchable && (react_1.default.createElement("input", { type: "text", placeholder: "Ara...", className: "form-control search-input", value: inputValue, onChange: function (e) { return setInputValue(e.target.value); } })),
+                    filteredOptions.length > 0 ? (filteredOptions.map(function (option) { return (react_1.default.createElement("div", { key: option.id, className: "dropdown-item ".concat(currentValues.includes(option.value) ? "selected" : ""), onClick: function () { return toggleValue(option.value); } },
+                        currentValues.includes(option.value) && react_1.default.createElement(fa_1.FaCheck, { className: "me-2 text-success" }),
+                        option.label)); })) : (react_1.default.createElement("div", { className: "dropdown-item text-muted" }, "Uygun se\u00E7enek yok"))),
+                react_1.default.createElement("button", { type: "button", className: "dropdown-close-btn", style: {
+                        position: "absolute",
+                        bottom: "0",
+                        right: "0",
+                        transform: "translate(50%, 50%)",
+                        border: "none",
+                        backgroundColor: "#ccc",
+                        borderRadius: "50%",
+                        width: "30px",
+                        height: "30px",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        cursor: "pointer",
+                    }, onClick: function () { return setDropdownVisible(false); } },
+                    react_1.default.createElement(fa_1.FaTimes, null)))),
             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)),

package/package.json

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