React Dynamic Dialog View
Component extended @mui/dialog, dynamic dialog view controller.
Installation
npm install @appinsource/material/dynamic-dialogNew 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-dialogLicense
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;