159 lines
3.4 KiB
JavaScript
159 lines
3.4 KiB
JavaScript
import {
|
|
createPortal,
|
|
useState,
|
|
useRef,
|
|
Fragment,
|
|
createElement,
|
|
} from '@wordpress/element'
|
|
import classnames from 'classnames'
|
|
import { __ } from 'ct-i18n'
|
|
|
|
import {
|
|
DateTimePicker,
|
|
usePopoverMaker,
|
|
OutsideClickHandler,
|
|
} from 'blocksy-options'
|
|
|
|
const ExpireCondition = ({ onChange, condition }) => {
|
|
const [currentTab, setCurrentTab] = useState('start')
|
|
const inputRef = useRef()
|
|
const [isOpen, setIsOpen] = useState(false)
|
|
|
|
const { styles, popoverProps } = usePopoverMaker({
|
|
ref: inputRef,
|
|
defaultHeight: 228,
|
|
shouldCalculate: true,
|
|
})
|
|
|
|
const start = condition.payload.start || new Date()
|
|
const end = condition.payload.end || new Date()
|
|
|
|
let preview = [wp.date.format('j/n/Y', start), wp.date.format('j/n/Y', end)]
|
|
|
|
if (preview[0] === preview[1]) {
|
|
preview = [
|
|
wp.date.format(wp.date.getSettings().formats.time, start),
|
|
wp.date.format(wp.date.getSettings().formats.time, end),
|
|
]
|
|
}
|
|
|
|
return (
|
|
<Fragment>
|
|
<OutsideClickHandler
|
|
className="ct-select-input"
|
|
wrapperProps={{
|
|
ref: inputRef,
|
|
role: 'combobox',
|
|
'aria-expanded': isOpen,
|
|
'aria-haspopup': 'listbox',
|
|
onClick: () => {
|
|
setIsOpen(!isOpen)
|
|
},
|
|
}}
|
|
onOutsideClick={(e) => {
|
|
if (e.target.closest('.ct-select-dropdown')) {
|
|
return
|
|
}
|
|
|
|
setIsOpen(false)
|
|
}}>
|
|
<input
|
|
value={preview.join(' - ')}
|
|
onChange={() => {}}
|
|
readOnly
|
|
/>
|
|
</OutsideClickHandler>
|
|
|
|
{isOpen &&
|
|
createPortal(
|
|
<div
|
|
className={classnames(
|
|
'ct-select-dropdown ct-date-time-picker-dropdown',
|
|
{
|
|
'ct-fixed': true,
|
|
}
|
|
)}
|
|
{...popoverProps}
|
|
style={styles}>
|
|
<div className="ct-start-end-date-switcher components-button-group">
|
|
{['start', 'end'].map((tab) => {
|
|
return (
|
|
<button
|
|
key={tab}
|
|
className={classnames(
|
|
'components-button',
|
|
{
|
|
'is-primary':
|
|
tab === currentTab,
|
|
}
|
|
)}
|
|
onClick={() => {
|
|
setCurrentTab(tab)
|
|
}}>
|
|
{tab === 'start'
|
|
? 'Start Date'
|
|
: 'Expiration Date'}
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
|
|
<DateTimePicker
|
|
value={
|
|
(condition.payload || {})[currentTab] ||
|
|
new Date()
|
|
}
|
|
onChange={(date) => {
|
|
if (
|
|
currentTab === 'end' &&
|
|
new Date(date).getTime() <
|
|
(condition.payload.start
|
|
? new Date(
|
|
condition.payload.start
|
|
).getTime()
|
|
: new Date().getTime())
|
|
) {
|
|
date = condition.payload.start
|
|
|
|
alert(
|
|
__(
|
|
'The expiration date cannot be set earlier than the start date.',
|
|
'blocksy-companion'
|
|
)
|
|
)
|
|
}
|
|
|
|
if (
|
|
currentTab === 'start' &&
|
|
new Date(date).getTime() >
|
|
(condition.payload.end
|
|
? new Date(
|
|
condition.payload.end
|
|
).getTime()
|
|
: new Date().getTime())
|
|
) {
|
|
condition.payload.end = date
|
|
}
|
|
|
|
onChange({
|
|
...condition,
|
|
payload: {
|
|
...condition.payload,
|
|
...(!condition.payload.start
|
|
? { start }
|
|
: {}),
|
|
[currentTab]: date,
|
|
},
|
|
})
|
|
}}
|
|
/>
|
|
</div>,
|
|
|
|
document.body
|
|
)}
|
|
</Fragment>
|
|
)
|
|
}
|
|
|
|
export default ExpireCondition
|