react-antd-admin-panel
Version:
Modern TypeScript-first React admin panel builder with Ant Design 6
140 lines • 4.19 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { BaseBuilder } from './BaseBuilder';
// Counter for generating unique IDs
let fieldIdCounter = 0;
/**
* Base class for all form field builders
* Extends BaseBuilder with form-specific functionality
*/
export class FormFieldBuilder extends BaseBuilder {
_value;
_onChange;
_fieldId;
constructor() {
super();
// Generate unique ID for accessibility (label-input association)
this._fieldId = `raap-field-${++fieldIdCounter}`;
}
/**
* Set the field label
*/
label(text) {
this._config.label = text;
return this;
}
/**
* Set the field placeholder
*/
placeholder(text) {
this._config.placeholder = text;
return this;
}
/**
* Mark field as required
*/
required(value = true) {
this._config.required = value;
return this;
}
/**
* Set the field tooltip
*/
tooltip(text) {
this._config.tooltip = text;
return this;
}
/**
* Set validation rules
*/
rules(rules) {
this._config.rules = rules;
return this;
}
/**
* Add a single validation rule
*/
rule(rule) {
if (!this._config.rules) {
this._config.rules = [];
}
this._config.rules.push(rule);
return this;
}
/**
* Set default value
*/
defaultValue(value) {
this._config.defaultValue = value;
this._value = value;
return this;
}
/**
* Set the field value
*/
value(val) {
this._value = val;
return this;
}
/**
* Get the current field value
*/
getValue() {
return this._value;
}
/**
* Set onChange handler
*/
onChange(handler) {
this._onChange = handler;
return this;
}
/**
* Handle value change
*/
handleChange(value) {
this._value = value;
if (this._onChange) {
this._onChange(value);
}
}
/**
* Get the field ID for accessibility
*/
getFieldId() {
return this._fieldId;
}
/**
* Wrap field with label (with proper accessibility association)
*/
wrapWithLabel(field) {
if (!this._config.label) {
return _jsx("div", { style: { marginBottom: '16px' }, children: field }, this._key);
}
const required = this._config.required;
const descriptionId = this._config.tooltip ? `${this._fieldId}-description` : undefined;
return (_jsxs("div", { style: { marginBottom: '16px' }, children: [_jsxs("label", { htmlFor: this._fieldId, style: {
display: 'block',
marginBottom: '4px',
fontSize: '14px',
cursor: 'pointer'
}, children: [required && (_jsx("span", { style: { color: '#ff4d4f', marginRight: '4px' }, "aria-hidden": "true", children: "*" })), this._config.label, required && (_jsx("span", { style: {
position: 'absolute',
width: '1px',
height: '1px',
padding: '0',
margin: '-1px',
overflow: 'hidden',
clip: 'rect(0, 0, 0, 0)',
whiteSpace: 'nowrap',
border: '0'
}, children: " (required)" }))] }), this._config.tooltip && (_jsx("div", { id: descriptionId, style: { fontSize: '12px', color: '#666', marginBottom: '4px' }, children: this._config.tooltip })), React.isValidElement(field)
? React.cloneElement(field, {
id: this._fieldId,
'aria-required': required || undefined,
'aria-describedby': descriptionId,
})
: field] }, this._key));
}
}
//# sourceMappingURL=FormFieldBuilder.js.map