let stylesObj = {
fontSize: fontsSizes.s,
lineHeight: lineHeights.s
};
<p style={stylesObj}>Текст текст текст</p>{
fontSize: fontsSizes.s,
lineHeight: lineHeights.s
};import React, { Component } from 'react';
import { fontsSizes, fontsFamily, lineHeights, colors } from "../../params";
class Title extends Component {
constructor(props) {
super(props);
};
getStyles = (level, screenSize) => {
this._calcStyles = {};
switch (screenSize) {
case 'xs':
...
case 's':
...
case 'm':
...
case 'l':
if (level === '1') {
this._calcStyles = {
lineHeight: lineHeights.xxxxl,
fontSize: fontsSizes.xxxxl
}
}
if (level === '2') {
this._calcStyles = {
lineHeight: lineHeights.xxxl,
fontSize: fontsSizes.xxxl
}
}
if (level === '3') {
this._calcStyles = {
lineHeight: lineHeights.xxl,
fontSize: fontsSizes.xxl
}
}
if (level === '4') {
this._calcStyles = {
lineHeight: lineHeights.xl,
fontSize: fontsSizes.xl
}
}
if (level === '5') {
this._calcStyles = {
lineHeight: lineHeights.l,
fontSize: fontsSizes.l
}
}
return {
color: colors.black,
fontsFamily: fontsFamily.main,
...this._calcStyles
};
}
};
render() {
let {level, title, screenSize} = this.props;
let titleElement = null;
switch (level) {
case '1':
titleElement = <h1 style={ this.getStyles(level, screenSize) }>{ title }</h1>;
break;
case '2':
titleElement = <h2 style={ this.getStyles(level, screenSize) }>{ title }</h2>;
break;
case '3':
titleElement = <h3 style={ this.getStyles(level, screenSize) }>{ title }</h3>;
break;
case '4':
titleElement = <h4 style={ this.getStyles(level, screenSize) }>{ title }</h4>;
break;
case '5':
titleElement = <h5 style={ this.getStyles(level, screenSize) }>{ title }</h5>;
}
return titleElement;
}
}
export default Title;handlerInputChange = (event) => {
console.log('Срабатывание функции handlerInputChange ');
console.log('Переданное значение: ', event.target.value);
event.preventDefault();
let dateRegExp = /([0-9]{2}.[0-9]{2}.[0-9]{4})/,
resultMatch,
dateDelivery;
let {
minDate,
maxDate
} = this.props;
resultMatch = event.target.value.match(dateRegExp);
if (resultMatch && resultMatch.length > 0) {
console.log('Задание state');
dateDelivery = new Date(resultMatch[1].replace(/([0-9]{2}).([0-9]{2}).([0-9]{4})/, '$3-$2-$1'));
if (dateDelivery && (minDate && dateDelivery < minDate || maxDate && dateDelivery > maxDate)) {
console.log('Ошибка');
return false;
}
this.setState({
date: moment(dateDelivery),
dateInput: resultMatch[1]
});
this.props.onChange(resultMatch[1] ? resultMatch[1] : "");
}
}