fix using changed attribute, use Panel element
This commit is contained in:
parent
d546157c93
commit
55c1ead17d
|
@ -8,7 +8,7 @@ import {
|
|||
} from '../../events-displayer.js'
|
||||
|
||||
const { InspectorControls, useBlockProps } = wp.blockEditor
|
||||
const { PanelBody } = wp.components
|
||||
const { Panel, PanelBody } = wp.components
|
||||
const { useEffect } = wp.element
|
||||
const { __ } = wp.i18n
|
||||
|
||||
|
@ -16,11 +16,10 @@ const NAME = '<wordpress-name>'
|
|||
|
||||
export default ({ attributes, setAttributes }) => {
|
||||
let timer
|
||||
const { eventsCount, groupName } = attributes
|
||||
const blockProps = useBlockProps({
|
||||
className: NAME + '_events-list',
|
||||
})
|
||||
function reloadEventList() {
|
||||
function reloadEventList(eventsCount, groupName) {
|
||||
if (timer) {
|
||||
clearTimeout(timer)
|
||||
}
|
||||
|
@ -35,12 +34,7 @@ export default ({ attributes, setAttributes }) => {
|
|||
url += `&groupName=${groupName}`
|
||||
}
|
||||
await fetch(url)
|
||||
.then((response) => {
|
||||
if (!response.ok) {
|
||||
return Promise.reject('Network response was not OK.')
|
||||
}
|
||||
return response.text()
|
||||
})
|
||||
.then((response) => response.text())
|
||||
.then((data) => {
|
||||
const events = JSON.parse(data)
|
||||
displayEvents({
|
||||
|
@ -57,51 +51,51 @@ export default ({ attributes, setAttributes }) => {
|
|||
}, 500)
|
||||
}
|
||||
useEffect(() => {
|
||||
reloadEventList()
|
||||
reloadEventList(attributes.eventsCount, attributes.groupName)
|
||||
}, [])
|
||||
function updateEventsCount(event) {
|
||||
// console.log('new value: ', event.target.value) // TODO
|
||||
let newValue = Number(event.target.value)
|
||||
if (newValue < 1) newValue = 1
|
||||
setAttributes({ eventsCount: newValue })
|
||||
reloadEventList()
|
||||
reloadEventList(newValue, attributes.groupName)
|
||||
}
|
||||
function updateGroupName(event) {
|
||||
// console.log('new value: ', event.target.value) // TODO
|
||||
// TODO not triggered on pasting only
|
||||
setAttributes({ groupName: event.target.value })
|
||||
reloadEventList()
|
||||
const newValue = event.target.value
|
||||
setAttributes({ groupName: newValue })
|
||||
reloadEventList(attributes.eventsCount, newValue)
|
||||
}
|
||||
return [
|
||||
<InspectorControls>
|
||||
<PanelBody title={__('Events List Settings', '<wordpress-name>')}>
|
||||
<label
|
||||
className="components-base-control__label"
|
||||
htmlFor={NAME + '_events-count'}
|
||||
>
|
||||
{__('Number of events to show', '<wordpress-name>')}
|
||||
</label>
|
||||
<input
|
||||
className="components-text-control__input"
|
||||
type="number"
|
||||
value={eventsCount}
|
||||
onChange={updateEventsCount}
|
||||
id={NAME + '_events-count'}
|
||||
/>
|
||||
<label
|
||||
className="components-base-control__label"
|
||||
htmlFor={NAME + '_group-name'}
|
||||
>
|
||||
{__('Group name (optional)', '<wordpress-name>')}
|
||||
</label>
|
||||
<input
|
||||
className="components-text-control__input"
|
||||
type="text"
|
||||
value={groupName}
|
||||
onChange={updateGroupName}
|
||||
id={NAME + '_group-name'}
|
||||
/>
|
||||
</PanelBody>
|
||||
<Panel>
|
||||
<PanelBody title={__('Events List Settings', '<wordpress-name>')}>
|
||||
<label
|
||||
className="components-base-control__label"
|
||||
htmlFor={NAME + '_events-count'}
|
||||
>
|
||||
{__('Number of events to show', '<wordpress-name>')}
|
||||
</label>
|
||||
<input
|
||||
className="components-text-control__input"
|
||||
type="number"
|
||||
value={attributes.eventsCount}
|
||||
onChange={updateEventsCount}
|
||||
id={NAME + '_events-count'}
|
||||
/>
|
||||
<label
|
||||
className="components-base-control__label"
|
||||
htmlFor={NAME + '_group-name'}
|
||||
>
|
||||
{__('Group name (optional)', '<wordpress-name>')}
|
||||
</label>
|
||||
<input
|
||||
className="components-text-control__input"
|
||||
type="text"
|
||||
value={attributes.groupName}
|
||||
onChange={updateGroupName}
|
||||
id={NAME + '_group-name'}
|
||||
/>
|
||||
</PanelBody>
|
||||
</Panel>
|
||||
</InspectorControls>,
|
||||
<div {...blockProps}>
|
||||
<div className="general-error" style={{ display: 'none' }}>
|
||||
|
|
Loading…
Reference in New Issue