pouncejs
Version:
A collection of UI components from Panther labs
54 lines • 1.59 kB
JavaScript
import React from 'react';
import Card from '../Card';
import { useTransition, animated } from 'react-spring';
import useDropdownAlignment from '../Dropdown/useDropdownAlignment';
import Popover from '@reach/popover';
var AnimatedPopover = animated(Popover);
var DateWrapper = /*#__PURE__*/React.forwardRef(function DateWrapper(_ref, ref) {
var children = _ref.children,
isExpanded = _ref.isExpanded,
targetRef = _ref.targetRef,
_ref$alignment = _ref.alignment,
alignment = _ref$alignment === void 0 ? 'left' : _ref$alignment;
var position = useDropdownAlignment({
alignment: alignment
});
var transitions = useTransition(isExpanded, null, {
from: {
transform: 'translate3d(0, -10px, 0)',
opacity: 0,
pointerEvents: 'none'
},
enter: {
transform: 'translate3d(0, 0, 0)',
opacity: 1,
pointerEvents: 'auto'
},
leave: {
transform: 'translate3d(0, -10px, 0)',
opacity: 0,
pointerEvents: 'none'
},
config: {
duration: 250
}
});
return /*#__PURE__*/React.createElement(React.Fragment, null, transitions.map(function (_ref2) {
var item = _ref2.item,
key = _ref2.key,
styles = _ref2.props;
return item && /*#__PURE__*/React.createElement(AnimatedPopover, {
targetRef: targetRef,
position: position,
key: key,
style: styles,
as: 'div'
}, /*#__PURE__*/React.createElement(Card, {
ref: ref,
boxShadow: "dark300",
my: 4,
zIndex: 10
}, children));
}));
});
export default DateWrapper;