146 lines
4.1 KiB
JavaScript
146 lines
4.1 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 = {
|
|
opened: [],
|
|
};
|
|
}
|
|
|
|
componentDidMount()
|
|
{
|
|
}
|
|
|
|
_handle_onVariant = (type) =>
|
|
{
|
|
const { blocked, loading } = this.props;
|
|
|
|
if(!blocked && !loading)
|
|
{
|
|
this.props.onVariant(type);
|
|
}
|
|
}
|
|
|
|
_getVariantHelp = (type) =>
|
|
{
|
|
const { variants } = this.props;
|
|
|
|
for(let i in variants.types)
|
|
{
|
|
if(variants.types[i].name === type)
|
|
{
|
|
return variants.types[i].information;
|
|
}
|
|
}
|
|
|
|
return null;
|
|
}
|
|
|
|
_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 = (event) =>
|
|
{
|
|
event.preventDefault();
|
|
|
|
this.props.onOptions();
|
|
}
|
|
|
|
_handle_onMobileHelp = (index) =>
|
|
{
|
|
if(window.innerWidth < 768)
|
|
{
|
|
const opened = [ ...this.state.opened ];
|
|
|
|
if (opened.indexOf(index) === -1)
|
|
{
|
|
opened.push(index);
|
|
}
|
|
else
|
|
{
|
|
opened.splice(opened.indexOf(index), 1);
|
|
}
|
|
|
|
this.setState({ opened: opened });
|
|
}
|
|
}
|
|
|
|
render()
|
|
{
|
|
const { number, variants, variants_types, selected, blocked, loading } = this.props;
|
|
const { opened } = this.state;
|
|
console.log(variants_types);
|
|
|
|
return (
|
|
<div className="block" style={{ position: "relative" }}>
|
|
<p className="title">Варианты изменения графиков</p>
|
|
<div style={ loading ? { opacity: 0.5, } : {} }>
|
|
<form onSubmit={ this._handle_onOptions }>
|
|
{ variants_types !== undefined && variants_types !== null && variants_types.map((variant, index) =>
|
|
{
|
|
const disabled = this._checkVariant(variant.type);
|
|
const help = this._getVariantHelp(variant.type);
|
|
|
|
console.log("opened", opened);
|
|
|
|
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>
|
|
{ help !== null && (
|
|
<div className="help_tooltip">
|
|
<div className="help_icon" onClick={ () => this._handle_onMobileHelp(variant.type) }>
|
|
<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.indexOf(variant.type) > -1 && "opened" }`}>
|
|
<div>
|
|
<p className="help_tooltip_content" dangerouslySetInnerHTML={{ __html: help }}/>
|
|
<p className="button" onClick={ () => this._handle_onMobileHelp(variant.type) }>Закрыть</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) }
|
|
</div>
|
|
)
|
|
}) }
|
|
{ selected !== undefined && selected !== null && (
|
|
<button type="submit" className="button button-blue" disabled={ blocked || loading ? true : selected.length > 0 ? false : true }>Далее</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>
|
|
)
|
|
}
|
|
} |