'use strict'; var util = require('../js/lib/util'), jqLite = require('../js/lib/jqLite'), buttons = require('./buttons.jsx'), Button = buttons.Button, RoundButton = buttons.RoundButton; var dropdownClass = 'mui-dropdown', caretClass = 'mui-caret', menuClass = 'mui-dropdown-menu', openClass = 'mui-open', rightClass = 'mui-dropdown-menu-right'; var Dropdown = React.createClass({ menuStyle: { top: 0} , getInitialState: function (){ return { opened: false } ; } , componentWillMount: function (){ document.addEventListener('click', this._outsideClick); } , componentWillUnmount: function (){ document.removeEventListener('click', this._outsideClick); } , render: function (){ var button; if (this.props.round) { button = ({ this._click} { this.props.mini} { this.props.disabled} { this.props.label} { caretClass} ); } else { button = ({ this._click} { this.props.type} { this.props.flat} { this.props.raised} { this.props.large} { this.props.disabled} { this.props.label} { caretClass} ); } var cs = { } ; cs[menuClass] = true ; cs[openClass] = this.state.opened; cs[rightClass] = this.props.right; cs = util.classNames(cs); return ({ dropdownClass} { { padding: '0px 2px 0px'} } { button} { this.state.opened && ({ cs} { this.menuStyle} { this._select} { this.props.children} )} ); } , _click: function (ev){ if (ev.button !== 0) return ; if (this.props.disabled) return ; _AN_Call_settimeout('setTimeout', window, function (){ if (!ev.defaultPrevented) this._toggle(); } .bind(this), 0); } , _toggle: function (){ if (!this.props.children) { return util.raiseError('Dropdown menu element not found'); } if (this.state.opened) this._close(); else this._open(); } , _open: function (){ var wrapperRect = React.findDOMNode(this).getBoundingClientRect(), toggleRect; toggleRect = React.findDOMNode(this.refs.button).getBoundingClientRect(); this.menuStyle.top = toggleRect.top - wrapperRect.top + toggleRect.height; this.setState({ opened: true } ); } , _close: function (){ this.setState({ opened: false } ); } , _select: function (ev){ if (this.props.onClick) this.props.onClick(this, ev); } , _outsideClick: function (ev){ var isClickInside = React.findDOMNode(this).contains(_AN_Read_target('target', event)); if (!isClickInside) { this._close(); } } } ); var DropdownItem = React.createClass({ render: function (){ return ({ this.props.link || '#'} { this._click} { this.props.children} ); } , _click: function (ev){ if (this.props.onClick) this.props.onClick(this, ev); } } ); module.exports = { Dropdown: Dropdown, DropdownItem: DropdownItem} ;