form-builder-mui
Version:
Form builder and viewer for users to be able to build forms, save them as JSON, and serve them to users all through the UI. Built with React and MaterialUI components.
475 lines (474 loc) • 12 kB
TypeScript
export type { TextFieldProps } from "./TextField";
export type { RadioInputProps } from "./RadioInput";
export type { SelectInputProps } from "./SelectInput";
export type { HeaderProps } from "./Header";
export type { CheckboxesProps } from "./Checkboxes";
export type { DateInputProps } from "./DateInput";
export type { MultipleTextFieldProps } from "./MultipleTextField";
export type { NumberInputProps } from "./NumberInput";
export type DependentProps = {
enabled: boolean;
parentId: number;
parentValue: any;
};
export interface Element {
id: number;
type: keyof typeof Components;
[key: string]: any;
dependentProperties?: DependentProps;
}
export declare const ComponentDefaults: {
TextField: {
prompt: string;
additional: string;
required: boolean;
variant: string;
value: string;
multiline: boolean;
};
RadioInput: {
prompt: string;
additional: string;
required: boolean;
variant: string;
value: string;
options: {
label: string;
value: string;
}[];
};
SelectInput: {
prompt: string;
additional: string;
required: boolean;
value: string;
options: {
label: string;
value: string;
}[];
};
Header: {
text: string;
variant: string;
bold: boolean;
italic: boolean;
};
Divider: {
variant: string;
text: string;
textAlign: string;
};
Checkboxes: {
prompt: string;
additional: string;
required: boolean;
options: {
label: string;
value: string;
}[];
};
DateInput: {
prompt: string;
additional: string;
required: boolean;
format: string;
value: string;
};
MultipleTextField: {
prompt: string;
additional: string;
variant: string;
required: boolean;
};
MultipleSelectField: {
prompt: string;
additional: string;
required: boolean;
variant: string;
value: string[];
options: {
label: string;
value: string;
}[];
};
NumberInput: {
prompt: string;
additional: string;
required: boolean;
variant: string;
};
Markdown: {
text: string;
};
};
export declare const Components: {
TextField: import("react").FC<import("./TextField").TextFieldProps>;
RadioInput: import("react").FC<import("./RadioInput").RadioInputProps>;
SelectInput: import("react").FC<import("./SelectInput").SelectInputProps>;
Header: import("react").FC<import("./Header").HeaderProps>;
Divider: import("react").FC<import("./Divider").DividerProps>;
Checkboxes: import("react").FC<import("./Checkboxes").CheckboxesProps>;
DateInput: import("react").FC<import("./DateInput").DateInputProps>;
MultipleTextField: import("react").FC<import("./MultipleTextField").MultipleTextFieldProps>;
NumberInput: import("react").FC<import("./NumberInput").NumberInputProps>;
MultipleSelectField: import("react").FC<import("./MultipleSelectField").MultipleSelectFieldProps>;
Markdown: import("react").FC<import("./Markdown").MarkdownProps>;
};
export declare const DependableComponents: {
TextField: import("react").FC<import("./TextField").TextFieldProps>;
RadioInput: import("react").FC<import("./RadioInput").RadioInputProps>;
SelectInput: import("react").FC<import("./SelectInput").SelectInputProps>;
Checkboxes: import("react").FC<import("./Checkboxes").CheckboxesProps>;
DateInput: import("react").FC<import("./DateInput").DateInputProps>;
NumberInput: import("react").FC<import("./NumberInput").NumberInputProps>;
};
export declare const getComponentType: (type: string) => import("react").FC<import("./TextField").TextFieldProps> | import("react").FC<import("./RadioInput").RadioInputProps> | import("react").FC<import("./SelectInput").SelectInputProps> | import("react").FC<import("./Header").HeaderProps> | import("react").FC<import("./Divider").DividerProps> | import("react").FC<import("./Checkboxes").CheckboxesProps> | import("react").FC<import("./DateInput").DateInputProps> | import("react").FC<import("./MultipleTextField").MultipleTextFieldProps> | import("react").FC<import("./NumberInput").NumberInputProps> | import("react").FC<import("./MultipleSelectField").MultipleSelectFieldProps> | import("react").FC<import("./Markdown").MarkdownProps>;
export type ComponentKeys = keyof typeof Components;
export declare const ComponentProperties: {
TextField: {
prompt: {
type: string;
label: string;
};
additional: {
type: string;
label: string;
};
label: {
type: string;
label: string;
};
required: {
type: string;
label: string;
};
variant: {
type: string;
label: string;
options: string[];
};
multiline: {
type: string;
label: string;
};
value: {
type: string;
label: string;
};
dependentProperties: {
type: string;
label: string;
};
};
RadioInput: {
prompt: {
type: string;
label: string;
};
additional: {
type: string;
label: string;
};
label: {
type: string;
label: string;
};
required: {
type: string;
label: string;
};
options: {
type: string;
label: string;
};
value: {
type: string;
label: string;
};
dependentProperties: {
type: string;
label: string;
};
};
SelectInput: {
prompt: {
type: string;
label: string;
};
additional: {
type: string;
label: string;
};
label: {
type: string;
label: string;
};
required: {
type: string;
label: string;
};
options: {
type: string;
label: string;
};
value: {
type: string;
label: string;
};
dependentProperties: {
type: string;
label: string;
};
};
Header: {
text: {
type: string;
label: string;
};
variant: {
type: string;
label: string;
options: string[];
};
bold: {
type: string;
label: string;
};
italic: {
type: string;
label: string;
};
divider: {
type: string;
label: string;
};
border: {
type: string;
label: string;
};
dependentProperties: {
type: string;
label: string;
};
};
Divider: {
variant: {
type: string;
label: string;
options: string[];
};
text: {
type: string;
label: string;
};
textAlign: {
type: string;
label: string;
options: string[];
};
dependentProperties: {
type: string;
label: string;
};
};
Checkboxes: {
prompt: {
type: string;
label: string;
};
additional: {
type: string;
label: string;
};
label: {
type: string;
label: string;
};
required: {
type: string;
label: string;
};
options: {
type: string;
label: string;
itemSchema: {
type: string;
properties: {
label: {
type: string;
label: string;
};
value: {
type: string;
label: string;
};
};
};
};
value: {
type: string;
label: string;
};
dependentProperties: {
type: string;
label: string;
};
};
DateInput: {
prompt: {
type: string;
label: string;
};
additional: {
type: string;
label: string;
};
label: {
type: string;
label: string;
};
required: {
type: string;
label: string;
};
format: {
type: string;
label: string;
options: {
value: string;
label: string;
}[];
};
value: {
type: string;
label: string;
};
dependentProperties: {
type: string;
label: string;
};
};
MultipleTextField: {
prompt: {
type: string;
label: string;
};
additional: {
type: string;
label: string;
};
label: {
type: string;
label: string;
};
required: {
type: string;
label: string;
};
variant: {
type: string;
label: string;
options: string[];
};
min: {
type: string;
label: string;
};
max: {
type: string;
label: string;
};
value: {
type: string;
label: string;
};
dependentProperties: {
type: string;
label: string;
};
};
MultipleSelectField: {
prompt: {
type: string;
label: string;
};
additional: {
type: string;
label: string;
};
label: {
type: string;
label: string;
};
options: {
type: string;
label: string;
};
required: {
type: string;
label: string;
};
variant: {
type: string;
label: string;
options: string[];
};
min: {
type: string;
label: string;
};
max: {
type: string;
label: string;
};
value: {
type: string;
label: string;
};
dependentProperties: {
type: string;
label: string;
};
};
NumberInput: {
prompt: {
type: string;
label: string;
};
additional: {
type: string;
label: string;
};
label: {
type: string;
label: string;
};
required: {
type: string;
label: string;
};
variant: {
type: string;
label: string;
options: string[];
};
value: {
type: string;
label: string;
};
dependentProperties: {
type: string;
label: string;
};
};
Markdown: {
text: {
type: string;
label: string;
};
dependentProperties: {
type: string;
label: string;
};
};
};