@adler-it/reactant-modularis

Modular form and dialog for react and atnd.

Usage no npm install needed!

<script type="module">
  import adlerItReactantModularis from 'https://cdn.skypack.dev/@adler-it/reactant-modularis';
</script>

README

REACTANT-MODULARIS

Input

Plain

| Prop | Description | Type | Default | |-|-|-|-| |*label||string|| |value||string|""| |hint||string|""| |formLayout||FormLayout||

String

| Prop | Description | Type | Default | |-|-|-|-| |*id||string|| |*label||string|| |placeholder||string|""| |value||string|null| |validators||Validator[]|[]| |onError||(id: string, errors: string[]) => void|null| |onChange||() => { id: string, value: string }|null| |disabled||boolean|false| |readOnly||boolean|false| |hint||string|""| |formLayout||FormLayout|| |displayError||boolean|true|

RadioButton

| Prop | Description | Type | Default | |-|-|-|-| |*id||string|| |*label||string|| |value||string|null| |validators||Validator[]|[]| |onError||(id: string, errors: string[]) => void|null| |onChange||() => { id: string, value: string }|null| |disabled||boolean|false| |readOnly||boolean|false| |hint||string|""| |formLayout||FormLayout|| |displayError||boolean|true| |data||{ value: string, text: string }[]|[]|

Strings

| Prop | Description | Type | Default | |-|-|-|-| |*id||string|| |*label||string|| |placeholder||string|""| |value||string|[]| |validators||Validator[]|[]| |onError||(id: string, errors: string[]) => void|null| |onChange||() => { id: string, value: string[] }|null| |disabled||boolean|false| |readOnly||boolean|false| |hint||string|""| |formLayout||FormLayout|| |displayError||boolean|true| |separators||string[]|['\n']|

Text

| Prop | Description | Type | Default | |-|-|-|-| |*id||string|| |*label||string|| |placeholder||string|""| |value||string|null| |validators||Validator[]|[]| |onError||(id: string, errors: string[]) => void|null| |onChange||() => { id: string, value: string }|null| |disabled||boolean|false| |readOnly||boolean|false| |hint||string|""| |formLayout||FormLayout|| |rows||number|3| |displayError||boolean|true|

Number

| Prop | Description | Type | Default | |-|-|-|-| |*id||string|| |*label||string|| |placeholder||string|""| |value||number|null| |validators||Validator[]|[]| |onError||(id: string, errors: string[]) => void|null| |onChange||() => { id: string, value: number }|null| |disabled||boolean|false| |readOnly||boolean|false| |hint||string|""| |formLayout||FormLayout|| |displayError||boolean|true| |min||number|| |max||number||

Checkbox or Switch

| Prop | Description | Type | Default | |-|-|-|-| |*id||string|| |label||string|| |rightLabel||string|| |value||boolean|false| |validators||Validator[]|[]| |onError||(id: string, errors: string[]) => void|null| |onChange||() => { id: string, value: boolean }|null| |disabled||boolean|false| |hint||string|""| |formLayout||FormLayout|| |displayError||boolean|true|

Select

| Prop | Description | Type | Default | |-|-|-|-| |*id||string|| |*label||string|| |placeholder||string|""| |value||string|null| |validators||Validator[]|[]| |onError||(id: string, errors: string[]) => void|null| |onChange||() => { id: string, value: string }|null| |disabled||boolean|false| |readOnly||boolean|false| |hint||string|""| |formLayout||FormLayout|| |displayError||boolean|true| |*data||{ text: string, value: string, disabled?: boolean, props?: any }[]|[] |multi||boolean|false| |search||boolean|false| |allowClear||boolean|false|

Cascader

| Prop | Description | Type | Default | |-|-|-|-| |*id||string|| |*label||string|| |placeholder||string|""| |value||string|null| |validators||Validator[]|[]| |onError||(id: string, errors: string[]) => void|null| |onChange||() => { id: string, value: string }|null| |disabled||boolean|false| |hint||string|""| |formLayout||FormLayout|| |displayError||boolean|true| |*data||{ label: string, value: string, disabled?: boolean, children?: data[] }[]|[] |search||boolean|false| |allowClear||boolean|false|

Date

| Prop | Description | Type | Default | |-|-|-|-| |*id||string|| |*label||string|| |value||moment|null| |validators||Validator[]|[]| |onError||(id: string, errors: string[]) => void|null| |onChange||() => { id: string, value: moment }|null| |disabled||boolean|false| |hint||string|""| |formLayout||FormLayout|| |displayError||boolean|true| |showTime||boolean|false| |format||string|YYYY-MM-DD|

DateRange

| Prop | Description | Type | Default | |-|-|-|-| |*id||string|| |*label||string|| |value||moment[2]|null| |validators||Validator[]|[]| |onError||(id: string, errors: string[]) => void|null| |onChange||() => { id: string, value: moment[2] }|null| |disabled||boolean|false| |hint||string|""| |formLayout||FormLayout|| |displayError||boolean|true| |showTime||boolean|false| |format||string|YYYY-MM-DD|

Time

| Prop | Description | Type | Default | |-|-|-|-| |*id||string|| |*label||string|| |value||moment|null| |validators||Validator[]|[]| |onError||(id: string, errors: string[]) => void|null| |onChange||() => { id: string, value: moment }|null| |disabled||boolean|false| |hint||string|""| |formLayout||FormLayout|| |displayError||boolean|true| |format||string|HH:mm:ss|

Translation

| Prop | Description | Type | Default | |-|-|-|-| |*id||string|| |*label||string|| |placeholder||string|""| |value||{ [lang]: string }|null| |validators||Validator[]|[]| |onError||(id: string, errors: string[]) => void|null| |onChange||() => { id: string, value: { [lang]: string }}|null| |disabled||boolean|false| |readOnly||boolean|false| |hint||string|""| |formLayout||FormLayout|| |displayError||boolean|true| |*langs||string[]|3|

Objects

| Prop | Description | Type | Default | |-|-|-|-| |*id||string|| |*label||string|| |value||object[]|[]| |validators||Validator[]|[]| |onChange||() => { id: string, value: object[] }|null| |disabled||boolean|false| |*config||ModularConfig|| |*columns||ColumnProps[]|| |width||string|""| |*rowKey||(row) => string|| |size||"default" | "middle" | "small"|"middle"| |tableProps||object||

File

| Prop | Description | Type | Default | |-|-|-|-| |*id||string|| |*label||string|| |value||File || File[]|null| |onChange||() => { id: string, value: File || File[] }|null| |disabled||boolean|false| |multi||boolean|false| |accept||string|null| |allowClear||boolen|true| |buttonProps||any|null|

Validator

(value) => string

If valid return "", otherwise return error message.

BreakPoints

|point|size| |-|-| |xs|<576px| |sm|>=576px| |md|>=768px| |lg|>=992px| |xl|>=1200px| |xxl|>=1600px|

FormLayout

{
    labelCol: {
        [BreakPoint]: {
            span: number
        }
    },
    wrapperCol: {
        [BreakPoint]: {
            span: number
        }
    }
}

Default:

labelCol= xs: 24, sm: 4 wrapperCol= xs: 24, sm: 19