53 lines
1.4 KiB
JavaScript
53 lines
1.4 KiB
JavaScript
import React from "react";
|
|
|
|
export default class Step extends React.Component
|
|
{
|
|
componentDidMount()
|
|
{
|
|
if(this.status === this.props.statuscode_id)
|
|
{
|
|
this.setState({ open: true });
|
|
}
|
|
}
|
|
|
|
componentDidUpdate(prevProps, prevState)
|
|
{
|
|
if(this.props.statuscode_id !== prevProps.statuscode_id)
|
|
{
|
|
if(this.status === this.props.statuscode_id)
|
|
{
|
|
this.setState({ open: true });
|
|
}
|
|
else
|
|
{
|
|
this.setState({ open: false });
|
|
}
|
|
}
|
|
}
|
|
|
|
_handle_onSwitch = () =>
|
|
{
|
|
const { statuscode_id } = this.props;
|
|
this.setState({ open: !this.state.open ? true : false });
|
|
}
|
|
|
|
_renderHeader = (title) =>
|
|
{
|
|
const { statuscode_id } = this.props;
|
|
const { open } = this.state;
|
|
|
|
return (
|
|
<div className="status_header" style={statuscode_id >= this.status ? { position: "relative", } : { position: "relative", cursor: "inherit" }} onClick={ statuscode_id >= this.status ? this._handle_onSwitch : () => {} }>
|
|
{ this.status === statuscode_id && ( <div className="background"></div> )}
|
|
<i className={`status_${ this.status } ${ statuscode_id < this.status ? "inactive" : "" }`}></i>
|
|
<p>{ title }</p>
|
|
{ statuscode_id >= this.status && (
|
|
<div className="button_arrow">
|
|
<div className={`icon ${ open ? "up" : "down" }`}></div>
|
|
</div>
|
|
) }
|
|
{ this._renderHeaderButtons !== undefined && this._renderHeaderButtons() }
|
|
</div>
|
|
)
|
|
}
|
|
} |