101 lines
3.0 KiB
JavaScript
101 lines
3.0 KiB
JavaScript
import React from "react";
|
|
import { SpinnerCircular } from "spinners-react";
|
|
import DateInput from "../../../../components/DatePicker";
|
|
|
|
export default class VariantsList extends React.Component
|
|
{
|
|
constructor(props)
|
|
{
|
|
super(props);
|
|
this.state = {
|
|
};
|
|
}
|
|
|
|
componentDidMount()
|
|
{
|
|
}
|
|
|
|
_handle_onVariant = (type) =>
|
|
{
|
|
const { blocked, loading } = this.props;
|
|
|
|
if(!blocked && !loading)
|
|
{
|
|
this.props.onVariant(type);
|
|
}
|
|
}
|
|
|
|
_checkVariant = (type) =>
|
|
{
|
|
const { variants } = this.props;
|
|
|
|
for(let i in variants.types)
|
|
{
|
|
if(variants.types[i].name === type)
|
|
{
|
|
if(variants.types[i].disable === true)
|
|
{
|
|
return true;
|
|
}
|
|
|
|
return false;
|
|
}
|
|
}
|
|
|
|
return false;
|
|
}
|
|
|
|
_handle_onOptions = () =>
|
|
{
|
|
this.props.onOptions();
|
|
}
|
|
|
|
render()
|
|
{
|
|
const { number, variants_types, selected, blocked, loading } = this.props;
|
|
|
|
return (
|
|
<div className="block" style={{ position: "relative" }}>
|
|
<p className="title">Варианты изменения графиков</p>
|
|
<div style={ loading ? { opacity: 0.5, } : {} }>
|
|
<form onSubmit={ (e) => e.preventDefault() }>
|
|
{ variants_types.map((variant, index) =>
|
|
{
|
|
const disabled = this._checkVariant(variant.type);
|
|
return (
|
|
<div className="form_field" key={ index }>
|
|
<input type="checkbox" hidden id={ `variant_${ index }` } name="variants" disabled={ disabled } checked={ selected.indexOf(variant.type) > -1 ? true : false } onChange={ () => { this._handle_onVariant(variant.type) } }/>
|
|
<label htmlFor={ `variant_${ index }` } className="unselectable"
|
|
style={ disabled ? { color: "#A8026B", textDecoration: "line-through", } : {} }>{ variant.title }</label>
|
|
<div className="help_tooltip">
|
|
<div className="help_icon">
|
|
<svg width={ 24 } height={ 24 } fill="none" xmlns="http://www.w3.org/2000/svg" >
|
|
<path d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z" stroke="#8E94A7" strokeWidth={ 2 } strokeLinecap="round" strokeLinejoin="round" />
|
|
<path d="M11.25 11.25H12v5.25h.75" stroke="#8E94A7" strokeWidth={ 2 } strokeLinecap="round" strokeLinejoin="round" />
|
|
<path d="M12 9a1.125 1.125 0 1 0 0-2.25A1.125 1.125 0 0 0 12 9Z" fill="#8E94A7" />
|
|
</svg>
|
|
</div>
|
|
<div className="help_content ">
|
|
{" "}
|
|
{/* opened */}
|
|
<div>
|
|
<p>{ variant.help }</p>
|
|
<p className="button">Закрыть</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}) }
|
|
<button className="button button-blue" disabled={ blocked || loading ? true : selected.length > 0 ? false : true } onClick={ this._handle_onOptions }>Далее</button>
|
|
</form>
|
|
</div>
|
|
{ loading && (
|
|
<div style={{ position: "absolute", left: "50%", top: "50%" }}>
|
|
<SpinnerCircular size={ 90 } thickness={ 51 } speed={ 100 } color="rgba(28, 1, 169, 1)" secondaryColor="rgba(236, 239, 244, 1)" style={{ marginTop: "-45px", marginLeft: "-45px", }}/>
|
|
</div>
|
|
) }
|
|
</div>
|
|
)
|
|
}
|
|
} |