fix: fix collapsed panels not working when clicked (#2600)

* refactor: rename

* fix: fix collapsed panels not working when clicked
This commit is contained in:
被雨水过滤的空气-Rain 2023-09-06 11:11:35 +08:00 committed by GitHub
parent eeb3adf928
commit 22f681024d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 40 additions and 41 deletions

View File

@ -1,5 +1,5 @@
import { observer, RecursionField, useField, useFieldSchema, useForm } from '@formily/react'; import { observer, RecursionField, useField, useFieldSchema, useForm } from '@formily/react';
import { App, Button } from 'antd'; import { App, Button, Popover } from 'antd';
import classnames from 'classnames'; import classnames from 'classnames';
import lodash from 'lodash'; import lodash from 'lodash';
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
@ -11,7 +11,6 @@ import { useRecord } from '../../../record-provider';
import { SortableItem } from '../../common'; import { SortableItem } from '../../common';
import { useCompile, useComponent, useDesigner } from '../../hooks'; import { useCompile, useComponent, useDesigner } from '../../hooks';
import { useProps } from '../../hooks/useProps'; import { useProps } from '../../hooks/useProps';
import { Popover } from '../popover';
import ActionContainer from './Action.Container'; import ActionContainer from './Action.Container';
import { ActionDesigner } from './Action.Designer'; import { ActionDesigner } from './Action.Designer';
import { ActionDrawer } from './Action.Drawer'; import { ActionDrawer } from './Action.Drawer';

View File

@ -4,7 +4,7 @@ import { observer } from '@formily/react';
import React, { useContext, useRef, useState } from 'react'; import React, { useContext, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { ActionContext, ActionContextProvider } from '../action/context'; import { ActionContext, ActionContextProvider } from '../action/context';
import { Popover } from '../popover'; import { PopoverWithStopPropagation } from '../popover';
import { InternalNester } from './InternalNester'; import { InternalNester } from './InternalNester';
import { ReadPrettyInternalViewer } from './InternalViewer'; import { ReadPrettyInternalViewer } from './InternalViewer';
import { useAssociationFieldContext } from './hooks'; import { useAssociationFieldContext } from './hooks';
@ -46,7 +46,7 @@ export const InternaPopoverNester = observer(
}; };
return ( return (
<ActionContextProvider value={{ ...ctx, modalProps }}> <ActionContextProvider value={{ ...ctx, modalProps }}>
<Popover <PopoverWithStopPropagation
overlayStyle={{ padding: '0px' }} overlayStyle={{ padding: '0px' }}
content={content} content={content}
trigger="click" trigger="click"
@ -65,7 +65,7 @@ export const InternaPopoverNester = observer(
</div> </div>
<EditOutlined style={{ display: 'inline-flex', marginLeft: '5px' }} /> <EditOutlined style={{ display: 'inline-flex', marginLeft: '5px' }} />
</span> </span>
</Popover> </PopoverWithStopPropagation>
{visible && ( {visible && (
<div <div
onClick={() => setVisible(false)} onClick={() => setVisible(false)}

View File

@ -8,7 +8,7 @@ import { FormProvider, SchemaComponent } from '../../core';
import { useDesignable } from '../../hooks'; import { useDesignable } from '../../hooks';
import { useProps } from '../../hooks/useProps'; import { useProps } from '../../hooks/useProps';
import { Action } from '../action'; import { Action } from '../action';
import { Popover } from '../popover'; import { PopoverWithStopPropagation } from '../popover';
export const FilterActionContext = createContext<any>(null); export const FilterActionContext = createContext<any>(null);
@ -27,7 +27,7 @@ export const FilterAction = observer(
return ( return (
<FilterActionContext.Provider value={{ field, fieldSchema, designable, dn }}> <FilterActionContext.Provider value={{ field, fieldSchema, designable, dn }}>
<Popover <PopoverWithStopPropagation
destroyTooltipOnHide destroyTooltipOnHide
placement={'bottomLeft'} placement={'bottomLeft'}
open={visible} open={visible}
@ -88,7 +88,7 @@ export const FilterAction = observer(
} }
> >
<Action {...others} title={field.title} /> <Action {...others} title={field.title} />
</Popover> </PopoverWithStopPropagation>
</FilterActionContext.Provider> </FilterActionContext.Provider>
); );
}, },

View File

@ -6,7 +6,7 @@ import { Button, Input } from 'antd';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { Icon, hasIcon, icons } from '../../../icon'; import { Icon, hasIcon, icons } from '../../../icon';
import { Popover } from '../popover'; import { PopoverWithStopPropagation } from '../popover';
function IconField(props: any) { function IconField(props: any) {
const layout = useFormLayout(); const layout = useFormLayout();
@ -16,7 +16,7 @@ function IconField(props: any) {
return ( return (
<div> <div>
<Input.Group compact> <Input.Group compact>
<Popover <PopoverWithStopPropagation
placement={'bottom'} placement={'bottom'}
open={visible} open={visible}
onOpenChange={(val) => { onOpenChange={(val) => {
@ -47,7 +47,7 @@ function IconField(props: any) {
<Button size={layout.size as any} disabled={disabled}> <Button size={layout.size as any} disabled={disabled}>
{hasIcon(value) ? <Icon type={value} /> : t('Select icon')} {hasIcon(value) ? <Icon type={value} /> : t('Select icon')}
</Button> </Button>
</Popover> </PopoverWithStopPropagation>
{value && !disabled && ( {value && !disabled && (
<Button <Button
size={layout.size as any} size={layout.size as any}

View File

@ -1,5 +1,5 @@
import { Popover } from 'antd';
import React, { CSSProperties, forwardRef, useImperativeHandle, useRef, useState } from 'react'; import React, { CSSProperties, forwardRef, useImperativeHandle, useRef, useState } from 'react';
import { Popover } from '../popover';
const getContentWidth = (element) => { const getContentWidth = (element) => {
if (element) { if (element) {

View File

@ -1,7 +1,7 @@
import { Popover as AntdPopover, PopoverProps } from 'antd'; import { Popover as AntdPopover, PopoverProps } from 'antd';
import React, { useCallback } from 'react'; import React, { useCallback } from 'react';
export const Popover = (props: PopoverProps) => { export const PopoverWithStopPropagation = (props: PopoverProps) => {
// 参见https://github.com/ant-design/ant-design/issues/44119 // 参见https://github.com/ant-design/ant-design/issues/44119
// fix T-1508 // fix T-1508
const avoidClose = useCallback((e: React.MouseEvent<HTMLDivElement, MouseEvent>) => { const avoidClose = useCallback((e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {

View File

@ -4,7 +4,7 @@ import { Field, createForm } from '@formily/core';
import { FormContext, RecursionField, observer, useField, useFieldSchema } from '@formily/react'; import { FormContext, RecursionField, observer, useField, useFieldSchema } from '@formily/react';
import React, { useMemo, useRef } from 'react'; import React, { useMemo, useRef } from 'react';
import { useCollectionManager } from '../../../collection-manager'; import { useCollectionManager } from '../../../collection-manager';
import { Popover } from '../popover'; import { PopoverWithStopPropagation } from '../popover';
export const Editable = observer((props) => { export const Editable = observer((props) => {
const field: any = useField(); const field: any = useField();
@ -42,7 +42,7 @@ export const Editable = observer((props) => {
return ( return (
<FormItem {...props} labelStyle={{ display: 'none' }}> <FormItem {...props} labelStyle={{ display: 'none' }}>
<Popover <PopoverWithStopPropagation
content={ content={
<div style={{ width: '100%', height: '100%', minWidth: 500 }}> <div style={{ width: '100%', height: '100%', minWidth: 500 }}>
<div ref={containerRef}>{modifiedChildren}</div> <div ref={containerRef}>{modifiedChildren}</div>
@ -62,7 +62,7 @@ export const Editable = observer((props) => {
<RecursionField schema={schema} name={fieldSchema.name} /> <RecursionField schema={schema} name={fieldSchema.name} />
</FormContext.Provider> </FormContext.Provider>
</div> </div>
</Popover> </PopoverWithStopPropagation>
</FormItem> </FormItem>
); );
}); });

View File

@ -1,7 +1,7 @@
import { LoadingOutlined } from '@ant-design/icons'; import { LoadingOutlined } from '@ant-design/icons';
import { connect, mapProps, mapReadPretty } from '@formily/react'; import { connect, mapProps, mapReadPretty } from '@formily/react';
import { isValid } from '@formily/shared'; import { isValid } from '@formily/shared';
import { Icon, Popover, css } from '@nocobase/client'; import { Icon, PopoverWithStopPropagation, css } from '@nocobase/client';
import type { SelectProps } from 'antd'; import type { SelectProps } from 'antd';
import { Select as AntdSelect } from 'antd'; import { Select as AntdSelect } from 'antd';
import React from 'react'; import React from 'react';
@ -36,7 +36,7 @@ const InternalSelect = connect(
<OptGroup label={lang('Basic charts')}> <OptGroup label={lang('Basic charts')}>
{group1.map((option) => ( {group1.map((option) => (
<Option key={option.key} value={option.key} label={lang(option.title)}> <Option key={option.key} value={option.key} label={lang(option.title)}>
<Popover <PopoverWithStopPropagation
placement={'right'} placement={'right'}
zIndex={99999999999} zIndex={99999999999}
content={() => ( content={() => (
@ -60,14 +60,14 @@ const InternalSelect = connect(
{lang(option.title)} {lang(option.title)}
</span> </span>
</div> </div>
</Popover> </PopoverWithStopPropagation>
</Option> </Option>
))} ))}
</OptGroup> </OptGroup>
<OptGroup label={lang('More charts')}> <OptGroup label={lang('More charts')}>
{group2.map((option) => ( {group2.map((option) => (
<Option key={option.key} value={option.key} label={lang(option.title)}> <Option key={option.key} value={option.key} label={lang(option.title)}>
<Popover <PopoverWithStopPropagation
placement={'right'} placement={'right'}
zIndex={99999999999} zIndex={99999999999}
content={() => ( content={() => (
@ -91,7 +91,7 @@ const InternalSelect = connect(
{lang(option.title)} {lang(option.title)}
</span> </span>
</div> </div>
</Popover> </PopoverWithStopPropagation>
</Option> </Option>
))} ))}
</OptGroup> </OptGroup>

View File

@ -7,7 +7,6 @@ import { Snapline } from '@antv/x6-plugin-snapline';
import { register } from '@antv/x6-react-shape'; import { register } from '@antv/x6-react-shape';
import { cx } from '@emotion/css'; import { cx } from '@emotion/css';
import { SchemaOptionsContext } from '@formily/react'; import { SchemaOptionsContext } from '@formily/react';
import { useSearchParams } from 'react-router-dom';
import { import {
APIClientProvider, APIClientProvider,
CollectionCategroriesContext, CollectionCategroriesContext,
@ -25,13 +24,19 @@ import {
useCurrentAppInfo, useCurrentAppInfo,
useGlobalTheme, useGlobalTheme,
} from '@nocobase/client'; } from '@nocobase/client';
import lodash from 'lodash'; import { App, Button, ConfigProvider, Layout, Spin, Switch, Tooltip } from 'antd';
import { Button, ConfigProvider, Layout, Switch, Tooltip, App, Spin } from 'antd';
import dagre from 'dagre'; import dagre from 'dagre';
import lodash from 'lodash';
import React, { createContext, forwardRef, useContext, useEffect, useLayoutEffect, useState } from 'react'; import React, { createContext, forwardRef, useContext, useEffect, useLayoutEffect, useState } from 'react';
import { useSearchParams } from 'react-router-dom';
import { useAsyncDataSource, useCreateActionAndRefreshCM } from './action-hooks'; import { useAsyncDataSource, useCreateActionAndRefreshCM } from './action-hooks';
import { AddCollectionAction } from './components/AddCollectionAction'; import { AddCollectionAction } from './components/AddCollectionAction';
import { ConnectorAction } from './components/ConnectorAction';
import { DirectionAction } from './components/DirectionAction';
import Entity from './components/Entity'; import Entity from './components/Entity';
import { FullscreenAction } from './components/FullScreenAction';
import { LocateCollectionAction } from './components/LocateCollectionAction';
import { SelectCollectionsAction } from './components/SelectCollectionsAction';
import { SimpleNodeView } from './components/ViewNode'; import { SimpleNodeView } from './components/ViewNode';
import useStyles from './style'; import useStyles from './style';
import { import {
@ -43,11 +48,6 @@ import {
getPopupContainer, getPopupContainer,
useGCMTranslation, useGCMTranslation,
} from './utils'; } from './utils';
import { LocateCollectionAction } from './components/LocateCollectionAction';
import { SelectCollectionsAction } from './components/SelectCollectionsAction';
import { DirectionAction } from './components/DirectionAction';
import { ConnectorAction } from './components/ConnectorAction';
import { FullscreenAction } from './components/FullScreenAction';
const { drop, groupBy, last, maxBy, minBy, take, uniq } = lodash; const { drop, groupBy, last, maxBy, minBy, take, uniq } = lodash;
const LINE_HEIGHT = 40; const LINE_HEIGHT = 40;

View File

@ -5,7 +5,7 @@ import { uid } from '@formily/shared';
import { import {
CollectionCategroriesContext, CollectionCategroriesContext,
CollectionProvider, CollectionProvider,
Popover, PopoverWithStopPropagation,
SchemaComponent, SchemaComponent,
SchemaComponentProvider, SchemaComponentProvider,
Select, Select,
@ -30,14 +30,14 @@ import useStyles from '../style';
import { getPopupContainer, useGCMTranslation } from '../utils'; import { getPopupContainer, useGCMTranslation } from '../utils';
import { AddFieldAction } from './AddFieldAction'; import { AddFieldAction } from './AddFieldAction';
import { CollectionNodeProvder } from './CollectionNodeProvder'; import { CollectionNodeProvder } from './CollectionNodeProvder';
import { ConnectAssociationAction } from './ConnectAssociationAction';
import { ConnectChildAction } from './ConnectChildAction';
import { ConnectParentAction } from './ConnectParentAction';
import { EditCollectionAction } from './EditCollectionAction'; import { EditCollectionAction } from './EditCollectionAction';
import { EditFieldAction } from './EditFieldAction'; import { EditFieldAction } from './EditFieldAction';
import { FieldSummary } from './FieldSummary'; import { FieldSummary } from './FieldSummary';
import { OverrideFieldAction } from './OverrideFieldAction'; import { OverrideFieldAction } from './OverrideFieldAction';
import { ViewFieldAction } from './ViewFieldAction'; import { ViewFieldAction } from './ViewFieldAction';
import { ConnectAssociationAction } from './ConnectAssociationAction';
import { ConnectChildAction } from './ConnectChildAction';
import { ConnectParentAction } from './ConnectParentAction';
const OperationButton: any = React.memo((props: any) => { const OperationButton: any = React.memo((props: any) => {
const { property, loadCollections, collectionData, setTargetNode, node, handelOpenPorts, title, name, targetGraph } = const { property, loadCollections, collectionData, setTargetNode, node, handelOpenPorts, title, name, targetGraph } =
@ -256,7 +256,7 @@ const PopoverContent = React.forwardRef((props: any, ref) => {
}} }}
onMouseLeave={() => setIsHovered(false)} onMouseLeave={() => setIsHovered(false)}
> >
<Popover <PopoverWithStopPropagation
content={CollectionConten(property)} content={CollectionConten(property)}
getPopupContainer={getPopupContainer} getPopupContainer={getPopupContainer}
mouseLeaveDelay={0} mouseLeaveDelay={0}
@ -275,7 +275,7 @@ const PopoverContent = React.forwardRef((props: any, ref) => {
<Badge color={typeColor(property)} /> <Badge color={typeColor(property)} />
{compile(property.uiSchema?.title)} {compile(property.uiSchema?.title)}
</div> </div>
</Popover> </PopoverWithStopPropagation>
<div className={`type field_type`}>{compile(getInterface(property.interface)?.title)}</div> <div className={`type field_type`}>{compile(getInterface(property.interface)?.title)}</div>
{isHovered && <OperationButton property={property} {...operatioBtnProps} />} {isHovered && <OperationButton property={property} {...operatioBtnProps} />}
</div> </div>

View File

@ -4,7 +4,7 @@ import { Field, useField, useForm } from '@formily/react';
import { import {
FormProvider, FormProvider,
Input, Input,
Popover, PopoverWithStopPropagation,
Radio, Radio,
SchemaComponent, SchemaComponent,
locale, locale,
@ -115,7 +115,7 @@ const Sync = () => {
}; };
return ( return (
<Popover <PopoverWithStopPropagation
placement="bottomRight" placement="bottomRight"
content={ content={
<> <>
@ -158,7 +158,7 @@ const Sync = () => {
> >
{t('Sync')} {t('Sync')}
</Button> </Button>
</Popover> </PopoverWithStopPropagation>
); );
}; };

View File

@ -1,5 +1,5 @@
import { CaretRightOutlined, ExpandOutlined, QuestionCircleOutlined } from '@ant-design/icons'; import { CaretRightOutlined, ExpandOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import { Popover } from '@nocobase/client'; import { PopoverWithStopPropagation } from '@nocobase/client';
import { Button, Checkbox, Collapse, ConfigProvider, Switch, Tooltip, Typography } from 'antd'; import { Button, Checkbox, Collapse, ConfigProvider, Switch, Tooltip, Typography } from 'antd';
import type { ThemeConfig } from 'antd/es/config-provider/context'; import type { ThemeConfig } from 'antd/es/config-provider/context';
import seed from 'antd/es/theme/themes/seed'; import seed from 'antd/es/theme/themes/seed';
@ -304,7 +304,7 @@ const SeedTokenPreview: FC<SeedTokenProps> = ({ theme, tokenName, disabled, alph
</Typography.Link> </Typography.Link>
</div> </div>
{tokenName.startsWith('color') && ( {tokenName.startsWith('color') && (
<Popover <PopoverWithStopPropagation
trigger="click" trigger="click"
placement="bottomRight" placement="bottomRight"
overlayInnerStyle={{ padding: 0 }} overlayInnerStyle={{ padding: 0 }}
@ -326,7 +326,7 @@ const SeedTokenPreview: FC<SeedTokenProps> = ({ theme, tokenName, disabled, alph
/> />
<div className="token-panel-pro-token-collapse-seed-block-sample-card-value">{tokenValue}</div> <div className="token-panel-pro-token-collapse-seed-block-sample-card-value">{tokenValue}</div>
</div> </div>
</Popover> </PopoverWithStopPropagation>
)} )}
{['fontSize', 'sizeUnit', 'sizeStep', 'borderRadius'].includes(tokenName) && ( {['fontSize', 'sizeUnit', 'sizeStep', 'borderRadius'].includes(tokenName) && (
<InputNumberPlus <InputNumberPlus