Появление блока при onMouseMove, React.js

137

29 октября 2019, 23:50

Дан следующий код на React.

export default class CallPage extends Component {
  state = {
    isVisible: false,
    prevBarId: "toolbar-hide",
    prevBoxId: "toolbox-hide",
    newBarId: "toolbar",
    newBoxId: "toolbox",
  };
  static defaultProps = {
    onMouseMove: () => {},
  };
  showToolElement = () => {
    this.setState(
      ({ isVisible }) => ({
        isVisible: !isVisible,
      }),
      () => {
        this.props.onMouseMove(this.state.isVisible);
      },
      console.log("it works"),
    );
  };
  render() {
    const isVisibleBar = this.state.isVisible
      ? this.state.newBarId
      : this.state.prevBarId;
    const isVisibleBox = this.state.isVisible
      ? this.state.newBoxId
      : this.state.prevBoxId;
    return (
      <div id="logged">
        <div id="session" onMouseMove={this.showToolElement}>
          <ToolBar visible={isVisibleBar} />
          <VideoHolder />
          <ToolBox visible={isVisibleBox} />
        </div>
      </div>
    );
  }

Суть в том, что при движении мыши он должен показывать невидимые блоки, а потом через заданное количество времени скрывать их снова. На данном этапе блоки появляются и исчезают на каждой новой координате мыши. Подскажите, как правильно прописать функцию showToolElement и setState, чтобы все работало как надо. Желательно, используя throttling.

Answer 1

Возможно, вам подойдет такое решение (можно использовать собственный debounce, можно установить lodash (npm i --save lodash), откуда подключить уже готовую функцию. В данном случае можно использовать опцию "leading": true, что позволит показать тулбар при первом срабатывании события, и скрыть только когда событие перестанет вызываться) :

function debounce(f, ms,leading) {
  let timer = null;
  return function (...args) {
    const onComplete = () => {
      f.apply(this, args);
      timer = null;
    }
    if(timer === null && leading) f.apply(this, args);
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(onComplete, ms);
  };
}
export default class CallPage extends Component {
  state = {
    isVisible: false,
    prevBarId: "toolbar-hide",
    prevBoxId: "toolbox-hide",
    newBarId: "toolbar",
    newBoxId: "toolbox",
  };
  static defaultProps = {
    onMouseMove: () => { },
  };
  showToolElement = debounce(() => {
    this.setState({
      isVisible: !this.state.isVisible
    })
  }, 5000, true);
  render() {
    const isVisibleBar = this.state.isVisible
      ? this.state.newBarId
      : this.state.prevBarId;
    const isVisibleBox = this.state.isVisible
      ? this.state.newBoxId
      : this.state.prevBoxId;
    return (
      <div id="logged">
        <div id="session" onMouseMove={this.showToolElement}>
          <ToolBar visible={isVisibleBar} />
          <VideoHolder />
          <ToolBox visible={isVisibleBox} />
        </div>
      </div>
    );
  }
}

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как вставить ссылку в html?

Есть тег [product_review_link] вместо которого в html шаблоне письма сайтом рассылки должна подставляться ссылка на сайт, помогите пожалуйста мне её туда...

137

HTML