albinasoft-ui-package 1.0.103 → 1.0.105

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/CustomInput.js +59 -35
  2. package/package.json +1 -2
package/dist/components/CustomInput.js CHANGED
@@ -1,4 +1,15 @@
1
1
  "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
2
13
  var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
14
  if (k2 === undefined) k2 = k;
4
15
  var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -24,10 +35,10 @@ var __importStar = (this && this.__importStar) || function (mod) {
24
35
  };
25
36
  Object.defineProperty(exports, "__esModule", { value: true });
26
37
  exports.InputType = exports.CustomInput = void 0;
38
+ // CustomInput.tsx
27
39
  var react_1 = __importStar(require("react"));
28
40
  var react_bootstrap_1 = require("react-bootstrap");
29
41
  var fa_1 = require("react-icons/fa");
30
- var react_imask_1 = require("react-imask");
31
42
  var InputType;
32
43
  (function (InputType) {
33
44
  InputType["TEXT"] = "text";
@@ -38,55 +49,68 @@ var InputType;
38
49
  InputType["FILE"] = "file";
39
50
  })(InputType || (InputType = {}));
40
51
  exports.InputType = InputType;
52
+ /* ------------------------------------------------------------------ */
53
+ /* Telefon maskesi: 0(555) 123 45 67 */
54
+ /* ------------------------------------------------------------------ */
55
+ var phoneMask = function (raw) {
56
+ // yalnızca rakam
57
+ var nums = raw.replace(/\D/g, "").slice(0, 11); // max 11 hane (0 + 10)
58
+ // kademeli gruplama
59
+ if (!nums)
60
+ return "";
61
+ var out = "0(";
62
+ if (nums.length <= 1)
63
+ return "0(".concat(nums);
64
+ out += nums.slice(1, 4); // alan kodu 3 hane
65
+ if (nums.length < 4)
66
+ return out;
67
+ out += ") ";
68
+ out += nums.slice(4, 7); // ilk üçlü
69
+ if (nums.length < 7)
70
+ return out;
71
+ out += " ";
72
+ out += nums.slice(7, 9); // ikili
73
+ if (nums.length < 9)
74
+ return out;
75
+ out += " ";
76
+ out += nums.slice(9, 11); // son ikili
77
+ return out;
78
+ };
41
79
  var CustomInput = function (_a) {
42
80
  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, onKeyDown = _a.onKeyDown;
43
81
  var _g = (0, react_1.useState)(false), showPassword = _g[0], setShowPassword = _g[1];
44
82
  var handleType = inputType === InputType.PASSWORD && showPassword
45
83
  ? InputType.TEXT
46
84
  : inputType;
47
- var togglePasswordVisibility = function () {
48
- setShowPassword(function (prev) { return !prev; });
49
- };
85
+ var togglePasswordVisibility = function () { return setShowPassword(function (p) { return !p; }); };
86
+ /* Telefon değişiminde maskeyi uygula ve dışarıya tek tip onChange gönder */
87
+ var handlePhoneChange = (0, react_1.useCallback)(function (e) {
88
+ var masked = phoneMask(e.target.value);
89
+ var syntheticEvent = __assign(__assign({}, e), { target: __assign(__assign({}, e.target), { value: masked }) });
90
+ onChange(syntheticEvent);
91
+ }, [onChange]);
50
92
  var renderInput = function () {
51
- // If inputType is TEL, use ReactInputMask
52
93
  if (inputType === InputType.TEL) {
53
- return (react_1.default.createElement(react_imask_1.IMaskInput, { mask: "0(999) 999 99 99", value: value, onChange: onChange, onKeyDown: onKeyDown, className: "form-control ".concat(className), style: style, required: required, disabled: disabled, readOnly: readOnly, autoComplete: "new-password" })
54
- // <IMaskInput
55
- // mask="0(000) 000 00 00"
56
- // value={value}
57
- // onAccept={(val: string) =>
58
- // onChange({ target: { name, value: val } } as any)
59
- // }
60
- // className={`form-control ${className}`}
61
- // {...ortakProps}
62
- // />
63
- );
94
+ return (react_1.default.createElement("input", { id: id, name: name, type: "tel", value: value, placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : "0(___) ___ __ __", onChange: handlePhoneChange, onKeyDown: onKeyDown, className: "form-control ".concat(className !== null && className !== void 0 ? className : ""), style: style, required: required, disabled: disabled, readOnly: readOnly, autoComplete: "tel" }));
64
95
  }
65
- // Otherwise, return a normal input element
66
- return (react_1.default.createElement("input", { id: id, name: name, type: handleType, value: value, placeholder: placeholder, onChange: onChange, onKeyDown: onKeyDown, className: "form-control ".concat(className), style: style, required: required, disabled: disabled, readOnly: readOnly, autoComplete: "new-password" }));
96
+ return (react_1.default.createElement("input", { id: id, name: name, type: handleType, value: value, placeholder: placeholder, onChange: onChange, onKeyDown: onKeyDown, className: "form-control ".concat(className !== null && className !== void 0 ? className : ""), style: style, required: required, disabled: disabled, readOnly: readOnly, autoComplete: "new-password" }));
67
97
  };
68
98
  return (react_1.default.createElement("div", { className: mainClass },
69
99
  react_1.default.createElement("div", { className: "form-group" },
70
- react_1.default.createElement("label", { htmlFor: id, className: "form-label" }, label),
100
+ label && (react_1.default.createElement("label", { htmlFor: id, className: "form-label" }, label)),
71
101
  react_1.default.createElement("div", { className: "input-group position-relative" },
72
102
  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()),
73
103
  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))),
74
- buttonIcon && buttonOnClick && (react_1.default.createElement("button", { type: "button", onClick: buttonOnClick, className: buttonClass || "btn btn-outline-secondary", title: buttonTooltip || "" }, buttonIcon)),
75
- required && (react_1.default.createElement("div", { className: "invalid-feedback text-danger" },
76
- react_1.default.createElement("div", { className: "description-icon" },
77
- react_1.default.createElement(fa_1.FaExclamationTriangle, null)),
78
- react_1.default.createElement("div", { className: "description-text" },
79
- react_1.default.createElement("span", null, errorMessage || "Bu alan boş bırakılamaz.")))),
80
- conditionalErrorVisible && (react_1.default.createElement("div", { className: "conditional-error-message text-warning" },
81
- react_1.default.createElement("div", { className: "description-icon" },
82
- react_1.default.createElement(fa_1.FaExclamationTriangle, null)),
83
- react_1.default.createElement("div", { className: "description-text" },
84
- react_1.default.createElement("span", null, conditionalErrorMessage)))),
85
- description && (react_1.default.createElement("div", { className: "form-description text-secondary" },
86
- react_1.default.createElement("div", { className: "description-icon" },
87
- react_1.default.createElement(fa_1.FaInfoCircle, null)),
88
- react_1.default.createElement("div", { className: "description-text" },
89
- react_1.default.createElement("span", null, description))))))));
104
+ buttonIcon && buttonOnClick && (react_1.default.createElement("button", { type: "button", onClick: buttonOnClick, className: buttonClass || "btn btn-outline-secondary", title: buttonTooltip }, buttonIcon))),
105
+ required && (react_1.default.createElement("div", { className: "invalid-feedback text-danger d-flex mt-1" },
106
+ react_1.default.createElement(fa_1.FaExclamationTriangle, { className: "me-1 mt-1" }),
107
+ react_1.default.createElement("span", null, errorMessage || "Bu alan boş bırakılamaz."))),
108
+ conditionalErrorVisible && (react_1.default.createElement("div", { className: "text-warning d-flex mt-1" },
109
+ react_1.default.createElement(fa_1.FaExclamationTriangle, { className: "me-1 mt-1" }),
110
+ react_1.default.createElement("span", null, conditionalErrorMessage))),
111
+ description && (react_1.default.createElement("div", { className: "text-secondary d-flex mt-1" },
112
+ react_1.default.createElement(fa_1.FaInfoCircle, { className: "me-1 mt-1" }),
113
+ react_1.default.createElement("span", null, description))))));
90
114
  };
91
115
  exports.CustomInput = CustomInput;
92
116
  exports.default = CustomInput;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "albinasoft-ui-package",
3
- "version": "1.0.103",
3
+ "version": "1.0.105",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "scripts": {
@@ -19,7 +19,6 @@
19
19
  "react-datepicker": "^7.6.0",
20
20
  "react-dom": "18.3.1",
21
21
  "react-icons": "5.4.0",
22
- "react-imask": "^7.6.1",
23
22
  "react-quill": "^2.0.0",
24
23
  "react-router-dom": "^7.1.1",
25
24
  "react-toastify": "^10.0.6"