93 lines
2.4 KiB
JavaScript
93 lines
2.4 KiB
JavaScript
import React, { Component } from 'react';
|
|
import PropTypes, { func } from 'prop-types';
|
|
import autobind from 'autobind-decorator';
|
|
import HeaderSearchFieldContainer from './HeaderSearchFieldContainer';
|
|
import reduxLang from '../../middleware/lang';
|
|
import BurgerBtnContainer from '../AppMenu/BurgerBtnContainer';
|
|
import { useSelector } from 'react-redux'
|
|
import { connect } from 'react-redux';
|
|
|
|
@autobind
|
|
class _ContentHeader extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
searching: false
|
|
};
|
|
}
|
|
|
|
toggleSearching() {
|
|
this.setState({ searching: !this.state.searching });
|
|
}
|
|
|
|
render() {
|
|
const { searching } = this.state;
|
|
const { isPreLaunch, color, scrollingText } = this.props;
|
|
return searching ? (
|
|
<div className='ContentHeader'>
|
|
<HeaderSearchFieldContainer closeFunc={this.toggleSearching} />
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div className="marquee" style={{backgroundColor: color}}>
|
|
<div className="marquee__inner" aria-hidden="true">
|
|
<span>{scrollingText}</span>
|
|
</div>
|
|
</div>
|
|
<div className='ContentHeader'>
|
|
<HeaderIcon />
|
|
<BurgerBtnContainer />
|
|
<HeaderTitle />
|
|
{!isPreLaunch && <HeaderSearchBtn handler={this.toggleSearching} />}
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = state => {
|
|
return {
|
|
color: state.urls.color,
|
|
scrollingText: state.urls.scrollingText
|
|
};
|
|
};
|
|
const ContentHeader = connect(mapStateToProps)(_ContentHeader);
|
|
export default ContentHeader;
|
|
|
|
function HeaderIcon() {
|
|
const currentSite = useSelector(state => state.urls.site);
|
|
const allSites = Object.getOwnPropertyNames(useSelector(state => state.urls.allSites))
|
|
const siteID = allSites.findIndex((siteName) => siteName === currentSite) + 1;
|
|
return <h1 className='HeaderIcon big-text'>№ {siteID}</h1>;
|
|
}
|
|
|
|
|
|
const getTitle = t => {
|
|
if ('ontouchstart' in window || navigator.msMaxTouchPoints > 0) {
|
|
return 'Fundbüro № 1';
|
|
} else {
|
|
return t('skiing');
|
|
}
|
|
};
|
|
|
|
function _HeaderTitle({ t }) {
|
|
const siteName = useSelector(state => state.urls.name);
|
|
return <h1 className='HeaderTitle big-text'>{siteName}</h1>;
|
|
}
|
|
_HeaderTitle.propTypes = {
|
|
t: PropTypes.func.isRequired
|
|
};
|
|
const HeaderTitle = reduxLang('HeaderTitle')(_HeaderTitle);
|
|
|
|
const HeaderSearchBtn = ({ handler }) => (
|
|
<div className='HeaderSearchBtn'>
|
|
<button onClick={handler}>
|
|
<img src='/static/gfx/alps_lupe.svg' alt='search' />
|
|
</button>
|
|
</div>
|
|
);
|
|
|
|
HeaderSearchBtn.propTypes = {
|
|
handler: PropTypes.func.isRequired
|
|
};
|