mirror/lowdefy
2
0
Fork 0
mirror of https://github.com/lowdefy/lowdefy.git synced 2025-02-17 14:30:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(blocks-antd): Randomize popup dom element ids.

Browse Source
This commit is contained in:
Gervwyk 2024-10-23 19:10:48 +02:00
parent c742a08cb6
commit 3e574857cd
9 changed files with 34 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/late-cameras-roll.md Normal file
View File

@ -0,0 +1,5 @@
---
'@lowdefy/blocks-antd': patch
---
Bug fix: Randomize popup dom element ids to better attach on block reuse on page.

7
packages/plugins/blocks/blocks-antd/src/blocks/DateRangeSelector/DateRangeSelector.js
View File

@ -14,7 +14,7 @@
limitations under the License. limitations under the License.
*/ */
import React from 'react'; import React, { useState } from 'react';
import { DatePicker } from 'antd'; import { DatePicker } from 'antd';
import moment from 'moment'; import moment from 'moment';
import { blockDefaultProps } from '@lowdefy/block-utils'; import { blockDefaultProps } from '@lowdefy/block-utils';
@ -42,6 +42,7 @@ const DateRangeSelector = ({
validation, validation,
value, value,
}) => { }) => {
const [elementId] = useState((0 | (Math.random() * 9e2)) + 1e2);
return ( return (
<Label <Label
blockId={blockId} blockId={blockId}
@ -53,7 +54,7 @@ const DateRangeSelector = ({
content={{ content={{
content: () => ( content: () => (
<div className={methods.makeCssClass({ width: '100%' })}> <div className={methods.makeCssClass({ width: '100%' })}>
<div id={`${blockId}_popup`} /> <div id={`${blockId}_${elementId}_popup`} />
<RangePicker <RangePicker
id={`${blockId}_input`} id={`${blockId}_input`}
allowClear={properties.allowClear !== false} allowClear={properties.allowClear !== false}
@ -63,7 +64,7 @@ const DateRangeSelector = ({
disabled={properties.disabled || loading} disabled={properties.disabled || loading}
disabledDate={disabledDate(properties.disabledDates)} disabledDate={disabledDate(properties.disabledDates)}
format={properties.format ?? 'YYYY-MM-DD'} format={properties.format ?? 'YYYY-MM-DD'}
getPopupContainer={() => document.getElementById(`${blockId}_popup`)} getPopupContainer={() => document.getElementById(`${blockId}_${elementId}_popup`)}
separator={properties.separator ?? '~'} separator={properties.separator ?? '~'}
size={properties.size} size={properties.size}
status={validation.status} status={validation.status}

7
packages/plugins/blocks/blocks-antd/src/blocks/DateSelector/DateSelector.js
View File

@ -14,7 +14,7 @@
limitations under the License. limitations under the License.
*/ */
import React from 'react'; import React, { useState } from 'react';
import moment from 'moment'; import moment from 'moment';
import { type } from '@lowdefy/helpers'; import { type } from '@lowdefy/helpers';
import { blockDefaultProps } from '@lowdefy/block-utils'; import { blockDefaultProps } from '@lowdefy/block-utils';
@ -34,6 +34,7 @@ const DateSelector = ({
validation, validation,
value, value,
}) => { }) => {
const [elementId] = useState((0 | (Math.random() * 9e2)) + 1e2);
return ( return (
<Label <Label
blockId={blockId} blockId={blockId}
@ -45,7 +46,7 @@ const DateSelector = ({
content={{ content={{
content: () => ( content: () => (
<div className={methods.makeCssClass({ width: '100%' })}> <div className={methods.makeCssClass({ width: '100%' })}>
<div id={`${blockId}_popup`} /> <div id={`${blockId}_${elementId}_popup`} />
<DatePicker <DatePicker
id={`${blockId}_input`} id={`${blockId}_input`}
allowClear={properties.allowClear !== false} allowClear={properties.allowClear !== false}
@ -54,7 +55,7 @@ const DateSelector = ({
className={methods.makeCssClass([{ width: '100%' }, properties.inputStyle])} className={methods.makeCssClass([{ width: '100%' }, properties.inputStyle])}
disabled={properties.disabled || loading} disabled={properties.disabled || loading}
format={properties.format ?? 'YYYY-MM-DD'} format={properties.format ?? 'YYYY-MM-DD'}
getPopupContainer={() => document.getElementById(`${blockId}_popup`)} getPopupContainer={() => document.getElementById(`${blockId}_${elementId}_popup`)}
placeholder={properties.placeholder ?? 'Select Date'} placeholder={properties.placeholder ?? 'Select Date'}
showToday={properties.showToday} showToday={properties.showToday}
size={properties.size} size={properties.size}

7
packages/plugins/blocks/blocks-antd/src/blocks/DateTimeSelector/DateTimeSelector.js
View File

@ -14,7 +14,7 @@
limitations under the License. limitations under the License.
*/ */
import React from 'react'; import React, { useState } from 'react';
import { DatePicker } from 'antd'; import { DatePicker } from 'antd';
import moment from 'moment'; import moment from 'moment';
import { type } from '@lowdefy/helpers'; import { type } from '@lowdefy/helpers';
@ -34,6 +34,7 @@ const DateTimeSelector = ({
validation, validation,
value, value,
}) => { }) => {
const [elementId] = useState((0 | (Math.random() * 9e2)) + 1e2);
const timeUnit = !type.isString(properties.timeFormat) const timeUnit = !type.isString(properties.timeFormat)
? 'minute' ? 'minute'
: properties.timeFormat === 'HH:mm:ss' : properties.timeFormat === 'HH:mm:ss'
@ -63,7 +64,7 @@ const DateTimeSelector = ({
content={{ content={{
content: () => ( content: () => (
<div className={methods.makeCssClass({ width: '100%' })}> <div className={methods.makeCssClass({ width: '100%' })}>
<div id={`${blockId}_popup`} /> <div id={`${blockId}_${elementId}_popup`} />
<DatePicker <DatePicker
id={`${blockId}_input`} id={`${blockId}_input`}
allowClear={properties.allowClear !== false} allowClear={properties.allowClear !== false}
@ -73,7 +74,7 @@ const DateTimeSelector = ({
disabled={properties.disabled || loading} disabled={properties.disabled || loading}
disabledDate={disabledDate(properties.disabledDates)} disabledDate={disabledDate(properties.disabledDates)}
format={properties.format ?? 'YYYY-MM-DD HH:mm'} format={properties.format ?? 'YYYY-MM-DD HH:mm'}
getPopupContainer={() => document.getElementById(`${blockId}_popup`)} getPopupContainer={() => document.getElementById(`${blockId}_${elementId}_popup`)}
placeholder={properties.placeholder ?? 'Select Date & Time'} placeholder={properties.placeholder ?? 'Select Date & Time'}
showNow={properties.showNow} showNow={properties.showNow}
showToday={properties.showToday} showToday={properties.showToday}

7
packages/plugins/blocks/blocks-antd/src/blocks/MonthSelector/MonthSelector.js
View File

@ -14,7 +14,7 @@
limitations under the License. limitations under the License.
*/ */
import React from 'react'; import React, { useState } from 'react';
import { DatePicker } from 'antd'; import { DatePicker } from 'antd';
import moment from 'moment'; import moment from 'moment';
import { blockDefaultProps } from '@lowdefy/block-utils'; import { blockDefaultProps } from '@lowdefy/block-utils';
@ -36,6 +36,7 @@ const MonthSelector = ({
validation, validation,
value, value,
}) => { }) => {
const [elementId] = useState((0 | (Math.random() * 9e2)) + 1e2);
return ( return (
<Label <Label
blockId={blockId} blockId={blockId}
@ -47,7 +48,7 @@ const MonthSelector = ({
content={{ content={{
content: () => ( content: () => (
<div className={methods.makeCssClass({ width: '100%' })}> <div className={methods.makeCssClass({ width: '100%' })}>
<div id={`${blockId}_popup`} /> <div id={`${blockId}_${elementId}_popup`} />
<MonthPicker <MonthPicker
id={`${blockId}_input`} id={`${blockId}_input`}
allowClear={properties.allowClear !== false} allowClear={properties.allowClear !== false}
@ -57,7 +58,7 @@ const MonthSelector = ({
disabled={properties.disabled || loading} disabled={properties.disabled || loading}
disabledDate={disabledDate(properties.disabledDates)} disabledDate={disabledDate(properties.disabledDates)}
format={properties.format ?? 'YYYY-MM'} format={properties.format ?? 'YYYY-MM'}
getPopupContainer={() => document.getElementById(`${blockId}_popup`)} getPopupContainer={() => document.getElementById(`${blockId}_${elementId}_popup`)}
placeholder={properties.placeholder ?? 'Select Month'} placeholder={properties.placeholder ?? 'Select Month'}
size={properties.size} size={properties.size}
status={validation.status} status={validation.status}

3
packages/plugins/blocks/blocks-antd/src/blocks/MultipleSelector/MultipleSelector.js
View File

@ -55,6 +55,7 @@ const MultipleSelector = ({
value, value,
}) => { }) => {
const [fetchState, setFetch] = useState(false); const [fetchState, setFetch] = useState(false);
const [elementId] = useState((0 | (Math.random() * 9e2)) + 1e2);
const uniqueValueOptions = getUniqueValues(properties.options ?? []); const uniqueValueOptions = getUniqueValues(properties.options ?? []);
return ( return (
<Label <Label
@ -74,7 +75,7 @@ const MultipleSelector = ({
bordered={properties.bordered} bordered={properties.bordered}
className={methods.makeCssClass([{ width: '100%' }, properties.inputStyle])} className={methods.makeCssClass([{ width: '100%' }, properties.inputStyle])}
disabled={properties.disabled || loading} disabled={properties.disabled || loading}
getPopupContainer={() => document.getElementById(`${blockId}_popup`)} getPopupContainer={() => document.getElementById(`${blockId}_${elementId}_popup`)}
mode="multiple" mode="multiple"
tagRender={ tagRender={
properties.renderTags && properties.renderTags &&

7
packages/plugins/blocks/blocks-antd/src/blocks/Popover/Popover.js
View File

@ -14,21 +14,22 @@
limitations under the License. limitations under the License.
*/ */
import React from 'react'; import React, { useState } from 'react';
import { blockDefaultProps } from '@lowdefy/block-utils'; import { blockDefaultProps } from '@lowdefy/block-utils';
import { Popover } from 'antd'; import { Popover } from 'antd';
const PopoverBlock = ({ blockId, content, methods, properties }) => { const PopoverBlock = ({ blockId, content, methods, properties }) => {
const [elementId] = useState((0 | (Math.random() * 9e2)) + 1e2);
return ( return (
<Popover <Popover
id={blockId} id={blockId}
{...properties} {...properties}
content={content.popover && content.popover()} content={content.popover && content.popover()}
onOpenChange={() => methods.triggerEvent({ name: 'onOpenChange' })} onOpenChange={() => methods.triggerEvent({ name: 'onOpenChange' })}
getPopupContainer={() => document.getElementById(`${blockId}_popup`)} getPopupContainer={() => document.getElementById(`${blockId}_${elementId}_popup`)}
> >
{content.content && content.content()} {content.content && content.content()}
<div id={`${blockId}_popup`} /> <div id={`${blockId}_${elementId}_popup`} />
</Popover> </Popover>
); );
}; };

5
packages/plugins/blocks/blocks-antd/src/blocks/Selector/Selector.js
View File

@ -37,6 +37,7 @@ const Selector = ({
value, value,
}) => { }) => {
const [fetchState, setFetch] = useState(false); const [fetchState, setFetch] = useState(false);
const [elementId] = useState((0 | (Math.random() * 9e2)) + 1e2);
const uniqueValueOptions = getUniqueValues(properties.options || []); const uniqueValueOptions = getUniqueValues(properties.options || []);
return ( return (
<Label <Label
@ -49,14 +50,14 @@ const Selector = ({
content={{ content={{
content: () => ( content: () => (
<div className={methods.makeCssClass({ width: '100%' })}> <div className={methods.makeCssClass({ width: '100%' })}>
<div id={`${blockId}_popup`} /> <div id={`${blockId}_${elementId}_popup`} />
<Select <Select
id={`${blockId}_input`} id={`${blockId}_input`}
bordered={properties.bordered} bordered={properties.bordered}
className={methods.makeCssClass([{ width: '100%' }, properties.inputStyle])} className={methods.makeCssClass([{ width: '100%' }, properties.inputStyle])}
mode="single" mode="single"
autoFocus={properties.autoFocus} autoFocus={properties.autoFocus}
getPopupContainer={() => document.getElementById(`${blockId}_popup`)} getPopupContainer={() => document.getElementById(`${blockId}_${elementId}_popup`)}
disabled={properties.disabled || loading} disabled={properties.disabled || loading}
placeholder={get(properties, 'placeholder', { default: 'Select item' })} placeholder={get(properties, 'placeholder', { default: 'Select item' })}
status={validation.status} status={validation.status}

7
packages/plugins/blocks/blocks-antd/src/blocks/WeekSelector/WeekSelector.js
View File

@ -14,7 +14,7 @@
limitations under the License. limitations under the License.
*/ */
import React from 'react'; import React, { useState } from 'react';
import { blockDefaultProps } from '@lowdefy/block-utils'; import { blockDefaultProps } from '@lowdefy/block-utils';
import { DatePicker } from 'antd'; import { DatePicker } from 'antd';
import { type } from '@lowdefy/helpers'; import { type } from '@lowdefy/helpers';
@ -36,6 +36,7 @@ const WeekSelector = ({
validation, validation,
value, value,
}) => { }) => {
const [elementId] = useState((0 | (Math.random() * 9e2)) + 1e2);
return ( return (
<Label <Label
blockId={blockId} blockId={blockId}
@ -47,7 +48,7 @@ const WeekSelector = ({
content={{ content={{
content: () => ( content: () => (
<div className={methods.makeCssClass({ width: '100%' })}> <div className={methods.makeCssClass({ width: '100%' })}>
<div id={`${blockId}_popup`} /> <div id={`${blockId}_${elementId}_popup`} />
<WeekPicker <WeekPicker
id={`${blockId}_input`} id={`${blockId}_input`}
allowClear={properties.allowClear !== false} allowClear={properties.allowClear !== false}
@ -57,7 +58,7 @@ const WeekSelector = ({
disabled={properties.disabled || loading} disabled={properties.disabled || loading}
disabledDate={disabledDate(properties.disabledDates)} disabledDate={disabledDate(properties.disabledDates)}
format={properties.format ?? 'YYYY-wo'} format={properties.format ?? 'YYYY-wo'}
getPopupContainer={() => document.getElementById(`${blockId}_popup`)} getPopupContainer={() => document.getElementById(`${blockId}_${elementId}_popup`)}
placeholder={properties.placeholder ?? 'Select Week'} placeholder={properties.placeholder ?? 'Select Week'}
size={properties.size} size={properties.size}
status={validation.status} status={validation.status}