Sha256: 65e189d15df237ed4f78408ba598f79874a90c4cb94a1d09454ce6c41bea9e58
Contents?: true
Size: 1.82 KB
Versions: 1878
Compression:
Stored size: 1.82 KB
Contents
import React, { useRef, useEffect, useState } from 'react'
import Card from '../../pb_card/_card'
import Flex from '../../pb_flex/_flex'
import FlexItem from '../../pb_flex/_flex_item'
import DatePicker from '../_date_picker'
const DatePickerPositionsElement = (props) => {
const cardRefTop = useRef(null),
cardRefBtm = useRef(null)
const [cardTop, setCardTop] = useState()
const [cardBtm, setCardBtm] = useState()
useEffect(() => {
setCardTop(cardRefTop.current)
setCardBtm(cardRefBtm.current)
}, [cardTop, cardBtm])
return (
<React.Fragment>
<div ref={cardRefTop}>
<Card
marginBottom="md"
>
{'👋 Datepicker will position from here based on ID.'}
</Card>
</div>
<Flex>
<FlexItem fixedSize="50%">
<DatePicker
label="Datepicker (opens on the right)"
pickerId="date-picker-position-element"
position="auto right"
positionElement={cardTop}
scrollContainer=".pb--page--content--main"
staticPosition={false}
{...props}
/>
</FlexItem>
</Flex>
<div ref={cardRefBtm}>
<Card
marginBottom="md"
>
{'👋 Datepicker will position from here based on class name.'}
</Card>
</div>
<Flex>
<FlexItem fixedSize="50%">
<DatePicker
label="Datepicker (opens on the right)"
pickerId="date-picker-position-element2"
position="auto right"
positionElement={cardBtm}
scrollContainer=".pb--page--content--main"
staticPosition={false}
{...props}
/>
</FlexItem>
</Flex>
</React.Fragment>
)
}
export default DatePickerPositionsElement
Version data entries
1,878 entries across 1,878 versions & 2 rubygems