@appinsource/material

React Dynamic Dialog View

Component extended @mui/dialog, dynamic dialog view controller.

Installation

  npm install @appinsource/material/dynamic-dialog

New Features

  Until version 1.0.14 content prop was setContent(<component>Content</component>), from version 1.1.1 content setContent( dialog => <component>Content</component>)

Features

• High-performance
• Lazy-load with a custom function
• Ready to use

API Reference

  AISDialogActionViewController

Property	Type	Description
setLabel	compoent or string	Required. Button label
setVariant	ButtonVariantType	"contained","outlined","text"
setColor	ActionColorTypes	"inherit", "action", "disabled", "primary", "secondary", "error", "info", "success", "warning"
setAction	Function	"Callback Function returned ( button, dialog ):void "
setDisabled	boolean	"Disable/enable button"
setInProcess	boolean	"Show/hide button spinner"
remove	void	"Remove button"

Get item

  AISDialogViewController

Parameter	Type	Description
setTitle	compoent or string	dialog title
setSubTitle	compoent or string	"dialog subtitle"
setContent	Callback Function	"Return component or string setContent( dialog => { return Content })"
setAction	dialogActionView	"Instance of AISDialogActionViewController"
setActions	Array<dialogActionView>	"Collection items instance of AISDialogActionViewController"
setDraggable	boolean	"Drag enable/disable"
setMaxWidth	DialogMaxSizeType	"xs", "sm", "md", "lg", "xl"
setState	compoent state	"dialog.setState({...dialog.state, newKey: newValue})"
show	void	"Show dialog"

Acknowledgements

Development

Create react app

  npm install @appinsource/material/dynamic-dialog

License

MIT

Authors

Süleyman Topaloglu Frontend/Backend developer since 2013

Usage/Examples

• You have a complete working Demo

    import React from 'react';
    import logo from './logo.svg';
    import './App.css';
    import Button from "@mui/material/Button";
    import AISDialogViewController, { dialogActionView } from "@appinsource/material/dynamic-dialog";

    function App() {

        const handleClick = () => {

            const closeAction = new dialogActionView()
                    .setLabel('Close')
                    .setAction((button, dialog1) => {
                        // Example useState
                        // console.log('Added key in state', dialog1.state.newKey );
                        dialog1.close();
                    });

                const updateAction = new dialogActionView()
                    .setLabel('Update me')
                    .setVariant('contained')
                    .setColor('warning')
                    .setAction( (button, dialog) => {
                        dialog.setContent('Content updated and closing in 3 sec');
                        button.setInProcess(true).setDisabled( true ).setColor('success');
                        setTimeout(()=>{
                            dialog.setContent('Success');

                            button
                                .setLabel('Ok!')
                                .setDisabled(false)
                                .setInProcess(false)
                                .setVariant('text');

                            closeAction.remove();

                            button.setAction( ((button1, dialog1) => {
                                dialog1
                                    .setContent('Button Action changed another trigged will closing in 5 sec.');
                                button1.setLabel('Inline Clicked').setDisabled(true);
                                setTimeout(()=>{
                                    dialog1.setContent('Dialog closing in 3 sec');
                                    button1.setColor('warning').setDisabled(false);
                                    setTimeout(()=>{
                                        dialog1.close();
                                    }, 3000)
                                }, 5000)
                            }))
                        }, 3000 );
                    });

                const dialog = new AISDialogViewController();
                dialog
                    .setTitle('I\'m a dynamic dialog view')
                    .setDraggable(true)
                    .setContent( dialog1 => <div>Content</div> )
                    .setAction( closeAction )
                    .setAction( updateAction )
                    // Or 
                    // .setActions([ closeAction, updateAction ])
                    .setMaxWidth('md')
                    .show( dialog1 => {
                    // Example useState
                    // dialog1.setState({...dialog1.state, newKey: 'newValue'})
                    });


        }

        return (
            <div className="App">
                <Button variant={'contained'} onClick={handleClick}>
                    Open dynamic dialog
                </Button>
            </div>
        );
    }
    
    export default App;