aboutsummaryrefslogtreecommitdiffstats
path: root/ui
diff options
context:
space:
mode:
authorkumavis <kumavis@users.noreply.github.com>2017-08-05 04:22:25 +0800
committerGitHub <noreply@github.com>2017-08-05 04:22:25 +0800
commit5f8a2ea1e69ccb26c412afe34d21ae37b26eef43 (patch)
tree7fa48bca557b104e729e5c6bbdb7546d8f38437f /ui
parentd7168d7c507bd4cef30e714a15a1b4a6f13a8f81 (diff)
parent4d967ebea99b8c1a899a91e379a1fa12015b7e53 (diff)
downloadtangerine-wallet-browser-5f8a2ea1e69ccb26c412afe34d21ae37b26eef43.tar.gz
tangerine-wallet-browser-5f8a2ea1e69ccb26c412afe34d21ae37b26eef43.tar.zst
tangerine-wallet-browser-5f8a2ea1e69ccb26c412afe34d21ae37b26eef43.zip
Merge pull request #1862 from sdtsui/add-rct
Re-enable css transitions, only for dropdowns in app header
Diffstat (limited to 'ui')
-rw-r--r--ui/app/app.js2
-rw-r--r--ui/app/components/account-dropdowns.js1
-rw-r--r--ui/app/components/dropdown.js6
-rw-r--r--ui/app/components/menu-droppo.js137
4 files changed, 144 insertions, 2 deletions
diff --git a/ui/app/app.js b/ui/app/app.js
index 0592496fc..620b4617a 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -218,6 +218,7 @@ App.prototype.renderNetworkDropdown = function () {
const isOpen = state.isNetworkMenuOpen
return h(Dropdown, {
+ useCssTransition: true,
isOpen,
onClickOutside: (event) => {
const { classList } = event.target
@@ -355,6 +356,7 @@ App.prototype.renderDropdown = function () {
const isOpen = state.isMainMenuOpen
return h(Dropdown, {
+ useCssTransition: true,
isOpen: isOpen,
zIndex: 11,
onClickOutside: (event) => {
diff --git a/ui/app/components/account-dropdowns.js b/ui/app/components/account-dropdowns.js
index da92619e1..b23600e9b 100644
--- a/ui/app/components/account-dropdowns.js
+++ b/ui/app/components/account-dropdowns.js
@@ -65,6 +65,7 @@ class AccountDropdowns extends Component {
return h(
Dropdown,
{
+ useCssTransition: true, // Hardcoded because account selector is temporarily in app-header
style: {
marginLeft: '-238px',
marginTop: '38px',
diff --git a/ui/app/components/dropdown.js b/ui/app/components/dropdown.js
index 8cdfc13e8..34c7149ee 100644
--- a/ui/app/components/dropdown.js
+++ b/ui/app/components/dropdown.js
@@ -1,14 +1,14 @@
const Component = require('react').Component
const PropTypes = require('react').PropTypes
const h = require('react-hyperscript')
-const MenuDroppo = require('menu-droppo')
+const MenuDroppo = require('./menu-droppo')
const extend = require('xtend')
const noop = () => {}
class Dropdown extends Component {
render () {
- const { isOpen, onClickOutside, style, innerStyle, children } = this.props
+ const { isOpen, onClickOutside, style, innerStyle, children, useCssTransition } = this.props
const innerStyleDefaults = extend({
borderRadius: '4px',
@@ -20,6 +20,7 @@ class Dropdown extends Component {
return h(
MenuDroppo,
{
+ useCssTransition,
isOpen,
zIndex: 11,
onClickOutside,
@@ -43,6 +44,7 @@ class Dropdown extends Component {
Dropdown.defaultProps = {
isOpen: false,
onClick: noop,
+ useCssTransition: false,
}
Dropdown.propTypes = {
diff --git a/ui/app/components/menu-droppo.js b/ui/app/components/menu-droppo.js
new file mode 100644
index 000000000..a9370a7c8
--- /dev/null
+++ b/ui/app/components/menu-droppo.js
@@ -0,0 +1,137 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const findDOMNode = require('react-dom').findDOMNode
+const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
+
+module.exports = MenuDroppoComponent
+
+
+inherits(MenuDroppoComponent, Component)
+function MenuDroppoComponent() {
+ Component.call(this)
+}
+
+MenuDroppoComponent.prototype.render = function() {
+
+ const speed = this.props.speed || '300ms'
+ const useCssTransition = this.props.useCssTransition
+ const zIndex = ('zIndex' in this.props) ? this.props.zIndex : 0
+
+ this.manageListeners()
+
+ let style = this.props.style || {}
+ if (!('position' in style)) {
+ style.position = 'fixed'
+ }
+ style.zIndex = zIndex
+
+ return (
+ h('.menu-droppo-container', {
+ style,
+ }, [
+ h('style', `
+ .menu-droppo-enter {
+ transition: transform ${speed} ease-in-out;
+ transform: translateY(-200%);
+ }
+
+ .menu-droppo-enter.menu-droppo-enter-active {
+ transition: transform ${speed} ease-in-out;
+ transform: translateY(0%);
+ }
+
+ .menu-droppo-leave {
+ transition: transform ${speed} ease-in-out;
+ transform: translateY(0%);
+ }
+
+ .menu-droppo-leave.menu-droppo-leave-active {
+ transition: transform ${speed} ease-in-out;
+ transform: translateY(-200%);
+ }
+ `),
+
+ !!useCssTransition
+ ? h(ReactCSSTransitionGroup, {
+ className: 'css-transition-group',
+ transitionName: 'menu-droppo',
+ transitionEnterTimeout: parseInt(speed),
+ transitionLeaveTimeout: parseInt(speed),
+ }, this.renderPrimary())
+ : this.renderPrimary()
+ ])
+ )
+}
+
+MenuDroppoComponent.prototype.renderPrimary = function() {
+ const isOpen = this.props.isOpen
+ if (!isOpen) {
+ return null
+ return h('span', {
+ key: 'menu-droppo-null',
+ style: {
+ height: '0px',
+ }
+ })
+ }
+
+ let innerStyle = this.props.innerStyle || {}
+
+ return (
+ h('.menu-droppo', {
+ key: 'menu-droppo-drawer',
+ style: innerStyle,
+ },
+ [ this.props.children ])
+ )
+}
+
+MenuDroppoComponent.prototype.manageListeners = function() {
+ const isOpen = this.props.isOpen
+ const onClickOutside = this.props.onClickOutside
+
+ if (isOpen) {
+ this.outsideClickHandler = onClickOutside
+ } else if (isOpen) {
+ this.outsideClickHandler = null
+ }
+}
+
+MenuDroppoComponent.prototype.componentDidMount = function() {
+ if (this && document.body) {
+ this.globalClickHandler = this.globalClickOccurred.bind(this);
+ document.body.addEventListener('click', this.globalClickHandler)
+ var container = findDOMNode(this)
+ this.container = container
+ }
+}
+
+MenuDroppoComponent.prototype.componentWillUnmount = function() {
+ if (this && document.body) {
+ document.body.removeEventListener('click', this.globalClickHandler)
+ }
+}
+
+MenuDroppoComponent.prototype.globalClickOccurred = function(event) {
+ const target = event.target
+ const container = findDOMNode(this)
+ const isOpen = this.props.isOpen
+
+ if (target !== container &&
+ !isDescendant(this.container, event.target) &&
+ this.outsideClickHandler) {
+ this.outsideClickHandler(event)
+ }
+}
+
+function isDescendant(parent, child) {
+ var node = child.parentNode;
+ while (node != null) {
+ if (node == parent) {
+ return true;
+ }
+ node = node.parentNode;
+ }
+ return false;
+}