Реагировать Поппер. Как переместить элемент относительно родителя? - PullRequest
Новая
       11

Реагировать Поппер. Как переместить элемент относительно родителя?

0 голосов
/ 15 января 2019

Я пытаюсь переместить Popper, который находится внутри родительского компонента. Как я могу это сделать?

Я пытался использовать свойство смещения в объекте модификаторов. e.g.:

offset: {
  offset: 20,
}

Но смещение только перемещает Поппера в одном направлении. Если размещение = {'top' || 'bottom'} => он перемещается вправо и влево, если размещение = {'вправо' || 'left'} => он перемещается сверху и снизу. 

const Layer = ({
  children,
  align,
  inner = true,
  parent,
  portal,
}) => (
  <Manager>
    <Popper
      placement={align}
      modifiers={{
        inner: {
          enabled: inner,
        },
      }}
      referenceElement={parent}
    >
      {({ ref, style, placement }) => (
        <div
          ref={ref}
          data-placement={placement}
          style={style}
        >
          {console.log(style)}
          {children}
        </div>
      )}
    </Popper>
  </Manager>
)

1 Ответ

0 голосов
/ 18 января 2019

Я решил это так. Добавлены реквизиты topOffset и leftOffset для потомков поппера и используется синтаксис распространения. Не думайте, что это самое чистое решение. 

const Layer = ({
  children,
  align,
  inner = true,
  parent,
  portal,
  topOffset,
  leftOffset,
}) => (
  <Manager>
    <Popper
      placement={align}
      modifiers={{
        inner: {
          enabled: inner,
        },
      }}
      referenceElement={parent}
    >
      {({ ref, style, placement }) => (
        <div
          ref={ref}
          data-placement={placement}
          style={{
            ...style,
            top: style.top + topOffset,
            left: style.left  + leftOffset,
          }}
        >
          {console.log(style)}
          {children}
        </div>
      )}
    </Popper>
  </Manager>
)
...