You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
60 lines
1.9 KiB
60 lines
1.9 KiB
import React, { Component } from "react"; |
|
import Grid from "@material-ui/core/Grid"; |
|
import Slider from "@material-ui/core/Slider"; |
|
import Input from "@material-ui/core/Input"; |
|
import ArrowRightAltIcon from "@material-ui/icons/ArrowRightAlt"; |
|
|
|
export default class SliderMessage extends Component { |
|
state = { |
|
value: this.props.message.value || 0, |
|
}; |
|
onChange = (value) => { |
|
if (!this.props.isActive || !value) return; |
|
const [min, max] = this.props.message.options[0] || [0, 100, 1]; |
|
this.setState({ value: Math.min(max, Math.max(min, parseFloat(value))) }); |
|
}; |
|
|
|
render() { |
|
const { message, isActive, action } = this.props; |
|
const [min, max, step] = message.options[0] || [0, 100, 1]; |
|
const { value } = this.state; |
|
return ( |
|
<div className="message-2d d-flex flex-column d-flex sliderBox"> |
|
<Grid container spacing={2} alignItems="center"> |
|
<Grid item xs> |
|
<Slider |
|
className="slider" |
|
value={value} |
|
onChange={(e, value) => this.onChange(value)} |
|
aria-labelledby="input-slider" |
|
min={min} |
|
max={max} |
|
step={step} |
|
/> |
|
</Grid> |
|
<Grid item> |
|
<Input |
|
className="input" |
|
disabled={!isActive} |
|
value={this.state.value} |
|
onChange={(e) => this.onChange(e.target.value)} |
|
onBlur={() => this.onChange(value)} |
|
inputProps={{ |
|
step: step, |
|
min: min, |
|
max: max, |
|
type: "number", |
|
"aria-labelledby": "input-slider", |
|
}} |
|
/> |
|
</Grid> |
|
</Grid> |
|
{isActive && ( |
|
<button className="message-2d__submit" onClick={() => action()}> |
|
<ArrowRightAltIcon /> |
|
</button> |
|
)} |
|
</div> |
|
); |
|
} |
|
}
|
|
|