It'd be nice if `align` took an array, to match `positions`

[neoncube2]

When my popover is positioned as top or bottom, I'd like for align to be end, but when it's positioned as left or right, I'd like for it to be center.

I can set align="end", but then if the popover is shifted to the left position, I don't have an easy way to change align to be center:

<Popover
  isOpen={true}
  positions={['bottom', 'left']}
  align="end"
  content={<div>example</div>}
>
  Click me
</Popover>

I think it'd be nice if align could also take an array of alignments, which would automatically match with values in positions:

<Popover
  isOpen={true}
  positions={['bottom', 'left']}
  align={['end', 'center']}
  content={<div>example</div>}
>
  Click me
</Popover>

[neoncube2]

I guess I need to be able to set transform to different values depending on which position is being used, too. Perhaps align and transform could optionally take a function?

<Popover
  isOpen={true}
  positions={['bottom', 'left']}
  align={newPosition => newPosition === 'bottom' ? 'end' : 'center'}
  transform={newPosition => ...}
  content={<div>example</div>}
>
  Click me
</Popover>

[alexkatz]

This is a great idea, and something I will likely implement for the next release. Thanks for sharing. I'll post the release here when I get around to it. If you'd like to make a PR for it in the meantime, feel free.

[neoncube2]

Yay, thanks! :D

I took a stab at this: #207 :)

I just passed position to the function. Not sure if it'd make sense to pass more data, like when a function is passed to transform?