From f1184e450ececa2949975a8be543d6e8f71e85e2 Mon Sep 17 00:00:00 2001 From: Stuart Colville Date: Thu, 16 Jul 2015 11:00:51 +0100 Subject: [PATCH] Add modal component (fixes #188) --- public/js/apps/management/app.jsx | 3 ++ public/js/components/modal.jsx | 46 ++++++++++++++++++ public/management.html | 1 + public/scss/_modal.scss | 57 +++++++++++++++++++++++ public/scss/main.scss | 1 + styleguide/jsx/modal.jsx | 8 ++++ styleguide/pages/modal.md | 12 +++++ styleguide/templates/base-styleguide.html | 2 + tasks/webpack.js | 1 + 9 files changed, 131 insertions(+) create mode 100644 public/js/components/modal.jsx create mode 100644 public/scss/_modal.scss create mode 100644 styleguide/jsx/modal.jsx create mode 100644 styleguide/pages/modal.md diff --git a/public/js/apps/management/app.jsx b/public/js/apps/management/app.jsx index 4621d0a..7c21a75 100644 --- a/public/js/apps/management/app.jsx +++ b/public/js/apps/management/app.jsx @@ -6,6 +6,8 @@ var { AccordionContent, AccordionSection} = require('components/accordion'); +var Modal = require('components/modal'); + var gettext = require('utils').gettext; @@ -81,6 +83,7 @@ var Management = React.createClass({ module.exports = { component: Management, init: function() { + React.render(, document.getElementById('modal')); React.render(, document.getElementById('view')); }, }; diff --git a/public/js/components/modal.jsx b/public/js/components/modal.jsx new file mode 100644 index 0000000..ec0f836 --- /dev/null +++ b/public/js/components/modal.jsx @@ -0,0 +1,46 @@ +'use strict'; + +var React = require('react'); +var gettext = require('utils').gettext; +var cx = require('classnames'); + + +module.exports = React.createClass({ + + displayName: 'Modal', + + propTypes: { + children: React.PropTypes.array.required, + close: React.PropTypes.func, + showModal: React.PropTypes.bool, + title: React.PropTypes.string, + }, + + getDefaultProps: function() { + return { + showModal: true, + }; + }, + + render: function() { + + var classes = cx(['modal', {'active': this.props.showModal}]); + + return ( +
+
+
+ {this.props.title ?

{this.props.title}

: null} + + {gettext('Close')} + +
+
+ {this.props.children} +
+
+
+ ); + }, +}); + diff --git a/public/management.html b/public/management.html index 639f01a..6aa6bd0 100644 --- a/public/management.html +++ b/public/management.html @@ -9,6 +9,7 @@
+