fix: params form render depds on fields
This commit is contained in:
@@ -22,8 +22,9 @@ type ParamsSettingsProps = {
|
|||||||
onValuesChange?: (changeValues: any, value: Record<string, any>) => void;
|
onValuesChange?: (changeValues: any, value: Record<string, any>) => void;
|
||||||
onModelChange?: (model: string) => void;
|
onModelChange?: (model: string) => void;
|
||||||
paramsConfig?: ParamsSchema[];
|
paramsConfig?: ParamsSchema[];
|
||||||
initialValues?: Record<string, any>; // for initial values when switch model
|
initialValues?: Record<string, any>; // for initial values when switch model, aviod update values from setParams
|
||||||
extra?: React.ReactNode;
|
extra?: React.ReactNode;
|
||||||
|
watchFields?: any[];
|
||||||
};
|
};
|
||||||
|
|
||||||
const ParamsSettings: React.FC<ParamsSettingsProps> = forwardRef(
|
const ParamsSettings: React.FC<ParamsSettingsProps> = forwardRef(
|
||||||
@@ -35,6 +36,7 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = forwardRef(
|
|||||||
initialValues,
|
initialValues,
|
||||||
paramsConfig,
|
paramsConfig,
|
||||||
modelList,
|
modelList,
|
||||||
|
watchFields = [],
|
||||||
showModelSelector = true,
|
showModelSelector = true,
|
||||||
extra
|
extra
|
||||||
},
|
},
|
||||||
@@ -43,14 +45,6 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = forwardRef(
|
|||||||
const intl = useIntl();
|
const intl = useIntl();
|
||||||
const [form] = Form.useForm();
|
const [form] = Form.useForm();
|
||||||
const formId = useId();
|
const formId = useId();
|
||||||
console.log('dynamic----params');
|
|
||||||
|
|
||||||
const dependFieldsValue = Form.useWatch([], form);
|
|
||||||
console.log(
|
|
||||||
'dependFieldsValue===',
|
|
||||||
dependFieldsValue,
|
|
||||||
paramsConfig?.flatMap((item) => item.dependencies || [])
|
|
||||||
);
|
|
||||||
|
|
||||||
useImperativeHandle(ref, () => ({
|
useImperativeHandle(ref, () => ({
|
||||||
form
|
form
|
||||||
@@ -129,7 +123,7 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = forwardRef(
|
|||||||
</Form.Item>
|
</Form.Item>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
}, [paramsConfig, intl, dependFieldsValue]);
|
}, [paramsConfig, intl, watchFields]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Form
|
<Form
|
||||||
|
|||||||
@@ -50,6 +50,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
|
|||||||
handleToggleParamsStyle,
|
handleToggleParamsStyle,
|
||||||
setParams,
|
setParams,
|
||||||
form,
|
form,
|
||||||
|
watchFields,
|
||||||
paramsConfig,
|
paramsConfig,
|
||||||
initialValues,
|
initialValues,
|
||||||
parameters,
|
parameters,
|
||||||
@@ -295,6 +296,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
|
|||||||
<div className="box">
|
<div className="box">
|
||||||
<DynamicParams
|
<DynamicParams
|
||||||
ref={form}
|
ref={form}
|
||||||
|
watchFields={watchFields}
|
||||||
parametersTitle={
|
parametersTitle={
|
||||||
<div className="flex-between flex-center">
|
<div className="flex-between flex-center">
|
||||||
<span>
|
<span>
|
||||||
|
|||||||
@@ -71,6 +71,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
|
|||||||
setParams,
|
setParams,
|
||||||
updateCacheFormData,
|
updateCacheFormData,
|
||||||
form,
|
form,
|
||||||
|
watchFields,
|
||||||
paramsConfig,
|
paramsConfig,
|
||||||
initialValues,
|
initialValues,
|
||||||
parameters,
|
parameters,
|
||||||
@@ -493,6 +494,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
|
|||||||
<div className="box">
|
<div className="box">
|
||||||
<DynamicParams
|
<DynamicParams
|
||||||
ref={form}
|
ref={form}
|
||||||
|
watchFields={watchFields}
|
||||||
parametersTitle={
|
parametersTitle={
|
||||||
<div className="flex-between flex-center">
|
<div className="flex-between flex-center">
|
||||||
<span>
|
<span>
|
||||||
|
|||||||
@@ -9,6 +9,7 @@ import {
|
|||||||
imageSizeOptions as imageSizeList
|
imageSizeOptions as imageSizeList
|
||||||
} from '@/pages/playground/config/params-config';
|
} from '@/pages/playground/config/params-config';
|
||||||
import { useSearchParams } from '@umijs/max';
|
import { useSearchParams } from '@umijs/max';
|
||||||
|
import { Form } from 'antd';
|
||||||
import _ from 'lodash';
|
import _ from 'lodash';
|
||||||
import React, {
|
import React, {
|
||||||
useCallback,
|
useCallback,
|
||||||
@@ -193,6 +194,11 @@ export const useInitImageMeta = (props: MessageProps) => {
|
|||||||
...openaiCompatibleFieldsDefaultValus,
|
...openaiCompatibleFieldsDefaultValus,
|
||||||
...advancedFieldsDefaultValus
|
...advancedFieldsDefaultValus
|
||||||
});
|
});
|
||||||
|
const randomSeed = Form.useWatch('random_seed', form.current?.form);
|
||||||
|
|
||||||
|
const watchFields = useMemo(() => {
|
||||||
|
return ['random_seed'];
|
||||||
|
}, [randomSeed]);
|
||||||
|
|
||||||
const getNewImageSizeOptions = (metaData: any) => {
|
const getNewImageSizeOptions = (metaData: any) => {
|
||||||
const { max_height, max_width } = metaData || {};
|
const { max_height, max_width } = metaData || {};
|
||||||
@@ -420,6 +426,7 @@ export const useInitImageMeta = (props: MessageProps) => {
|
|||||||
handleToggleParamsStyle,
|
handleToggleParamsStyle,
|
||||||
setParams,
|
setParams,
|
||||||
form,
|
form,
|
||||||
|
watchFields,
|
||||||
paramsConfig,
|
paramsConfig,
|
||||||
initialValues,
|
initialValues,
|
||||||
parameters,
|
parameters,
|
||||||
|
|||||||
Reference in New Issue
Block a user