'use strict'; import React from 'react/addons'; import UserActions from '../../actions/user_actions'; import UserStore from '../../stores/user_store'; import AclButton from '../ascribe_buttons/acl_button'; import { mergeOptions } from '../../utils/general_utils'; let AclButtonList = React.createClass({ propTypes: { className: React.PropTypes.string, editions: React.PropTypes.oneOfType([ React.PropTypes.object, React.PropTypes.array ]), availableAcls: React.PropTypes.object, buttonsStyle: React.PropTypes.object, handleSuccess: React.PropTypes.func, children: React.PropTypes.oneOfType([ React.PropTypes.arrayOf(React.PropTypes.element), React.PropTypes.element ]) }, getInitialState() { return mergeOptions( UserStore.getState(), { buttonListSize: 0 } ); }, componentDidMount() { UserStore.listen(this.onChange); UserActions.fetchCurrentUser(); window.addEventListener('resize', this.handleResize); window.dispatchEvent(new Event('resize')); }, componentDidUpdate(prevProps) { if(prevProps.availableAcls && prevProps.availableAcls !== this.props.availableAcls) { window.dispatchEvent(new Event('resize')); } }, componentWillUnmount() { UserStore.unlisten(this.onChange); window.removeEventListener('resize', this.handleResize); }, handleResize() { this.setState({ buttonListSize: this.refs.buttonList.getDOMNode().offsetWidth }); }, onChange(state) { this.setState(state); }, renderChildren() { const { children } = this.props; const { buttonListSize } = this.state; return React.Children.map(children, (child) => { return React.addons.cloneWithProps(child, { buttonListSize }); }); }, render() { const { className, buttonsStyle, availableAcls, editions, handleSuccess } = this.props; const { currentUser } = this.state; return (
{this.renderChildren()}
); } }); export default AclButtonList;