albinasoft-ui-package 1.0.2 → 1.0.3
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/Button/button.d.ts +7 -0
- package/dist/Button/button.js +11 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +8 -0
- package/package.json +18 -34
- package/readme.md +10 -0
- package/dist/index.cjs +0 -2
- package/dist/index.cjs.map +0 -1
- package/dist/index.modern.js +0 -2
- package/dist/index.modern.js.map +0 -1
- package/dist/index.module.js +0 -2
- package/dist/index.module.js.map +0 -1
- package/dist/index.umd.js +0 -2
- package/dist/index.umd.js.map +0 -1
- package/src/assets/css/custom/components.css +0 -20
- package/src/assets/css/custom/layout.css +0 -89
- package/src/assets/css/dark.css +0 -2145
- package/src/assets/css/main.css +0 -26263
- package/src/assets/data/countryCodes.json +0 -1466
- package/src/assets/images/albinasoft/albinasoft_logo.ico +0 -0
- package/src/assets/images/albinasoft/albinasoft_logo.png +0 -0
- package/src/assets/images/albinasoft/albinasoft_logo.svg +0 -22
- package/src/assets/images/albinasoft/albinasoft_logo_blue.svg +0 -7
- package/src/assets/images/albinasoft/albinasoft_logo_spin.gif +0 -0
- package/src/assets/images/albinasoft/albinasoft_logo_white.svg +0 -1
- package/src/assets/images/header/top-header.png +0 -0
- package/src/assets/images/header/top-image.jpg +0 -0
- package/src/components/CustomButton.tsx +0 -74
- package/src/components/CustomCheckbox.tsx +0 -122
- package/src/components/CustomDateTimePicker.tsx +0 -127
- package/src/components/CustomDivider.tsx +0 -90
- package/src/components/CustomForm.tsx +0 -327
- package/src/components/CustomInput.tsx +0 -180
- package/src/components/CustomModal.tsx +0 -43
- package/src/components/CustomRadioButton.tsx +0 -119
- package/src/components/CustomRichTextbox.tsx +0 -123
- package/src/components/CustomSelect.tsx +0 -134
- package/src/components/CustomText.tsx +0 -199
- package/src/components/CustomTextarea.tsx +0 -131
- package/src/components/CustomUploader.tsx +0 -125
- package/src/components/layout/FullScreenToggle.tsx +0 -72
- package/src/components/layout/LoginDropdown.tsx +0 -39
- package/src/components/layout/ThemeToggle.tsx +0 -59
- package/src/index.js +0 -26
- package/tsconfig.json +0 -15
@@ -1,327 +0,0 @@
|
|
1
|
-
import React, { useRef } from 'react';
|
2
|
-
import { toast } from 'react-toastify';
|
3
|
-
import CustomButton from './CustomButton';
|
4
|
-
import CustomInput from './CustomInput';
|
5
|
-
import CustomTextarea from './CustomTextarea';
|
6
|
-
import CustomCheckbox from './CustomCheckbox';
|
7
|
-
import CustomRadioButton from './CustomRadioButton';
|
8
|
-
import CustomSelect from './CustomSelect';
|
9
|
-
import CustomDateTimePicker from './CustomDateTimePicker';
|
10
|
-
import CustomText from './CustomText';
|
11
|
-
import CustomDivider from './CustomDivider';
|
12
|
-
import CustomRichTextbox from './CustomRichTextbox';
|
13
|
-
import CustomUploader from './CustomUploader';
|
14
|
-
|
15
|
-
enum ElementType {
|
16
|
-
INPUT = 'input',
|
17
|
-
TEXTAREA = 'textarea',
|
18
|
-
CHECKBOX = 'checkbox',
|
19
|
-
RADIO = 'radio',
|
20
|
-
SELECT = 'select',
|
21
|
-
DATETIMEPICKER = 'datetimepicker',
|
22
|
-
TEXT = 'text',
|
23
|
-
DIVIDER = 'divider',
|
24
|
-
RICHTEXTBOX = 'richtextbox',
|
25
|
-
UPLOADER = 'uploader',
|
26
|
-
}
|
27
|
-
|
28
|
-
// Form Elemanlarının Türleri
|
29
|
-
interface InputElement {
|
30
|
-
id?: string;
|
31
|
-
type: ElementType;
|
32
|
-
label: string;
|
33
|
-
value: string;
|
34
|
-
rowId?: number; // Hangi satır
|
35
|
-
colId?: number; // Hangi sütun
|
36
|
-
innerRowId?: number; // Hangi iç satır
|
37
|
-
colClass?: string; // Bootstrap sütun genişliği
|
38
|
-
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
39
|
-
}
|
40
|
-
|
41
|
-
interface TextareaElement {
|
42
|
-
id?: string;
|
43
|
-
type: ElementType.TEXTAREA;
|
44
|
-
label: string;
|
45
|
-
value: string;
|
46
|
-
rowId?: number; // Hangi satır
|
47
|
-
colId?: number; // Hangi sütun
|
48
|
-
innerRowId?: number; // Hangi iç satır
|
49
|
-
colClass?: string; // Bootstrap sütun genişliği
|
50
|
-
onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
|
51
|
-
}
|
52
|
-
|
53
|
-
interface CheckboxElement {
|
54
|
-
id?: string;
|
55
|
-
type: ElementType.CHECKBOX;
|
56
|
-
label: string;
|
57
|
-
value: boolean;
|
58
|
-
rowId?: number; // Hangi satır
|
59
|
-
colId?: number; // Hangi sütun
|
60
|
-
innerRowId?: number; // Hangi iç satır
|
61
|
-
colClass?: string; // Bootstrap sütun genişliği
|
62
|
-
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
63
|
-
}
|
64
|
-
|
65
|
-
interface RadioButtonElement {
|
66
|
-
id?: string;
|
67
|
-
type: ElementType.RADIO;
|
68
|
-
label: string;
|
69
|
-
value: string;
|
70
|
-
options: {
|
71
|
-
id: string;
|
72
|
-
label: string;
|
73
|
-
value: string;
|
74
|
-
}[];
|
75
|
-
rowId?: number; // Hangi satır
|
76
|
-
colId?: number; // Hangi sütun
|
77
|
-
innerRowId?: number; // Hangi iç satır
|
78
|
-
colClass?: string; // Bootstrap sütun genişliği
|
79
|
-
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
80
|
-
}
|
81
|
-
|
82
|
-
interface SelectElement {
|
83
|
-
id?: string;
|
84
|
-
type: ElementType.SELECT;
|
85
|
-
label: string;
|
86
|
-
value: string[];
|
87
|
-
options: {
|
88
|
-
id: string;
|
89
|
-
label: string;
|
90
|
-
value: string;
|
91
|
-
}[];
|
92
|
-
rowId?: number; // Hangi satır
|
93
|
-
colId?: number; // Hangi sütun
|
94
|
-
innerRowId?: number; // Hangi iç satır
|
95
|
-
colClass?: string; // Bootstrap sütun genişliği
|
96
|
-
onChange: (value: string | string[]) => void;
|
97
|
-
}
|
98
|
-
|
99
|
-
interface DateTimePickerElement {
|
100
|
-
id?: string;
|
101
|
-
type: ElementType.DATETIMEPICKER;
|
102
|
-
label: string;
|
103
|
-
value: Date | null;
|
104
|
-
rowId?: number; // Hangi satır
|
105
|
-
colId?: number; // Hangi sütun
|
106
|
-
innerRowId?: number; // Hangi iç satır
|
107
|
-
colClass?: string; // Bootstrap sütun genişliği
|
108
|
-
onChange: (e: Date | null) => void;
|
109
|
-
}
|
110
|
-
|
111
|
-
interface TextElement {
|
112
|
-
id: string;
|
113
|
-
type: ElementType;
|
114
|
-
value: string;
|
115
|
-
rowId?: number; // Hangi satır
|
116
|
-
colId?: number; // Hangi sütun
|
117
|
-
innerRowId?: number; // Hangi iç satır
|
118
|
-
colClass?: string; // Bootstrap sütun genişliği
|
119
|
-
style?: React.CSSProperties;
|
120
|
-
className?: string;
|
121
|
-
}
|
122
|
-
|
123
|
-
interface DividerElement {
|
124
|
-
id?: string;
|
125
|
-
type: ElementType.DIVIDER;
|
126
|
-
//value: string;
|
127
|
-
rowId?: number; // Hangi satır
|
128
|
-
colId?: number; // Hangi sütun
|
129
|
-
innerRowId?: number; // Hangi iç satır
|
130
|
-
colClass?: string; // Bootstrap sütun genişliği
|
131
|
-
className?: string;
|
132
|
-
style?: React.CSSProperties;
|
133
|
-
}
|
134
|
-
|
135
|
-
interface RichTextboxElement {
|
136
|
-
id?: string;
|
137
|
-
type: ElementType.RICHTEXTBOX;
|
138
|
-
label: string;
|
139
|
-
value: string;
|
140
|
-
rowId?: number;
|
141
|
-
colId?: number;
|
142
|
-
innerRowId?: number;
|
143
|
-
colClass?: string;
|
144
|
-
onChange: (value: string) => void;
|
145
|
-
}
|
146
|
-
|
147
|
-
// interface UploaderElement {
|
148
|
-
// id: string;
|
149
|
-
// type: ElementType.UPLOADER; // Uploader bileşeni türü
|
150
|
-
// label: string; // Etiket
|
151
|
-
// value?: FileInfo[]; // Varsayılan değer
|
152
|
-
// rowId?: number; // Satır numarası
|
153
|
-
// colId?: number; // Sütun numarası
|
154
|
-
// innerRowId?: number; // İç satır numarası
|
155
|
-
// colClass?: string; // CSS sınıfı (ör. Bootstrap sütun genişliği)
|
156
|
-
// onChange: (files: FileInfo[]) => void; // Değişiklik olayları için callback
|
157
|
-
// onError?: (errorType: UploadError, file?: File) => void; // Hata işleyici (isteğe bağlı)
|
158
|
-
// }
|
159
|
-
|
160
|
-
// Mevcut Türlerle Birleştirme
|
161
|
-
type FormElement =
|
162
|
-
| InputElement
|
163
|
-
| TextareaElement
|
164
|
-
| CheckboxElement
|
165
|
-
| RadioButtonElement
|
166
|
-
| SelectElement
|
167
|
-
| DateTimePickerElement
|
168
|
-
| TextElement
|
169
|
-
| DividerElement
|
170
|
-
| RichTextboxElement;
|
171
|
-
// | UploaderElement;
|
172
|
-
|
173
|
-
interface CustomFormProps {
|
174
|
-
elements: FormElement[];
|
175
|
-
onSubmit: (formValues: Record<string, any>) => void;
|
176
|
-
confirmLabel?: string; // Confirm butonu etiketi
|
177
|
-
cancelLabel?: string; // Cancel butonu etiketi
|
178
|
-
handleCancel?: () => void; // Cancel butonu işlevi
|
179
|
-
showConfirmButton?: boolean; // Confirm butonunun görünürlüğü
|
180
|
-
showCancelButton?: boolean; // Cancel butonunun görünürlüğü
|
181
|
-
}
|
182
|
-
|
183
|
-
const CustomForm: React.FC<CustomFormProps> = ({
|
184
|
-
elements,
|
185
|
-
onSubmit,
|
186
|
-
confirmLabel = 'Confirm', // Varsayılan değer
|
187
|
-
cancelLabel = 'Cancel', // Varsayılan değer
|
188
|
-
handleCancel,
|
189
|
-
showConfirmButton = true, // Varsayılan olarak görünür
|
190
|
-
showCancelButton = false, // Varsayılan olarak görünür
|
191
|
-
}) => {
|
192
|
-
const formRef = useRef<HTMLFormElement>(null);
|
193
|
-
|
194
|
-
const handleConfirm = (e: React.FormEvent) => {
|
195
|
-
e.preventDefault();
|
196
|
-
|
197
|
-
const form = formRef.current;
|
198
|
-
if (!form) return;
|
199
|
-
|
200
|
-
const isValid = form.checkValidity();
|
201
|
-
if (isValid) {
|
202
|
-
const formValues: Record<string, any> = {};
|
203
|
-
|
204
|
-
Array.from(form.elements).forEach((element) => {
|
205
|
-
if (
|
206
|
-
element instanceof HTMLInputElement ||
|
207
|
-
element instanceof HTMLTextAreaElement ||
|
208
|
-
element instanceof HTMLSelectElement
|
209
|
-
) {
|
210
|
-
if (element.id) { //RichTextbox boş göndermemesi için
|
211
|
-
const name = element.name || element.id;
|
212
|
-
|
213
|
-
if (element instanceof HTMLInputElement && element.type === ElementType.RADIO) {
|
214
|
-
if (element.checked) {
|
215
|
-
formValues[name] = element.value;
|
216
|
-
}
|
217
|
-
} else if (element instanceof HTMLInputElement && element.type === ElementType.CHECKBOX) {
|
218
|
-
formValues[name] = element.checked;
|
219
|
-
} else if (element instanceof HTMLSelectElement && element.multiple) {
|
220
|
-
const selectedOptions = Array.from(element.selectedOptions).map(
|
221
|
-
(option) => option.value
|
222
|
-
);
|
223
|
-
formValues[name] = selectedOptions;
|
224
|
-
} else if (element instanceof HTMLSelectElement) {
|
225
|
-
formValues[name] = [element.value]; // Tekli seçim bile array olarak döner
|
226
|
-
}
|
227
|
-
else {
|
228
|
-
formValues[name] = element.value;
|
229
|
-
}
|
230
|
-
|
231
|
-
}
|
232
|
-
}
|
233
|
-
});
|
234
|
-
|
235
|
-
// CustomForm elemanlarını kontrol etme
|
236
|
-
elements.forEach((element) => {
|
237
|
-
if (element.type === ElementType.RICHTEXTBOX) {
|
238
|
-
formValues[element.id!] = element.value; // RichTextbox değerini ekleme
|
239
|
-
}
|
240
|
-
});
|
241
|
-
|
242
|
-
// Form verilerini JSON olarak çıktıya yazdır
|
243
|
-
console.log(JSON.stringify(formValues, null, 2));
|
244
|
-
|
245
|
-
onSubmit(formValues);
|
246
|
-
} else {
|
247
|
-
toast.error('Gerekli tüm alanları doldurunuz.');
|
248
|
-
form.classList.add('was-validated');
|
249
|
-
}
|
250
|
-
};
|
251
|
-
|
252
|
-
// Elemanları satır, sütun ve iç satıra göre gruplama
|
253
|
-
const groupedElements = elements.reduce<Record<number, Record<number, Record<number, FormElement[]>>>>(
|
254
|
-
(acc, el) => {
|
255
|
-
const row = el.rowId || 0;
|
256
|
-
const col = el.colId || 0;
|
257
|
-
const innerRow = el.innerRowId || 0;
|
258
|
-
|
259
|
-
if (!acc[row]) acc[row] = {};
|
260
|
-
if (!acc[row][col]) acc[row][col] = {};
|
261
|
-
if (!acc[row][col][innerRow]) acc[row][col][innerRow] = [];
|
262
|
-
|
263
|
-
acc[row][col][innerRow].push(el);
|
264
|
-
return acc;
|
265
|
-
},
|
266
|
-
{}
|
267
|
-
);
|
268
|
-
|
269
|
-
return (
|
270
|
-
<form ref={formRef} noValidate className="needs-validation" autoComplete="off">
|
271
|
-
{Object.entries(groupedElements).map(([rowId, columns]) => (
|
272
|
-
<div className="row" key={`row-${rowId}`}>
|
273
|
-
{Object.entries(columns).map(([colId, innerRows]) => (
|
274
|
-
<div className="col" key={`col-${rowId}-${colId}`}>
|
275
|
-
{Object.entries(innerRows).map(([innerRowId, elements]) => (
|
276
|
-
<div className="row" key={`inner-row-${rowId}-${colId}-${innerRowId}`}>
|
277
|
-
{elements.map((element) => (
|
278
|
-
<div className={element.colClass || 'col-12'} key={element.id}>
|
279
|
-
{element.type === ElementType.TEXT ? (
|
280
|
-
<CustomText {...(element as TextElement)} />
|
281
|
-
) : element.type === ElementType.INPUT ? (
|
282
|
-
<CustomInput {...(element as InputElement)} />
|
283
|
-
) : element.type === ElementType.TEXTAREA ? (
|
284
|
-
<CustomTextarea {...(element as TextareaElement)} />
|
285
|
-
) : element.type === ElementType.CHECKBOX ? (
|
286
|
-
<CustomCheckbox {...(element as CheckboxElement)} />
|
287
|
-
) : element.type === ElementType.RADIO ? (
|
288
|
-
<CustomRadioButton {...(element as RadioButtonElement)} />
|
289
|
-
) : element.type === ElementType.SELECT ? (
|
290
|
-
<CustomSelect {...(element as SelectElement)} />
|
291
|
-
) : element.type === ElementType.DATETIMEPICKER ? (
|
292
|
-
<CustomDateTimePicker {...(element as DateTimePickerElement)} />
|
293
|
-
) : element.type === ElementType.DIVIDER ? (
|
294
|
-
<CustomDivider {...(element as DividerElement)} />
|
295
|
-
) : element.type === ElementType.RICHTEXTBOX ? (
|
296
|
-
<CustomRichTextbox {...(element as RichTextboxElement)} />
|
297
|
-
// ) : element.type === ElementType.UPLOADER ? (
|
298
|
-
// <CustomUploader {...(element as UploaderElement)} />
|
299
|
-
) : null}
|
300
|
-
</div>
|
301
|
-
))}
|
302
|
-
</div>
|
303
|
-
))}
|
304
|
-
</div>
|
305
|
-
))}
|
306
|
-
</div>
|
307
|
-
))}
|
308
|
-
<div className="card-footer mt-3">
|
309
|
-
<div className="form-actions mt-3">
|
310
|
-
{showCancelButton && (
|
311
|
-
<CustomButton
|
312
|
-
label={cancelLabel}
|
313
|
-
className="btn btn-secondary"
|
314
|
-
onClick={handleCancel || (() => { })}
|
315
|
-
/>
|
316
|
-
)}
|
317
|
-
{showConfirmButton && (
|
318
|
-
<CustomButton label={confirmLabel} onClick={handleConfirm} />
|
319
|
-
)}
|
320
|
-
</div>
|
321
|
-
</div>
|
322
|
-
</form>
|
323
|
-
);
|
324
|
-
};
|
325
|
-
|
326
|
-
export { CustomForm, ElementType };
|
327
|
-
export default CustomForm;
|
@@ -1,180 +0,0 @@
|
|
1
|
-
import React, { useState } from 'react';
|
2
|
-
import { OverlayTrigger, Tooltip } from 'react-bootstrap';
|
3
|
-
import { FaExclamationTriangle, FaEye, FaEyeSlash, FaInfoCircle } from 'react-icons/fa';
|
4
|
-
|
5
|
-
enum InputType {
|
6
|
-
TEXT = 'text',
|
7
|
-
NUMBER = 'number',
|
8
|
-
TEL = 'tel',
|
9
|
-
PASSWORD = 'password',
|
10
|
-
EMAIL = 'email',
|
11
|
-
FILE = 'file'
|
12
|
-
}
|
13
|
-
|
14
|
-
interface CustomInputProps {
|
15
|
-
id?: string;
|
16
|
-
name?: string;
|
17
|
-
label: string;
|
18
|
-
inputType?: InputType;
|
19
|
-
value: string;
|
20
|
-
placeholder?: string;
|
21
|
-
required?: boolean;
|
22
|
-
errorMessage?: string;
|
23
|
-
conditionalErrorVisible?: boolean;
|
24
|
-
conditionalErrorMessage?: string;
|
25
|
-
disabled?: boolean;
|
26
|
-
readOnly?: boolean;
|
27
|
-
buttonIcon?: React.ReactNode;
|
28
|
-
buttonTooltip?: string;
|
29
|
-
description?: string | null;
|
30
|
-
tooltip?: string;
|
31
|
-
style?: React.CSSProperties;
|
32
|
-
className?: string;
|
33
|
-
buttonOnClick?: () => void;
|
34
|
-
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
35
|
-
}
|
36
|
-
|
37
|
-
const CustomInput: React.FC<CustomInputProps> = ({
|
38
|
-
id,
|
39
|
-
name,
|
40
|
-
label,
|
41
|
-
inputType = InputType.TEXT,
|
42
|
-
value,
|
43
|
-
placeholder,
|
44
|
-
required = false,
|
45
|
-
errorMessage,
|
46
|
-
conditionalErrorVisible = false,
|
47
|
-
conditionalErrorMessage,
|
48
|
-
disabled = false,
|
49
|
-
readOnly = false,
|
50
|
-
buttonIcon,
|
51
|
-
buttonTooltip,
|
52
|
-
description,
|
53
|
-
tooltip,
|
54
|
-
style,
|
55
|
-
className,
|
56
|
-
buttonOnClick,
|
57
|
-
onChange
|
58
|
-
}) => {
|
59
|
-
const [showPassword, setShowPassword] = useState(false);
|
60
|
-
const handleType = inputType === InputType.PASSWORD && showPassword ? InputType.TEXT : inputType;
|
61
|
-
|
62
|
-
const togglePasswordVisibility = () => {
|
63
|
-
setShowPassword((prev) => !prev);
|
64
|
-
};
|
65
|
-
|
66
|
-
return (
|
67
|
-
<div className={className}>
|
68
|
-
<div className="form-group">
|
69
|
-
<label htmlFor={id} className="form-label">
|
70
|
-
{label}
|
71
|
-
</label>
|
72
|
-
<div className="input-group position-relative">
|
73
|
-
|
74
|
-
{tooltip ? (
|
75
|
-
<OverlayTrigger
|
76
|
-
placement="bottom"
|
77
|
-
overlay={<Tooltip id={`tooltip-${tooltip}`}>{tooltip}</Tooltip>}
|
78
|
-
>
|
79
|
-
<input
|
80
|
-
id={id}
|
81
|
-
name={name}
|
82
|
-
type={handleType}
|
83
|
-
value={value}
|
84
|
-
placeholder={placeholder}
|
85
|
-
onChange={onChange}
|
86
|
-
className="form-control"
|
87
|
-
style={style}
|
88
|
-
required={required}
|
89
|
-
disabled={disabled}
|
90
|
-
autoComplete="new-password" // Modern tarayıcılarda autocomplete autofill engellemek için
|
91
|
-
/>
|
92
|
-
</OverlayTrigger>
|
93
|
-
) : (
|
94
|
-
<input
|
95
|
-
id={id}
|
96
|
-
name={name}
|
97
|
-
type={handleType}
|
98
|
-
value={value}
|
99
|
-
placeholder={placeholder}
|
100
|
-
onChange={onChange}
|
101
|
-
className="form-control"
|
102
|
-
style={style}
|
103
|
-
required={required}
|
104
|
-
disabled={disabled}
|
105
|
-
autoComplete="new-password" // Modern tarayıcılarda autocomplete autofill engellemek için
|
106
|
-
/>
|
107
|
-
)}
|
108
|
-
|
109
|
-
{/* Parola göster/gizle ikonu */}
|
110
|
-
{inputType === InputType.PASSWORD && (
|
111
|
-
<button
|
112
|
-
type="button"
|
113
|
-
onClick={togglePasswordVisibility}
|
114
|
-
className="btn btn-outline-secondary"
|
115
|
-
title={showPassword ? "Parolayı Gizle" : "Parolayı Göster"}
|
116
|
-
>
|
117
|
-
{showPassword ? <FaEyeSlash /> : <FaEye />}
|
118
|
-
</button>
|
119
|
-
)}
|
120
|
-
|
121
|
-
{/* Özel Buton */}
|
122
|
-
{buttonIcon && buttonOnClick && (
|
123
|
-
<button
|
124
|
-
type="button"
|
125
|
-
onClick={buttonOnClick}
|
126
|
-
className="btn btn-outline-secondary"
|
127
|
-
title={buttonTooltip || ""}
|
128
|
-
>
|
129
|
-
{buttonIcon}
|
130
|
-
</button>
|
131
|
-
)}
|
132
|
-
|
133
|
-
{required && (
|
134
|
-
<div className="invalid-feedback text-danger">
|
135
|
-
<div className="description-icon">
|
136
|
-
<FaExclamationTriangle />
|
137
|
-
</div>
|
138
|
-
<div className="description-text">
|
139
|
-
<span>
|
140
|
-
{errorMessage || 'Bu alan boş bırakılamaz.'}
|
141
|
-
</span>
|
142
|
-
</div>
|
143
|
-
</div>
|
144
|
-
)}
|
145
|
-
|
146
|
-
{conditionalErrorVisible && (
|
147
|
-
<div className="conditional-error-message text-warning">
|
148
|
-
<div className="description-icon">
|
149
|
-
<FaExclamationTriangle />
|
150
|
-
</div>
|
151
|
-
<div className="description-text">
|
152
|
-
<span>
|
153
|
-
{conditionalErrorMessage}
|
154
|
-
</span>
|
155
|
-
</div>
|
156
|
-
</div>
|
157
|
-
)}
|
158
|
-
|
159
|
-
{description && (
|
160
|
-
<div className="form-description text-secondary">
|
161
|
-
<div className="description-icon">
|
162
|
-
<FaInfoCircle />
|
163
|
-
</div>
|
164
|
-
<div className="description-text">
|
165
|
-
<span>
|
166
|
-
{description}
|
167
|
-
</span>
|
168
|
-
</div>
|
169
|
-
</div>
|
170
|
-
)}
|
171
|
-
|
172
|
-
</div>
|
173
|
-
</div>
|
174
|
-
</div>
|
175
|
-
);
|
176
|
-
|
177
|
-
};
|
178
|
-
|
179
|
-
export { CustomInput, InputType };
|
180
|
-
export default CustomInput;
|
@@ -1,43 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import { Modal } from 'react-bootstrap';
|
3
|
-
|
4
|
-
interface CustomModalProps {
|
5
|
-
show: boolean; // Modalın açık/kapalı durumu
|
6
|
-
title?: string; // Modal başlığı
|
7
|
-
size?: 'sm' | 'lg' | 'xl' | 'fullscreen'; // Modal boyutu ve fullscreen seçeneği
|
8
|
-
onHide: () => void; // Modalı kapatma fonksiyonu
|
9
|
-
children?: React.ReactNode; // Modal içeriği
|
10
|
-
footer?: React.ReactNode; // Modal footer içeriği (isteğe bağlı)
|
11
|
-
style?: React.CSSProperties; // Modalın özel stilleri
|
12
|
-
bodyStyle?: React.CSSProperties; // Modal.Body için stil özelliği
|
13
|
-
}
|
14
|
-
|
15
|
-
const CustomModal: React.FC<CustomModalProps> = ({
|
16
|
-
show,
|
17
|
-
title = 'Default Title',
|
18
|
-
size = 'lg',
|
19
|
-
onHide,
|
20
|
-
children,
|
21
|
-
footer,
|
22
|
-
style,
|
23
|
-
bodyStyle, // Modal.Body için özel stil
|
24
|
-
}) => {
|
25
|
-
return (
|
26
|
-
<Modal
|
27
|
-
show={show}
|
28
|
-
onHide={onHide}
|
29
|
-
size={size !== 'fullscreen' ? size : undefined} // Tam ekran haricinde boyut seçimi
|
30
|
-
fullscreen={size === 'fullscreen' ? true : undefined} // React-Bootstrap'ın fullscreen özelliği
|
31
|
-
centered={size !== 'fullscreen'} // Tam ekran dışında merkezleme
|
32
|
-
style={style} // Stil özelliği eklendi
|
33
|
-
>
|
34
|
-
<Modal.Header closeButton>
|
35
|
-
<Modal.Title>{title}</Modal.Title>
|
36
|
-
</Modal.Header>
|
37
|
-
<Modal.Body style={bodyStyle}>{children}</Modal.Body>
|
38
|
-
{footer && <Modal.Footer>{footer}</Modal.Footer>}
|
39
|
-
</Modal>
|
40
|
-
);
|
41
|
-
};
|
42
|
-
|
43
|
-
export default CustomModal;
|
@@ -1,119 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import { OverlayTrigger, Tooltip } from 'react-bootstrap';
|
3
|
-
import { FaExclamationTriangle, FaInfoCircle } from 'react-icons/fa';
|
4
|
-
|
5
|
-
interface CustomRadioButtonOption {
|
6
|
-
id: string;
|
7
|
-
label: string;
|
8
|
-
value: string;
|
9
|
-
}
|
10
|
-
|
11
|
-
interface CustomRadioButtonProps {
|
12
|
-
id?: string;
|
13
|
-
name?: string;
|
14
|
-
label: string;
|
15
|
-
options: CustomRadioButtonOption[];
|
16
|
-
value: string;
|
17
|
-
required?: boolean;
|
18
|
-
errorMessage?: string;
|
19
|
-
conditionalErrorVisible?: boolean;
|
20
|
-
conditionalErrorMessage?: string;
|
21
|
-
tooltip?: string;
|
22
|
-
description?: string | null;
|
23
|
-
disabled?: boolean;
|
24
|
-
className?: string;
|
25
|
-
style?: React.CSSProperties;
|
26
|
-
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
27
|
-
}
|
28
|
-
|
29
|
-
const CustomRadioButton: React.FC<CustomRadioButtonProps> = ({
|
30
|
-
id,
|
31
|
-
name,
|
32
|
-
label,
|
33
|
-
options,
|
34
|
-
value,
|
35
|
-
required = false,
|
36
|
-
errorMessage,
|
37
|
-
conditionalErrorVisible,
|
38
|
-
conditionalErrorMessage,
|
39
|
-
tooltip,
|
40
|
-
description,
|
41
|
-
disabled = false,
|
42
|
-
className,
|
43
|
-
style,
|
44
|
-
onChange,
|
45
|
-
}) => {
|
46
|
-
return (
|
47
|
-
<div className={className} style={style}>
|
48
|
-
<div className="form-group">
|
49
|
-
<label className="form-label">{label}</label>
|
50
|
-
<div className="radio-options">
|
51
|
-
{options.map((option, index) => (
|
52
|
-
<div key={option.id} className="form-check">
|
53
|
-
<OverlayTrigger
|
54
|
-
placement="bottom"
|
55
|
-
overlay={
|
56
|
-
tooltip ? (
|
57
|
-
<Tooltip id={`tooltip-${option.id}`}>
|
58
|
-
{tooltip}
|
59
|
-
</Tooltip>
|
60
|
-
) : <></>
|
61
|
-
}
|
62
|
-
>
|
63
|
-
<input
|
64
|
-
id={option.id}
|
65
|
-
name={name || id}
|
66
|
-
type="radio"
|
67
|
-
className="form-check-input"
|
68
|
-
value={option.value}
|
69
|
-
checked={value === option.value}
|
70
|
-
disabled={disabled}
|
71
|
-
onChange={onChange}
|
72
|
-
required={required}
|
73
|
-
/>
|
74
|
-
</OverlayTrigger>
|
75
|
-
<label htmlFor={option.id} className="form-check-label">
|
76
|
-
{option.label}
|
77
|
-
</label>
|
78
|
-
|
79
|
-
{required && !value && index === options.length - 1 && (
|
80
|
-
<div className="invalid-feedback text-danger mt-2">
|
81
|
-
<div className="description-icon">
|
82
|
-
<FaExclamationTriangle />
|
83
|
-
</div>
|
84
|
-
<div className="description-text">
|
85
|
-
<span>{errorMessage || 'Seçim yapılması gerekmektedir.'}</span>
|
86
|
-
</div>
|
87
|
-
</div>
|
88
|
-
)}
|
89
|
-
|
90
|
-
{conditionalErrorVisible && index === options.length - 1 && (
|
91
|
-
<div className="conditional-error-message text-warning mt-2">
|
92
|
-
<div className="description-icon">
|
93
|
-
<FaExclamationTriangle />
|
94
|
-
</div>
|
95
|
-
<div className="description-text">
|
96
|
-
<span>{conditionalErrorMessage}</span>
|
97
|
-
</div>
|
98
|
-
</div>
|
99
|
-
)}
|
100
|
-
|
101
|
-
{description && index === options.length - 1 && (
|
102
|
-
<div className="form-description text-secondary mt-2">
|
103
|
-
<div className="description-icon">
|
104
|
-
<FaInfoCircle />
|
105
|
-
</div>
|
106
|
-
<div className="description-text">
|
107
|
-
<span>{description}</span>
|
108
|
-
</div>
|
109
|
-
</div>
|
110
|
-
)}
|
111
|
-
</div>
|
112
|
-
))}
|
113
|
-
</div>
|
114
|
-
</div>
|
115
|
-
</div>
|
116
|
-
);
|
117
|
-
};
|
118
|
-
|
119
|
-
export default CustomRadioButton;
|