1.0.6 • Published 6 years ago
Classes
DialogConfig
Definitions
function validate<T>(value: T) => boolean | string
Return true if ok, otherwise error message.
Method
| Name | Arguments | Return Type | Description |
|---|
| setWidth | (width: string) | DialogConfig | Set modal width. |
| addNumber | (label: string, key: string, validator: validate\<number>, defaultValue: number, readOnly: boolean, editable: boolean) | DialogConfig | Add Number input to Dialog. |
| addBoolen | (label: string, key: string, defaultValue: boolean, editable: boolean) | DialogConfig | Add Boolean input to Dialog. |
| addDate | (label: string, key: string, defaultValue: Date, validator: validate\<Date>, readOnly: boolean, editable: boolean) | DialogConfig | Add Date input to Dialog. |
| addTime | (label: string, key: string, defaultValue: Date, validator: validate\<Date>, readonly: boolean, editable: boolean) | DialogConfig | Add Time input to Dialog. |
| addSelect | (label: string, key: string, options: {id: number, name: string}, defaultValue: number, validator: validate\<number>, multiple: boolean, readOnly: boolean, editable: boolean) | DialogConfig | Add Select input to Dialog. |
| addAuto | (label: string, key: string, options: string[], defaultValue: string, validator: validate\<string>, readOnly: boolean, editable: boolean) | DialogConfig | Add String with autocomplete input to Dialog. |
| addText | (label: string, key: string, defaultValue: string, validator: validate\<string>, readOnly: boolean, editable: boolean) | DialogConfig | Add long String input to Dialog. |
| addString | (label: string, key: string, defaultValue: string, validator: validate\<string>, readOnly: boolean, editable: boolean) | DialogConfig | Add String input to Dialog. |
Components
Dialog
Properties
| Name | Type | Default | Description |
|---|
Method
| Name | Arguments | Return Type | Description |
|---|
| show | consifg: DialogConfig, onResult: (result: object) => void | void | Dialog will popup with given settings, then on user input onResult is called with result object. |
| hide | | void | Close dialog and clear it. |
Usage
import { DialogConfig, Dialog } from 'webstack-dialog'
...
class CustomComponent extend Component {
handleClick = () => {
const conf = new DialogConfig('Write your details')
.addString('FirstName', 'firstName')
.addString('LastName', 'lastName')
.addNumber('Age', 'age', value => value < 18? 'Age must be 18 or above!' : false, 18)
.addSelect('Gender', 'gender', [{id: 0, label: 'male'}, {id: 2, label: 'female'}], value => value? true : 'required')
.addAuto('Birthplace', 'birthplace', ['Czeckia','Japan', '...'], '')
this._dialog.show(conf, result => {
//result === { firstName: ?, lastName: ?, age: ?, gender: ?, birthplace: ?}
this._dialog.hide();
})
}
render() {
return (
<div>
<FlatButton onClick={this.handleClick}>
<Dialog ref={i = this._dialog = i}/>
</div>
)
}
}
...