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

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

import { jsx as _jsx } from "react/jsx-runtime";
import { Select as AntSelect } from 'antd';
import { FormFieldBuilder } from '../base/FormFieldBuilder';
/**
 * Select Field Builder
 * Wrapper for Ant Design Select component with builder pattern and generics
 * @template T - The type of option values
 */
export class Select extends FormFieldBuilder {
    /**
     * Set select options
     */
    options(opts) {
        this._config.options = opts;
        return this;
    }
    /**
     * Add a single option
     */
    option(label, value, disabled) {
        if (!this._config.options) {
            this._config.options = [];
        }
        this._config.options.push({ label, value, disabled });
        return this;
    }
    /**
     * Enable multiple selection
     */
    multiple(value = true) {
        this._config.mode = value ? 'multiple' : undefined;
        return this;
    }
    /**
     * Enable tags mode (user can create new options)
     */
    tags(value = true) {
        this._config.mode = value ? 'tags' : undefined;
        return this;
    }
    /**
     * Enable search functionality
     */
    showSearch(value = true) {
        this._config.showSearch = value;
        return this;
    }
    /**
     * Enable clear button
     */
    allowClear(value = true) {
        this._config.allowClear = value;
        return this;
    }
    /**
     * Set loading state
     */
    loading(value = true) {
        this._config.loading = value;
        return this;
    }
    /**
     * Set maximum number of tags to display
     */
    maxTagCount(count) {
        this._config.maxTagCount = count;
        return this;
    }
    /**
     * Set custom filter function
     */
    filterOption(fn) {
        this._config.filterOption = fn;
        return this;
    }
    /**
     * Render the select component
     */
    render() {
        if (this._config.hidden) {
            return null;
        }
        const props = {
            placeholder: this._config.placeholder,
            disabled: this._config.disabled,
            mode: this._config.mode,
            showSearch: this._config.showSearch,
            allowClear: this._config.allowClear,
            loading: this._config.loading,
            maxTagCount: this._config.maxTagCount,
            filterOption: this._config.filterOption,
            onChange: (value) => this.handleChange(value),
            options: this._config.options?.map(opt => ({
                label: opt.label,
                value: opt.value,
                disabled: opt.disabled,
            })),
        };
        return this.wrapWithLabel(_jsx(AntSelect, { ...props }));
    }
}
//# sourceMappingURL=Select.js.map