@sydsoft/base 1.47.0 → 1.49.0

package/box/BoxHeader.tsx

@@ -0,0 +1,46 @@
+import React, { ReactNode, memo } from 'react';
+
+import styles from './Box.module.css';
+
+interface Props {
+    children?: ReactNode;
+    className?: string;
+    title?: string | ReactNode;
+    icon?: ReactNode;
+    menu?: ReactNode;
+    mainStyle?: React.CSSProperties;
+    iconStyle?: React.CSSProperties;
+    titleStyle?: React.CSSProperties;
+    menuStyle?: React.CSSProperties;
+    component?: any;
+    marginBottom?: number;
+}
+
+export const BoxHeader = memo(function FunctionMemo({ children, className, title, icon, menu, mainStyle, iconStyle, titleStyle, menuStyle, marginBottom, component = 'div' }: Props) {
+    const Comp = component;
+    return (
+        <div
+            className={`sbox_header ${styles.header} ${className || ''}`}
+            style={{
+                marginBottom,
+                ...mainStyle
+            }}
+        >
+            {icon && (
+                <div className={styles.icon} style={iconStyle}>
+                    {icon}
+                </div>
+            )}
+
+            <Comp className={`sbox_title ${styles.title}`} style={titleStyle}>
+                {children || title}
+            </Comp>
+
+            {menu && (
+                <div className={styles.menu} style={menuStyle}>
+                    {menu}
+                </div>
+            )}
+        </div>
+    );
+});

package/box/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2023
+ *  @author: izzetseydaoglu
+ *  @last-modified: 29.01.2024 02:41
+ */
+
+export * from "./Box";
+export * from './BoxContent';
+export * from './BoxFooter';
+export * from './BoxHeader';

package/countDown/index.tsx

@@ -0,0 +1,116 @@
+import { useEffect, useRef, useState } from 'react';
+
+import React from 'react';
+import { useInterval } from '../_lib/useInterval';
+
+type Props = {
+    targetTime: number | string; // 30 | "2022-01-20 22:35" | veya direkt microtime ;
+    timerType?: 'countdown' | 'datetime';
+    speed?: number;
+    countType?: 'seconds' | 'minutes:seconds' | 'hours:minutes:seconds' | 'days:hours:minutes:seconds';
+    hide?: boolean;
+    onComplete?: () => void;
+    getStatus?: ({ days, hours, minutes, seconds, timer }: any) => void;
+    autoStart?: boolean;
+};
+
+export const useCountDown = ({ autoStart = false, onComplete, getStatus, targetTime, timerType = 'countdown', countType = 'seconds', speed = 1000, hide }: Props) => {
+    const refCountDownRender = useRef<any>(null);
+    const [enabled, setEnabled] = useState(timerType === 'datetime' || autoStart);
+    const [timer, setTimer] = useState<any>(0);
+    const [timerSpeed, setTimerSpeed] = useState<number>(typeof speed === 'number' && speed > 0 ? speed : 1000);
+
+    useEffect(() => prepareTimer(targetTime), [targetTime]);
+
+    useEffect(() => {
+        if (!hide) render();
+    }, [timer]);
+
+    useInterval(
+        () => {
+            if (enabled) {
+                if (timer <= 1) {
+                    stopCountDown();
+                } else {
+                    setTimer(timer - 1);
+                }
+            }
+        },
+        enabled ? timerSpeed : null
+    );
+
+    const prepareTimer = (timeORstring: string | number) => {
+        if (timerType === 'datetime') {
+            setTimer(Math.floor((new Date(timeORstring).getTime() - new Date().getTime()) / 1000));
+            setEnabled(true);
+        } else {
+            setTimer(timeORstring);
+        }
+    };
+
+    const stopCountDown = () => {
+        setTimer(0);
+        setEnabled(false);
+        if ((enabled && onComplete) || (timerType === 'datetime' && onComplete)) {
+            onComplete();
+        }
+    };
+
+    const padNumber = (num: number, padLength = 2, padString = '0') => (typeof targetTime === 'number' && targetTime < 10 ? num : String(num).padStart(padLength, padString));
+
+    const render = () => {
+        let days = 0,
+            hours = 0,
+            minutes = 0,
+            seconds = timer;
+        if (countType === 'minutes:seconds') {
+            minutes = Math.floor(seconds / 60);
+            seconds -= minutes * 60;
+        } else if (countType === 'hours:minutes:seconds') {
+            hours = Math.floor(seconds / (60 * 60));
+            seconds -= hours * 60 * 60;
+            minutes = Math.floor(seconds / 60);
+            seconds -= minutes * 60;
+        } else if (countType === 'days:hours:minutes:seconds') {
+            days = Math.floor(seconds / (60 * 60 * 24));
+            seconds -= days * 60 * 60 * 24;
+            hours = Math.floor(seconds / (60 * 60));
+            seconds -= hours * 60 * 60;
+            minutes = Math.floor(seconds / 60);
+            seconds -= minutes * 60;
+        }
+
+        seconds = Math.floor(seconds);
+
+        if (getStatus && timer > 0) getStatus({ days, hours, minutes, seconds, timer });
+
+        if (refCountDownRender.current) {
+            const getPadValues = (div: any) => {
+                const length = div.dataset.padlength || 2;
+                const string = div.dataset.padstring || '0';
+                return { length, string };
+            };
+
+            const divGun = refCountDownRender.current.querySelector("[data-name='days']");
+            if (divGun) divGun.innerHTML = padNumber(days, getPadValues(divGun).length, getPadValues(divGun).string).toString();
+
+            const divSaat = refCountDownRender.current.querySelector("[data-name='hours']");
+            if (divSaat) divSaat.innerHTML = padNumber(hours, getPadValues(divSaat).length, getPadValues(divSaat).string).toString();
+
+            const divDakika = refCountDownRender.current.querySelector("[data-name='minutes']");
+            if (divDakika) divDakika.innerHTML = padNumber(minutes, getPadValues(divDakika).length, getPadValues(divDakika).string).toString();
+
+            const divSaniye = refCountDownRender.current.querySelector("[data-name='seconds']");
+            if (divSaniye) divSaniye.innerHTML = padNumber(seconds, getPadValues(divSaniye).length, getPadValues(divSaniye).string).toString();
+        }
+    };
+
+    return {
+        ComponentCountDown: (children: any) => (hide ? null : React.cloneElement(children, { ref: refCountDownRender })),
+        startCountDown: () => setEnabled(true),
+        stopCountDown: () => setEnabled(false),
+        setTargetTime: (targetTime: number | string) => prepareTimer(targetTime),
+        setTimerSpeed: (timerSpeed: number) => setTimerSpeed(timerSpeed),
+        getChildrenRef: () => refCountDownRender.current || null
+    };
+};

package/dateTime/index.ts

@@ -0,0 +1,79 @@
+export default class dateTime {
+    private datetime: Date | string;
+    private resut_format: string = "y-m-d h:i:s";
+
+    constructor(datetime: Date | string | null = null, format: string = "y-m-d h:i:s") {
+        this.format(format);
+        this.datetime = datetime !== "0000-00-00 00:00:00" && datetime !== "0000-00-00" && datetime ? datetime : new Date().toISOString(); // GMT ekli halde
+        return this;
+    }
+
+    public addDays(days: number) {
+        const datetime = new Date(this.datetime);
+        datetime.setDate(datetime.getDate() + days);
+        this.datetime = datetime.toISOString();
+        return this;
+    }
+
+    private parse() {
+        const datetime = new Date(this.datetime);
+        const monthNames = ["Ocak", "Şubat", "Mart", "Nisan", "Mayıs", "Haziran", "Temmuz", "Ağustos", "Eylül", "Ekim", "Kasım", "Aralık"];
+        const dayNames = ["Pazar", "Pazartesi", "Salı", "Çarşamba", "Perşembe", "Cuma", "Cumartesi"];
+        return {
+            y: datetime.getFullYear().toString(),
+            m: (datetime.getMonth() + 1).toString().padStart(2, "0"),
+            d: datetime.getDate().toString().padStart(2, "0"),
+            h: datetime.getHours().toString().padStart(2, "0"),
+            i: datetime.getMinutes().toString().padStart(2, "0"),
+            s: datetime.getSeconds().toString().padStart(2, "0"),
+            ms: (datetime.getMilliseconds() / 10).toFixed(0).toString().padStart(2, "0"),
+            z: (datetime.getTimezoneOffset() / 60).toString(),
+            // TAM STRING ICEREN IFADELER SONA EKLENMELI
+            TAMAY: monthNames[datetime.getMonth()],
+            TAMGUN: dayNames[datetime.getDay()]
+        };
+    }
+
+    public getResult() {
+        const parse: any = this.parse();
+        let result = this.resut_format;
+        result = result.replace(new RegExp("y", "g"), parse.y.toString());
+        result = result.replace(new RegExp("m", "g"), parse.m.toString());
+        result = result.replace(new RegExp("d", "g"), parse.d.toString());
+        result = result.replace(new RegExp("h", "g"), parse.h.toString());
+        result = result.replace(new RegExp("i", "g"), parse.i.toString());
+        result = result.replace(new RegExp("s", "g"), parse.s.toString());
+        result = result.replace(new RegExp("ms", "g"), parse.ms.toString());
+        result = result.replace(new RegExp("z", "g"), parse.z.toString());
+        result = result.replace(new RegExp("TAMAY", "g"), parse.TAMAY.toString());
+        result = result.replace(new RegExp("TAMGUN", "g"), parse.TAMGUN.toString());
+        return result;
+    }
+
+    public format(format: string = "y-m-d h:i:s") {
+        this.resut_format = format;
+        return this;
+    }
+
+    public today() {
+        this.datetime = new Date().toISOString();
+        this.format("y-m-d");
+        return this.getResult();
+    }
+
+    public getTime() {
+        const convertDateTime = new dateTime(this.datetime).format("y-m-d h:i:s").getResult();
+        const datetime = new Date(convertDateTime);
+        return datetime.getTime();
+    }
+
+    public nextMonthFirstDay(format = "y-m-d") {
+        // Verilen tarihin bir sonraki ayının ilk gününü bul
+        this.datetime = new Date(this.datetime);
+        this.datetime.setMonth(this.datetime.getMonth() + 1);
+        this.datetime.setDate(1);
+        this.datetime = this.datetime.toISOString();
+        this.format(format);
+        return this.getResult();
+    }
+}

package/form/Button.tsx

@@ -0,0 +1,143 @@
+import { Dialog, propsDialog } from "./Dialog";
+import React, { memo, useCallback, useEffect, useState } from "react";
+import { Tooltip, typeTooltipPosition } from "../tooltip";
+
+import Link from "next/link";
+import styles from "./styles/Button.module.css";
+
+interface Props {
+    children?: React.ReactNode;
+    onlyIcon?: React.ReactNode;
+    buttonClass?: "default" | "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark" | "link";
+    buttonSize?: "small" | "medium" | "large";
+    autoFocus?: boolean;
+    hidden?: boolean;
+    component?: "button" | "a" | "div" | any;
+    className?: string;
+    type?: "submit" | "reset" | "button";
+    disabled?: boolean;
+    fullWidth?: boolean;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    href?: string | undefined;
+    target?: string | undefined;
+    style?: React.CSSProperties;
+    tabIndex?: number;
+
+    //Tooltip
+    title?: string;
+    titlePosition?: typeTooltipPosition;
+    titleArrow?: boolean;
+
+    //Dialog
+    dialog?: propsDialog;
+}
+
+export const Button = memo(function MemoFunction({
+    children,
+    component = "button",
+    className,
+    buttonClass = "default",
+    buttonSize = "medium",
+    style,
+    type = "button",
+    fullWidth = false,
+    onlyIcon,
+    onClick,
+    href,
+    target,
+    tabIndex,
+    title,
+    titlePosition,
+    titleArrow,
+    dialog,
+    autoFocus,
+    ...other
+}: Props) {
+    const Comp = component;
+    const ripple = (e: any): void => {
+        const el = e.currentTarget;
+        const circle = document.createElement("span");
+        const diameter = Math.max(el.clientWidth, el.clientHeight);
+        circle.style.width = circle.style.height = `${diameter}px`;
+        circle.classList.add(styles.ripple);
+        const ripple = el.getElementsByClassName(styles.ripple)[0];
+        if (ripple) ripple.remove();
+        el.appendChild(circle);
+    };
+
+    const handleClick = (e: any) => {
+        ripple(e);
+        if (dialog) {
+            Dialog(dialog).then((result) => {
+                if (result && onClick) {
+                    onClick(e);
+                }
+            });
+        } else {
+            if (onClick) onClick(e);
+        }
+    };
+
+    const createClassList = useCallback(() => {
+        const list = ["sbutton", styles.button];
+        if (buttonClass) list.push(styles[buttonClass]);
+        if (className) list.push(className);
+        if (onlyIcon) list.push(styles.iconbutton);
+        if (fullWidth) list.push(styles.fullwidth);
+        return list.join(" ");
+    }, [buttonClass, className, onlyIcon, fullWidth]);
+
+    const [classList, setClassList] = useState<string>(() => createClassList());
+
+    useEffect(() => {
+        const newClassList = createClassList().split(" ").filter(Boolean);
+        if (href && typeof window !== "undefined" && window.location.pathname === href) {
+            newClassList.push("active");
+        }
+        setClassList(newClassList.join(" "));
+    }, [href, createClassList]);
+
+    let ortakProps = {
+        className: classList,
+        style,
+        onClick: handleClick,
+        tabIndex,
+        autoFocus,
+        "data-button-size": (!onlyIcon)? buttonSize :null,
+        ...other
+    };
+
+     
+
+
+
+    let renderComponent;
+    if (href !== undefined) {
+        if (other?.hidden) {
+            renderComponent = null;
+        } else {
+            let checkHref = other?.disabled ? "#" : href;
+            renderComponent = (
+                <Link href={checkHref} target={other?.disabled ? "_self" : target}>
+                    <Comp {...ortakProps}>{onlyIcon ? onlyIcon : children}</Comp>
+                </Link>
+            );
+        }
+    } else {
+        renderComponent = (
+            <Comp type={type} {...ortakProps}>
+                {onlyIcon ? onlyIcon : children}
+            </Comp>
+        );
+    }
+
+    if (title && renderComponent) {
+        return (
+            <Tooltip title={title} position={titlePosition} arrow={titleArrow}>
+                {renderComponent}
+            </Tooltip>
+        );
+    } else {
+        return renderComponent;
+    }
+});

package/form/Checkbox.tsx

@@ -0,0 +1,48 @@
+import React, { useRef } from "react";
+
+import styles from "./styles/Input.module.css";
+
+interface Props {
+    checked: "0" | "1" | boolean;
+    ref?: React.Ref<any>;
+    name?: string;
+    label?: string;
+    className?: string;
+    disabled?: boolean;
+    onToogle?: (e: { target: { name?: string; value: "0" | "1" } }) => void;
+    style?: React.CSSProperties;
+    styleCheckbox?: React.CSSProperties;
+    styleLabel?: React.CSSProperties;
+    tabIndex?: number;
+    required?: boolean;
+    children?: React.ReactNode;
+}
+
+export const Checkbox: React.FC<Props> = ({ ref, children, name, label, checked, className, style, styleCheckbox, styleLabel, onToogle, disabled, tabIndex, required = false }) => {
+    const refMain = useRef<HTMLDivElement>(null);
+
+    // checked değerini boolean hâline getiriyoruz
+    const isChecked = checked === "1" || checked === true;
+
+    const handleChange = (newChecked: boolean) => {
+        if (disabled) return;
+        onToogle?.({
+            target: {
+                name,
+                value: newChecked ? "1" : "0"
+            }
+        });
+    };
+
+    const toggleCheck = () => {
+        handleChange(!isChecked);
+    };
+
+    return (
+        <div ref={refMain} className={`${styles.checkbox} ${className || ""}`} style={style} tabIndex={tabIndex} onClick={toggleCheck}>
+            <input ref={ref} type="checkbox" name={name} onChange={(e) => handleChange(e.target.checked)} checked={isChecked} required={required} style={styleCheckbox} disabled={disabled} />
+            {label && <label style={styleLabel}>{label}</label>}
+            {children && <div>{children}</div>}
+        </div>
+    );
+};

package/form/Dialog.tsx

@@ -0,0 +1,109 @@
+import React, { ReactNode } from 'react';
+import { Box, BoxFooter } from '../box';
+
+import { createRoot } from 'react-dom/client';
+import { Modal } from '../modal';
+import { Button } from './Button';
+
+export type propsDialog = {
+    message: any;
+    acceptButtonShow?: boolean;
+    cancelButtonShow?: boolean;
+    acceptButtonText?: string | ReactNode;
+    cancelButtonText?: string | ReactNode;
+    acceptButtonClass?: 'default' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' | 'link';
+    cancelButtonClass?: 'default' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' | 'link';
+    vertialAlign?: 'flex-start' | 'center' | 'flex-end';
+    horizontalAlign?: 'flex-start' | 'center' | 'flex-end';
+    hideBackdrop?: boolean;
+    hideEsc?: boolean;
+    styleMessage?: React.CSSProperties;
+    styleBox?: React.CSSProperties;
+    styleBoxFooter?: React.CSSProperties;
+    autoFocus?: 'accept' | 'cancel';
+    backdropStyle?: React.CSSProperties;
+};
+
+export const Dialog = (config: propsDialog) =>
+    new Promise((resolve) => {
+        if (typeof window === 'undefined') return false;
+        let mainDiv: any = document.getElementById('sdialog');
+        if (!mainDiv) {
+            const createDiv = document.createElement('div');
+            createDiv.setAttribute('id', 'sdialog');
+            document.body.appendChild(createDiv);
+            mainDiv = createDiv;
+        }
+        const root = createRoot(mainDiv!);
+        const settings: propsDialog = {
+            acceptButtonShow: true,
+            cancelButtonShow: true,
+            acceptButtonText: 'EVET',
+            cancelButtonText: 'HAYIR',
+            acceptButtonClass: 'danger',
+            cancelButtonClass: 'secondary',
+            vertialAlign: 'center',
+            horizontalAlign: 'center',
+            hideBackdrop: true,
+            hideEsc: true,
+            styleMessage: {
+                fontSize: '1.1rem',
+                padding: '10px 20px'
+            },
+            styleBox: { padding: 0, margin: 0, minWidth: 250 },
+            styleBoxFooter: { padding: '8px 5px' },
+            autoFocus: 'accept',
+            ...config
+        };
+
+        const close = () => {
+            if (mainDiv) {
+                root.unmount();
+                mainDiv.remove();
+            }
+        };
+
+        const onCancel = () => {
+            resolve(false);
+            close();
+        };
+
+        const onAccept = () => {
+            resolve(true);
+            close();
+        };
+
+        const Component = (
+            <Modal
+                open={true}
+                keepMounted={false}
+                close={onCancel}
+                hideBackdrop={settings.hideBackdrop}
+                hideEsc={settings.hideEsc}
+                hideCloseButton={true}
+                vertialAlign={settings.vertialAlign}
+                horizontalAlign={settings.horizontalAlign}
+                backdropStyle={settings.backdropStyle}
+            >
+                <Box style={settings.styleBox}>
+                    <div className="sbox_content" style={settings.styleMessage} dangerouslySetInnerHTML={{ __html: settings.message }} />
+
+                    {(settings.acceptButtonShow || settings.cancelButtonShow) && (
+                        <BoxFooter style={settings.styleBoxFooter}>
+                            {settings.cancelButtonShow && (
+                                <Button autoFocus={settings.autoFocus === 'cancel'} buttonClass={settings.cancelButtonClass} onClick={onCancel}>
+                                    {settings.cancelButtonText}
+                                </Button>
+                            )}
+                            {settings.acceptButtonShow && (
+                                <Button autoFocus={settings.autoFocus === 'accept'} buttonClass={settings.acceptButtonClass} onClick={onAccept}>
+                                    {settings.acceptButtonText}
+                                </Button>
+                            )}
+                        </BoxFooter>
+                    )}
+                </Box>
+            </Modal>
+        );
+        root.render(Component);
+    });

package/form/Form.tsx

@@ -0,0 +1,19 @@
+import React, { FormEventHandler, memo } from "react";
+
+interface Props {
+    children?: React.ReactNode;
+    encType?: React.FormHTMLAttributes<HTMLFormElement>["encType"];
+    onSubmit?: FormEventHandler<HTMLFormElement>;
+    style?: React.CSSProperties;
+    disableOnEnterSubmit?: boolean;
+}
+
+export const Form = memo(function FunctionMemo({ encType = "multipart/form-data", onSubmit, style, disableOnEnterSubmit = false, ...other }: Props) {
+    const onKeyDown = (e: React.KeyboardEvent<HTMLFormElement>) => {
+        if (e.key === "Enter" && disableOnEnterSubmit) {
+            e.preventDefault();
+        }
+    };
+
+    return <form style={style} encType={encType} onSubmit={onSubmit} onKeyDown={onKeyDown} {...other} />;
+});

package/form/FormOlustur.tsx

@@ -0,0 +1,105 @@
+import React, { memo, useEffect, useMemo } from 'react';
+import { Col, Row, typeJustifyContent, typeSpacingValues } from '../grid';
+
+import { isDev } from '../_lib/baseFunctions';
+import { Label } from './Label';
+
+type gridValues = 'auto' | 'full' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+type grid = {
+    xs?: gridValues;
+    sm?: gridValues;
+    md?: gridValues;
+    lg?: gridValues;
+    xl?: gridValues;
+    xxl?: gridValues;
+};
+
+export type PropsFormOgeler = {
+    label?: string | null;
+    noRender?: boolean;
+    fullComponent?: any;
+    component?: any;
+    propsComponent?: object;
+    propsRow?: object;
+    propsLabel?: object;
+    gridLabel?: grid;
+    gridInput?: grid;
+};
+
+interface Props {
+    // form: { [key: string | number]: any; }[],
+    // form: any[],
+    form: { [key: string | number]: any };
+    formOgeler: PropsFormOgeler[];
+    onChange: Function;
+    sabitGrid: {
+        label: grid;
+        input: grid;
+    };
+    formType: 'label' | 'noLabel';
+    justifyContent: typeJustifyContent;
+    rowSpacing?: typeSpacingValues;
+    colSpacing?: typeSpacingValues;
+}
+
+export const FormOlustur = memo(function FunctionMemo(props: Props) {
+    const { form, formOgeler, onChange, formType, sabitGrid, justifyContent, rowSpacing, colSpacing } = props;
+    useEffect(() => {
+        if (formOgeler && onChange && form) {
+            formOgeler.forEach((formOgeler: any) => {
+                const fieldName = formOgeler?.component?.props?.name;
+                if (formOgeler.noRender && fieldName && form[fieldName] && form[fieldName] != '') {
+                    isDev && console.log('noRenderGuncelle');
+                    if (formOgeler?.component && formOgeler?.component?.props?.name) {
+                        onChange({
+                            target: {
+                                name: fieldName,
+                                value: ''
+                            }
+                        });
+                    }
+                }
+            });
+        }
+    }, [JSON.stringify(form), formOgeler]);
+
+    const result = useMemo(() => {
+        return formOgeler.map(({ noRender, fullComponent, component, propsComponent, propsRow, label, propsLabel, gridLabel, gridInput }: PropsFormOgeler, i: React.Key) => {
+            if (noRender) {
+                return null;
+            }
+
+            if (fullComponent) return React.cloneElement(fullComponent, { key: i });
+
+            let newProps = { ...propsComponent };
+
+            if (onChange && component && !component.props.onChange) {
+                newProps = { ...newProps, onChange };
+            }
+
+            if (onChange && form && component.props.name && !component.props.value) {
+                newProps = { ...newProps, value: form[component.props.name] && form[component.props.name].length > 0 ? String(form[component.props.name]) : '' };
+            }
+
+            if (formType === 'label') newProps = { ...newProps, label: '' };
+
+            const detectLabel = label || component.props.label;
+            gridLabel = { ...sabitGrid.label, ...gridLabel };
+            gridInput = { ...sabitGrid.input, ...gridInput };
+
+            return (
+                <Row key={i} justifyContent={justifyContent} rowSpacing={rowSpacing} colSpacing={colSpacing} {...propsRow}>
+                    {formType === 'label' && detectLabel && (
+                        <Col {...gridLabel}>
+                            <Label required={component.props.required} {...propsLabel}>
+                                {detectLabel}
+                            </Label>
+                        </Col>
+                    )}
+                    <Col {...gridInput}>{React.cloneElement(component, newProps)}</Col>
+                </Row>
+            );
+        });
+    }, [form, formOgeler, onChange, formType, sabitGrid, justifyContent, rowSpacing, colSpacing]);
+    return <React.Fragment>{result}</React.Fragment>;
+});