evoleasing-account/components/questionnaire/InnerMenu/index.js

import React from "react";
import Link from "next/link";
import { connect } from "react-redux";
import { getContractEvents, getContractFines, getContractInfo, } from "../../../actions";
import NoSSR from '@mpth/react-no-ssr';

class InnerMenu extends React.Component
{
	constructor(props)
	{
		super(props);
		this.menuRef = React.createRef();

		this.state = {
			menuOpened: false, 
			step: 1, 
		};
	}

	static getDerivedStateFromProps(nextProps, prevState) 
	{
		return {
			step: nextProps.questionnaire.step, 
		};
	}

	componentDidMount()
	{
		setTimeout(() => 
		{
			this._checkMenu();
		}, 10);
	}

	componentDidUpdate(prevProps, prevState)
	{
		if(prevProps.router !== undefined && prevProps.router.asPath !== undefined && this.props.router !== undefined && this.props.router.asPath !== undefined)
		{
			if(prevProps.router.asPath !== this.props.router.asPath)
			{
				this._checkMenu();
			}

			////console.log("InnerMenu", "menu", "prevProps.route", prevProps);

			////console.log("InnerMenu", "menu", "this.props.route", this.props);

		}
	}

	_checkMenu = () => 
	{
		const { company, nko } = this.props;
		let l = 0;
		let m = 0;
		let menu;
		if(company.inn.length < 11)
		{
			menu = nko ? [ "#main", "#contacts", "#signer", "#shareholders", "#regulatory", "#non-profit", "#check", "#signing" ] 
			: [ "#main", "#contacts", "#signer", "#shareholders", "#regulatory", "#check", "#signing" ];
		}
		else
		{
			menu = [ "#main", "#contacts", "#signer", "#shareholders", "#check", "#signing" ];			
		}

		//console.log("_checkMenu", this.menuRef.current);

		for(let i in menu)
		{
			if(this.props.router.asPath.indexOf(menu[i]) > -1)
			{
				m = i;
			}
		}

		if(this.menuRef.current !== null)
		{
			for(let i = 0; i < m; i++)
			{
				//console.log("this.menuRef.current.children", this.menuRef.current.children[i]);

				if(this.menuRef.current.children[i] !== undefined)
				{
					l = l + this.menuRef.current.children[i].getBoundingClientRect().width;
				}
			}

			if(this.menuRef.current !== null)
			{
				this.menuRef.current.scrollLeft = l - 50;
			}
		}
	}

	_handle_onToggleMenu = () => 
	{
		this.setState({
			menuOpened: !this.state.menuOpened, 
		});
	}

	_getActiveLink = (route) => 
	{
		const { company, nko } = this.props;
		const last = company.inn.length < 11 ? nko ? [7,8] : [6,7] : [5,6];

		if (route.indexOf("#main") > -1) return "1. Информация о лизингополучателе";
		if (route.indexOf("#contacts") > -1) return "2. Адреса лизингополучателя";
		if (route.indexOf("#signer") > -1) return "3. Информация о единоличном исполнительном органе, подписанте договора лизинга";
		if (route.indexOf("#shareholders") > -1) return "4. Сведения об участниках (акционерах) и бенефициарных владельцах";
		if (route.indexOf("#regulatory") > -1) return "5. Сведения об органах управления";
		if (route.indexOf("#non-profit") > -1) return "6. Данные о некомерческой организации";
		if (route.indexOf("#check") > -1) return `${ last[0] }. Проверка введеных данных`;
		if (route.indexOf("#signing") > -1) return `${ last[1] }. Выбор метода подписания`;

		return null;
	}

	render()
	{
		//console.log("questionnaire", this.props.questionnaire);

		const { menuOpened, step, } = this.state;
		const { questionnaire, company, nko } = this.props;
		const last = company.inn.length < 11 ? nko ? [7,8] : [6,7] : [5,6];

		//console.log("this.props.router.asPath", this.props.router.asPath);


		return (
			<aside>
				<NoSSR>
					<button className="nav_toggle" onClick={ this._handle_onToggleMenu }>
						{ this.props.router && this._getActiveLink(this.props.router.asPath) }
					</button>
					<ul className={ menuOpened ? "aside_nav open" : "aside_nav" } ref={ this.menuRef }>
						<li>
							<Link href={`/questionnaire/#main`} shallow>
								<a style={{ fontWeight: 400, }} disabled={ step >= 1 ? false : true } className={ this.props.router && this.props.router.asPath.indexOf("#main") > -1 || this.props.router.asPath.indexOf("#") < 0 ? "active" : "" }>1. Информация о лизингополучателе</a>
							</Link>
						</li>
						<li>
							<Link href={`/questionnaire/#contacts`} shallow>
								<a style={{ fontWeight: 400, }} disabled={ step >= 2 ? false : true } className={ this.props.router && this.props.router.asPath.indexOf("#contacts") > -1 ? "active" : "" }>2. Адреса лизингополучателя</a>
							</Link>
						</li>
						<li>
							<Link href={`/questionnaire/#signer`} shallow>
								<a style={{ fontWeight: 400, }} disabled={ step >= 3 ? false : true } className={ this.props.router && this.props.router.asPath.indexOf("#signer") > -1 ? "active" : "" }>3. Информация о единоличном исполнительном органе, подписанте договора лизинга</a>
							</Link>
						</li>
						<li>
							<Link href={`/questionnaire/#shareholders`} shallow>
								<a style={{ fontWeight: 400, }} disabled={ step >= 4 ? false : true } className={ this.props.router && this.props.router.asPath.indexOf("#shareholders") > -1 ? "active" : "" }>4. Сведения об участниках (акционерах) и бенефициарных владельцах</a>
							</Link>
						</li>
						{ company.inn.length < 11 && (
							<React.Fragment>
								<li>
									<Link href={`/questionnaire/#regulatory`} shallow>
										<a style={{ fontWeight: 400, }} disabled={ step >= 5 ? false : true } className={ this.props.router && this.props.router.asPath.indexOf("#regulatory") > -1 ? "active" : "" }>5. Сведения об органах управления</a>
									</Link>
								</li>
								{ nko && (
									<li>
										<Link href={`/questionnaire/#non-profit`} shallow>
											<a style={{ fontWeight: 400, }} disabled={ step >= 6 ? false : true } className={ this.props.router && this.props.router.asPath.indexOf("#non-profit") > -1 ? "active" : "" }>6. Данные о некомерческой организации</a>
										</Link>
									</li>
								) }
							</React.Fragment>
						) }
						<li>
							<Link href={`/questionnaire/#check`} shallow>
								<a style={{fontWeight: 400}} disabled={ step >= 7 ? false : true } className={ this.props.router && this.props.router.asPath.indexOf("#check") > -1 ? "active" : "" }>{ last[0] }. Проверка введеных данных</a>
							</Link>
						</li>
						<li>
							<Link href={`/questionnaire/#signing`} shallow>
								<a style={{fontWeight: 400}} disabled={ step >= 8 ? false : true } className={ this.props.router && this.props.router.asPath.indexOf("#signing") > -1 ? "active" : "" }>{ last[1] }. Выбор метода подписания</a>
							</Link>
						</li>
					</ul>
				</NoSSR>
			</aside>
		)
	}
}

function mapStateToProps(state, ownProps) 
{
	return {
		questionnaire: state.questionnaire, 
	};
}

export default connect(mapStateToProps)(InnerMenu);