ruiling/tachybase_todo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/core/client/src/schema-component/antd/action/Action.tsx
View File

@ -1,5 +1,5 @@
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 lodash from 'lodash';
import React, { useEffect, useState } from 'react';
@ -11,7 +11,6 @@ import { useRecord } from '../../../record-provider';
import { SortableItem } from '../../common';
import { useCompile, useComponent, useDesigner } from '../../hooks';
import { useProps } from '../../hooks/useProps';
import { Popover } from '../popover';
import ActionContainer from './Action.Container';
import { ActionDesigner } from './Action.Designer';
import { ActionDrawer } from './Action.Drawer';

6
packages/core/client/src/schema-component/antd/association-field/InternalPopoverNester.tsx
View File

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

6
packages/core/client/src/schema-component/antd/filter/FilterAction.tsx
View File

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

6
packages/core/client/src/schema-component/antd/icon-picker/IconPicker.tsx
View File

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

2
packages/core/client/src/schema-component/antd/input/EllipsisWithTooltip.tsx
View File

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

2
packages/core/client/src/schema-component/antd/popover/Popover.tsx
View File

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

6
packages/core/client/src/schema-component/antd/quick-edit/QuickEdit.tsx
View File

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

10
packages/plugins/charts/src/client/select/CustomSelect.tsx
View File

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

16
packages/plugins/graph-collection-manager/src/client/GraphDrawPage.tsx
View File

@ -7,7 +7,6 @@ import { Snapline } from '@antv/x6-plugin-snapline';
import { register } from '@antv/x6-react-shape';
import { cx } from '@emotion/css';
import { SchemaOptionsContext } from '@formily/react';
import { useSearchParams } from 'react-router-dom';
import {
APIClientProvider,
CollectionCategroriesContext,
@ -25,13 +24,19 @@ import {
useCurrentAppInfo,
useGlobalTheme,
} from '@nocobase/client';
import lodash from 'lodash';
import { Button, ConfigProvider, Layout, Switch, Tooltip, App, Spin } from 'antd';
import { App, Button, ConfigProvider, Layout, Spin, Switch, Tooltip } from 'antd';
import dagre from 'dagre';
import lodash from 'lodash';
import React, { createContext, forwardRef, useContext, useEffect, useLayoutEffect, useState } from 'react';
import { useSearchParams } from 'react-router-dom';
import { useAsyncDataSource, useCreateActionAndRefreshCM } from './action-hooks';
import { AddCollectionAction } from './components/AddCollectionAction';
import { ConnectorAction } from './components/ConnectorAction';
import { DirectionAction } from './components/DirectionAction';
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 useStyles from './style';
import {
@ -43,11 +48,6 @@ import {
getPopupContainer,
useGCMTranslation,
} 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 LINE_HEIGHT = 40;

12
packages/plugins/graph-collection-manager/src/client/components/Entity.tsx
View File

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

6
packages/plugins/localization-management/src/client/Localization.tsx
View File

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

6
packages/plugins/theme-editor/src/client/antd-token-previewer/token-panel-pro/TokenContent.tsx
View File

@ -1,5 +1,5 @@
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 type { ThemeConfig } from 'antd/es/config-provider/context';
import seed from 'antd/es/theme/themes/seed';
@ -304,7 +304,7 @@ const SeedTokenPreview: FC<SeedTokenProps> = ({ theme, tokenName, disabled, alph
</Typography.Link>
</div>
{tokenName.startsWith('color') && (
<Popover
<PopoverWithStopPropagation
trigger="click"
placement="bottomRight"
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>
</Popover>
</PopoverWithStopPropagation>
)}
{['fontSize', 'sizeUnit', 'sizeStep', 'borderRadius'].includes(tokenName) && (
<InputNumberPlus