FilterList:
class FilterList extends Component {
constructor(props) {
super(props);
// предполагаемый стейт
this.state = [
{
isHovered: false,
hoverValue: 0,
hoverPositionLeft: 0,
isFocused: false
},
// etc.
];
}
handleSliderMouseDown = () => event => {
// функция изменения слайдера
};
render() {
const { filterList, onSliderChange } = this.props;
const list = filterList.map(item => {
const { id, minValue, maxValue } = item;
return (
<FilterRow
{...item}
handleSliderMouseDown={this.handleSliderMouseDown(
id,
minValue,
maxValue,
onSliderChange
)}
/>
);
});
return <div className="filter-list">{list}</div>;
}
}
Slider:
const RangeSlider = props => {
const {
value,
isHovered,
isFocused,
cursorPositionLeft,
handleSliderMouseDown
} = props;
return (
<div onMouseDown={handleSliderMouseDown.bind(RangeSlider)}>
<div className="range-slider__slide">
<div className="range-slider__amount" style={amountStyle} />
<div className="range-slider__thumb" style={thumbStyle} />
</div>
{/* Тултип, который не должен выводиться,
если у какого-то из слайдеров уже стоит isFocused */}
<RangeHint style={{ left: cursorPositionLeft }}>{value}</RangeHint>
</div>
);
};