aboutsummaryrefslogtreecommitdiffstats
path: root/old-ui/app/components/dropdown.js
diff options
context:
space:
mode:
authorDan Finlay <dan@danfinlay.com>2018-03-07 06:59:09 +0800
committerDan Finlay <dan@danfinlay.com>2018-03-07 06:59:09 +0800
commit423f084cb47d84e2e9063a6567454f83592f424b (patch)
treebc2f3040cd76765fa27bbfc0e3913cf5e466c063 /old-ui/app/components/dropdown.js
parent8ba64c657ff801425c06db166e2c9a06289047de (diff)
parent303801d2768a264a27a51916e5debf778739ee0c (diff)
downloadtangerine-wallet-browser-423f084cb47d84e2e9063a6567454f83592f424b.tar
tangerine-wallet-browser-423f084cb47d84e2e9063a6567454f83592f424b.tar.gz
tangerine-wallet-browser-423f084cb47d84e2e9063a6567454f83592f424b.tar.bz2
tangerine-wallet-browser-423f084cb47d84e2e9063a6567454f83592f424b.tar.lz
tangerine-wallet-browser-423f084cb47d84e2e9063a6567454f83592f424b.tar.xz
tangerine-wallet-browser-423f084cb47d84e2e9063a6567454f83592f424b.tar.zst
tangerine-wallet-browser-423f084cb47d84e2e9063a6567454f83592f424b.zip
Merge branch 'master' into i3076-UseStorageLocalInstead
Diffstat (limited to 'old-ui/app/components/dropdown.js')
-rw-r--r--old-ui/app/components/dropdown.js98
1 files changed, 98 insertions, 0 deletions
diff --git a/old-ui/app/components/dropdown.js b/old-ui/app/components/dropdown.js
new file mode 100644
index 000000000..fb606d2c5
--- /dev/null
+++ b/old-ui/app/components/dropdown.js
@@ -0,0 +1,98 @@
+const Component = require('react').Component
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const MenuDroppo = require('./menu-droppo')
+const extend = require('xtend')
+
+const noop = () => {}
+
+class Dropdown extends Component {
+ render () {
+ const { isOpen, onClickOutside, style, innerStyle, children, useCssTransition } = this.props
+
+ const innerStyleDefaults = extend({
+ borderRadius: '4px',
+ padding: '8px 16px',
+ background: 'rgba(0, 0, 0, 0.8)',
+ boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
+ }, innerStyle)
+
+ return h(
+ MenuDroppo,
+ {
+ useCssTransition,
+ isOpen,
+ zIndex: 11,
+ onClickOutside,
+ style,
+ innerStyle: innerStyleDefaults,
+ },
+ [
+ h(
+ 'style',
+ `
+ li.dropdown-menu-item:hover { color:rgb(225, 225, 225); }
+ li.dropdown-menu-item { color: rgb(185, 185, 185); position: relative }
+ `
+ ),
+ ...children,
+ ]
+ )
+ }
+}
+
+Dropdown.defaultProps = {
+ isOpen: false,
+ onClick: noop,
+ useCssTransition: false,
+}
+
+Dropdown.propTypes = {
+ isOpen: PropTypes.bool.isRequired,
+ onClick: PropTypes.func.isRequired,
+ children: PropTypes.node,
+ style: PropTypes.object.isRequired,
+ onClickOutside: PropTypes.func,
+ innerStyle: PropTypes.object,
+ useCssTransition: PropTypes.bool,
+}
+
+class DropdownMenuItem extends Component {
+ render () {
+ const { onClick, closeMenu, children, style } = this.props
+
+ return h(
+ 'li.dropdown-menu-item',
+ {
+ onClick: () => {
+ onClick()
+ closeMenu()
+ },
+ style: Object.assign({
+ listStyle: 'none',
+ padding: '8px 0px 8px 0px',
+ fontSize: '18px',
+ fontStyle: 'normal',
+ fontFamily: 'Montserrat Regular',
+ cursor: 'pointer',
+ display: 'flex',
+ justifyContent: 'flex-start',
+ alignItems: 'center',
+ }, style),
+ },
+ children
+ )
+ }
+}
+
+DropdownMenuItem.propTypes = {
+ closeMenu: PropTypes.func.isRequired,
+ onClick: PropTypes.func.isRequired,
+ children: PropTypes.node,
+ style: PropTypes.object,
+}
+
+module.exports = {
+ Dropdown,
+ DropdownMenuItem,
+}