Wondering what’s next for npm?Check out our public roadmap! »

    @adler-it/webstack-dialog
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.6 • Public • Published

    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={= this._dialog = i}/>
                </div>
            )
        }
    } 
    ...

    Install

    npm i @adler-it/webstack-dialog

    DownloadsWeekly Downloads

    1

    Version

    1.0.6

    License

    ISC

    Last publish

    Collaborators

    • avatar