@appinsource/material

1.1.5 • Public • Published

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;

Package Sidebar

Install

npm i @appinsource/material

Weekly Downloads

0

Version

1.1.5

License

ISC

Unpacked Size

30.8 kB

Total Files

7

Last publish

Collaborators

  • appinsource