lucid-ui
Version:
A UI component library from AppNexus.
27 lines (26 loc) • 1.39 kB
JavaScript
import _ from 'lodash';
import React from 'react';
import createClass from 'create-react-class';
import { Button, Dialog } from '../../../index';
export default createClass({
getInitialState() {
return {
isShown: false,
};
},
handleShow(isShown) {
this.setState({ isShown });
},
render() {
return (React.createElement("div", null,
React.createElement(Button, { onClick: _.partial(this.handleShow, !this.state.isShown) }, "Toggle"),
React.createElement(Dialog, { isShown: this.state.isShown, handleClose: _.partial(this.handleShow, !this.state.isShown), Header: 'Header', size: 'medium' },
React.createElement("div", { key: 'info' }, "For better UX, we recommend NOT handling onEscape and onBackgroundClick when isModal is true. The term \"modal\" implies that the user needs to interact with one of the buttons in the footer to exit the dialog."),
_.times(50).map(i => {
return React.createElement("div", { key: i }, "Body");
}),
React.createElement(Dialog.Footer, null,
React.createElement(Button, { kind: 'invisible', onClick: _.partial(this.handleShow, false), style: { marginRight: '9px' } }, "Cancel"),
React.createElement(Button, { kind: 'primary' }, "Save")))));
},
});