albinasoft-ui-package 1.0.65 → 1.0.67

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.
Files changed (2) hide show
  1. package/dist/components/CustomSelect.js +64 -22
  2. package/package.json +1 -1
package/dist/components/CustomSelect.js CHANGED
@@ -37,29 +37,44 @@ var fa_1 = require("react-icons/fa");
37
37
  require("../assets/css/custom-select.css");
38
38
  var CustomSelect = function (_a) {
39
39
  var _b;
40
- 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çenek ekleyin" : _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;
40
+ 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;
41
41
  var _h = (0, react_1.useState)(""), inputValue = _h[0], setInputValue = _h[1];
42
42
  var _j = (0, react_1.useState)(false), dropdownVisible = _j[0], setDropdownVisible = _j[1];
43
+ var _k = (0, react_1.useState)(undefined), dropdownWidth = _k[0], setDropdownWidth = _k[1];
44
+ var _l = (0, react_1.useState)(false), isInvalid = _l[0], setIsInvalid = _l[1]; // Bu state ile Select’i "kırmızı" göstereceğiz
43
45
  var containerRef = (0, react_1.useRef)(null);
44
46
  var currentValues = Array.isArray(value) ? value : [value];
45
47
  var selectedValue = Array.isArray(value) ? value[0] : value;
46
- var _k = (0, react_1.useState)(undefined), dropdownWidth = _k[0], setDropdownWidth = _k[1];
48
+ // Dropdown genişliğini ayarla
47
49
  (0, react_1.useEffect)(function () {
48
50
  var updateDropdownWidth = function () {
49
51
  if (containerRef.current) {
50
52
  var computedStyle = window.getComputedStyle(containerRef.current);
51
- var width = containerRef.current.clientWidth - // İç genişlik
52
- parseFloat(computedStyle.paddingLeft) - // Sol padding
53
- parseFloat(computedStyle.paddingRight); // Sağ padding
54
- setDropdownWidth(width); // Genişliği state'e kaydediyoruz
53
+ var width = containerRef.current.clientWidth -
54
+ parseFloat(computedStyle.paddingLeft) -
55
+ parseFloat(computedStyle.paddingRight);
56
+ setDropdownWidth(width);
55
57
  }
56
58
  };
57
59
  updateDropdownWidth();
58
- window.addEventListener("resize", updateDropdownWidth); // Pencere boyutu değiştiğinde genişliği güncelle
60
+ window.addEventListener("resize", updateDropdownWidth);
59
61
  return function () {
60
62
  window.removeEventListener("resize", updateDropdownWidth);
61
63
  };
62
64
  }, [containerRef.current]);
65
+ // Dropdown dışına tıklayınca kapanmasını sağla
66
+ (0, react_1.useEffect)(function () {
67
+ var handleClickOutside = function (event) {
68
+ if (containerRef.current && !containerRef.current.contains(event.target)) {
69
+ setDropdownVisible(false);
70
+ }
71
+ };
72
+ document.addEventListener("mousedown", handleClickOutside);
73
+ return function () {
74
+ document.removeEventListener("mousedown", handleClickOutside);
75
+ };
76
+ }, []);
77
+ // Bir değer seçildiğinde güncelle
63
78
  var toggleValue = function (selectedValue) {
64
79
  if (multiple) {
65
80
  var newValue = currentValues.includes(selectedValue)
@@ -73,24 +88,41 @@ var CustomSelect = function (_a) {
73
88
  }
74
89
  setInputValue("");
75
90
  };
91
+ // Arama filtresi
76
92
  var filteredOptions = options.filter(function (option) {
77
93
  return option.label.toLowerCase().includes(inputValue.toLowerCase());
78
94
  });
79
- (0, react_1.useEffect)(function () {
80
- var handleClickOutside = function (event) {
81
- if (containerRef.current && !containerRef.current.contains(event.target)) {
82
- setDropdownVisible(false);
83
- }
84
- };
85
- document.addEventListener("mousedown", handleClickOutside);
86
- return function () {
87
- document.removeEventListener("mousedown", handleClickOutside);
88
- };
89
- }, []);
95
+ // "onInvalid" ve "onInput" event’lerini kullanarak validasyon durumunu yönetiyoruz
96
+ var handleInvalid = function () {
97
+ setIsInvalid(true);
98
+ };
99
+ var handleInput = function () {
100
+ // Herhangi bir şey yazıldığında veya değiştiğinde validasyonu sıfırlayabilirsiniz
101
+ setIsInvalid(false);
102
+ };
90
103
  return (react_1.default.createElement("div", { className: mainClass, style: mainStyle, ref: containerRef },
91
104
  react_1.default.createElement("div", { className: "form-group" },
92
105
  react_1.default.createElement("label", { htmlFor: id, className: "form-label" }, label),
93
- react_1.default.createElement("div", { className: "select-container form-control ".concat(disabled ? "disabled" : ""), onClick: function () { return !disabled && setDropdownVisible(!dropdownVisible); }, style: { cursor: disabled ? "not-allowed" : "pointer" } }, multiple ? (currentValues.length > 0 ? (currentValues.map(function (val) {
106
+ react_1.default.createElement("div", {
107
+ // className={`select-container form-control ${disabled ? "disabled" : ""} ${
108
+ // isInvalid ? "is-invalid" : "is-valid"
109
+ // }`}
110
+ // className={`select-container form-control ${disabled ? "disabled" : ""} ${isInvalid ? "is-invalid" :
111
+ // Array.isArray(value)
112
+ // ? value.length > 0
113
+ // ? "is-valid"
114
+ // : "is-invalid"
115
+ // : value
116
+ // ? "is-valid"
117
+ // : "is-invalid"
118
+ // }`}
119
+ className: "select-container form-control ".concat(disabled ? "disabled" : "", " \n ").concat(Array.isArray(value)
120
+ ? value.length > 0
121
+ ? "is-valid"
122
+ : "is-invalid"
123
+ : value
124
+ ? "is-valid"
125
+ : "is-invalid"), onClick: function () { return !disabled && setDropdownVisible(!dropdownVisible); }, style: { cursor: disabled ? "not-allowed" : "pointer" } }, multiple ? (currentValues.length > 0 ? (currentValues.map(function (val) {
94
126
  var option = options.find(function (opt) { return opt.value === val; });
95
127
  return (react_1.default.createElement("span", { key: val, className: "badge bg-primary m-1" },
96
128
  react_1.default.createElement("span", null, option === null || option === void 0 ? void 0 : option.label),
@@ -100,16 +132,26 @@ var CustomSelect = function (_a) {
100
132
  } })));
101
133
  })) : (react_1.default.createElement("span", { className: "placeholder" }, placeholder))) : selectedValue ? (react_1.default.createElement("span", { className: "badge bg-primary" },
102
134
  react_1.default.createElement("span", null, (_b = options.find(function (opt) { return opt.value === selectedValue; })) === null || _b === void 0 ? void 0 : _b.label))) : (react_1.default.createElement("span", { className: "placeholder" }, placeholder))),
135
+ react_1.default.createElement("input", { type: "text", name: name, value: Array.isArray(value) ? value.join(",") : value, required: required, onInvalid: handleInvalid, onInput: handleInput, style: {
136
+ position: "absolute",
137
+ left: "-9999px",
138
+ width: "1px",
139
+ height: "1px",
140
+ overflow: "hidden",
141
+ } }),
103
142
  dropdownVisible && (react_1.default.createElement("div", { className: "dropdown-menu show", style: {
104
143
  position: "absolute",
105
144
  zIndex: 10,
106
- width: dropdownWidth, // Dropdown genişliği input alanına eşitleniyor
145
+ width: dropdownWidth,
146
+ maxHeight: "200px",
147
+ overflowY: "auto", // Fazla seçenekler dikey scroll ile görünür
107
148
  } },
108
- searchable && (react_1.default.createElement("input", { type: "text", placeholder: "Ara...", className: "form-control", value: inputValue, onChange: function (e) { return setInputValue(e.target.value); }, style: { margin: "8px" } })),
149
+ searchable && (react_1.default.createElement("input", { type: "text",
150
+ // Bu input validasyona girmesin diye name/id vermiyoruz ve required vermiyoruz
151
+ placeholder: "Ara...", className: "form-control search-input", value: inputValue, onChange: function (e) { return setInputValue(e.target.value); } })),
109
152
  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); } },
110
153
  currentValues.includes(option.value) && react_1.default.createElement(fa_1.FaCheck, { className: "me-2 text-success" }),
111
154
  option.label)); })) : (react_1.default.createElement("div", { className: "dropdown-item text-muted" }, "Uygun se\u00E7enek yok")))),
112
- " ",
113
155
  react_1.default.createElement("div", { className: "invalid-feedback text-danger mt-2" },
114
156
  react_1.default.createElement("div", { className: "description-icon" },
115
157
  react_1.default.createElement(fa_1.FaExclamationTriangle, null)),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "albinasoft-ui-package",
3
- "version": "1.0.65",
3
+ "version": "1.0.67",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "scripts": {