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

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

import { jsx as _jsx } from "react/jsx-runtime";
import { Input as AntInput } from 'antd';
import { FormFieldBuilder } from '../base/FormFieldBuilder';
/**
 * Input Field Builder
 * Wrapper for Ant Design Input component with builder pattern
 */
export class Input extends FormFieldBuilder {
    /**
     * Set input type
     */
    type(value) {
        this._config.type = value;
        return this;
    }
    /**
     * Set maximum length
     */
    maxLength(value) {
        this._config.maxLength = value;
        return this;
    }
    /**
     * Set minimum length
     */
    minLength(value) {
        this._config.minLength = value;
        return this;
    }
    /**
     * Set prefix icon or element
     */
    prefix(element) {
        this._config.prefix = element;
        return this;
    }
    /**
     * Set suffix icon or element
     */
    suffix(element) {
        this._config.suffix = element;
        return this;
    }
    /**
     * Enable clear button
     */
    allowClear(value = true) {
        this._config.allowClear = value;
        return this;
    }
    /**
     * Set addon before input
     */
    addonBefore(element) {
        this._config.addonBefore = element;
        return this;
    }
    /**
     * Set addon after input
     */
    addonAfter(element) {
        this._config.addonAfter = element;
        return this;
    }
    /**
     * Render the input component
     */
    render() {
        if (this._config.hidden) {
            return null;
        }
        const props = {
            placeholder: this._config.placeholder,
            disabled: this._config.disabled,
            maxLength: this._config.maxLength,
            prefix: this._config.prefix,
            suffix: this._config.suffix,
            allowClear: this._config.allowClear,
            addonBefore: this._config.addonBefore,
            addonAfter: this._config.addonAfter,
            onChange: (e) => this.handleChange(e.target.value),
        };
        // Handle password type
        const input = this._config.type === 'password'
            ? _jsx(AntInput.Password, { ...props })
            : _jsx(AntInput, { type: this._config.type || 'text', ...props });
        return this.wrapWithLabel(input);
    }
}
//# sourceMappingURL=Input.js.map