image


Наверное, каждому фронтенд-разработчику доводилось делать разного рода выпадайки или всплывающие подсказки. И почти всегда настает момент, когда такую штуку надо отобразить внутри элемента с overflow: hidden. Настал такой момент и в SmartProgress.


Мы на SmartProgress используем React для разработки интерфейсов и нам очень хотелось найти react-way решение. На помощь нам спешат порталы.



Портал — компонент, который рендерит свое содержимое в другую часть DOM, например в конец <body>. Такое поведение позволяет отображать элементы за пределами блоков с, например, overflow: hidden, но при этом минимально менять дерево компонентов.


Обычно порталы используют для модальных окон (что тоже весьма удобно), но мы немного модифицируем идею и приспособим её для наших нужд. Нам нужно поведение похожее на блок с position: absolute и margin-top/margin-left. Назовем этот компонент RelativePortal.


Удобно определять интерфейс компонента и только потом описывать его реализацию.
Например, мы имеем такой код:


<div className="calendarLink">
  <a className="calendarLink__trigger">Выбрать дату</a>
  {isOpen && <CalendarDropdown />}
</div>

При использовании портала, код изменится на такой:


<div className="calendarLink">
  <a className="calendarLink__trigger">Выбрать дату</a>
  <RelativePortal left="0" top="0">
    {isOpen && <CalendarDropdown />}
  </RelativePortal>
</div>

Теперь можно приступить к делу. Каждый шаг я буду иллюстрировать примером на jsfiddle. Вот начальное состояние, при котором видно проблему — https://jsfiddle.net/Sunify/1k18wxm1/1/.


Как сделать портал (осторожно — ES6!)


Метод render у портала возвращает null, так мы ничего не рендерим в месте вызова компонента. Вместо этого мы будем использовать ReactDOM.render в одном из lifecycle-методов компонента, например в componentDidUpdate.


class RelativePortal extends React.Component {
  ...

  // Возвращаем null чтобы ничего не рендерить на месте вызова компонента
  render() {
    return null;
  }

  // А тут мы рендерим в наш портал
  componentDidUpdate() {
    ReactDOM.render(
      <div {...this.props}>{this.props.children}</div>,
      this.node
    );
  }

  ...
}

Полдела сделано, но сейчас наша выпадайка отображается внизу страницы (https://jsfiddle.net/Sunify/kr8hehca/) — надо это исправить!


class RelativePortal extends React.Component {
  ...
  // Рендерим инлайновый элемент, чтобы React.findDOMNode(this) не возвращал null
  render() {
    return <span />;
  }

  // Добавляем обработчик на событие ресайза для обновления координат
  componentDidMount() {
    this.handleResize = () => {
      const rect = React.findDOMNode(this).getBoundingClientRect();
      const left = window.scrollX + rect.left;
      const top = window.scrollY + rect.top;

      if(top !== this.state.top || left !== this.state.left) {
        this.setState({ left, top });
      }
    };
    window.addEventListener('resize', this.handleResize);
    this.handleResize();
  }

  // А тут мы рендерим в портал и позиционируем наш элемент по правильным координатам
  componentDidUpdate() {
    ReactDOM.render(
      <div
        {...this.props}
        style={{
          position: 'absolute',
          top: this.state.top + this.props.top,
          left: this.state.left + this.props.left
        }}
      >
        {this.props.children}
      </div>,
      this.node
    );
  }
  ...
}

Теперь выпадайка отображается где нам и нужно было и у нас есть универсальный компонент для такого рода задач.
https://jsfiddle.net/Sunify/4fmdugrr/


У такого метода есть очевидные достоинства: он работает, у него минимальный интерфейс и он универсален — мы можем завернуть в RelativePortal что угодно.


Но у него есть и существенный недостаток — мы теряем каскад css. У нас не наследуются шрифты, цвета и т.д. Не работает :hover — состояние наведения приходится хранить в состоянии компонента. Например, так — https://jsfiddle.net/Sunify/nz7wyee3. Для нас это не критично, поэтому такое решение нас устраивает.


Мы активно используем такой компонент и разместили его в npm. Пользуйтесь!