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;