components/ProfileEdit/ProfileEditForm/ProfileEditFormGroups/ProfileEditFormGroupsItem/ProfileEditFormGroupsItem.jsx

/**
 * Поле для редактирования группы
 * @module ProfileEditFormGroupsItem
 * @author Ihor Bielchenko
 * @requires react
 * @requires react#Component
 * @requires react-redux#connect
 * @requires redux#bindActionCreators
 * @requires components/Common/Link.jsx
 * @requires components/GroupTableItem/RemoveGroup/RemoveGroup.jsx
 * @requires components/ProfileEdit/ProfileEditForm/ProfileEditFromGroups/ProfileEditFromGroupsItem/ProfileEditFromGroupsItem.jsx
 * @requires actions/StateUserAction.js
 */

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import Link from '../../../../Common/Link.jsx';
import * as StateUserAction from '../../../../../actions/StateUserAction.js';

/**
 * Поле для редактирования группы
 * @extends Component
 * @property {Number} id Идентификатор группы
 * @property {String} name Название группы
 */
class ProfileEditFormGroupsItem extends Component {

	static defaultProps = {
		remove: function() {}
	}

	/**
	 * Объект состяния компонента
	 * @type {Object} 
	 * @inner
	 * @property {Number} enable Флаг, определяющий активность поля
	 */
	state = {
		enable: 0
	}

	/**
	 * Разрешить редактирование поля
	 * @fires click
	 * @param {Object} e
	 */
	enable(e) {
		if(this.state.enable === 0) {
			this.setState({enable: 1});
		}

		else {
			this.setState({enable: 0});

			let el = document.getElementById('group-input-'+ this.props.id);
			if(typeof el !== 'undefined' && typeof el.value !== 'undefined') { 
				this.props.StateUserAction.updateGroup(this.props.user, this.props.id, {
					name: el.value
				});
			}
		}
	}

	/**
	 * Render component
	 * @return {Object} jsx object
	 */
	render() {
		var disabled = true,
			inputClassName = 'disabled',
			title = this.props.lang.edit_group_title;

		if(this.state.enable === 1) {
			disabled = false;
			inputClassName = 'enabled';
			title = this.props.lang.save_title;
		}

		return <div className="line">
					<div className="group-input__container">
						<div className="input-block">
							<input type="text" 
								id={'group-input-'+ this.props.id}
								className={inputClassName}
								defaultValue={this.props.name}
								disabled={disabled} />
							<Link href="" 
								className="delete"
								onClick={this.props.remove.bind(this)}></Link>
						</div>
						
						<Link href=""
							onClick={this.enable.bind(this)}>{title}</Link>
					</div>
				</div>
	}
}

/**
 * Init redux states
 * @param {Object} state
 * @return {Object}
 */
function mapStateToProps(state) {
	return {
		lang: state.lang,
		user: state.user,
	}
}

/**
 * Init redux actions
 * @param {Function} dispatch
 * @return {Object}
 */
function mapDispatchToProps(dispatch) {
	return {
		StateUserAction: bindActionCreators(StateUserAction, dispatch),
	}
}

export default connect(mapStateToProps, mapDispatchToProps)(ProfileEditFormGroupsItem);