mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
Merge pull request #1772 from sdtsui/new-dropdown
Implement NewUI Dropdown Component
This commit is contained in:
commit
1e0cd5f302
@ -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",
|
||||
|
51
test/unit/responsive/components/dropdown-test.js
Normal file
51
test/unit/responsive/components/dropdown-test.js
Normal file
@ -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);
|
||||
});
|
||||
});
|
79
ui/responsive/app/components/dropdown.js
Normal file
79
ui/responsive/app/components/dropdown.js
Normal file
@ -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,
|
||||
};
|
Loading…
Reference in New Issue
Block a user