essence-templates
Version:
React Essence Templates - based on Essence Material Design Framework
181 lines (167 loc) • 6.47 kB
JavaScript
import React from 'react';
import ReactDOM from 'react-dom';
import ClassNames from 'classnames';
import Btn from 'essence-button';
import {Block, Text, Divider} from 'essence-core';
import {Card, CardHeader, CardContent, CardFooter} from 'essence-card';
import {Dialog, DialogHeader, DialogContent, DialogFooter} from 'essence-dialog';
class AppDialog extends React.Component {
constructor(props) {
super(props);
this.state = {
open: false,
classes: ClassNames(
this.props.classes,
this.props.className
)
};
}
showDialog() {
this.setState({
open: true
});
}
hideDialog() {
this.setState({
open: false
});
}
dialogClosed() {
console.log('dialogClosed');
}
dialogOpened() {
console.log('dialogOpened');
}
render() {
return (
<Block classes={ClassNames('e-container e-padding-top-25', this.state.classes)}>
<Block classes={'e-row'}>
<Block classes={'brick brick-12'}>
<Text type={'h3'} classes={'e-text-indigo-400'}>DIALOGS</Text>
<Divider classes={'thick short e-background-indigo-400'} />
<Text type={'p'} classes={'e-body1 e-text-blue-grey-700 e-padding-top-25 e-padding-bottom-25'} style={{fontSize:'14px'}}>
As you might expect, dialog boxes pop. And they have actions - set the dialog content and its actions with .e-dialogs-content and .e-dialogs-actions, as well as the button type & text. That’s it.
</Text>
<Card>
<CardContent>
<Block classes={'e-text-center'}>
<Block className={ClassNames('e-row e-padding-top-15 e-padding-bottom-25')}>
<Btn
type={'primary'}
label={'Show Dialog'}
onClick={this.showDialog.bind(this)}
className={'flat e-background-indigo-600'} />
<Dialog dismissible={false} visible={this.state.open} onOpen={this.dialogOpened.bind(this)} onClose={this.dialogClosed.bind(this)}>
<DialogHeader className={'e-text-right'} style={{paddingBottom:'0', position:'relative'}}>
<Btn icon={'navigation-close'} onClick={this.hideDialog.bind(this)} className={'flat e-background-white'} style={{position:'absolute', right:'-24px', top:'-24px', zIndex:'1'}}/>
</DialogHeader>
<DialogContent>
This is the Dialog content
</DialogContent>
<DialogFooter>
<Btn type={'succes'} label={'OK'} className={'flat e-background-indigo-600'} />
<Btn type={'info'} label={'Cancel'} onClick={this.hideDialog.bind(this)} className={'flat e-background-indigo-600'} />
</DialogFooter>
</Dialog>
</Block>
</Block>
<Block>
<Text type={'h4'} classes={'e-text-indigo-400'}>HOW TO USE:</Text>
<Divider classes={'thin short e-background-indigo-400'} />
<pre className={'e-background-grey-100 e-text-black'}>
<code>
npm install <strong>essence-dialog</strong>
</code>
</pre>
<Text type={'p'} classes={'e-body1 e-text-blue-grey-700 padding-top-bottom-10'}>
Dialog component has the following options:
<br />
<br />
1. <strong>dismissible</strong>: <u>true</u> or <u>false</u> to toggle on/off the dialog clicked overlay background
<br />
2. <strong>visible</strong>: <u>true</u> or <u>false</u> to hide or show the dialog modal
<br />
3. <strong>onOpen</strong>: <u>callback</u> function on the Dialog is shown
<br />
4. <strong>onClose</strong>: <u>callback</u> function on the Dialog is hidden
<br />
<br />
</Text>
<pre className={'e-background-grey-100 e-text-black'}>
<code>
import {Dialog, DialogHeader, DialogContent, DialogFooter} from 'essence-dialog';
<br />
<br />
showDialog() {
<br />
this.setState({
<br />
open: true
<br />
});
<br />
}
<br />
<br />
hideDialog() {
<br />
this.setState({
<br />
open: false
<br />
});
<br />
}
<br />
<br />
dialogClosed() {
<br />
console.log('dialogClosed');
<br />
}
<br />
<br />
dialogOpened() {
<br />
console.log('dialogOpened');
<br />
}
<br />
<br />
<Dialog dismissible={false} visible={this.state.open} onOpen={this.dialogOpened.bind(this)} onClose={this.dialogClosed.bind(this)}>
<br />
<DialogHeader className={'e-text-right'}>
<br />
<Btn icon={'navigation-close'} onClick={this.hideDialog.bind(this)} className={'flat e-background-white'} />
<br />
</DialogHeader>
<br />
<br />
<DialogContent>
<br />
This is the Dialog content
<br />
</DialogContent>
<br />
<br />
<DialogFooter>
<br />
<Btn type={'succes'} label={'OK'} className={'flat'} />
<br />
<Btn type={'info'} label={'Cancel'} onClick={this.hideDialog.bind(this)} className={'flat'} />
<br />
</DialogFooter>
<br />
</Dialog>
</code>
</pre>
</Block>
</CardContent>
</Card>
</Block>
</Block>
</Block>
);
}
}
exports.AppDialog = AppDialog;