diff --git a/package.json b/package.json index 27fe7a84a..a587a4507 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "dist": "npm install && gulp dist", "test": "npm run lint && npm run test-unit && npm run test-integration", "test-unit": "METAMASK_ENV=test mocha --require test/helper.js --recursive \"test/unit/**/*.js\"", + "test-responsive": "METAMASK_ENV=test mocha --require test/helper.js --recursive \"test/unit/responsive/**/*.js\"", "test-integration": "npm run buildMock && npm run buildCiUnits && testem ci -P 2", "lint": "gulp lint", "buildCiUnits": "node test/integration/index.js", diff --git a/test/unit/responsive/components/dropdown-test.js b/test/unit/responsive/components/dropdown-test.js new file mode 100644 index 000000000..feadc792e --- /dev/null +++ b/test/unit/responsive/components/dropdown-test.js @@ -0,0 +1,51 @@ +var assert = require('assert'); + +const additions = require('react-testutils-additions'); +const h = require('react-hyperscript'); +const ReactTestUtils = require('react-addons-test-utils'); +const sinon = require('sinon'); +const path = require('path'); +const Dropdown = require(path.join(__dirname, '..', '..', '..', '..', 'ui', 'responsive', 'app', 'components', 'dropdown.js')).Dropdown; +const DropdownMenuItem = require(path.join(__dirname, '..', '..', '..', '..', 'ui', 'responsive', 'app', 'components', 'dropdown.js')).DropdownMenuItem; + +describe('Dropdown components', function () { + it('can render two items', function () { + const renderer = ReactTestUtils.createRenderer() + + const onClickOutside = sinon.spy(); + const closeMenu = sinon.spy(); + const onClick = sinon.spy(); + + const dropdownComponent = h(Dropdown, { + isOpen: true, + zIndex: 11, + onClickOutside, + style: { + position: 'absolute', + right: 0, + top: '36px', + }, + innerStyle: {}, + }, [ // DROP MENU ITEMS + h('style', ` + .drop-menu-item:hover { background:rgb(235, 235, 235); } + .drop-menu-item i { margin: 11px; } + `), + + h(DropdownMenuItem, { + closeMenu, + onClick, + }, 'Item 1'), + + h(DropdownMenuItem, { + closeMenu, + onClick, + }, 'Item 2'), + ]) + + const component = additions.renderIntoDocument(dropdownComponent); + renderer.render(dropdownComponent); + const items = additions.find(component, 'li'); + assert.equal(items.length, 2); + }); +}); \ No newline at end of file diff --git a/ui/responsive/app/components/dropdown.js b/ui/responsive/app/components/dropdown.js new file mode 100644 index 000000000..6e09cd133 --- /dev/null +++ b/ui/responsive/app/components/dropdown.js @@ -0,0 +1,79 @@ +const Component = require('react').Component; +const PropTypes = require('react').PropTypes; +const h = require('react-hyperscript'); +const MenuDroppo = require('menu-droppo'); + +class Dropdown extends Component { + render() { + const { isOpen, onClickOutside, style, children } = this.props; + + return h( + MenuDroppo, + { + isOpen, + zIndex: 11, + onClickOutside, + style, + innerStyle: { + borderRadius: '4px', + padding: '8px 16px', + background: 'rgba(0, 0, 0, 0.8)', + boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px', + }, + }, + [ + h( + 'style', + ` + li.dropdown-menu-item:hover { color:rgb(225, 225, 225); } + li.dropdown-menu-item { color: rgb(185, 185, 185); } + ` + ), + ...children, + ], + ); + } +} + +Dropdown.propTypes = { + isOpen: PropTypes.func.isRequired, + onClick: PropTypes.func.isRequired, + children: PropTypes.node, + style: PropTypes.object.isRequired, +} + +class DropdownMenuItem extends Component { + render() { + const { onClick, closeMenu, children } = this.props; + + return h( + 'li.dropdown-menu-item', + { + onClick, + closeMenu, + style: { + listStyle: 'none', + padding: '8px 0px 8px 0px', + fontSize: '12px', + fontStyle: 'normal', + fontFamily: 'Montserrat Regular', + cursor: 'pointer', + display: 'flex', + justifyContent: 'flex-start', + }, + }, + children + ); + } +} + +DropdownMenuItem.propTypes = { + closeMenu: PropTypes.func.isRequired, + onClick: PropTypes.func.isRequired, + children: PropTypes.node, +}; + +module.exports = { + Dropdown, + DropdownMenuItem, +}; \ No newline at end of file