3

I have a <List /> component where I want to add an initial padding-top to the wrapper. Since all the elements are absolute positioned I found this solution but I wonder if it's right or is there another solution less expensive:

const rowRenderer = ({ index, key, style, isScrolling }) => {
// ...

return (
  <ul key={key}
    style={{
      ...style,
      top: style.top + 50,
    }}>
    { items.map(itemRenderer) }
  </ul>
)

}

The related part is the style prop.

Lionel T
  • 1,559
  • 1
  • 13
  • 30
  • What do you mean by _less expensive_? And why do all the elements have `absolute` positioning? – Pineda Feb 07 '17 at 17:11
  • @Pineda `absolute` positioned elems is a core behaviour of `react-virtualized` when render items. Take a look here https://bvaughn.github.io/connect-tech-2016/#/8/5 – Lionel T Feb 07 '17 at 17:18
  • 1
    with _less expensive_ I mean if there is an API method or something to avoid _spread_ the calculated `style` and re-calculate with my desired `50px` of `padding` – Lionel T Feb 07 '17 at 17:20

1 Answers1

10

You can avoid the unnecessary object-creation and spread operation by moving the padding to the level of the List, eg:

<List
  {...props}
  style={{
    paddingTop: '50px',
    boxSizing: 'content-box',
  }}
  containerStyle={{
    position: 'relative',
    overflow: 'visible'
  }}
/>

See an example of this here: https://plnkr.co/edit/vNHDmpEY2bjQbCup4xsG?p=preview

Alexander Nied
  • 12,804
  • 4
  • 25
  • 45
bvaughn
  • 13,300
  • 45
  • 46
  • Thanks @brianvaughn for the reply (and for the awesome `react-virtualized` definitely) and sorry the delay. I tried this solution before but didn't work. I created [this plunker](https://plnkr.co/edit/fDKEChE2zhQS37W8IZg2?p=preview) to illustrate. See the `box-shadow` showed when each _item_ is hovered and how cuts the top side of the first row. – Lionel T Feb 08 '17 at 10:49
  • Take a look instead in [this plunker](https://plnkr.co/edit/NmpBuCPSplv9UBTydJsm?p=preview) where I'm applying the solution exposed in the initial question. There's a subtle difference, looking the first _row_ when `:hover` an item – Lionel T Feb 08 '17 at 10:58
  • 1
    Maybe something more like this instead? https://plnkr.co/edit/vNHDmpEY2bjQbCup4xsG?p=preview – bvaughn Feb 08 '17 at 18:13
  • yup! thanks @brianvaughn, that's it! `containerStyle` ftw – Lionel T Feb 09 '17 at 08:50
  • I'm seeing again the [List docs](https://github.com/bvaughn/react-virtualized/blob/master/docs/List.md) and realising that there isn't this `prop` in the table, but it is in the `Grid` one. Looking into the `List` [source](https://github.com/bvaughn/react-virtualized/blob/master/source/List/List.js#L144-L156) I understand that inherits this (and other) props. Maybe could be useful a little advice/tip, could make a PR in case. Thanks again for the great stuff you are doing – Lionel T Feb 09 '17 at 08:58
  • I welcome PRs that improve the docs. If you have ideas- please feel free to submit one. – bvaughn Feb 09 '17 at 18:08
  • Edited my answer to include the more recent Plnkr approach. – bvaughn Feb 09 '17 at 18:10
  • Doesn't work - when the list is scrolled, elements on top of the list get clipped earlier than they should. – riv Dec 07 '18 at 14:40