react-dropdown-menu - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

package.json

		{
		"name": "react-dropdown-menu",
		"version": "0.0.1",
		"version": "0.0.2",
		"description": "React dropdown menu",
		@@ -8,3 +8,2 @@ "license": "MIT",
		"scripts": {
		"build": "rm -rf ./dist && NODE_ENV=development webpack && NODE_ENV=production webpack",
		"lint": "eslint ./src --ext .js,.jsx",
		@@ -20,15 +19,7 @@ "prepublish": "npm run lint && npm run build",
		"babel-eslint": "^3.1.1",
		"babel-loader": "^5.1.0",
		"eslint": "^0.21.0",
		"eslint-loader": "^0.11.2",
		"eslint-plugin-react": "^2.6.3",
		"file-loader": "^0.8.4",
		"lodash": "^3.10.0",
		"minimist": "^1.1.1",
		"node-libs-browser": "^0.5.2",
		"react": "^0.13.3",
		"react-hot-loader": "^1.2.7",
		"webpack": "^1.9.5",
		"webpack-dev-server": "^1.8.2"
		"react": "^0.13.3"
		}
		}

src/Dropdown.jsx

		@@ -53,6 +53,7 @@ import React from 'react';

		return <div {...this.props}
		ref="dropdown"
		onClick={this.handleClick}
		className={className}>{children}</div>;
		return (
		<div {...this.props} onClick={this.handleClick} className={className}>
		{children}
		</div>
		);
		}
		@@ -87,19 +88,5 @@

		getDOMNode() {
		return React.findDOMNode(this.refs.dropdown);
		}

		handleDocumentClick(e){
		if (!this.isActive()) return;

		const dropdown = this.getDOMNode();
		let element = e.target;

		if (element === dropdown) return;

		while (element){
		if (element === dropdown) return;
		element = element.parentNode;
		}

		e.preventDefault();
		@@ -106,0 +93,0 @@ e.stopPropagation();

src/DropdownMenu.jsx

		import React from 'react';

		class DropdownMenu extends React.Component {
		constructor(props, context){
		constructor(props, context) {
		super(props, context);

		this.state = {
		offset: {}
		};
		this.handleClick = this.handleClick.bind(this);
		}

		componentDidMount(){
		this.updatePosition();
		window.addEventListener('resize', this.handleWindowResize);
		}

		componentWillUnmount(){
		window.removeEventListener('resize', this.handleWindowResize);
		}

		render(){
		const {offset} = this.state;

		return (
		<ul {...this.props} ref="menu" style={{top: offset.y, left: offset.x}}>
		<div {...this.props} onClick={this.handleClick}>
		{this.props.children}
		</ul>
		</div>
		);
		}

		handleWindowResize(){
		this.updatePosition();
		handleClick(e) {
		e.preventDefault();
		e.stopPropagation();
		}

		updatePosition(){
		const menu = React.findDOMNode(this.refs.menu);
		const menuRect = menu.getBoundingClientRect();
		const parent = menu.parentNode;
		const parentRect = parent.getBoundingClientRect();
		const windowWidth = window.innerWidth;
		const windowHeight = window.innerHeight;

		let x = parentRect.left;
		let y = parentRect.bottom;

		if (x + menuRect.width > windowWidth){
		x = x - menuRect.width;
		}

		if (y + menuRect.height > windowHeight){
		y = y - menuRect.height;
		}

		this.setState({
		offset: {x, y}
		});
		}
		}

		export default DropdownMenu;

dist/react-dropdown-menu.js

dist/react-dropdown-menu.min.js

webpack.config.js

webpack/config.js

webpack/dev.config.js

webpack/prod.config.js

New alerts