Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2024-12-16 20:26:19 -05:00
Code Issues Activity

feat(console): add custom css editor debounce (#3378)

Browse source
This commit is contained in:
Darcy Ye 2023-03-14 12:44:41 +08:00 committed by GitHub
parent 57eb6ee452
commit 68ca4ae7a8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 20 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
packages/console/src/pages/SignInExperience/hooks/use-preview-configs.ts
View file

@ -1,5 +1,7 @@
import type { SignInExperience } from '@logto/schemas';
import { useMemo } from 'react';
import { useEffect, useState, useMemo } from 'react';
import useDebounce from '@/hooks/use-debounce';
import type { SignInExperienceForm } from '../types';
import { signInExperienceParser } from '../utils/form';
@ -7,15 +9,29 @@ import { signInExperienceParser } from '../utils/form';
const usePreviewConfigs = (
formData: SignInExperienceForm,
isDirty: boolean,
data?: SignInExperience
data?: SignInExperience,
timeDelay = 2000 // Render the preview after the user stops typing in the custom CSS editing box for two seconds.
) => {
const debounce = useDebounce(timeDelay);
const { customCss, ...restFormData } = formData;
const [debouncedCustomCss, setDebouncedCustomCss] = useState(customCss);
useEffect(() => {
debounce(() => {
setDebouncedCustomCss(customCss);
});
}, [debounce, customCss]);
return useMemo(() => {
if (!isDirty) {
return data;
}
return signInExperienceParser.toRemoteModel(formData);
}, [formData, isDirty, data]);
return signInExperienceParser.toRemoteModel({
...restFormData,
customCss: debouncedCustomCss,
});
}, [restFormData, debouncedCustomCss, isDirty, data]);
};
export default usePreviewConfigs;