Изменение позиции всплывающей подсказки индивидуально - PullRequest
Новая
       11

Изменение позиции всплывающей подсказки индивидуально

0 голосов
/ 01 февраля 2019

Я использую компонент Range, обернутый функцией createSliderWithTooltip.Моя проблема в том, что когда маркеры находятся близко (маленький диапазон), подсказки перекрывают друг друга.Я пытался изменить положение всплывающих подсказок, когда они достаточно близко расположены друг к другу. Я пытаюсь использовать align в tipProps для достижения этого.

Когда ясделайте так, чтобы обе подсказки изменились, и они все еще перекрываются, поэтому я хотел заставить каждую из них перейти на противоположные стороны другой.Можно ли индивидуально изменить align каждой всплывающей подсказки?

Спасибо за ваше внимание!

Если вам, ребята, нужно увидеть код, это в основном так: 

import React from 'react';
import { createSliderWithTooltip, Range as RcRange, RangeProps } from 'rc-slider';
import 'rc-slider/assets/index.css';
import { rangeStyle, tipStyle } from './style';
import TimeFormatter from './TimeFormatter';

export const RangeWithToolTip = createSliderWithTooltip(RcRange);

interface IState {
  initialTime: number;
  finalTime: number;
}

interface IProps extends RangeProps {
  initialTime: number;
  finalTime: number;
  minInterval: number;
}

export class Range extends React.Component<IProps, IState> {
  private readonly initialTimeAbsolute: number;
  private readonly finalTimeAbsolute: number;

  constructor(props: IProps) {
    super(props);

    this.initialTimeAbsolute = this.props.initialTime * 60;
    this.finalTimeAbsolute = this.props.finalTime * 60;

    this.state = {
      initialTime: this.props.initialTime * 60,
      finalTime: this.props.finalTime * 60
    };

  }

  private handleChange = (value: number[]) => {
    this.setState({
      initialTime: value[0],
      finalTime: value[1]
    });
  };

  public render() {
    return <RangeWithToolTip
      className={rangeStyle}
      value={[this.state.initialTime, this.state.finalTime]}
      step={5}
      onChange={this.handleChange}
      min={this.initialTimeAbsolute}
      max={this.finalTimeAbsolute}
      tipProps={{ visible: true, overlayClassName: tipStyle, placement: 'bottom' }}
      tipFormatter={TimeFormatter.format}
      allowCross={false}
      pushable={this.props.minInterval}
    />;
  }

}
...