@sydsoft/base 1.31.0 → 1.33.0
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.
- package/dist/esm/form/Input.d.ts +2 -3
- package/dist/esm/form/Input.js +32 -33
- package/package.json +1 -1
package/dist/esm/form/Input.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from
|
|
1
|
+
import React from 'react';
|
|
2
2
|
type maskSettingsTranslation = {
|
|
3
3
|
[key: string]: {
|
|
4
4
|
pattern: any;
|
|
@@ -21,14 +21,13 @@ export interface PropsInput {
|
|
|
21
21
|
id?: string;
|
|
22
22
|
name?: string;
|
|
23
23
|
value?: any;
|
|
24
|
-
defaultValue?: any;
|
|
25
24
|
label?: string;
|
|
26
25
|
loading?: boolean;
|
|
27
26
|
autoFocus?: boolean | undefined;
|
|
28
27
|
disabled?: boolean;
|
|
29
28
|
required?: boolean;
|
|
30
29
|
placeholder?: string;
|
|
31
|
-
type?:
|
|
30
|
+
type?: 'text' | 'number' | 'email' | 'color' | 'date' | 'time' | 'datetime-local' | 'hidden' | 'file' | 'password' | 'tel' | 'search';
|
|
32
31
|
select?: any[];
|
|
33
32
|
ilkSec?: boolean;
|
|
34
33
|
valueKey?: string;
|
package/dist/esm/form/Input.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { __assign } from "tslib";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { useCallback, useEffect, useRef, useState } from
|
|
4
|
-
import { seoCevirFunction, tumuBuyukCevir, tumuKucukCevir } from
|
|
5
|
-
import { applyInputMask } from
|
|
6
|
-
import { alert_add } from
|
|
7
|
-
import { Dialog } from
|
|
8
|
-
import styles from
|
|
3
|
+
import { useCallback, useEffect, useRef, useState } from 'react';
|
|
4
|
+
import { seoCevirFunction, tumuBuyukCevir, tumuKucukCevir } from '../_lib/baseFunctions';
|
|
5
|
+
import { applyInputMask } from '../_lib/inputMask';
|
|
6
|
+
import { alert_add } from '../alert';
|
|
7
|
+
import { Dialog } from './Dialog';
|
|
8
|
+
import styles from './styles/Input.module.css';
|
|
9
9
|
export var Input = function (_a) {
|
|
10
|
-
var componentRef = _a.componentRef, inputRef = _a.inputRef, className = _a.className, propsComponent = _a.propsComponent, propsInput = _a.propsInput, id = _a.id, name = _a.name, value = _a.value,
|
|
10
|
+
var componentRef = _a.componentRef, inputRef = _a.inputRef, className = _a.className, propsComponent = _a.propsComponent, propsInput = _a.propsInput, id = _a.id, name = _a.name, value = _a.value, type = _a.type, label = _a.label, startAdornment = _a.startAdornment, endAdornment = _a.endAdornment, placeholder = _a.placeholder, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, onClick = _a.onClick, onKeyPress = _a.onKeyPress, onKeyUp = _a.onKeyUp, onKeyDown = _a.onKeyDown, disabled = _a.disabled, required = _a.required, loading = _a.loading, autoFocus = _a.autoFocus, select = _a.select, _b = _a.valueKey, valueKey = _b === void 0 ? 'value' : _b, _c = _a.labelKey, labelKey = _c === void 0 ? 'label' : _c, ilkSec = _a.ilkSec, multiline = _a.multiline, rows = _a.rows, sadeceYazi = _a.sadeceYazi, sadeceSayi = _a.sadeceSayi, tumuBuyuk = _a.tumuBuyuk, tumuKucuk = _a.tumuKucuk, seoCevir = _a.seoCevir, dosyaNoGiris = _a.dosyaNoGiris, fileNameGiris = _a.fileNameGiris, dateGecmisKontrol = _a.dateGecmisKontrol, autoSelectText = _a.autoSelectText, _d = _a.mask, mask = _d === void 0 ? '' : _d, _e = _a.maskSettings, maskSettings = _e === void 0 ? {
|
|
11
11
|
clearIfNotMatch: true,
|
|
12
12
|
reverse: false, //Tersten doldurmaya başla, fiyatlar için geçerli
|
|
13
13
|
selectOnFocus: false
|
|
@@ -30,25 +30,25 @@ export var Input = function (_a) {
|
|
|
30
30
|
}, [autoSelectText, select]);
|
|
31
31
|
useEffect(function () {
|
|
32
32
|
var _a, _b;
|
|
33
|
-
var filled =
|
|
33
|
+
var filled = value && String(value) && value.toString().length > 0;
|
|
34
34
|
setInputFilled(filled);
|
|
35
35
|
if (filled) {
|
|
36
36
|
(_b = (_a = refMain === null || refMain === void 0 ? void 0 : refMain.current) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.remove(styles.error);
|
|
37
37
|
}
|
|
38
|
-
}, [value
|
|
38
|
+
}, [value]);
|
|
39
39
|
useEffect(function () {
|
|
40
40
|
// if (type === "number") sadeceSayi = true; //TODO: sadeceSayi burada değiştirelemez ki!!!
|
|
41
|
-
if (select && ilkSec && value
|
|
41
|
+
if (select && ilkSec && (value === '' || !value)) {
|
|
42
42
|
if (select.length) {
|
|
43
|
-
var ilkItem = select[0][valueKey] ? select[0][valueKey] :
|
|
43
|
+
var ilkItem = select[0][valueKey] ? select[0][valueKey] : '';
|
|
44
44
|
onChange && onChange({ target: { name: name, value: ilkItem } });
|
|
45
45
|
}
|
|
46
46
|
}
|
|
47
47
|
}, [select]);
|
|
48
48
|
useEffect(function () {
|
|
49
49
|
var _a;
|
|
50
|
-
if (typeof window !==
|
|
51
|
-
(_a = refInput.current) === null || _a === void 0 ? void 0 : _a.setAttribute(
|
|
50
|
+
if (typeof window !== 'undefined' && (mask === null || mask === void 0 ? void 0 : mask.length) > 0 && (refInput === null || refInput === void 0 ? void 0 : refInput.current)) {
|
|
51
|
+
(_a = refInput.current) === null || _a === void 0 ? void 0 : _a.setAttribute('autocomplete', 'off');
|
|
52
52
|
}
|
|
53
53
|
if ((mask === null || mask === void 0 ? void 0 : mask.length) > 0 && (refInput === null || refInput === void 0 ? void 0 : refInput.current)) {
|
|
54
54
|
var maskInstance_1 = applyInputMask(refInput.current, mask, __assign(__assign({}, maskSettings), { onChange: function (masked, clean, e) {
|
|
@@ -82,26 +82,26 @@ export var Input = function (_a) {
|
|
|
82
82
|
}, [onFocus]);
|
|
83
83
|
var Blur = useCallback(function (e) {
|
|
84
84
|
var _a, _b, _c, _d;
|
|
85
|
-
if (fileNameGiris && e.target.value !==
|
|
86
|
-
e.target.value = e.target.value.replace(/[/\\?%*:|"'<>]/g,
|
|
85
|
+
if (fileNameGiris && e.target.value !== '' && /[/\\?%*:|"'<>]/g.test(e.target.value)) {
|
|
86
|
+
e.target.value = e.target.value.replace(/[/\\?%*:|"'<>]/g, '-');
|
|
87
87
|
if (onChange)
|
|
88
88
|
onChange(e);
|
|
89
|
-
alert_add({ type:
|
|
89
|
+
alert_add({ type: 'warning', message: 'Lütfen dosya adındaki özel karakter değiştirildi.' });
|
|
90
90
|
}
|
|
91
|
-
if (dosyaNoGiris && e.target.value !==
|
|
92
|
-
e.target.value =
|
|
91
|
+
if (dosyaNoGiris && e.target.value !== '' && !/^[1-2]\d{3}\/\d/.test(e.target.value)) {
|
|
92
|
+
e.target.value = '';
|
|
93
93
|
if (onChange)
|
|
94
94
|
onChange(e);
|
|
95
|
-
alert_add({ type:
|
|
95
|
+
alert_add({ type: 'error', message: 'Lütfen doğru bir dosya numarası giriniz. Örn: 2022/123' });
|
|
96
96
|
}
|
|
97
|
-
if (dateGecmisKontrol && e.target.value !==
|
|
97
|
+
if (dateGecmisKontrol && e.target.value !== '') {
|
|
98
98
|
var today = new Date().toISOString().slice(0, 10);
|
|
99
99
|
if (e.target.value < today) {
|
|
100
100
|
Dialog({
|
|
101
|
-
message:
|
|
101
|
+
message: 'Geçmiş bir tarihi seçtiniz. Devam etmek istiyor musunuz?'
|
|
102
102
|
}).then(function (r) {
|
|
103
103
|
if (!r) {
|
|
104
|
-
e.target.value =
|
|
104
|
+
e.target.value = '';
|
|
105
105
|
if (onChange)
|
|
106
106
|
onChange(e);
|
|
107
107
|
e.target.focus();
|
|
@@ -110,7 +110,7 @@ export var Input = function (_a) {
|
|
|
110
110
|
}
|
|
111
111
|
}
|
|
112
112
|
if (required) {
|
|
113
|
-
if (e.target.value ===
|
|
113
|
+
if (e.target.value === '') {
|
|
114
114
|
(_b = (_a = refMain === null || refMain === void 0 ? void 0 : refMain.current) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.add(styles.error);
|
|
115
115
|
}
|
|
116
116
|
else {
|
|
@@ -134,8 +134,8 @@ export var Input = function (_a) {
|
|
|
134
134
|
}
|
|
135
135
|
if ((sadeceSayi || dosyaNoGiris) && (e.which < 48 || e.which > 57))
|
|
136
136
|
e.preventDefault();
|
|
137
|
-
if (dosyaNoGiris && e.which !== 8 && e.target.value.length === 4 && e.target.value.search(
|
|
138
|
-
e.target.value = e.target.value +
|
|
137
|
+
if (dosyaNoGiris && e.which !== 8 && e.target.value.length === 4 && e.target.value.search('/') === -1) {
|
|
138
|
+
e.target.value = e.target.value + '/';
|
|
139
139
|
}
|
|
140
140
|
onKeyPress ? onKeyPress(e) : null;
|
|
141
141
|
}, [sadeceYazi, sadeceSayi, dosyaNoGiris, onKeyPress]);
|
|
@@ -148,7 +148,6 @@ export var Input = function (_a) {
|
|
|
148
148
|
id: id,
|
|
149
149
|
name: name,
|
|
150
150
|
value: value,
|
|
151
|
-
defaultValue: defaultValue,
|
|
152
151
|
autoFocus: autoFocus,
|
|
153
152
|
disabled: disabled,
|
|
154
153
|
required: required,
|
|
@@ -163,7 +162,7 @@ export var Input = function (_a) {
|
|
|
163
162
|
};
|
|
164
163
|
var component;
|
|
165
164
|
if (select) {
|
|
166
|
-
component = (_jsxs("select", __assign({ className: "".concat(styles.input, " ").concat(styles.select) }, ortakProps, propsInput, { children: [ilkSec === false && _jsx("option", { value:
|
|
165
|
+
component = (_jsxs("select", __assign({ className: "".concat(styles.input, " ").concat(styles.select) }, ortakProps, propsInput, { children: [ilkSec === false && _jsx("option", { value: '' }), select.map(function (item) {
|
|
167
166
|
var value = item[valueKey];
|
|
168
167
|
var label = item[labelKey];
|
|
169
168
|
return (_jsx("option", { value: value, children: label ? label : value }, value));
|
|
@@ -176,27 +175,27 @@ export var Input = function (_a) {
|
|
|
176
175
|
component = _jsx("input", __assign({ className: "".concat(styles.input), type: type }, ortakProps, propsInput));
|
|
177
176
|
}
|
|
178
177
|
var classList = useCallback(function () {
|
|
179
|
-
var list = [
|
|
178
|
+
var list = ['sInputComponent', styles.component];
|
|
180
179
|
if (className)
|
|
181
180
|
list.push(className);
|
|
182
181
|
if (label) {
|
|
183
182
|
list.push(styles.hidePlaceHolder);
|
|
184
183
|
}
|
|
185
184
|
// if (props.required && (value.length === 0 || !value)) list.push("error");
|
|
186
|
-
return list.join(
|
|
185
|
+
return list.join(' ');
|
|
187
186
|
}, [value, className]);
|
|
188
187
|
useEffect(function () {
|
|
189
|
-
if (propsComponent && propsComponent.hasOwnProperty(
|
|
188
|
+
if (propsComponent && propsComponent.hasOwnProperty('style')) {
|
|
190
189
|
var background = propsComponent.style.background ? propsComponent.style.background : propsComponent.style.backgroundColor ? propsComponent.style.backgroundColor : null;
|
|
191
190
|
if (background && refLabel.current) {
|
|
192
|
-
refLabel.current.style.setProperty(
|
|
191
|
+
refLabel.current.style.setProperty('--label-bg', background);
|
|
193
192
|
}
|
|
194
193
|
}
|
|
195
194
|
}, [propsComponent]);
|
|
196
|
-
return (_jsxs("div", __assign({ ref: refMain, className: classList(), "data-disabled": disabled }, propsComponent, { children: [startAdornment && _jsx("div", { className: "adornment_start ".concat(styles.adornment, " ").concat(styles.start), children: startAdornment }), _jsxs("div", { className: "".concat(styles.inputBase, " ").concat(inputFilled || focus || type ==
|
|
195
|
+
return (_jsxs("div", __assign({ ref: refMain, className: classList(), "data-disabled": disabled }, propsComponent, { children: [startAdornment && _jsx("div", { className: "adornment_start ".concat(styles.adornment, " ").concat(styles.start), children: startAdornment }), _jsxs("div", { className: "".concat(styles.inputBase, " ").concat(inputFilled || focus || type == 'date' ? styles.open : ''), children: [component, label && (_jsxs("div", { ref: refLabel, className: "label ".concat(styles.label), children: [label, required && _jsx("span", { className: styles.required, children: "*" })] }))] }), (endAdornment || loading) && (_jsxs("div", { className: "adornment_end ".concat(styles.adornment, " ").concat(styles.end), children: [endAdornment, loading && _jsx("div", { className: styles.loading })] }))] })));
|
|
197
196
|
};
|
|
198
197
|
Input.defaultProps = {
|
|
199
|
-
value:
|
|
198
|
+
value: '',
|
|
200
199
|
disabled: false,
|
|
201
200
|
required: false,
|
|
202
201
|
ilkSec: false,
|