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

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>
);
}
}