Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add Theme Config Editor #39621

Merged
merged 4 commits into from
Dec 27, 2022
Merged

feat: add Theme Config Editor #39621

merged 4 commits into from
Dec 27, 2022

Conversation

BoyYangzai
Copy link
Contributor

[中文版模板 / Chinese template]

🤔 This is a ...

  • New feature
  • Bug fix
  • Site / documentation update
  • Demo update
  • Component style update
  • TypeScript definition update
  • Bundle size optimization
  • Performance optimization
  • Enhancement feature
  • Internationalization
  • Refactoring
  • Code style optimization
  • Test Case
  • Branch merge
  • Workflow
  • Other (about what?)

🔗 Related issue link

💡 Background and solution

📝 Changelog

Language Changelog
🇺🇸 English add Theme Editor theme upload
🇨🇳 Chinese 添加主题编辑器主题上传功能

☑️ Self-Check before Merge

⚠️ Please check all items below before requesting a reviewing. ⚠️

  • Doc is updated/provided or not needed
  • Demo is updated/provided or not needed
  • TypeScript definition is updated/provided or not needed
  • Changelog is provided or not needed

@github-actions
Copy link
Contributor

github-actions bot commented Dec 17, 2022

@codecov
Copy link

codecov bot commented Dec 17, 2022

Codecov Report

Base: 100.00% // Head: 100.00% // No change to project coverage 👍

Coverage data is based on head (bb2cfc0) compared to base (1b03cfd).
Patch has no changes to coverable lines.

Additional details and impacted files
@@            Coverage Diff             @@
##           feature    #39621    +/-   ##
==========================================
  Coverage   100.00%   100.00%            
==========================================
  Files          546       556    +10     
  Lines         9363      9602   +239     
  Branches      2653      2714    +61     
==========================================
+ Hits          9363      9602   +239     
Impacted Files Coverage Δ
components/grid/row.tsx 100.00% <0.00%> (ø)
components/menu/index.tsx 100.00% <0.00%> (ø)
components/modal/Modal.tsx 100.00% <0.00%> (ø)
components/locale/fr_BE.tsx 100.00% <0.00%> (ø)
components/locale/fr_CA.tsx 100.00% <0.00%> (ø)
components/menu/SubMenu.tsx 100.00% <0.00%> (ø)
components/select/index.tsx 100.00% <0.00%> (ø)
components/anchor/Anchor.tsx 100.00% <0.00%> (ø)
components/menu/MenuItem.tsx 100.00% <0.00%> (ø)
components/mentions/index.tsx 100.00% <0.00%> (ø)
... and 28 more

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

@rohanbhangui
Copy link

can we make this a window that pops up that allows you to add plain text to a text area. Similar to how you copy the text area when exporting

@MadCcc
Copy link
Member

MadCcc commented Dec 18, 2022

can we make this a window that pops up that allows you to add plain text to a text area. Similar to how you copy the text area when exporting

That's good idea.

@BoyYangzai
Copy link
Contributor Author

@rohanbhangui @MadCcc
I made the second version, you can experience it
0c80512c829d262557ea3a6574ed660c
a46cec965356c23b42d2fbbb0a52c697
82add1bac89ca7eae2ab5b89094b0ef8

@rohanbhangui
Copy link

@BoyYangzai works well! Can we also get the theme editor indexed? It is very difficult to google for. or find. I stumbled on it by accident.

@BoyYangzai
Copy link
Contributor Author

@BoyYangzai works well! Can we also get the theme editor indexed? It is very difficult to google for. or find. I stumbled on it by accident.

glad for you approve 😊
I also think It's actually kind of hard to find
but I am not a member of Antd
@li-jia-nan @MadCcc
what do you think?

@BoyYangzai BoyYangzai changed the title feat: add Theme Editor theme upload feat: add Theme Config Editor Dec 18, 2022
@BoyYangzai BoyYangzai changed the base branch from master to feature December 18, 2022 15:57
const [editModelOpen, setEditModelOpen] = useState<boolean>(false);
const [editThemeFormatRight, setEditThemeFormatRight] = useState<boolean>(true);
const [content, setContent] = useState<TextContent>({
text: '{}',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

初始化的时候能不能让默认值是当前的配置,而不是空对象?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

初始化的时候能不能让默认值是当前的配置,而不是空对象?

可以

package.json Outdated
@@ -154,7 +154,8 @@
"rc-util": "^5.25.2",
"scroll-into-view-if-needed": "^3.0.3",
"shallowequal": "^1.1.0",
"throttle-debounce": "^5.0.0"
"throttle-debounce": "^5.0.0",
"vanilla-jsoneditor": "^0.11.4"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个是不是可以放进 devDependencies 里面?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个是不是可以放进 devDependencies 里面?

应该不可以吧qwq

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

应该放 devDependencies 里

@@ -1,19 +1,27 @@
import React, { useEffect } from 'react';
import { isObject } from 'lodash';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个干掉吧,lodash 太大了,可以自己实现

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个干掉吧,lodash 太大了,可以自己实现

ok

@BoyYangzai
Copy link
Contributor Author

@li-jia-nan
1.同步了 Config,打开即当前 Config
2.替代 Lodash

@@ -0,0 +1,4 @@
/* eslint-disable import/prefer-default-export */
export function isObject(target: any) {
return Object.prototype.toString.call(target) === '[object Object]';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

这个好像没办法作为 lodash 的平替吧,lodash 还判断了数组什么的

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里我用错了,只想要纯Object,所以这个就够了,不需要_.isObject

Copy link
Member

@li-jia-nan li-jia-nan Dec 18, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

OK,那就更不需要 lodash 了,因为 antd 中用到 lodash 的地方不多,所以后面计划把这个库干掉,体积实在太大了

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

OK,那就更不需要 lodash 了,因为 antd 中用到 lodash 的地方不多,所以后面计划把这个库干掉,体积实在太大了

哈哈哈,看到你们的pr了

@@ -0,0 +1,33 @@
import { JSONEditor as Editor, Mode, type JSONEditorPropsOptional } from 'vanilla-jsoneditor';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

vanilla-jsoneditor 可以加到 https://ant.design/docs/react/recommendation-cn 里来

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

vanilla-jsoneditor 可以加到 https://ant.design/docs/react/recommendation-cn 里来

收到🫡

@MadCcc
Copy link
Member

MadCcc commented Dec 19, 2022

导出功能应该不需要了,可以合并起来叫 代码/Code

@BoyYangzai
Copy link
Contributor Author

@MadCcc
image
这几个文字描述呢,有什么要求吗

@BoyYangzai
Copy link
Contributor Author

@li-jia-nan @afc163
1.编辑器依赖加入dev
2.移除导出功能,整体更改为代码/code
3.加入https://ant.design/docs/react/recommendation-cn 工具包link

/>
</div>
</Modal>
<Button onClick={handleEditConfig} icon={<EditOutlined />} style={{ marginRight: 8 }}>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<Button onClick={handleEditConfig} icon={<EditOutlined />} style={{ marginRight: 8 }}>
<Button onClick={handleEditConfig} style={{ marginRight: 8 }}>

exportDesc: '将下面的 JSON 对象复制到 ConfigProvider 的 theme 属性中即可。',
edit: '代码',
editModelTitle: '编辑主题配置',
editTitle: '在下方编辑你的主题 JSON 即可',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

将 JSON 复制到 ConfigProvider 的 theme 属性中套用主题。

@MadCcc
Copy link
Member

MadCcc commented Dec 27, 2022

ping

@MadCcc MadCcc merged commit 5644c63 into ant-design:feature Dec 27, 2022
MadCcc pushed a commit that referenced this pull request Dec 27, 2022
* feat: add Theme Editor theme upload

* verision 2

* 移除lodash、同步当前Config

* remove export,add into devDependencies,add tool link
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Ant Design Theme Editor theme upload
5 participants