test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-02 03:59:01 +08:00
Code Issues Actions 84 Packages Projects Releases Wiki Activity

fix: theme editor edit error (#42452)

Browse Source 
* fix: theme editor edit error

* chore: less bundle

* fix: themeEditor

* fix: lint

* fix: themeEditor

* fix: last fix

* chore: update

---------

Co-authored-by: 洋 <hetongyang@bytedance.com>
Co-authored-by: lijianan <574980606@qq.com>
This commit is contained in:
洋 2023-05-22 09:59:29 +08:00 committed by GitHub
parent e4f84e0e96
commit 2ff5feb1bd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
.dumi/pages/theme-editor/index.tsx
View File

@ -1,9 +1,9 @@
import React, { useCallback, useEffect, useState, Suspense, useLayoutEffect } from 'react'; import { css } from '@emotion/react';
import { enUS, ThemeEditor, zhCN } from 'antd-token-previewer'; import { Button, ConfigProvider, Modal, Spin, Typography, message } from 'antd';
import { Button, ConfigProvider, message, Modal, Spin, Typography } from 'antd'; import { ThemeEditor, enUS, zhCN } from 'antd-token-previewer';
import type { ThemeConfig } from 'antd/es/config-provider/context'; import type { ThemeConfig } from 'antd/es/config-provider/context';
import { Helmet } from 'dumi'; import { Helmet } from 'dumi';
import { css } from '@emotion/react'; import React, { Suspense, useCallback, useEffect, useState } from 'react';
import type { JSONContent, TextContent } from 'vanilla-jsoneditor'; import type { JSONContent, TextContent } from 'vanilla-jsoneditor';
import useLocale from '../../hooks/useLocale'; import useLocale from '../../hooks/useLocale';
@ -64,21 +64,19 @@ const CustomTheme = () => {
json: undefined, json: undefined,
}); });
useLayoutEffect(() => { useEffect(() => {
const storedConfig = localStorage.getItem(ANT_DESIGN_V5_THEME_EDITOR_THEME); const storedConfig = localStorage.getItem(ANT_DESIGN_V5_THEME_EDITOR_THEME);
if (storedConfig) { if (storedConfig) {
setTheme(() => JSON.parse(storedConfig)); const themeConfig = JSON.parse(storedConfig);
const originThemeConfig = {
json: themeConfig,
text: undefined,
};
setThemeConfigContent(originThemeConfig);
setTheme(themeConfig);
} }
}, []); }, []);
useEffect(() => {
if (editModelOpen === true) return;
setThemeConfigContent({
json: theme as any,
text: undefined,
});
}, [theme, editModelOpen]);
const styles = useStyle(); const styles = useStyle();
const handleSave = () => { const handleSave = () => {
@ -96,18 +94,13 @@ const CustomTheme = () => {
const handleEditConfigChange = (newcontent, preContent, status) => { const handleEditConfigChange = (newcontent, preContent, status) => {
setThemeConfigContent(newcontent); setThemeConfigContent(newcontent);
if ( setEditThemeFormatRight(!status.contentErrors);
Array.isArray(status.contentErrors.validationErrors) &&
status.contentErrors.validationErrors.length === 0
) {
setEditThemeFormatRight(true);
} else {
setEditThemeFormatRight(false);
}
}; };
const editSave = useCallback(() => { const editSave = useCallback(() => {
if (!editThemeFormatRight) { const contentFormatError = !editThemeFormatRight;
if (contentFormatError) {
message.error(locale.editJsonContentTypeError); message.error(locale.editJsonContentTypeError);
return; return;
} }
@ -121,7 +114,7 @@ const CustomTheme = () => {
setTheme(themeConfig); setTheme(themeConfig);
editModelClose(); editModelClose();
messageApi.success(locale.editSuccessfully); messageApi.success(locale.editSuccessfully);
}, [themeConfigContent]); }, [themeConfigContent, editThemeFormatRight]);
const handleExport = () => { const handleExport = () => {
const file = new File([JSON.stringify(theme, null, 2)], `Ant Design Theme.json`, { const file = new File([JSON.stringify(theme, null, 2)], `Ant Design Theme.json`, {

4
.dumi/theme/common/JSONEditor/index.tsx
View File

@ -1,6 +1,6 @@
import React, { useEffect, useRef } from 'react'; import React, { useEffect, useRef } from 'react';
import { JSONEditor, Mode } from 'vanilla-jsoneditor';
import type { JSONEditorPropsOptional } from 'vanilla-jsoneditor'; import type { JSONEditorPropsOptional } from 'vanilla-jsoneditor';
import { JSONEditor, Mode } from 'vanilla-jsoneditor';
const Editor: React.FC<JSONEditorPropsOptional> = (props) => { const Editor: React.FC<JSONEditorPropsOptional> = (props) => {
const editorRef = useRef<JSONEditor>(null); const editorRef = useRef<JSONEditor>(null);
@ -18,7 +18,7 @@ const Editor: React.FC<JSONEditorPropsOptional> = (props) => {
useEffect(() => { useEffect(() => {
editorRef.current?.updateProps(props); editorRef.current?.updateProps(props);
}, [props]); }, [props.content]);
return <div ref={container} className="vanilla-jsoneditor-react" />; return <div ref={container} className="vanilla-jsoneditor-react" />;
}; };