mirror/lowdefy
2
0
Fork 0
mirror of https://github.com/lowdefy/lowdefy.git synced 2024-11-21 01:14:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1856 from lowdefy/fix-popups

Browse Source 
Randomize popup dom element ids.
This commit is contained in:
Sam 2024-10-24 07:11:29 +00:00 committed by GitHub
commit 2d1dfa08cd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
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.
*/
import React from 'react';
import React, { useState } from 'react';
import { DatePicker } from 'antd';
import moment from 'moment';
import { blockDefaultProps } from '@lowdefy/block-utils';
@ -42,6 +42,7 @@ const DateRangeSelector = ({
validation,
value,
}) => {
const [elementId] = useState((0 | (Math.random() * 9e2)) + 1e2);
return (
<Label
blockId={blockId}
@ -53,7 +54,7 @@ const DateRangeSelector = ({
content={{
content: () => (
<div className={methods.makeCssClass({ width: '100%' })}>
<div id={`${blockId}_popup`} />
<div id={`${blockId}_${elementId}_popup`} />
<RangePicker
id={`${blockId}_input`}
allowClear={properties.allowClear !== false}
@ -63,7 +64,7 @@ const DateRangeSelector = ({
disabled={properties.disabled || loading}
disabledDate={disabledDate(properties.disabledDates)}
format={properties.format ?? 'YYYY-MM-DD'}
getPopupContainer={() => document.getElementById(`${blockId}_popup`)}
getPopupContainer={() => document.getElementById(`${blockId}_${elementId}_popup`)}
separator={properties.separator ?? '~'}
size={properties.size}
status={validation.status}

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

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

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

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

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

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

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

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

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

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

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

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

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

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