mistui-kit
Version:
**π [Try MistUi Live](https://gilded-tanuki-0eb52b.netlify.app/) β interactive playground & docs**
47 lines (46 loc) β’ 1.94 kB
TypeScript
import type { BaseProps, NumberInputProps, SelectInputProps, SliderInputProps, SwitchBoxInputProps, FileInputProps, AutoInputProps, CheckBoxInputProps } from '../inputs';
import type { ToggleButtonGroupProps, FilterToggleButtonGroupProps } from '../buttons';
import type { DividerProps } from '../utils/types';
export type TypeSchema = 'text' | 'textArea' | 'number' | 'date' | 'color' | 'time' | 'slider' | 'file' | 'radio' | 'switch' | 'toggle' | 'select' | 'checkbox' | 'autocomplete' | 'divider' | 'groupButton' | 'groupButtonFiltre' | 'custom';
interface BaseSchema<T = any> {
/** ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠΉ ΠΊΠ»ΡΡ */
id: string;
type: TypeSchema;
position?: 'left' | 'top' | 'right';
label?: string | React.ReactElement;
value?: any;
onChange?: (value: T) => void;
}
interface TypeToSchemaMap {
text: BaseProps;
textArea: BaseProps;
number: NumberInputProps;
date: BaseProps;
time: BaseProps;
color: SelectInputProps;
slider: SliderInputProps;
file: FileInputProps;
switch: SwitchBoxInputProps;
radio: CheckBoxInputProps;
toggle: ToggleButtonGroupProps;
checkbox: CheckBoxInputProps;
select: SelectInputProps;
autocomplete: AutoInputProps;
groupButton: ToggleButtonGroupProps;
groupButtonFiltre: FilterToggleButtonGroupProps;
divider: DividerProps;
custom: {
render: (props: any) => React.ReactElement;
};
}
export type Schema<T extends TypeSchema = TypeSchema> = BaseSchema & {
type: T;
} & TypeToSchemaMap[T];
export type FormProps = {
scheme: Schema[];
/** Π²ΡΠ΅ Π΄Π°Π½Π½ΡΠ΅ ΡΠΎΡΠΌ ΠΏΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ Π΄Π°Π½Π½ΡΡ
*/
onChange?: (id: string | number, value: any) => void;
/** Π΅Π΄ΠΈΠ½ΡΠΉ Π°Π»ΠΈΠ°Ρ Π½Π° ΠΏΠΎΠ·ΠΈΡΠΈΡ Π»Π΅ΠΉΠ±Π»ΠΎΠ² ΠΈΠ½ΠΏΡΡΠΎΠ² (ΡΡΠΎ Π±Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡ Π² ΡΡΡΠ½ΡΡ Π½Π΅ ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°ΡΡ) */
labelPosition?: "left" | "right" | "top";
};
export {};