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

fix: add displayName (#3628)

Browse Source 
* fix: context add displayName

* fix: observer add displayName

* fix: memo component add displayName

* fix: forwordRef component add displayName
This commit is contained in:
jack zhang 2024-03-06 18:22:31 +08:00 committed by GitHub
parent bccde967cc
commit 454d1d34ed
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
135 changed files with 1089 additions and 868 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/core/client/src/acl/ACLProvider.tsx
View File

@ -14,6 +14,7 @@ import { useApp } from '../application';
import { useDataSourceKey } from '../data-source/data-source/DataSourceProvider';
export const ACLContext = createContext<any>({});
ACLContext.displayName = 'ACLContext';
// TODO: delete this，replace by `ACLPlugin`
export const ACLProvider = (props) => {
@ -90,6 +91,7 @@ export const useACLContext = () => {
};
export const ACLActionParamsContext = createContext<any>({});
ACLActionParamsContext.displayName = 'ACLActionParamsContext';
export const useACLRolesCheck = () => {
const ctx = useContext(ACLContext);

1
packages/core/client/src/acl/Configuration/ConfigureCenter.tsx
View File

@ -31,6 +31,7 @@ const getChildrenKeys = (data = [], arr = []) => {
};
const SettingMenuContext = createContext(null);
SettingMenuContext.displayName = 'SettingMenuContext';
export const SettingCenterProvider = (props) => {
const configureItems = useContext(SettingsCenterContext);

1
packages/core/client/src/acl/Configuration/MenuItemsProvider.tsx
View File

@ -4,6 +4,7 @@ import { useRequest } from '../../api-client';
import { useAdminSchemaUid } from '../../hooks';
const MenuItemsContext = createContext(null);
MenuItemsContext.displayName = 'MenuItemsContext';
export const toItems = (properties = {}) => {
const items = [];

1
packages/core/client/src/acl/Configuration/PermisionProvider.tsx
View File

@ -14,6 +14,7 @@ export const SettingCenterPermissionProvider = (props) => {
};
export const PermissionContext = createContext<any>(null);
PermissionContext.displayName = 'PermissionContext';
export const PermissionProvider = (props) => {
const api = useAPIClient();

1
packages/core/client/src/acl/Configuration/RoleTable.tsx
View File

@ -7,6 +7,7 @@ import { PermissionProvider, SettingCenterPermissionProvider } from '../Configur
import { roleSchema } from './schemas/roles';
const AvailableActionsContext = createContext([]);
AvailableActionsContext.displayName = 'AvailableActionsContext';
const AvailableActionsProver: React.FC = (props) => {
const { data, loading } = useRequest<{

1
packages/core/client/src/acl/Configuration/RolesResourcesActions.tsx
View File

@ -22,6 +22,7 @@ const toActionMap = (arr: any[]) => {
};
export const RoleResourceCollectionContext = createContext<any>({});
RoleResourceCollectionContext.displayName = 'RoleResourceCollectionContext';
export const RolesResourcesActions = connect((props) => {
const { styles } = useStyles();

1
packages/core/client/src/acl/Configuration/ScopeSelect.tsx
View File

@ -4,6 +4,7 @@ import { FormProvider, SchemaComponent } from '../../schema-component';
import { scopesSchema } from './schemas/scopes';
const RolesResourcesScopesSelectedRowKeysContext = createContext(null);
RolesResourcesScopesSelectedRowKeysContext.displayName = 'RolesResourcesScopesSelectedRowKeysContext';
const RolesResourcesScopesSelectedRowKeysProvider: React.FC = (props) => {
const [keys, setKeys] = useState([]);

1
packages/core/client/src/antd-config-provider/index.tsx
View File

@ -7,6 +7,7 @@ import { Plugin } from '../application/Plugin';
import { loadConstrueLocale } from './loadConstrueLocale';
export const AppLangContext = createContext<any>({});
AppLangContext.displayName = 'AppLangContext';
export const useAppLangContext = () => {
return useContext(AppLangContext);

1
packages/core/client/src/api-client/context.ts
View File

@ -2,3 +2,4 @@ import { createContext } from 'react';
import { APIClient } from './APIClient';
export const APIClientContext = createContext<APIClient>(new APIClient());
APIClientContext.displayName = 'APIClientContext';

1
packages/core/client/src/appInfo/CurrentAppInfoProvider.tsx
View File

@ -3,6 +3,7 @@ import { useRequest } from '../api-client';
import { useAppSpin } from '../application/hooks/useAppSpin';
export const CurrentAppInfoContext = createContext(null);
CurrentAppInfoContext.displayName = 'CurrentAppInfoContext';
export const useCurrentAppInfo = () => {
return useContext<{

10
packages/core/client/src/application/PluginSettingsManager.ts
View File

@ -45,6 +45,7 @@ export class PluginSettingsManager {
protected settings: Record<string, PluginSettingOptions> = {};
protected aclSnippets: string[] = [];
public app: Application;
private cachedList = {};
constructor(_pluginSettings: Record<string, PluginSettingOptions>, app: Application) {
this.app = app;
@ -141,11 +142,16 @@ export class PluginSettingsManager {
}
getList(filterAuth = true): PluginSettingsPageType[] {
return Array.from(new Set(Object.values(this.settings).map((item) => item.topLevelName)))
const cacheKey = JSON.stringify(filterAuth);
if (this.cachedList[cacheKey]) return this.cachedList[cacheKey];
return (this.cachedList[cacheKey] = Array.from(
new Set(Object.values(this.settings).map((item) => item.topLevelName)),
)
.sort((a, b) => a.localeCompare(b)) // sort by name
.map((name) => this.get(name, filterAuth))
.filter(Boolean)
.sort((a, b) => (a.sort || 0) - (b.sort || 0));
.sort((a, b) => (a.sort || 0) - (b.sort || 0)));
}
getAclSnippets() {

61
packages/core/client/src/application/components/AppComponent.tsx
View File

@ -8,32 +8,35 @@ export interface AppComponentProps {
app: Application;
}
export const AppComponent: FC<AppComponentProps> = observer((props) => {
const { app } = props;
const handleErrors = useCallback((error: Error, info: { componentStack: string }) => {
console.error(error);
const err = new Error();
err.stack = info.componentStack.trim();
console.error(err);
}, []);
useEffect(() => {
app.load();
}, [app]);
const AppError = app.getComponent('AppError');
if (app.loading) return app.renderComponent('AppSpin', { app });
if (!app.maintained && app.maintaining) return app.renderComponent('AppMaintaining', { app });
if (app.error?.code === 'LOAD_ERROR' || app.error?.code === 'APP_ERROR') {
return <AppError app={app} error={app.error} />;
}
return (
<ErrorBoundary
FallbackComponent={(props) => <AppError app={app} error={app.error} {...props} />}
onError={handleErrors}
>
<ApplicationContext.Provider value={app}>
{app.maintained && app.maintaining && app.renderComponent('AppMaintainingDialog', { app })}
{app.renderComponent('AppMain')}
</ApplicationContext.Provider>
</ErrorBoundary>
);
});
export const AppComponent: FC<AppComponentProps> = observer(
(props) => {
const { app } = props;
const handleErrors = useCallback((error: Error, info: { componentStack: string }) => {
console.error(error);
const err = new Error();
err.stack = info.componentStack.trim();
console.error(err);
}, []);
useEffect(() => {
app.load();
}, [app]);
const AppError = app.getComponent('AppError');
if (app.loading) return app.renderComponent('AppSpin', { app });
if (!app.maintained && app.maintaining) return app.renderComponent('AppMaintaining', { app });
if (app.error?.code === 'LOAD_ERROR' || app.error?.code === 'APP_ERROR') {
return <AppError app={app} error={app.error} />;
}
return (
<ErrorBoundary
FallbackComponent={(props) => <AppError app={app} error={app.error} {...props} />}
onError={handleErrors}
>
<ApplicationContext.Provider value={app}>
{app.maintained && app.maintaining && app.renderComponent('AppMaintainingDialog', { app })}
{app.renderComponent('AppMain')}
</ApplicationContext.Provider>
</ErrorBoundary>
);
},
{ displayName: 'AppComponent' },
);

1
packages/core/client/src/application/context.ts
View File

@ -2,3 +2,4 @@ import { createContext } from 'react';
import { Application } from './Application';
export const ApplicationContext = createContext<Application>(null);
ApplicationContext.displayName = 'ApplicationContext';

203
packages/core/client/src/application/schema-initializer/hoc/index.tsx
View File

@ -13,113 +13,114 @@ import { SchemaInitializerOptions } from '../types';
const defaultWrap = (s: ISchema) => s;
export function withInitializer<T>(C: ComponentType<T>) {
const WithInitializer = observer((props: SchemaInitializerOptions<T>) => {
const { designable, insertAdjacent } = useDesignable();
const { isInSubTable } = useFlag() || {};
const {
insert,
useInsert,
wrap = defaultWrap,
insertPosition = 'beforeEnd',
onSuccess,
designable: propsDesignable,
popoverProps,
children,
popover = true,
style,
componentProps,
} = props;
// 插入 schema 的能力
const insertCallback = useInsert ? useInsert() : insert;
const insertSchema = useCallback(
(schema) => {
if (insertCallback) {
insertCallback(wrap(schema, { isInSubTable }));
} else {
insertAdjacent(insertPosition, wrap(schema, { isInSubTable }), { onSuccess });
}
},
[insertCallback, wrap, insertAdjacent, insertPosition, onSuccess],
);
const { wrapSSR, hashId, componentCls } = useSchemaInitializerStyles();
const [visible, setVisible] = useState(false);
const { token } = theme.useToken();
const dropdownMaxHeight = useNiceDropdownMaxHeight([visible]);
const cProps = useMemo(
() => ({
options: props,
const WithInitializer = observer(
(props: SchemaInitializerOptions<T>) => {
const { designable, insertAdjacent } = useDesignable();
const { isInSubTable } = useFlag() || {};
const {
insert,
useInsert,
wrap = defaultWrap,
insertPosition = 'beforeEnd',
onSuccess,
designable: propsDesignable,
popoverProps,
children,
popover = true,
style,
...componentProps,
}),
[componentProps, props, style],
);
componentProps,
} = props;
// designable 为 false 时，不渲染
if (!designable && propsDesignable !== true) {
return null;
}
// 插入 schema 的能力
const insertCallback = useInsert ? useInsert() : insert;
const insertSchema = useCallback(
(schema) => {
if (insertCallback) {
insertCallback(wrap(schema, { isInSubTable }));
} else {
insertAdjacent(insertPosition, wrap(schema, { isInSubTable }), { onSuccess });
}
},
[insertCallback, wrap, insertAdjacent, insertPosition, onSuccess],
);
return (
<SchemaInitializerContext.Provider
value={{
visible,
setVisible,
insert: insertSchema,
const { wrapSSR, hashId, componentCls } = useSchemaInitializerStyles();
const [visible, setVisible] = useState(false);
const { token } = theme.useToken();
const dropdownMaxHeight = useNiceDropdownMaxHeight([visible]);
const cProps = useMemo(
() => ({
options: props,
}}
>
{popover === false ? (
React.createElement(C, cProps)
) : (
<Popover
placement={'bottomLeft'}
{...popoverProps}
arrow={false}
overlayClassName={css`
.ant-popover-inner {
padding: ${`${token.paddingXXS}px 0`};
.ant-menu-submenu-title {
margin-block: 0;
style,
...componentProps,
}),
[componentProps, props, style],
);
// designable 为 false 时，不渲染
if (!designable && propsDesignable !== true) {
return null;
}
return (
<SchemaInitializerContext.Provider
value={{
visible,
setVisible,
insert: insertSchema,
options: props,
}}
>
{popover === false ? (
React.createElement(C, cProps)
) : (
<Popover
placement={'bottomLeft'}
{...popoverProps}
arrow={false}
overlayClassName={css`
.ant-popover-inner {
padding: ${`${token.paddingXXS}px 0`};
.ant-menu-submenu-title {
margin-block: 0;
}
}
}
`}
open={visible}
onOpenChange={setVisible}
content={wrapSSR(
<div
className={`${componentCls} ${hashId}`}
style={{
maxHeight: dropdownMaxHeight,
overflowY: 'auto',
}}
>
<ConfigProvider
theme={{
components: {
Menu: {
itemHeight: token.marginXL,
borderRadius: token.borderRadiusSM,
itemBorderRadius: token.borderRadiusSM,
subMenuItemBorderRadius: token.borderRadiusSM,
},
},
`}
open={visible}
onOpenChange={setVisible}
content={wrapSSR(
<div
className={`${componentCls} ${hashId}`}
style={{
maxHeight: dropdownMaxHeight,
overflowY: 'auto',
}}
>
{children}
</ConfigProvider>
</div>,
)}
>
{React.createElement(C, cProps)}
</Popover>
)}
</SchemaInitializerContext.Provider>
);
});
WithInitializer.displayName = `WithInitializer(${C.displayName || C.name})`;
<ConfigProvider
theme={{
components: {
Menu: {
itemHeight: token.marginXL,
borderRadius: token.borderRadiusSM,
itemBorderRadius: token.borderRadiusSM,
subMenuItemBorderRadius: token.borderRadiusSM,
},
},
}}
>
{children}
</ConfigProvider>
</div>,
)}
>
{React.createElement(C, cProps)}
</Popover>
)}
</SchemaInitializerContext.Provider>
);
},
{ displayName: `WithInitializer(${C.displayName || C.name})` },
);
return WithInitializer;
}

2
packages/core/client/src/application/schema-initializer/hooks/index.tsx
View File

@ -11,7 +11,7 @@ export * from './useAriaAttributeOfMenuItem';
export function useSchemaInitializerMenuItems(items: any[], name?: string, onClick?: (args: any) => void) {
const getMenuItems = useGetSchemaInitializerMenuItems(onClick);
return getMenuItems(items, name);
return useMemo(() => getMenuItems(items, name), [getMenuItems, items, name]);
}
export function useGetSchemaInitializerMenuItems(onClick?: (args: any) => void) {

1
packages/core/client/src/application/schema-settings/components/SchemaSettingsIcon.tsx
View File

@ -13,3 +13,4 @@ export const SchemaSettingsIcon: FC<SchemaSettingOptions> = React.memo((props) =
const style = useMemo(() => ({ cursor: 'pointer', fontSize: 12 }), []);
return <MenuOutlined role="button" style={style} aria-label={getAriaLabel('schema-settings', name)} />;
});
SchemaSettingsIcon.displayName = 'SchemaSettingsIcon';

1
packages/core/client/src/async-data-provider/index.tsx
View File

@ -3,6 +3,7 @@ import React, { createContext, useContext } from 'react';
import { useRequest } from '../api-client';
export const AsyncDataContext = createContext<Result<any, any> & { state?: any; setState?: any }>(null);
AsyncDataContext.displayName = 'AsyncDataContext';
export interface AsyncDataProviderProps {
value?: any;

4
packages/core/client/src/block-provider/BlockProvider.tsx
View File

@ -35,7 +35,9 @@ import { useDataBlockSourceId } from './hooks/useDataBlockSourceId';
* @deprecated
*/
export const BlockResourceContext = createContext(null);
BlockResourceContext.displayName = 'BlockResourceContext';
export const BlockAssociationContext = createContext(null);
BlockAssociationContext.displayName = 'BlockAssociationContext';
/**
* @deprecated
@ -50,6 +52,7 @@ export const BlockRequestContext_deprecated = createContext<{
__parent?: any;
updateAssociationValues?: any[];
}>({});
BlockRequestContext_deprecated.displayName = 'BlockRequestContext_deprecated';
export const useBlockResource = () => {
const resource = useDataBlockResource();
@ -209,6 +212,7 @@ const BlockContext = createContext<{
/** 用以区分区块的标识 */
name: string;
}>(null);
BlockContext.displayName = 'BlockContext';
export const useBlockContext = () => {
return useContext(BlockContext);

1
packages/core/client/src/block-provider/DetailsBlockProvider.tsx
View File

@ -9,6 +9,7 @@ import { BlockProvider, useBlockRequestContext } from './BlockProvider';
import { useParsedFilter } from './hooks';
export const DetailsBlockContext = createContext<any>({});
DetailsBlockContext.displayName = 'DetailsBlockContext';
const InternalDetailsBlockProvider = (props) => {
const { action, readPretty } = props;

1
packages/core/client/src/block-provider/FormBlockProvider.tsx
View File

@ -12,6 +12,7 @@ import { TemplateBlockProvider } from './TemplateBlockProvider';
import { FormActiveFieldsProvider } from './hooks/useFormActiveFields';
export const FormBlockContext = createContext<any>({});
FormBlockContext.displayName = 'FormBlockContext';
const InternalFormBlockProvider = (props) => {
const ctx = useFormBlockContext();

2
packages/core/client/src/block-provider/FormFieldProvider.tsx
View File

@ -10,6 +10,7 @@ import { BlockProvider, useBlockRequestContext } from './BlockProvider';
import { useFormBlockContext } from './FormBlockProvider';
export const FormFieldContext = createContext<any>({});
FormFieldContext.displayName = 'FormFieldContext';
const InternalFormFieldProvider = (props) => {
const { action, readPretty, fieldName } = props;
@ -75,6 +76,7 @@ const InternalFormFieldProvider = (props) => {
};
export const WithoutFormFieldResource = createContext(null);
WithoutFormFieldResource.displayName = 'WithoutFormFieldResource';
export const FormFieldProvider = (props) => {
return (

2
packages/core/client/src/block-provider/TableBlockProvider.tsx
View File

@ -9,6 +9,8 @@ import { BlockProvider, RenderChildrenWithAssociationFilter, useBlockRequestCont
import { findFilterTargets, useParsedFilter } from './hooks';
export const TableBlockContext = createContext<any>({});
TableBlockContext.displayName = 'TableBlockContext';
export function getIdsWithChildren(nodes) {
const ids = [];
if (nodes) {

2
packages/core/client/src/block-provider/TableFieldProvider.tsx
View File

@ -7,6 +7,7 @@ import { useFormBlockContext } from './FormBlockProvider';
import { useFormFieldContext } from './FormFieldProvider';
export const TableFieldContext = createContext<any>({});
TableFieldContext.displayName = 'TableFieldContext';
const InternalTableFieldProvider = (props) => {
const { params = {}, showIndex, dragSort, fieldName } = props;
@ -122,6 +123,7 @@ export class TableFieldResource {
}
export const WithoutTableFieldResource = createContext(null);
WithoutTableFieldResource.displayName = 'WithoutTableFieldResource';
export const TableFieldProvider = (props) => {
return (

2
packages/core/client/src/block-provider/TableSelectorProvider.tsx
View File

@ -20,7 +20,9 @@ type Params = {
};
export const TableSelectorContext = createContext<any>({});
TableSelectorContext.displayName = 'TableSelectorContext';
const TableSelectorParamsContext = createContext<Params>({}); // 用于传递参数
TableSelectorParamsContext.displayName = 'TableSelectorParamsContext';
type TableSelectorProviderProps = {
params: Record<string, any>;

1
packages/core/client/src/block-provider/TemplateBlockProvider.tsx
View File

@ -5,6 +5,7 @@ const TemplateBlockContext = createContext<{
templateFinshed?: boolean;
onTemplateSuccess?: Function;
}>({});
TemplateBlockContext.displayName = 'TemplateBlockContext';
export const useTemplateBlockContext = () => {
return useContext(TemplateBlockContext);

1
packages/core/client/src/collection-manager/CollectionHistoryProvider.tsx
View File

@ -12,6 +12,7 @@ const CollectionHistoryContext = createContext<CollectionHistoryContextValue>({
historyCollections: [],
refreshCH: () => undefined,
});
CollectionHistoryContext.displayName = 'CollectionHistoryContext';
export const CollectionHistoryProvider: React.FC = (props) => {
const api = useAPIClient();

2
packages/core/client/src/collection-manager/Configuration/components/Summary.tsx
View File

@ -51,6 +51,4 @@ const Summary = observer(
{ displayName: 'Summary' },
);
Summary.displayName = 'Summary';
export default Summary;

2
packages/core/client/src/collection-manager/ResourceActionProvider.tsx
View File

@ -8,6 +8,7 @@ import { useAPIClient, useRequest } from '../api-client';
export const ResourceActionContext = createContext<
Result<any, any> & { state?: any; setState?: any; dragSort?: boolean; defaultRequest?: any }
>(null);
ResourceActionContext.displayName = 'ResourceActionContext';
interface ResourceActionProviderProps {
type?: 'association' | 'collection';
@ -18,6 +19,7 @@ interface ResourceActionProviderProps {
}
const ResourceContext = createContext<any>(null);
ResourceContext.displayName = 'ResourceContext';
const CollectionResourceActionProvider = (props) => {
const { collection, request, uid, dragSort } = props;

1
packages/core/client/src/collection-manager/context.ts
View File

@ -1,3 +1,4 @@
import { createContext } from 'react';
export const CollectionCategroriesContext = createContext({ data: [], refresh: () => {} });
CollectionCategroriesContext.displayName = 'CollectionCategroriesContext';

1
packages/core/client/src/collection-manager/sub-table.tsx
View File

@ -69,6 +69,7 @@ const collection: CollectionOptions = {
};
export const DataSourceContext_deprecated = createContext(null);
DataSourceContext_deprecated.displayName = 'DataSourceContext_deprecated';
const useSelectedRowKeys = () => {
const ctx = useContext(DataSourceContext_deprecated);

223
packages/core/client/src/collection-manager/templates/components/PresetFields.tsx
View File

@ -100,115 +100,118 @@ const getDefaultCollectionFields = (presetFields, values) => {
// 其他
return defaults;
};
export const PresetFields = observer((props: any) => {
const { getInterface } = useCollectionManager_deprecated();
const form = useForm();
const compile = useCompile();
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
const { t } = useTranslation();
const column = [
{
title: t('Field'),
dataIndex: 'field',
key: 'field',
},
{
title: t('Interface'),
dataIndex: 'interface',
key: 'interface',
render: (value) => <Tag>{compile(getInterface(value)?.title)}</Tag>,
},
{
title: t('Description'),
dataIndex: 'description',
key: 'description',
},
];
const dataSource = [
{
field: t('ID'),
interface: 'integer',
description: t('Primary key, unique identifier, self growth'),
name: 'id',
},
{
field: t('Created at'),
interface: 'createdAt',
description: t('Store the creation time of each record'),
name: 'createdAt',
},
{
field: t('Last updated at'),
interface: 'updatedAt',
description: t('Store the last update time of each record'),
name: 'updatedAt',
},
{
field: t('Created by'),
interface: 'createdBy',
description: t('Store the creation user of each record'),
name: 'createdBy',
},
export const PresetFields = observer(
(props: any) => {
const { getInterface } = useCollectionManager_deprecated();
const form = useForm();
const compile = useCompile();
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
const { t } = useTranslation();
const column = [
{
title: t('Field'),
dataIndex: 'field',
key: 'field',
},
{
title: t('Interface'),
dataIndex: 'interface',
key: 'interface',
render: (value) => <Tag>{compile(getInterface(value)?.title)}</Tag>,
},
{
title: t('Description'),
dataIndex: 'description',
key: 'description',
},
];
const dataSource = [
{
field: t('ID'),
interface: 'integer',
description: t('Primary key, unique identifier, self growth'),
name: 'id',
},
{
field: t('Created at'),
interface: 'createdAt',
description: t('Store the creation time of each record'),
name: 'createdAt',
},
{
field: t('Last updated at'),
interface: 'updatedAt',
description: t('Store the last update time of each record'),
name: 'updatedAt',
},
{
field: t('Created by'),
interface: 'createdBy',
description: t('Store the creation user of each record'),
name: 'createdBy',
},
{
field: t('Last updated by'),
interface: 'updatedBy',
description: t('Store the last update user of each record'),
name: 'updatedBy',
},
];
useEffect(() => {
const config = {
autoGenId: true,
createdAt: true,
createdBy: true,
updatedAt: true,
updatedBy: true,
};
const initialValue = ['id', 'createdAt', 'createdBy', 'updatedAt', 'updatedBy'];
setSelectedRowKeys(initialValue);
form.setValues({ ...form.values, ...config });
}, []);
useEffect(() => {
const fields = getDefaultCollectionFields(
selectedRowKeys.map((v) => {
return {
name: v,
};
}),
form.values,
);
form.setValuesIn('fields', fields);
}, [selectedRowKeys]);
return (
<Table
size="small"
pagination={false}
rowKey="name"
bordered
scroll={{ x: 600 }}
dataSource={dataSource}
columns={column}
rowSelection={{
type: 'checkbox',
selectedRowKeys,
onChange: (_, selectedRows) => {
const fields = getDefaultCollectionFields(selectedRows, form.values);
const config = {
autoGenId: !!fields.find((v) => v.name === 'id'),
createdAt: !!fields.find((v) => v.name === 'createdAt'),
createdBy: !!fields.find((v) => v.name === 'createdBy'),
updatedAt: !!fields.find((v) => v.name === 'updatedAt'),
updatedBy: !!fields.find((v) => v.name === 'updatedBy'),
{
field: t('Last updated by'),
interface: 'updatedBy',
description: t('Store the last update user of each record'),
name: 'updatedBy',
},
];
useEffect(() => {
const config = {
autoGenId: true,
createdAt: true,
createdBy: true,
updatedAt: true,
updatedBy: true,
};
const initialValue = ['id', 'createdAt', 'createdBy', 'updatedAt', 'updatedBy'];
setSelectedRowKeys(initialValue);
form.setValues({ ...form.values, ...config });
}, []);
useEffect(() => {
const fields = getDefaultCollectionFields(
selectedRowKeys.map((v) => {
return {
name: v,
};
setSelectedRowKeys(
fields?.map?.((v) => {
return v.name;
}),
);
form.setValues({ ...form.values, fields, ...config });
},
}}
/>
);
});
}),
form.values,
);
form.setValuesIn('fields', fields);
}, [selectedRowKeys]);
return (
<Table
size="small"
pagination={false}
rowKey="name"
bordered
scroll={{ x: 600 }}
dataSource={dataSource}
columns={column}
rowSelection={{
type: 'checkbox',
selectedRowKeys,
onChange: (_, selectedRows) => {
const fields = getDefaultCollectionFields(selectedRows, form.values);
const config = {
autoGenId: !!fields.find((v) => v.name === 'id'),
createdAt: !!fields.find((v) => v.name === 'createdAt'),
createdBy: !!fields.find((v) => v.name === 'createdBy'),
updatedAt: !!fields.find((v) => v.name === 'updatedAt'),
updatedBy: !!fields.find((v) => v.name === 'updatedBy'),
};
setSelectedRowKeys(
fields?.map?.((v) => {
return v.name;
}),
);
form.setValues({ ...form.values, fields, ...config });
},
}}
/>
);
},
{ displayName: 'PresetFields' },
);

425
packages/core/client/src/collection-manager/templates/components/sql-collection/FieldsConfigure.tsx
View File

@ -73,222 +73,225 @@ const useSourceFieldsOptions = () => {
return data;
};
export const FieldsConfigure = observer(() => {
const { t } = useTranslation();
const [dataSource, setDataSource] = useState([]);
const { data: res, error, loading } = useAsyncData();
const { data, fields: sourceFields } = res || {};
const field: ArrayField = useField();
const { data: curFields } = useContext(ResourceActionContext);
const compile = useCompile();
const { getInterface, getCollectionField } = useCollectionManager_deprecated();
const options = useFieldInterfaceOptions();
export const FieldsConfigure = observer(
() => {
const { t } = useTranslation();
const [dataSource, setDataSource] = useState([]);
const { data: res, error, loading } = useAsyncData();
const { data, fields: sourceFields } = res || {};
const field: ArrayField = useField();
const { data: curFields } = useContext(ResourceActionContext);
const compile = useCompile();
const { getInterface, getCollectionField } = useCollectionManager_deprecated();
const options = useFieldInterfaceOptions();
const interfaceOptions = useMemo(
() =>
options
.filter((v) => !['relation'].includes(v.key))
.map((options, index) => ({
...options,
key: index,
label: compile(options.label),
options: options.children.map((option) => ({
...option,
label: compile(option.label),
const interfaceOptions = useMemo(
() =>
options
.filter((v) => !['relation'].includes(v.key))
.map((options, index) => ({
...options,
key: index,
label: compile(options.label),
options: options.children.map((option) => ({
...option,
label: compile(option.label),
})),
})),
})),
[compile],
);
const sourceFieldsOptions = useSourceFieldsOptions();
const refGetInterface = useRef(getInterface);
useEffect(() => {
const fieldsMp = new Map();
if (!loading) {
if (data && data.length) {
Object.entries(data?.[0] || {}).forEach(([col, val]) => {
const sourceField = sourceFields[col];
const fieldInterface = inferInterface(col, val);
const defaultConfig = refGetInterface.current(fieldInterface)?.default;
const uiSchema = sourceField?.uiSchema || defaultConfig?.uiSchema || {};
fieldsMp.set(col, {
name: col,
interface: sourceField?.interface || fieldInterface,
type: sourceField?.type || defaultConfig?.type,
source: sourceField?.source,
uiSchema: {
title: col,
...uiSchema,
},
});
});
} else {
Object.entries(sourceFields || {}).forEach(([col, val]: [string, any]) =>
fieldsMp.set(col, {
name: col,
...val,
uiSchema: {
title: col,
...(val?.uiSchema || {}),
},
}),
);
}
}
if (field.value?.length) {
field.value.forEach((item) => {
if (fieldsMp.has(item.name)) {
fieldsMp.set(item.name, item);
}
});
}
// if (curFields?.data.length) {
// curFields.data.forEach((field: any) => {
// if (fieldsMp.has(field.name)) {
// fieldsMp.set(field.name, field);
// }
// });
// }
const fields = Array.from(fieldsMp.values());
if (!fields.length) {
return;
}
setDataSource(fields);
field.setValue(fields);
}, [loading, data, field, sourceFields, curFields]);
if (loading) {
return <Spin />;
}
if (!data && !error) {
return <Alert showIcon message={t('Please use a valid SELECT or WITH AS statement')} />;
}
const err = error as any;
if (err) {
const errMsg =
err?.response?.data?.errors?.map?.((item: { message: string }) => item.message).join('\n') || err.message;
return <Alert showIcon message={`${t('SQL error: ')}${errMsg}`} type="error" />;
}
const handleFieldChange = (record: any, index: number) => {
const fields = [...dataSource];
fields.splice(index, 1, record);
setDataSource(fields);
field.setValue(
fields.map((f) => ({
...f,
source: typeof f.source === 'string' ? f.source : f.source?.filter?.(Boolean)?.join('.') || null,
})),
[compile],
);
};
const sourceFieldsOptions = useSourceFieldsOptions();
const columns = [
{
title: t('Field name'),
dataIndex: 'name',
key: 'name',
width: 130,
},
{
title: t('Field source'),
dataIndex: 'source',
key: 'source',
width: 200,
render: (text: string, record: any, index: number) => {
const field = dataSource[index];
return (
<Cascader
defaultValue={typeof text === 'string' ? text?.split('.') : text}
allowClear
options={compile(sourceFieldsOptions)}
placeholder={t('Select field source')}
onChange={(value: string[]) => {
let sourceField = sourceFields[value?.[1]];
if (!sourceField) {
sourceField = getCollectionField(value?.join('.') || '');
}
handleFieldChange(
{
...field,
source: value,
interface: sourceField?.interface,
type: sourceField?.type,
uiSchema: sourceField?.uiSchema,
},
index,
);
}}
/>
);
const refGetInterface = useRef(getInterface);
useEffect(() => {
const fieldsMp = new Map();
if (!loading) {
if (data && data.length) {
Object.entries(data?.[0] || {}).forEach(([col, val]) => {
const sourceField = sourceFields[col];
const fieldInterface = inferInterface(col, val);
const defaultConfig = refGetInterface.current(fieldInterface)?.default;
const uiSchema = sourceField?.uiSchema || defaultConfig?.uiSchema || {};
fieldsMp.set(col, {
name: col,
interface: sourceField?.interface || fieldInterface,
type: sourceField?.type || defaultConfig?.type,
source: sourceField?.source,
uiSchema: {
title: col,
...uiSchema,
},
});
});
} else {
Object.entries(sourceFields || {}).forEach(([col, val]: [string, any]) =>
fieldsMp.set(col, {
name: col,
...val,
uiSchema: {
title: col,
...(val?.uiSchema || {}),
},
}),
);
}
}
if (field.value?.length) {
field.value.forEach((item) => {
if (fieldsMp.has(item.name)) {
fieldsMp.set(item.name, item);
}
});
}
// if (curFields?.data.length) {
// curFields.data.forEach((field: any) => {
// if (fieldsMp.has(field.name)) {
// fieldsMp.set(field.name, field);
// }
// });
// }
const fields = Array.from(fieldsMp.values());
if (!fields.length) {
return;
}
setDataSource(fields);
field.setValue(fields);
}, [loading, data, field, sourceFields, curFields]);
if (loading) {
return <Spin />;
}
if (!data && !error) {
return <Alert showIcon message={t('Please use a valid SELECT or WITH AS statement')} />;
}
const err = error as any;
if (err) {
const errMsg =
err?.response?.data?.errors?.map?.((item: { message: string }) => item.message).join('\n') || err.message;
return <Alert showIcon message={`${t('SQL error: ')}${errMsg}`} type="error" />;
}
const handleFieldChange = (record: any, index: number) => {
const fields = [...dataSource];
fields.splice(index, 1, record);
setDataSource(fields);
field.setValue(
fields.map((f) => ({
...f,
source: typeof f.source === 'string' ? f.source : f.source?.filter?.(Boolean)?.join('.') || null,
})),
);
};
const columns = [
{
title: t('Field name'),
dataIndex: 'name',
key: 'name',
width: 130,
},
},
{
title: t('Field interface'),
dataIndex: 'interface',
key: 'interface',
width: 150,
render: (text: string, record: any, index: number) => {
const field = dataSource[index];
return field.source ? (
<Tag>{compile(getInterface(text)?.title) || text}</Tag>
) : (
<Select
defaultValue={field.interface || 'input'}
style={{ width: '100%' }}
popupMatchSelectWidth={false}
onChange={(value) => {
const interfaceConfig = getInterface(value);
handleFieldChange(
{
...field,
interface: value || null,
uiSchema: {
...interfaceConfig?.default?.uiSchema,
title: interfaceConfig?.default?.uiSchema?.title || field.uiSchema?.title,
{
title: t('Field source'),
dataIndex: 'source',
key: 'source',
width: 200,
render: (text: string, record: any, index: number) => {
const field = dataSource[index];
return (
<Cascader
defaultValue={typeof text === 'string' ? text?.split('.') : text}
allowClear
options={compile(sourceFieldsOptions)}
placeholder={t('Select field source')}
onChange={(value: string[]) => {
let sourceField = sourceFields[value?.[1]];
if (!sourceField) {
sourceField = getCollectionField(value?.join('.') || '');
}
handleFieldChange(
{
...field,
source: value,
interface: sourceField?.interface,
type: sourceField?.type,
uiSchema: sourceField?.uiSchema,
},
type: interfaceConfig?.default?.type,
},
index,
);
}}
allowClear={true}
options={interfaceOptions}
/>
);
index,
);
}}
/>
);
},
},
},
{
title: t('Field display name'),
dataIndex: 'title',
key: 'title',
width: 180,
render: (text: string, record: any, index: number) => {
const field = dataSource[index];
return (
<Input
value={field.uiSchema?.title || text}
defaultValue={field.uiSchema?.title !== undefined ? field.uiSchema.title : field?.name}
onChange={(e) =>
handleFieldChange({ ...field, uiSchema: { ...field?.uiSchema, title: e.target.value } }, index)
}
/>
);
{
title: t('Field interface'),
dataIndex: 'interface',
key: 'interface',
width: 150,
render: (text: string, record: any, index: number) => {
const field = dataSource[index];
return field.source ? (
<Tag>{compile(getInterface(text)?.title) || text}</Tag>
) : (
<Select
defaultValue={field.interface || 'input'}
style={{ width: '100%' }}
popupMatchSelectWidth={false}
onChange={(value) => {
const interfaceConfig = getInterface(value);
handleFieldChange(
{
...field,
interface: value || null,
uiSchema: {
...interfaceConfig?.default?.uiSchema,
title: interfaceConfig?.default?.uiSchema?.title || field.uiSchema?.title,
},
type: interfaceConfig?.default?.type,
},
index,
);
}}
allowClear={true}
options={interfaceOptions}
/>
);
},
},
},
];
return (
<Table
bordered
size="small"
columns={columns}
dataSource={dataSource}
scroll={{ y: 300 }}
pagination={false}
rowClassName="editable-row"
rowKey="name"
/>
);
});
{
title: t('Field display name'),
dataIndex: 'title',
key: 'title',
width: 180,
render: (text: string, record: any, index: number) => {
const field = dataSource[index];
return (
<Input
value={field.uiSchema?.title || text}
defaultValue={field.uiSchema?.title !== undefined ? field.uiSchema.title : field?.name}
onChange={(e) =>
handleFieldChange({ ...field, uiSchema: { ...field?.uiSchema, title: e.target.value } }, index)
}
/>
);
},
},
];
return (
<Table
bordered
size="small"
columns={columns}
dataSource={dataSource}
scroll={{ y: 300 }}
pagination={false}
rowClassName="editable-row"
rowKey="name"
/>
);
},
{ displayName: 'FieldsConfigure' },
);

97
packages/core/client/src/collection-manager/templates/components/sql-collection/PreviewTable.tsx
View File

@ -4,55 +4,58 @@ import { Table } from 'antd';
import { Schema, observer, useForm } from '@formily/react';
import { useTranslation } from 'react-i18next';
export const PreviewTable = observer(() => {
const { data: res, loading, error } = useAsyncData();
const { data } = res || {};
const { t } = useTranslation();
const form = useForm();
export const PreviewTable = observer(
() => {
const { data: res, loading, error } = useAsyncData();
const { data } = res || {};
const { t } = useTranslation();
const form = useForm();
const fields = form.values.fields || [];
const titleMp = fields.reduce((mp: { [name: string]: string }, field: any) => {
mp[field.name] = field?.uiSchema?.title;
return mp;
}, {});
const fields = form.values.fields || [];
const titleMp = fields.reduce((mp: { [name: string]: string }, field: any) => {
mp[field.name] = field?.uiSchema?.title;
return mp;
}, {});
const columns = error
? []
: Object.keys(data?.[0] || {}).map((col) => {
const title = titleMp[col];
return {
title: Schema.compile(title || col, { t }),
dataIndex: col,
key: col,
};
});
const columns = error
? []
: Object.keys(data?.[0] || {}).map((col) => {
const title = titleMp[col];
return {
title: Schema.compile(title || col, { t }),
dataIndex: col,
key: col,
};
});
const dataSource = error
? []
: data?.map((record: any, index: number) => {
const compiledRecord = Object.entries(record).reduce(
(mp: { [key: string]: any }, [key, val]: [string, any]) => {
if (typeof val !== 'string') {
mp[key] = val;
const dataSource = error
? []
: data?.map((record: any, index: number) => {
const compiledRecord = Object.entries(record).reduce(
(mp: { [key: string]: any }, [key, val]: [string, any]) => {
if (typeof val !== 'string') {
mp[key] = val;
return mp;
}
const compiled = Schema.compile(val, { t });
mp[key] = t(compiled);
return mp;
}
const compiled = Schema.compile(val, { t });
mp[key] = t(compiled);
return mp;
},
{},
);
return { ...compiledRecord, key: index };
});
},
{},
);
return { ...compiledRecord, key: index };
});
return (
<Table
bordered
dataSource={dataSource}
columns={columns}
scroll={{ x: columns.length * 150, y: 300 }}
loading={loading}
rowKey="key"
/>
);
});
return (
<Table
bordered
dataSource={dataSource}
columns={columns}
scroll={{ x: columns.length * 150, y: 300 }}
loading={loading}
rowKey="key"
/>
);
},
{ displayName: 'PreviewTable' },
);

1
packages/core/client/src/data-source/collection/AssociationProvider.tsx
View File

@ -12,6 +12,7 @@ export interface AssociationProviderProps {
}
const ParentCollectionContext = createContext<Collection>(null);
ParentCollectionContext.displayName = 'ParentCollectionContext';
const ParentCollectionProvider = (props) => {
const collection = useCollection();

1
packages/core/client/src/document-title/index.tsx
View File

@ -13,6 +13,7 @@ export const DocumentTitleContext = createContext<DocumentTitleContextProps>({
title: null,
setTitle() {},
});
DocumentTitleContext.displayName = 'DocumentTitleContext';
export const DocumentTitleProvider: React.FC<{ addonBefore?: string; addonAfter?: string }> = (props) => {
const { addonBefore, addonAfter } = props;

1
packages/core/client/src/filter-provider/FilterProvider.tsx
View File

@ -58,6 +58,7 @@ interface FilterContextValue {
}
const FilterContext = createContext<FilterContextValue>(null);
FilterContext.displayName = 'FilterContext';
/**
* 主要用于记录当前页面中的数据区块的信息，用于在过滤区块中使用

1
packages/core/client/src/global-theme/AntdAppProvider.tsx
View File

@ -15,6 +15,7 @@ const AppInner = memo(({ children }: { children: React.ReactNode }) => {
return <>{children}</>;
});
AppInner.displayName = 'AppInner';
const AntdAppProvider = ({ children }: { children: React.ReactNode }) => {
return (

1
packages/core/client/src/global-theme/index.tsx
View File

@ -25,6 +25,7 @@ interface GlobalThemeContextProps {
}
const GlobalThemeContext = createContext<GlobalThemeContextProps>(null);
GlobalThemeContext.displayName = 'GlobalThemeContext';
export const useGlobalTheme = () => {
return React.useContext(GlobalThemeContext) || ({ theme: {}, isDarkTheme: false } as GlobalThemeContextProps);

2
packages/core/client/src/hooks/useMenuItem.tsx
View File

@ -10,7 +10,9 @@ type Item = MenuProps['items'][0] & {
};
export const GetMenuItemContext = createContext<{ collectMenuItem?(item: Item): void; onChange?: () => void }>(null);
GetMenuItemContext.displayName = 'GetMenuItemContext';
export const GetMenuItemsContext = createContext<{ pushMenuItem?(item: Item): void }>(null);
GetMenuItemsContext.displayName = 'GetMenuItemsContext';
/**
* 用于为 SchemaInitializer.Item 组件提供一些方法，比如收集菜单项数据

121
packages/core/client/src/nocobase-buildin-plugin/index.tsx
View File

@ -65,30 +65,33 @@ const useErrorProps = (app: Application, error: any) => {
}
};
const AppError: FC<{ error: Error; app: Application }> = observer(({ app, error }) => {
const props = useErrorProps(app, error);
return (
<div>
<Result
className={css`
top: 50%;
position: absolute;
width: 100%;
transform: translate(0, -50%);
`}
status="error"
title={app.i18n.t('App error')}
subTitle={app.i18n.t(error?.message)}
extra={[
<Button type="primary" key="try" onClick={() => window.location.reload()}>
{app.i18n.t('Try again')}
</Button>,
]}
{...props}
/>
</div>
);
});
const AppError: FC<{ error: Error; app: Application }> = observer(
({ app, error }) => {
const props = useErrorProps(app, error);
return (
<div>
<Result
className={css`
top: 50%;
position: absolute;
width: 100%;
transform: translate(0, -50%);
`}
status="error"
title={app.i18n.t('App error')}
subTitle={app.i18n.t(error?.message)}
extra={[
<Button type="primary" key="try" onClick={() => window.location.reload()}>
{app.i18n.t('Try again')}
</Button>,
]}
{...props}
/>
</div>
);
},
{ displayName: 'AppError' },
);
const getProps = (app: Application) => {
if (app.ws.serverDown) {
@ -195,39 +198,45 @@ const getProps = (app: Application) => {
return {};
};
const AppMaintaining: FC<{ app: Application; error: Error }> = observer(({ app }) => {
const { icon, status, title, subTitle } = getProps(app);
return (
<div>
<Result
className={css`
top: 50%;
position: absolute;
width: 100%;
transform: translate(0, -50%);
`}
icon={icon}
status={status}
title={app.i18n.t(title)}
subTitle={app.i18n.t(subTitle)}
// extra={[
// <Button type="primary" key="try" onClick={() => window.location.reload()}>
// {app.i18n.t('Try again')}
// </Button>,
// ]}
/>
</div>
);
});
const AppMaintaining: FC<{ app: Application; error: Error }> = observer(
({ app }) => {
const { icon, status, title, subTitle } = getProps(app);
return (
<div>
<Result
className={css`
top: 50%;
position: absolute;
width: 100%;
transform: translate(0, -50%);
`}
icon={icon}
status={status}
title={app.i18n.t(title)}
subTitle={app.i18n.t(subTitle)}
// extra={[
// <Button type="primary" key="try" onClick={() => window.location.reload()}>
// {app.i18n.t('Try again')}
// </Button>,
// ]}
/>
</div>
);
},
{ displayName: 'AppMaintaining' },
);
const AppMaintainingDialog: FC<{ app: Application; error: Error }> = observer(({ app }) => {
const { icon, status, title, subTitle } = getProps(app);
return (
<Modal open={true} footer={null} closable={false}>
<Result icon={icon} status={status} title={app.i18n.t(title)} subTitle={app.i18n.t(subTitle)} />
</Modal>
);
});
const AppMaintainingDialog: FC<{ app: Application; error: Error }> = observer(
({ app }) => {
const { icon, status, title, subTitle } = getProps(app);
return (
<Modal open={true} footer={null} closable={false}>
<Result icon={icon} status={status} title={app.i18n.t(title)} subTitle={app.i18n.t(subTitle)} />
</Modal>
);
},
{ displayName: 'AppMaintainingDialog' },
);
const AppNotFound = () => {
const navigate = useNavigate();

1
packages/core/client/src/plugin-manager/context.ts
View File

@ -1,3 +1,4 @@
import { createContext } from 'react';
export const PinnedPluginListContext = createContext({ items: {} });
PinnedPluginListContext.displayName = 'PinnedPluginListContext';

1
packages/core/client/src/pm/PluginDocument.tsx
View File

@ -73,3 +73,4 @@ export const PluginDocument: React.FC<PluginDocumentProps> = memo((props) => {
</div>
);
});
PluginDocument.displayName = 'PluginDocument';

1
packages/core/client/src/pm/PluginSetting.tsx
View File

@ -9,6 +9,7 @@ import { ADMIN_SETTINGS_PATH, PluginSettingsPageType, useApp } from '../applicat
import { useCompile } from '../schema-component';
export const SettingsCenterContext = createContext<any>({});
SettingsCenterContext.displayName = 'SettingsCenterContext';
function getMenuItems(list: PluginSettingsPageType[]) {
return list.map((item) => {

2
packages/core/client/src/record-provider/index.tsx
View File

@ -4,7 +4,9 @@ import { CollectionRecordProvider } from '../data-source';
import { useCurrentUserContext } from '../user';
export const RecordContext_deprecated = createContext({});
RecordContext_deprecated.displayName = 'RecordContext_deprecated';
export const RecordIndexContext = createContext(null);
RecordIndexContext.displayName = 'RecordIndexContext';
/**
* @deprecated use `CollectionRecordProvider` instead

1
packages/core/client/src/route-switch/antd/admin-layout/index.tsx
View File

@ -54,6 +54,7 @@ const filterByACL = (schema, options) => {
};
const SchemaIdContext = createContext(null);
SchemaIdContext.displayName = 'SchemaIdContext';
const useMenuProps = () => {
const defaultSelectedUid = useContext(SchemaIdContext);
return {

1
packages/core/client/src/schema-component/antd/action/context.tsx
View File

@ -4,6 +4,7 @@ import React, { createContext } from 'react';
import { useActionContext } from './hooks';
export const ActionContext = createContext<ActionContextProps>({});
ActionContext.displayName = 'ActionContext';
export const ActionContextProvider: React.FC<ActionContextProps & { value?: ActionContextProps }> = (props) => {
const contextProps = useActionContext();

211
packages/core/client/src/schema-component/antd/association-field/AssociationSelect.tsx
View File

@ -40,116 +40,119 @@ export const filterAnalyses = (filters): any[] => {
return results;
};
const InternalAssociationSelect = observer((props: AssociationSelectProps) => {
const { objectValue = true } = props;
const field: any = useField();
const fieldSchema = useFieldSchema();
const service = useServiceOptions(props);
const { options: collectionField } = useAssociationFieldContext();
const initValue = isVariable(props.value) ? undefined : props.value;
const value = Array.isArray(initValue) ? initValue.filter(Boolean) : initValue;
// 因为通过 Schema 的形式书写的组件，在值变更的时候 `value` 的值没有改变，所以需要维护一个 `innerValue` 来变更值
const [innerValue, setInnerValue] = useState(value);
const addMode = fieldSchema['x-component-props']?.addMode;
const isAllowAddNew = fieldSchema['x-add-new'];
const { t } = useTranslation();
const { multiple } = props;
const form = useForm();
const api = useAPIClient();
const resource = api.resource(collectionField.target);
const linkageFields = filterAnalyses(field.componentProps?.service?.params?.filter);
const recordData = useCollectionRecordData();
useEffect(() => {
const initValue = isVariable(field.value) ? undefined : field.value;
const InternalAssociationSelect = observer(
(props: AssociationSelectProps) => {
const { objectValue = true } = props;
const field: any = useField();
const fieldSchema = useFieldSchema();
const service = useServiceOptions(props);
const { options: collectionField } = useAssociationFieldContext();
const initValue = isVariable(props.value) ? undefined : props.value;
const value = Array.isArray(initValue) ? initValue.filter(Boolean) : initValue;
setInnerValue(value);
}, [field.value]);
useEffect(() => {
const id = uid();
form.addEffects(id, () => {
if (linkageFields?.length > 0) {
//支持深层次子表单
onFieldChange('*', (fieldPath: any) => {
if (linkageFields.includes(fieldPath.props.name) && field.value) {
props.onChange(field.initialValue);
setInnerValue(field.initialValue);
}
});
}
});
// 因为通过 Schema 的形式书写的组件，在值变更的时候 `value` 的值没有改变，所以需要维护一个 `innerValue` 来变更值
const [innerValue, setInnerValue] = useState(value);
const addMode = fieldSchema['x-component-props']?.addMode;
const isAllowAddNew = fieldSchema['x-add-new'];
const { t } = useTranslation();
const { multiple } = props;
const form = useForm();
const api = useAPIClient();
const resource = api.resource(collectionField.target);
const linkageFields = filterAnalyses(field.componentProps?.service?.params?.filter);
const recordData = useCollectionRecordData();
useEffect(() => {
const initValue = isVariable(field.value) ? undefined : field.value;
const value = Array.isArray(initValue) ? initValue.filter(Boolean) : initValue;
setInnerValue(value);
}, [field.value]);
useEffect(() => {
const id = uid();
form.addEffects(id, () => {
if (linkageFields?.length > 0) {
//支持深层次子表单
onFieldChange('*', (fieldPath: any) => {
if (linkageFields.includes(fieldPath.props.name) && field.value) {
props.onChange(field.initialValue);
setInnerValue(field.initialValue);
}
});
}
});
return () => {
form.removeEffects(id);
return () => {
form.removeEffects(id);
};
}, []);
const handleCreateAction = async (props) => {
const { search: value, callBack } = props;
const {
data: { data },
} = await resource.create({
values: {
[field?.componentProps?.fieldNames?.label || 'id']: value,
},
});
if (data) {
if (['m2m', 'o2m'].includes(collectionField?.interface) && multiple !== false) {
const values = form.getValuesIn(field.path) || [];
values.push(data);
form.setValuesIn(field.path, values);
field.onInput(values);
} else {
form.setValuesIn(field.path, data);
field.onInput(data);
}
isFunction(callBack) && callBack?.();
message.success(t('Saved successfully'));
}
};
const QuickAddContent = (props) => {
return (
<div
onClick={() => handleCreateAction(props)}
style={{ cursor: 'pointer', padding: '5px 12px', color: '#0d0c0c' }}
>
<PlusOutlined />
<span style={{ paddingLeft: 5 }}>{t('Add') + ` “${props.search}” `}</span>
</div>
);
};
}, []);
const handleCreateAction = async (props) => {
const { search: value, callBack } = props;
const {
data: { data },
} = await resource.create({
values: {
[field?.componentProps?.fieldNames?.label || 'id']: value,
},
});
if (data) {
if (['m2m', 'o2m'].includes(collectionField?.interface) && multiple !== false) {
const values = form.getValuesIn(field.path) || [];
values.push(data);
form.setValuesIn(field.path, values);
field.onInput(values);
} else {
form.setValuesIn(field.path, data);
field.onInput(data);
}
isFunction(callBack) && callBack?.();
message.success(t('Saved successfully'));
}
};
const QuickAddContent = (props) => {
return (
<div
onClick={() => handleCreateAction(props)}
style={{ cursor: 'pointer', padding: '5px 12px', color: '#0d0c0c' }}
>
<PlusOutlined />
<span style={{ paddingLeft: 5 }}>{t('Add') + ` “${props.search}” `}</span>
<div key={fieldSchema.name}>
<Space.Compact style={{ display: 'flex', lineHeight: '32px' }}>
<RemoteSelect
style={{ width: '100%' }}
{...props}
size={'middle'}
objectValue={objectValue}
value={value || innerValue}
service={service}
onChange={(value) => {
const val = value?.length !== 0 ? value : null;
props.onChange?.(val);
}}
CustomDropdownRender={addMode === 'quickAdd' && QuickAddContent}
></RemoteSelect>
{(addMode === 'modalAdd' || isAllowAddNew) && (
<RecordProvider isNew={true} record={null} parent={recordData}>
<RecursionField
onlyRenderProperties
basePath={field.address}
schema={fieldSchema}
filterProperties={(s) => {
return s['x-component'] === 'Action';
}}
/>
</RecordProvider>
)}
</Space.Compact>
</div>
);
};
return (
<div key={fieldSchema.name}>
<Space.Compact style={{ display: 'flex', lineHeight: '32px' }}>
<RemoteSelect
style={{ width: '100%' }}
{...props}
size={'middle'}
objectValue={objectValue}
value={value || innerValue}
service={service}
onChange={(value) => {
const val = value?.length !== 0 ? value : null;
props.onChange?.(val);
}}
CustomDropdownRender={addMode === 'quickAdd' && QuickAddContent}
></RemoteSelect>
{(addMode === 'modalAdd' || isAllowAddNew) && (
<RecordProvider isNew={true} record={null} parent={recordData}>
<RecursionField
onlyRenderProperties
basePath={field.address}
schema={fieldSchema}
filterProperties={(s) => {
return s['x-component'] === 'Action';
}}
/>
</RecordProvider>
)}
</Space.Compact>
</div>
);
});
},
{ displayName: 'AssociationSelect' },
);
interface AssociationSelectInterface {
(props: any): React.ReactElement;

1
packages/core/client/src/schema-component/antd/association-field/context.ts
View File

@ -10,3 +10,4 @@ export interface AssociationFieldContextProps {
}
export const AssociationFieldContext = createContext<AssociationFieldContextProps>({});
AssociationFieldContext.displayName = 'AssociationFieldContext';

1
packages/core/client/src/schema-component/antd/association-field/hooks.ts
View File

@ -179,6 +179,7 @@ export const useFieldNames = (props) => {
};
const SubFormContext = createContext<Record<string, any>>(null);
SubFormContext.displayName = 'SubFormContext';
export const SubFormProvider = SubFormContext.Provider;
/**

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

@ -12,6 +12,7 @@ import { Action } from '../action';
import { StablePopover } from '../popover';
export const FilterActionContext = createContext<any>(null);
FilterActionContext.displayName = 'FilterActionContext';
export const FilterAction = observer(
(props: any) => {

3
packages/core/client/src/schema-component/antd/filter/context.ts
View File

@ -12,5 +12,8 @@ export interface FilterContextProps {
}
export const RemoveConditionContext = createContext(null);
RemoveConditionContext.displayName = 'RemoveConditionContext';
export const FilterContext = createContext<FilterContextProps>(null);
FilterContext.displayName = 'FilterContext';
export const FilterLogicContext = createContext(null);
FilterLogicContext.displayName = 'FilterLogicContext';

19
packages/core/client/src/schema-component/antd/filter/useOperators.ts
View File

@ -1,5 +1,6 @@
import { useFieldSchema } from '@formily/react';
import { useCollection_deprecated, useCollectionManager_deprecated } from '../../../collection-manager';
import { useMemo } from 'react';
/**
* 获取当前字段所支持的操作符列表
@ -7,15 +8,17 @@ import { useCollection_deprecated, useCollectionManager_deprecated } from '../..
*/
export const useOperatorList = (): any[] => {
const schema = useFieldSchema();
const fieldInterface = schema['x-designer-props']?.interface;
const { name } = useCollection_deprecated();
const { getCollectionFields, getInterface } = useCollectionManager_deprecated();
const collectionFields = getCollectionFields(name);
if (fieldInterface) {
return getInterface(fieldInterface)?.filterable?.operators || [];
}
const field = collectionFields.find((item) => item.name === schema.name);
return getInterface(field?.interface)?.filterable?.operators || [];
const res = useMemo(() => {
const fieldInterface = schema['x-designer-props']?.interface;
const collectionFields = getCollectionFields(name);
if (fieldInterface) {
return getInterface(fieldInterface)?.filterable?.operators || [];
}
const field = collectionFields.find((item) => item.name === schema.name);
return getInterface(field?.interface)?.filterable?.operators || [];
}, [schema.name]);
return res;
};

9
packages/core/client/src/schema-component/antd/form-dialog/index.tsx
View File

@ -78,9 +78,12 @@ export function FormDialog(title: any, id: any, renderer?: any, theme?: any): IF
root.unmount();
},
};
const DialogContent = observer(() => {
return <Fragment>{isFn(renderer) ? renderer(env.form) : renderer}</Fragment>;
});
const DialogContent = observer(
() => {
return <Fragment>{isFn(renderer) ? renderer(env.form) : renderer}</Fragment>;
},
{ displayName: 'DialogContent' },
);
const renderDialog = (open = true, resolve?: () => any, reject?: () => any) => {
const { form } = env;
if (!form) return null;

1
packages/core/client/src/schema-component/antd/form/Form.tsx
View File

@ -87,6 +87,7 @@ const useDefaultValues = (opts: any = {}, props: FormProps = {}) => {
};
const FormBlockContext = createContext<any>(null);
FormBlockContext.displayName = 'FormBlockContext';
export const Form: React.FC<FormProps> & { Designer?: any } = observer(
(props) => {

15
packages/core/client/src/schema-component/antd/g2plot/G2Plot.tsx
View File

@ -126,6 +126,7 @@ export const G2PlotRenderer = forwardRef(function <O = any>(props: ReactG2PlotPr
return <div className={cls(['g2plot', className])} ref={containerRef} />;
});
G2PlotRenderer.displayName = 'G2PlotRenderer';
export const G2Plot: any = observer(
(props: any) => {
@ -140,12 +141,14 @@ export const G2Plot: any = observer(
if (typeof fn === 'function') {
const result = fn.bind({ api })();
if (result?.then) {
result.then((data) => {
if (Array.isArray(data)) {
field.componentProps.config.data = data;
}
field.data.loading = false;
});
result
.then((data) => {
if (Array.isArray(data)) {
field.componentProps.config.data = data;
}
field.data.loading = false;
})
.catch(console.error);
} else {
field.data.loading = false;
}

1
packages/core/client/src/schema-component/antd/grid-card/GridCard.Decorator.tsx
View File

@ -5,6 +5,7 @@ import React, { createContext, useContext, useEffect, useMemo } from 'react';
import { BlockProvider, useBlockRequestContext, useParsedFilter } from '../../../block-provider';
import useStyles from './GridCard.Decorator.style';
export const GridCardBlockContext = createContext<any>({});
GridCardBlockContext.displayName = 'GridCardBlockContext';
const InternalGridCardBlockProvider = (props) => {
const { resource, service } = useBlockRequestContext();

3
packages/core/client/src/schema-component/antd/grid/Grid.tsx
View File

@ -11,8 +11,11 @@ import { useToken } from '../__builtins__';
import useStyles from './Grid.style';
const GridRowContext = createContext<any>({});
GridRowContext.displayName = 'GridRowContext';
const GridColContext = createContext<any>({});
GridColContext.displayName = 'GridColContext';
const GridContext = createContext<any>({});
GridContext.displayName = 'GridContext';
const breakRemoveOnGrid = (s: Schema) => s['x-component'] === 'Grid';
const breakRemoveOnRow = (s: Schema) => s['x-component'] === 'Grid.Row';

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

@ -77,3 +77,4 @@ export const EllipsisWithTooltip = forwardRef((props: Partial<IEllipsisWithToolt
</Popover>
);
});
EllipsisWithTooltip.displayName = 'EllipsisWithTooltip';

1
packages/core/client/src/schema-component/antd/input/Json.tsx
View File

@ -67,3 +67,4 @@ export const Json = React.forwardRef<typeof Input.TextArea, JSONTextAreaProps>(
);
},
);
Json.displayName = 'Json';

1
packages/core/client/src/schema-component/antd/list/List.Decorator.tsx
View File

@ -7,6 +7,7 @@ import React, { createContext, useContext, useEffect, useMemo } from 'react';
import { BlockProvider, useBlockRequestContext, useParsedFilter } from '../../../block-provider';
export const ListBlockContext = createContext<any>({});
ListBlockContext.displayName = 'ListBlockContext';
const InternalListBlockProvider = (props) => {
const { resource, service } = useBlockRequestContext();

1
packages/core/client/src/schema-component/antd/menu/Menu.tsx
View File

@ -350,7 +350,6 @@ const SideMenu = ({
};
const MenuModeContext = createContext(null);
MenuModeContext.displayName = 'MenuModeContext';
const useSideMenuRef = () => {

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

@ -6,74 +6,80 @@ import React, { useMemo, useRef } from 'react';
import { useCollectionManager_deprecated } from '../../../collection-manager';
import { StablePopover } from '../popover';
export const Editable = observer((props) => {
const field: any = useField();
const containerRef = useRef(null);
const fieldSchema = useFieldSchema();
const value = field.value;
const schema: any = {
name: fieldSchema.name,
'x-collection-field': fieldSchema['x-collection-field'],
'x-component': 'CollectionField',
'x-read-pretty': true,
default: value,
'x-component-props': fieldSchema['x-component-props'],
};
const form = useMemo(
() =>
createForm({
values: {
[fieldSchema.name]: value,
},
}),
[field.value, fieldSchema['x-component-props']],
);
const getContainer = () => {
return containerRef.current;
};
export const Editable = observer(
(props) => {
const field: any = useField();
const containerRef = useRef(null);
const fieldSchema = useFieldSchema();
const value = field.value;
const schema: any = {
name: fieldSchema.name,
'x-collection-field': fieldSchema['x-collection-field'],
'x-component': 'CollectionField',
'x-read-pretty': true,
default: value,
'x-component-props': fieldSchema['x-component-props'],
};
const form = useMemo(
() =>
createForm({
values: {
[fieldSchema.name]: value,
},
}),
[field.value, fieldSchema['x-component-props']],
);
const getContainer = () => {
return containerRef.current;
};
const modifiedChildren = React.Children.map(props.children, (child) => {
if (React.isValidElement(child)) {
//@ts-ignore
return React.cloneElement(child, { getContainer });
}
return child;
});
const modifiedChildren = React.Children.map(props.children, (child) => {
if (React.isValidElement(child)) {
//@ts-ignore
return React.cloneElement(child, { getContainer });
}
return child;
});
return (
<FormItem {...props} labelStyle={{ display: 'none' }}>
<StablePopover
content={
<div style={{ width: '100%', height: '100%', minWidth: 500 }}>
<div ref={containerRef}>{modifiedChildren}</div>
</div>
}
trigger="click"
placement={'bottomLeft'}
overlayClassName={css`
padding-top: 0;
.ant-popover-arrow {
display: none;
return (
<FormItem {...props} labelStyle={{ display: 'none' }}>
<StablePopover
content={
<div style={{ width: '100%', height: '100%', minWidth: 500 }}>
<div ref={containerRef}>{modifiedChildren}</div>
</div>
}
`}
>
<div style={{ minHeight: 30, padding: '0 8px' }}>
<FormContext.Provider value={form}>
<RecursionField schema={schema} name={fieldSchema.name} />
</FormContext.Provider>
</div>
</StablePopover>
</FormItem>
);
});
trigger="click"
placement={'bottomLeft'}
overlayClassName={css`
padding-top: 0;
.ant-popover-arrow {
display: none;
}
`}
>
<div style={{ minHeight: 30, padding: '0 8px' }}>
<FormContext.Provider value={form}>
<RecursionField schema={schema} name={fieldSchema.name} />
</FormContext.Provider>
</div>
</StablePopover>
</FormItem>
);
},
{ displayName: 'Editable' },
);
export const QuickEdit = observer((props) => {
const field = useField<Field>();
const { getCollectionJoinField } = useCollectionManager_deprecated();
const fieldSchema = useFieldSchema();
const collectionField = getCollectionJoinField(fieldSchema['x-collection-field']);
if (!collectionField) {
return null;
}
return field.editable ? <Editable {...props} /> : <FormItem {...props} style={{ padding: '0 8px' }} />;
});
export const QuickEdit = observer(
(props) => {
const field = useField<Field>();
const { getCollectionJoinField } = useCollectionManager_deprecated();
const fieldSchema = useFieldSchema();
const collectionField = getCollectionJoinField(fieldSchema['x-collection-field']);
if (!collectionField) {
return null;
}
return field.editable ? <Editable {...props} /> : <FormItem {...props} style={{ padding: '0 8px' }} />;
},
{ displayName: 'QuickEdit' },
);

1
packages/core/client/src/schema-component/antd/record-picker/InputRecordPicker.tsx
View File

@ -16,6 +16,7 @@ import { useFieldNames } from './useFieldNames';
import { getLabelFormatValue, useLabelUiSchema } from './util';
export const RecordPickerContext = createContext(null);
RecordPickerContext.displayName = 'RecordPickerContext';
function flatData(data) {
const newArr = [];

1
packages/core/client/src/schema-component/antd/table/demos/demo4.tsx
View File

@ -13,6 +13,7 @@ import {
import React, { createContext, useContext, useState } from 'react';
const DataSourceContext = createContext(null);
DataSourceContext.displayName = 'DataSourceContext';
const useSelectedRowKeys = () => {
const ctx = useContext(DataSourceContext);

1
packages/core/client/src/schema-component/antd/variable/Variable.tsx
View File

@ -7,6 +7,7 @@ import { RawTextArea } from './RawTextArea';
import { TextArea } from './TextArea';
const VariableScopeContext = createContext([]);
VariableScopeContext.displayName = 'VariableScopeContext';
export function VariableScopeProvider({ scope = [], children }) {
return <VariableScopeContext.Provider value={scope}>{children}</VariableScopeContext.Provider>;

1
packages/core/client/src/schema-component/antd/variable/XButton.tsx
View File

@ -15,3 +15,4 @@ export const XButton = forwardRef((props: ButtonProps, ref: any) => {
</Button>
);
});
XButton.displayName = 'XButton';

22
packages/core/client/src/schema-component/common/sortable-item/SortableItem.tsx
View File

@ -2,11 +2,13 @@ import { TinyColor } from '@ctrl/tinycolor';
import { useDraggable, useDroppable } from '@dnd-kit/core';
import { cx } from '@emotion/css';
import { Schema, observer, useField, useFieldSchema } from '@formily/react';
import React, { HTMLAttributes, createContext, useContext } from 'react';
import React, { HTMLAttributes, createContext, useContext, useMemo } from 'react';
import { useToken } from '../../antd/__builtins__';
export const DraggableContext = createContext(null);
DraggableContext.displayName = 'DraggableContext';
export const SortableContext = createContext(null);
SortableContext.displayName = 'SortableContext';
export const SortableProvider = (props) => {
const { id, data, children } = props;
@ -74,15 +76,17 @@ interface SortableItemProps extends HTMLAttributes<HTMLDivElement> {
export const SortableItem: React.FC<SortableItemProps> = observer(
(props) => {
const { schema, id, eid, removeParentsIfNoChildren, ...others } = useSortableItemProps(props);
const data = useMemo(() => {
return {
insertAdjacent: 'afterEnd',
schema: schema,
removeParentsIfNoChildren: removeParentsIfNoChildren ?? true,
};
}, [schema, removeParentsIfNoChildren]);
return (
<SortableProvider
id={id}
data={{
insertAdjacent: 'afterEnd',
schema: schema,
removeParentsIfNoChildren: removeParentsIfNoChildren ?? true,
}}
>
<SortableProvider id={id} data={data}>
<Sortable id={eid} {...others}>
{props.children}
</Sortable>

1
packages/core/client/src/schema-component/context.ts
View File

@ -2,3 +2,4 @@ import { createContext } from 'react';
import { ISchemaComponentContext } from './types';
export const SchemaComponentContext = createContext<ISchemaComponentContext>({});
SchemaComponentContext.displayName = 'SchemaComponentContext.Provider';

24
packages/core/client/src/schema-component/core/SchemaComponentOptions.tsx
View File

@ -1,5 +1,5 @@
import { ExpressionScope, SchemaComponentsContext, SchemaOptionsContext } from '@formily/react';
import React, { useContext } from 'react';
import React, { memo, useContext, useMemo } from 'react';
import { ISchemaComponentOptionsProps } from '../types';
export const useSchemaOptionsContext = () => {
@ -7,16 +7,28 @@ export const useSchemaOptionsContext = () => {
return options || {};
};
export const SchemaComponentOptions: React.FC<ISchemaComponentOptionsProps> = (props) => {
export const SchemaComponentOptions: React.FC<ISchemaComponentOptionsProps> = memo((props) => {
const { children } = props;
const options = useSchemaOptionsContext();
const components = { ...options.components, ...props.components };
const scope = { ...options.scope, ...props.scope };
const components = useMemo(() => {
return { ...options.components, ...props.components };
}, [options.components, props.components]);
const scope = useMemo(() => {
return { ...options.scope, ...props.scope };
}, [options.scope, props.scope]);
const schemaOptionsContextValue = useMemo(() => {
return { scope, components };
}, [scope, components]);
return (
<SchemaOptionsContext.Provider value={{ scope, components }}>
<SchemaOptionsContext.Provider value={schemaOptionsContextValue}>
<SchemaComponentsContext.Provider value={components}>
<ExpressionScope value={scope}>{children}</ExpressionScope>
</SchemaComponentsContext.Provider>
</SchemaOptionsContext.Provider>
);
};
});
SchemaComponentOptions.displayName = 'SchemaComponentOptions';

42
packages/core/client/src/schema-component/core/SchemaComponentProvider.tsx
View File

@ -44,28 +44,36 @@ Schema.registerCompiler(Registry.compile);
export const SchemaComponentProvider: React.FC<ISchemaComponentProvider> = (props) => {
const { designable, onDesignableChange, components, children } = props;
const [, setUid] = useState(uid());
const [uidValue, setUid] = useState(uid());
const [formId, setFormId] = useState(uid());
const form = useMemo(() => props.form || createForm(), [formId]);
const { t } = useTranslation();
const scope = { ...props.scope, t, randomString };
const scope = useMemo(() => {
return { ...props.scope, t, randomString };
}, [props.scope, t]);
const [active, setActive] = useState(designable);
const schemaComponentContextValue = useMemo(
() => ({
scope,
components,
reset: () => setFormId(uid()),
refresh: () => {
setUid(uid());
},
designable: typeof designable === 'boolean' ? designable : active,
setDesignable: (value) => {
if (typeof designable !== 'boolean') {
setActive(value);
}
onDesignableChange?.(value);
},
}),
[uidValue, scope, components, designable, active],
);
return (
<SchemaComponentContext.Provider
value={{
scope,
components,
reset: () => setFormId(uid()),
refresh: () => setUid(uid()),
designable: typeof designable === 'boolean' ? designable : active,
setDesignable: (value) => {
if (typeof designable !== 'boolean') {
setActive(value);
}
onDesignableChange?.(value);
},
}}
>
<SchemaComponentContext.Provider value={schemaComponentContextValue}>
<FormProvider form={form}>
<SchemaComponentOptions inherit scope={scope} components={components}>
{children}

1
packages/core/client/src/schema-settings/DataTemplates/components/AsDefaultTemplate.tsx
View File

@ -36,3 +36,4 @@ export const AsDefaultTemplate = React.forwardRef((props: any, ref) => {
/>
);
});
AsDefaultTemplate.displayName = 'AsDefaultTemplate';

1
packages/core/client/src/schema-settings/DataTemplates/components/DataTemplateTitle.tsx
View File

@ -276,3 +276,4 @@ ArrayCollapse.Copy = React.forwardRef((props: any, ref) => {
/>
);
});
(ArrayCollapse as any).Copy.displayName = 'ArrayCollapse.Copy';

1
packages/core/client/src/schema-settings/LinkageRules/components/EnableLinkage.tsx
View File

@ -32,3 +32,4 @@ export const EnableLinkage = React.forwardRef((props: any, ref) => {
/>
);
});
EnableLinkage.displayName = 'EnableLinkage';

1
packages/core/client/src/schema-settings/LinkageRules/components/LinkageHeader.tsx
View File

@ -266,3 +266,4 @@ ArrayCollapse.Copy = React.forwardRef((props: any, ref) => {
/>
);
});
(ArrayCollapse as any).Copy.displayName = 'ArrayCollapse.Copy';

3
packages/core/client/src/schema-settings/LinkageRules/context.ts
View File

@ -11,5 +11,8 @@ export interface FilterContextProps {
}
export const RemoveActionContext = createContext(null);
RemoveActionContext.displayName = 'RemoveActionContext';
export const FilterContext = createContext<FilterContextProps>(null);
FilterContext.displayName = 'FilterContext';
export const LinkageLogicContext = createContext(null);
LinkageLogicContext.displayName = 'LinkageLogicContext';

1
packages/core/client/src/schema-settings/SchemaSettings.tsx
View File

@ -124,6 +124,7 @@ interface SchemaSettingsContextProps<T = any> {
}
const SchemaSettingsContext = createContext<SchemaSettingsContextProps>(null);
SchemaSettingsContext.displayName = 'SchemaSettingsContext';
export function useSchemaSettings<T = any>() {
return useContext(SchemaSettingsContext) as SchemaSettingsContextProps<T>;

1
packages/core/client/src/schema-templates/BlockTemplate.tsx
View File

@ -5,6 +5,7 @@ import { useSchemaTemplateManager } from './SchemaTemplateManagerProvider';
import { useTemplateBlockContext } from '../block-provider/TemplateBlockProvider';
const BlockTemplateContext = createContext<any>({});
BlockTemplateContext.displayName = 'BlockTemplateContext';
export const useBlockTemplateContext = () => {
return useContext(BlockTemplateContext);

1
packages/core/client/src/schema-templates/SchemaTemplateManagerProvider.tsx
View File

@ -11,6 +11,7 @@ import { BlockTemplate } from './BlockTemplate';
import { DEFAULT_DATA_SOURCE_KEY } from '../data-source';
export const SchemaTemplateManagerContext = createContext<any>({});
SchemaTemplateManagerContext.displayName = 'SchemaTemplateManagerContext';
export const SchemaTemplateManagerProvider: React.FC<any> = (props) => {
const { templates, refresh } = props;

1
packages/core/client/src/system-settings/SystemSettingsProvider.tsx
View File

@ -4,6 +4,7 @@ import { useRequest } from '../api-client';
import { useAppSpin } from '../application/hooks/useAppSpin';
export const SystemSettingsContext = createContext<Result<any, any>>(null);
SystemSettingsContext.displayName = 'SystemSettingsContext';
export const useSystemSettings = () => {
return useContext(SystemSettingsContext);

2
packages/core/client/src/user/CurrentUser.tsx
View File

@ -162,6 +162,8 @@ export const SettingsMenu: React.FC<{
};
export const DropdownVisibleContext = createContext(null);
DropdownVisibleContext.displayName = 'DropdownVisibleContext';
export const CurrentUser = () => {
const [visible, setVisible] = useState(false);
const { token } = useToken();

1
packages/core/client/src/user/CurrentUserProvider.tsx
View File

@ -6,6 +6,7 @@ import { useAppSpin } from '../application/hooks/useAppSpin';
import { useCompile } from '../schema-component';
export const CurrentUserContext = createContext<ReturnTypeOfUseRequest>(null);
CurrentUserContext.displayName = 'CurrentUserContext';
export const useCurrentUserContext = () => {
return useContext(CurrentUserContext);

1
packages/core/client/src/user/CurrentUserSettingsMenuProvider.tsx
View File

@ -24,6 +24,7 @@ interface OptionsOfAddMenuItem {
type Item = ItemType & { _options?: OptionsOfAddMenuItem };
const CurrentUserSettingsMenuContext = createContext<{ menuItems: React.MutableRefObject<Item[]> }>(null);
CurrentUserSettingsMenuContext.displayName = 'CurrentUserSettingsMenuContext';
export const useCurrentUserSettingsMenu = () => {
const { menuItems } = useContext(CurrentUserSettingsMenuContext) || {};

1
packages/core/client/src/variables/VariablesProvider.tsx
View File

@ -16,6 +16,7 @@ import { isVariable } from './utils/isVariable';
import { uniq } from './utils/uniq';
export const VariablesContext = createContext<VariablesContextType>(null);
VariablesContext.displayName = 'VariablesContext';
const variableToCollectionName = {};

1
packages/plugins/@nocobase/plugin-acl/src/client/RolesManagerProvider.tsx
View File

@ -6,3 +6,4 @@ export const RolesManagerContext = createContext<{
}>({
role: null,
} as any);
RolesManagerContext.displayName = 'RolesManagerContext';

1
packages/plugins/@nocobase/plugin-acl/src/client/permissions/AvailableActions.tsx
View File

@ -3,6 +3,7 @@ import { Spin } from 'antd';
import React, { createContext, useContext } from 'react';
const AvailableActionsContext = createContext([]);
AvailableActionsContext.displayName = 'AvailableActionsContext';
export const AvailableActionsProvider: React.FC = (props) => {
const { data, loading } = useRequest<{

1
packages/plugins/@nocobase/plugin-acl/src/client/permissions/MenuItemsProvider.tsx
View File

@ -3,6 +3,7 @@ import { Spin } from 'antd';
import React, { createContext, useContext } from 'react';
const MenuItemsContext = createContext(null);
MenuItemsContext.displayName = 'MenuItemsContext';
export const toItems = (properties = {}) => {
const items = [];

1
packages/plugins/@nocobase/plugin-acl/src/client/permissions/RolesResourcesActions.tsx
View File

@ -28,6 +28,7 @@ const toActionMap = (arr: any[]) => {
};
export const RoleResourceCollectionContext = createContext<any>({});
RoleResourceCollectionContext.displayName = 'RoleResourceCollectionContext';
export const RolesResourcesActions = connect((props) => {
const { styles } = useStyles();

1
packages/plugins/@nocobase/plugin-acl/src/client/permissions/ScopeSelect.tsx
View File

@ -4,6 +4,7 @@ import { FormProvider, SchemaComponent } from '@nocobase/client';
import { scopesSchema } from '../schemas/scopes';
const RolesResourcesScopesSelectedRowKeysContext = createContext(null);
RolesResourcesScopesSelectedRowKeysContext.displayName = 'RolesResourcesScopesSelectedRowKeysContext';
const RolesResourcesScopesSelectedRowKeysProvider: React.FC = (props) => {
const [keys, setKeys] = useState([]);

1
packages/plugins/@nocobase/plugin-audit-logs/src/client/deplicated/AuditLogs.tsx
View File

@ -103,6 +103,7 @@ const Value = observer(
);
const IsAssociationBlock = createContext(null);
IsAssociationBlock.displayName = 'IsAssociationBlock';
export const AuditLogs: any = () => {
const isAssoc = useContext(IsAssociationBlock);

1
packages/plugins/@nocobase/plugin-auth/src/client/authenticator.ts
View File

@ -12,6 +12,7 @@ export type Authenticator = {
};
export const AuthenticatorsContext = createContext<Authenticator[]>([]);
AuthenticatorsContext.displayName = 'AuthenticatorsContext';
export const useAuthenticator = (name: string) => {
const authenticators = useContext(AuthenticatorsContext);

1
packages/plugins/@nocobase/plugin-auth/src/client/pages/SignUpPage.tsx
View File

@ -11,6 +11,7 @@ export const SignupPageContext = createContext<{
}>;
};
}>({});
SignupPageContext.displayName = 'SignupPageContext';
export const SignupPageProvider: React.FC<{
authType: string;

15
packages/plugins/@nocobase/plugin-auth/src/client/settings/Options.tsx
View File

@ -34,9 +34,12 @@ export const useAdminSettingsForm = (authType: string) => {
return auth?.components?.AdminSettingsForm;
};
export const Options = observer(() => {
const form = useForm();
const record = useRecord();
const Component = useAdminSettingsForm(form.values.authType || record.authType);
return Component ? <Component /> : null;
});
export const Options = observer(
() => {
const form = useForm();
const record = useRecord();
const Component = useAdminSettingsForm(form.values.authType || record.authType);
return Component ? <Component /> : null;
},
{ displayName: 'Options' },
);

2
packages/plugins/@nocobase/plugin-auth/src/client/settings/authType.ts
View File

@ -3,6 +3,7 @@ import { createContext, useContext } from 'react';
export const AuthTypeContext = createContext<{
type: string;
}>({ type: '' });
AuthTypeContext.displayName = 'AuthTypeContext';
export const AuthTypesContext = createContext<{
types: {
@ -11,6 +12,7 @@ export const AuthTypesContext = createContext<{
value: string;
}[];
}>({ types: [] });
AuthTypesContext.displayName = 'AuthTypesContext';
export const useAuthTypes = () => {
const { types } = useContext(AuthTypesContext);

3
packages/plugins/@nocobase/plugin-calendar/src/client/calendar/context.ts
View File

@ -2,8 +2,11 @@ import { createContext, useContext } from 'react';
import type { ToolbarProps } from './types';
export const CalendarToolbarContext = createContext<ToolbarProps>(null);
CalendarToolbarContext.displayName = 'CalendarToolbarContext';
export const CalendarContext = createContext(null);
CalendarContext.displayName = 'CalendarContext';
export const DeleteEventContext = createContext(null);
DeleteEventContext.displayName = 'DeleteEventContext';
export const useDeleteEvent = () => {
return useContext(DeleteEventContext);

1
packages/plugins/@nocobase/plugin-calendar/src/client/schema-initializer/CalendarBlockProvider.tsx
View File

@ -5,6 +5,7 @@ import _ from 'lodash';
import React, { createContext, useContext, useEffect, useMemo } from 'react';
export const CalendarBlockContext = createContext<any>({});
CalendarBlockContext.displayName = 'CalendarBlockContext';
const InternalCalendarBlockProvider = (props) => {
const { fieldNames, showLunar } = props;

1
packages/plugins/@nocobase/plugin-charts/src/client/ChartQueryMetadataProvider.tsx
View File

@ -7,6 +7,7 @@ export const ChartQueryMetadataContext = createContext({
refresh: () => {},
data: [] as any[],
});
ChartQueryMetadataContext.displayName = 'ChartQueryMetadataContext';
export const ChartQueryMetadataProvider: React.FC = (props) => {
const api = useAPIClient();

1
packages/plugins/@nocobase/plugin-data-source-manager/src/client/DatabaseConnectionProvider.tsx
View File

@ -3,6 +3,7 @@ import React, { FC, useState, createContext } from 'react';
import * as hooks from './hooks';
export const DataSourceContext = createContext(null);
DataSourceContext.displayName = 'DataSourceContext';
export const DatabaseConnectionProvider: FC = (props) => {
const [dataSource, setDataSource] = useState(null);

1
packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/CollectionsManager/CollectionFields.tsx
View File

@ -33,6 +33,7 @@ const RemoteCollectionContext = createContext<{
refreshRM: Function;
titleField: string;
}>({ refreshRM: () => {}, titleField: null, targetCollection: null });
RemoteCollectionContext.displayName = 'RemoteCollectionContext';
export const useRemoteCollectionContext = () => {
return useContext(RemoteCollectionContext);
};

67
packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/CollectionsManager/components/FieldTitleInput.tsx
View File

@ -4,38 +4,41 @@ import { debounce } from 'lodash';
import React, { useState, useMemo, useEffect } from 'react';
import { useRecord } from '@nocobase/client';
export const FieldTitleInput = observer((props: any) => {
const { value, handleFieldChange } = props;
const record = useRecord();
const [titleValue, setTitleValue] = useState(value);
// 实时更新
const handleRealTimeChange = (newValue: string) => {
setTitleValue(newValue);
};
export const FieldTitleInput = observer(
(props: any) => {
const { value, handleFieldChange } = props;
const record = useRecord();
const [titleValue, setTitleValue] = useState(value);
// 实时更新
const handleRealTimeChange = (newValue: string) => {
setTitleValue(newValue);
};
// 防抖操作
const debouncedHandleFieldChange = useMemo(() => {
return debounce((newTitle: string) => {
handleFieldChange(
{
uiSchema: {
...record?.uiSchema,
title: newTitle,
// 防抖操作
const debouncedHandleFieldChange = useMemo(() => {
return debounce((newTitle: string) => {
handleFieldChange(
{
uiSchema: {
...record?.uiSchema,
title: newTitle,
},
},
},
record.name,
);
}, 1000);
}, [handleFieldChange, record]);
record.name,
);
}, 1000);
}, [handleFieldChange, record]);
// 统一处理函数，实时更新+防抖
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const newValue = e.target.value;
handleRealTimeChange(newValue);
debouncedHandleFieldChange(newValue);
};
useEffect(() => {
setTitleValue(value);
}, [value]);
return <Input value={titleValue} onChange={handleChange} />;
});
// 统一处理函数，实时更新+防抖
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const newValue = e.target.value;
handleRealTimeChange(newValue);
debouncedHandleFieldChange(newValue);
};
useEffect(() => {
setTitleValue(value);
}, [value]);
return <Input value={titleValue} onChange={handleChange} />;
},
{ displayName: 'FieldTitleInput' },
);

1
packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/PermissionManager/DataSourceTable.tsx
View File

@ -11,6 +11,7 @@ import { dataSourceSchema } from './schemas/dataSourceTable';
import { PermissionProvider } from './PermisionProvider';
const AvailableActionsContext = createContext([]);
AvailableActionsContext.displayName = 'AvailableActionsContext';
const AvailableActionsProver: React.FC = (props) => {
const { data, loading } = useRequest<{

Some files were not shown because too many files have changed in this diff Show More