react-antd-admin-panel/dist/form/Checkbox.js

Modern TypeScript-first React admin panel builder with Ant Design 6

import { jsx as _jsx } from "react/jsx-runtime";
import React from 'react';
import { Checkbox as AntCheckbox } from 'antd';
import { FormFieldBuilder } from '../base/FormFieldBuilder';
/**
 * Checkbox Field Builder
 * Wrapper for Ant Design Checkbox component
 */
export class Checkbox extends FormFieldBuilder {
    /**
     * Set checkbox text/label
     */
    text(value) {
        this._config.text = value;
        return this;
    }
    /**
     * Set indeterminate state
     */
    indeterminate(value = true) {
        this._config.indeterminate = value;
        return this;
    }
    /**
     * Render the checkbox component
     */
    render() {
        if (this._config.hidden) {
            return null;
        }
        console.log('Rendering Checkbox with value:', this._value);
        // Create a wrapper component with state
        const CheckboxWrapper = () => {
            const [checked, setChecked] = React.useState(this._value || false);
            console.log('CheckboxWrapper rendering, checked:', checked);
            const handleChange = (e) => {
                console.log('Checkbox clicked:', e.target.checked);
                setChecked(e.target.checked);
                this.handleChange(e.target.checked);
            };
            return (_jsx(AntCheckbox, { disabled: this._config.disabled, indeterminate: this._config.indeterminate, checked: checked, onChange: handleChange, children: this._config.text }));
        };
        return this.wrapWithLabel(_jsx(CheckboxWrapper, {}));
    }
}
/**
 * CheckboxGroup Field Builder
 * Wrapper for Ant Design Checkbox.Group component
 */
export class CheckboxGroup extends FormFieldBuilder {
    /**
     * Set checkbox options
     */
    options(opts) {
        this._config.options = opts;
        return this;
    }
    /**
     * Add a single checkbox option
     */
    option(label, value, disabled) {
        if (!this._config.options) {
            this._config.options = [];
        }
        this._config.options.push({ label, value, disabled });
        return this;
    }
    /**
     * Set layout direction
     */
    direction(dir) {
        this._config.direction = dir;
        return this;
    }
    /**
     * Render the checkbox group component
     */
    render() {
        if (this._config.hidden) {
            return null;
        }
        const options = this._config.options?.map(opt => ({
            label: opt.label,
            value: opt.value,
            disabled: opt.disabled,
        }));
        return (_jsx(AntCheckbox.Group, { disabled: this._config.disabled, options: options, value: this._value, onChange: (values) => this.handleChange(values), style: this._config.direction === 'vertical' ? { display: 'flex', flexDirection: 'column' } : undefined }, this._key));
    }
}
//# sourceMappingURL=Checkbox.js.map