bnk-components/dist/components/AutoForm/ComponentFactory.js

Reusable React components for Issaglam UI - Modern, responsive UI components with TypeScript support

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { CrudGridFormField, CrudGridFormTextArea } from '../CrudGrid/components/CrudGridForm';
import CheckBox from '../CheckBox';
// Component mapping - field type'a göre component seçimi
const componentMap = {
    string: StringField,
    number: NumberField,
    boolean: BooleanField,
    date: DateField,
    datetime: DateTimeField,
    email: EmailField,
    tel: TelField,
    url: UrlField,
    textarea: TextAreaField,
    relation: RelationField,
    enum: EnumField
};
// Factory function
export function createFormField(field) {
    // Özel component override varsa onu kullan
    if (field.componentOverride && componentMap[field.componentOverride]) {
        return componentMap[field.componentOverride];
    }
    // Field type'a göre component seç
    const Component = componentMap[field.type] || StringField;
    return Component;
}
// Field Components
function StringField({ field, value, onChange, error, disabled, readOnly }) {
    return (_jsx(CrudGridFormField, { label: field.label || field.name, name: field.name, value: value || '', onChange: onChange, placeholder: field.placeholder, required: field.required, disabled: disabled || field.disabled, readOnly: readOnly, error: error, helpText: field.helpText, className: field.width ? `w-${field.width}` : '' }));
}
function NumberField({ field, value, onChange, error, disabled, readOnly }) {
    var _a, _b;
    return (_jsx(CrudGridFormField, { label: field.label || field.name, name: field.name, value: value || '', onChange: onChange, type: "number", placeholder: field.placeholder, required: field.required, disabled: disabled || field.disabled, readOnly: readOnly, error: error, helpText: field.helpText, min: (_a = field.validation) === null || _a === void 0 ? void 0 : _a.min, max: (_b = field.validation) === null || _b === void 0 ? void 0 : _b.max, step: undefined, className: field.width ? `w-${field.width}` : '' }));
}
function BooleanField({ field, value, onChange, error, disabled, readOnly }) {
    return (_jsxs("div", { style: { display: 'flex', alignItems: 'center', minHeight: '40px' }, children: [_jsx(CheckBox, { label: field.label || field.name, name: field.name, checked: !!value, onChange: (checked) => onChange(checked), disabled: disabled || field.disabled, variant: "success" }), error && _jsx("div", { className: "crud-grid-form-error", children: error }), field.helpText && _jsx("div", { className: "crud-grid-form-help", children: field.helpText })] }));
}
function DateField({ field, value, onChange, error, disabled, readOnly }) {
    return (_jsx(CrudGridFormField, { label: field.label || field.name, name: field.name, value: value || '', onChange: onChange, type: "date", placeholder: field.placeholder, required: field.required, disabled: disabled || field.disabled, readOnly: readOnly, error: error, helpText: field.helpText, className: field.width ? `w-${field.width}` : '' }));
}
function DateTimeField({ field, value, onChange, error, disabled, readOnly }) {
    return (_jsx(CrudGridFormField, { label: field.label || field.name, name: field.name, value: value || '', onChange: onChange, type: "datetime-local", placeholder: field.placeholder, required: field.required, disabled: disabled || field.disabled, readOnly: readOnly, error: error, helpText: field.helpText, className: field.width ? `w-${field.width}` : '' }));
}
function EmailField({ field, value, onChange, error, disabled, readOnly }) {
    var _a, _b;
    return (_jsx(CrudGridFormField, { label: field.label || field.name, name: field.name, value: value || '', onChange: onChange, type: "email", placeholder: field.placeholder, required: field.required, disabled: disabled || field.disabled, readOnly: readOnly, error: error, helpText: field.helpText, pattern: (_a = field.validation) === null || _a === void 0 ? void 0 : _a.pattern, maxLength: (_b = field.validation) === null || _b === void 0 ? void 0 : _b.maxLength, className: field.width ? `w-${field.width}` : '' }));
}
function TelField({ field, value, onChange, error, disabled, readOnly }) {
    var _a, _b;
    return (_jsx(CrudGridFormField, { label: field.label || field.name, name: field.name, value: value || '', onChange: onChange, type: "tel", placeholder: field.placeholder, required: field.required, disabled: disabled || field.disabled, readOnly: readOnly, error: error, helpText: field.helpText, pattern: (_a = field.validation) === null || _a === void 0 ? void 0 : _a.pattern, maxLength: (_b = field.validation) === null || _b === void 0 ? void 0 : _b.maxLength, className: field.width ? `w-${field.width}` : '' }));
}
function UrlField({ field, value, onChange, error, disabled, readOnly }) {
    var _a, _b;
    return (_jsx(CrudGridFormField, { label: field.label || field.name, name: field.name, value: value || '', onChange: onChange, type: "url", placeholder: field.placeholder, required: field.required, disabled: disabled || field.disabled, readOnly: readOnly, error: error, helpText: field.helpText, pattern: (_a = field.validation) === null || _a === void 0 ? void 0 : _a.pattern, maxLength: (_b = field.validation) === null || _b === void 0 ? void 0 : _b.maxLength, className: field.width ? `w-${field.width}` : '' }));
}
function TextAreaField({ field, value, onChange, error, disabled, readOnly }) {
    var _a;
    return (_jsx(CrudGridFormTextArea, { label: field.label || field.name, name: field.name, value: value || '', onChange: onChange, placeholder: field.placeholder, required: field.required, disabled: disabled || field.disabled, readOnly: readOnly, error: error, helpText: field.helpText, maxLength: (_a = field.validation) === null || _a === void 0 ? void 0 : _a.maxLength, rows: 4, className: field.width ? `w-${field.width}` : '' }));
}
function RelationField({ field, value, onChange, error, disabled, readOnly }) {
    if (!field.relation) {
        console.error('Relation field requires relation metadata:', field.name);
        return _jsx(StringField, { field: field, value: value, onChange: onChange, error: error, disabled: disabled, readOnly: readOnly });
    }
    // TODO: Bu kısım için özel bir component oluşturulmalı
    // Şimdilik basit bir input döndürüyoruz
    return (_jsx(CrudGridFormField, { label: field.label || field.name, name: field.name, value: value || '', onChange: onChange, placeholder: field.placeholder, required: field.required, disabled: disabled || field.disabled, readOnly: readOnly, error: error, helpText: field.helpText, className: field.width ? `w-${field.width}` : '' }));
}
function EnumField({ field, value, onChange, error, disabled, readOnly }) {
    if (!field.enumValues) {
        console.error('Enum field requires enumValues:', field.name);
        return _jsx(StringField, { field: field, value: value, onChange: onChange, error: error, disabled: disabled, readOnly: readOnly });
    }
    // TODO: Bu kısım için özel bir component oluşturulmalı
    // Şimdilik basit bir input döndürüyoruz
    return (_jsx(CrudGridFormField, { label: field.label || field.name, name: field.name, value: value || '', onChange: onChange, placeholder: field.placeholder, required: field.required, disabled: disabled || field.disabled, readOnly: readOnly, error: error, helpText: field.helpText, className: field.width ? `w-${field.width}` : '' }));
}