@sydsoft/base 1.49.0 → 1.50.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/package.json +2 -2
- package/_lib/baseFunctions.ts +0 -94
- package/_lib/inputMask.ts +0 -257
- package/_lib/listFunctions.ts +0 -106
- package/_lib/storage/cookies.ts +0 -39
- package/_lib/storage/encData.ts +0 -41
- package/_lib/storage/localStorage.ts +0 -67
- package/_lib/storage/sessionStorage.ts +0 -67
- package/_lib/useInterval.ts +0 -30
- package/alert/index.module.css +0 -119
- package/alert/index.tsx +0 -131
- package/box/Box.module.css +0 -153
- package/box/Box.tsx +0 -33
- package/box/BoxContent.tsx +0 -18
- package/box/BoxFooter.tsx +0 -25
- package/box/BoxHeader.tsx +0 -46
- package/box/index.ts +0 -10
- package/countDown/index.tsx +0 -116
- package/dateTime/index.ts +0 -79
- package/form/Button.tsx +0 -143
- package/form/Checkbox.tsx +0 -48
- package/form/Dialog.tsx +0 -109
- package/form/Form.tsx +0 -19
- package/form/FormOlustur.tsx +0 -105
- package/form/Input.tsx +0 -364
- package/form/Label.tsx +0 -20
- package/form/SearchableInput.tsx +0 -406
- package/form/UploadBase.tsx +0 -133
- package/form/index.ts +0 -10
- package/form/styles/Button.module.css +0 -145
- package/form/styles/Input.module.css +0 -221
- package/form/styles/Label.module.css +0 -31
- package/form/styles/SearchableInput.module.css +0 -80
- package/global.d.ts +0 -9
- package/grid/index.module.css +0 -805
- package/grid/index.tsx +0 -171
- package/icon/icons.tsx +0 -33
- package/icon/index.tsx +0 -95
- package/icon/mui.tsx +0 -5932
- package/index.ts +0 -21
- package/menu/index.module.css +0 -92
- package/menu/index.tsx +0 -143
- package/modal/index.module.css +0 -77
- package/modal/index.tsx +0 -106
- package/npm_recovery_codes.txt +0 -5
- package/popover/index.module.css +0 -89
- package/popover/index.tsx +0 -392
- package/tooltip/index.tsx +0 -216
- package/tsconfig.json +0 -24
package/dateTime/index.ts
DELETED
|
@@ -1,79 +0,0 @@
|
|
|
1
|
-
export default class dateTime {
|
|
2
|
-
private datetime: Date | string;
|
|
3
|
-
private resut_format: string = "y-m-d h:i:s";
|
|
4
|
-
|
|
5
|
-
constructor(datetime: Date | string | null = null, format: string = "y-m-d h:i:s") {
|
|
6
|
-
this.format(format);
|
|
7
|
-
this.datetime = datetime !== "0000-00-00 00:00:00" && datetime !== "0000-00-00" && datetime ? datetime : new Date().toISOString(); // GMT ekli halde
|
|
8
|
-
return this;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
public addDays(days: number) {
|
|
12
|
-
const datetime = new Date(this.datetime);
|
|
13
|
-
datetime.setDate(datetime.getDate() + days);
|
|
14
|
-
this.datetime = datetime.toISOString();
|
|
15
|
-
return this;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
private parse() {
|
|
19
|
-
const datetime = new Date(this.datetime);
|
|
20
|
-
const monthNames = ["Ocak", "Şubat", "Mart", "Nisan", "Mayıs", "Haziran", "Temmuz", "Ağustos", "Eylül", "Ekim", "Kasım", "Aralık"];
|
|
21
|
-
const dayNames = ["Pazar", "Pazartesi", "Salı", "Çarşamba", "Perşembe", "Cuma", "Cumartesi"];
|
|
22
|
-
return {
|
|
23
|
-
y: datetime.getFullYear().toString(),
|
|
24
|
-
m: (datetime.getMonth() + 1).toString().padStart(2, "0"),
|
|
25
|
-
d: datetime.getDate().toString().padStart(2, "0"),
|
|
26
|
-
h: datetime.getHours().toString().padStart(2, "0"),
|
|
27
|
-
i: datetime.getMinutes().toString().padStart(2, "0"),
|
|
28
|
-
s: datetime.getSeconds().toString().padStart(2, "0"),
|
|
29
|
-
ms: (datetime.getMilliseconds() / 10).toFixed(0).toString().padStart(2, "0"),
|
|
30
|
-
z: (datetime.getTimezoneOffset() / 60).toString(),
|
|
31
|
-
// TAM STRING ICEREN IFADELER SONA EKLENMELI
|
|
32
|
-
TAMAY: monthNames[datetime.getMonth()],
|
|
33
|
-
TAMGUN: dayNames[datetime.getDay()]
|
|
34
|
-
};
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
public getResult() {
|
|
38
|
-
const parse: any = this.parse();
|
|
39
|
-
let result = this.resut_format;
|
|
40
|
-
result = result.replace(new RegExp("y", "g"), parse.y.toString());
|
|
41
|
-
result = result.replace(new RegExp("m", "g"), parse.m.toString());
|
|
42
|
-
result = result.replace(new RegExp("d", "g"), parse.d.toString());
|
|
43
|
-
result = result.replace(new RegExp("h", "g"), parse.h.toString());
|
|
44
|
-
result = result.replace(new RegExp("i", "g"), parse.i.toString());
|
|
45
|
-
result = result.replace(new RegExp("s", "g"), parse.s.toString());
|
|
46
|
-
result = result.replace(new RegExp("ms", "g"), parse.ms.toString());
|
|
47
|
-
result = result.replace(new RegExp("z", "g"), parse.z.toString());
|
|
48
|
-
result = result.replace(new RegExp("TAMAY", "g"), parse.TAMAY.toString());
|
|
49
|
-
result = result.replace(new RegExp("TAMGUN", "g"), parse.TAMGUN.toString());
|
|
50
|
-
return result;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
public format(format: string = "y-m-d h:i:s") {
|
|
54
|
-
this.resut_format = format;
|
|
55
|
-
return this;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
public today() {
|
|
59
|
-
this.datetime = new Date().toISOString();
|
|
60
|
-
this.format("y-m-d");
|
|
61
|
-
return this.getResult();
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
public getTime() {
|
|
65
|
-
const convertDateTime = new dateTime(this.datetime).format("y-m-d h:i:s").getResult();
|
|
66
|
-
const datetime = new Date(convertDateTime);
|
|
67
|
-
return datetime.getTime();
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
public nextMonthFirstDay(format = "y-m-d") {
|
|
71
|
-
// Verilen tarihin bir sonraki ayının ilk gününü bul
|
|
72
|
-
this.datetime = new Date(this.datetime);
|
|
73
|
-
this.datetime.setMonth(this.datetime.getMonth() + 1);
|
|
74
|
-
this.datetime.setDate(1);
|
|
75
|
-
this.datetime = this.datetime.toISOString();
|
|
76
|
-
this.format(format);
|
|
77
|
-
return this.getResult();
|
|
78
|
-
}
|
|
79
|
-
}
|
package/form/Button.tsx
DELETED
|
@@ -1,143 +0,0 @@
|
|
|
1
|
-
import { Dialog, propsDialog } from "./Dialog";
|
|
2
|
-
import React, { memo, useCallback, useEffect, useState } from "react";
|
|
3
|
-
import { Tooltip, typeTooltipPosition } from "../tooltip";
|
|
4
|
-
|
|
5
|
-
import Link from "next/link";
|
|
6
|
-
import styles from "./styles/Button.module.css";
|
|
7
|
-
|
|
8
|
-
interface Props {
|
|
9
|
-
children?: React.ReactNode;
|
|
10
|
-
onlyIcon?: React.ReactNode;
|
|
11
|
-
buttonClass?: "default" | "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark" | "link";
|
|
12
|
-
buttonSize?: "small" | "medium" | "large";
|
|
13
|
-
autoFocus?: boolean;
|
|
14
|
-
hidden?: boolean;
|
|
15
|
-
component?: "button" | "a" | "div" | any;
|
|
16
|
-
className?: string;
|
|
17
|
-
type?: "submit" | "reset" | "button";
|
|
18
|
-
disabled?: boolean;
|
|
19
|
-
fullWidth?: boolean;
|
|
20
|
-
onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
|
21
|
-
href?: string | undefined;
|
|
22
|
-
target?: string | undefined;
|
|
23
|
-
style?: React.CSSProperties;
|
|
24
|
-
tabIndex?: number;
|
|
25
|
-
|
|
26
|
-
//Tooltip
|
|
27
|
-
title?: string;
|
|
28
|
-
titlePosition?: typeTooltipPosition;
|
|
29
|
-
titleArrow?: boolean;
|
|
30
|
-
|
|
31
|
-
//Dialog
|
|
32
|
-
dialog?: propsDialog;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
export const Button = memo(function MemoFunction({
|
|
36
|
-
children,
|
|
37
|
-
component = "button",
|
|
38
|
-
className,
|
|
39
|
-
buttonClass = "default",
|
|
40
|
-
buttonSize = "medium",
|
|
41
|
-
style,
|
|
42
|
-
type = "button",
|
|
43
|
-
fullWidth = false,
|
|
44
|
-
onlyIcon,
|
|
45
|
-
onClick,
|
|
46
|
-
href,
|
|
47
|
-
target,
|
|
48
|
-
tabIndex,
|
|
49
|
-
title,
|
|
50
|
-
titlePosition,
|
|
51
|
-
titleArrow,
|
|
52
|
-
dialog,
|
|
53
|
-
autoFocus,
|
|
54
|
-
...other
|
|
55
|
-
}: Props) {
|
|
56
|
-
const Comp = component;
|
|
57
|
-
const ripple = (e: any): void => {
|
|
58
|
-
const el = e.currentTarget;
|
|
59
|
-
const circle = document.createElement("span");
|
|
60
|
-
const diameter = Math.max(el.clientWidth, el.clientHeight);
|
|
61
|
-
circle.style.width = circle.style.height = `${diameter}px`;
|
|
62
|
-
circle.classList.add(styles.ripple);
|
|
63
|
-
const ripple = el.getElementsByClassName(styles.ripple)[0];
|
|
64
|
-
if (ripple) ripple.remove();
|
|
65
|
-
el.appendChild(circle);
|
|
66
|
-
};
|
|
67
|
-
|
|
68
|
-
const handleClick = (e: any) => {
|
|
69
|
-
ripple(e);
|
|
70
|
-
if (dialog) {
|
|
71
|
-
Dialog(dialog).then((result) => {
|
|
72
|
-
if (result && onClick) {
|
|
73
|
-
onClick(e);
|
|
74
|
-
}
|
|
75
|
-
});
|
|
76
|
-
} else {
|
|
77
|
-
if (onClick) onClick(e);
|
|
78
|
-
}
|
|
79
|
-
};
|
|
80
|
-
|
|
81
|
-
const createClassList = useCallback(() => {
|
|
82
|
-
const list = ["sbutton", styles.button];
|
|
83
|
-
if (buttonClass) list.push(styles[buttonClass]);
|
|
84
|
-
if (className) list.push(className);
|
|
85
|
-
if (onlyIcon) list.push(styles.iconbutton);
|
|
86
|
-
if (fullWidth) list.push(styles.fullwidth);
|
|
87
|
-
return list.join(" ");
|
|
88
|
-
}, [buttonClass, className, onlyIcon, fullWidth]);
|
|
89
|
-
|
|
90
|
-
const [classList, setClassList] = useState<string>(() => createClassList());
|
|
91
|
-
|
|
92
|
-
useEffect(() => {
|
|
93
|
-
const newClassList = createClassList().split(" ").filter(Boolean);
|
|
94
|
-
if (href && typeof window !== "undefined" && window.location.pathname === href) {
|
|
95
|
-
newClassList.push("active");
|
|
96
|
-
}
|
|
97
|
-
setClassList(newClassList.join(" "));
|
|
98
|
-
}, [href, createClassList]);
|
|
99
|
-
|
|
100
|
-
let ortakProps = {
|
|
101
|
-
className: classList,
|
|
102
|
-
style,
|
|
103
|
-
onClick: handleClick,
|
|
104
|
-
tabIndex,
|
|
105
|
-
autoFocus,
|
|
106
|
-
"data-button-size": (!onlyIcon)? buttonSize :null,
|
|
107
|
-
...other
|
|
108
|
-
};
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
let renderComponent;
|
|
115
|
-
if (href !== undefined) {
|
|
116
|
-
if (other?.hidden) {
|
|
117
|
-
renderComponent = null;
|
|
118
|
-
} else {
|
|
119
|
-
let checkHref = other?.disabled ? "#" : href;
|
|
120
|
-
renderComponent = (
|
|
121
|
-
<Link href={checkHref} target={other?.disabled ? "_self" : target}>
|
|
122
|
-
<Comp {...ortakProps}>{onlyIcon ? onlyIcon : children}</Comp>
|
|
123
|
-
</Link>
|
|
124
|
-
);
|
|
125
|
-
}
|
|
126
|
-
} else {
|
|
127
|
-
renderComponent = (
|
|
128
|
-
<Comp type={type} {...ortakProps}>
|
|
129
|
-
{onlyIcon ? onlyIcon : children}
|
|
130
|
-
</Comp>
|
|
131
|
-
);
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
if (title && renderComponent) {
|
|
135
|
-
return (
|
|
136
|
-
<Tooltip title={title} position={titlePosition} arrow={titleArrow}>
|
|
137
|
-
{renderComponent}
|
|
138
|
-
</Tooltip>
|
|
139
|
-
);
|
|
140
|
-
} else {
|
|
141
|
-
return renderComponent;
|
|
142
|
-
}
|
|
143
|
-
});
|
package/form/Checkbox.tsx
DELETED
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
import React, { useRef } from "react";
|
|
2
|
-
|
|
3
|
-
import styles from "./styles/Input.module.css";
|
|
4
|
-
|
|
5
|
-
interface Props {
|
|
6
|
-
checked: "0" | "1" | boolean;
|
|
7
|
-
ref?: React.Ref<any>;
|
|
8
|
-
name?: string;
|
|
9
|
-
label?: string;
|
|
10
|
-
className?: string;
|
|
11
|
-
disabled?: boolean;
|
|
12
|
-
onToogle?: (e: { target: { name?: string; value: "0" | "1" } }) => void;
|
|
13
|
-
style?: React.CSSProperties;
|
|
14
|
-
styleCheckbox?: React.CSSProperties;
|
|
15
|
-
styleLabel?: React.CSSProperties;
|
|
16
|
-
tabIndex?: number;
|
|
17
|
-
required?: boolean;
|
|
18
|
-
children?: React.ReactNode;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
export const Checkbox: React.FC<Props> = ({ ref, children, name, label, checked, className, style, styleCheckbox, styleLabel, onToogle, disabled, tabIndex, required = false }) => {
|
|
22
|
-
const refMain = useRef<HTMLDivElement>(null);
|
|
23
|
-
|
|
24
|
-
// checked değerini boolean hâline getiriyoruz
|
|
25
|
-
const isChecked = checked === "1" || checked === true;
|
|
26
|
-
|
|
27
|
-
const handleChange = (newChecked: boolean) => {
|
|
28
|
-
if (disabled) return;
|
|
29
|
-
onToogle?.({
|
|
30
|
-
target: {
|
|
31
|
-
name,
|
|
32
|
-
value: newChecked ? "1" : "0"
|
|
33
|
-
}
|
|
34
|
-
});
|
|
35
|
-
};
|
|
36
|
-
|
|
37
|
-
const toggleCheck = () => {
|
|
38
|
-
handleChange(!isChecked);
|
|
39
|
-
};
|
|
40
|
-
|
|
41
|
-
return (
|
|
42
|
-
<div ref={refMain} className={`${styles.checkbox} ${className || ""}`} style={style} tabIndex={tabIndex} onClick={toggleCheck}>
|
|
43
|
-
<input ref={ref} type="checkbox" name={name} onChange={(e) => handleChange(e.target.checked)} checked={isChecked} required={required} style={styleCheckbox} disabled={disabled} />
|
|
44
|
-
{label && <label style={styleLabel}>{label}</label>}
|
|
45
|
-
{children && <div>{children}</div>}
|
|
46
|
-
</div>
|
|
47
|
-
);
|
|
48
|
-
};
|
package/form/Dialog.tsx
DELETED
|
@@ -1,109 +0,0 @@
|
|
|
1
|
-
import React, { ReactNode } from 'react';
|
|
2
|
-
import { Box, BoxFooter } from '../box';
|
|
3
|
-
|
|
4
|
-
import { createRoot } from 'react-dom/client';
|
|
5
|
-
import { Modal } from '../modal';
|
|
6
|
-
import { Button } from './Button';
|
|
7
|
-
|
|
8
|
-
export type propsDialog = {
|
|
9
|
-
message: any;
|
|
10
|
-
acceptButtonShow?: boolean;
|
|
11
|
-
cancelButtonShow?: boolean;
|
|
12
|
-
acceptButtonText?: string | ReactNode;
|
|
13
|
-
cancelButtonText?: string | ReactNode;
|
|
14
|
-
acceptButtonClass?: 'default' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' | 'link';
|
|
15
|
-
cancelButtonClass?: 'default' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' | 'link';
|
|
16
|
-
vertialAlign?: 'flex-start' | 'center' | 'flex-end';
|
|
17
|
-
horizontalAlign?: 'flex-start' | 'center' | 'flex-end';
|
|
18
|
-
hideBackdrop?: boolean;
|
|
19
|
-
hideEsc?: boolean;
|
|
20
|
-
styleMessage?: React.CSSProperties;
|
|
21
|
-
styleBox?: React.CSSProperties;
|
|
22
|
-
styleBoxFooter?: React.CSSProperties;
|
|
23
|
-
autoFocus?: 'accept' | 'cancel';
|
|
24
|
-
backdropStyle?: React.CSSProperties;
|
|
25
|
-
};
|
|
26
|
-
|
|
27
|
-
export const Dialog = (config: propsDialog) =>
|
|
28
|
-
new Promise((resolve) => {
|
|
29
|
-
if (typeof window === 'undefined') return false;
|
|
30
|
-
let mainDiv: any = document.getElementById('sdialog');
|
|
31
|
-
if (!mainDiv) {
|
|
32
|
-
const createDiv = document.createElement('div');
|
|
33
|
-
createDiv.setAttribute('id', 'sdialog');
|
|
34
|
-
document.body.appendChild(createDiv);
|
|
35
|
-
mainDiv = createDiv;
|
|
36
|
-
}
|
|
37
|
-
const root = createRoot(mainDiv!);
|
|
38
|
-
const settings: propsDialog = {
|
|
39
|
-
acceptButtonShow: true,
|
|
40
|
-
cancelButtonShow: true,
|
|
41
|
-
acceptButtonText: 'EVET',
|
|
42
|
-
cancelButtonText: 'HAYIR',
|
|
43
|
-
acceptButtonClass: 'danger',
|
|
44
|
-
cancelButtonClass: 'secondary',
|
|
45
|
-
vertialAlign: 'center',
|
|
46
|
-
horizontalAlign: 'center',
|
|
47
|
-
hideBackdrop: true,
|
|
48
|
-
hideEsc: true,
|
|
49
|
-
styleMessage: {
|
|
50
|
-
fontSize: '1.1rem',
|
|
51
|
-
padding: '10px 20px'
|
|
52
|
-
},
|
|
53
|
-
styleBox: { padding: 0, margin: 0, minWidth: 250 },
|
|
54
|
-
styleBoxFooter: { padding: '8px 5px' },
|
|
55
|
-
autoFocus: 'accept',
|
|
56
|
-
...config
|
|
57
|
-
};
|
|
58
|
-
|
|
59
|
-
const close = () => {
|
|
60
|
-
if (mainDiv) {
|
|
61
|
-
root.unmount();
|
|
62
|
-
mainDiv.remove();
|
|
63
|
-
}
|
|
64
|
-
};
|
|
65
|
-
|
|
66
|
-
const onCancel = () => {
|
|
67
|
-
resolve(false);
|
|
68
|
-
close();
|
|
69
|
-
};
|
|
70
|
-
|
|
71
|
-
const onAccept = () => {
|
|
72
|
-
resolve(true);
|
|
73
|
-
close();
|
|
74
|
-
};
|
|
75
|
-
|
|
76
|
-
const Component = (
|
|
77
|
-
<Modal
|
|
78
|
-
open={true}
|
|
79
|
-
keepMounted={false}
|
|
80
|
-
close={onCancel}
|
|
81
|
-
hideBackdrop={settings.hideBackdrop}
|
|
82
|
-
hideEsc={settings.hideEsc}
|
|
83
|
-
hideCloseButton={true}
|
|
84
|
-
vertialAlign={settings.vertialAlign}
|
|
85
|
-
horizontalAlign={settings.horizontalAlign}
|
|
86
|
-
backdropStyle={settings.backdropStyle}
|
|
87
|
-
>
|
|
88
|
-
<Box style={settings.styleBox}>
|
|
89
|
-
<div className="sbox_content" style={settings.styleMessage} dangerouslySetInnerHTML={{ __html: settings.message }} />
|
|
90
|
-
|
|
91
|
-
{(settings.acceptButtonShow || settings.cancelButtonShow) && (
|
|
92
|
-
<BoxFooter style={settings.styleBoxFooter}>
|
|
93
|
-
{settings.cancelButtonShow && (
|
|
94
|
-
<Button autoFocus={settings.autoFocus === 'cancel'} buttonClass={settings.cancelButtonClass} onClick={onCancel}>
|
|
95
|
-
{settings.cancelButtonText}
|
|
96
|
-
</Button>
|
|
97
|
-
)}
|
|
98
|
-
{settings.acceptButtonShow && (
|
|
99
|
-
<Button autoFocus={settings.autoFocus === 'accept'} buttonClass={settings.acceptButtonClass} onClick={onAccept}>
|
|
100
|
-
{settings.acceptButtonText}
|
|
101
|
-
</Button>
|
|
102
|
-
)}
|
|
103
|
-
</BoxFooter>
|
|
104
|
-
)}
|
|
105
|
-
</Box>
|
|
106
|
-
</Modal>
|
|
107
|
-
);
|
|
108
|
-
root.render(Component);
|
|
109
|
-
});
|
package/form/Form.tsx
DELETED
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import React, { FormEventHandler, memo } from "react";
|
|
2
|
-
|
|
3
|
-
interface Props {
|
|
4
|
-
children?: React.ReactNode;
|
|
5
|
-
encType?: React.FormHTMLAttributes<HTMLFormElement>["encType"];
|
|
6
|
-
onSubmit?: FormEventHandler<HTMLFormElement>;
|
|
7
|
-
style?: React.CSSProperties;
|
|
8
|
-
disableOnEnterSubmit?: boolean;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
export const Form = memo(function FunctionMemo({ encType = "multipart/form-data", onSubmit, style, disableOnEnterSubmit = false, ...other }: Props) {
|
|
12
|
-
const onKeyDown = (e: React.KeyboardEvent<HTMLFormElement>) => {
|
|
13
|
-
if (e.key === "Enter" && disableOnEnterSubmit) {
|
|
14
|
-
e.preventDefault();
|
|
15
|
-
}
|
|
16
|
-
};
|
|
17
|
-
|
|
18
|
-
return <form style={style} encType={encType} onSubmit={onSubmit} onKeyDown={onKeyDown} {...other} />;
|
|
19
|
-
});
|
package/form/FormOlustur.tsx
DELETED
|
@@ -1,105 +0,0 @@
|
|
|
1
|
-
import React, { memo, useEffect, useMemo } from 'react';
|
|
2
|
-
import { Col, Row, typeJustifyContent, typeSpacingValues } from '../grid';
|
|
3
|
-
|
|
4
|
-
import { isDev } from '../_lib/baseFunctions';
|
|
5
|
-
import { Label } from './Label';
|
|
6
|
-
|
|
7
|
-
type gridValues = 'auto' | 'full' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
|
8
|
-
type grid = {
|
|
9
|
-
xs?: gridValues;
|
|
10
|
-
sm?: gridValues;
|
|
11
|
-
md?: gridValues;
|
|
12
|
-
lg?: gridValues;
|
|
13
|
-
xl?: gridValues;
|
|
14
|
-
xxl?: gridValues;
|
|
15
|
-
};
|
|
16
|
-
|
|
17
|
-
export type PropsFormOgeler = {
|
|
18
|
-
label?: string | null;
|
|
19
|
-
noRender?: boolean;
|
|
20
|
-
fullComponent?: any;
|
|
21
|
-
component?: any;
|
|
22
|
-
propsComponent?: object;
|
|
23
|
-
propsRow?: object;
|
|
24
|
-
propsLabel?: object;
|
|
25
|
-
gridLabel?: grid;
|
|
26
|
-
gridInput?: grid;
|
|
27
|
-
};
|
|
28
|
-
|
|
29
|
-
interface Props {
|
|
30
|
-
// form: { [key: string | number]: any; }[],
|
|
31
|
-
// form: any[],
|
|
32
|
-
form: { [key: string | number]: any };
|
|
33
|
-
formOgeler: PropsFormOgeler[];
|
|
34
|
-
onChange: Function;
|
|
35
|
-
sabitGrid: {
|
|
36
|
-
label: grid;
|
|
37
|
-
input: grid;
|
|
38
|
-
};
|
|
39
|
-
formType: 'label' | 'noLabel';
|
|
40
|
-
justifyContent: typeJustifyContent;
|
|
41
|
-
rowSpacing?: typeSpacingValues;
|
|
42
|
-
colSpacing?: typeSpacingValues;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
export const FormOlustur = memo(function FunctionMemo(props: Props) {
|
|
46
|
-
const { form, formOgeler, onChange, formType, sabitGrid, justifyContent, rowSpacing, colSpacing } = props;
|
|
47
|
-
useEffect(() => {
|
|
48
|
-
if (formOgeler && onChange && form) {
|
|
49
|
-
formOgeler.forEach((formOgeler: any) => {
|
|
50
|
-
const fieldName = formOgeler?.component?.props?.name;
|
|
51
|
-
if (formOgeler.noRender && fieldName && form[fieldName] && form[fieldName] != '') {
|
|
52
|
-
isDev && console.log('noRenderGuncelle');
|
|
53
|
-
if (formOgeler?.component && formOgeler?.component?.props?.name) {
|
|
54
|
-
onChange({
|
|
55
|
-
target: {
|
|
56
|
-
name: fieldName,
|
|
57
|
-
value: ''
|
|
58
|
-
}
|
|
59
|
-
});
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
});
|
|
63
|
-
}
|
|
64
|
-
}, [JSON.stringify(form), formOgeler]);
|
|
65
|
-
|
|
66
|
-
const result = useMemo(() => {
|
|
67
|
-
return formOgeler.map(({ noRender, fullComponent, component, propsComponent, propsRow, label, propsLabel, gridLabel, gridInput }: PropsFormOgeler, i: React.Key) => {
|
|
68
|
-
if (noRender) {
|
|
69
|
-
return null;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
if (fullComponent) return React.cloneElement(fullComponent, { key: i });
|
|
73
|
-
|
|
74
|
-
let newProps = { ...propsComponent };
|
|
75
|
-
|
|
76
|
-
if (onChange && component && !component.props.onChange) {
|
|
77
|
-
newProps = { ...newProps, onChange };
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
if (onChange && form && component.props.name && !component.props.value) {
|
|
81
|
-
newProps = { ...newProps, value: form[component.props.name] && form[component.props.name].length > 0 ? String(form[component.props.name]) : '' };
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
if (formType === 'label') newProps = { ...newProps, label: '' };
|
|
85
|
-
|
|
86
|
-
const detectLabel = label || component.props.label;
|
|
87
|
-
gridLabel = { ...sabitGrid.label, ...gridLabel };
|
|
88
|
-
gridInput = { ...sabitGrid.input, ...gridInput };
|
|
89
|
-
|
|
90
|
-
return (
|
|
91
|
-
<Row key={i} justifyContent={justifyContent} rowSpacing={rowSpacing} colSpacing={colSpacing} {...propsRow}>
|
|
92
|
-
{formType === 'label' && detectLabel && (
|
|
93
|
-
<Col {...gridLabel}>
|
|
94
|
-
<Label required={component.props.required} {...propsLabel}>
|
|
95
|
-
{detectLabel}
|
|
96
|
-
</Label>
|
|
97
|
-
</Col>
|
|
98
|
-
)}
|
|
99
|
-
<Col {...gridInput}>{React.cloneElement(component, newProps)}</Col>
|
|
100
|
-
</Row>
|
|
101
|
-
);
|
|
102
|
-
});
|
|
103
|
-
}, [form, formOgeler, onChange, formType, sabitGrid, justifyContent, rowSpacing, colSpacing]);
|
|
104
|
-
return <React.Fragment>{result}</React.Fragment>;
|
|
105
|
-
});
|