Владимир Голубь

import React from 'react';
import styled from 'styled-components';

const Label = styled.div`
    border: none;
    border-radius: 20px;
    background-color: #f63;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    
`;

export default (props) => {
    return (
        <Label className={props.className}>
            { props.children }
        </Label>
    )
}

import React from 'react';
import styled from 'styled-components';

const Column = styled.div`
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
`;

const columnCount = 12;

const ColumnStyled = styled(Column)`    
            
    ${props => props.xs ?
        `
        @media (min-width: 576px) {
            flex: 0 0 ${(100 / columnCount) * props.xs}%;
            max-width: ${(100 / columnCount) * props.xs}%;
        }
        `
        :
        ''
    }
    
    ${props => props.sm ?
    `
        @media (min-width: 768px) {
            flex: 0 0 ${(100 / columnCount) * props.sm}%;
            max-width: ${(100 / columnCount) * props.sm}%;
        }
        ` 
        :
        ''
    }
    
    ${props => props.md ?
    `
        @media (min-width: 992px) {
            flex: 0 0 ${(100 / columnCount) * props.md}%;
            max-width: ${(100 / columnCount) * props.md}%;
        }
        ` 
        :
        ''
    }
    
    ${props => props.lg ?
        `
        @media (min-width: 1200px) {
            flex: 0 0 ${(100 / columnCount) * props.lg}%;
            max-width: ${(100 / columnCount) * props.lg}%;
        }
        ` 
        :
        ''
    }
`;

export default (props) => {
    return (
        <ColumnStyled lg={8} md={4} sm={4} xs={4}>
            { props.children }
        </ColumnStyled>
    )
}

handlerInputChange = (event) => {
        console.log('Срабатывание функции handlerInputChange ');
        console.log('Переданное значение: ', event.target.value);

        event.preventDefault();

        this.setState({
            date: null,
            dateInput: event.target.value
        })

        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] : "");
        }
    }