{"size": 2210, "ext": "js", "max_stars_repo_path": "src/DirectPayment/Forms/Step.js", "max_stars_repo_name": "pedropbazzo/pagseguro-react", "max_stars_repo_stars_event_min_datetime": "2019-02-01T15:18:23.000Z", "max_stars_repo_stars_event_max_datetime": "2022-02-05T19:07:29.000Z", "max_issues_repo_path": "src/DirectPayment/Forms/Step.js", "max_issues_repo_name": "pedropbazzo/pagseguro-react", "max_issues_repo_issues_event_min_datetime": "2019-02-20T13:13:50.000Z", "max_issues_repo_issues_event_max_datetime": "2021-05-26T15:50:04.000Z", "max_forks_repo_path": "src/DirectPayment/Forms/Step.js", "max_forks_repo_name": "pedropbazzo/pagseguro-react", "max_forks_repo_forks_event_min_datetime": "2019-06-18T16:46:17.000Z", "max_forks_repo_forks_event_max_datetime": "2021-12-11T01:57:47.000Z"}
{"max_stars_count": 114, "max_issues_count": 15, "max_forks_count": 36, "avg_line_length": 19.0517241379, "max_line_length": 88, "alphanum_fraction": 0.6235294118}
import React from 'react';
import PropTypes from 'prop-types';
import styled, { css } from 'styled-components';
import * as THEME from '../../Ui/theme';

const Container = styled.div`
	padding: 1em 0 0;
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
	margin: 0 0 1em 0;
	border-bottom: solid 1px #dadada;
	background: ${THEME.STEPS_BACKGROUND};
`;

const Buttons = styled.div`
	display: flex;
	justify-content: space-evenly;
	@media (max-width: 768px) {
		display: block;
	}
`;
const BtnCol = styled.div`
	flex: auto;
`;

const Button = styled.button`
	width: 100%;
	opacity: .5;
    border: none;
    outline:none;
    display: inline-block;
    margin: 0;
    cursor: pointer;
    padding: 1em 0;
	font-size: 0.9em;
	text-transform: uppercase;
	border-bottom: solid 2px transparent;
	color: ${THEME.STEPS_BUTTON};
	background: ${THEME.STEPS_BUTTON_BACKGROUND};

	:hover {
		color: ${THEME.STEPS_BUTTON_HOVER};
	}

	${props => props.active && css`
		opacity: 1;
        color: ${THEME.STEPS_BUTTON_ACTIVE};
		background: ${THEME.STEPS_BUTTON_BACKGROUND_ACTIVE};
		border-color: ${THEME.STEPS_BUTTON_ACTIVE};

		:hover {
			color: ${THEME.STEPS_BUTTON_ACTIVE};
		}
    `}

    :disabled {
        cursor: not-allowed;
		color: ${THEME.STEPS_BUTTON_DISABLE};
		background: ${THEME.STEPS_BUTTON_BACKGROUND_DISABLE};
	}

`;


export default class Step extends React.Component {


    /**
    * propTypes
    */
	static propTypes = {
		steps: PropTypes.array.isRequired,
		onChange: PropTypes.func.isRequired,
	}


    /**
    * constructor
    *
    * @param {Object} props
    */
	constructor(props) {
		super(props);
	}



    /**
    * render
    */
	render() {

		const { steps, onChange, active } = this.props;

		return <Container className="ps-react-step">
			<Buttons>
				{
					steps.map((item, key) => (
						<BtnCol key={key}>
							<Button
								disabled={item.disabled}
								active={active == item.name ? 'active' : ''}
								className={`ps-react-step ${active == item.name ? 'ps-react-step-active' : ''}`}
								onClick={onChange.bind(this, item.name, null)}
							>
								{item.displayName}
							</Button>
						</BtnCol>
					))
				}
			</Buttons>
		</Container>
	}
}
