diff --git a/.github/ISSUE_TEMPLATE/1_bug_report.yml b/.github/ISSUE_TEMPLATE/1_bug_report.yml
new file mode 100644
index 00000000..d181c387
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/1_bug_report.yml
@@ -0,0 +1,45 @@
+name: '🐛 反馈缺陷 Bug Report'
+description: '反馈一个问题缺陷 | Report an bug'
+title: '[Bug] '
+labels: '🐛 Bug'
+body:
+ - type: dropdown
+ attributes:
+ label: '💻 系统环境 | Operating System'
+ options:
+ - Windows
+ - macOS
+ - Ubuntu
+ - Other Linux
+ - Other
+ validations:
+ required: true
+ - type: dropdown
+ attributes:
+ label: '🌐 浏览器 | Browser'
+ options:
+ - Chrome
+ - Edge
+ - Safari
+ - Firefox
+ - Other
+ validations:
+ required: true
+ - type: textarea
+ attributes:
+ label: '🐛 问题描述 | Bug Description'
+ description: A clear and concise description of the bug.
+ validations:
+ required: true
+ - type: textarea
+ attributes:
+ label: '🚦 期望结果 | Expected Behavior'
+ description: A clear and concise description of what you expected to happen.
+ - type: textarea
+ attributes:
+ label: '📷 复现步骤 | Recurrence Steps'
+ description: A clear and concise description of how to recurrence.
+ - type: textarea
+ attributes:
+ label: '📝 补充信息 | Additional Information'
+ description: If your problem needs further explanation, or if the issue you're seeing cannot be reproduced in a gist, please add more information here.
diff --git a/.github/ISSUE_TEMPLATE/2_feature_request.yml b/.github/ISSUE_TEMPLATE/2_feature_request.yml
new file mode 100644
index 00000000..90e6a675
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/2_feature_request.yml
@@ -0,0 +1,21 @@
+name: '🌠 功能需求 Feature Request'
+description: '需求或建议 | Suggest an idea'
+title: '[Request] '
+labels: ['Feature Request']
+body:
+ - type: textarea
+ attributes:
+ label: '🥰 需求描述 | Feature Description'
+ description: Please add a clear and concise description of the problem you are seeking to solve with this feature request.
+ validations:
+ required: true
+ - type: textarea
+ attributes:
+ label: '🧐 解决方案 | Proposed Solution'
+ description: Describe the solution you'd like in a clear and concise manner.
+ validations:
+ required: true
+ - type: textarea
+ attributes:
+ label: '📝 补充信息 | Additional Information'
+ description: Add any other context about the problem here.
diff --git a/.github/ISSUE_TEMPLATE/3_question.yml b/.github/ISSUE_TEMPLATE/3_question.yml
new file mode 100644
index 00000000..f989f7d1
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/3_question.yml
@@ -0,0 +1,15 @@
+name: '😇 疑问或帮助 Help Wanted'
+description: '疑问或需要帮助 | Need help'
+title: '[Question] '
+labels: '😇 Help Wanted'
+body:
+ - type: textarea
+ attributes:
+ label: '🧐 问题描述 | Proposed Solution'
+ description: A clear and concise description of the proplem.
+ validations:
+ required: true
+ - type: textarea
+ attributes:
+ label: '📝 补充信息 | Additional Information'
+ description: Add any other context about the problem here.
diff --git a/.github/ISSUE_TEMPLATE/4_other.md b/.github/ISSUE_TEMPLATE/4_other.md
new file mode 100644
index 00000000..215dd1f3
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/4_other.md
@@ -0,0 +1,7 @@
+---
+name: '📝 其他 Other'
+about: '其他问题 | Other issues'
+title: ''
+labels: ''
+assignees: ''
+---
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
new file mode 100644
index 00000000..789d4bc1
--- /dev/null
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -0,0 +1,19 @@
+#### 💻 变更类型 | Change Type
+
+
+
+- [ ] ✨ feat
+- [ ] 🐛 fix
+- [ ] ♻️ refactor
+- [ ] 💄 style
+- [ ] 🔨 chore
+- [ ] ⚡️ perf
+- [ ] 📝 docs
+
+#### 🔀 变更说明 | Description of Change
+
+
+
+#### 📝 补充信息 | Additional Information
+
+
diff --git a/.github/workflows/contributor-help.yml b/.github/workflows/contributor-help.yml
deleted file mode 100644
index a5d7f119..00000000
--- a/.github/workflows/contributor-help.yml
+++ /dev/null
@@ -1,28 +0,0 @@
-name: Contributor Helper
-
-on:
- schedule:
- - cron: '0 0 * * *'
-
-jobs:
- contributor:
- runs-on: ubuntu-latest
- steps:
- - uses: actions/checkout@master
-
- - uses: actions-cool/contributor-helper@v1
- with:
- token: ${{ secrets.GITHUB_TOKEN }}
- style: 'simple'
- update-files: 'README.md'
- update-places: '/'
-
- - name: Commit and push if changed
- run: |-
- git diff
- git config --global user.email "actions@github.com"
- git config --global user.name "github-actions"
- git pull
- git add -A
- git commit -m "🤖 docs: Auto update contributors" || exit 0
- git push
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index c892af1e..e1aa8f87 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -36,6 +36,11 @@ jobs:
needs: test
name: Release
runs-on: ubuntu-latest
+ permissions:
+ contents: write # to be able to publish a GitHub release
+ issues: write # to be able to comment on released issues
+ pull-requests: write # to be able to comment on released pull requests
+ id-token: write # to enable use of OIDC for npm provenance
steps:
- uses: actions/checkout@v3
with:
@@ -54,6 +59,9 @@ jobs:
- name: Install deps
run: pnpm install
+ - name: Pre Build
+ run: pnpm run build
+
- name: release
run: pnpm run release
env:
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 2760be00..36ef27fc 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -23,6 +23,9 @@ jobs:
- name: lint
run: pnpm run ci
+ - name: build
+ run: pnpm run build
+
- name: test and coverage
run: pnpm run test:coverage
diff --git a/.gitignore b/.gitignore
index 90e7723b..abdead2b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -14,3 +14,4 @@ server
.husky/prepare-commit-msg
coverage
.vscode
+bun.lockb
\ No newline at end of file
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 50774935..6e95dcd1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,594 @@
# Changelog
-## [Version 0.28.0](https://github.com/ant-design/pro-editor/compare/v0.27.0...v0.28.0)
+## [Version 0.38.0](https://github.com/ant-design/pro-editor/compare/v0.37.0...v0.38.0)
+
+Released on **2024-01-02**
+
+#### ✨ 新特性
+
+- ProEditor ConvigProvider 优化改造，Prefix 动态获取.
+
+
+Improvements and Fixes
+
+
+
+[](#readme-top)
+
+
+
+## [Version 0.37.0](https://github.com/ant-design/pro-editor/compare/v0.36.0...v0.37.0)
+
+Released on **2024-01-02**
+
+#### ✨ 新特性
+
+- Add vertual list", add virtual config".
+
+#### 🐛 修复
+
+- Update snapshot.
+
+
+Improvements and Fixes
+
+
+
+[](#readme-top)
+
+
+
+## [Version 0.36.0](https://github.com/ant-design/pro-editor/compare/v0.35.1...v0.36.0)
+
+Released on **2023-12-26**
+
+#### ✨ 新特性
+
+- Add snapshot.
+
+#### 🐛 修复
+
+- Fixed memo markdown components was not show.
+
+
+Improvements and Fixes
+
+
+
+[](#readme-top)
+
+
+
+### [Version 0.35.1](https://github.com/ant-design/pro-editor/compare/v0.35.0...v0.35.1)
+
+Released on **2023-12-26**
+
+#### 🐛 修复
+
+- Slove Markdown Plugin problem.
+
+
+Improvements and Fixes
+
+
+
+[](#readme-top)
+
+
+
+## [Version 0.35.0](https://github.com/ant-design/pro-editor/compare/v0.34.2...v0.35.0)
+
+Released on **2023-12-25**
+
+#### ✨ 新特性
+
+- Markdown support html render.
+
+
+Improvements and Fixes
+
+
+
+[](#readme-top)
+
+
+
+### [Version 0.34.2](https://github.com/ant-design/pro-editor/compare/v0.34.1...v0.34.2)
+
+Released on **2023-12-25**
+
+#### 🐛 修复
+
+- Columnlist control error.
+
+
+Improvements and Fixes
+
+
+
+[](#readme-top)
+
+
+
+### [Version 0.34.1](https://github.com/ant-design/pro-editor/compare/v0.34.0...v0.34.1)
+
+Released on **2023-12-22**
+
+#### 🐛 修复
+
+- Rollback draggalPannel styles.
+
+
+Improvements and Fixes
+
+
+
+[](#readme-top)
+
+
+
+## [Version 0.34.0](https://github.com/ant-design/pro-editor/compare/v0.33.1...v0.34.0)
+
+Released on **2023-12-22**
+
+#### ✨ 新特性
+
+- Use memo wrapper in markdown.
+
+#### 🐛 修复
+
+- Update snapshot.
+
+
+Improvements and Fixes
+
+
+
+[](#readme-top)
+
+
+
+### [Version 0.33.1](https://github.com/ant-design/pro-editor/compare/v0.33.0...v0.33.1)
+
+Released on **2023-12-20**
+
+#### 🐛 修复
+
+- Style 不要影响空状态按钮.
+
+
+Improvements and Fixes
+
+
+
+[](#readme-top)
+
+
+
+## [Version 0.33.0](https://github.com/ant-design/pro-editor/compare/v0.32.0...v0.33.0)
+
+Released on **2023-12-20**
+
+#### ✨ 新特性
+
+- Add Editor Layout new Components, Change Name as EdiorLayout, header & footer config & layout type was dont, merge main, merge master & update snapshot, reflact code struct, udpate snapshot, update dingding demo & pannel config done, update pannel defaultSize, update snapshot, update snapshot, update styles & props.
+
+#### 🐛 修复
+
+- Ci bulid fixed, ci fixed, delete console.log, merge branch, merge main, merge main, release workflow update, revert workflow, test workflow, update Layout Pannel Styles, update snapshot, update styles.
+
+
+Improvements and Fixes
+
+
+
+[](#readme-top)
+
+
+
+## [Version 0.33.0-rc.1](https://github.com/ant-design/pro-editor/compare/v0.32.0...v0.33.0-rc.1)
+
+Released on **2023-12-20**
+
+#### ✨ 新特性
+
+- Add Editor Layout new Components, Change Name as EdiorLayout, header & footer config & layout type was dont, merge main, merge master & update snapshot, reflact code struct, udpate snapshot, update dingding demo & pannel config done, update pannel defaultSize, update snapshot, update snapshot, update styles & props.
+
+#### 🐛 修复
+
+- Ci bulid fixed, ci fixed, delete console.log, merge branch, merge main, merge main, release workflow update, revert workflow, test workflow, update Layout Pannel Styles, update snapshot, update styles.
+
+
+Improvements and Fixes
+
+
+
+[](#readme-top)
+
+
+
+## [Version 0.32.0](https://github.com/ant-design/pro-editor/compare/v0.31.1...v0.32.0)
+
+Released on **2023-12-20**
+
+#### ✨ 新特性
+
+- SortableList support handle control.
+
+#### 🐛 修复
+
+- Fix creatorButtonProps and add demos.
+
+
+Improvements and Fixes
+
+
+
+[](#readme-top)
+
+
+
+### [Version 0.31.1](https://github.com/ant-design/pro-editor/compare/v0.31.0...v0.31.1)
+
+Released on **2023-12-18**
+
+#### 🐛 修复
+
+- Fix markdown & highlight not support memo, remove demo old api.
+
+
+Improvements and Fixes
+
+
+
+[](#readme-top)
+
+
+
+## [Version 0.31.0](https://github.com/ant-design/pro-editor/compare/v0.30.0...v0.31.0)
+
+Released on **2023-12-12**
+
+#### ✨ 新特性
+
+- Change all default size as middle & update FieldSet doc.
+
+
+Improvements and Fixes
+
+
+
+[](#readme-top)
+
+
+
+## [Version 0.30.0](https://github.com/ant-design/pro-editor/compare/v0.29.2...v0.30.0)
+
+Released on **2023-12-06**
+
+#### ✨ 新特性
+
+- Add Editor Layout new Components, Change Name as EdiorLayout, merge master & update snapshot, update pannel defaultSize, update snapshot, update styles & props.
+
+#### 🐛 修复
+
+- Ci bulid fixed, merge main, release workflow update, revert workflow, test workflow, update styles.
+
+
+Improvements and Fixes
+
+
+
+[](#readme-top)
+
+
+
+## [Version 0.30.0-rc.2](https://github.com/ant-design/pro-editor/compare/v0.30.0-rc.1...v0.30.0-rc.2)
+
+Released on **2023-12-05**
+
+#### 🐛 修复
+
+- Ci bulid fixed, update styles.
+
+
+Improvements and Fixes
+
+
+
+[](#readme-top)
+
+
+
+## [Version 0.30.0-rc.1](https://github.com/ant-design/pro-editor/compare/v0.29.2...v0.30.0-rc.1)
+
+Released on **2023-12-04**
+
+#### ✨ 新特性
+
+- Add Editor Layout new Components, update pannel defaultSize, update snapshot, update styles & props.
+
+#### 🐛 修复
+
+- Merge main, revert workflow, test workflow.
+
+
+Improvements and Fixes
+
+
+
+[](#readme-top)
+
+
+
+## [Version 0.29.0-rc.1](https://github.com/ant-design/pro-editor/compare/v0.28.0...v0.29.0-rc.1)
+
+Released on **2023-12-04**
+
+#### ✨ 新特性
+
+- Add Editor Layout new Components, sortablelist support renderHeader", update pannel defaultSize, update snapshot.
+
+#### 🐛 修复
+
+- Revert workflow, test workflow.
+
+
+Improvements and Fixes
+
+
+
+[](#readme-top)
+
+
+
+## [Version 0.28.0](https://github.com/ant-design/pro-editor/compare/v0.27.0...v0.28.0)
Released on **2023-11-24**
@@ -33,7 +621,7 @@
-## [Version 0.28.0-alpha.1](https://github.com/ant-design/pro-editor/compare/v0.27.0...v0.28.0-alpha.1)
+## [Version 0.28.0-alpha.1](https://github.com/ant-design/pro-editor/compare/v0.27.0...v0.28.0-alpha.1)
Released on **2023-11-24**
@@ -66,7 +654,7 @@
-## [Version 0.27.0](https://github.com/ant-design/pro-editor/compare/v0.26.0...v0.27.0)
+## [Version 0.27.0](https://github.com/ant-design/pro-editor/compare/v0.26.0...v0.27.0)
Released on **2023-11-24**
@@ -92,7 +680,7 @@
-## [Version 0.26.0](https://github.com/ant-design/pro-editor/compare/v0.25.0...v0.26.0)
+## [Version 0.26.0](https://github.com/ant-design/pro-editor/compare/v0.25.0...v0.26.0)
Released on **2023-11-22**
@@ -128,7 +716,7 @@
-## [Version 0.25.0](https://github.com/ant-design/pro-editor/compare/v0.24.0...v0.25.0)
+## [Version 0.25.0](https://github.com/ant-design/pro-editor/compare/v0.24.0...v0.25.0)
Released on **2023-11-09**
@@ -162,7 +750,7 @@
-## [Version 0.24.0](https://github.com/ant-design/pro-editor/compare/v0.23.0...v0.24.0)
+## [Version 0.24.0](https://github.com/ant-design/pro-editor/compare/v0.23.0...v0.24.0)
Released on **2023-11-06**
@@ -190,7 +778,7 @@
-## [Version 0.23.0](https://github.com/ant-design/pro-editor/compare/v0.22.0...v0.23.0)
+## [Version 0.23.0](https://github.com/ant-design/pro-editor/compare/v0.22.0...v0.23.0)
Released on **2023-10-31**
@@ -227,7 +815,7 @@
-## [Version 0.22.0](https://github.com/ant-design/pro-editor/compare/v0.21.0...v0.22.0)
+## [Version 0.22.0](https://github.com/ant-design/pro-editor/compare/v0.21.0...v0.22.0)
Released on **2023-10-31**
@@ -264,7 +852,7 @@
-## [Version 0.21.0](https://github.com/ant-design/pro-editor/compare/v0.20.5...v0.21.0)
+## [Version 0.21.0](https://github.com/ant-design/pro-editor/compare/v0.20.5...v0.21.0)
Released on **2023-10-13**
@@ -301,7 +889,7 @@
-### [Version 0.20.5](https://github.com/ant-design/pro-editor/compare/v0.20.4...v0.20.5)
+### [Version 0.20.5](https://github.com/ant-design/pro-editor/compare/v0.20.4...v0.20.5)
Released on **2023-09-18**
@@ -316,7 +904,7 @@
#### What's fixed
-- 修复 FieldTitle 样式错误, closes [#92](https://github.com/ant-design/pro-editor/issues/92) ([789172e](https://github.com/ant-design/pro-editor/commit/789172e))
+- 修复 FieldTitle 样式错误，closes [#92](https://github.com/ant-design/pro-editor/issues/92) ([789172e](https://github.com/ant-design/pro-editor/commit/789172e))
@@ -326,7 +914,7 @@
-### [Version 0.20.4](https://github.com/ant-design/pro-editor/compare/v0.20.3...v0.20.4)
+### [Version 0.20.4](https://github.com/ant-design/pro-editor/compare/v0.20.3...v0.20.4)
Released on **2023-09-15**
@@ -351,7 +939,7 @@
-### [Version 0.20.3](https://github.com/ant-design/pro-editor/compare/v0.20.2...v0.20.3)
+### [Version 0.20.3](https://github.com/ant-design/pro-editor/compare/v0.20.2...v0.20.3)
Released on **2023-09-15**
@@ -377,7 +965,7 @@
-### [Version 0.20.2](https://github.com/ant-design/pro-editor/compare/v0.20.1...v0.20.2)
+### [Version 0.20.2](https://github.com/ant-design/pro-editor/compare/v0.20.1...v0.20.2)
Released on **2023-09-13**
@@ -402,7 +990,7 @@
-### [Version 0.20.1](https://github.com/ant-design/pro-editor/compare/v0.20.0...v0.20.1)
+### [Version 0.20.1](https://github.com/ant-design/pro-editor/compare/v0.20.0...v0.20.1)
Released on **2023-09-12**
@@ -427,7 +1015,7 @@
-## [Version 0.20.0](https://github.com/ant-design/pro-editor/compare/v0.19.1...v0.20.0)
+## [Version 0.20.0](https://github.com/ant-design/pro-editor/compare/v0.19.1...v0.20.0)
Released on **2023-09-08**
@@ -461,7 +1049,7 @@
-### [Version 0.19.1](https://github.com/ant-design/pro-editor/compare/v0.19.0...v0.19.1)
+### [Version 0.19.1](https://github.com/ant-design/pro-editor/compare/v0.19.0...v0.19.1)
Released on **2023-09-07**
@@ -487,7 +1075,7 @@
-## [Version 0.19.0](https://github.com/ant-design/pro-editor/compare/v0.18.1...v0.19.0)
+## [Version 0.19.0](https://github.com/ant-design/pro-editor/compare/v0.18.1...v0.19.0)
Released on **2023-09-06**
@@ -520,7 +1108,7 @@
-### [Version 0.18.1](https://github.com/ant-design/pro-editor/compare/v0.18.0...v0.18.1)
+### [Version 0.18.1](https://github.com/ant-design/pro-editor/compare/v0.18.0...v0.18.1)
Released on **2023-09-04**
@@ -545,7 +1133,7 @@
-## [Version 0.18.0](https://github.com/ant-design/pro-editor/compare/v0.17.0...v0.18.0)
+## [Version 0.18.0](https://github.com/ant-design/pro-editor/compare/v0.17.0...v0.18.0)
Released on **2023-09-01**
@@ -579,7 +1167,7 @@
-## [Version 0.17.0](https://github.com/ant-design/pro-editor/compare/v0.16.0...v0.17.0)
+## [Version 0.17.0](https://github.com/ant-design/pro-editor/compare/v0.16.0...v0.17.0)
Released on **2023-08-31**
@@ -614,7 +1202,7 @@
-## [Version 0.16.0](https://github.com/ant-design/pro-editor/compare/v0.15.0...v0.16.0)
+## [Version 0.16.0](https://github.com/ant-design/pro-editor/compare/v0.15.0...v0.16.0)
Released on **2023-08-31**
@@ -624,7 +1212,7 @@
#### 🐛 修复
-- DispatchListData error, 修复控制台报错, 去除自动生成 ID 的逻辑,改为由用户自行传递 ID.
+- DispatchListData error, 修复控制台报错，去除自动生成 ID 的逻辑，改为由用户自行传递 ID.
Released on **2023-08-30**
@@ -674,13 +1262,13 @@
-### [Version 0.14.1](https://github.com/ant-design/pro-editor/compare/v0.14.0...v0.14.1)
+### [Version 0.14.1](https://github.com/ant-design/pro-editor/compare/v0.14.0...v0.14.1)
Released on **2023-08-29**
#### 🐛 修复
-- Drag over index lost, 修复 sortableList item 样式问题 && 更新文档, 多实例时的定位错误问题.
+- Drag over index lost, 修复 sortableList item 样式问题 && 更新文档，多实例时的定位错误问题.
Released on **2023-08-29**
#### ✨ 新特性
-- Auto generate id, support getItemStyles, 将创建按钮迁移到 columnList, 自定义创建按钮, 迁移 creatorButtonProps 属性到 columnList.
+- Auto generate id, support getItemStyles, 将创建按钮迁移到 columnList, 自定义创建按钮，迁移 creatorButtonProps 属性到 columnList.
#### 🐛 修复
@@ -740,28 +1328,28 @@
-## [Version 0.2.0](https://github.com/ant-design/pro-editor/compare/v0.1.1...v0.2.0)
+## [Version 0.2.0](https://github.com/ant-design/pro-editor/compare/v0.1.1...v0.2.0)
Released on **2023-08-28**
#### ✨ 新特性
-- **component-asset**: CreateUseAssetStore 方法支持导出 AssetProvider, 优化 createTestAssetStore ，便于下游测试, 添加 createTestAssetStore 方法，便于下游测试.
-- **pro-editor**: 增加 updateCanvasInteraction 方法, 支持 getCanvasInteraction，并调整 store set、get 命名风格, 支持撤销重做, 支持配置 ProEditorStore 在 devtools 中的名称.
+- **component-asset**: CreateUseAssetStore 方法支持导出 AssetProvider, 优化 createTestAssetStore ，便于下游测试，添加 createTestAssetStore 方法，便于下游测试.
+- **pro-editor**: 增加 updateCanvasInteraction 方法，支持 getCanvasInteraction，并调整 store set、get 命名风格，支持撤销重做，支持配置 ProEditorStore 在 devtools 中的名称.
- **sortable-list**: 导出 SortableListDispatchPayload 类型定义.
-- **sortable-tree**: 支持禁用拖拽功能, 新增 sortableRule 函数规则，控制拖动排序.
-- Add ActinGroup Components, add c2d2c getDiffPropsWithSchema and getSymbolMasterNameFromProps func, add field component, add more ActionGroup api support & style update, add more antd temple components, SortableList support onChange event, support undo/redo for ProEditor, update Action Css Transition, update snapshot, 完善 AssetStore 数据链路, 实现 AssetStore 与 EditorStore 的状态自动同步, 新增 ContextMenu 组件, 新增 LevaPanel 属性面板, 重构优化 ComponentAsset store 实现，收敛 AssetStore 的定义方式.
+- **sortable-tree**: 支持禁用拖拽功能，新增 sortableRule 函数规则，控制拖动排序.
+- Add ActinGroup Components, add c2d2c getDiffPropsWithSchema and getSymbolMasterNameFromProps func, add field component, add more ActionGroup api support & style update, add more antd temple components, SortableList support onChange event, support undo/redo for ProEditor, update Action Css Transition, update snapshot, 完善 AssetStore 数据链路，实现 AssetStore 与 EditorStore 的状态自动同步，新增 ContextMenu 组件，新增 LevaPanel 属性面板，重构优化 ComponentAsset store 实现，收敛 AssetStore 的定义方式.
#### 🐛 修复
-- **awareness**: 修正类型导出问题, 兼容服务端渲染.
-- **component-asset**: 修正 AssetSchema 类型, 修正 CreateAssetStore 的类型，对齐到 ProEditorInstance, 修正类型.
-- **excel-table**: 修正 Hansontable 在 server 端的兼容性问题, 修正 Hansontable 在 server 端的兼容性问题.
-- **pro-editor**: 修正与 assetStore 的数据同步问题, 调整 devtools api 名称.
+- **awareness**: 修正类型导出问题，兼容服务端渲染.
+- **component-asset**: 修正 AssetSchema 类型，修正 CreateAssetStore 的类型，对齐到 ProEditorInstance, 修正类型.
+- **excel-table**: 修正 Hansontable 在 server 端的兼容性问题，修正 Hansontable 在 server 端的兼容性问题.
+- **pro-editor**: 修正与 assetStore 的数据同步问题，调整 devtools api 名称.
- **sortable-list**: 兼容默认数据展示.
-- **sortable-tree**: 修正 ReactNodeProps 方法类型定义, 修正 SortableTree 在 server 端的兼容性问题, 修正 SortableTree 在 server 端的兼容性问题.
+- **sortable-tree**: 修正 ReactNodeProps 方法类型定义，修正 SortableTree 在 server 端的兼容性问题，修正 SortableTree 在 server 端的兼容性问题.
- **use-proeditor**: 修正 togglePanelExpand 方法缺失的 bug.
-- Fix avatar key, fix config update, fix Input ref props, fix miss deps, github pages css style lost, highlight scroll error, refactor with zustand v4.4 equalFn, remove lucide icon, SortableList 默认空数据处理, test case error, test snapshot udpate, update snapshot, update snapshot, update snapshot, upgrade zustand version, 优化 Input 和 InputNumber 组件的受控变更逻辑, 修正潜藏的 undo/redo bug，并补充单测, 将 antd-style 设为 peer，修正 ThemeProvider 多实例问题, 将 handsontable 模块异步导入，解决 SSR 下无法使用的问题.
+- Fix avatar key, fix config update, fix Input ref props, fix miss deps, github pages css style lost, highlight scroll error, refactor with zustand v4.4 equalFn, remove lucide icon, SortableList 默认空数据处理，test case error, test snapshot udpate, update snapshot, update snapshot, update snapshot, upgrade zustand version, 优化 Input 和 InputNumber 组件的受控变更逻辑，修正潜藏的 undo/redo bug，并补充单测，将 antd-style 设为 peer，修正 ThemeProvider 多实例问题，将 handsontable 模块异步导入，解决 SSR 下无法使用的问题.
#### 💄 样式
@@ -784,7 +1372,7 @@
- **pro-editor**: 支持配置 ProEditorStore 在 devtools 中的名称 ([2cedbb3](https://github.com/ant-design/pro-editor/commit/2cedbb3))
- **sortable-list**: 导出 SortableListDispatchPayload 类型定义 ([f47782b](https://github.com/ant-design/pro-editor/commit/f47782b))
- **sortable-tree**: 支持禁用拖拽功能 ([9a00235](https://github.com/ant-design/pro-editor/commit/9a00235))
-- **sortable-tree**: 新增 sortableRule 函数规则，控制拖动排序, closes [#46](https://github.com/ant-design/pro-editor/issues/46) ([e941865](https://github.com/ant-design/pro-editor/commit/e941865))
+- **sortable-tree**: 新增 sortableRule 函数规则，控制拖动排序，closes [#46](https://github.com/ant-design/pro-editor/issues/46) ([e941865](https://github.com/ant-design/pro-editor/commit/e941865))
- Add ActinGroup Components ([231d713](https://github.com/ant-design/pro-editor/commit/231d713))
- Add c2d2c getDiffPropsWithSchema and getSymbolMasterNameFromProps func, closes [#52](https://github.com/ant-design/pro-editor/issues/52) ([aa62185](https://github.com/ant-design/pro-editor/commit/aa62185))
- Add field component, closes [#49](https://github.com/ant-design/pro-editor/issues/49) ([dfdfd16](https://github.com/ant-design/pro-editor/commit/dfdfd16))
@@ -831,7 +1419,7 @@
- Update snapshot ([511defb](https://github.com/ant-design/pro-editor/commit/511defb))
- Update snapshot ([53e7dfb](https://github.com/ant-design/pro-editor/commit/53e7dfb))
- Upgrade zustand version ([1fc2daa](https://github.com/ant-design/pro-editor/commit/1fc2daa))
-- 优化 Input 和 InputNumber 组件的受控变更逻辑, closes [#45](https://github.com/ant-design/pro-editor/issues/45) ([e1c7d4f](https://github.com/ant-design/pro-editor/commit/e1c7d4f))
+- 优化 Input 和 InputNumber 组件的受控变更逻辑，closes [#45](https://github.com/ant-design/pro-editor/issues/45) ([e1c7d4f](https://github.com/ant-design/pro-editor/commit/e1c7d4f))
- 修正潜藏的 undo/redo bug，并补充单测 ([d1e3cc1](https://github.com/ant-design/pro-editor/commit/d1e3cc1))
- 将 antd-style 设为 peer，修正 ThemeProvider 多实例问题 ([4ab40d7](https://github.com/ant-design/pro-editor/commit/4ab40d7))
- 将 handsontable 模块异步导入，解决 SSR 下无法使用的问题 ([ab69afd](https://github.com/ant-design/pro-editor/commit/ab69afd))
@@ -849,7 +1437,7 @@
-## [Version 0.13.0](https://github.com/ant-design/pro-editor/compare/v0.12.1...v0.13.0)
+## [Version 0.13.0](https://github.com/ant-design/pro-editor/compare/v0.12.1...v0.13.0)
Released on **2023-08-23**
@@ -876,7 +1464,7 @@
-### [Version 0.12.1](https://github.com/ant-design/pro-editor/compare/v0.12.0...v0.12.1)
+### [Version 0.12.1](https://github.com/ant-design/pro-editor/compare/v0.12.0...v0.12.1)
Released on **2023-08-22**
@@ -902,7 +1490,7 @@
-## [Version 0.12.0](https://github.com/ant-design/pro-editor/compare/v0.11.0...v0.12.0)
+## [Version 0.12.0](https://github.com/ant-design/pro-editor/compare/v0.11.0...v0.12.0)
Released on **2023-08-15**
@@ -935,7 +1523,7 @@
-## [Version 0.11.0](https://github.com/ant-design/pro-editor/compare/v0.10.0...v0.11.0)
+## [Version 0.11.0](https://github.com/ant-design/pro-editor/compare/v0.10.0...v0.11.0)
Released on **2023-08-14**
@@ -969,7 +1557,7 @@
-## [Version 0.10.0](https://github.com/ant-design/pro-editor/compare/v0.9.0...v0.10.0)
+## [Version 0.10.0](https://github.com/ant-design/pro-editor/compare/v0.9.0...v0.10.0)
Released on **2023-08-01**
@@ -1002,7 +1590,7 @@
-## [Version 0.9.0](https://github.com/ant-design/pro-editor/compare/v0.8.0...v0.9.0)
+## [Version 0.9.0](https://github.com/ant-design/pro-editor/compare/v0.8.0...v0.9.0)
Released on **2023-07-24**
@@ -1027,7 +1615,7 @@
-## [Version 0.8.0](https://github.com/ant-design/pro-editor/compare/v0.7.2...v0.8.0)
+## [Version 0.8.0](https://github.com/ant-design/pro-editor/compare/v0.7.2...v0.8.0)
Released on **2023-07-03**
@@ -1042,7 +1630,7 @@
#### What's improved
-- **sortable-tree**: 新增 sortableRule 函数规则，控制拖动排序, closes [#46](https://github.com/ant-design/pro-editor/issues/46) ([9b8d127](https://github.com/ant-design/pro-editor/commit/9b8d127))
+- **sortable-tree**: 新增 sortableRule 函数规则，控制拖动排序，closes [#46](https://github.com/ant-design/pro-editor/issues/46) ([9b8d127](https://github.com/ant-design/pro-editor/commit/9b8d127))
@@ -1052,7 +1640,7 @@
-### [Version 0.7.2](https://github.com/ant-design/pro-editor/compare/v0.7.1...v0.7.2)
+### [Version 0.7.2](https://github.com/ant-design/pro-editor/compare/v0.7.1...v0.7.2)
Released on **2023-07-03**
@@ -1077,7 +1665,7 @@
-### [Version 0.7.1](https://github.com/ant-design/pro-editor/compare/v0.7.0...v0.7.1)
+### [Version 0.7.1](https://github.com/ant-design/pro-editor/compare/v0.7.0...v0.7.1)
Released on **2023-07-03**
@@ -1092,7 +1680,7 @@
#### What's fixed
-- 优化 Input 和 InputNumber 组件的受控变更逻辑, closes [#45](https://github.com/ant-design/pro-editor/issues/45) ([e903a6b](https://github.com/ant-design/pro-editor/commit/e903a6b))
+- 优化 Input 和 InputNumber 组件的受控变更逻辑，closes [#45](https://github.com/ant-design/pro-editor/issues/45) ([e903a6b](https://github.com/ant-design/pro-editor/commit/e903a6b))
@@ -1102,7 +1690,7 @@
-## [Version 0.7.0](https://github.com/ant-design/pro-editor/compare/v0.6.0...v0.7.0)
+## [Version 0.7.0](https://github.com/ant-design/pro-editor/compare/v0.6.0...v0.7.0)
Released on **2023-06-25**
@@ -1127,7 +1715,7 @@
-## [Version 0.6.0](https://github.com/ant-design/pro-editor/compare/v0.5.0...v0.6.0)
+## [Version 0.6.0](https://github.com/ant-design/pro-editor/compare/v0.5.0...v0.6.0)
Released on **2023-06-20**
@@ -1152,7 +1740,7 @@
-## [Version 0.5.0](https://github.com/ant-design/pro-editor/compare/v0.4.2...v0.5.0)
+## [Version 0.5.0](https://github.com/ant-design/pro-editor/compare/v0.4.2...v0.5.0)
Released on **2023-06-19**
@@ -1162,10 +1750,10 @@
#### 🐛 修复
-- **awareness**: 修正类型导出问题, 兼容服务端渲染.
+- **awareness**: 修正类型导出问题，兼容服务端渲染.
- **component-asset**: 修正 AssetSchema 类型.
-- **excel-table**: 修正 Hansontable 在 server 端的兼容性问题, 修正 Hansontable 在 server 端的兼容性问题.
-- **sortable-tree**: 修正 SortableTree 在 server 端的兼容性问题, 修正 SortableTree 在 server 端的兼容性问题.
+- **excel-table**: 修正 Hansontable 在 server 端的兼容性问题，修正 Hansontable 在 server 端的兼容性问题.
+- **sortable-tree**: 修正 SortableTree 在 server 端的兼容性问题，修正 SortableTree 在 server 端的兼容性问题.
- Fix Input ref props, 将 antd-style 设为 peer，修正 ThemeProvider 多实例问题.
Released on **2023-06-18**
@@ -1222,7 +1810,7 @@
-## [Version 0.5.0-alpha.7](https://github.com/ant-design/pro-editor/compare/v0.5.0-alpha.6...v0.5.0-alpha.7)
+## [Version 0.5.0-alpha.7](https://github.com/ant-design/pro-editor/compare/v0.5.0-alpha.6...v0.5.0-alpha.7)
Released on **2023-06-18**
@@ -1247,7 +1835,7 @@
-## [Version 0.5.0-alpha.6](https://github.com/ant-design/pro-editor/compare/v0.5.0-alpha.5...v0.5.0-alpha.6)
+## [Version 0.5.0-alpha.6](https://github.com/ant-design/pro-editor/compare/v0.5.0-alpha.5...v0.5.0-alpha.6)
Released on **2023-06-18**
@@ -1272,7 +1860,7 @@
-## [Version 0.5.0-alpha.5](https://github.com/ant-design/pro-editor/compare/v0.5.0-alpha.4...v0.5.0-alpha.5)
+## [Version 0.5.0-alpha.5](https://github.com/ant-design/pro-editor/compare/v0.5.0-alpha.4...v0.5.0-alpha.5)
Released on **2023-06-18**
@@ -1297,7 +1885,7 @@
-## [Version 0.5.0-alpha.4](https://github.com/ant-design/pro-editor/compare/v0.5.0-alpha.3...v0.5.0-alpha.4)
+## [Version 0.5.0-alpha.4](https://github.com/ant-design/pro-editor/compare/v0.5.0-alpha.3...v0.5.0-alpha.4)
Released on **2023-06-18**
@@ -1324,7 +1912,7 @@
-## [Version 0.5.0-alpha.3](https://github.com/ant-design/pro-editor/compare/v0.5.0-alpha.2...v0.5.0-alpha.3)
+## [Version 0.5.0-alpha.3](https://github.com/ant-design/pro-editor/compare/v0.5.0-alpha.2...v0.5.0-alpha.3)
Released on **2023-06-18**
@@ -1349,7 +1937,7 @@
-## [Version 0.5.0-alpha.2](https://github.com/ant-design/pro-editor/compare/v0.5.0-alpha.1...v0.5.0-alpha.2)
+## [Version 0.5.0-alpha.2](https://github.com/ant-design/pro-editor/compare/v0.5.0-alpha.1...v0.5.0-alpha.2)
Released on **2023-06-17**
@@ -1374,7 +1962,7 @@
-## [Version 0.5.0-alpha.1](https://github.com/ant-design/pro-editor/compare/v0.4.2-alpha.2...v0.5.0-alpha.1)
+## [Version 0.5.0-alpha.1](https://github.com/ant-design/pro-editor/compare/v0.4.2-alpha.2...v0.5.0-alpha.1)
Released on **2023-06-16**
@@ -1399,7 +1987,7 @@
-### [Version 0.4.2](https://github.com/ant-design/pro-editor/compare/v0.4.1...v0.4.2)
+### [Version 0.4.2](https://github.com/ant-design/pro-editor/compare/v0.4.1...v0.4.2)
Released on **2023-06-18**
@@ -1424,7 +2012,7 @@
-### [Version 0.4.2-alpha.2](https://github.com/ant-design/pro-editor/compare/v0.4.2-alpha.1...v0.4.2-alpha.2)
+### [Version 0.4.2-alpha.2](https://github.com/ant-design/pro-editor/compare/v0.4.2-alpha.1...v0.4.2-alpha.2)
Released on **2023-06-16**
@@ -1449,7 +2037,7 @@
-### [Version 0.4.2-alpha.1](https://github.com/ant-design/pro-editor/compare/v0.4.1...v0.4.2-alpha.1)
+### [Version 0.4.2-alpha.1](https://github.com/ant-design/pro-editor/compare/v0.4.1...v0.4.2-alpha.1)
Released on **2023-06-16**
@@ -1474,7 +2062,7 @@
-### [Version 0.4.1](https://github.com/ant-design/pro-editor/compare/v0.4.0...v0.4.1)
+### [Version 0.4.1](https://github.com/ant-design/pro-editor/compare/v0.4.0...v0.4.1)
Released on **2023-06-15**
@@ -1499,19 +2087,19 @@
-## [Version 0.4.0](https://github.com/ant-design/pro-editor/compare/v0.3.0...v0.4.0)
+## [Version 0.4.0](https://github.com/ant-design/pro-editor/compare/v0.3.0...v0.4.0)
Released on **2023-06-15**
#### ✨ 新特性
-- **component-asset**: CreateUseAssetStore 方法支持导出 AssetProvider, 优化 createTestAssetStore ，便于下游测试, 添加 createTestAssetStore 方法，便于下游测试.
-- **pro-editor**: 增加 updateCanvasInteraction 方法, 支持 getCanvasInteraction，并调整 store set、get 命名风格, 支持配置 ProEditorStore 在 devtools 中的名称.
+- **component-asset**: CreateUseAssetStore 方法支持导出 AssetProvider, 优化 createTestAssetStore ，便于下游测试，添加 createTestAssetStore 方法，便于下游测试.
+- **pro-editor**: 增加 updateCanvasInteraction 方法，支持 getCanvasInteraction，并调整 store set、get 命名风格，支持配置 ProEditorStore 在 devtools 中的名称.
#### 🐛 修复
- **component-asset**: 修正 CreateAssetStore 的类型，对齐到 ProEditorInstance, 修正类型.
-- **pro-editor**: 修正与 assetStore 的数据同步问题, 调整 devtools api 名称.
+- **pro-editor**: 修正与 assetStore 的数据同步问题，调整 devtools api 名称.
- **sortable-tree**: 修正 ReactNodeProps 方法类型定义.
Released on **2023-06-15**
@@ -1569,7 +2157,7 @@
-## [Version 0.4.0-alpha.7](https://github.com/ant-design/pro-editor/compare/v0.4.0-alpha.6...v0.4.0-alpha.7)
+## [Version 0.4.0-alpha.7](https://github.com/ant-design/pro-editor/compare/v0.4.0-alpha.6...v0.4.0-alpha.7)
Released on **2023-06-15**
@@ -1596,7 +2184,7 @@
-## [Version 0.4.0-alpha.6](https://github.com/ant-design/pro-editor/compare/v0.4.0-alpha.5...v0.4.0-alpha.6)
+## [Version 0.4.0-alpha.6](https://github.com/ant-design/pro-editor/compare/v0.4.0-alpha.5...v0.4.0-alpha.6)
Released on **2023-06-15**
@@ -1621,7 +2209,7 @@
-## [Version 0.4.0-alpha.5](https://github.com/ant-design/pro-editor/compare/v0.4.0-alpha.4...v0.4.0-alpha.5)
+## [Version 0.4.0-alpha.5](https://github.com/ant-design/pro-editor/compare/v0.4.0-alpha.4...v0.4.0-alpha.5)
Released on **2023-06-15**
@@ -1654,7 +2242,7 @@
-## [Version 0.4.0-alpha.4](https://github.com/ant-design/pro-editor/compare/v0.4.0-alpha.3...v0.4.0-alpha.4)
+## [Version 0.4.0-alpha.4](https://github.com/ant-design/pro-editor/compare/v0.4.0-alpha.3...v0.4.0-alpha.4)
Released on **2023-06-15**
@@ -1679,7 +2267,7 @@
-## [Version 0.4.0-alpha.3](https://github.com/ant-design/pro-editor/compare/v0.4.0-alpha.2...v0.4.0-alpha.3)
+## [Version 0.4.0-alpha.3](https://github.com/ant-design/pro-editor/compare/v0.4.0-alpha.2...v0.4.0-alpha.3)
Released on **2023-06-15**
@@ -1704,7 +2292,7 @@
-## [Version 0.4.0-alpha.2](https://github.com/ant-design/pro-editor/compare/v0.4.0-alpha.1...v0.4.0-alpha.2)
+## [Version 0.4.0-alpha.2](https://github.com/ant-design/pro-editor/compare/v0.4.0-alpha.1...v0.4.0-alpha.2)
Released on **2023-06-14**
@@ -1729,7 +2317,7 @@
-## [Version 0.4.0-alpha.1](https://github.com/ant-design/pro-editor/compare/v0.3.0...v0.4.0-alpha.1)
+## [Version 0.4.0-alpha.1](https://github.com/ant-design/pro-editor/compare/v0.3.0...v0.4.0-alpha.1)
Released on **2023-06-14**
@@ -1762,13 +2350,13 @@
-## [Version 0.3.0](https://github.com/ant-design/pro-editor/compare/v0.2.3...v0.3.0)
+## [Version 0.3.0](https://github.com/ant-design/pro-editor/compare/v0.2.3...v0.3.0)
Released on **2023-06-14**
#### ✨ 新特性
-- Support undo/redo for ProEditor, 完善 AssetStore 数据链路, 实现 AssetStore 与 EditorStore 的状态自动同步, 新增 ContextMenu 组件, 新增 LevaPanel 属性面板, 重构优化 ComponentAsset store 实现，收敛 AssetStore 的定义方式.
+- Support undo/redo for ProEditor, 完善 AssetStore 数据链路，实现 AssetStore 与 EditorStore 的状态自动同步，新增 ContextMenu 组件，新增 LevaPanel 属性面板，重构优化 ComponentAsset store 实现，收敛 AssetStore 的定义方式.
#### 🐛 修复
@@ -1812,7 +2400,7 @@
-## [Version 0.3.0-alpha.8](https://github.com/ant-design/pro-editor/compare/v0.3.0-alpha.7...v0.3.0-alpha.8)
+## [Version 0.3.0-alpha.8](https://github.com/ant-design/pro-editor/compare/v0.3.0-alpha.7...v0.3.0-alpha.8)
Released on **2023-06-14**
@@ -1845,13 +2433,13 @@
-## [Version 0.3.0-alpha.7](https://github.com/ant-design/pro-editor/compare/v0.3.0-alpha.6...v0.3.0-alpha.7)
+## [Version 0.3.0-alpha.7](https://github.com/ant-design/pro-editor/compare/v0.3.0-alpha.6...v0.3.0-alpha.7)
Released on **2023-06-14**
#### ✨ 新特性
-- 实现 AssetStore 与 EditorStore 的状态自动同步, 新增 LevaPanel 属性面板.
+- 实现 AssetStore 与 EditorStore 的状态自动同步，新增 LevaPanel 属性面板.
Released on **2023-06-13**
@@ -1896,7 +2484,7 @@
-## [Version 0.3.0-alpha.5](https://github.com/ant-design/pro-editor/compare/v0.3.0-alpha.4...v0.3.0-alpha.5)
+## [Version 0.3.0-alpha.5](https://github.com/ant-design/pro-editor/compare/v0.3.0-alpha.4...v0.3.0-alpha.5)
Released on **2023-06-13**
@@ -1921,7 +2509,7 @@
-## [Version 0.3.0-alpha.4](https://github.com/ant-design/pro-editor/compare/v0.3.0-alpha.3...v0.3.0-alpha.4)
+## [Version 0.3.0-alpha.4](https://github.com/ant-design/pro-editor/compare/v0.3.0-alpha.3...v0.3.0-alpha.4)
Released on **2023-06-13**
@@ -1946,7 +2534,7 @@
-## [Version 0.3.0-alpha.3](https://github.com/ant-design/pro-editor/compare/v0.3.0-alpha.2...v0.3.0-alpha.3)
+## [Version 0.3.0-alpha.3](https://github.com/ant-design/pro-editor/compare/v0.3.0-alpha.2...v0.3.0-alpha.3)
Released on **2023-06-13**
@@ -1971,7 +2559,7 @@
-## [Version 0.3.0-alpha.2](https://github.com/ant-design/pro-editor/compare/v0.3.0-alpha.1...v0.3.0-alpha.2)
+## [Version 0.3.0-alpha.2](https://github.com/ant-design/pro-editor/compare/v0.3.0-alpha.1...v0.3.0-alpha.2)
Released on **2023-06-13**
@@ -1996,7 +2584,7 @@
-## [Version 0.3.0-alpha.1](https://github.com/ant-design/pro-editor/compare/v0.2.3...v0.3.0-alpha.1)
+## [Version 0.3.0-alpha.1](https://github.com/ant-design/pro-editor/compare/v0.2.3...v0.3.0-alpha.1)
Released on **2023-06-13**
@@ -2029,7 +2617,7 @@
-### [Version 0.2.3](https://github.com/ant-design/pro-editor/compare/v0.2.2...v0.2.3)
+### [Version 0.2.3](https://github.com/ant-design/pro-editor/compare/v0.2.2...v0.2.3)
Released on **2023-06-13**
@@ -2054,7 +2642,7 @@
-### [Version 0.2.2](https://github.com/ant-design/pro-editor/compare/v0.2.1...v0.2.2)
+### [Version 0.2.2](https://github.com/ant-design/pro-editor/compare/v0.2.1...v0.2.2)
Released on **2023-06-13**
@@ -2071,7 +2659,7 @@
-### [Version 0.2.2-alpha.1](https://github.com/ant-design/pro-editor/compare/v0.2.1...v0.2.2-alpha.1)
+### [Version 0.2.2-alpha.1](https://github.com/ant-design/pro-editor/compare/v0.2.1...v0.2.2-alpha.1)
Released on **2023-06-13**
@@ -2088,7 +2676,7 @@
-### Version 0.2.1
+### Version 0.2.1
Released on **2023-06-12**
@@ -2098,7 +2686,7 @@
#### 🐛 修复
-- Fix avatar key, github pages css style lost, SortableList 默认空数据处理, test case error, 将 handsontable 模块异步导入，解决 SSR 下无法使用的问题.
+- Fix avatar key, github pages css style lost, SortableList 默认空数据处理，test case error, 将 handsontable 模块异步导入，解决 SSR 下无法使用的问题.
-
-
-
-
-Ant Design ProEditor
-
-🌟 An Editor UI Framework and Components
-
-[Changelog](./CHANGELOG.md) · [Report Bug][issues-url] · [Request Feature][issues-url]
-
-
-
-[![NPM version][npm-image]][npm-url] [![NPM downloads][download-image]][download-url] [![install size][npm-size]][npm-size-url]
-
-[![Test CI status][test-ci]][test-ci-url] [![Deploy CI][release-ci]][release-ci-url] [![Coverage][coverage]][codecov-url]
+
-[![contributors][contributors-shield]][contributors-url] [![forks][forks-shield]][forks-url] [![stargazers][stargazers-shield]][stargazers-url] [![issues][issues-shield]][issues-url]
+
ProEditor
-[![ docs by dumi][dumi-url]](https://d.umijs.org/) [![Build With father][father-url]](https://github.com/umijs/father/)
+The Ultimate Editor UI Framework and Components
-
+[![][npm-release-shield]][npm-release-link]
+[![][npm-downloads-shield]][npm-downloads-link]
+[![][github-releasedate-shield]][github-releasedate-link]
+[![][github-action-test-shield]][github-action-test-link]
+[![][github-action-release-shield]][github-action-release-link]
+[![][codecov-shield]][codecov-link]
+[![][github-contributors-shield]][github-contributors-link]
+[![][github-forks-shield]][github-forks-link]
+[![][github-stars-shield]][github-stars-link]
+[![][github-issues-shield]][github-issues-link]
+[![][github-license-shield]][github-license-link]
+[![][ant-design-shield]][ant-design-link]
+[![][devops-dumi-shield]][devops-dumi-link]
+[![][devops-father-shield]][devops-father-link]
-
+English · [简体中文](./README.zh-CN.md) · [Changelog](./CHANGELOG.md) . [Report Bug][github-issues-link] · [Request Feature][github-issues-link]
-
+
-
-
-
+
+Table of contents
-## 📦 Install
+## 📦 Installation
-This component library is [pure ESM](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c).
+> \[!IMPORTANT]\
+> This package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c).
-Install via npm:
+To install `@ant-design/pro-editor`, run the following command:
```bash
-$ npm install @ant-design/pro-editor
+$ pnpm install @ant-design/pro-editor
```
-Install via pnpm:
+### Compile with Next.js
-```bash
-$ pnpm add @ant-design/pro-editor
+> \[!NOTE]\
+> By work correct with Next.js SSR, add `transpilePackages: ['@ant-design/pro-editor']` to `next.config.js`. For example:
+
+```js
+const nextConfig = {
+ transpilePackages: ['@ant-design/pro-editor'],
+};
```
+
+### Empowering Features of ProEditor
-
+> \[!NOTE]
+>
+> We envision ProEditor as the foundational library for editing components, akin to antd, enabling developers to easily create complex interactive components with an inherently superior user experience. This is the rationale behind the `ProEditor`.
-[![][back-to-top]](#readme-top)
+**Our Principles for ProEditor:**
-
+- 🖐️ **Intuitive Editing**: Supports natural user interactions like multi-selection, deselection, and keyboard shortcuts, ensuring a smooth editing experience.
+- ✨ **Refined by Default**: Enhances Ant Design components to deliver a superior user experience with more polish and refinement.
+- 🔧 **Open Flexibility**: Provides atomic-level capabilities, offering a wide range of components, hooks, and utility functions for extensive customization and flexibility.
-## 🤝 Contributing [](http://makeapullrequest.com)
+**7**
+- 📦 **DraggablePanel**: Allows for resizable and movable panels, enhancing the interactivity of the user interface.
+- 📝 **ColumnList**: Offers a user-friendly sortable list that is manageable through column definitions, simplifying complex list interactions.
+- 🎨 **FreeCanvas**: Provides a zoomable canvas similar to applications like Sketch or Figma, giving users a vast space for creative design.
+- 🔍 **IconPicker**: An icon selection tool that is compatible with iconfont, making it easier to integrate a wide range of icons into the design.
+- 👥 **Online Collaboration**: Incorporates multi-user capabilities using technologies like yjs and zustand store, enabling real-time collaborative editing and interaction.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
+## 🛣️ Ecosystem
-[![][back-to-top]](#readme-top)
+- **[ProComponents](https://github.com/ant-design/pro-components)** - Designed for Enterprise-Level Application, Use Ant Design like a Pro!.
+- **[ProEditor](https://github.com/ant-design/pro-editor)** - The Ultimate Editor UI Framework and Components.
+- **[ProFlow](https://github.com/ant-design/pro-flow)** - A Flow Editor Framework base on React-Flow.
+- **[ProChat](https://github.com/ant-design/pro-chat)** - Components Library for Quickly Building LLM Chat Interfaces.
-
+
-
-
-
-
+
-
Ant Design ProEditor
+
ProEditor
-
+编辑器领域 UI 框架与前端组件解决方案
-🌟 An Editor UI Framework and Components
+[![][npm-release-shield]][npm-release-link]
+[![][npm-downloads-shield]][npm-downloads-link]
+[![][github-releasedate-shield]][github-releasedate-link]
+[![][github-action-test-shield]][github-action-test-link]
+[![][github-action-release-shield]][github-action-release-link]
+[![][codecov-shield]][codecov-link]
-[![Test CI status][test-ci]][test-ci-url] [![Deploy CI][release-ci]][release-ci-url] [![Coverage][coverage]][codecov-url]
+
+目录
-
+## 📦 安装
-[dumi-url]: https://img.shields.io/badge/docs%20by-dumi-blue
-[father-url]: https://img.shields.io/badge/build%20with-father-028fe4.svg
+> \[!IMPORTANT]\
+> 该包仅支持 [ESM](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c)。
-
+要安装 `@ant-design/pro-editor`，请运行以下命令：
-[npm-image]: https://img.shields.io/npm/v/@ant-design/pro-editor.svg?style=flat-square&color=deepgreen&label=latest
-[npm-url]: https://npmjs.org/package/@ant-design/pro-editor
-[npm-size]: https://img.shields.io/bundlephobia/minzip/@ant-design/pro-editor?color=deepgreen&label=gizpped%20size&style=flat-square
-[npm-size-url]: https://packagephobia.com/result?p=@ant-design/pro-editor
+```bash
+$ pnpm install @ant-design/pro-editor
+```
-
+### 使用 Next.js 进行编译
-[coverage]: https://codecov.io/gh/ant-design/pro-editor/branch/main/graph/badge.svg
-[codecov-url]: https://codecov.io/gh/ant-design/pro-editor/branch/main
+> \[!NOTE]\
+> 为了正确使用 Next.js SSR，请在 `next.config.js` 中添加 `transpilePackages: ['@ant-design/pro-editor']`。例如：
-
+```js
+const nextConfig = {
+ transpilePackages: ['@ant-design/pro-editor'],
+};
+```
-[test-ci]: https://github.com/ant-design/pro-editor/actions/workflows/test.yml/badge.svg
-[test-ci-url]: https://github.com/ant-design/pro-editor/actions/workflows/test.yml
-[release-ci]: https://github.com/ant-design/pro-editor/actions/workflows/release.yml/badge.svg
-[release-ci-url]: https://github.com/ant-design/pro-editor/actions/workflows/release.yml/
-[download-image]: https://img.shields.io/npm/dm/@ant-design/pro-editor.svg?style=flat-square
-[download-url]: https://npmjs.org/package/@ant-design/pro-editor
+
-
+## 🔨 使用
-[contributors-shield]: https://img.shields.io/github/contributors/ant-design/pro-editor.svg?style=flat
-[contributors-url]: https://github.com/ant-design/pro-editor/graphs/contributors
+```jsx
+import { SmileOutlined } from '@ant-design/icons';
+import { ActionIcon } from '@ant-design/pro-editor';
-
+export default () => (
+
}
+ onClick={() => {
+ alert('触发动作');
+ }}
+ />
+);
+```
-[forks-shield]: https://img.shields.io/github/forks/ant-design/pro-editor.svg?style=flat
-[forks-url]: https://github.com/ant-design/pro-editor/network/members
+
-
+## ✨ 特性
-[stargazers-shield]: https://img.shields.io/github/stars/ant-design/pro-editor.svg?style=flat
-[stargazers-url]: https://github.com/ant-design/pro-editor/stargazers
+> \[!NOTE]
+>
+> 前端组件库已经彻底改变了开发方式，极大地提高了效率，提升了用户体验。在各大组件库都趋于成熟的 2023 年，我们为什么要推出 ProEditor ？
-
+[](https://next.ossinsight.io/widgets/official/compose-activity-trends?repo_id=637603722)
-[issues-shield]: https://img.shields.io/github/issues/ant-design/pro-editor.svg?style=flat
-[issues-url]: https://github.com/ant-design/pro-editor/issues/new/choose
+
-
+
+> \[!NOTE]
+>
+> - 现代浏览器和 Internet Explorer 11（使用[polyfills](https://stackoverflow.com/questions/57020976/polyfills-in-2019-for-ie11)）
+> - [Electron](https://www.electronjs.org/)
-## 🤝 Contributing [](http://makeapullrequest.com)
+| [](http://godban.github.io/browsers-support-badges/) | [](http://godban.github.io/browsers-support-badges/) | [](http://godban.github.io/browsers-support-badges/) | [](http://godban.github.io/browsers-support-badges/) | [](http://godban.github.io/browsers-support-badges/) |
+| ------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Edge | 最近 2 个版本 | 最近 2 个版本 | 最近 2 个版本 | 最近 2 个版本 |
-- [Release Guide](https://github.com/ant-design/pro-editor/wiki/release)
+**7**
+您可以使用 Github Codespaces 进行在线开发：
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
+## 🛣️ 生态系统
-[![][back-to-top]](#readme-top)
+- **[ProComponents](https://github.com/ant-design/pro-components)** - 专为企业级应用设计，像专业人士一样使用 Ant Design！
+- **[ProEditor](https://github.com/ant-design/pro-editor)** - 编辑器领域 UI 框架与前端组件解决方案。
+- **[ProFlow](https://github.com/ant-design/pro-flow)** - 基于 React-Flow 的流程编辑器框架。
+- **[ProChat](https://github.com/ant-design/pro-chat)** - 用于快速构建 LLM 聊天界面的组件库。
-
+()(
);
```
-其中关键的代码是 `createStore` ,它用于聚合所有的 slice，返回一个完整的编辑器 Store 用于 store 初始化创建。
+其中关键的代码是 `createStore` , 它用于聚合所有的 slice，返回一个完整的编辑器 Store 用于 store 初始化创建。
最后使用的 `createWithEqualityFn`函数中包裹了相关的中间件，我们默认使用了 `devtools` 中间件来提供开发者工具支持，并替换默认的比较函数为 `shallow`，用于优化性能。
@@ -288,7 +288,7 @@ const crudSlice = (set, get) => ({
而这也会相应带来若干好处：
1. **方便做受控能力**：当数据变更原子化之后，通过在 `dispatchTreeData` 最下方添加一个 `onTreeDataChange` ，即可实现数据状态的受控变更，将应用轻松转换为组件；
-2. **数据变更语义化**：通过 dispatch 对应 payload 方法的命名，可以将原本比较难构造与变更的数据变更语义化，例如 `dispatchTreeData( { type: 'toggleCollapse', id:'123' })`，可以很容易理解为，将 id 为 123 的节点进行展开/收起操作；
+2. **数据变更语义化**：通过 dispatch 对应 payload 方法的命名，可以将原本比较难构造与变更的数据变更语义化，例如 `dispatchTreeData( { type: 'toggleCollapse', id:'123' })`，可以很容易理解为，将 id 为 123 的节点进行展开 / 收起操作；
3. **提升状态维护性**：统一 dispatch 的数据变更心智后，我们既可以在 store 外部调用 dispatch 来变更状态，也可以在 store 内部调用，统一的心智将大大降低维护成本；
### reducer 研发
diff --git a/docs/guide/intro.en-US.md b/docs/guide/intro.en-US.md
index ee0dbe32..6b7d63de 100644
--- a/docs/guide/intro.en-US.md
+++ b/docs/guide/intro.en-US.md
@@ -58,7 +58,7 @@ Since Next.js is a CSR/SSR isomorphic React framework, and ProEditor only provid
/** @type {import('next').NextConfig} */
const nextConfig = {
// Convert pure esm modules to node-compatible modules
- transpilePackages: ['@ant-design/pro-editor', 'leva'], // leva is a ProEditor dependency module
+ transpilePackages: ['@ant-design/pro-editor'], // leva is a ProEditor dependency module
};
```
diff --git a/docs/guide/intro.zh-CN.md b/docs/guide/intro.zh-CN.md
index 2188255b..bf4adde0 100644
--- a/docs/guide/intro.zh-CN.md
+++ b/docs/guide/intro.zh-CN.md
@@ -58,7 +58,7 @@ ProEditor 将会提供编辑场景需要的各类原子化能力，包括但不
/** @type {import('next').NextConfig} */
const nextConfig = {
// 将纯 esm 模块转为 node 兼容模块
- transpilePackages: ['@ant-design/pro-editor', 'leva'], // leva 为 ProEditor 依赖模块
+ transpilePackages: ['@ant-design/pro-editor'], // leva 为 ProEditor 依赖模块
};
```
diff --git a/docs/guide/why-pro-editor.zh-CN.md b/docs/guide/why-pro-editor.zh-CN.md
index 8c269558..9aaa3388 100644
--- a/docs/guide/why-pro-editor.zh-CN.md
+++ b/docs/guide/why-pro-editor.zh-CN.md
@@ -29,7 +29,7 @@ group: 快速上手
除了组件层面，还有诸多原子化的操作能力是当今的前端仍未系统解决的。比如快捷键、键盘方向键切换焦点、键盘与鼠标同时作用的选取（shift 多选、cmd 复选）、撤销重做、鼠标框选……
-上述用户的交互输入，在「操作系统」与大部分效率工具（文档三件套、代码编辑器、Sketch、PS ）可谓是基础中的基础，而在号称“一统终端”的 Web 里却是「奢侈品」级别的能力。
+上述用户的交互输入，在「操作系统」与大部分效率工具（文档三件套、代码编辑器、Sketch、PS ）可谓是基础中的基础，而在号称 “一统终端” 的 Web 里却是「奢侈品」级别的能力。
## 🕹「编辑」领域下的 「antd」
diff --git a/docs/pro-editor/component-assets.zh-CN.md b/docs/pro-editor/component-assets.zh-CN.md
index 78863daa..128caaad 100644
--- a/docs/pro-editor/component-assets.zh-CN.md
+++ b/docs/pro-editor/component-assets.zh-CN.md
@@ -7,7 +7,7 @@ group: 基础框架
### 木偶模型
-高代码（props）和 低代码（配置器）的关系不是简单的一一映射，而是一种有机的组织形态，我们把它称为——木偶模型。 props 就像是木偶的线，而配置器就是木偶的控制器，它们的关系如下图所示：
+高代码（props）和 低代码（配置器）的关系不是简单的一一映射，而是一种有机的组织形态，我们把它称为 —— 木偶模型。 props 就像是木偶的线，而配置器就是木偶的控制器，它们的关系如下图所示：
diff --git a/docs/pro-editor/data-flow.zh-CN.md b/docs/pro-editor/data-flow.zh-CN.md
index 95cdb1c5..16e6aace 100644
--- a/docs/pro-editor/data-flow.zh-CN.md
+++ b/docs/pro-editor/data-flow.zh-CN.md
@@ -19,8 +19,8 @@ ProEditor 的数据流包含两类：
容器类 Store 只存放 Editor 相关状态，例如：
-- 开发者/设计师模式；
-- 画布/代码的切换；
+- 开发者 / 设计师模式；
+- 画布 / 代码的切换；
- 当前画布交互的激活信息；
- 当前加载的 ComponentAsset 实例；
- ...
diff --git a/docs/pro-editor/demos/buttonAsset/_Panel.tsx b/docs/pro-editor/demos/buttonAsset/_Panel.tsx
index b5b4804b..86f448b4 100644
--- a/docs/pro-editor/demos/buttonAsset/_Panel.tsx
+++ b/docs/pro-editor/demos/buttonAsset/_Panel.tsx
@@ -1,5 +1,6 @@
import { RedoOutlined, UndoOutlined } from '@ant-design/icons';
-import { LevaPanel, useProBuilderStore } from '@ant-design/pro-editor';
+import { LevaPanel } from '@ant-design/leva-panel';
+import { useProBuilderStore } from '@ant-design/pro-editor';
import { Button, Divider } from 'antd';
import isEqual from 'fast-deep-equal';
import { FC, memo } from 'react';
diff --git a/docs/pro-editor/useProEditor.zh-CN.md b/docs/pro-editor/useProEditor.zh-CN.md
index a8f788b7..b0fbd730 100644
--- a/docs/pro-editor/useProEditor.zh-CN.md
+++ b/docs/pro-editor/useProEditor.zh-CN.md
@@ -35,8 +35,11 @@ const MyComponent = () => {
可以使用 editor 对象来访问 ProEditor 的属性和方法：
- `getPresenceEditor`：获取当前 ProEditor 的 presenceEditor 对象；
+
- `getViewport`：获取当前 ProEditor 的 `viewport`；
+
- `getConfig`：获取当前 ProEditor 的 config；
+
- `getProps`：获取当前 ProEditor 的 props。
- 注意：以上方法返回的对象均为最新值，即每次调用都会返回最新的值。
diff --git a/docs/pro-editor/utils.en-US.md b/docs/pro-editor/utils.en-US.md
deleted file mode 100644
index 94101195..00000000
--- a/docs/pro-editor/utils.en-US.md
+++ /dev/null
@@ -1,48 +0,0 @@
----
-title: C2D2C Helper Functions
-group:
- title: Utility
- order: 99
----
-
-# generateJSXCode
-
-This method is used to concatenate component attribute configurations to generate JSX code.
-
-```jsx | pure
-import { generateJSXCode } from '@ant-design/pro-editor';
-
-const config = {
- children: 'Default Button',
- target: '_blank',
- type: 'default',
- htmlType: 'button',
- danger: false,
- icon: '',
- size: 'middle',
- loading: true,
- disabled: false,
- ghost: false,
- block: false,
-};
-
-const code = generateJSXCode('Button', config);
-```
-
-Result:
-
-```jsx | pure
-
- Default Button
-
-```
diff --git a/docs/pro-editor/utils.zh-CN.md b/docs/pro-editor/utils.zh-CN.md
deleted file mode 100644
index c05ef5ad..00000000
--- a/docs/pro-editor/utils.zh-CN.md
+++ /dev/null
@@ -1,48 +0,0 @@
----
-title: C2D2C 辅助函数
-group:
- title: 工具类库
- order: 99
----
-
-# generateJSXCode
-
-该方法用于将组件属性配置拼接生成 jsx 代码。
-
-```jsx | pure
-import { generateJSXCode } from '@ant-design/pro-editor';
-
-const config = {
- children: '默认按钮',
- target: '_blank',
- type: 'default',
- htmlType: 'button',
- danger: false,
- icon: '',
- size: 'middle',
- loading: true,
- disabled: false,
- ghost: false,
- block: false,
-};
-
-const code = generateJSXCode('Button', config);
-```
-
-结果为:
-
-```jsx | pure
-
- 默认按钮
-
-```
diff --git a/docs/showcase/flow-editor.zh-CN.md b/docs/showcase/flow-editor.zh-CN.md
index be49f203..fe7d0159 100644
--- a/docs/showcase/flow-editor.zh-CN.md
+++ b/docs/showcase/flow-editor.zh-CN.md
@@ -10,4 +10,4 @@ Flow Editor 是一套节点式运行大模型的编辑工具。
## 访问地址
-https://github.com/ant-design/pro-flow-editor
+
diff --git a/docs/showcase/kitchen-color-studio.zh-CN.md b/docs/showcase/kitchen-color-studio.zh-CN.md
index f297b9b5..c7d8f54a 100644
--- a/docs/showcase/kitchen-color-studio.zh-CN.md
+++ b/docs/showcase/kitchen-color-studio.zh-CN.md
@@ -10,4 +10,4 @@ kitchen Color Studio 是一套开源的颜色系统编辑器。
## 访问地址
-https://github.com/ant-design/antd-color-editor
+
diff --git a/package.json b/package.json
index 7be4cb8f..11ea2586 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@ant-design/pro-editor",
- "version": "0.28.0",
+ "version": "0.38.0",
"description": "🌟 Lightweight Editor UI Framework",
"homepage": "https://github.com/ant-design/pro-editor",
"bugs": {
@@ -62,14 +62,15 @@
"@ant-design/icons": "^5.2.6",
"@ant-design/pro-components": "^2.6.43",
"@antv/dw-random": "^1.1.7",
- "@babel/runtime": "^7.23.4",
+ "@babel/runtime": "^7.23.6",
"@dnd-kit/core": "^6.1.0",
"@dnd-kit/modifiers": "^6.0.1",
"@dnd-kit/sortable": "^7.0.2",
"@dnd-kit/utilities": "^3.2.2",
+ "@emotion/styled": "^11.11.0",
"@faker-js/faker": "^7.6.0",
"@floating-ui/react": "^0.24.8",
- "@mui/material": "^5.14.18",
+ "@mui/material": "^5.15.1",
"@textea/json-viewer": "^3.2.3",
"ahooks": "^3.7.8",
"classnames": "^2.3.2",
@@ -79,7 +80,6 @@
"fast-deep-equal": "^3.1.3",
"highlight.js": "~10.5.0",
"immer": "^9.0.21",
- "leva": "^0.9.35",
"lodash.flatten": "^4.4.0",
"lodash.get": "^4.4.2",
"lodash.isempty": "^4.4.0",
@@ -93,7 +93,7 @@
"lodash.unionby": "^4.8.0",
"lodash.uniq": "^4.5.0",
"mockjs": "^1.1.0",
- "nanoid": "^5.0.3",
+ "nanoid": "^5.0.4",
"polished": "^4.2.2",
"prettier": "^2.8.8",
"rc-util": "^5.38.1",
@@ -104,6 +104,8 @@
"react-layout-kit": "^1.7.4",
"react-markdown": "^8.0.7",
"react-rnd": "^10.4.1",
+ "react-virtualized-auto-sizer": "^1.0.20",
+ "react-window": "^1.8.10",
"reactflow": "^11.10.1",
"rehype-katex": "^6.0.3",
"remark-gfm": "^3.0.1",
@@ -111,54 +113,56 @@
"rxjs": "^7.8.1",
"shikiji": "^0.6.13",
"type-fest": "^3.13.1",
- "umi-request": "^1.4.0",
"use-merge-value": "^1.2.0",
"yjs": "^13.6.10",
- "zustand": "^4.4.6",
+ "zustand": "^4.4.7",
"zustand-middleware-yjs": "^1.3.1",
"zustand-utils": "^1.3.1"
},
"devDependencies": {
+ "@ant-design/leva-panel": "^1.0.0",
"@emotion/jest": "^11.11.0",
- "@lobehub/i18n-cli": "^1.15.0",
- "@testing-library/jest-dom": "^6.1.4",
+ "@lobehub/i18n-cli": "^1.15.3",
+ "@testing-library/jest-dom": "^6.1.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^14.5.1",
"@types/color": "^3.0.6",
"@types/json-schema": "^7.0.15",
- "@types/react": "^18.2.38",
- "@types/react-dom": "^18.2.17",
- "@umijs/lint": "^4.0.88",
+ "@types/react": "^18.2.45",
+ "@types/react-dom": "^18.2.18",
+ "@types/react-window": "^1.8.8",
+ "@umijs/lint": "^4.0.90",
"@vitest/coverage-v8": "latest",
- "antd": "^5.11.4",
- "antd-style": "^3.5.2",
+ "antd": "^5.12.5",
+ "antd-style": "^3.6.1",
"babel-plugin-antd-style": "^1.0.4",
"commitlint": "^17.8.1",
"commitlint-config-gitmoji": "^2.3.1",
"conventional-changelog-gitmoji-config": "^1.5.2",
- "dumi": "^2.2.14",
+ "dumi": "^2.2.16",
"dumi-theme-antd-style": "latest",
- "eslint": "^8.54.0",
- "father": "^4.3.7",
+ "eslint": "^8.56.0",
+ "father": "^4.3.8",
"gh-pages": "^5.0.0",
"glob": "^10.3.10",
"husky": "^8.0.3",
"jsdom": "^22.1.0",
"lint-staged": "^13.3.0",
"prettier-plugin-organize-imports": "^3.2.4",
- "prettier-plugin-packagejson": "^2.4.6",
+ "prettier-plugin-packagejson": "^2.4.7",
"react": "^18.2.0",
"react-dom": "^18.2.0",
+ "rehype-raw": "^6.0.0",
"rxjs-spy": "^8.0.2",
"semantic-release": "^21.1.2",
"semantic-release-config-gitmoji": "^1.5.3",
"stylelint": "^15.11.0",
- "typescript": "^5.3.2",
+ "typescript": "^5.3.3",
"vitest": "latest",
"wait-on": "^6.0.1",
"y-protocols": "^1.0.6",
"y-webrtc": "^10.2.6",
- "y-websocket": "^1.5.0",
+ "y-websocket": "^1.5.1",
"zundo": "beta"
},
"peerDependencies": {
diff --git a/src/ActionGroup/demos/basic.tsx b/src/ActionGroup/demos/basic.tsx
index 961d7446..281124b8 100644
--- a/src/ActionGroup/demos/basic.tsx
+++ b/src/ActionGroup/demos/basic.tsx
@@ -1,6 +1,3 @@
-/**
- * title: 基础使用
- */
import { ActionGroup } from '@ant-design/pro-editor';
export default () => {
diff --git a/src/ActionGroup/demos/config.tsx b/src/ActionGroup/demos/config.tsx
index 575c067c..3a8940fc 100644
--- a/src/ActionGroup/demos/config.tsx
+++ b/src/ActionGroup/demos/config.tsx
@@ -1,7 +1,3 @@
-/**
- * title: 配置使用
- * description: 通过配置 `items` 渲染整个内容，你可以通过在 items 声明 type 为 divider 来渲染一个分隔符
- */
import { CopyOutlined, DragOutlined, ZoomInOutlined, ZoomOutOutlined } from '@ant-design/icons';
import { ActionGroup } from '@ant-design/pro-editor';
import { message } from 'antd';
diff --git a/src/ActionGroup/demos/custom.tsx b/src/ActionGroup/demos/custom.tsx
index ed50f37a..acbf7c05 100644
--- a/src/ActionGroup/demos/custom.tsx
+++ b/src/ActionGroup/demos/custom.tsx
@@ -1,7 +1,3 @@
-/**
- * title: 自定义
- * description: 通过 `render` 可以自定义渲染特殊的操作内容
- */
import { ActionGroup, ActionIcon, ActionIconGroupItemType } from '@ant-design/pro-editor';
import { Card, Input, Rate, Switch } from 'antd';
diff --git a/src/ActionGroup/demos/dropMenu.tsx b/src/ActionGroup/demos/dropMenu.tsx
index fbc44e12..a4d7a967 100644
--- a/src/ActionGroup/demos/dropMenu.tsx
+++ b/src/ActionGroup/demos/dropMenu.tsx
@@ -1,8 +1,3 @@
-/**
- * title: dropdown
- * description: 通过配置 `dropdownMenu` 可以在尾部渲染一个下拉内容
- */
-
import { CopyOutlined, DragOutlined, ZoomInOutlined, ZoomOutOutlined } from '@ant-design/icons';
import { ActionGroup } from '@ant-design/pro-editor';
import { message } from 'antd';
diff --git a/src/ActionGroup/demos/type.tsx b/src/ActionGroup/demos/type.tsx
index 4968cfaf..97f12db6 100644
--- a/src/ActionGroup/demos/type.tsx
+++ b/src/ActionGroup/demos/type.tsx
@@ -1,7 +1,4 @@
import { CopyOutlined, DragOutlined, ZoomInOutlined, ZoomOutOutlined } from '@ant-design/icons';
-/**
- * title: 模式配置
- */
import { ActionGroup } from '@ant-design/pro-editor';
import { InputNumber, Segmented, Space } from 'antd';
import { useState } from 'react';
diff --git a/src/ActionGroup/demos/withPanel.tsx b/src/ActionGroup/demos/withPanel.tsx
index 05eefce2..8a0a12fd 100644
--- a/src/ActionGroup/demos/withPanel.tsx
+++ b/src/ActionGroup/demos/withPanel.tsx
@@ -1,8 +1,3 @@
-/**
- * title: 浮动面板中使用
- * description: 配合 DraggablePanel 可以使得整个面板可浮动拖拽
- */
-
import type { Position } from '@ant-design/pro-editor';
import { ActionGroup, DraggablePanel } from '@ant-design/pro-editor';
import { useLocalStorageState } from 'ahooks';
diff --git a/src/ActionGroup/index.en-US.md b/src/ActionGroup/index.en-US.md
index 6e791016..fbb5dc18 100644
--- a/src/ActionGroup/index.en-US.md
+++ b/src/ActionGroup/index.en-US.md
@@ -17,7 +17,12 @@ When you need a general panel to carry a series of global tools such as "full sc
## Code Demo
-
+
+ );
+};
+
+export { WrapperActionGroup as ActionGroup };
diff --git a/src/ActionGroup/index.zh-CN.md b/src/ActionGroup/index.zh-CN.md
index 760366d6..d2f8c144 100644
--- a/src/ActionGroup/index.zh-CN.md
+++ b/src/ActionGroup/index.zh-CN.md
@@ -15,11 +15,11 @@ demo:
## 代码演示
{
arrow?: boolean;
}
-const ActionIcon: FC = ({
+const BaseActionIcon: FC = ({
placement,
title,
icon,
@@ -54,13 +53,11 @@ const ActionIcon: FC = ({
onClick,
className,
arrow = false,
- size,
+ size = 'default',
tooltipDelay = 0.5,
- prefixCls: customPrefixCls,
...restProps
}) => {
- const prefixCls = getPrefixCls('actionicon', customPrefixCls);
- const { styles, theme: token, cx } = useStyles({ size, prefixCls });
+ const { styles, cx } = useStyles({ size });
const Icon = (
= ({
className={cx(styles.container, className)}
type={'text'}
style={{ cursor }}
- size={'small'}
+ size={typeof size === 'number' || size === 'default' ? 'middle' : size}
{...restProps}
onClick={onClick}
/>
);
return (
-
+ <>
{!title ? (
Icon
) : (
@@ -98,6 +86,26 @@ const ActionIcon: FC = ({
{Icon}
)}
+
+ );
+};
+
+const ActionIcon = (props: ActionIconProps) => {
+ const { size } = props || {};
+ const { theme: token } = useStyles({ size });
+
+ return (
+
+
);
};
diff --git a/src/ActionIcon/__snapshots__/ActionIcon.test.tsx.snap b/src/ActionIcon/__snapshots__/ActionIcon.test.tsx.snap
index 3a266629..6e54d31c 100644
--- a/src/ActionIcon/__snapshots__/ActionIcon.test.tsx.snap
+++ b/src/ActionIcon/__snapshots__/ActionIcon.test.tsx.snap
@@ -29,11 +29,11 @@ exports[`ActionIcon > 可正常渲染 1`] = `
带有标题 1`] = `
= ({
- defaultExpand = false,
- expand,
- onExpandChange,
- prefixCls: customizePrefixCls,
- title,
- children,
- className,
- extra,
-}) => {
- const prefixCls = getPrefixCls('collapse-title', customizePrefixCls);
+const BaseCollapseTitle: FC = memo(
+ ({ defaultExpand = false, expand, onExpandChange, title, children, className, extra }) => {
+ const [showPanel, setCollapsed] = useMergedState(defaultExpand, {
+ value: expand,
+ onChange: onExpandChange,
+ });
- const [showPanel, setCollapsed] = useMergedState(defaultExpand, {
- value: expand,
- onChange: onExpandChange,
- });
+ const toggleCollapse = () => {
+ setCollapsed(!showPanel);
+ };
- const toggleCollapse = () => {
- setCollapsed(!showPanel);
- };
+ const { styles } = useStyles({ showPanel, className });
- const { styles } = useStyles({ showPanel, prefixCls, className });
- return (
-
-
-
+ return (
+
+
- {title}
+
+ {title}
+
+ {extra && extra(showPanel)}
- {extra && extra(showPanel)}
+ {showPanel ? (
+ <>
+
- {showPanel ? (
- <>
-
+
+ );
+ },
+);
+
+const CollapseTitle = (props: CollapseTitleProps) => {
+ return (
+
+
);
};
diff --git a/src/CollapseTitle/index.zh-CN.md b/src/CollapseTitle/index.zh-CN.md
index 5e8a5f54..776a5b8d 100644
--- a/src/CollapseTitle/index.zh-CN.md
+++ b/src/CollapseTitle/index.zh-CN.md
@@ -20,7 +20,7 @@ group: 基础组件
### 默认展开
-通过 `defaultExpand` 控制是否默认展开。
+通过 `defaultExpand` 控制是否默认展开。
{
item: T;
dragging: boolean;
index: number;
- prefixCls: string;
listeners: any;
actions?: React.ReactNode[];
hideRemove?: boolean;
+ creatorButtonProps: CreatorButtonProps | false;
}
const ColumnItem = memo(
- ({ item, index, prefixCls, columns, listeners, actions, hideRemove, dragging }) => {
- const { styles } = useStyle(prefixCls);
+ ({ item, index, columns, listeners, actions, hideRemove, dragging, creatorButtonProps }) => {
+ const { styles } = useStyle();
const instance = useSortableList();
return (
@@ -102,10 +103,11 @@ const ColumnItem = memo(
id: item.id,
index,
dragging,
- prefixCls,
style,
placeholder: col.placeholder,
+ creatorButtonProps,
};
+
switch (col.type) {
default:
case 'input':
diff --git a/src/ColumnList/ColumnList.tsx b/src/ColumnList/ColumnList.tsx
index b8dfc24d..be1eb1c9 100644
--- a/src/ColumnList/ColumnList.tsx
+++ b/src/ColumnList/ColumnList.tsx
@@ -1,8 +1,9 @@
import {
+ ConfigProvider,
+ CreatorButtonProps,
SortableList,
SortableListProps,
SortableListRef,
- getPrefixCls,
} from '@ant-design/pro-editor';
import { FC, forwardRef, useCallback } from 'react';
import ColumnItem from './ColumnItem';
@@ -17,9 +18,19 @@ export interface ColumnListProps extends SortableListProps {
const ColumnList: (props: ColumnListProps) => ReturnType = forwardRef<
SortableListRef,
ColumnListProps
->(({ prefixCls: customPrefixCls, className, columns, actions, hideRemove, ...props }, ref) => {
- const prefixCls = getPrefixCls('column-list', customPrefixCls);
- const { cx } = useStyle(prefixCls);
+>(({ className, columns, actions, hideRemove, creatorButtonProps, ...props }, ref) => {
+ const { cx } = useStyle();
+
+ // ColumnList 默认有添加一行按钮
+ const customCreatorButtonProps: CreatorButtonProps | false =
+ creatorButtonProps === false
+ ? false
+ : {
+ position: 'bottom' as const,
+ // 默认生成空数据
+ record: () => ({}),
+ ...creatorButtonProps,
+ };
const renderItem = useCallback(
(item, { index, listeners, dragging }) => (
@@ -29,22 +40,25 @@ const ColumnList: (props: ColumnListProps) => ReturnType = forwardRef<
dragging={dragging}
listeners={listeners}
index={index}
- prefixCls={prefixCls}
actions={typeof actions === 'function' ? actions(item, index) : actions}
+ creatorButtonProps={customCreatorButtonProps}
hideRemove={hideRemove}
/>
),
- [prefixCls, columns],
+ [columns],
);
return (
- }
- className={cx(prefixCls, className)}
- {...props}
- />
+
+ }
+ className={cx(className)}
+ creatorButtonProps={customCreatorButtonProps}
+ {...props}
+ />
+
);
});
diff --git a/src/ColumnList/Header.tsx b/src/ColumnList/Header.tsx
index 57d44b37..f56210e0 100644
--- a/src/ColumnList/Header.tsx
+++ b/src/ColumnList/Header.tsx
@@ -3,10 +3,11 @@ import { createStyles } from 'antd-style';
import { memo } from 'react';
import { Flexbox } from 'react-layout-kit';
-const useStyle = createStyles(({ token, css, cx }, prefixCls) => {
+const useStyle = createStyles(({ token, css, cx, prefixCls }) => {
+ const prefix = `${prefixCls}-${token?.editorPrefix}-column-list`;
return {
content: cx(
- `${prefixCls}-content`,
+ `${prefix}-content`,
css`
flex: 1;
width: 100%;
@@ -17,7 +18,7 @@ const useStyle = createStyles(({ token, css, cx }, prefixCls) => {
`,
),
header: cx(
- `${prefixCls}-header`,
+ `${prefix}-header`,
css`
color: ${token.colorTextTertiary};
padding-left: 8px;
@@ -27,11 +28,10 @@ const useStyle = createStyles(({ token, css, cx }, prefixCls) => {
});
interface HeaderProps {
- prefixCls: string;
columns: ColumnItemList;
}
-export const Header = memo(({ prefixCls, columns }) => {
- const { styles, cx } = useStyle(prefixCls);
+export const Header = memo(({ columns }) => {
+ const { styles, cx } = useStyle();
return (
diff --git a/src/ColumnList/demos/actions.tsx b/src/ColumnList/demos/actions.tsx
index b2fff37f..693bc7d6 100644
--- a/src/ColumnList/demos/actions.tsx
+++ b/src/ColumnList/demos/actions.tsx
@@ -56,6 +56,7 @@ export default () => (
- columns={columns}
- value={value}
- onChange={(values) => {
- setValue(values);
- console.log('onChange', values);
- }}
- />
+ <>
+ {
+ setValue([
+ {
+ dataIndex: 'orderCreated',
+ valueType: 'date',
+ title: '订单创建时间',
+ },
+ {
+ dataIndex: 'detailPic',
+ valueType: 'text',
+ title: '产品详情图',
+ },
+ ]);
+ }}
+ style={{ marginBottom: 12 }}
+ >
+ 受控设置数据
+
+
+ columns={columns}
+ value={value}
+ onChange={(values) => {
+ setValue(values);
+ console.log('onChange', values);
+ }}
+ />
+
);
};
diff --git a/src/ColumnList/demos/creatorButtonProps.tsx b/src/ColumnList/demos/creatorButtonProps.tsx
index 977bcd49..b594781c 100644
--- a/src/ColumnList/demos/creatorButtonProps.tsx
+++ b/src/ColumnList/demos/creatorButtonProps.tsx
@@ -1,6 +1,6 @@
/**
* title: 自定义初始化
- * description: 可通过 `creatorButtonProps` 来自定义初始化逻辑，id 的生成逻辑是必须的。
+ * description: 可通过 `creatorButtonProps` 来自定义初始化逻辑
*/
import type { ColumnItemList } from '@ant-design/pro-editor';
import { ColumnList } from '@ant-design/pro-editor';
diff --git a/src/ColumnList/demos/creatorButtonPropsFalse.tsx b/src/ColumnList/demos/creatorButtonPropsFalse.tsx
new file mode 100644
index 00000000..29876060
--- /dev/null
+++ b/src/ColumnList/demos/creatorButtonPropsFalse.tsx
@@ -0,0 +1,68 @@
+/**
+ * title: 关闭添加能力
+ * description: 可通过 `creatorButtonProps={false}` 来关闭添加功能，包括添加一行按钮，回车添加以及空状态添加
+ */
+import type { ColumnItemList } from '@ant-design/pro-editor';
+import { ColumnList } from '@ant-design/pro-editor';
+import { tableColumnValueOptions } from './mock_data/options';
+
+type SchemaItem = {
+ title: string;
+ valueType?: string;
+ dataIndex: string;
+};
+
+const INIT_VALUES = [
+ {
+ dataIndex: 'productName',
+ valueType: 'text',
+ title: '产品名称',
+ color: undefined,
+ },
+ {
+ dataIndex: 'productComment',
+ valueType: 'text',
+ title: '产品介绍',
+ color: undefined,
+ },
+ {
+ dataIndex: 'orderStatus',
+ valueType: 'text',
+ title: '订单状态',
+ },
+];
+
+/**
+ * 创建一个随机的索引标记符，请勿在生产环境使用
+ */
+export const randomIndex = () => Math.random() * 10000;
+
+const columns: ColumnItemList = [
+ {
+ title: '列标题',
+ dataIndex: 'title',
+ type: 'input',
+ },
+ {
+ title: '值类型',
+ dataIndex: 'valueType',
+ type: 'select',
+ options: tableColumnValueOptions,
+ },
+ {
+ title: '字段',
+ dataIndex: 'dataIndex',
+ type: 'select',
+ },
+];
+
+export default () => (
+
+ columns={columns}
+ initialValues={INIT_VALUES}
+ onChange={(values) => {
+ console.log('onChange', values);
+ }}
+ creatorButtonProps={false}
+ />
+);
diff --git a/src/ColumnList/demos/customCreate.tsx b/src/ColumnList/demos/customCreate.tsx
index 23703592..36ff46dd 100644
--- a/src/ColumnList/demos/customCreate.tsx
+++ b/src/ColumnList/demos/customCreate.tsx
@@ -1,6 +1,6 @@
/**
* title: 自定义创建逻辑
- * description: 你可以设置 `creatorButtonProps={false}` 来关闭默认的创建效果，然后自定义创建逻辑
+ * description: 你可以设置 `style` 属性来隐藏默认添加按钮，然后自定义创建按钮
*/
import { PlusCircleTwoTone } from '@ant-design/icons';
import type { ColumnItemList, SortableListRef } from '@ant-design/pro-editor';
@@ -58,9 +58,14 @@ const columns: ColumnItemList = [
export default () => {
const ref = useRef>(null);
- const handleCreate = () => {
+ const createNewRecord = () => {
const id = `id-${randomIndex()}}`;
- ref.current.addItem({ dataIndex: id, title: `new-${id}`, valueType: 'text' });
+ return { dataIndex: '', title: `new-${id}`, valueType: 'text' };
+ };
+
+ const handleCreate = () => {
+ const data = createNewRecord();
+ ref.current.addItem(data);
};
return (
@@ -93,7 +98,7 @@ export default () => {
onChange={(values) => {
console.log('onChange', values);
}}
- creatorButtonProps={false}
+ creatorButtonProps={{ style: { display: 'none' }, record: createNewRecord }}
/>
);
diff --git a/src/ColumnList/demos/empty.tsx b/src/ColumnList/demos/empty.tsx
index 1291d80b..56ec1051 100644
--- a/src/ColumnList/demos/empty.tsx
+++ b/src/ColumnList/demos/empty.tsx
@@ -45,6 +45,7 @@ export default () => {
icon={ = [
@@ -45,11 +44,5 @@ export default () => (
onChange={(values) => {
console.log('onChange', values);
}}
- creatorButtonProps={{
- record: () => ({
- valueType: 'text',
- title: '示例标题',
- }),
- }}
/>
);
diff --git a/src/ColumnList/index.en-US.md b/src/ColumnList/index.en-US.md
index ac01785c..489987a2 100644
--- a/src/ColumnList/index.en-US.md
+++ b/src/ColumnList/index.en-US.md
@@ -14,7 +14,13 @@ Generate a simple sorting list based on `schema`.
## Code Demo
-(
- ({ dataIndex, placeholder, value, index, prefixCls, style, dragging }) => {
+ ({ dataIndex, placeholder, value, index, style, dragging, creatorButtonProps }) => {
const instance = useSortableList();
- const inputRef = useRef(null);
- const [innerValue, setInnerValue] = useState(value);
- const [changed, setChanged] = useState(false);
- const shouldChange = useRef(true);
- const { styles } = useStyle(prefixCls);
-
- const updateTitle = () => {
- instance.updateItem({ [dataIndex]: innerValue }, index);
- setChanged(false);
- };
+ const inputRef = useRef(null);
+ const { styles } = useStyle();
useEffect(() => {
if (dragging) {
@@ -53,42 +44,31 @@ const ControlInput = memo(
const handleNextFocus = () => {
const value = instance.getValue() || [];
// 如果是最后一个节点，按下回车后，会自动添加一个新的节点
- if (index + 1 === value.length) {
- instance.addItem({ [dataIndex]: '' });
+ if (index + 1 === value.length && creatorButtonProps !== false) {
+ const { record } = creatorButtonProps;
+ instance.addItem(record(value.length));
}
setTimeout(() => {
const nextNodeEl = document.getElementById(customListId(index + 1));
nextNodeEl?.focus();
- }, 200);
+ }, 0);
};
return (
(
- ({ dataIndex, value, index, prefixCls, style, options, placeholder }) => {
+ ({ dataIndex, value, index, style, options, placeholder }) => {
const instance = useSortableList();
- const { styles } = useStyle(prefixCls);
+ const { styles } = useStyle();
return (
{
- const { token, css, cx } = props;
+export const useStyle = createStyles((props) => {
+ const { token, css, cx, prefixCls } = props;
const common = getStudioStylish(props);
+ const prefix = `${prefixCls}-${token?.editorPrefix}-column-list`;
return {
content: cx(
- `${prefixCls}-content`,
+ `${prefix}-content`,
css`
flex: 1;
width: 100%;
@@ -16,13 +17,13 @@ export const useStyle = createStyles((props, prefixCls) => {
`,
),
header: cx(
- `${prefixCls}-header`,
+ `${prefix}-header`,
css`
color: ${token.colorTextTertiary};
`,
),
btnAdd: cx(
- `${prefixCls}-btn-add`,
+ `${prefix}-btn-add`,
css`
height: 24px;
padding-block: 2px;
diff --git a/src/ConfigProvider/AppContainer.tsx b/src/ConfigProvider/AppContainer.tsx
deleted file mode 100644
index 08711d2e..00000000
--- a/src/ConfigProvider/AppContainer.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { GetAntdThemeConfig, ThemeAppearance, ThemeMode } from 'antd-style';
-import { ThemeConfig } from 'antd/es/config-provider/context';
-import { STUDIO_UI_PREFIX } from '../theme';
-
-import { FC, PropsWithChildren } from 'react';
-import { OverrideAntdGlobalStyles } from '../antd/override';
-import { ThemeProvider, createStudioAntdTheme, getStudioStylish, getStudioToken } from '../theme';
-
-/**
- * @title 应用容器属性
- */
-export interface AppContainerProps {
- /**
- * @title 主题外观
- */
- appearance?: ThemeAppearance;
- /**
- * @title 主题模式
- * @enum ['light', 'dark']
- * @enumNames ['亮色', '暗色']
- * @default 'light'
- */
- themeMode?: ThemeMode;
- /**
- * @title 主题配置
- * @description 可以传入一个对象或者函数来生成主题配置
- */
- theme?: ThemeConfig | GetAntdThemeConfig;
-}
-
-export const AppContainer: FC> = ({
- children,
- theme,
- appearance,
- themeMode,
-}) => (
-
-
-);
diff --git a/src/ConfigProvider/ConfigProvider.tsx b/src/ConfigProvider/ConfigProvider.tsx
deleted file mode 100644
index 67be87f5..00000000
--- a/src/ConfigProvider/ConfigProvider.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { ConfigProvider as CP } from 'antd';
-import { AntdToken, ThemeAppearance, useAntdToken, useThemeMode } from 'antd-style';
-import type { OverrideToken } from 'antd/es/theme/interface';
-import type { FC, ReactNode } from 'react';
-
-import { createStudioAntdTheme } from '../theme';
-
-export const useStudioAntdTheme = (appearance: ThemeAppearance) => {
- const token = useAntdToken();
- const themeConfig = createStudioAntdTheme(appearance);
-
- const controlToken: Partial = {
- colorBgContainer: token?.colorFillQuaternary,
- colorBorder: 'transparent',
- controlHeightSM: 24,
- controlOutline: 'transparent',
- };
-
- themeConfig.components = {
- Input: controlToken,
- InputNumber: controlToken,
- Select: controlToken,
- Tree: {
- colorBgContainer: 'transparent',
- controlHeightSM: 24,
- },
- TreeSelect: controlToken,
- };
-
- return themeConfig;
-};
-
-export interface ConfigProviderProps {
- componentToken?: OverrideToken;
- children: ReactNode;
-}
-
-export const ConfigProvider: FC = ({ children, componentToken }) => {
- const { appearance } = useThemeMode();
-
- const studioTheme = useStudioAntdTheme(appearance);
-
- if (componentToken) {
- studioTheme.components = { ...studioTheme.components, ...componentToken };
- }
-
- return (
-
- {children}
-
- );
-};
-
-export const withProvider = (Component) => (props) => {
- return (
-
-
- );
-};
diff --git a/src/ConfigProvider/index.en-US.md b/src/ConfigProvider/index.en-US.md
deleted file mode 100644
index fc8d07e1..00000000
--- a/src/ConfigProvider/index.en-US.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-title: ConfigProvider
-group:
- title: Other
- order: 999
----
-
-# ConfigProvider Global Container
diff --git a/src/ConfigProvider/index.tsx b/src/ConfigProvider/index.tsx
index b12a68d5..5f3a8493 100644
--- a/src/ConfigProvider/index.tsx
+++ b/src/ConfigProvider/index.tsx
@@ -1,2 +1,62 @@
-export * from './AppContainer';
-export * from './ConfigProvider';
+import { ConfigProvider as AntdConfigProvider } from 'antd';
+import { AntdToken, ThemeAppearance, useAntdToken, useThemeMode } from 'antd-style';
+import type { OverrideToken } from 'antd/es/theme/interface';
+import type { FC, ReactNode } from 'react';
+import { ThemeProvider, createStudioAntdTheme, getStudioStylish, getStudioToken } from '../theme';
+
+export const useStudioAntdTheme = (appearance: ThemeAppearance) => {
+ const token = useAntdToken();
+ const themeConfig = createStudioAntdTheme(appearance);
+
+ const controlToken: Partial = {
+ colorBgContainer: token?.colorFillQuaternary,
+ colorBorder: 'transparent',
+ controlOutline: 'transparent',
+ };
+
+ themeConfig.components = {
+ Input: controlToken,
+ InputNumber: controlToken,
+ Select: controlToken,
+ Tree: {
+ colorBgContainer: 'transparent',
+ },
+ TreeSelect: controlToken,
+ };
+
+ return themeConfig;
+};
+
+export interface ConfigProviderProps {
+ componentToken?: OverrideToken;
+ children: ReactNode;
+}
+
+export const ConfigProvider: FC = ({ children, componentToken }) => {
+ const { appearance, themeMode } = useThemeMode();
+ const studioTheme = useStudioAntdTheme(appearance);
+ studioTheme.components = { ...studioTheme.components, ...componentToken };
+
+ return (
+
+
+ {children}
+
+
+ );
+};
+
+export const withProvider = (Component) => (props) => {
+ return (
+
+
+ );
+};
diff --git a/src/ConfigProvider/index.zh-CN.md b/src/ConfigProvider/index.zh-CN.md
deleted file mode 100644
index eec09058..00000000
--- a/src/ConfigProvider/index.zh-CN.md
+++ /dev/null
@@ -1,9 +0,0 @@
----
-title: ConfigProvider 全局容器
-atomId: ConfigProvider
-group:
- title: 其他
- order: 1000
----
-
-# ConfigProvider 全局容器
diff --git a/src/ContextMenu/MenuItem/style.ts b/src/ContextMenu/MenuItem/style.ts
index f92bcec5..675691c2 100644
--- a/src/ContextMenu/MenuItem/style.ts
+++ b/src/ContextMenu/MenuItem/style.ts
@@ -1,72 +1,71 @@
-import { createStyles } from 'antd-style';
+import { createStyles } from '../../theme';
-export const useStyles = createStyles(
- ({ css, cx, token }, prefixCls = 'studio-context-menu-item') => {
- const selected = css`
- font-weight: bold;
- color: ${token.colorPrimaryText};
- background: ${token.colorPrimaryBg};
- &:hover {
- color: ${token.colorPrimaryTextHover};
- background: ${token.colorPrimaryBgHover};
- }
- `;
+export const useStyles = createStyles(({ css, cx, token, prefixCls: antCls }) => {
+ const prefixCls = `${antCls}-${token.editorPrefix}-context-menu`;
+ const selected = css`
+ font-weight: bold;
+ color: ${token.colorPrimaryText};
+ background: ${token.colorPrimaryBg};
+ &:hover {
+ color: ${token.colorPrimaryTextHover};
+ background: ${token.colorPrimaryBgHover};
+ }
+ `;
- return {
- item: cx(
- `${prefixCls}-item`,
+ return {
+ item: cx(
+ `${prefixCls}-item`,
- css`
- all: unset;
+ css`
+ all: unset;
- user-select: none;
- scroll-margin: 50px;
+ user-select: none;
+ scroll-margin: 50px;
- display: flex;
- align-items: center;
- justify-content: space-between;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
- box-sizing: inherit;
- width: 100%;
- padding: 12px 10px;
+ box-sizing: inherit;
+ width: 100%;
+ padding: 12px 10px;
- font-family: ${token.fontFamily};
- font-weight: normal;
- line-height: 1;
- color: ${token.colorText};
+ font-family: ${token.fontFamily};
+ font-weight: normal;
+ line-height: 1;
+ color: ${token.colorText};
- background: transparent;
- border-radius: 5px;
- &:hover {
- background: ${token.colorFillTertiary};
- }
- `,
- ),
- selected: cx(`${prefixCls}-item-selected`, selected),
- active: cx(
- `${prefixCls}-item-active`,
- css`
+ background: transparent;
+ border-radius: 5px;
+ &:hover {
background: ${token.colorFillTertiary};
- `,
- ),
- arrow: css`
- color: ${token.colorTextTertiary};
+ }
+ `,
+ ),
+ selected: cx(`${prefixCls}-item-selected`, selected),
+ active: cx(
+ `${prefixCls}-item-active`,
+ css`
+ background: ${token.colorFillTertiary};
`,
+ ),
+ arrow: css`
+ color: ${token.colorTextTertiary};
+ `,
- kbd: css`
- display: flex;
- align-items: center;
- justify-content: center;
+ kbd: css`
+ display: flex;
+ align-items: center;
+ justify-content: center;
- width: 18px;
- height: 20px;
+ width: 18px;
+ height: 20px;
- font-family: ${token.fontFamily};
- font-size: 14px;
- color: ${token.colorTextQuaternary};
+ font-family: ${token.fontFamily};
+ font-size: 14px;
+ color: ${token.colorTextQuaternary};
- border-radius: 2px;
- `,
- };
- },
-);
+ border-radius: 2px;
+ `,
+ };
+});
diff --git a/src/ContextMenu/demos/index.tsx b/src/ContextMenu/demos/index.tsx
index a14a9015..5261942d 100644
--- a/src/ContextMenu/demos/index.tsx
+++ b/src/ContextMenu/demos/index.tsx
@@ -1,36 +1,37 @@
+/**
+ * title: 右键菜单
+ * description: 右键点击屏幕
+ */
import { CopyOutlined, ExpandOutlined, ZoomInOutlined, ZoomOutOutlined } from '@ant-design/icons';
import { ContextMenu } from '@ant-design/pro-editor';
export default () => {
return (
- <>
- RightClick
- >(
(props, ref) => (
-
-
+
+
+
+
),
);
diff --git a/src/ContextMenu/index.zh-CN.md b/src/ContextMenu/index.zh-CN.md
index f3a89a9f..59f34921 100644
--- a/src/ContextMenu/index.zh-CN.md
+++ b/src/ContextMenu/index.zh-CN.md
@@ -62,7 +62,7 @@ export type MenuItemType = GeneralItemType | SubMenuType | MenuDividerType;
菜单分割线类型。
-| 属性名 | 类型 | 描述 |
-| ------ | --------- | --------------------------------- |
-| dashed | `boolean` | 菜单分割线的样式是否为虚线 |
-| type | `string` | 菜单分割线的类型，固定为'divider' |
+| 属性名 | 类型 | 描述 |
+| ------ | --------- | ---------------------------------- |
+| dashed | `boolean` | 菜单分割线的样式是否为虚线 |
+| type | `string` | 菜单分割线的类型，固定为 'divider' |
diff --git a/src/ContextMenu/style.ts b/src/ContextMenu/style.ts
index 3fe048e7..9029cca9 100644
--- a/src/ContextMenu/style.ts
+++ b/src/ContextMenu/style.ts
@@ -1,62 +1,65 @@
-import { createStyles } from 'antd-style';
-
-export const useStyles = createStyles(({ css, cx, token }, prefixCls: string) => ({
- container: cx(
- prefixCls,
- css`
- all: unset;
- user-select: none;
- scrollbar-width: none;
-
- overflow-y: auto;
- overscroll-behavior: contain;
-
- box-sizing: border-box;
- width: 200px;
- padding: 5px;
-
- font-size: ${token.fontSize}px;
-
- background: ${token.colorBgContainer};
- border: 1px solid ${token.colorBorder};
- border-radius: 8px;
- outline: 0;
- box-shadow: ${token.boxShadowSecondary};
-
- &::-webkit-scrollbar {
- display: none;
- }
- `,
- ),
- button: cx(
- `${prefixCls}-button`,
- css`
- all: unset;
-
- cursor: default;
- user-select: none;
-
- padding: 12px 10px;
-
- font-size: ${token.fontSize}px;
- line-height: 1;
- color: ${token.colorText};
-
- background: ${token.colorBgContainer};
- border: 1px solid ${token.colorBorder};
- border-radius: ${token.borderRadius}px;
-
- -webkit-tap-highlight-color: transparent;
-
- &:hover {
- background: ${token.colorPrimaryBg};
- border-color: transparent;
- }
-
- &:focus-visible {
- border-color: ${token.colorPrimary};
- box-shadow: 0 0 0 2px ${token.colorPrimaryBg};
- }
- `,
- ),
-}));
+import { createStyles } from '../theme';
+
+export const useStyles = createStyles(({ css, cx, token, prefixCls: antCls }) => {
+ const prefixCls = `${antCls}-${token.editorPrefix}-context-menu`;
+ return {
+ container: cx(
+ prefixCls,
+ css`
+ all: unset;
+ user-select: none;
+ scrollbar-width: none;
+
+ overflow-y: auto;
+ overscroll-behavior: contain;
+
+ box-sizing: border-box;
+ width: 200px;
+ padding: 5px;
+
+ font-size: ${token.fontSize}px;
+
+ background: ${token.colorBgContainer};
+ border: 1px solid ${token.colorBorder};
+ border-radius: 8px;
+ outline: 0;
+ box-shadow: ${token.boxShadowSecondary};
+
+ &::-webkit-scrollbar {
+ display: none;
+ }
+ `,
+ ),
+ button: cx(
+ `${prefixCls}-button`,
+ css`
+ all: unset;
+
+ cursor: default;
+ user-select: none;
+
+ padding: 12px 10px;
+
+ font-size: ${token.fontSize}px;
+ line-height: 1;
+ color: ${token.colorText};
+
+ background: ${token.colorBgContainer};
+ border: 1px solid ${token.colorBorder};
+ border-radius: ${token.borderRadius}px;
+
+ -webkit-tap-highlight-color: transparent;
+
+ &:hover {
+ background: ${token.colorPrimaryBg};
+ border-color: transparent;
+ }
+
+ &:focus-visible {
+ border-color: ${token.colorPrimary};
+ box-shadow: 0 0 0 2px ${token.colorPrimaryBg};
+ }
+ `,
+ ),
+ };
+});
diff --git a/src/DataFill/components/Title/index.tsx b/src/DataFill/components/Title/index.tsx
index 5cdcfe98..67e97771 100644
--- a/src/DataFill/components/Title/index.tsx
+++ b/src/DataFill/components/Title/index.tsx
@@ -8,15 +8,14 @@ import { useStyle } from './style';
interface TitleProps {
title: string;
- prefixCls: string;
dataKey: string;
}
-const Title: FC
= ({ title, prefixCls, dataKey }) => {
+const Title: FC = ({ title, dataKey }) => {
const demoData = useStore((s) => s.demoData);
const demoKey = useStore((s) => s.demoKey);
- const { styles } = useStyle(prefixCls);
+ const { styles } = useStyle();
return (
diff --git a/src/DataFill/components/Title/style.ts b/src/DataFill/components/Title/style.ts
index 34222927..dd7aea20 100644
--- a/src/DataFill/components/Title/style.ts
+++ b/src/DataFill/components/Title/style.ts
@@ -1,9 +1,10 @@
-import { createStyles } from 'antd-style';
+import { createStyles } from '../../../theme';
-export const useStyle = createStyles(({ token, css, cx }, prefixCls) => {
+export const useStyle = createStyles(({ token, css, cx, prefixCls }) => {
+ const prefix = `${prefixCls}-${token.editorPrefix}`;
return {
demo: cx(
- `${prefixCls}-demo-data`,
+ `${prefix}-demo-data`,
css({
maxWidth: '120px',
overflow: 'hidden',
diff --git a/src/DataFill/components/TreeNode/index.tsx b/src/DataFill/components/TreeNode/index.tsx
index b0e15a10..690397ab 100644
--- a/src/DataFill/components/TreeNode/index.tsx
+++ b/src/DataFill/components/TreeNode/index.tsx
@@ -20,14 +20,10 @@ const selector = (s: DataFillStore) => ({
interface TreeNodeProps {
data: FillTreeNode;
- prefixCls: string;
}
-const TreeNode: FC = ({ data, prefixCls }) => {
- const { updateConfig, handleFill, config, handleShowDemoData } = useStore(
- selector,
- shallow,
- );
+const TreeNode: FC = ({ data }) => {
+ const { updateConfig, handleFill, config, handleShowDemoData } = useStore(selector, shallow);
return (
= ({ data, prefixCls }) => {
handleFill(data.key);
}}
>
- {
diff --git a/src/DataFill/container/App.tsx b/src/DataFill/container/App.tsx
index b6ae618d..cd5c533b 100644
--- a/src/DataFill/container/App.tsx
+++ b/src/DataFill/container/App.tsx
@@ -5,7 +5,6 @@ import { useCallback } from 'react';
import { Flexbox } from 'react-layout-kit';
import type { DataFillAppProps, FillTreeNode } from '../types';
-import { getPrefixCls } from '../../theme';
import TreeNode from '../components/TreeNode';
import { useStore } from '../store';
@@ -14,26 +13,17 @@ import { useStyle } from './style';
const { DirectoryTree } = Tree;
const App: FC
= (props) => {
- const { prefixCls: customizePrefixCls, className } = props;
+ const { className } = props;
- const prefixCls = getPrefixCls('data-fill', customizePrefixCls);
-
- const { styles } = useStyle(prefixCls);
+ const { styles } = useStyle();
const treeData = useStore((s) => s.fillTreeData);
- const titleRender = useCallback(
- (data: FillTreeNode) => ) =>
-
+
);
};
diff --git a/src/DataFill/container/__snapshots__/index.test.tsx.snap b/src/DataFill/container/__snapshots__/index.test.tsx.snap
index e1371c94..1a6af2ec 100644
--- a/src/DataFill/container/__snapshots__/index.test.tsx.snap
+++ b/src/DataFill/container/__snapshots__/index.test.tsx.snap
@@ -11,12 +11,12 @@ exports[`DataFill > 数据填充可正常渲染 1`] = `
flex-direction: column;
}
-.emotion-1 .studio-tree-directory .studio-tree-switcher,
-.emotion-1 .studio-tree-directory .studio-tree-iconEle {
+.emotion-1 .ant-tree-directory .ant-tree-switcher,
+.emotion-1 .ant-tree-directory .ant-tree-iconEle {
line-height: 32px!important;
}
-.emotion-1 .studio-tree-directory .studio-tree-node-content-wrapper {
+.emotion-1 .ant-tree-directory .ant-tree-node-content-wrapper {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
@@ -25,61 +25,61 @@ exports[`DataFill > 数据填充可正常渲染 1`] = `
line-height: 32px!important;
}
-.emotion-1 .studio-tree-directory .studio-tree-title {
+.emotion-1 .ant-tree-directory .ant-tree-title {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
-.emotion-1 .studio-tree-directory .studio-tree-treenode {
+.emotion-1 .ant-tree-directory .ant-tree-treenode {
cursor: pointer;
}
-.emotion-1 .studio-tree-directory .studio-tree-treenode::before {
+.emotion-1 .ant-tree-directory .ant-tree-treenode::before {
border: 1px solid rgba(5, 5, 5, 0.06);
border-radius: 4px;
}
-.emotion-1 .studio-tree-directory .studio-tree-treenode:hover .studio-tree-switcher {
+.emotion-1 .ant-tree-directory .ant-tree-treenode:hover .ant-tree-switcher {
color: rgba(0, 0, 0, 0.88);
}
-.emotion-1 .studio-tree-directory .studio-tree-treenode:hover .studio-tree-node-content-wrapper {
+.emotion-1 .ant-tree-directory .ant-tree-treenode:hover .ant-tree-node-content-wrapper {
color: rgba(0, 0, 0, 0.88);
}
-.emotion-1 .studio-tree-directory .studio-tree-treenode:hover::before {
+.emotion-1 .ant-tree-directory .ant-tree-treenode:hover::before {
background: rgba(0, 0, 0, 0.02);
border-color: #1677ff;
box-shadow: 0 0 3px 0 #1677ff;
}
-.emotion-1 .studio-tree-directory .studio-tree-treenode .studio-tree-switcher-noop {
+.emotion-1 .ant-tree-directory .ant-tree-treenode .ant-tree-switcher-noop {
cursor: pointer;
}
-.emotion-1 .studio-tree-directory .studio-tree-treenode .studio-tree-switcher {
+.emotion-1 .ant-tree-directory .ant-tree-treenode .ant-tree-switcher {
color: rgba(0, 0, 0, 0.88);
}
-.emotion-1 .studio-tree-directory .studio-tree-treenode .studio-tree-node-content-wrapper {
+.emotion-1 .ant-tree-directory .ant-tree-treenode .ant-tree-node-content-wrapper {
color: rgba(0, 0, 0, 0.88);
}
-.emotion-1 .studio-tree-directory .studio-tree-treenode-selected::before {
+.emotion-1 .ant-tree-directory .ant-tree-treenode-selected::before {
background: #ffffff;
border: 2 solid #1677ff;
}
-.emotion-1 .studio-tree-directory .studio-tree-treenode-selected .studio-tree-switcher {
+.emotion-1 .ant-tree-directory .ant-tree-treenode-selected .ant-tree-switcher {
color: rgba(0, 0, 0, 0.88);
}
-.emotion-1 .studio-tree-directory .studio-tree-treenode-selected .studio-tree-node-content-wrapper {
+.emotion-1 .ant-tree-directory .ant-tree-treenode-selected .ant-tree-node-content-wrapper {
color: rgba(0, 0, 0, 0.88);
}
-.emotion-1 .studio-tree-directory .studio-tree-indent-unit {
+.emotion-1 .ant-tree-directory .ant-tree-indent-unit {
width: 12px;
}
@@ -121,29 +121,29 @@ exports[`DataFill > 数据填充可正常渲染 1`] = `
padding: 4px;
}
-.emotion-6 .studio-segmented-item {
+.emotion-6 .ant-segmented-item {
margin-right: 4px;
color: rgba(0, 0, 0, 0.45);
border-radius: 2px;
}
-.emotion-6 .studio-segmented-item:hover {
+.emotion-6 .ant-segmented-item:hover {
color: rgba(0, 0, 0, 0.65);
}
-.emotion-6 .studio-segmented-item:last-child {
+.emotion-6 .ant-segmented-item:last-child {
margin-right: 0;
}
-.emotion-6 .studio-segmented-item-selected {
+.emotion-6 .ant-segmented-item-selected {
color: rgba(0, 0, 0, 0.88);
}
-.emotion-6 .studio-segmented-item-selected:hover {
+.emotion-6 .ant-segmented-item-selected:hover {
color: rgba(0, 0, 0, 0.88);
}
-.emotion-6 .studio-segmented-item-label {
+.emotion-6 .ant-segmented-item-label {
min-height: auto;
padding: 2px 7px;
line-height: unset;
@@ -151,10 +151,10 @@ exports[`DataFill > 数据填充可正常渲染 1`] = `
@@ -167,44 +167,44 @@ exports[`DataFill > 数据填充可正常渲染 1`] = `
数据填充可正常渲染 1`] = `
数据填充可正常渲染 1`] = `
数据填充可正常渲染 1`] = `
文本
@@ -401,19 +401,19 @@ exports[`DataFill > 数据填充可正常渲染 1`] = `
数据填充可正常渲染 1`] = `
数据填充可正常渲染 1`] = `
数据填充可正常渲染 1`] = `
数据
0~9
10~99
100~999
@@ -549,19 +549,19 @@ exports[`DataFill > 数据填充可正常渲染 1`] = `
数据填充可正常渲染 1`] = `
数据填充可正常渲染 1`] = `
数据填充可正常渲染 1`] = `
时间
diff --git a/src/DataFill/container/style.ts b/src/DataFill/container/style.ts
index e59d831e..c4eb4084 100644
--- a/src/DataFill/container/style.ts
+++ b/src/DataFill/container/style.ts
@@ -1,13 +1,12 @@
import { createStyles } from 'antd-style';
-import { STUDIO_UI_PREFIX } from '../../theme';
-const studioCls = `.${STUDIO_UI_PREFIX}`;
+export const useStyle = createStyles(({ token, css, prefixCls }) => {
+ const antCls = `.${prefixCls}`;
-export const useStyle = createStyles(({ token, css }) => {
return {
directory: css({
- [`${studioCls}-tree-directory`]: {
- [`${studioCls}-tree`]: {
+ [`${antCls}-tree-directory`]: {
+ [`${antCls}-tree`]: {
'&-switcher, &-iconEle': {
lineHeight: '32px !important',
},
@@ -33,11 +32,11 @@ export const useStyle = createStyles(({ token, css }) => {
},
'&:hover': {
- [`& ${studioCls}-tree-switcher`]: {
+ [`& ${antCls}-tree-switcher`]: {
color: token.colorText,
},
- [`& ${studioCls}-tree-node-content-wrapper`]: {
+ [`& ${antCls}-tree-node-content-wrapper`]: {
color: token.colorText,
},
},
@@ -47,15 +46,15 @@ export const useStyle = createStyles(({ token, css }) => {
borderColor: token.colorPrimary,
boxShadow: `0 0 3px 0 ${token.colorPrimary}`,
},
- [`${studioCls}-tree-switcher-noop`]: {
+ [`${antCls}-tree-switcher-noop`]: {
cursor: 'pointer',
},
- [`& ${studioCls}-tree-switcher`]: {
+ [`& ${antCls}-tree-switcher`]: {
color: token.colorText,
},
- [`& ${studioCls}-tree-node-content-wrapper`]: {
+ [`& ${antCls}-tree-node-content-wrapper`]: {
color: token.colorText,
},
},
@@ -67,11 +66,11 @@ export const useStyle = createStyles(({ token, css }) => {
border: `${token.borderRadiusXS} solid ${token.colorPrimary}`,
},
- [`& ${studioCls}-tree-switcher`]: {
+ [`& ${antCls}-tree-switcher`]: {
color: token.colorText,
},
- [`& ${studioCls}-tree-node-content-wrapper`]: {
+ [`& ${antCls}-tree-node-content-wrapper`]: {
color: token.colorText,
},
},
diff --git a/src/DataFill/index.zh-CN.md b/src/DataFill/index.zh-CN.md
index 08c78a61..5eafe61f 100644
--- a/src/DataFill/index.zh-CN.md
+++ b/src/DataFill/index.zh-CN.md
@@ -27,7 +27,7 @@ group: 面板模块
| 参数 | 说明 | 类型 | 默认值 |
| :----- | :----------------------------------- | :------------- | :----- |
| key | 选中数据类型的 key, 键值见 KeyMap | `string` | - |
-| filler | 过滤函数, 返回对应数据类型的 Mock 值 | `() => string` | - |
+| filler | 过滤函数，返回对应数据类型的 Mock 值 | `() => string` | - |
### KeyMap
diff --git a/src/DataFill/types.ts b/src/DataFill/types.ts
index 7958d185..32d45795 100644
--- a/src/DataFill/types.ts
+++ b/src/DataFill/types.ts
@@ -88,11 +88,6 @@ export type OnItemClick = (payload: FilledPayload) => void;
// eslint-disable-next-line @typescript-eslint/no-empty-interface
export interface DataFillAppProps {
- /**
- * @description 自定义前缀
- * @ignore
- */
- prefixCls?: string;
/**
* 类名
*/
@@ -117,8 +112,7 @@ export type DateTimeParams = 'date' | 'dateTime' | 'time';
export type WebsiteParams = 'url' | 'domain' | 'ip';
export type DataParams = 'digits' | 'tens' | 'hundreds';
-export interface DataFillConfig
- extends Partial
> {
+export interface DataFillConfig extends Partial> {
name: NameParams;
percent: boolean;
phone: boolean;
diff --git a/src/DataPreviewer/index.tsx b/src/DataPreviewer/index.tsx
index b1edf57a..05470d00 100644
--- a/src/DataPreviewer/index.tsx
+++ b/src/DataPreviewer/index.tsx
@@ -1,12 +1,11 @@
import { DatabaseOutlined, FlagOutlined, RollbackOutlined, TableOutlined } from '@ant-design/icons';
-import { ActionIcon, CollapseTitle } from '@ant-design/pro-editor';
+import { ActionIcon, CollapseTitle, withProvider } from '@ant-design/pro-editor';
import { JsonViewer } from '@textea/json-viewer';
import { Button, Divider, Empty, Pagination, Popconfirm, Table } from 'antd';
import type { CSSProperties, FC, ReactNode } from 'react';
import { useMemo, useState } from 'react';
import { Flexbox } from 'react-layout-kit';
import useMergedState from 'use-merge-value';
-import { getPrefixCls } from '../theme';
import { useThemeMode } from 'antd-style';
import { useStyle } from './style';
@@ -65,10 +64,6 @@ export interface DataPreviewerProps {
* 样式
*/
style?: CSSProperties;
- /**
- * 前缀
- */
- prefixCls?: string;
}
const Previewer: FC = ({
@@ -84,12 +79,9 @@ const Previewer: FC = ({
style,
columns,
onResetClick,
- prefixCls: customPrefixCls,
}) => {
- const prefixCls = getPrefixCls('data-previewer', customPrefixCls);
-
const { isDarkMode } = useThemeMode();
- const { styles, cx } = useStyle(prefixCls);
+ const { styles, cx } = useStyle();
const [hidePanel, setCollapsed] = useMergedState(false, {
value: collapsed,
onChange: onVisibleChange,
@@ -217,4 +209,4 @@ const Previewer: FC = ({
);
};
-export const DataPreviewer = Previewer;
+export const DataPreviewer: FC = withProvider(Previewer);
diff --git a/src/DataPreviewer/index.zh-CN.md b/src/DataPreviewer/index.zh-CN.md
index 4213f407..45dcf9d2 100644
--- a/src/DataPreviewer/index.zh-CN.md
+++ b/src/DataPreviewer/index.zh-CN.md
@@ -46,7 +46,7 @@ group: 面板模块
| renderEmpty | `(node: ReactNode) => ReactNode` | 渲染空状态 |
| emptyAction | `ReactNode` | 空状态立即尝试按钮右侧渲染 |
| onVisibleChange | `(visible: boolean) => void` | 展开或者隐藏状态的回调 |
-| onEmptyClick | `() => void` | 点击“立即尝试”按钮的回调 |
+| onEmptyClick | `() => void` | 点击 “立即尝试” 按钮的回调 |
| onResetClick | `() => void` | 重置按钮回调 |
| showType | `boolean` | 是否显示数据类型 |
| extra | `ReactNode` | 额外节点展示 |
diff --git a/src/DataPreviewer/style.ts b/src/DataPreviewer/style.ts
index 69d8bcc5..570a778d 100644
--- a/src/DataPreviewer/style.ts
+++ b/src/DataPreviewer/style.ts
@@ -1,26 +1,27 @@
import { createStyles } from '../theme';
-export const useStyle = createStyles(({ token, stylish, cx, css }, prefixCls: string) => {
+export const useStyle = createStyles(({ token, stylish, cx, css, prefixCls }) => {
+ const prefix = `${prefixCls}-${token?.editorPrefix}-data-previewer`;
return {
container: cx(
- prefixCls,
+ prefix,
css`
${stylish.textInfo}
`,
),
empty: cx(
- `${prefixCls}-empty`,
+ `${prefix}-empty`,
css`
padding: 8px;
background: ${token.colorFillQuaternary};
border-radius: 4px;
- .studio-empty-normal {
+ .${prefixCls}-empty-normal {
margin: 12px 0;
}
`,
),
json: cx(
- `${prefixCls}-json`,
+ `${prefix}-json`,
css`
border-radius: 4px;
@@ -30,7 +31,7 @@ export const useStyle = createStyles(({ token, stylish, cx, css }, prefixCls: st
`,
),
table: css`
- .studio-table-cell {
+ .${prefixCls}-table-cell {
padding: 4px !important;
}
`,
diff --git a/src/DraggablePanel/DraggablePanel.tsx b/src/DraggablePanel/DraggablePanel.tsx
index f731ffea..f74ea633 100644
--- a/src/DraggablePanel/DraggablePanel.tsx
+++ b/src/DraggablePanel/DraggablePanel.tsx
@@ -3,8 +3,7 @@ import type { CSSProperties, FC, ReactNode } from 'react';
import { memo } from 'react';
import type { Props as RndProps } from 'react-rnd';
-import { getPrefixCls } from '../theme';
-
+import { withProvider } from '..';
import { FixMode } from './FixMode';
import { FloatMode } from './FloatMode';
@@ -29,6 +28,14 @@ export interface DraggablePanelProps {
* 最小高度
*/
minHeight?: number;
+ /**
+ * 最大宽度
+ */
+ maxWidth?: number;
+ /**
+ * 最大高度
+ */
+ maxHeight?: number;
/**
* 控制可缩放区域
*/
@@ -91,13 +98,9 @@ export interface DraggablePanelProps {
* 内容
*/
children: ReactNode;
- /**
- * 类名前缀
- */
- prefixCls?: string;
}
-export const Draggable: FC = memo(
+const Draggable: FC = memo(
({
children,
className,
@@ -112,21 +115,19 @@ export const Draggable: FC = memo(
defaultPosition,
minWidth,
minHeight,
- prefixCls: customPrefixCls,
+ maxHeight,
+ maxWidth,
onSizeChange,
onSizeDragging,
expandable = true,
isExpand,
onExpandChange,
}) => {
- const prefixCls = getPrefixCls('draggable-panel', customPrefixCls);
-
switch (mode) {
case 'fixed':
default:
return (
= memo(
onSizeChange={onSizeChange}
minHeight={minHeight}
minWidth={minWidth}
+ maxHeight={maxHeight}
+ maxWidth={maxWidth}
// 缩放
resize={resize}
onExpandChange={onExpandChange}
@@ -149,7 +152,6 @@ export const Draggable: FC = memo(
case 'float':
return (
= memo(
// 尺寸
minHeight={minHeight}
minWidth={minWidth}
+ maxHeight={maxHeight}
+ maxWidth={maxWidth}
defaultSize={defaultSize}
size={size}
onSizeDragging={onSizeDragging}
@@ -173,3 +177,7 @@ export const Draggable: FC = memo(
}
},
);
+
+const WithProviderDraggable: FC = withProvider(Draggable);
+
+export { WithProviderDraggable as Draggable };
diff --git a/src/DraggablePanel/FixMode.tsx b/src/DraggablePanel/FixMode.tsx
index 69405a1a..d3997151 100644
--- a/src/DraggablePanel/FixMode.tsx
+++ b/src/DraggablePanel/FixMode.tsx
@@ -6,13 +6,7 @@ import { Center } from 'react-layout-kit';
import type { Props as RndProps } from 'react-rnd';
import useControlledState from 'use-merge-value';
-import {
- DownOutlined,
- LeftOutlined,
- RightOutlined,
- UpOutlined,
-} from '@ant-design/icons';
-import { getPrefixCls } from '../theme';
+import { DownOutlined, LeftOutlined, RightOutlined, UpOutlined } from '@ant-design/icons';
import { useStyle } from './style';
export interface FixModePanelProps {
@@ -36,6 +30,15 @@ export interface FixModePanelProps {
* 最小高度
*/
minHeight?: number;
+
+ /**
+ * 最大宽度
+ */
+ maxWidth?: number;
+ /**
+ * 最大高度
+ */
+ maxHeight?: number;
/**
* 控制可缩放区域
*/
@@ -95,10 +98,6 @@ export interface FixModePanelProps {
* 内容
*/
children: ReactNode;
- /**
- * 类名前缀
- */
- prefixCls?: string;
}
const DEFAULT_HEIGHT = 150;
@@ -117,7 +116,7 @@ const revesePlacement = (placement: 'right' | 'left' | 'top' | 'bottom') => {
}
};
-export const FixMode: FC = memo(
+const FixMode: FC = memo(
({
children,
placement = 'right',
@@ -127,7 +126,8 @@ export const FixMode: FC = memo(
defaultSize: customizeDefaultSize,
minWidth,
minHeight,
- prefixCls: customPrefixCls,
+ maxHeight,
+ maxWidth,
onSizeChange,
onSizeDragging,
expandable = true,
@@ -135,11 +135,9 @@ export const FixMode: FC = memo(
onExpandChange,
className,
}) => {
- const prefixCls = getPrefixCls('draggable-panel', customPrefixCls);
-
const isVertical = placement === 'top' || placement === 'bottom';
- const { styles, cx } = useStyle(prefixCls);
+ const { styles, cx } = useStyle();
const [isExpand, setIsExpand] = useControlledState(true, {
value: expand,
@@ -153,8 +151,7 @@ export const FixMode: FC = memo(
if (!canResizing) return {};
return {
- [revesePlacement(placement)]:
- styles[`${revesePlacement(placement)}Handle`],
+ [revesePlacement(placement)]: styles[`${revesePlacement(placement)}Handle`],
};
}, [canResizing, placement]);
@@ -189,8 +186,9 @@ export const FixMode: FC = memo(
const sizeProps = isExpand
? {
minWidth: typeof minWidth === 'number' ? Math.max(minWidth, 0) : 280,
- minHeight:
- typeof minHeight === 'number' ? Math.max(minHeight, 0) : undefined,
+ minHeight: typeof minHeight === 'number' ? Math.max(minHeight, 0) : undefined,
+ maxHeight: typeof maxHeight === 'number' ? Math.max(maxHeight, 0) : undefined,
+ maxWidth: typeof maxWidth === 'number' ? Math.max(maxWidth, 0) : undefined,
defaultSize,
size: size as Size,
style,
@@ -256,3 +254,5 @@ export const FixMode: FC = memo(
);
},
);
+
+export { FixMode };
diff --git a/src/DraggablePanel/FloatMode.tsx b/src/DraggablePanel/FloatMode.tsx
index 89a0705d..89d45dc2 100644
--- a/src/DraggablePanel/FloatMode.tsx
+++ b/src/DraggablePanel/FloatMode.tsx
@@ -28,6 +28,14 @@ export interface FloatProps {
* 最小高度
*/
minHeight?: number;
+ /**
+ * 最大宽度
+ */
+ maxWidth?: number;
+ /**
+ * 最大高度
+ */
+ maxHeight?: number;
/**
* 控制可缩放区域
*/
@@ -78,10 +86,6 @@ export interface FloatProps {
* 内容
*/
children: ReactNode;
- /**
- * 类名前缀
- */
- prefixCls?: string;
}
const DEFAULT_HEIGHT = 300;
@@ -100,10 +104,11 @@ export const FloatMode: FC = memo(
defaultPosition: customizeDefaultPosition,
minWidth = 280,
minHeight = 200,
- prefixCls,
+ maxHeight,
+ maxWidth,
canResizing,
}) => {
- const { styles } = useStyle(prefixCls);
+ const { styles } = useStyle();
const resizeHandleClassNames: HandleClassName = useMemo(() => {
if (!canResizing) return {};
@@ -147,6 +152,8 @@ export const FloatMode: FC = memo(
const sizeProps = {
minWidth: Math.max(minWidth, 0),
minHeight: Math.max(minHeight, 0),
+ maxHeight: maxHeight ? Math.max(maxHeight, 0) : undefined,
+ maxWidth: maxWidth ? Math.max(maxWidth, 0) : undefined,
defaultSize,
size: size as Size,
style,
diff --git a/src/DraggablePanel/demos/basic.tsx b/src/DraggablePanel/demos/basic.tsx
index 8fe4dd3c..3de2f26c 100644
--- a/src/DraggablePanel/demos/basic.tsx
+++ b/src/DraggablePanel/demos/basic.tsx
@@ -6,14 +6,14 @@ import { DraggablePanel } from '@ant-design/pro-editor';
export default () => (
diff --git a/src/DraggablePanel/demos/bottom.tsx b/src/DraggablePanel/demos/bottom.tsx
index c2bf17e0..d64fa948 100644
--- a/src/DraggablePanel/demos/bottom.tsx
+++ b/src/DraggablePanel/demos/bottom.tsx
@@ -1,18 +1,13 @@
/**
- * height: 600
+ * compact: true
*/
import { DraggablePanel } from '@ant-design/pro-editor';
import { Flexbox } from 'react-layout-kit';
export default () => (
-
+
内容
-
+
底部面板
diff --git a/src/DraggablePanel/demos/controlFloat.tsx b/src/DraggablePanel/demos/controlFloat.tsx
index ef07c051..08e85e23 100644
--- a/src/DraggablePanel/demos/controlFloat.tsx
+++ b/src/DraggablePanel/demos/controlFloat.tsx
@@ -11,18 +11,15 @@ export default () => {
return (
-
内容
悬浮可拖拽面板
diff --git a/src/DraggablePanel/demos/float.tsx b/src/DraggablePanel/demos/float.tsx
index f8d8680b..3870ad41 100644
--- a/src/DraggablePanel/demos/float.tsx
+++ b/src/DraggablePanel/demos/float.tsx
@@ -3,18 +3,17 @@
*/
import { DraggablePanel } from '@ant-design/pro-editor';
-export default () => (
-
-);
+export default () => {
+ return (
+
+
+ 悬浮可拖拽面板
+
+
+ );
+};
diff --git a/src/DraggablePanel/demos/left.tsx b/src/DraggablePanel/demos/left.tsx
index 423893d9..09887a2d 100644
--- a/src/DraggablePanel/demos/left.tsx
+++ b/src/DraggablePanel/demos/left.tsx
@@ -1,18 +1,12 @@
/**
- * height: 600
+ * compact: true
*/
import { DraggablePanel } from '@ant-design/pro-editor';
import { Flexbox } from 'react-layout-kit';
export default () => (
-
-
+
+
左侧面板
内容
diff --git a/src/DraggablePanel/demos/top.tsx b/src/DraggablePanel/demos/top.tsx
index 983d243c..33119ec2 100644
--- a/src/DraggablePanel/demos/top.tsx
+++ b/src/DraggablePanel/demos/top.tsx
@@ -1,17 +1,12 @@
/**
- * height: 600
+ * compact: true
*/
import { DraggablePanel } from '@ant-design/pro-editor';
import { Flexbox } from 'react-layout-kit';
export default () => (
-
-
+
+
顶部面板
内容
diff --git a/src/DraggablePanel/index.en-US.md b/src/DraggablePanel/index.en-US.md
index e75c24fb..d992099e 100644
--- a/src/DraggablePanel/index.en-US.md
+++ b/src/DraggablePanel/index.en-US.md
@@ -45,6 +45,8 @@ Resizable from left to right
| placement | `'right' \| 'left' \| 'top' \| 'bottom'` | `'right'` | The orientation of the panel in fixed mode, default placement is on the right |
| minWidth | `number` | | The minimum width of the panel |
| minHeight | `number` | | The minimum height of the panel |
+| maxWidth | `number` | | The maximum width of the panel |
+| maxHeight | `number` | | The maximum height of the panel |
| resize | `RndProps['enableResizing']` | | Control the resizable area |
| size | `Partial` | | Panel size |
| onSizeChange | `(delta: NumberSize, size?: Size) => void` | | Callback for panel size change |
diff --git a/src/DraggablePanel/index.zh-CN.md b/src/DraggablePanel/index.zh-CN.md
index 81dfb456..32777ead 100644
--- a/src/DraggablePanel/index.zh-CN.md
+++ b/src/DraggablePanel/index.zh-CN.md
@@ -46,6 +46,8 @@ group: 基础组件
| placement | `'right' \| 'left' \| 'top' \| 'bottom'` | `'right'` | 固定模式下面板的朝向，默认放置在右侧 |
| minWidth | `number` | | 面板的最小宽度 |
| minHeight | `number` | | 面板的最小高度 |
+| maxWidth | `number` | | 面板的最大宽度 |
+| maxHeight | `number` | | 面板的最大高度 |
| resize | `RndProps['enableResizing']` | | 控制可缩放区域 |
| size | `Partial` | | 面板尺寸 |
| onSizeChange | `(delta: NumberSize, size?: Size) => void` | | 面板尺寸变更回调 |
diff --git a/src/DraggablePanel/style.ts b/src/DraggablePanel/style.ts
index 698e32ba..5627a48e 100644
--- a/src/DraggablePanel/style.ts
+++ b/src/DraggablePanel/style.ts
@@ -1,6 +1,7 @@
import { createStyles } from '../theme';
-export const useStyle = createStyles(({ token, css, cx }, prefix: string) => {
+export const useStyle = createStyles(({ token, css, cx, prefixCls }) => {
+ const prefix = `${prefixCls}-${token?.editorPrefix}-draggable-panel`;
const commonHandle = css`
position: relative;
&::before {
diff --git a/src/FieldIcon/demos/basic.tsx b/src/FieldIcon/demos/basic.tsx
deleted file mode 100644
index accbd9ad..00000000
--- a/src/FieldIcon/demos/basic.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { ProCard } from '@ant-design/pro-components';
-import { APIFieldType, FieldIcon } from '@ant-design/pro-editor';
-
-const Demo = () => {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-};
-
-export default Demo;
diff --git a/src/FieldIcon/icons/TypeAny.d.ts b/src/FieldIcon/icons/TypeAny.d.ts
deleted file mode 100644
index a693093d..00000000
--- a/src/FieldIcon/icons/TypeAny.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import React from 'react';
-
-declare const res: React.FC>;
-export default res;
diff --git a/src/FieldIcon/icons/TypeAny.js b/src/FieldIcon/icons/TypeAny.js
deleted file mode 100644
index c8d85095..00000000
--- a/src/FieldIcon/icons/TypeAny.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import * as React from 'react';
-function TypeAny(props) {
- return /*#__PURE__*/ React.createElement(
- 'svg',
- Object.assign(
- {
- width: '1em',
- height: '1em',
- viewBox: '0 0 17 17',
- xmlns: 'http://www.w3.org/2000/svg',
- xmlnsXlink: 'http://www.w3.org/1999/xlink',
- },
- props,
- {
- style: Object.assign(
- {
- verticalAlign: '-0.125em',
- },
- props.style,
- ),
- className: ['pro-editor-icon', props.className].filter(Boolean).join(' '),
- },
- ),
- /*#__PURE__*/ React.createElement(
- 'g',
- {
- id: 'TypeAny-\u9875\u9762-1',
- stroke: 'none',
- strokeWidth: 1,
- fill: 'currentColor',
- fillRule: 'evenodd',
- },
- /*#__PURE__*/ React.createElement(
- 'g',
- {
- id: 'TypeAny-\u7F16\u7EC4-2',
- transform: 'translate(0.210938, 0.644531)',
- },
- /*#__PURE__*/ React.createElement('path', {
- d: 'M12.1525262,6.06243032 L13.4664705,9.94584615 L13.4878216,9.94584615 L14.7964147,6.06243032 L15.9821628,6.06243032 L13.5946488,12.7555674 C13.441534,13.1722274 13.2296812,13.4606734 12.9590546,13.6209231 C12.6848606,13.7740557 12.3750814,13.8506132 12.0296812,13.8506132 L11.661146,13.8506132 L11.661146,12.7983055 L11.986961,12.7983055 C12.1329409,12.7983055 12.2682542,12.7591349 12.3928829,12.6807759 C12.5175117,12.5988852 12.6047536,12.4777882 12.6546087,12.3175563 L12.9590546,11.3880936 L10.9721293,6.06243032 L12.1525262,6.06243032 Z M2.15714604,6.00053512 C2.85481382,5.9934359 3.41188852,6.12487848 3.82837012,6.39489855 C4.24486957,6.67201784 4.45665106,7.14809365 4.46376812,7.82314381 L4.46376812,11.6016054 L3.34781717,11.6016054 L3.34781717,11.1113133 L3.326466,11.1113133 C3.22324192,11.2996031 3.06306355,11.4381628 2.84593088,11.5269922 C2.63234783,11.6193712 2.33689186,11.6655518 1.95958082,11.6655518 C1.34020067,11.6584526 0.863215162,11.4950279 0.528606466,11.1752598 C0.17619621,10.8626087 0,10.4629119 0,9.97616945 C0,9.51074247 0.153061315,9.12526198 0.459183946,8.81972798 C0.765324415,8.50705909 1.21382386,8.34718395 1.80473579,8.34008473 L3.34783501,8.34008473 L3.34783501,7.75919732 C3.35495206,7.27245485 2.9758573,7.03618283 2.21053289,7.05039911 C1.93287848,7.05039911 1.71394426,7.07881382 1.55376589,7.13566109 C1.38647046,7.20317503 1.25476031,7.31686957 1.15867113,7.4767447 L0.282987737,6.81057748 C0.706586399,6.25633891 1.33128205,5.98631884 2.15714604,6.00053512 Z M8.4790903,6 C8.93836343,6 9.358466,6.16171237 9.73943367,6.48513712 C10.1168161,6.81212932 10.3144169,7.29191527 10.3322185,7.92456633 L10.3322185,11.6031215 L9.21607135,11.6031215 L9.21607135,8.3084058 C9.21607135,7.92101672 9.11282943,7.62602453 8.90632776,7.42342921 C8.70339353,7.21730212 8.44170346,7.11422074 8.12127536,7.11422074 C7.80084727,7.11422074 7.5373913,7.21730212 7.33090747,7.42342921 C7.12083835,7.62602453 7.01581271,7.92101672 7.01581271,8.30842363 L7.01581271,11.6031215 L5.89966555,11.6031215 L5.89966555,6.06929766 L7.01581271,6.06929766 L7.01581271,6.65573244 L7.03718172,6.65573244 C7.4038796,6.21857748 7.88452174,6 8.4790903,6 Z M3.3400223,9.26198439 L2.00618952,9.26198439 C1.35882274,9.27628986 1.03869788,9.4997369 1.04583278,9.93230769 C1.04583278,10.1218105 1.12941806,10.2826845 1.29658863,10.4149833 C1.45664214,10.5615518 1.72163211,10.634845 2.09155853,10.634845 C2.55750279,10.6419799 2.88651059,10.5865775 3.07858194,10.468602 C3.2528874,10.3506087 3.3400223,10.0824794 3.3400223,9.66419621 L3.3400223,9.26198439 Z',
- id: 'TypeAny-\u5F62\u72B6\u7ED3\u5408',
- }),
- ),
- ),
- );
-}
-export default TypeAny;
diff --git a/src/FieldIcon/icons/TypeAnyArr.d.ts b/src/FieldIcon/icons/TypeAnyArr.d.ts
deleted file mode 100644
index a693093d..00000000
--- a/src/FieldIcon/icons/TypeAnyArr.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import React from 'react';
-
-declare const res: React.FC>;
-export default res;
diff --git a/src/FieldIcon/icons/TypeAnyArr.js b/src/FieldIcon/icons/TypeAnyArr.js
deleted file mode 100644
index fe8e7522..00000000
--- a/src/FieldIcon/icons/TypeAnyArr.js
+++ /dev/null
@@ -1,93 +0,0 @@
-import * as React from 'react';
-function TypeAnyArr(props) {
- return /*#__PURE__*/ React.createElement(
- 'svg',
- Object.assign(
- {
- width: '1em',
- height: '1em',
- viewBox: '0 0 17 16',
- xmlns: 'http://www.w3.org/2000/svg',
- xmlnsXlink: 'http://www.w3.org/1999/xlink',
- },
- props,
- {
- style: Object.assign(
- {
- verticalAlign: '-0.125em',
- },
- props.style,
- ),
- className: ['pro-editor-icon', props.className].filter(Boolean).join(' '),
- },
- ),
- /*#__PURE__*/ React.createElement(
- 'defs',
- null,
- /*#__PURE__*/ React.createElement('rect', {
- id: 'TypeAnyArr-path-1',
- x: 0,
- y: 0,
- width: 16,
- height: 16,
- }),
- ),
- /*#__PURE__*/ React.createElement(
- 'g',
- {
- id: 'TypeAnyArr-\u9875\u9762-1',
- stroke: 'none',
- strokeWidth: 1,
- fill: 'none',
- fillRule: 'evenodd',
- },
- /*#__PURE__*/ React.createElement(
- 'g',
- {
- id: 'TypeAnyArr-\u7F16\u7EC4',
- transform: 'translate(-156.183593, -18.424879)',
- },
- /*#__PURE__*/ React.createElement(
- 'g',
- {
- transform: 'translate(130.328125, 0.000000)',
- id: 'TypeAnyArr-svg',
- },
- /*#__PURE__*/ React.createElement(
- 'g',
- {
- transform: 'translate(26.492188, 17.000000)',
- },
- /*#__PURE__*/ React.createElement(
- 'g',
- {
- transform: 'translate(0.000000, 1.421875)',
- },
- /*#__PURE__*/ React.createElement(
- 'mask',
- {
- id: 'TypeAnyArr-mask-2',
- fill: 'white',
- },
- /*#__PURE__*/ React.createElement('use', {
- xlinkHref: '#TypeAnyArr-path-1',
- }),
- ),
- /*#__PURE__*/ React.createElement('g', {
- id: 'TypeAnyArr-\u5BB9\u5668',
- }),
- /*#__PURE__*/ React.createElement('path', {
- d: 'M2.4793757,4.27432776 L1.43825195,4.27432776 L1.43825195,10.8583367 L2.4793757,10.8583367 L2.4793757,12.1326644 L0,12.1326644 L0,3 L2.4793757,3 L2.4793757,4.27432776 Z M13.5027871,4.27432776 L13.5027871,3 L15.9821628,3 L15.9821628,12.1326644 L13.5027871,12.1326644 L13.5027871,10.8583367 L14.5439108,10.8583367 L14.5439108,4.27432776 L13.5027871,4.27432776 Z M4.76700111,9.02664883 L4.75241026,9.02664883 C4.68186399,9.15472018 4.57241472,9.24893645 4.42402676,9.30933333 C4.27810033,9.37215608 4.07620067,9.40356745 3.81838127,9.40356745 C3.39515719,9.39875139 3.06921739,9.28758974 2.84057971,9.07013601 C2.59977703,8.85751616 2.4793757,8.58571237 2.4793757,8.2547068 C2.4793757,7.9382029 2.58397324,7.67606689 2.79313266,7.4682631 C3.00232776,7.25564326 3.30880713,7.14692531 3.71257079,7.14209142 L4.76700111,7.14209142 L4.76700111,6.747068 C4.77187068,6.41604459 4.51282051,6.25538462 3.98986845,6.2650524 C3.80013378,6.2650524 3.65055072,6.28437012 3.54108361,6.32302341 C3.42678261,6.36893645 3.33677592,6.44626087 3.27109922,6.55497882 L2.67274916,6.10196656 C2.96219398,5.72504794 3.38907469,5.54143144 3.95337347,5.55108138 C4.43012709,5.54626533 4.81077369,5.63564771 5.09536678,5.81928205 C5.37995987,6.00773244 5.52467336,6.33147826 5.52954292,6.79055518 L5.52954292,9.36008027 L4.76700111,9.36008027 L4.76700111,9.02664883 Z M4.76254181,7.76254181 L3.84998885,7.76254181 C3.4070903,7.77219175 3.18808473,7.92309476 3.19293645,8.21525084 C3.19293645,8.34319732 3.25012263,8.45184392 3.36451282,8.5411728 C3.47401561,8.64016945 3.65531327,8.68966778 3.90838796,8.68966778 C4.22717503,8.69448384 4.4522631,8.65707915 4.58368785,8.57740022 C4.70292977,8.49772129 4.76254181,8.31663768 4.76254181,8.03416722 L4.76254181,7.76254181 Z M6.52842809,5.5979398 L7.29198662,5.5979398 L7.29198662,5.99745819 L7.30661315,5.99745819 C7.55745819,5.69962988 7.88626979,5.55072464 8.29301226,5.55072464 C8.60721516,5.55072464 8.89462653,5.6608874 9.15522854,5.88123077 C9.41340468,6.104 9.54857525,6.43086734 9.56075808,6.86185061 L9.56075808,9.36789298 L8.79719955,9.36789298 L8.79719955,7.12336232 C8.79719955,6.85942475 8.7265641,6.65847046 8.5852932,6.52046377 C8.446466,6.38001338 8.26745151,6.30980602 8.04824972,6.30980602 C7.8290301,6.30980602 7.64880268,6.38001338 7.50754961,6.52046377 C7.36383501,6.65847046 7.29198662,6.85942475 7.29198662,7.12336232 L7.29198662,9.36789298 L6.52842809,9.36789298 L6.52842809,5.5979398 Z M10.006689,5.58639911 L10.813592,5.58639911 L11.7117681,8.22796878 L11.726359,8.22796878 L12.6209142,5.58639911 L13.4314381,5.58639911 L11.7993846,10.139175 C11.6947157,10.4226087 11.5498952,10.6188183 11.3649052,10.7278038 C11.1774716,10.8319732 10.9657079,10.884058 10.7296143,10.884058 L10.4776812,10.884058 L10.4776812,10.1682497 L10.7003969,10.1682497 C10.8001962,10.1682497 10.8926823,10.1416187 10.9778907,10.0883211 C11.0630814,10.0325975 11.1227291,9.95026087 11.1567982,9.84123969 L11.3649052,9.20901672 L10.006689,5.58639911 Z',
- id: 'TypeAnyArr-shapeGroup',
- fillOpacity: 0.88,
- fill: '#000000',
- mask: 'url(#TypeAnyArr-mask-2)',
- }),
- ),
- ),
- ),
- ),
- ),
- );
-}
-export default TypeAnyArr;
diff --git a/src/FieldIcon/icons/TypeArray.d.ts b/src/FieldIcon/icons/TypeArray.d.ts
deleted file mode 100644
index a693093d..00000000
--- a/src/FieldIcon/icons/TypeArray.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import React from 'react';
-
-declare const res: React.FC>;
-export default res;
diff --git a/src/FieldIcon/icons/TypeArray.js b/src/FieldIcon/icons/TypeArray.js
deleted file mode 100644
index 400bcbaa..00000000
--- a/src/FieldIcon/icons/TypeArray.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import * as React from 'react';
-function TypeArray(props) {
- return /*#__PURE__*/ React.createElement(
- 'svg',
- Object.assign(
- {
- width: '1em',
- height: '1em',
- viewBox: '0 0 1024 1024',
- xmlns: 'http://www.w3.org/2000/svg',
- xmlnsXlink: 'http://www.w3.org/1999/xlink',
- },
- props,
- {
- style: Object.assign(
- {
- verticalAlign: '-0.125em',
- },
- props.style,
- ),
- className: ['pro-editor-icon', props.className].filter(Boolean).join(' '),
- },
- ),
- /*#__PURE__*/ React.createElement(
- 'g',
- {
- id: 'TypeArray-array',
- stroke: 'none',
- strokeWidth: 1,
- fill: 'none',
- fillRule: 'evenodd',
- },
- /*#__PURE__*/ React.createElement('path', {
- d: 'M447.6,326 L389.4,326 L389.4,698 L447.6,698 L447.6,770 L309,770 L309,254 L447.6,254 L447.6,326 Z M576,326 L634.2,326 L634.2,698 L576,698 L576,770 L714.6,770 L714.6,254 L576,254 L576,326 Z',
- id: 'TypeArray-\u5F62\u72B6',
- fill: 'currentColor',
- fillRule: 'nonzero',
- }),
- ),
- );
-}
-export default TypeArray;
diff --git a/src/FieldIcon/icons/TypeBool.d.ts b/src/FieldIcon/icons/TypeBool.d.ts
deleted file mode 100644
index a693093d..00000000
--- a/src/FieldIcon/icons/TypeBool.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import React from 'react';
-
-declare const res: React.FC>;
-export default res;
diff --git a/src/FieldIcon/icons/TypeBool.js b/src/FieldIcon/icons/TypeBool.js
deleted file mode 100644
index 04ef029c..00000000
--- a/src/FieldIcon/icons/TypeBool.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import * as React from 'react';
-function TypeBool(props) {
- return /*#__PURE__*/ React.createElement(
- 'svg',
- Object.assign(
- {
- width: '1em',
- height: '1em',
- viewBox: '0 0 791 495',
- xmlns: 'http://www.w3.org/2000/svg',
- xmlnsXlink: 'http://www.w3.org/1999/xlink',
- },
- props,
- {
- style: Object.assign(
- {
- verticalAlign: '-0.125em',
- },
- props.style,
- ),
- className: ['pro-editor-icon', props.className].filter(Boolean).join(' '),
- },
- ),
- /*#__PURE__*/ React.createElement(
- 'g',
- {
- id: 'TypeBool-\u9875\u9762-1',
- stroke: 'none',
- strokeWidth: 1,
- fill: 'none',
- fillRule: 'evenodd',
- },
- /*#__PURE__*/ React.createElement(
- 'g',
- {
- id: 'TypeBool-icon-bool1',
- transform: 'translate(0.535000, 0.000000)',
- fill: 'currentColor',
- fillRule: 'nonzero',
- },
- /*#__PURE__*/ React.createElement('path', {
- d: 'M5.68434189e-14,490.864 L5.68434189e-14,0 L70.32,0 L70.32,173.043 L71.7,173.043 C79.513,161.553 88.82,152.705 99.62,146.501 C110.421,140.296 122.716,137.194 136.504,137.194 C153.51,137.194 166.724,140.181 176.146,146.156 C185.568,152.131 193.266,159.714 199.241,168.906 C203.837,176.26 206.825,185.912 208.203,197.862 C209.583,209.812 210.272,228.426 210.272,253.705 L210.272,386.762 C210.272,406.066 209.352,421.462 207.514,432.952 C205.675,444.443 202.688,454.095 198.552,461.908 C186.602,483.97 166.149,495 137.194,495 C119.728,495 106.4,491.553 97.208,484.659 C88.015,477.765 79.053,469.262 70.32,459.15 L70.32,490.864 L5.68434189e-14,490.864 Z M139.951,248.879 C139.951,237.849 137.538,228.196 132.712,219.923 C127.886,211.65 118.809,207.513 105.481,207.513 C95.369,207.513 86.981,211.076 80.317,218.2 C73.652,225.324 70.32,234.401 70.32,245.432 L70.32,381.247 C70.32,394.116 73.538,404.572 79.972,412.615 C86.407,420.658 94.909,424.68 105.481,424.68 C117.431,424.68 126.163,420.313 131.678,411.58 C137.194,402.848 139.951,391.358 139.951,377.11 L139.951,248.879 Z M232.431,258.531 C232.431,244.283 233.351,231.184 235.189,219.234 C237.027,207.284 240.475,196.714 245.53,187.521 C253.803,172.354 265.638,160.174 281.035,150.981 C296.432,141.79 315.161,137.194 337.222,137.194 C359.284,137.194 378.012,141.79 393.41,150.982 C408.807,160.174 420.642,172.354 428.915,187.521 C433.97,196.713 437.417,207.284 439.255,219.234 C441.095,231.184 442.014,244.283 442.014,258.531 L442.014,373.663 C442.014,387.911 441.094,401.01 439.256,412.96 C437.417,424.91 433.97,435.48 428.915,444.673 C420.642,459.84 408.807,472.019 393.41,481.212 C378.013,490.404 359.284,495 337.222,495 C315.162,495 296.432,490.404 281.035,481.212 C265.638,472.019 253.803,459.84 245.53,444.672 C240.475,435.48 237.027,424.91 235.189,412.96 C233.351,401.01 232.431,387.91 232.431,373.663 L232.431,258.531 L232.431,258.531 Z M302.751,384.694 C302.751,398.022 305.854,408.019 312.059,414.684 C318.264,421.348 326.651,424.68 337.222,424.68 C347.794,424.68 356.182,421.348 362.386,414.683 C368.591,408.019 371.693,398.023 371.693,384.693 L371.693,247.5 C371.693,234.171 368.591,224.175 362.386,217.51 C356.181,210.846 347.794,207.514 337.222,207.514 C326.652,207.514 318.264,210.846 312.059,217.51 C305.854,224.175 302.752,234.171 302.752,247.5 L302.752,384.694 L302.751,384.694 Z M457.969,258.53 C457.969,244.282 458.889,231.183 460.727,219.233 C462.566,207.283 466.013,196.713 471.068,187.52 C479.341,172.353 491.176,160.173 506.573,150.98 C521.97,141.789 540.699,137.193 562.761,137.193 C584.822,137.193 603.551,141.789 618.948,150.981 C634.345,160.173 646.18,172.353 654.453,187.52 C659.509,196.712 662.956,207.283 664.794,219.233 C666.633,231.183 667.552,244.282 667.552,258.53 L667.552,373.662 C667.552,387.91 666.632,401.009 664.794,412.959 C662.956,424.909 659.509,435.479 654.453,444.672 C646.18,459.839 634.345,472.018 618.948,481.211 C603.55,490.404 584.821,495 562.76,495 C540.698,495 521.97,490.404 506.572,481.212 C491.175,472.019 479.34,459.84 471.067,444.672 C466.012,435.48 462.565,424.91 460.727,412.96 C458.887,401.01 457.969,387.91 457.969,373.663 L457.969,258.531 L457.969,258.53 Z M528.29,384.693 C528.29,398.021 531.392,408.018 537.597,414.683 C543.802,421.347 552.19,424.679 562.761,424.679 C573.331,424.679 581.72,421.347 587.924,414.682 C594.129,408.018 597.231,398.022 597.231,384.692 L597.231,247.5 C597.231,234.171 594.129,224.175 587.924,217.51 C581.72,210.846 573.332,207.514 562.761,207.514 C552.19,207.514 543.801,210.846 537.597,217.51 C531.392,224.175 528.29,234.171 528.29,247.5 L528.29,384.694 L528.29,384.693 Z M685.574,0 L755.894,0 L755.894,392.277 C755.894,405.606 758.307,414.683 763.134,419.509 C767.959,424.335 777.036,427.437 790.365,428.816 L790.365,495 C774.279,495 759.801,493.736 746.932,491.208 C734.062,488.68 723.032,483.74 713.84,476.386 C704.648,469.492 697.639,459.725 692.813,447.086 C687.987,434.446 685.574,417.786 685.574,397.103 L685.574,0 Z',
- id: 'TypeBool-\u5F62\u72B6',
- }),
- ),
- ),
- );
-}
-export default TypeBool;
diff --git a/src/FieldIcon/icons/TypeBoolArr.d.ts b/src/FieldIcon/icons/TypeBoolArr.d.ts
deleted file mode 100644
index a693093d..00000000
--- a/src/FieldIcon/icons/TypeBoolArr.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import React from 'react';
-
-declare const res: React.FC>;
-export default res;
diff --git a/src/FieldIcon/icons/TypeBoolArr.js b/src/FieldIcon/icons/TypeBoolArr.js
deleted file mode 100644
index 83873e37..00000000
--- a/src/FieldIcon/icons/TypeBoolArr.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import * as React from 'react';
-function TypeBoolArr(props) {
- return /*#__PURE__*/ React.createElement(
- 'svg',
- Object.assign(
- {
- width: '1em',
- height: '1em',
- viewBox: '0 0 897 516',
- xmlns: 'http://www.w3.org/2000/svg',
- xmlnsXlink: 'http://www.w3.org/1999/xlink',
- },
- props,
- {
- style: Object.assign(
- {
- verticalAlign: '-0.125em',
- },
- props.style,
- ),
- className: ['pro-editor-icon', props.className].filter(Boolean).join(' '),
- },
- ),
- /*#__PURE__*/ React.createElement(
- 'g',
- {
- id: 'TypeBoolArr-\u9875\u9762-1',
- stroke: 'none',
- strokeWidth: 1,
- fill: 'none',
- fillRule: 'evenodd',
- },
- /*#__PURE__*/ React.createElement(
- 'g',
- {
- id: 'TypeBoolArr-icon-bool',
- transform: 'translate(0.900000, 0.000000)',
- fill: 'currentColor',
- fillRule: 'nonzero',
- },
- /*#__PURE__*/ React.createElement('path', {
- d: 'M138.6,72 L80.4,72 L80.4,444 L138.6,444 L138.6,516 L0,516 L0,0 L138.6,0 L138.6,72 Z M757,72 L815.2,72 L815.2,444 L757,444 L757,516 L895.6,516 L895.6,0 L757,0 L757,72 Z M169,430.075 L169,83 L218.721,83 L218.721,205.354 L219.696,205.354 C225.221,197.229 231.802,190.974 239.439,186.586 C247.076,182.199 255.769,180.006 265.519,180.006 C277.542,180.006 286.885,182.118 293.547,186.343 C300.209,190.567 305.653,195.929 309.877,202.429 C313.127,207.629 315.24,214.453 316.214,222.903 C317.189,231.352 317.677,244.513 317.677,262.387 L317.677,356.468 C317.677,370.118 317.027,381.004 315.727,389.128 C314.427,397.253 312.315,404.077 309.39,409.602 C300.94,425.2 286.48,433 266.006,433 C253.656,433 244.232,430.563 237.733,425.688 C231.233,420.813 224.896,414.801 218.721,407.652 L218.721,430.075 L169,430.075 Z M267.955,258.975 C267.955,251.175 266.249,244.351 262.837,238.501 C259.425,232.651 253.007,229.727 243.582,229.727 C236.432,229.727 230.502,232.246 225.79,237.283 C221.078,242.32 218.721,248.738 218.721,256.538 L218.721,352.568 C218.721,361.668 220.996,369.061 225.546,374.748 C230.096,380.435 236.108,383.278 243.582,383.278 C252.032,383.278 258.206,380.191 262.106,374.017 C266.006,367.842 267.956,359.717 267.956,349.643 L267.956,258.975 L267.955,258.975 Z M333.345,265.799 C333.345,255.725 333.995,246.463 335.295,238.014 C336.595,229.564 339.032,222.09 342.607,215.591 C348.457,204.866 356.825,196.254 367.712,189.755 C378.598,183.255 391.842,180.005 407.44,180.005 C423.04,180.005 436.282,183.255 447.169,189.755 C458.055,196.255 466.423,204.866 472.273,215.591 C475.848,222.091 478.285,229.564 479.585,238.014 C480.885,246.464 481.535,255.725 481.535,265.799 L481.535,347.206 C481.535,357.28 480.885,366.542 479.585,374.992 C478.285,383.442 475.848,390.915 472.273,397.415 C466.423,408.139 458.055,416.751 447.169,423.251 C436.282,429.751 423.039,433 407.44,433 C391.841,433 378.598,429.75 367.712,423.25 C356.825,416.751 348.457,408.14 342.607,397.415 C339.032,390.915 336.595,383.441 335.295,374.992 C333.995,366.542 333.345,357.28 333.345,347.206 L333.345,265.8 L333.345,265.799 Z M383.067,355.006 C383.067,364.43 385.26,371.498 389.647,376.21 C394.035,380.922 399.966,383.279 407.44,383.279 C414.915,383.279 420.845,380.922 425.233,376.21 C429.62,371.498 431.813,364.43 431.813,355.006 L431.813,258 C431.813,248.576 429.62,241.507 425.233,236.795 C420.845,232.083 414.915,229.727 407.44,229.727 C399.966,229.727 394.035,232.083 389.648,236.795 C385.26,241.507 383.067,248.575 383.067,258 L383.067,355.006 L383.067,355.006 Z M492.816,265.799 C492.816,255.725 493.467,246.463 494.766,238.014 C496.066,229.564 498.503,222.09 502.078,215.591 C507.928,204.866 516.296,196.254 527.182,189.755 C538.069,183.255 551.312,180.005 566.911,180.005 C582.51,180.005 595.752,183.255 606.639,189.755 C617.526,196.255 625.894,204.866 631.744,215.591 C635.318,222.091 637.756,229.564 639.056,238.014 C640.356,246.464 641.006,255.725 641.006,265.799 L641.006,347.206 C641.006,357.28 640.356,366.542 639.056,374.992 C637.756,383.442 635.318,390.915 631.744,397.415 C625.894,408.139 617.526,416.751 606.639,423.251 C595.752,429.751 582.51,433 566.911,433 C551.311,433 538.069,429.75 527.182,423.25 C516.296,416.751 507.928,408.14 502.078,397.415 C498.503,390.915 496.066,383.441 494.766,374.992 C493.466,366.542 492.816,357.28 492.816,347.206 L492.816,265.8 L492.816,265.799 Z M542.537,355.006 C542.537,364.43 544.731,371.498 549.118,376.21 C553.506,380.922 559.436,383.279 566.911,383.279 C574.385,383.279 580.316,380.922 584.703,376.21 C589.091,371.498 591.284,364.43 591.284,355.006 L591.284,258 C591.284,248.576 589.091,241.507 584.704,236.795 C580.316,232.083 574.385,229.727 566.911,229.727 C559.436,229.727 553.506,232.083 549.118,236.795 C544.731,241.507 542.538,248.575 542.538,258 L542.538,355.006 L542.537,355.006 Z M653.75,83 L703.472,83 L703.472,360.368 C703.472,369.792 705.178,376.21 708.59,379.623 C712.002,383.035 718.42,385.228 727.845,386.203 L727.845,433 C716.471,433 706.235,432.106 697.135,430.319 C688.035,428.532 680.235,425.039 673.736,419.839 C667.236,414.964 662.281,408.059 658.869,399.121 C655.456,390.184 653.75,378.404 653.75,363.78 L653.75,83 Z',
- id: 'TypeBoolArr-\u5F62\u72B6',
- }),
- ),
- ),
- );
-}
-export default TypeBoolArr;
diff --git a/src/FieldIcon/icons/TypeEnum.d.ts b/src/FieldIcon/icons/TypeEnum.d.ts
deleted file mode 100644
index a693093d..00000000
--- a/src/FieldIcon/icons/TypeEnum.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import React from 'react';
-
-declare const res: React.FC>;
-export default res;
diff --git a/src/FieldIcon/icons/TypeEnum.js b/src/FieldIcon/icons/TypeEnum.js
deleted file mode 100644
index 998c50e2..00000000
--- a/src/FieldIcon/icons/TypeEnum.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import * as React from 'react';
-function TypeEnum(props) {
- return /*#__PURE__*/ React.createElement(
- 'svg',
- Object.assign(
- {
- width: '1em',
- height: '1em',
- viewBox: '0 0 897 516',
- xmlns: 'http://www.w3.org/2000/svg',
- xmlnsXlink: 'http://www.w3.org/1999/xlink',
- },
- props,
- {
- style: Object.assign(
- {
- verticalAlign: '-0.125em',
- },
- props.style,
- ),
- className: ['pro-editor-icon', props.className].filter(Boolean).join(' '),
- },
- ),
- /*#__PURE__*/ React.createElement(
- 'g',
- {
- id: 'TypeEnum-\u9875\u9762-1',
- stroke: 'none',
- strokeWidth: 1,
- fill: 'none',
- fillRule: 'evenodd',
- },
- /*#__PURE__*/ React.createElement(
- 'g',
- {
- id: 'TypeEnum-icon-enum',
- transform: 'translate(0.828000, 0.000000)',
- fill: 'currentColor',
- fillRule: 'nonzero',
- },
- /*#__PURE__*/ React.createElement('path', {
- d: 'M138.6,72 L80.4,72 L80.4,444 L138.6,444 L138.6,516 L0,516 L0,0 L138.6,0 L138.6,72 Z M757,72 L815.2,72 L815.2,444 L757,444 L757,516 L895.6,516 L895.6,0 L757,0 L757,72 Z',
- id: 'TypeEnum-\u5F62\u72B6',
- }),
- /*#__PURE__*/ React.createElement('path', {
- d: 'M244.963,280.254 L156.613,280.254 L156.613,320.139 C156.613,329.387 158.581,336.516 162.517,341.526 C166.454,346.536 171.775,349.04 178.481,349.04 C186.937,349.04 192.551,345.765 195.321,339.214 C198.091,332.663 199.767,326.112 200.351,319.561 L244.963,319.561 C244.963,345.38 238.985,366.189 227.03,381.988 C221.199,390.081 214.2,396.439 206.036,401.064 C197.872,405.688 188.687,408 178.481,408 C164.485,408 152.603,404.146 142.835,396.44 C133.067,388.732 125.559,378.52 120.31,365.803 C117.103,358.096 114.916,349.233 113.75,339.213 C112.583,329.195 112,318.212 112,306.266 L112,209.734 C112,197.788 112.583,186.805 113.75,176.786 C114.916,166.766 117.103,157.904 120.31,150.196 C125.559,137.48 133.067,127.268 142.835,119.561 C152.603,111.854 164.485,108 178.481,108 C188.687,108 197.945,110.312 206.255,114.936 C214.565,119.561 221.636,125.919 227.468,134.012 C239.131,151.352 244.963,173.125 244.963,199.329 L244.963,280.254 L244.963,280.254 Z M156.613,234.012 L200.35,234.012 L200.35,200.486 C200.35,189.31 198.382,180.929 194.446,175.341 C190.509,169.753 185.188,166.96 178.481,166.96 C171.775,166.96 166.454,169.753 162.517,175.341 C158.581,180.929 156.613,189.311 156.613,200.486 L156.613,234.012 Z M259.021,404.532 L259.021,111.468 L303.634,111.468 L303.634,139.792 L304.509,139.792 C309.174,130.543 314.787,122.932 321.348,116.96 C327.908,110.986 336.292,108 346.498,108 C352.038,108 357.578,109.252 363.118,111.757 C368.658,114.262 373.614,118.405 377.988,124.185 C382.362,129.965 385.861,137.383 388.485,146.439 C391.11,155.495 392.422,166.574 392.422,179.676 L392.422,404.532 L347.809,404.532 L347.809,201.642 C347.809,190.852 345.914,182.374 342.123,176.208 C338.333,170.042 332.938,166.96 325.94,166.96 C317.484,166.96 311.653,170.428 308.445,177.364 C305.238,184.301 303.634,194.32 303.634,207.422 L303.634,404.532 L259.021,404.532 L259.021,404.532 Z M543.817,111.468 L543.817,404.532 L499.204,404.532 L499.204,376.208 L498.33,376.208 C493.664,385.457 488.051,393.068 481.49,399.04 C474.93,405.014 466.547,408 456.341,408 C450.801,408 445.261,406.748 439.721,404.243 C434.181,401.738 429.224,397.595 424.851,391.815 C420.476,386.035 416.977,378.617 414.353,369.561 C411.729,360.505 410.417,349.426 410.417,336.324 L410.417,111.468 L455.029,111.468 L455.029,314.358 C455.029,325.148 456.925,333.626 460.715,339.792 C464.505,345.958 469.9,349.04 476.898,349.04 C485.354,349.04 491.186,345.572 494.393,338.636 C497.601,331.699 499.204,321.68 499.204,308.578 L499.204,111.468 L543.817,111.468 Z M561.812,404.532 L561.812,111.468 L606.425,111.468 L606.425,139.792 L607.299,139.792 C611.965,130.543 617.578,122.932 624.139,116.96 C630.699,110.986 639.082,108 649.288,108 C658.91,108 666.928,111.083 673.343,117.249 C679.758,123.414 685.007,130.158 689.089,137.479 C694.629,129.387 700.752,122.451 707.459,116.671 C714.165,110.891 723.496,108 735.451,108 C740.991,108 746.677,109.252 752.509,111.757 C758.341,114.262 763.589,118.405 768.254,124.185 C772.92,129.965 776.71,137.383 779.626,146.439 C782.542,155.495 784,166.574 784,179.676 L784,404.532 L739.387,404.532 L739.387,201.642 C739.387,190.852 737.492,182.374 733.702,176.208 C729.911,170.042 724.517,166.96 717.519,166.96 C709.063,166.96 703.231,170.428 700.023,177.364 C696.816,184.301 695.213,194.32 695.213,207.422 L695.213,404.532 L650.6,404.532 L650.6,201.642 C650.6,190.852 648.704,182.374 644.914,176.208 C641.124,170.042 635.729,166.96 628.731,166.96 C620.275,166.96 614.443,170.428 611.236,177.364 C608.028,184.301 606.425,194.32 606.425,207.422 L606.425,404.532 L561.812,404.532 L561.812,404.532 Z',
- id: 'TypeEnum-\u5F62\u72B6',
- }),
- ),
- ),
- );
-}
-export default TypeEnum;
diff --git a/src/FieldIcon/icons/TypeNum.d.ts b/src/FieldIcon/icons/TypeNum.d.ts
deleted file mode 100644
index a693093d..00000000
--- a/src/FieldIcon/icons/TypeNum.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import React from 'react';
-
-declare const res: React.FC>;
-export default res;
diff --git a/src/FieldIcon/icons/TypeNum.js b/src/FieldIcon/icons/TypeNum.js
deleted file mode 100644
index ca59b599..00000000
--- a/src/FieldIcon/icons/TypeNum.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import * as React from 'react';
-function TypeNum(props) {
- return /*#__PURE__*/ React.createElement(
- 'svg',
- Object.assign(
- {
- width: '1em',
- height: '1em',
- viewBox: '0 0 897 496',
- xmlns: 'http://www.w3.org/2000/svg',
- xmlnsXlink: 'http://www.w3.org/1999/xlink',
- },
- props,
- {
- style: Object.assign(
- {
- verticalAlign: '-0.125em',
- },
- props.style,
- ),
- className: ['pro-editor-icon', props.className].filter(Boolean).join(' '),
- },
- ),
- /*#__PURE__*/ React.createElement(
- 'g',
- {
- id: 'TypeNum-\u9875\u9762-1',
- stroke: 'none',
- strokeWidth: 1,
- fill: 'none',
- fillRule: 'evenodd',
- },
- /*#__PURE__*/ React.createElement(
- 'g',
- {
- id: 'TypeNum-icon-icon-test3',
- transform: 'translate(0.500000, -0.000000)',
- fill: 'currentColor',
- fillRule: 'nonzero',
- },
- /*#__PURE__*/ React.createElement('path', {
- d: 'M99.31,99.994 L0,186.29 L0,90.406 L99.31,4.109 L188.345,4.109 L188.345,491.751 L99.309,491.751 L99.309,99.994 L99.31,99.994 Z M263.194,411.619 L445.374,199.989 C454.507,189.486 461.127,179.898 465.236,171.223 C469.346,162.547 471.4,152.503 471.4,141.087 C471.4,122.824 466.378,108.099 456.333,96.912 C446.288,85.725 431.677,80.132 412.5,80.132 C404.738,80.132 397.318,81.16 390.24,83.214 C383.164,85.269 376.771,88.694 371.064,93.488 C365.357,98.282 360.791,104.674 357.366,112.665 C353.942,120.655 352.229,130.585 352.229,142.457 L263.194,142.457 C263.194,120.084 267.074,100.108 274.837,82.529 C282.599,64.95 293.215,49.997 306.684,37.669 C320.154,25.341 335.906,15.981 353.942,9.589 C371.977,3.195 391.496,5.68434189e-14 412.5,5.68434189e-14 C433.96,5.68434189e-14 453.821,3.31 472.085,9.93 C490.349,16.552 505.987,25.912 519,38.011 C532.013,50.111 542.172,64.951 549.478,82.529 C556.783,100.109 560.436,119.856 560.436,141.772 C560.436,153.644 559.295,164.26 557.012,173.62 C554.748868,182.927687 551.295766,191.904944 546.738,200.33 C542.172,208.778 536.579,217.339 529.958,226.014 C523.338,234.689 515.918,243.821 507.7,253.41 L371.406,411.62 L560.436,411.62 L560.436,491.751 L263.194,491.751 L263.194,411.62 L263.194,411.619 Z M741.214,495.861 C721.124,495.861 701.834,493.121 683.341,487.642 C664.849,482.163 648.412,473.602 634.029,461.959 C619.647,450.316 608.118,435.476 599.442,417.441 C590.767,399.405 586.202,377.603 585.745,352.034 L674.78,352.034 C675.237,362.992 677.292,372.466 680.944,380.457 C684.597,388.447 689.391,395.067 695.327,400.319 C701.263,405.569 708.226,409.45 716.217,411.962 C724.207,414.473 732.539,415.729 741.215,415.729 C760.392,415.729 776.145,410.021 788.472,398.606 C800.8,387.191 806.964,370.298 806.964,347.924 C806.964,327.378 801.029,311.054 789.157,298.954 C777.286,286.855 760.392,280.805 738.475,280.805 L725.462,280.805 L725.462,203.413 L738.475,203.413 C760.392,203.413 776.145,197.591 785.733,185.948 C795.321,174.305 800.115,159.808 800.115,142.458 C800.115,121.91 794.18,106.386 782.308,95.885 C770.437,85.383 756.511,80.132 740.53,80.132 C723.636,80.132 709.596,85.269 698.41,95.542 C687.222,105.816 681.173,120.312 680.26,139.032 L591.224,139.032 C591.68,117.116 595.904,97.597 603.894,80.475 C611.884,63.352 622.614,48.741 636.084,36.642 C649.554,24.542 665.192,15.41 682.999,9.246 C700.806,3.082 719.983,0 740.529,0 C761.989,0 781.851,3.424 800.115,10.273 C818.379,17.123 834.131,26.711 847.373,39.039 C860.614,51.367 870.887,66.092 878.193,83.214 C885.498,100.337 889.151,119.171 889.151,139.718 C889.151,166.2 883.786,187.318 873.056,203.07 C862.326,218.823 848.971,231.036 832.99,239.712 C850.797,248.844 865.75,262.199 877.85,279.778 C889.95,297.357 896,320.985 896,350.664 C896,374.864 891.89,396.095 883.672,414.359 C875.453,432.623 864.267,447.804 850.112,459.904 C835.958,472.004 819.521,481.021 800.8,486.957 C782.08,492.893 762.218,495.861 741.215,495.861 L741.214,495.861 Z',
- id: 'TypeNum-\u5F62\u72B6',
- }),
- ),
- ),
- );
-}
-export default TypeNum;
diff --git a/src/FieldIcon/icons/TypeNumArr.d.ts b/src/FieldIcon/icons/TypeNumArr.d.ts
deleted file mode 100644
index a693093d..00000000
--- a/src/FieldIcon/icons/TypeNumArr.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import React from 'react';
-
-declare const res: React.FC>;
-export default res;
diff --git a/src/FieldIcon/icons/TypeNumArr.js b/src/FieldIcon/icons/TypeNumArr.js
deleted file mode 100644
index 2d344527..00000000
--- a/src/FieldIcon/icons/TypeNumArr.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import * as React from 'react';
-function TypeNumArr(props) {
- return /*#__PURE__*/ React.createElement(
- 'svg',
- Object.assign(
- {
- width: '1em',
- height: '1em',
- viewBox: '0 0 897 516',
- xmlns: 'http://www.w3.org/2000/svg',
- xmlnsXlink: 'http://www.w3.org/1999/xlink',
- },
- props,
- {
- style: Object.assign(
- {
- verticalAlign: '-0.125em',
- },
- props.style,
- ),
- className: ['pro-editor-icon', props.className].filter(Boolean).join(' '),
- },
- ),
- /*#__PURE__*/ React.createElement(
- 'g',
- {
- id: 'TypeNumArr-\u9875\u9762-1',
- stroke: 'none',
- strokeWidth: 1,
- fill: 'none',
- fillRule: 'evenodd',
- },
- /*#__PURE__*/ React.createElement(
- 'g',
- {
- id: 'TypeNumArr-icon-icon-test1',
- transform: 'translate(0.500000, 0.000000)',
- fill: 'currentColor',
- fillRule: 'nonzero',
- },
- /*#__PURE__*/ React.createElement('path', {
- d: 'M138.6,72 L80.4,72 L80.4,444 L138.6,444 L138.6,516 L0,516 L0,0 L138.6,0 L138.6,72 Z M757,72 L815.2,72 L815.2,444 L757,444 L757,516 L895.6,516 L895.6,0 L757,0 L757,72 Z M223.088,162.53 L159,218.221 L159,156.343 L223.088,100.652 L280.547,100.652 L280.547,415.348 L223.088,415.348 L223.088,162.53 L223.088,162.53 Z M328.85,363.635 L446.42,227.061 C452.312,220.284 456.585,214.096 459.237,208.497 C461.889,202.899 463.215,196.417 463.215,189.05 C463.215,177.263 459.973,167.76 453.491,160.541 C447.008,153.322 437.579,149.713 425.204,149.713 C420.194,149.713 415.406,150.376 410.839,151.702 C406.272,153.028 402.147,155.238 398.463,158.332 C394.78,161.425 391.833,165.551 389.623,170.707 C387.413,175.864 386.309,182.273 386.309,189.934 L328.85,189.934 C328.85,175.495 331.355,162.604 336.364,151.26 C341.374,139.915 348.224,130.265 356.916,122.31 C365.609,114.354 375.774,108.313 387.414,104.188 C399.053,100.063 411.649,98 425.204,98 C439.053,98 451.87,100.136 463.657,104.409 C475.443,108.681 485.535,114.722 493.933,122.53 C502.331,130.339 508.887,139.915 513.601,151.26 C518.316,162.604 520.674,175.348 520.674,189.492 C520.674,197.152 519.937,204.004 518.463,210.044 C517.002664,216.050947 514.774313,221.84466 511.833,227.282 C508.887,232.733 505.277,238.258 501.005,243.856 C496.732,249.455 491.944,255.348 486.64,261.536 L398.684,363.636 L520.674,363.636 L520.674,415.348 L328.85,415.348 L328.85,363.635 Z M637.337,418 C624.372,418 611.923,416.232 599.989,412.696 C588.055,409.16 577.448,403.636 568.166,396.122 C558.884,388.608 551.444,379.032 545.846,367.392 C540.247,355.753 537.3,341.683 537.006,325.182 L594.464,325.182 C594.759,332.254 596.085,338.368 598.442,343.525 C600.8,348.681 603.893,352.954 607.724,356.343 C611.554,359.731 616.048,362.236 621.204,363.856 C626.361,365.477 631.739,366.287 637.337,366.287 C649.713,366.287 659.879,362.604 667.835,355.237 C675.79,347.871 679.768,336.969 679.768,322.53 C679.768,309.27 675.938,298.737 668.277,290.928 C660.615,283.12 649.713,279.215 635.569,279.215 L627.172,279.215 L627.172,229.271 L635.569,229.271 C649.713,229.271 659.879,225.514 666.067,218 C672.254,210.486 675.348,201.13 675.348,189.934 C675.348,176.674 671.518,166.656 663.857,159.878 C656.195,153.101 647.208,149.713 636.895,149.713 C625.993,149.713 616.932,153.028 609.713,159.657 C602.493,166.287 598.59,175.643 598,187.724 L540.542,187.724 C540.836,173.58 543.562,160.984 548.718,149.934 C553.875,138.884 560.799,129.454 569.492,121.646 C578.184,113.838 588.276,107.945 599.768,103.966 C611.26,99.99 623.636,98 636.895,98 C650.745,98 663.562,100.21 675.348,104.63 C687.135,109.05 697.3,115.238 705.846,123.193 C714.391,131.149 721.02,140.652 725.736,151.702 C730.45,162.752 732.806,174.906 732.806,188.166 C732.806,205.256 729.345,218.884 722.42,229.05 C715.496,239.216 706.877,247.098 696.564,252.696 C708.056,258.589 717.706,267.208 725.514,278.552 C733.323,289.897 737.227,305.145 737.227,324.298 C737.227,339.915 734.575,353.617 729.271,365.403 C723.967,377.19 716.748,386.987 707.614,394.796 C698.479,402.604 687.871,408.424 675.79,412.254 C663.71,416.084 650.892,418 637.337,418 L637.337,418 Z',
- id: 'TypeNumArr-\u5F62\u72B6',
- }),
- ),
- ),
- );
-}
-export default TypeNumArr;
diff --git a/src/FieldIcon/icons/TypeObj.d.ts b/src/FieldIcon/icons/TypeObj.d.ts
deleted file mode 100644
index a693093d..00000000
--- a/src/FieldIcon/icons/TypeObj.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import React from 'react';
-
-declare const res: React.FC>;
-export default res;
diff --git a/src/FieldIcon/icons/TypeObj.js b/src/FieldIcon/icons/TypeObj.js
deleted file mode 100644
index fc133e92..00000000
--- a/src/FieldIcon/icons/TypeObj.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import * as React from 'react';
-function TypeObj(props) {
- return /*#__PURE__*/ React.createElement(
- 'svg',
- Object.assign(
- {
- width: '1em',
- height: '1em',
- viewBox: '0 0 1024 1024',
- xmlns: 'http://www.w3.org/2000/svg',
- xmlnsXlink: 'http://www.w3.org/1999/xlink',
- },
- props,
- {
- style: Object.assign(
- {
- verticalAlign: '-0.125em',
- },
- props.style,
- ),
- className: ['pro-editor-icon', props.className].filter(Boolean).join(' '),
- },
- ),
- /*#__PURE__*/ React.createElement(
- 'g',
- {
- id: 'TypeObj-type-obj',
- stroke: 'none',
- strokeWidth: 1,
- fill: 'none',
- fillRule: 'evenodd',
- },
- /*#__PURE__*/ React.createElement(
- 'g',
- {
- id: 'TypeObj-\u7F16\u7EC4',
- transform: 'translate(271.000000, 254.000000)',
- fill: 'currentColor',
- fillRule: 'nonzero',
- },
- /*#__PURE__*/ React.createElement('path', {
- d: 'M305,444 L334.355,444 C340.495,444 345.387,441.8 349.032,437.4 C352.677,433 354.5,428 354.5,422.4 L354.5,318 C354.5,306.8 355.939,297.6 358.817,290.4 C361.695,283.2 365.244,277.4 369.465,273 C373.686,268.6 377.907,265.4 382.128,263.4 C386.348,261.4 391.145,259.6 396.518,258 C391.145,256.4 386.253,254.5 381.84,252.3 C377.427,250.1 373.302,247 369.465,243 C365.628,239 362.175,233.3 359.105,225.9 C356.035,218.5 354.5,209.2 354.5,198 L354.5,93.6 C354.5,88 352.677,83 349.032,78.6 C345.387,74.2 340.494,72 334.355,72 L305,72 L305,0 L351.622,0 C362.366,0 372.727,1.8 382.703,5.4 C392.68,9 401.506,14.8 409.18,22.8 C415.704,29.6 421.076,38.3 425.297,48.9 C429.517,59.5 431.627,72.2 431.627,87 L431.627,200.4 C431.627,206 433.451,211 437.096,215.4 C440.741,219.8 445.634,222 451.773,222 L481.128,222 L481.128,294 L451.773,294 C445.633,294 440.741,296.2 437.096,300.6 C433.451,305 431.628,310 431.628,315.6 L431.628,429 C431.628,443.8 429.518,456.5 425.297,467.1 C421.076,477.7 415.704,486.4 409.18,493.2 C401.506,501.2 392.68,507 382.703,510.6 C372.727,514.2 362.366,516 351.623,516 L305,516 L305,444 Z M176.128,444 L146.773,444 C140.633,444 135.741,441.8 132.096,437.4 C128.451,433 126.628,428 126.628,422.4 L126.628,318 C126.628,306.8 125.189,297.6 122.311,290.4 C119.433,283.2 115.884,277.4 111.663,273 C107.442,268.6 103.221,265.4 99,263.4 C94.779,261.4 89.983,259.6 84.61,258 C89.983,256.4 94.875,254.5 99.288,252.3 C103.701,250.1 107.826,247 111.663,243 C115.5,239 118.953,233.3 122.023,225.9 C125.093,218.5 126.628,209.2 126.628,198 L126.628,93.6 C126.628,88 128.451,83 132.096,78.6 C135.741,74.2 140.634,72 146.773,72 L176.128,72 L176.128,0 L129.506,0 C118.762,0 108.401,1.8 98.424,5.4 C88.448,9 79.622,14.8 71.948,22.8 C65.424,29.6 60.052,38.3 55.831,48.9 C51.611,59.5 49.5,72.2 49.5,87 L49.5,200.4 C49.5,206 47.677,211 44.032,215.4 C40.387,219.8 35.494,222 29.355,222 L0,222 L0,294 L29.355,294 C35.495,294 40.387,296.2 44.032,300.6 C47.677,305 49.5,310 49.5,315.6 L49.5,429 C49.5,443.8 51.61,456.5 55.831,467.1 C60.052,477.7 65.424,486.4 71.948,493.2 C79.622,501.2 88.448,507 98.424,510.6 C108.401,514.2 118.762,516 129.506,516 L176.128,516 L176.128,444 L176.128,444 Z',
- id: 'TypeObj-\u5F62\u72B6',
- }),
- ),
- ),
- );
-}
-export default TypeObj;
diff --git a/src/FieldIcon/icons/TypeObjArr.d.ts b/src/FieldIcon/icons/TypeObjArr.d.ts
deleted file mode 100644
index a693093d..00000000
--- a/src/FieldIcon/icons/TypeObjArr.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import React from 'react';
-
-declare const res: React.FC>;
-export default res;
diff --git a/src/FieldIcon/icons/TypeObjArr.js b/src/FieldIcon/icons/TypeObjArr.js
deleted file mode 100644
index 7a25ff38..00000000
--- a/src/FieldIcon/icons/TypeObjArr.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import * as React from 'react';
-function TypeObjArr(props) {
- return /*#__PURE__*/ React.createElement(
- 'svg',
- Object.assign(
- {
- width: '1em',
- height: '1em',
- viewBox: '0 0 656 381',
- xmlns: 'http://www.w3.org/2000/svg',
- xmlnsXlink: 'http://www.w3.org/1999/xlink',
- },
- props,
- {
- style: Object.assign(
- {
- verticalAlign: '-0.125em',
- },
- props.style,
- ),
- className: ['pro-editor-icon', props.className].filter(Boolean).join(' '),
- },
- ),
- /*#__PURE__*/ React.createElement(
- 'g',
- {
- id: 'TypeObjArr-\u9875\u9762-1',
- stroke: 'none',
- strokeWidth: 1,
- fill: 'none',
- fillRule: 'evenodd',
- },
- /*#__PURE__*/ React.createElement(
- 'g',
- {
- id: 'TypeObjArr-icon-icon-test4',
- transform: 'translate(0.228000, 0.125000)',
- fill: 'currentColor',
- fillRule: 'nonzero',
- },
- /*#__PURE__*/ React.createElement('path', {
- d: 'M103.855,53.023 L60.245,53.023 L60.245,326.977 L103.855,326.977 L103.855,380 L0,380 L0,0 L103.855,0 L103.855,53.023 Z M551.145,53.023 L551.145,0 L655,0 L655,380 L551.145,380 L551.145,326.977 L594.755,326.977 L594.755,53.023 L551.145,53.023 Z M389,326.977 L410.991,326.977 C415.591,326.977 419.256,325.357 421.987,322.117 C424.717,318.876 426.083,315.194 426.083,311.07 L426.083,234.186 C426.083,225.938 427.161,219.163 429.317,213.86 C431.473,208.558 434.132,204.287 437.294,201.047 C440.456,197.807 443.618,195.45 446.78,193.977 C449.942,192.504 453.535,191.178 457.56,190 C453.535,188.822 449.87,187.422 446.565,185.802 C443.259,184.182 440.168,181.899 437.294,178.953 C434.419,176.008 431.833,171.81 429.533,166.36 C427.233,160.91 426.083,154.062 426.083,145.814 L426.083,68.93 C426.083,64.806 424.717,61.124 421.987,57.884 C419.256,54.644 415.59,53.024 410.991,53.024 L389,53.024 L389,0 L423.927,0 C431.976,0 439.737,1.326 447.211,3.977 C454.685,6.627 461.297,10.899 467.046,16.791 C471.934,21.798 475.958,28.205 479.12,36.011 C482.282,43.818 483.862,53.171 483.862,64.07 L483.862,147.581 C483.862,151.705 485.229,155.388 487.96,158.628 C490.69,161.868 494.356,163.488 498.955,163.488 L520.946,163.488 L520.946,216.512 L498.955,216.512 C494.355,216.512 490.69,218.132 487.96,221.372 C485.229,224.612 483.863,228.295 483.863,232.419 L483.863,315.93 C483.863,326.83 482.283,336.182 479.12,343.988 C475.958,351.795 471.934,358.202 467.046,363.209 C461.297,369.101 454.686,373.372 447.211,376.023 C439.738,378.674 431.976,380 423.928,380 L389,380 L389,326.977 Z M265.947,326.977 L265.947,380 L231.019,380 C222.97,380 215.209,378.674 207.734,376.023 C200.261,373.373 193.649,369.101 187.9,363.209 C183.012,358.202 178.988,351.795 175.826,343.989 C172.664,336.182 171.083,326.829 171.083,315.93 L171.083,232.42 C171.083,228.296 169.717,224.613 166.987,221.373 C164.256,218.133 160.591,216.513 155.991,216.513 L134,216.513 L134,163.489 L155.991,163.489 C160.591,163.489 164.256,161.869 166.987,158.629 C169.717,155.389 171.083,151.706 171.083,147.582 L171.083,64.07 C171.083,53.17 172.664,43.818 175.826,36.012 C178.988,28.205 183.012,21.798 187.9,16.791 C193.649,10.899 200.26,6.628 207.734,3.977 C215.208,1.326 222.97,0 231.02,0 L265.947,0 L265.947,53.023 L243.956,53.023 C239.356,53.023 235.691,54.643 232.961,57.883 C230.23,61.124 228.864,64.806 228.864,68.93 L228.864,145.814 C228.864,154.062 227.714,160.911 225.414,166.36 C223.114,171.81 220.528,176.008 217.654,178.953 C214.779,181.899 211.688,184.183 208.382,185.803 C205.076,187.423 201.412,188.822 197.386,190 C201.412,191.178 205.005,192.504 208.166,193.977 C211.329,195.45 214.491,197.807 217.653,201.047 C220.815,204.287 223.474,208.558 225.63,213.86 C227.786,219.163 228.864,225.938 228.864,234.186 L228.864,311.07 C228.864,315.194 230.23,318.876 232.961,322.116 C235.691,325.356 239.356,326.976 243.956,326.976 L265.947,326.976 L265.947,326.977 Z',
- id: 'TypeObjArr-\u5F62\u72B6',
- }),
- ),
- ),
- );
-}
-export default TypeObjArr;
diff --git a/src/FieldIcon/icons/TypeSting.d.ts b/src/FieldIcon/icons/TypeSting.d.ts
deleted file mode 100644
index a693093d..00000000
--- a/src/FieldIcon/icons/TypeSting.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import React from 'react';
-
-declare const res: React.FC>;
-export default res;
diff --git a/src/FieldIcon/icons/TypeSting.js b/src/FieldIcon/icons/TypeSting.js
deleted file mode 100644
index dba60d1c..00000000
--- a/src/FieldIcon/icons/TypeSting.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import * as React from 'react';
-function TypeSting(props) {
- return /*#__PURE__*/ React.createElement(
- 'svg',
- Object.assign(
- {
- width: '1em',
- height: '1em',
- viewBox: '0 0 897 496',
- xmlns: 'http://www.w3.org/2000/svg',
- xmlnsXlink: 'http://www.w3.org/1999/xlink',
- },
- props,
- {
- style: Object.assign(
- {
- verticalAlign: '-0.125em',
- },
- props.style,
- ),
- className: ['pro-editor-icon', props.className].filter(Boolean).join(' '),
- },
- ),
- /*#__PURE__*/ React.createElement(
- 'g',
- {
- id: 'TypeSting-\u9875\u9762-1',
- stroke: 'none',
- strokeWidth: 1,
- fill: 'none',
- fillRule: 'evenodd',
- },
- /*#__PURE__*/ React.createElement(
- 'g',
- {
- id: 'TypeSting-icon-Abc1',
- transform: 'translate(0.228000, 0.000000)',
- fill: 'currentColor',
- fillRule: 'nonzero',
- },
- /*#__PURE__*/ React.createElement('path', {
- d: 'M376.221,490.077 L288.895,490.077 L263.773,403.35 L113.046,403.35 L87.326,490.077 L5.68434189e-14,490.077 L155.513,0 L220.708,0 L376.221,490.077 Z M136.958,323.418 L240.913,323.418 L189.233,145.208 L136.958,323.418 Z M457.57,163.4 C467.977,150.071 479.184,140.763 491.191,135.478 C503.199,130.192 517.408,127.548 533.818,127.548 C549.428,127.548 563.637,130.307 576.445,135.822 C589.253,141.338 600.26,149.382 609.465,159.953 C616.67,168.686 622.474,178.683 626.876,189.944 C631.279,201.206 634.581,213.271 636.783,226.141 C638.984,239.011 640.385,252.57 640.985,266.819 C641.585,281.067 641.885,295.775 641.885,310.944 C641.885,326.112 641.585,340.934 640.985,355.414 C640.385,369.892 638.984,383.566 636.783,396.436 C634.581,409.306 631.279,421.371 626.876,432.632 C622.474,443.893 616.67,453.89 609.466,462.623 C600.26,473.195 589.153,481.239 576.145,486.754 C563.136,492.27 548.828,495.028 533.218,495.028 C516.407,495.028 501.998,492.155 489.991,486.409 C477.983,480.664 466.376,470.897 455.169,457.108 L455.169,490.891 L379.52,490.891 L379.52,0 L457.57,0 L457.57,163.4 L457.57,163.4 Z M509.58,207.912 C498.045,207.912 488.797,210.556 481.836,215.845 C474.876,221.134 469.605,228.377 466.026,237.575 C462.446,246.773 460.059,257.695 458.866,270.342 C457.672,282.989 457.076,296.441 457.076,310.697 C457.076,325.414 457.672,339.096 458.866,351.743 C460.059,364.39 462.446,375.313 466.026,384.51 C469.605,393.708 474.876,400.951 481.836,406.24 C488.797,411.529 498.045,414.173 509.58,414.173 C521.513,414.173 530.96,411.529 537.92,406.24 C544.882,400.951 550.152,393.708 553.732,384.51 C557.312,375.312 559.698,364.39 560.892,351.743 C562.085,339.096 562.682,325.414 562.682,310.697 C562.682,296.441 562.085,282.989 560.892,270.342 C559.698,257.695 557.312,246.772 553.732,237.575 C550.152,228.377 544.882,221.134 537.921,215.845 C530.96,210.556 521.513,207.912 509.581,207.912 L509.58,207.912 Z M792.985,127.057 C814.547,127.057 833.612,130.969 850.182,138.793 C866.752,146.618 882.025,158.814 896,175.383 L842.696,236.137 C834.71,226.011 827.024,218.762 819.637,214.39 C812.251,210.017 803.367,207.831 792.985,207.831 C783.403,207.831 775.018,209.787 767.831,213.699 C760.644,217.611 754.255,223.479 748.665,231.304 C742.675,240.049 738.284,250.634 735.489,263.061 C732.694,275.488 731.296,291.367 731.296,310.697 C731.296,330.027 732.694,346.021 735.489,358.678 C738.284,371.335 742.676,382.036 748.665,390.781 C754.255,398.605 760.644,404.473 767.831,408.385 C775.018,412.298 783.403,414.254 792.985,414.254 C803.367,414.254 812.251,411.952 819.637,407.35 C827.024,402.747 834.71,395.613 842.696,385.948 L896,446.011 C882.025,462.58 866.753,474.891 850.182,482.946 C833.612,491 814.547,495.028 792.985,495.028 C777.413,495.028 761.342,492.266 744.772,486.743 C728.202,481.22 713.129,471.44 699.553,457.403 C685.978,443.364 674.898,424.494 666.313,400.791 C657.729,377.088 653.436,347.057 653.436,310.697 C653.436,274.337 657.729,244.307 666.313,220.603 C674.898,196.9 685.978,178.145 699.553,164.337 C713.129,150.53 728.202,140.865 744.773,135.342 C761.343,129.819 777.413,127.057 792.985,127.057 L792.985,127.057 Z',
- id: 'TypeSting-\u5F62\u72B6',
- }),
- ),
- ),
- );
-}
-export default TypeSting;
diff --git a/src/FieldIcon/icons/TypeStingArr.d.ts b/src/FieldIcon/icons/TypeStingArr.d.ts
deleted file mode 100644
index a693093d..00000000
--- a/src/FieldIcon/icons/TypeStingArr.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import React from 'react';
-
-declare const res: React.FC>;
-export default res;
diff --git a/src/FieldIcon/icons/TypeStingArr.js b/src/FieldIcon/icons/TypeStingArr.js
deleted file mode 100644
index d9d07d3c..00000000
--- a/src/FieldIcon/icons/TypeStingArr.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import * as React from 'react';
-function TypeStingArr(props) {
- return /*#__PURE__*/ React.createElement(
- 'svg',
- Object.assign(
- {
- width: '1em',
- height: '1em',
- viewBox: '0 0 896 516',
- xmlns: 'http://www.w3.org/2000/svg',
- xmlnsXlink: 'http://www.w3.org/1999/xlink',
- },
- props,
- {
- style: Object.assign(
- {
- verticalAlign: '-0.125em',
- },
- props.style,
- ),
- className: ['pro-editor-icon', props.className].filter(Boolean).join(' '),
- },
- ),
- /*#__PURE__*/ React.createElement(
- 'g',
- {
- id: 'TypeStingArr-\u9875\u9762-1',
- stroke: 'none',
- strokeWidth: 1,
- fill: 'none',
- fillRule: 'evenodd',
- },
- /*#__PURE__*/ React.createElement(
- 'g',
- {
- id: 'TypeStingArr-icon-Abc2',
- transform: 'translate(0.228000, 0.000000)',
- fill: 'currentColor',
- fillRule: 'nonzero',
- },
- /*#__PURE__*/ React.createElement('path', {
- d: 'M401.2,414.8 L344.75,414.8 L328.51,358.737 L231.076,358.737 L214.45,414.8 L158,414.8 L258.528,98 L300.672,98 L401.2,414.8 Z M246.533,307.067 L313.733,307.067 L280.325,191.867 L246.533,307.067 Z M453.786,203.627 C460.514,195.01 467.758,188.994 475.52,185.577 C483.282,182.16 492.467,180.451 503.075,180.451 C513.165,180.451 522.351,182.234 530.63,185.799 C538.91,189.365 546.025,194.564 551.976,201.399 C556.633,207.044 560.385,213.506 563.231,220.786 C566.077,228.065 568.211,235.864 569.634,244.184 C571.058,252.504 571.964,261.268 572.351,270.479 C572.739,279.689 572.933,289.198 572.933,299.003 C572.933,308.808 572.739,318.39 572.351,327.749 C571.963,337.109 571.058,345.948 569.634,354.267 C568.211,362.587 566.077,370.387 563.231,377.666 C560.385,384.946 556.633,391.408 551.976,397.053 C546.025,403.887 538.846,409.086 530.436,412.652 C522.027,416.217 512.778,418 502.687,418 C491.82,418 482.506,416.143 474.744,412.429 C466.982,408.715 459.479,402.401 452.234,393.487 L452.234,415.326 L403.334,415.326 L403.334,98 L453.786,98 L453.786,203.627 Z M487.407,232.4 C479.95,232.4 473.972,234.11 469.473,237.528 C464.973,240.947 461.566,245.629 459.252,251.575 C456.938,257.521 455.395,264.581 454.624,272.757 C453.852,280.932 453.467,289.627 453.467,298.844 C453.467,308.357 453.852,317.201 454.624,325.377 C455.395,333.552 456.938,340.613 459.252,346.558 C461.566,352.504 464.973,357.186 469.472,360.605 C473.972,364.024 479.95,365.733 487.407,365.733 C495.121,365.733 501.227,364.023 505.727,360.605 C510.227,357.186 513.634,352.505 515.948,346.558 C518.262,340.613 519.805,333.552 520.576,325.377 C521.348,317.201 521.733,308.357 521.733,298.844 C521.733,289.628 521.348,280.932 520.576,272.757 C519.805,264.581 518.262,257.521 515.948,251.575 C513.634,245.629 510.227,240.947 505.728,237.528 C501.228,234.109 495.121,232.4 487.408,232.4 L487.407,232.4 Z M670.608,180.133 C684.546,180.133 696.871,182.663 707.582,187.72 C718.294,192.778 728.166,200.662 737.2,211.373 L702.743,250.645 C697.581,244.1 692.612,239.415 687.837,236.588 C683.062,233.761 677.319,232.348 670.608,232.348 C664.414,232.348 658.994,233.612 654.348,236.141 C649.702,238.671 645.572,242.464 641.958,247.521 C638.087,253.174 635.248,260.017 633.441,268.051 C631.634,276.083 630.731,286.348 630.731,298.844 C630.731,311.339 631.634,321.678 633.441,329.86 C635.248,338.042 638.087,344.959 641.959,350.612 C645.572,355.67 649.702,359.463 654.348,361.992 C658.994,364.521 664.414,365.785 670.608,365.785 C677.319,365.785 683.062,364.298 687.837,361.323 C692.612,358.347 697.581,353.736 702.743,347.488 L737.2,386.314 C728.166,397.024 718.294,404.984 707.582,410.19 C696.871,415.397 684.546,418 670.608,418 C660.542,418 650.153,416.215 639.442,412.645 C628.73,409.075 618.987,402.752 610.212,393.678 C601.436,384.603 594.273,372.405 588.724,357.083 C583.174,341.761 580.4,322.348 580.4,298.843 C580.4,275.339 583.175,255.926 588.724,240.604 C594.274,225.282 601.436,213.158 610.211,204.232 C618.987,195.307 628.731,189.059 639.442,185.489 C650.153,181.919 660.542,180.133 670.608,180.133 L670.608,180.133 Z M138.6,72 L80.4,72 L80.4,444 L138.6,444 L138.6,516 L0,516 L0,0 L138.6,0 L138.6,72 Z M757,72 L815.2,72 L815.2,444 L757,444 L757,516 L895.6,516 L895.6,0 L757,0 L757,72 Z',
- id: 'TypeStingArr-\u5F62\u72B6',
- }),
- ),
- ),
- );
-}
-export default TypeStingArr;
diff --git a/src/FieldIcon/icons/index.ts b/src/FieldIcon/icons/index.ts
deleted file mode 100644
index 7b11f728..00000000
--- a/src/FieldIcon/icons/index.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export { default as TypeAny } from './TypeAny.js';
-export { default as TypeAnyArr } from './TypeAnyArr.js';
-export { default as TypeArray } from './TypeArray.js';
-export { default as TypeBool } from './TypeBool.js';
-export { default as TypeBoolArr } from './TypeBoolArr.js';
-export { default as TypeEnum } from './TypeEnum.js';
-export { default as TypeNum } from './TypeNum.js';
-export { default as TypeNumArr } from './TypeNumArr.js';
-export { default as TypeObj } from './TypeObj.js';
-export { default as TypeObjArr } from './TypeObjArr.js';
-export { default as TypeSting } from './TypeSting.js';
-export { default as TypeStingArr } from './TypeStingArr.js';
diff --git a/src/FieldIcon/index.en-US.md b/src/FieldIcon/index.en-US.md
deleted file mode 100644
index a39b3016..00000000
--- a/src/FieldIcon/index.en-US.md
+++ /dev/null
@@ -1,42 +0,0 @@
----
-title: FieldIcon
-group: Basic
----
-
-# FieldIcon Field Icon
-
-Configure field icons for different field types.
-
-## When To Use
-
-Obtain icons for field selection.
-
-## Code Example
-
-### Field Icon List
-
- = (props) => {
- const { type, prefixCls: customizePrefixCls, className, style: customStyle } = props;
-
- const prefixCls = getPrefixCls('field-icon', customizePrefixCls);
-
- const { styles } = useStyle(prefixCls);
-
- const style: CSSProperties = {};
- let IconComponent = TypeAny;
- switch (type) {
- case APIFieldType.bool:
- IconComponent = TypeBool;
- style.color = themeToken.colorTypeBoolean;
- break;
- case APIFieldType.number:
- case APIFieldType.integer:
- IconComponent = TypeNum;
- style.color = themeToken.colorTypeNumber;
- break;
- case APIFieldType.string:
- IconComponent = TypeSting;
- style.color = themeToken.colorTypeString;
- break;
- case APIFieldType.boolArray:
- IconComponent = TypeBoolArr;
- style.color = themeToken.colorTypeBoolArray;
- break;
- case APIFieldType.integerArray:
- case APIFieldType.numberArray:
- IconComponent = TypeNumArr;
- style.color = themeToken.colorTypeNumberArray;
- break;
- case APIFieldType.stringArray:
- IconComponent = TypeStingArr;
- style.color = themeToken.colorTypeStringArray;
- break;
- case APIFieldType.array:
- IconComponent = TypeArray;
- break;
- case APIFieldType.object:
- IconComponent = TypeObj;
- break;
- case APIFieldType.objectArray:
- IconComponent = TypeObjArr;
- break;
- case APIFieldType.any:
- IconComponent = TypeAny;
- break;
- case APIFieldType.anyArray:
- IconComponent = TypeAnyArr;
- break;
- default:
- break;
- }
-
- return (
- console.log(values)}
- options={options}
- defaultValue={'orderId'}
- />
-
- );
-};
-
-export default Demo;
diff --git a/src/FieldSelect/index.en-US.md b/src/FieldSelect/index.en-US.md
deleted file mode 100644
index 56413c5b..00000000
--- a/src/FieldSelect/index.en-US.md
+++ /dev/null
@@ -1,35 +0,0 @@
----
-title: FieldSelect
-group: Basic
----
-
-# FieldSelect Field Selector
-
-## When to use
-
-Extend the common selector, when selecting a field, add the field type.
-
-## Code Demo
-
-### Basic Usage
-
- = (props) => {
- const {
- style,
- className,
- value: propsValue,
- prefixCls: customizePrefixCls,
- options,
- onChange,
- showCustomField = true,
- ...restProps
- } = props;
-
- const [name, setName] = useState('');
- const [controlValue, setControlValue] = useMergedState(undefined, {
- value: propsValue,
- onChange,
- });
- const [open, setOpen] = useState(false);
-
- const prefixCls = getPrefixCls('field-select', customizePrefixCls);
-
- const { styles } = useStyle(prefixCls);
-
- const onNameChange = (value) => {
- setName(value);
- };
-
- const onSelectChange = (selectedValue: string) => {
- setControlValue(selectedValue);
- };
-
- const addItem = (e: any) => {
- e.preventDefault();
- if (name) {
- setControlValue(name);
- setName('');
- setOpen(false);
- }
- };
-
- return (
- {
- const { label, value, type, description } = item;
- return {
- label:
-
{
- e.stopPropagation();
- addItem(e);
- }}
- />
-
}
- onClick={addItem}
- />
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-};
-
-export default Demo;
diff --git a/src/FieldTitle/demos/description.tsx b/src/FieldTitle/demos/description.tsx
deleted file mode 100644
index 46e25b86..00000000
--- a/src/FieldTitle/demos/description.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { ProCard } from '@ant-design/pro-components';
-import { APIFieldType, FieldTitle } from '@ant-design/pro-editor';
-
-const Demo = () => {
- return (
-
-
-
-
- );
-};
-
-export default Demo;
diff --git a/src/FieldTitle/index.en-US.md b/src/FieldTitle/index.en-US.md
deleted file mode 100644
index 189819a8..00000000
--- a/src/FieldTitle/index.en-US.md
+++ /dev/null
@@ -1,29 +0,0 @@
----
-title: FieldTitle
-group: Basic
----
-
-# FieldTitle Field Title
-
-## When to use
-
-Configure field icons and field titles for different field types.
-
-## Code Demo
-
-### Field Title List
-
- = (props) => {
- const {
- style,
- className,
- prefixCls: customizePrefixCls,
- type,
- isParentArray,
- title,
- description = null,
- } = props;
-
- const prefixCls = getPrefixCls('field-title', customizePrefixCls);
- const { styles } = useStyle({ prefixCls });
-
- let finalType = type;
- if (finalType === 'boolean') {
- finalType = 'bool';
- }
- if (isParentArray) {
- finalType += 'Array';
- }
- return (
-
- {finalType ? {title} : null}
- {description ? {description} : null}
-
- );
-};
-
-export default FieldTitle;
diff --git a/src/FieldTitle/index.zh-CN.md b/src/FieldTitle/index.zh-CN.md
deleted file mode 100644
index 53795d63..00000000
--- a/src/FieldTitle/index.zh-CN.md
+++ /dev/null
@@ -1,29 +0,0 @@
----
-title: FieldTitle 字段标题
-group: 基础组件
----
-
-# FieldTitle 字段标题
-
-## 何时使用
-
-为不同的字段类型配置字段图标以及字段标题。
-
-## 代码演示
-
-### 字段标题列表
-
- = (props) => {
- const { content, onCopy, theme = 'light', prefixCls, style } = props;
+ const { content, onCopy, theme = 'light', style } = props;
const [copyId, setCopyId] = useState();
- const { styles } = useStyles({ prefixCls, theme });
+ const { styles } = useStyles({ theme });
useEffect(() => {
return () => {
diff --git a/src/Highlight/components/CopyButton/style.ts b/src/Highlight/components/CopyButton/style.ts
index c9da287d..8d945309 100644
--- a/src/Highlight/components/CopyButton/style.ts
+++ b/src/Highlight/components/CopyButton/style.ts
@@ -1,8 +1,8 @@
import { createStyles } from '../../../theme';
import { getThemeColor } from '../../theme/colors';
-export const useStyles = createStyles(({ css, cx }, { prefixCls, theme }) => {
- const prefix = `${prefixCls}`;
+export const useStyles = createStyles(({ css, token, prefixCls, cx }, { theme }) => {
+ const prefix = `${prefixCls}-${token.editorPrefix}-highlight`;
const { colorFillTertiary, colorText } = getThemeColor(theme === 'dark');
return {
diff --git a/src/Highlight/components/HighLightJS/index.tsx b/src/Highlight/components/HighLightJS/index.tsx
index 1cf44b05..31557f4e 100644
--- a/src/Highlight/components/HighLightJS/index.tsx
+++ b/src/Highlight/components/HighLightJS/index.tsx
@@ -5,7 +5,7 @@
* 优先支持主流语言，没有import在代码中使用的不会打包
*/
import classNames from 'classnames';
-import { useEffect, useState } from 'react';
+import { memo, useEffect, useState } from 'react';
import { HighlightProps } from '../../defalut';
import { useHighlight } from '../../hooks/useHighlight';
import { THEME_LIGHT } from '../../theme';
@@ -17,7 +17,7 @@ export type HighLighJSProps = Pick<
'language' | 'children' | 'theme' | 'prefixCls' | 'lineNumber'
>;
-const HighLighJS: React.FC = (props) => {
+const HighLighJS: React.FC = memo((props) => {
const { children, lineNumber = false, theme = THEME_LIGHT, language, prefixCls } = props;
const [codeBlock, setCodeBlock] = useState(null);
const { styles } = useStyles(theme);
@@ -60,6 +60,6 @@ const HighLighJS: React.FC = (props) => {
);
-};
+});
export default HighLighJS;
diff --git a/src/Highlight/components/HighLighter/index.tsx b/src/Highlight/components/HighLighter/index.tsx
index 72e6d1bf..92d972f2 100644
--- a/src/Highlight/components/HighLighter/index.tsx
+++ b/src/Highlight/components/HighLighter/index.tsx
@@ -5,9 +5,9 @@
* 优先支持主流语言，没有import在代码中使用的不会打包
*/
import { THEME_LIGHT } from '@/Highlight/theme';
-import { STUDIO_UI_PREFIX } from '@/theme';
import { Loading3QuartersOutlined as Loading } from '@ant-design/icons';
import classNames from 'classnames';
+import { memo } from 'react';
import { Center } from 'react-layout-kit';
import { HighlightProps } from '../../defalut';
import { useShiki } from '../../hooks/useShiki';
@@ -19,21 +19,20 @@ export type ShikiProps = Pick<
'language' | 'children' | 'theme' | 'prefixCls' | 'lineNumber'
>;
-const HighLighter: React.FC = (props) => {
- const {
- children,
- lineNumber = false,
- theme = THEME_LIGHT,
- language,
- prefixCls = STUDIO_UI_PREFIX,
- } = props;
- const { styles } = useStyles({ prefixCls, lineNumber, theme });
+const HighLighter: React.FC = memo((props) => {
+ const { children, lineNumber = false, theme = THEME_LIGHT, language, prefixCls } = props;
+ const { styles } = useStyles({ outPrefix: prefixCls, lineNumber, theme });
const { renderShiki, loading } = useShiki(language, theme);
return (
<>
{loading ? (
-
+
{children}
) : (
@@ -52,6 +51,6 @@ const HighLighter: React.FC = (props) => {
) : null}
);
-};
+});
export default HighLighter;
diff --git a/src/Highlight/components/HighLighter/style.ts b/src/Highlight/components/HighLighter/style.ts
index d5e636fa..767a8a54 100644
--- a/src/Highlight/components/HighLighter/style.ts
+++ b/src/Highlight/components/HighLighter/style.ts
@@ -1,59 +1,61 @@
import { createStyles } from '../../../theme';
import { getThemeColor } from '../../theme/colors';
-export const useStyles = createStyles(({ css, cx, token }, { prefixCls, lineNumber, theme }) => {
- const prefix = `${prefixCls}`;
- const { colorTextTertiary } = getThemeColor(theme === 'dark');
+export const useStyles = createStyles(
+ ({ css, cx, token, prefixCls }, { lineNumber, theme, outPrefix }) => {
+ const prefix = `${prefixCls}-${token.editorPrefix}-${outPrefix ? outPrefix : 'highlight'}`;
+ const { colorTextTertiary } = getThemeColor(theme === 'dark');
- const lineNumberStyle = css`
- code {
- counter-reset: step;
- counter-increment: step 0;
- }
+ const lineNumberStyle = css`
+ code {
+ counter-reset: step;
+ counter-increment: step 0;
+ }
- code .line::before {
- content: counter(step);
- counter-increment: step;
- width: 1rem;
- margin-right: 1.5rem;
- display: inline-block;
- text-align: right;
- color: rgba(115, 138, 148, 0.4);
- user-select: none;
- }
- `;
- return {
- shiki: cx(
- `${prefix}-shiki`,
- css`
- .shiki {
- overflow-x: scroll;
- background: none !important;
- ${lineNumber ? lineNumberStyle : ''}
- }
- `,
- ),
- loading: cx(css`
- color: ${colorTextTertiary};
- `),
- center: cx(
- css`
- backdrop-filter: saturate(180%) blur(10px);
- position: absolute;
- top: 0;
- right: 0;
- display: flex;
- align-items: center;
- justify-content: center;
+ code .line::before {
+ content: counter(step);
+ counter-increment: step;
+ width: 1rem;
+ margin-right: 1.5rem;
+ display: inline-block;
+ text-align: right;
+ color: rgba(115, 138, 148, 0.4);
+ user-select: none;
+ }
+ `;
+ return {
+ shiki: cx(
+ `${prefix}-shiki`,
+ css`
+ .shiki {
+ overflow-x: scroll;
+ background: none !important;
+ ${lineNumber ? lineNumberStyle : ''}
+ }
+ `,
+ ),
+ loading: cx(css`
+ color: ${colorTextTertiary};
+ `),
+ center: cx(
+ css`
+ backdrop-filter: saturate(180%) blur(10px);
+ position: absolute;
+ top: 0;
+ right: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
- height: 36px;
- padding: 0 8px;
+ height: 36px;
+ padding: 0 8px;
- font-family: ${token.fontFamilyCode};
- color: ${colorTextTertiary};
+ font-family: ${token.fontFamilyCode};
+ color: ${colorTextTertiary};
- border-radius: ${token.borderRadius};
- `,
- ),
- };
-});
+ border-radius: ${token.borderRadius};
+ `,
+ ),
+ };
+ },
+);
diff --git a/src/Highlight/components/HighlightCell/index.tsx b/src/Highlight/components/HighlightCell/index.tsx
index 82d278d3..29d91a11 100644
--- a/src/Highlight/components/HighlightCell/index.tsx
+++ b/src/Highlight/components/HighlightCell/index.tsx
@@ -10,13 +10,12 @@ export interface HighlightCellProps {
}
export default function HighlightCell({
- prefixCls,
data,
emptyText,
lineNumber = false,
onMouseDown,
}: HighlightCellProps) {
- const { styles } = useStyles(prefixCls);
+ const { styles } = useStyles();
const rowIndex: number = data?.index;
return (
diff --git a/src/Highlight/components/HighlightCell/style.ts b/src/Highlight/components/HighlightCell/style.ts
index e7a27e4c..311a42e6 100644
--- a/src/Highlight/components/HighlightCell/style.ts
+++ b/src/Highlight/components/HighlightCell/style.ts
@@ -1,7 +1,7 @@
import { createStyles } from '../../../theme';
-export const useStyles = createStyles(({ css, cx }, prefixCls) => {
- const prefix = `${prefixCls}`;
+export const useStyles = createStyles(({ css, cx, token, prefixCls }) => {
+ const prefix = `${prefixCls}-${token.editorPrefix}-highlight`;
return {
index: cx(
diff --git a/src/Highlight/components/LanguageTag/index.tsx b/src/Highlight/components/LanguageTag/index.tsx
index 18fa9cc2..015caffc 100644
--- a/src/Highlight/components/LanguageTag/index.tsx
+++ b/src/Highlight/components/LanguageTag/index.tsx
@@ -5,8 +5,8 @@ import { ReactNode } from 'react';
import { createStyles } from '../../../theme';
import { getThemeColor } from '../../theme/colors';
-const useStyles = createStyles(({ cx, css, token }, { prefixCls, theme }) => {
- const prefix = `${prefixCls}`;
+const useStyles = createStyles(({ cx, css, token, prefixCls }, { theme }) => {
+ const prefix = `${prefixCls}-${token.editorPrefix}-highlight`;
const { colorFillTertiary, colorText, colorTextSecondary } = getThemeColor(theme === 'dark');
@@ -54,12 +54,11 @@ export interface TagProps extends AntTagProps {
icon?: ReactNode;
size?: 'default' | 'small';
theme?: ThemeType;
- prefixCls?: string;
}
const LanguageTag: React.FC = (props) => {
- const { children, size = 'default', theme = 'light', prefixCls } = props || {};
- const { styles, cx } = useStyles({ theme, prefixCls });
+ const { children, size = 'default', theme = 'light' } = props || {};
+ const { styles, cx } = useStyles({ theme });
return (
diff --git a/src/Highlight/defalut.tsx b/src/Highlight/defalut.tsx
index 952d6457..bb474bd9 100644
--- a/src/Highlight/defalut.tsx
+++ b/src/Highlight/defalut.tsx
@@ -1,12 +1,11 @@
import classNames from 'classnames';
-import { createRef } from 'react';
-import { getPrefixCls } from '../theme';
+import { createRef, memo } from 'react';
import CopyButton from './components/CopyButton';
import HighLighter from './components/HighLighter';
import LanguageTag from './components/LanguageTag';
import { useKeyDownCopyEvent } from './hooks/useKeyDownCopyEvent';
import { useStyles } from './style';
-import { THEME_LIGHT, ThemeType } from './theme';
+import { ThemeType } from './theme';
export interface HighlightProps {
/**
@@ -72,22 +71,20 @@ export interface HighlightProps {
showLanguage?: boolean;
}
-const HighlightBase: React.FC = (props) => {
+const HighlightBase: React.FC = memo((props) => {
const {
children,
style,
className,
lineNumber = false,
copyable = true,
- theme = THEME_LIGHT,
+ theme,
language = 'tsx',
- prefixCls: customPrefixCls,
showLanguage = true,
type = 'block',
onCopy,
} = props;
- const prefixCls = getPrefixCls('highlight', customPrefixCls);
- const { styles } = useStyles({ prefixCls, theme, type });
+ const { styles } = useStyles({ theme, type });
const codeRef = createRef();
useKeyDownCopyEvent(codeRef, onCopy);
@@ -99,25 +96,16 @@ const HighlightBase: React.FC = (props) => {
style={style}
className={classNames(styles.container, className)}
>
- {copyable && (
-
- {language.toLowerCase()}
-
+ {language.toLowerCase()}
)}
-
+
{children}
+ {`public class HelloWorld {
+ public static void main(String[] args) {
+ System.out.println("Hello World!");
+ }
+ }`}
+
+);
diff --git a/src/Highlight/index.en-US.md b/src/Highlight/index.en-US.md
index 7102f5b6..88f01eb7 100644
--- a/src/Highlight/index.en-US.md
+++ b/src/Highlight/index.en-US.md
@@ -11,6 +11,10 @@ Use when displaying code without the need to edit it.
## Code Demo
+### auto theme
+
+((props: HighlightProps) => {
+ const { type, theme: outTheme = THEME_AUTO, containerWrapper } = props;
+ // 当为 auto 的时候，根据系统主题来判断
+ const { appearance } = useThemeMode();
+ const ProviderTheme = appearance === 'dark' ? 'dark' : 'light';
+ const theme = outTheme === THEME_AUTO ? ProviderTheme : outTheme;
const { theme: token } = useStyles({
- prefixCls,
type,
theme,
});
-
return (
{
},
}}
>
- {containerWrapper ?
);
-};
+});
export * from './defalut';
export * from './wrapper';
diff --git a/src/Highlight/index.zh-CN.md b/src/Highlight/index.zh-CN.md
index a2883fcf..c79daec0 100644
--- a/src/Highlight/index.zh-CN.md
+++ b/src/Highlight/index.zh-CN.md
@@ -12,6 +12,10 @@ group: 基础组件
## 代码演示
+### 自动主题
+
+(...args: T) => args;
-const ThemeTypes = tuple(THEME_DARK, THEME_LIGHT);
+const ThemeTypes = tuple(THEME_DARK, THEME_LIGHT, THEME_AUTO);
export type ThemeType = (typeof ThemeTypes)[number];
diff --git a/src/Highlight/wrapper.tsx b/src/Highlight/wrapper.tsx
index 63963e4c..843da2ac 100644
--- a/src/Highlight/wrapper.tsx
+++ b/src/Highlight/wrapper.tsx
@@ -4,7 +4,6 @@ import { ActionIcon, Button, Select, type SelectProps } from '@ant-design/pro-ed
import classNames from 'classnames';
import { memo, useState } from 'react';
import { DivProps, Flexbox } from 'react-layout-kit';
-import { getPrefixCls } from '..';
import { HighlightBase, HighlightProps } from './defalut';
import { languageMap } from './hooks/useHighlight';
import { useStyles } from './style';
@@ -31,16 +30,13 @@ export const FullFeatureWrapper = memo
language = 'markdown',
className,
style,
- prefixCls: customPrefixCls,
theme = THEME_LIGHT,
copyable = true,
type = 'block',
} = props || {};
- const prefixCls = getPrefixCls('highlight', customPrefixCls);
const [expand, setExpand] = useState(true);
const [lang, setLang] = useState(language);
const { styles } = useStyles({
- prefixCls,
theme,
type,
});
diff --git a/src/IconPicker/components/ScriptEditor.tsx b/src/IconPicker/components/ScriptEditor.tsx
index 672fce3a..6a17290d 100644
--- a/src/IconPicker/components/ScriptEditor.tsx
+++ b/src/IconPicker/components/ScriptEditor.tsx
@@ -1,3 +1,4 @@
+import { withProvider } from '@/ConfigProvider';
import { Button, Form, Input } from 'antd';
import { Flexbox } from 'react-layout-kit';
import { css, cx, useToken } from '../../theme';
@@ -26,12 +27,7 @@ const ScriptEditor = () => {
labelCol={{ span: 6 }}
wrapperCol={{ span: 18 }}
>
- e.target.value}
- >
+ e.target.value}>
{
>
-
+
添加
@@ -56,4 +49,4 @@ const ScriptEditor = () => {
);
};
-export default ScriptEditor;
+export default withProvider(ScriptEditor);
diff --git a/src/IconPicker/features/IconfontScript.style.tsx b/src/IconPicker/features/IconfontScript.style.tsx
index 674d1ae4..ae930ad2 100644
--- a/src/IconPicker/features/IconfontScript.style.tsx
+++ b/src/IconPicker/features/IconfontScript.style.tsx
@@ -1,6 +1,6 @@
import { createStyles } from '../../theme';
-export const useStyles = createStyles(({ token, css }) => ({
+export const useStyles = createStyles(({ token, css, prefixCls }) => ({
add: css`
border: none;
cursor: pointer;
@@ -14,7 +14,7 @@ export const useStyles = createStyles(({ token, css }) => ({
checked: css`
background: ${token.colorPrimary};
color: ${token.colorTextLightSolid};
- .studio-tag-close-icon {
+ .${prefixCls}-tag-close-icon {
color: ${token.colorTextLightSolid};
}
`,
diff --git a/src/InteractContainer/__tests__/index.test.tsx b/src/InteractContainer/__tests__/index.test.tsx
index ca5c638f..0275b085 100644
--- a/src/InteractContainer/__tests__/index.test.tsx
+++ b/src/InteractContainer/__tests__/index.test.tsx
@@ -36,7 +36,7 @@ describe('ContextCanvas', () => {
fireEvent.click(btn);
});
- expect(btn.className).toBe('studio-context-canvas-click');
+ expect(btn.className).toBe('ant-editor-context-canvas-click');
// 点击失焦
act(() => {
fireEvent.click(btn);
@@ -46,7 +46,7 @@ describe('ContextCanvas', () => {
act(() => {
fireEvent.click(btn);
});
- expect(btn.className).toBe('studio-context-canvas-click');
+ expect(btn.className).toBe('ant-editor-context-canvas-click');
// 点击非btn区域失焦
act(() => {
fireEvent.click(document.body);
diff --git a/src/InteractContainer/hooks/useContextCanvas.test.ts b/src/InteractContainer/hooks/useContextCanvas.test.ts
index ccdd95cf..4579b675 100644
--- a/src/InteractContainer/hooks/useContextCanvas.test.ts
+++ b/src/InteractContainer/hooks/useContextCanvas.test.ts
@@ -25,7 +25,7 @@ describe('useContextCanvas', () => {
fireEvent.mouseEnter(div);
});
- expect(div.className).toEqual('studio-context-canvas-hover');
+ expect(div.className).toEqual('ant-editor-context-canvas-hover');
});
it('移入 -> 移出 -> 移入', () => {
const div = document.createElement('div');
@@ -42,7 +42,7 @@ describe('useContextCanvas', () => {
fireEvent.mouseEnter(div);
});
- expect(div.className).toEqual('studio-context-canvas-hover');
+ expect(div.className).toEqual('ant-editor-context-canvas-hover');
act(() => {
fireEvent.mouseLeave(div);
@@ -53,7 +53,7 @@ describe('useContextCanvas', () => {
act(() => {
fireEvent.mouseEnter(div);
});
- expect(div.className).toEqual('studio-context-canvas-hover');
+ expect(div.className).toEqual('ant-editor-context-canvas-hover');
});
it('选中时', () => {});
diff --git a/src/InteractContainer/hooks/useContextCanvas.ts b/src/InteractContainer/hooks/useContextCanvas.ts
index d894f200..058595cb 100644
--- a/src/InteractContainer/hooks/useContextCanvas.ts
+++ b/src/InteractContainer/hooks/useContextCanvas.ts
@@ -1,6 +1,4 @@
import { useEffect } from 'react';
-import getPrefixCls from '../../_util/getPrefixCls';
-
import type { ContextCanvasProps } from '../type';
import { useContainer } from './useContainer';
@@ -10,15 +8,13 @@ import { useInteractStatus } from './useInteractStatus';
import { useRender } from './useRender';
export const useContextCanvas = ({
- prefixCls: customizePrefixCls,
rules,
status: outStatus,
onStatusChange,
getContainer,
disabled,
}: ContextCanvasProps) => {
- const prefixCls = getPrefixCls('context-canvas', customizePrefixCls);
- const Render = useRender(prefixCls);
+ const Render = useRender();
const container = useContainer(getContainer);
diff --git a/src/InteractContainer/hooks/useRender.test.ts b/src/InteractContainer/hooks/useRender.test.ts
index 92290586..e1f0dccf 100644
--- a/src/InteractContainer/hooks/useRender.test.ts
+++ b/src/InteractContainer/hooks/useRender.test.ts
@@ -8,7 +8,7 @@ describe('useRender', () => {
const div = document.createElement('div');
result.current.renderSelected(div);
- expect(div.className).toEqual('studio-context-canvas-click');
+ expect(div.className).toEqual('ant-editor-context-canvas-click');
expect(result.current.currentSelectedElementRef.current).toEqual(div);
expect(result.current.isSelected()).toBeTruthy();
@@ -25,7 +25,7 @@ describe('useRender', () => {
const div = document.createElement('div');
result.current.renderHover(div);
- expect(div.className).toEqual('studio-context-canvas-hover');
+ expect(div.className).toEqual('ant-editor-context-canvas-hover');
result.current.renderUnHover();
expect(div.className).toEqual('');
});
diff --git a/src/InteractContainer/hooks/useRender.ts b/src/InteractContainer/hooks/useRender.ts
index 36871f2f..5e6611ab 100644
--- a/src/InteractContainer/hooks/useRender.ts
+++ b/src/InteractContainer/hooks/useRender.ts
@@ -1,11 +1,15 @@
-import { useRef } from 'react';
-import getPrefixCls from '../../_util/getPrefixCls';
-
import isEqual from 'lodash.isequal';
+import { useRef } from 'react';
+import { createStyles } from '../../theme';
import type { InteractionType } from '../type';
-export const useRender = (customizePrefixCls?: string) => {
- const prefixCls = getPrefixCls('context-canvas', customizePrefixCls);
+const useStyle = createStyles(({ token, prefixCls }) => {
+ const componentPrefix = `${prefixCls}-${token.editorPrefix}-context-canvas`;
+ return { componentPrefix };
+});
+
+export const useRender = () => {
+ const { styles } = useStyle();
const selectItem = useRef();
const hoverItem = useRef();
@@ -17,12 +21,12 @@ export const useRender = (customizePrefixCls?: string) => {
const addClass = (element: HTMLElement, action: InteractionType) => {
if (!element) return;
- element.classList.add(`${prefixCls}-${action}`);
+ element.classList.add(`${styles.componentPrefix}-${action}`);
};
const removeClass = (element: HTMLElement, action: InteractionType) => {
if (!element) return;
- element.classList.remove(`${prefixCls}-${action}`);
+ element.classList.remove(`${styles.componentPrefix}-${action}`);
};
const removeAllClass = (action: InteractionType) => {
removeClass(selectItem.current, action);
diff --git a/src/InteractContainer/index.tsx b/src/InteractContainer/index.tsx
index 9a74a08b..af673a69 100644
--- a/src/InteractContainer/index.tsx
+++ b/src/InteractContainer/index.tsx
@@ -1,16 +1,15 @@
+import { withProvider } from '@ant-design/pro-editor';
import type { FC } from 'react';
-
import { useContextCanvas } from './hooks/useContextCanvas';
import { useStyle } from './style';
import type { ContextCanvasProps } from './type';
const ContextCanvas: FC = (props) => {
useStyle();
-
useContextCanvas(props);
return <>{props.children};
};
-export default ContextCanvas;
+export default withProvider(ContextCanvas);
export * from './type';
diff --git a/src/InteractContainer/style.ts b/src/InteractContainer/style.ts
index 3ca68ac7..4978416d 100644
--- a/src/InteractContainer/style.ts
+++ b/src/InteractContainer/style.ts
@@ -1,10 +1,10 @@
import { transparentize } from 'polished';
import { createStyles, injectGlobal } from '../theme';
-export const useStyle = createStyles(({ token }) => {
+export const useStyle = createStyles(({ token, prefixCls }) => {
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
injectGlobal`
- .studio-context-canvas {
+ .${prefixCls}-${token.editorPrefix}-context-canvas {
&-hover {
position: relative;
transition: opacity 0.5s ease-in !important;
diff --git a/src/InteractContainer/type.ts b/src/InteractContainer/type.ts
index 6ae624b0..4b8648fa 100644
--- a/src/InteractContainer/type.ts
+++ b/src/InteractContainer/type.ts
@@ -9,11 +9,7 @@ export type InteractionType = 'click' | 'hover';
// UnSelected = 'unSelected',
// }
-export type InteractStatusType =
- | 'hover'
- | 'unhover'
- | 'unSelected'
- | 'selected';
+export type InteractStatusType = 'hover' | 'unhover' | 'unSelected' | 'selected';
// export type InteractStatusType = typeof InteractStatusEnum[keyof typeof InteractStatusEnum];
/**
diff --git a/src/Layout/components/HeaderAndFooter.tsx b/src/Layout/components/HeaderAndFooter.tsx
new file mode 100644
index 00000000..af804779
--- /dev/null
+++ b/src/Layout/components/HeaderAndFooter.tsx
@@ -0,0 +1,120 @@
+import ActionIcon from '@/ActionIcon';
+import { MenuUnfoldOutlined } from '@ant-design/icons';
+import { DropDownProps, Dropdown, Flex, FlexProps } from 'antd';
+import { ReactNode } from 'react';
+import { ThemeLayoutType } from '..';
+import { useStyle } from './../style';
+
+enum typeEnum {
+ header = 'header',
+ footer = 'footer',
+}
+
+type iconDropdownType = {
+ icon?: ReactNode;
+ dropdown?: DropDownProps;
+ title?: ReactNode;
+ render?: (props: iconDropdownType, defalutDom?: ReactNode) => JSX.Element;
+};
+
+interface HeaderFooterSettings {
+ iconConfig?: iconDropdownType | false;
+ extra?: ReactNode;
+ flex?: FlexProps;
+ hide?: boolean;
+ render?: (props: HeaderFooterSettings) => JSX.Element;
+ style?: React.CSSProperties;
+ className?: string;
+ children?: ReactNode;
+ type?: typeEnum | string;
+ themeType?: ThemeLayoutType;
+}
+
+const HeaderAndFooter = (props: HeaderFooterSettings) => {
+ const {
+ children,
+ render,
+ hide = false,
+ flex = {
+ justify: 'space-between',
+ align: 'center',
+ className: '',
+ },
+ type = 'header',
+ extra,
+ iconConfig = {
+ icon:
+
+ {title}
+
+ );
+
+ if (render) {
+ return render(iconConfig, DefalutIconDom);
+ }
+
+ return DefalutIconDom;
+ };
+
+ return (
+
+ {/* 虽然是放在 flex 中，但实际上是 absoult 定位到最中间 */}
+ {children}
+
+
+ {extra && {extra}
}
+
+ );
+};
+
+export { HeaderAndFooter };
+export type { HeaderFooterSettings, typeEnum };
diff --git a/src/Layout/components/LayoutTypeContainer.tsx b/src/Layout/components/LayoutTypeContainer.tsx
new file mode 100644
index 00000000..be7cf1d3
--- /dev/null
+++ b/src/Layout/components/LayoutTypeContainer.tsx
@@ -0,0 +1,92 @@
+import { Flex } from 'antd';
+import { ReactNode } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { LayoutTypeEnum, ThemeLayoutType } from '..';
+import { useStyle } from './../style';
+
+type LayoutTypeContainerProps = {
+ pannels: ReactNode[];
+ headerandfooter: ReactNode[];
+ type: LayoutTypeEnum;
+ themeType: ThemeLayoutType;
+};
+
+const LayoutTypeContainer = (props: LayoutTypeContainerProps) => {
+ const { type, pannels, themeType, headerandfooter, ...rest } = props;
+ const { styles } = useStyle({ themeType });
+
+ const [LeftPannelDom, RightPannelDom, BottomPannelDom, CenterPannelDom] = pannels;
+ const [HeaderDom, FooterDom] = headerandfooter;
+
+ if (type === 'Left&Right') {
+ return (
+
+ {HeaderDom}
+
+ {LeftPannelDom}
+
+ {CenterPannelDom}
+ {BottomPannelDom}
+
+ {RightPannelDom}
+
+ {FooterDom}
+
+ );
+ }
+
+ if (type === 'LeftFull') {
+ return (
+
+ {HeaderDom}
+
+ {LeftPannelDom}
+
+
+ {CenterPannelDom}
+ {RightPannelDom}
+
+ {BottomPannelDom}
+
+
+ {FooterDom}
+
+ );
+ }
+
+ if (type === 'RightFull') {
+ return (
+
+ {HeaderDom}
+
+
+
+ {LeftPannelDom}
+ {CenterPannelDom}
+
+ {BottomPannelDom}
+
+ {RightPannelDom}
+
+ {FooterDom}
+
+ );
+ }
+
+ return (
+ <>
+
+ {HeaderDom}
+
+ {LeftPannelDom}
+ {CenterPannelDom}
+ {RightPannelDom}
+
+ {BottomPannelDom}
+ {FooterDom}
+
+
+ );
+};
+
+export { LayoutTypeContainer };
diff --git a/src/Layout/components/PannelDefault.tsx b/src/Layout/components/PannelDefault.tsx
new file mode 100644
index 00000000..0b15a543
--- /dev/null
+++ b/src/Layout/components/PannelDefault.tsx
@@ -0,0 +1,108 @@
+import { DraggablePanel, TabsProps } from '@ant-design/pro-editor';
+import { Size } from 're-resizable';
+import { ReactNode } from 'react';
+import { ThemeLayoutType } from '..';
+import { useStyle } from './../style';
+
+interface PannelSettings {
+ children: ReactNode | ReactNode[];
+ direction?: 'horizontal' | 'vertical';
+ tabs?: TabsProps;
+ icon?: ReactNode;
+ extra?: ReactNode;
+ hide?: boolean;
+ minWidth?: number;
+ minHeight?: number;
+ maxWidth?: number;
+ maxHeight?: number;
+ style?: React.CSSProperties;
+ className?: string;
+ themeType?: ThemeLayoutType;
+}
+
+const PannelDefault = (props: PannelSettings & { index: number }) => {
+ const {
+ children = '',
+ className,
+ style,
+ minHeight = 100,
+ minWidth = 100,
+ index = 0,
+ themeType,
+ ...rest
+ } = props || {};
+ const { styles, cx } = useStyle({ themeType });
+
+ const getPannelProps = (
+ index: number,
+ ):
+ | {
+ placement: 'left' | 'right' | 'bottom';
+ className?: string;
+ maxWidth?: number;
+ maxHeight?: number;
+ defaultSize?: Partial;
+ }
+ | false => {
+ switch (['left', 'right', 'bottom', 'center'][index]) {
+ case 'left':
+ return {
+ placement: 'left',
+ className: styles.leftPannel,
+ maxWidth: 500,
+ defaultSize: {
+ width: '200',
+ },
+ };
+ case 'right':
+ return {
+ placement: 'right',
+ className: styles.rightPannel,
+ maxWidth: 500,
+ defaultSize: {
+ width: '200',
+ },
+ };
+ case 'bottom':
+ return {
+ placement: 'bottom',
+ maxHeight: 400,
+ defaultSize: {
+ height: '100',
+ },
+ };
+ case 'center':
+ return false;
+ default:
+ return false;
+ }
+ };
+ const pannelProps = getPannelProps(index);
+ if (!pannelProps) {
+ return (
+
+ );
+ }
+ const { placement, className: pannelClassName } = pannelProps;
+ return (
+
+
+ {children}
+
+
+ );
+};
+
+export { PannelDefault };
+
+export type { PannelSettings };
diff --git a/src/Layout/demos/_defaultProps.tsx b/src/Layout/demos/_defaultProps.tsx
new file mode 100644
index 00000000..8a8c0632
--- /dev/null
+++ b/src/Layout/demos/_defaultProps.tsx
@@ -0,0 +1,108 @@
+import {
+ AndroidOutlined,
+ ChromeOutlined,
+ CloudOutlined,
+ CodeSandboxOutlined,
+ FacebookOutlined,
+ GithubOutlined,
+ LinkedinOutlined,
+ MenuUnfoldOutlined,
+ SmileOutlined,
+ TwitterOutlined,
+ YoutubeOutlined,
+} from '@ant-design/icons';
+import { Space, Tag } from 'antd';
+
+const DefaultLayoutProps = {
+ header: {
+ iconConfig: {
+ icon:
+ 关于 Ant Desgin Pro Editor
+
+ ),
+ },
+ {
+ key: '2',
+ label: (
+
+ 全部显示
+
+ ),
+ icon:
+ GitHub
+
+ ),
+ icon:
+
+ ),
+ iconConfig: {
+ icon:
+ Save
+ Export
+
+ ),
+ }}
+ footer={{
+ ...DefaultLayoutProps.footer,
+ }}
+ leftPannel={{
+ children: Left Pannel
,
+ }}
+ />
+ );
+};
diff --git a/src/Layout/demos/components/sessinList.tsx b/src/Layout/demos/components/sessinList.tsx
new file mode 100644
index 00000000..19f498ec
--- /dev/null
+++ b/src/Layout/demos/components/sessinList.tsx
@@ -0,0 +1,136 @@
+import { Avatar, Button, List, Skeleton } from 'antd';
+import { css, cx } from 'antd-style';
+import React, { useEffect, useState } from 'react';
+
+export interface DataType {
+ gender?: string;
+ name: {
+ title?: string;
+ first?: string;
+ last?: string;
+ };
+ email?: string;
+ picture: {
+ large?: string;
+ medium?: string;
+ thumbnail?: string;
+ };
+ nat?: string;
+ loading: boolean;
+}
+
+const count = 8;
+const fakeDataUrl = `https://randomuser.me/api/?results=${count}&inc=name,gender,email,nat,picture&noinfo`;
+
+const ClassNamesGroup = {
+ ListClassName: cx(css`
+ overflow: scroll;
+ `),
+ ListItemClassName: cx(css`
+ cursor: pointer;
+ padding: 0px 10px !important;
+ margin-top: 4px;
+ margin-bottom: 4px;
+ border-radius: 10px;
+ :hover {
+ background-color: #e3e3e3;
+ }
+ `),
+ SubTitle: cx(css`
+ text-wrap: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ `),
+ ItemTitle: cx(css`
+ text-wrap: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ margin: 0 0 -4px 0;
+ `),
+ avatar: cx(css`
+ height: 40px;
+ width: 40px;
+ `),
+};
+
+const SessonList: React.FC = () => {
+ const [initLoading, setInitLoading] = useState(true);
+ const [loading, setLoading] = useState(false);
+ const [data, setData] = useState([]);
+ const [list, setList] = useState([]);
+
+ useEffect(() => {
+ fetch(fakeDataUrl)
+ .then((res) => res.json())
+ .then((res) => {
+ setInitLoading(false);
+ setData(res.results);
+ setList(res.results);
+ });
+ }, []);
+
+ const onLoadMore = () => {
+ setLoading(true);
+ setList(
+ data.concat([...new Array(count)].map(() => ({ loading: true, name: {}, picture: {} }))),
+ );
+ fetch(fakeDataUrl)
+ .then((res) => res.json())
+ .then((res) => {
+ const newData = data.concat(res.results);
+ setData(newData);
+ setList(newData);
+ setLoading(false);
+ // Resetting window's offsetTop so as to display react-virtualized demo underfloor.
+ // In real scene, you can using public method of react-virtualized:
+ // https://stackoverflow.com/questions/46700726/how-to-use-public-method-updateposition-of-react-virtualized
+ window.dispatchEvent(new Event('resize'));
+ });
+ };
+
+ const loadMore =
+ !initLoading && !loading ? (
+
+ loading more
+
+ ) : null;
+
+ return (
+
+ (
+ 12.31
} className={ClassNamesGroup.ListItemClassName}>
+
+ {item.name?.last}
}
+ description={
+ Hello! nice to meet to u ~
+ }
+ />
+
+
+ )}
+ />
+
+ );
+};
+
+export default SessonList;
diff --git a/src/Layout/demos/dingding.tsx b/src/Layout/demos/dingding.tsx
new file mode 100644
index 00000000..6517087d
--- /dev/null
+++ b/src/Layout/demos/dingding.tsx
@@ -0,0 +1,151 @@
+import {
+ CloseCircleFilled,
+ ExclamationCircleFilled,
+ FieldTimeOutlined,
+ FolderAddOutlined,
+ MinusCircleFilled,
+} from '@ant-design/icons';
+import { ActionGroup, ActionIcon, Button, EditorLayout, Input } from '@ant-design/pro-editor';
+import { Divider, Dropdown, Image, Space, message } from 'antd';
+import { DefaultLayoutProps } from './_defaultProps';
+import SessonList from './components/sessinList';
+
+export default () => {
+ const [messageApi, contextHolder] = message.useMessage();
+
+ const LeftActions = () => (
+
+ ),
+ size: 18,
+ onClick: () => {
+ messageApi.info('正在关闭程序 ing！');
+ },
+ label: '关闭程序',
+ },
+ {
+ icon: (
+
+ ),
+ size: 18,
+ label: '关闭程序',
+ },
+ {
+ icon: (
+
+ ),
+ size: 18,
+ label: '详细提示',
+ },
+ ]}
+ />
+ );
+
+ return (
+ <>
+ {contextHolder}
+
+
+
+
+ Save
+
+
+
+ ),
+ iconConfig: {
+ ...DefaultLayoutProps.header.iconConfig,
+ title: '靓仔/妹',
+ icon: (
+ Left Pannel ,
+ }}
+ />
+ );
+};
diff --git a/src/Layout/demos/themeType.tsx b/src/Layout/demos/themeType.tsx
new file mode 100644
index 00000000..d07ec778
--- /dev/null
+++ b/src/Layout/demos/themeType.tsx
@@ -0,0 +1,71 @@
+import { EditorLayout, Input } from '@ant-design/pro-editor';
+import { Segmented, Space } from 'antd';
+import { useState } from 'react';
+import { DefaultLayoutProps } from './_defaultProps';
+
+export default () => {
+ const [value, setValue] = useState('ghost');
+ const [style, setStyle] = useState({});
+ return (
+
+ {
+ if (e.toString() === 'pure') {
+ setStyle({
+ backgroundColor: 'rgba(200,200,200,0.3)',
+ border: '1px solid #1890ff',
+ });
+ } else {
+ setStyle({});
+ }
+ setValue(e.toString());
+ }}
+ />
+ Footer
,
+ }}
+ centerPannel={{
+ style: style,
+ children: Center Pannel
,
+ }}
+ rightPannel={{
+ style: style,
+ children: right Pannel
,
+ }}
+ bottomPannel={{
+ style: style,
+ children: Bottom Pannel
,
+ }}
+ leftPannel={{
+ style: style,
+ children: Left Pannel
,
+ }}
+ />
+
+ );
+};
diff --git a/src/Layout/demos/types.tsx b/src/Layout/demos/types.tsx
new file mode 100644
index 00000000..83f5f3ec
--- /dev/null
+++ b/src/Layout/demos/types.tsx
@@ -0,0 +1,47 @@
+import { EditorLayout, Input } from '@ant-design/pro-editor';
+import { Segmented, Space } from 'antd';
+import { useState } from 'react';
+import { DefaultLayoutProps } from './_defaultProps';
+
+export default () => {
+ const [value, setValue] = useState('Bottom');
+
+ return (
+
+ setValue(e.toString())}
+ />
+ Footer
,
+ }}
+ leftPannel={{
+ children: Left Pannel
,
+ }}
+ />
+
+ );
+};
diff --git a/src/Layout/index.en-US.md b/src/Layout/index.en-US.md
new file mode 100644
index 00000000..e5ac45ea
--- /dev/null
+++ b/src/Layout/index.en-US.md
@@ -0,0 +1,99 @@
+---
+title: EditorLayout
+atomId: Layout
+group: Basic
+---
+
+# EditorLayout Basic Layout
+
+EditorLayout is a layout component specifically designed for editor scenarios that we have created.
+
+## Code Demonstration
+
+### Basic Usage
+
+ = withProvider(BasicLayout);
+
+export { WrapperLayout as Layout };
diff --git a/src/Layout/index.zh-CN.md b/src/Layout/index.zh-CN.md
new file mode 100644
index 00000000..12b9b3e1
--- /dev/null
+++ b/src/Layout/index.zh-CN.md
@@ -0,0 +1,99 @@
+---
+title: EditorLayout 编辑器布局
+atomId: Layout
+group: 基础组件
+---
+
+# EditorLayout 编辑器布局
+
+EditorLayout 是我们专门为了编辑器场景制作的编辑器布局组件
+
+## 代码演示
+
+### 基础用法
+
+ {
- /**
- * JSON Schema 配置项
- */
- schema: JSONSchema;
- /**
- * 表单默认值
- */
- defaultValue?: T;
- /**
- * 表单当前值
- */
- value?: T;
- /**
- * 表单值变化的回调函数
- * @param changedValue - 变化的部分值
- * @param fullValue - 完整的表单值
- */
- onChange?: (changedValue: Partial, fullValue: T) => void;
-}
-
-const Schema: (props: SchemaProps) => ReturnType = memo(
- ({ value: outConfig, onChange, schema }) => {
- const store = useStoreContext();
-
- const getValue = useMemoizedFn(() => {
- const data = store.getData();
-
- return Object.fromEntries(
- Object.values(data).map((item) => [item.key, (item as DataInput).value]),
- );
- });
-
- const levaSchema = useMemo(() => {
- return toLevaSchema(schema, (item, key) => {
- const config = {
- onChange: (value, path, context) => {
- if (context.initial || !context.fromPanel) return;
-
- const full = getValue();
- onChange?.({ [context.key]: value } as any, full as any);
- },
- } as SchemaItem;
- if (outConfig && outConfig[key]) {
- config['value'] = outConfig[key];
- }
- return config;
- });
- }, [schema]);
-
- useEffect(() => {
- const innerValue = getValue();
- if (isEqual(innerValue, outConfig)) return;
-
- const config = merge({}, getDefaultValueFromSchema(schema), outConfig);
-
- store.set(config, false);
- }, [outConfig]);
-
- useControls(levaSchema, { store });
-
- return null;
- },
-);
-
-export default Schema;
diff --git a/src/LevaPanel/demos/button.tsx b/src/LevaPanel/demos/button.tsx
deleted file mode 100644
index 941a20fd..00000000
--- a/src/LevaPanel/demos/button.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { DraggablePanel, LevaPanel } from '@ant-design/pro-editor';
-import { Button } from 'antd';
-import { useState } from 'react';
-import { ButtonConfig, buttonSchema } from './schema';
-
-export default () => {
- const [config, setConfig] = useState({ children: '默认按钮', type: 'primary' });
-
- return (
-
-
-
-
- {
- setConfig(fullValue);
- console.log('check changedValue:', changedValue);
- console.log('check fullValue:', fullValue);
- }}
- />
-
-
= {
- type: 'object',
- properties: {
- children: {
- type: 'string',
- title: '按钮文本',
- },
- type: {
- type: 'string',
- title: '类型',
- default: 'default',
- enum: ['primary', 'default', 'dashed', 'link', 'text'],
- enumNames: ['强调', '默认', '虚线', '链接', '文本'],
- },
- danger: {
- type: 'boolean',
- title: '危险态',
- default: false,
- },
- icon: {
- type: 'string',
- title: '图标',
- default: '',
- },
- size: {
- title: '大小',
- type: 'string',
- enum: ['large', 'middle', 'small'],
- enumNames: ['大', '中', '小'],
- default: 'middle',
- },
- shape: {
- title: '形状',
- type: 'string',
- enumOptions: [
- {
- label: '默认',
- },
- {
- label: '圆形',
- value: 'circle',
- },
- {
- label: '胶囊',
- value: 'round',
- },
- ],
- },
- loading: {
- type: 'boolean',
- title: '加载中',
- default: false,
- },
- disabled: {
- type: 'boolean',
- title: '禁用',
- default: false,
- },
- ghost: {
- type: 'boolean',
- title: '幽灵按钮',
- default: false,
- },
- },
-};
diff --git a/src/LevaPanel/index.en-US.md b/src/LevaPanel/index.en-US.md
deleted file mode 100644
index 3ceea43f..00000000
--- a/src/LevaPanel/index.en-US.md
+++ /dev/null
@@ -1,113 +0,0 @@
----
-title: LevaPanel
-atomId: LevaPanel
-group: Panel
----
-
-# LevaPanel Property Panel
-
-## When to use
-
-Based on [Leva](https://leva.pmnd.rs/), it generates a panel module according to JsonSchema.
-
-## Code Example
-
-### Basic Usage
-
-` | JSON Schema configuration |
-| defaultValue | `T \| undefined` | Default value for the form |
-| value | `T \| undefined` | Current value of the form |
-| onChange | `(changedValue: Partial\, fullValue: T) => void` | Callback function for form value change |
-| title | `ReactNode` | Title |
-
-## JSONSchema
-
-| Property | Type | Description |
-| ----------- | --------------------------------------------------- | -------------------------------------------------------------------------- |
-| type | `'string'` \| `'boolean'` \| `'number'` \| `object` | Type of form |
-| title | `string` | Form label |
-| default | `any` | Default value for the form |
-| enum | `string[]` | Option values |
-| enumNames | `string[]` | Option description values, used in conjunction with `enum` |
-| enumOptions | `{label: string, value: string}[]` | Option description list, with the same function as `enums` and `enumNames` |
-| properties | `object` | Property configuration, used when type is `object` |
-
-Example `schema` reference:
-
-```json
-/**
- * Button Schema
- */
-export const buttonSchema: JSONSchema = {
- type: 'object',
- properties: {
- children: {
- type: 'string',
- title: 'Button Text',
- },
- type: {
- type: 'string',
- title: 'Type',
- default: 'default',
- enum: ['primary', 'default', 'dashed', 'link', 'text'],
- enumNames: ['Primary', 'Default', 'Dashed', 'Link', 'Text'],
- },
- danger: {
- type: 'boolean',
- title: 'Dangerous State',
- default: false,
- },
- icon: {
- type: 'string',
- title: 'Icon',
- default: '',
- },
- size: {
- title: 'Size',
- type: 'string',
- enum: ['large', 'middle', 'small'],
- enumNames: ['Large', 'Middle', 'Small'],
- default: 'middle',
- },
- shape: {
- title: 'Shape',
- type: 'string',
- enumOptions: [
- {
- label: 'Default',
- },
- {
- label: 'Circular',
- value: 'circle',
- },
- {
- label: 'Capsule',
- value: 'round',
- },
- ],
- },
- loading: {
- type: 'boolean',
- title: 'Loading',
- default: false,
- },
- disabled: {
- type: 'boolean',
- title: 'Disabled',
- default: false,
- },
- ghost: {
- type: 'boolean',
- title: 'Ghost Button',
- default: false,
- },
- },
-};
-
-```
diff --git a/src/LevaPanel/index.tsx b/src/LevaPanel/index.tsx
deleted file mode 100644
index 35fd907e..00000000
--- a/src/LevaPanel/index.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import { LevaPanel, LevaStoreProvider, useCreateStore } from 'leva';
-import { CSSProperties, ReactNode, memo } from 'react';
-import { createStyles } from '../theme';
-import Schema, { SchemaProps } from './Schema';
-
-const useStyles = createStyles(
- ({ css, token }) => css`
- --leva-sizes-controlWidth: 66%;
- --leva-colors-elevation1: ${token.colorFillSecondary};
- --leva-colors-elevation2: transparent;
- --leva-colors-elevation3: ${token.colorFillSecondary};
- --leva-colors-accent1: ${token.colorPrimary};
- --leva-colors-accent2: ${token.colorPrimaryHover};
- --leva-colors-accent3: ${token.colorPrimaryActive};
- --leva-colors-highlight1: ${token.colorTextTertiary};
- --leva-colors-highlight2: ${token.colorTextSecondary};
- --leva-colors-highlight3: ${token.colorText};
- --leva-colors-vivid1: ${token.colorWarning};
- --leva-shadows-level1: unset;
- --leva-shadows-level2: unset;
- --leva-fonts-mono: ${token.fontFamilyCode};
-
- overflow: auto;
-
- padding: 6px 0;
-
- > div {
- background: transparent;
-
- > div {
- background: transparent;
- }
- }
-
- input:checked + label > svg {
- stroke: ${token.colorBgLayout};
- }
-
- button {
- --leva-colors-accent2: ${token.colorFillSecondary};
- }
- `,
-);
-
-export interface LevaPanelProps extends SchemaProps {
- title?: ReactNode;
- className?: string;
- style?: CSSProperties;
-}
-
-const Panel: (props: LevaPanelProps) => ReactNode = memo(
- ({ value, title, onChange, schema, className, style }) => {
- const store = useCreateStore();
- const { styles, cx } = useStyles();
-
- return (
-
-
-
-
- );
- },
-);
-
-export default Panel;
diff --git a/src/LevaPanel/index.zh-CN.md b/src/LevaPanel/index.zh-CN.md
deleted file mode 100644
index 6c6eabad..00000000
--- a/src/LevaPanel/index.zh-CN.md
+++ /dev/null
@@ -1,115 +0,0 @@
----
-title: LevaPanel 属性面板
-atomId: LevaPanel
-group:
- title: 面板模块
- order: 1
----
-
-# LevaPanel 属性面板
-
-## 何时使用
-
-基于 [Leva](https://leva.pmnd.rs/) 根据 JsonSchema 生成面板模块。
-
-## 代码演示
-
-### 基本使用
-
-` | JSON Schema 配置项 |
-| defaultValue | `T \| undefined` | 表单默认值 |
-| value | `T \| undefined` | 表单当前值 |
-| onChange | `(changedValue: Partial\, fullValue: T) => void` | 表单值变化的回调函数 |
-| title | `ReactNode` | 标题 |
-
-## JSONSchema
-
-| 属性名 | 类型 | 描述 |
-| ----------- | --------------------------------------------------- | --------------------------------------------- |
-| type | `'string'` \| `'boolean'` \| `'number'` \| `object` | 表单类型 |
-| title | `string` | 表单标签 |
-| default | `any` | 表单默认值 |
-| enum | `string[]` | 选项值 |
-| enumNames | `string[]` | 选项描述值，配合 `enum` 使用 |
-| enumOptions | `{label: string, value: string}[]` | 选项描述列表，与 `enums`和`enumNames`作用一致 |
-| properties | `object` | 属性配置项，类型为 `object` 使用 |
-
-示例 `schema`参考:
-
-```json
-/**
- * 按钮 Schema
- */
-export const buttonSchema: JSONSchema = {
- type: 'object',
- properties: {
- children: {
- type: 'string',
- title: '按钮文本',
- },
- type: {
- type: 'string',
- title: '类型',
- default: 'default',
- enum: ['primary', 'default', 'dashed', 'link', 'text'],
- enumNames: ['强调', '默认', '虚线', '链接', '文本'],
- },
- danger: {
- type: 'boolean',
- title: '危险态',
- default: false,
- },
- icon: {
- type: 'string',
- title: '图标',
- default: '',
- },
- size: {
- title: '大小',
- type: 'string',
- enum: ['large', 'middle', 'small'],
- enumNames: ['大', '中', '小'],
- default: 'middle',
- },
- shape: {
- title: '形状',
- type: 'string',
- enumOptions: [
- {
- label: '默认',
- },
- {
- label: '圆形',
- value: 'circle',
- },
- {
- label: '胶囊',
- value: 'round',
- },
- ],
- },
- loading: {
- type: 'boolean',
- title: '加载中',
- default: false,
- },
- disabled: {
- type: 'boolean',
- title: '禁用',
- default: false,
- },
- ghost: {
- type: 'boolean',
- title: '幽灵按钮',
- default: false,
- },
- },
-};
-
-```
diff --git a/src/LevaPanel/utils/schema.ts b/src/LevaPanel/utils/schema.ts
deleted file mode 100644
index 8b8b586f..00000000
--- a/src/LevaPanel/utils/schema.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import { JSONSchema } from '@/ComponentAsset';
-import { LevaInputs, Schema } from 'leva/src/types';
-
-export type SchemaItem = Schema[keyof Schema];
-
-const getOptions = (schemaItem: JSONSchema) => {
- if (schemaItem.enumOptions) {
- return Object.fromEntries(schemaItem.enumOptions.map((i) => [i.label, i.value]));
- } else if (schemaItem.enum) {
- return Object.fromEntries(
- schemaItem.enum.map((i, index) => {
- const name = schemaItem.enumNames?.[index] || i;
- return [name, i];
- }),
- );
- }
-};
-
-const getRenderType = (schemaItem: JSONSchema): LevaInputs => {
- switch (schemaItem.type) {
- case 'boolean':
- return LevaInputs.BOOLEAN;
- case 'number':
- return LevaInputs.NUMBER;
- case 'string':
- if (!!getOptions(schemaItem)) return LevaInputs.SELECT;
- return LevaInputs.STRING;
- }
-};
-
-export const toLevaSchema = (
- schema: JSONSchema,
- visitItem?: (item: JSONSchema, key: string) => Partial,
-) =>
- Object.fromEntries(
- Object.entries(schema.properties).map(([key, schemaItem]) => {
- const after = visitItem?.(schemaItem, key) || {};
-
- const schema: SchemaItem = {
- type: getRenderType(schemaItem),
- label: schemaItem.title,
- value: schemaItem.default,
- options: getOptions(schemaItem),
- ...(after as object),
- };
-
- return [key, schema];
- }),
- );
diff --git a/src/Markdown/CodeBlock.tsx b/src/Markdown/CodeBlock.tsx
index d2fb8631..a58f3bf9 100644
--- a/src/Markdown/CodeBlock.tsx
+++ b/src/Markdown/CodeBlock.tsx
@@ -17,9 +17,6 @@ const useStyles = createStyles(({ css }) => ({
padding: 12px !important;
}
`,
- snippet: css`
- display: flex;
- `,
}));
const countLines = (str: string): number => {
@@ -28,7 +25,7 @@ const countLines = (str: string): number => {
return matches ? matches.length : 1;
};
-const Code = memo(({ highlight, snippet, ...properties }: any) => {
+export const Code = memo((properties: any) => {
const { styles, cx } = useStyles();
if (!properties.children[0]) return;
@@ -39,15 +36,18 @@ const Code = memo(({ highlight, snippet, ...properties }: any) => {
const content = Array.isArray(children) ? (children[0] as string) : children;
const lang = className?.replace('language-', '') || 'txt';
+
if (countLines(content) === 1 && content.length <= 60) {
return (
{content}
@@ -59,11 +59,9 @@ const Code = memo(({ highlight, snippet, ...properties }: any) => {
className={cx(styles.container, styles.highlight)}
language={lang}
type="block"
- {...highlight}
+ containerWrapper={true}
>
{content}
);
});
-
-export { Code };
diff --git a/src/Markdown/demos/data.ts b/src/Markdown/demos/data.ts
index b417e0ad..e5e5e073 100644
--- a/src/Markdown/demos/data.ts
+++ b/src/Markdown/demos/data.ts
@@ -1,4 +1,4 @@
-export const content = `# This is an H1
+const content = `# This is an H1
## This is an H2
### This is an H3
#### This is an H4
@@ -86,3 +86,24 @@ $$
\\int_{a}^{b} f(x) \\, dx
$$
`;
+
+const htmlContent = `
+
+
+Custom Html Dom Render
+
+
+Custom Html Dom Render
+
+ Ant Desgin
+ Ant Desgin Pro
+ Ant Desgin Pro Components
+
+
+
+
+`;
+
+export { content, htmlContent };
diff --git a/src/Markdown/demos/htmlPlugin.tsx b/src/Markdown/demos/htmlPlugin.tsx
new file mode 100644
index 00000000..944a59a9
--- /dev/null
+++ b/src/Markdown/demos/htmlPlugin.tsx
@@ -0,0 +1,7 @@
+import { Markdown } from '@ant-design/pro-editor';
+import rehypeRaw from 'rehype-raw';
+import { htmlContent } from './data';
+
+export default () => {
+ return {htmlContent} ;
+};
diff --git a/src/Markdown/demos/index.tsx b/src/Markdown/demos/index.tsx
index 008f091a..a14a0b0f 100644
--- a/src/Markdown/demos/index.tsx
+++ b/src/Markdown/demos/index.tsx
@@ -3,13 +3,5 @@ import { Markdown } from '@ant-design/pro-editor';
import { content } from './data';
export default () => {
- return (
-
- {content}
-
- );
+ return {content} ;
};
diff --git a/src/Markdown/index.en-US.md b/src/Markdown/index.en-US.md
index 2301c6e4..490929c9 100644
--- a/src/Markdown/index.en-US.md
+++ b/src/Markdown/index.en-US.md
@@ -12,13 +12,23 @@ You can also customize it by passing in props like components to React-Markdown,
(
- ({ children, className, style, onDoubleClick, highlight = {}, snippet = {}, ...rest }) => {
+ ({
+ children,
+ className,
+ style,
+ onDoubleClick,
+ rehypePlugins: outRehypePlugins,
+ remarkPlugins: outRemarkPlugins,
+ ...rest
+ }) => {
const { styles } = useStyles();
const components: any = {
- a: Typography.Link,
- details: Collapse,
- hr: () =>
- {children}
-
- );
- },
+ details: MemoDetails,
+ hr: MemoHr,
+ a: MemoAlink,
+ img: MemoImage,
+ pre: Code,
};
+ const rehypePlugins = [rehypeKatex, ...(outRehypePlugins || [])];
+ const remarkPlugins = [remarkGfm, remarkMath, ...(outRemarkPlugins || [])];
+
return (
{children}
@@ -59,4 +67,4 @@ const Markdown = memo(
},
);
-export default Markdown;
+export default withProvider(Markdown) as React.FC;
diff --git a/src/Markdown/index.zh-CN.md b/src/Markdown/index.zh-CN.md
index 80e488f0..7dce50c4 100644
--- a/src/Markdown/index.zh-CN.md
+++ b/src/Markdown/index.zh-CN.md
@@ -14,13 +14,23 @@ ProEditor 内置了一个默认的 Markdown 渲染器，使用 React-Markdown，
diff --git a/src/ProBuilder/components/Canvas/Component.tsx b/src/ProBuilder/components/Canvas/Component.tsx
index 87a75a00..7ba3353d 100644
--- a/src/ProBuilder/components/Canvas/Component.tsx
+++ b/src/ProBuilder/components/Canvas/Component.tsx
@@ -5,22 +5,23 @@ import type { FC } from 'react';
import { memo, useEffect, useRef } from 'react';
import { shallow } from 'zustand/shallow';
+import { useTheme } from 'antd-style';
import InteractContainer from '../../../InteractContainer';
import { useUpdateEditorAwareness } from '../../hooks/useEditorAwareness';
import { useStore } from '../../store';
const Component: FC = memo(() => {
- const [prefixCls, interaction, enableCanvasInteraction, componentAsset, updateCanvasInteract] =
- useStore(
- (s) => [
- `${s.prefixCls}-canvas`,
- s.interaction,
- s.enableCanvasInteraction,
- s.componentAsset,
- s.internalUpdateCanvasInteract,
- ],
- shallow,
- );
+ const token = useTheme();
+ const prefix = `${token.prefixCls}-${token.editorPrefix}-pro-builder-canvas`;
+ const [interaction, enableCanvasInteraction, componentAsset, updateCanvasInteract] = useStore(
+ (s) => [
+ s.interaction,
+ s.enableCanvasInteraction,
+ s.componentAsset,
+ s.internalUpdateCanvasInteract,
+ ],
+ shallow,
+ );
const ref = useRef();
const size = useSize(ref);
@@ -36,10 +37,10 @@ const Component: FC = memo(() => {
disabled={!enableCanvasInteraction}
status={interaction}
rules={componentAsset.rules}
- getContainer={`#${prefixCls}`}
+ getContainer={`#${prefix}`}
onStatusChange={updateCanvasInteract}
>
-
+
diff --git a/src/ProBuilder/components/NavBar/index.tsx b/src/ProBuilder/components/NavBar/index.tsx
index d6c08430..2e2a52f7 100644
--- a/src/ProBuilder/components/NavBar/index.tsx
+++ b/src/ProBuilder/components/NavBar/index.tsx
@@ -2,9 +2,6 @@ import { Space } from 'antd';
import type { FC, ReactNode } from 'react';
import { memo } from 'react';
import { Flexbox } from 'react-layout-kit';
-import { shallow } from 'zustand/shallow';
-
-import { useStore } from '../../store';
import { useStyle } from './style';
export interface NavBarProps {
@@ -15,8 +12,7 @@ export interface NavBarProps {
}
const NavBar: FC
= memo(({ logo }) => {
- const prefixCls = useStore((s) => s.prefixCls, shallow);
- const { styles } = useStyle(`${prefixCls}-navbar`);
+ const { styles } = useStyle();
const defaultLogo = (
diff --git a/src/ProBuilder/components/NavBar/style.ts b/src/ProBuilder/components/NavBar/style.ts
index 53840eea..bca92a87 100644
--- a/src/ProBuilder/components/NavBar/style.ts
+++ b/src/ProBuilder/components/NavBar/style.ts
@@ -1,22 +1,25 @@
import { createStyles } from '../../../theme';
-export const useStyle = createStyles(({ token, css, cx }, prefixCls: string) => ({
- container: cx(
- prefixCls,
- css`
- background-color: ${token.colorBgContainer};
- `,
- ),
- logo: cx(
- `${prefixCls}-logo`,
- css`
- font-size: 16px;
- `,
- ),
- img: cx(
- `${prefixCls}-logo-img`,
- css`
- height: 24px;
- `,
- ),
-}));
+export const useStyle = createStyles(({ token, css, cx, prefixCls }) => {
+ const prefix = `${prefixCls}-${token.editorPrefix}-pro-builder-navbar`;
+ return {
+ container: cx(
+ prefix,
+ css`
+ background-color: ${token.colorBgContainer};
+ `,
+ ),
+ logo: cx(
+ `${prefix}-logo`,
+ css`
+ font-size: 16px;
+ `,
+ ),
+ img: cx(
+ `${prefix}-logo-img`,
+ css`
+ height: 24px;
+ `,
+ ),
+ };
+});
diff --git a/src/ProBuilder/components/Stage/index.tsx b/src/ProBuilder/components/Stage/index.tsx
index dcf0ede7..0bbe6887 100644
--- a/src/ProBuilder/components/Stage/index.tsx
+++ b/src/ProBuilder/components/Stage/index.tsx
@@ -13,14 +13,13 @@ import { useStyles } from './style';
export const Stage: FC<{
hideNavbar: boolean;
onCopy?: (children: any) => void;
- prefixCls?: string;
-}> = memo(({ hideNavbar, onCopy, prefixCls }) => {
+}> = memo(({ hideNavbar, onCopy }) => {
const isStarter = useStore((x) =>
x.componentAsset.componentStore((s) => x.componentAsset.isStarterMode(s)),
);
const isDesignMode = useStore(isDesignModeSelector);
- const { styles } = useStyles(prefixCls);
+ const { styles } = useStyles();
return (
{
- const prefix = `${prefixCls}-stage`;
+export const useStyles = createStyles(({ token, css, cx, prefixCls }) => {
+ const prefix = `${prefixCls}-${token.editorPrefix}-pro-builder-stage`;
return {
container: cx(
diff --git a/src/ProBuilder/container/App.tsx b/src/ProBuilder/container/App.tsx
index 93d9ff49..eff71c38 100644
--- a/src/ProBuilder/container/App.tsx
+++ b/src/ProBuilder/container/App.tsx
@@ -1,16 +1,13 @@
+import { useHotkeyManager } from '@/ProBuilder/hooks/useHotkeyManager';
import type { FC } from 'react';
import { CSSProperties, memo, ReactNode } from 'react';
import { shallow } from 'zustand/shallow';
-
-import NavBar from '../components/NavBar';
-
+import DefaultErrorBoundary from '../../ErrorBoundary';
import AssetEmpty from '../components/AssetEmpty';
import AssetStoreUpdater from '../components/AssetStoreUpdater';
import ConfigPanel from '../components/ConfigPanel';
+import NavBar from '../components/NavBar';
import Stage from '../components/Stage';
-
-import { useHotkeyManager } from '@/ProBuilder/hooks/useHotkeyManager';
-import DefaultErrorBoundary from '../../ErrorBoundary';
import { useStore } from '../store';
import { useStyle } from './style';
@@ -35,9 +32,8 @@ export interface ProBuilderAppProps {
export const ProBuilder: FC
= memo((props) => {
const { logo, hideNavbar = true, style, ErrorBoundary = DefaultErrorBoundary, onCopy } = props;
- const [prefixCls, exportConfig, componentAsset, width, panelExpand] = useStore(
+ const [exportConfig, componentAsset, width, panelExpand] = useStore(
(s) => [
- s.prefixCls,
s.exportConfig,
s.componentAsset,
s.editorAwareness.panelSize.width,
@@ -46,7 +42,7 @@ export const ProBuilder: FC = memo((props) => {
shallow,
);
- const { styles } = useStyle(prefixCls);
+ const { styles } = useStyle();
// 注册快捷键
useHotkeyManager();
@@ -64,7 +60,7 @@ export const ProBuilder: FC = memo((props) => {
>
{hideNavbar ? null :
diff --git a/src/ProBuilder/container/index.tsx b/src/ProBuilder/container/index.tsx
index 6c80a125..cdc53987 100644
--- a/src/ProBuilder/container/index.tsx
+++ b/src/ProBuilder/container/index.tsx
@@ -1,11 +1,9 @@
-import type { AppContainerProps } from '@ant-design/pro-editor';
-import { AppContainer } from '@ant-design/pro-editor';
+import { ConfigProvider } from '@ant-design/pro-editor';
import { App } from 'antd';
import type { FC } from 'react';
import { memo } from 'react';
import { HotkeysProvider } from 'react-hotkeys-hook';
import { DevtoolsOptions } from 'zustand/middleware';
-
import type { ProBuilderAppProps } from './App';
import Content from './App';
import Provider from './Provider';
@@ -14,23 +12,22 @@ import StoreUpdater from './StoreUpdater';
import { useStyle } from './style';
export type ProBuilderProps = ProBuilderAppProps &
- AppContainerProps &
StoreUpdaterProps & {
__EDITOR_STORE_DEVTOOLS__?: boolean | DevtoolsOptions;
};
export const ProBuilder: FC
= memo((props) => {
- const { themeMode, theme, style, __EDITOR_STORE_DEVTOOLS__, editorRef, ...res } = props;
+ const { style, __EDITOR_STORE_DEVTOOLS__, editorRef, ...res } = props;
const { styles } = useStyle();
return (
-
+
-
+
-
+
diff --git a/src/ProBuilder/container/style.ts b/src/ProBuilder/container/style.ts
index 34171e62..9afc7391 100644
--- a/src/ProBuilder/container/style.ts
+++ b/src/ProBuilder/container/style.ts
@@ -1,23 +1,26 @@
import { createStyles } from '../../theme';
-export const useStyle = createStyles(({ token, css, cx }, prefixCls) => ({
- app: css`
- height: 100%;
- `,
- main: cx(
- `${prefixCls}-main`,
- css`
- display: flex;
- flex-wrap: nowrap;
+export const useStyle = createStyles(({ token, css, cx, prefixCls }) => {
+ const prefix = `${prefixCls}-${token.editorPrefix}-pro-builder`;
+ return {
+ app: css`
height: 100%;
- position: relative;
- background-color: ${token.colorBgLayout};
`,
- ),
- left: cx(
- `${prefixCls}-left`,
- css`
- flex-grow: 1;
- `,
- ),
-}));
+ main: cx(
+ `${prefix}-main`,
+ css`
+ display: flex;
+ flex-wrap: nowrap;
+ height: 100%;
+ position: relative;
+ background-color: ${token.colorBgLayout};
+ `,
+ ),
+ left: cx(
+ `${prefix}-left`,
+ css`
+ flex-grow: 1;
+ `,
+ ),
+ };
+});
diff --git a/src/ProBuilder/store/slices/general.ts b/src/ProBuilder/store/slices/general.ts
index 6b61c2a5..333adf19 100644
--- a/src/ProBuilder/store/slices/general.ts
+++ b/src/ProBuilder/store/slices/general.ts
@@ -1,7 +1,6 @@
import { StackItem } from 'yjs/dist/src/utils/UndoManager';
import { StateCreator } from 'zustand';
-import getPrefixCls from '@/_util/getPrefixCls';
import { InternalProBuilderStore } from '../createStore';
// ======== state ======== //
@@ -17,14 +16,11 @@ export enum EditorMode {
}
export interface GeneralSliceState {
- /** 组件的类前缀 */
- prefixCls: string;
/** 用户角色 */
mode: EditorMode;
}
const initialGeneralState: GeneralSliceState = {
- prefixCls: getPrefixCls('editor'),
// 模式
mode: EditorMode.Develop,
};
diff --git a/src/ProBuilder/tests/__snapshots__/index.test.tsx.snap b/src/ProBuilder/tests/__snapshots__/index.test.tsx.snap
index 4c9613ed..25922bc1 100644
--- a/src/ProBuilder/tests/__snapshots__/index.test.tsx.snap
+++ b/src/ProBuilder/tests/__snapshots__/index.test.tsx.snap
@@ -30,16 +30,16 @@ exports[`ProBuilder > 没有传入 ComponentAsset 时，渲染为空状态 1`] =
没有传入 ComponentAsset 时，渲染为空状态 1`] =
未找到 ComponentAsset，请在 props 中传入 ComponentAsset
diff --git a/src/Snippet/index.tsx b/src/Snippet/index.tsx
index 499fb892..7a79dc85 100644
--- a/src/Snippet/index.tsx
+++ b/src/Snippet/index.tsx
@@ -4,7 +4,7 @@ import Spotlight from '@/components/Spotlight';
import { useThemeMode } from 'antd-style';
import { memo } from 'react';
import { DivProps } from 'react-layout-kit';
-import { getPrefixCls } from '..';
+import { ConfigProvider } from '..';
import { useStyles } from './style';
export interface SnippetProps extends DivProps {
@@ -46,27 +46,26 @@ const Snippet = memo
((props) => {
language = 'tsx',
children,
copyable = true,
- prefixCls: customPrefixCls,
type = 'ghost',
spotlight,
className,
...rest
} = props;
- const prefixCls = getPrefixCls('snippet', customPrefixCls);
const { isDarkMode } = useThemeMode();
const { styles, cx } = useStyles({
type,
- prefixCls,
});
return (
-
- {spotlight &&
- {symbol ? [symbol, children].join(' ') : children}
-
- {copyable &&
+
+
+ {spotlight &&
+ {symbol ? [symbol, children].join(' ') : children}
+
+ {copyable &&
+
);
});
diff --git a/src/Snippet/style.ts b/src/Snippet/style.ts
index 24447590..06df9981 100644
--- a/src/Snippet/style.ts
+++ b/src/Snippet/style.ts
@@ -1,14 +1,17 @@
-import { createStyles } from 'antd-style';
+import { createStyles } from '../theme';
-export const useStyles = createStyles(({ css, cx, token }, { type, prefixCls }) => {
+export const useStyles = createStyles(({ css, cx, token, prefixCls }, { type }) => {
const typeStylish = css`
background-color: ${type === 'block' ? token.colorFillTertiary : 'transparent'};
border: 1px solid ${type === 'block' ? 'transparent' : token.colorBorder};
`;
+ const BasePrefix = `${prefixCls}-${token?.editorPrefix}`;
+ const prefix = `${BasePrefix}-snippet`;
+
return {
container: cx(
- `${prefixCls}-container`,
+ `${prefix}-container`,
typeStylish,
css`
position: relative;
@@ -28,7 +31,7 @@ export const useStyles = createStyles(({ css, cx, token }, { type, prefixCls })
background-color: ${token.colorFillTertiary};
}
- .${prefixCls}-shiki {
+ .${prefix}-shiki {
position: relative;
overflow: hidden;
flex: 1;
diff --git a/src/SortableList/components/Item/index.tsx b/src/SortableList/components/Item/index.tsx
index fc9f33e6..95206bac 100644
--- a/src/SortableList/components/Item/index.tsx
+++ b/src/SortableList/components/Item/index.tsx
@@ -17,7 +17,7 @@ const Item = memo(
dragging,
disabled,
fadeIn,
- handle = true,
+ handle,
index,
listeners,
onRemove,
@@ -32,14 +32,13 @@ const Item = memo(
transform,
id,
className,
- prefixCls,
...props
},
ref,
) => {
const token = useToken();
- const { styles } = useStyle(prefixCls);
- const itemPrefixCls = classNames(`${prefixCls}-item`);
+ const { styles } = useStyle();
+ const itemPrefixCls = classNames(`${styles.tokenPrefixCls}-item`);
useEffect(() => {
if (!dragOverlay) {
diff --git a/src/SortableList/components/Item/style.ts b/src/SortableList/components/Item/style.ts
index 58375cfd..afbbc6b1 100644
--- a/src/SortableList/components/Item/style.ts
+++ b/src/SortableList/components/Item/style.ts
@@ -24,10 +24,11 @@ const fadeIn = keyframes`
}
`;
-export const useStyle = createStyles(({ css, cx, token }, prefixCls: string) => {
- const prefix = `${prefixCls}`;
-
+export const useStyle = createStyles(({ css, cx, token, prefixCls }) => {
+ const prefix = `${prefixCls}-${token.editorPrefix}-sortable-list`;
return {
+ // 透出给外层做前缀拼接
+ tokenPrefixCls: prefix,
item: cx(
`${prefixCls}-item`,
css`
diff --git a/src/SortableList/components/List/index.tsx b/src/SortableList/components/List/index.tsx
index 7ca31256..bace64c0 100644
--- a/src/SortableList/components/List/index.tsx
+++ b/src/SortableList/components/List/index.tsx
@@ -8,12 +8,11 @@ export interface Props {
style?: React.CSSProperties;
className?: string;
horizontal?: boolean;
- prefixCls?: string;
}
const List = forwardRef(
- ({ children, columns = 1, horizontal, style, className, prefixCls }: Props, ref) => {
- const { styles } = useStyle({ prefixCls, horizontal });
+ ({ children, columns = 1, horizontal, style, className }: Props, ref) => {
+ const { styles } = useStyle({ horizontal });
const listClassName = classNames(styles.container, className);
diff --git a/src/SortableList/components/List/style.ts b/src/SortableList/components/List/style.ts
index 9dee5945..f2b842bc 100644
--- a/src/SortableList/components/List/style.ts
+++ b/src/SortableList/components/List/style.ts
@@ -1,9 +1,11 @@
import { createStyles } from '../../../theme';
-export const useStyle = createStyles(({ css, cx }, { prefixCls, horizontal }) => {
+export const useStyle = createStyles(({ css, token, cx, prefixCls }, { horizontal }) => {
+ const prefix = `${prefixCls}-${token.editorPrefix}-sortable-list`;
+
return {
container: cx(
- `${prefixCls}-container`,
+ `${prefix}-container`,
css({
listStyle: 'none',
display: 'grid',
diff --git a/src/SortableList/components/SortableItem.tsx b/src/SortableList/components/SortableItem.tsx
index 2eb6401d..377f261d 100644
--- a/src/SortableList/components/SortableItem.tsx
+++ b/src/SortableList/components/SortableItem.tsx
@@ -8,12 +8,12 @@ export default function SortableItem({
index,
onRemove,
useDragOverlay = true,
+ handle = true,
getItemStyles,
renderItem,
renderContent,
item,
actions,
- prefixCls,
hideRemove = false,
}: SortableItemProps) {
const {
@@ -37,6 +37,7 @@ export default function SortableItem({
id={id}
// 数据
item={item}
+ handle={handle}
disabled={disabled}
dragging={isDragging}
sorting={isSorting}
@@ -61,7 +62,6 @@ export default function SortableItem({
data-index={index}
data-id={id}
dragOverlay={!useDragOverlay && isDragging}
- prefixCls={prefixCls}
{...attributes}
/>
);
diff --git a/src/SortableList/container/App.tsx b/src/SortableList/container/App.tsx
index 1ac4d2ae..b2ea50a3 100644
--- a/src/SortableList/container/App.tsx
+++ b/src/SortableList/container/App.tsx
@@ -20,7 +20,7 @@ import type { CSSProperties, FC } from 'react';
import { useMemo } from 'react';
import { Flexbox } from 'react-layout-kit';
import { shallow } from 'zustand/shallow';
-import { cx, getPrefixCls } from '../../theme';
+import { cx } from '../../theme';
import DragOverlay from '../features/DragOverlay';
import SortList from '../features/SortList';
import type { Store } from '../store';
@@ -47,20 +47,14 @@ export interface AppProps {
* 样式
*/
style?: CSSProperties;
- /**
- * 类名前缀
- */
- prefixCls?: string;
}
-const App: FC = ({ className, style, prefixCls: customPrefixCls }) => {
+const App: FC = ({ className, style }) => {
const { handleDragStart, handleDragCancel, handleDragEnd, keyManager, renderHeader } = useStore(
selector,
shallow,
);
- const prefixCls = getPrefixCls('sortable-list', customPrefixCls);
-
const sensors = useSensors(
useSensor(MouseSensor),
useSensor(TouchSensor),
@@ -69,13 +63,10 @@ const App: FC = ({ className, style, prefixCls: customPrefixCls }) =>
}),
);
- const overlay = useMemo(
- () => createPortal(
+
= ({ className, style, prefixCls: customPrefixCls }) =>
>
{renderHeader?.()}
-
diff --git a/src/SortableList/container/StoreUpdater.tsx b/src/SortableList/container/StoreUpdater.tsx
index 1f40ee2c..d7e22122 100644
--- a/src/SortableList/container/StoreUpdater.tsx
+++ b/src/SortableList/container/StoreUpdater.tsx
@@ -20,6 +20,7 @@ const StoreUpdater = forwardRef(
getItemStyles,
creatorButtonProps,
hideRemove,
+ handle,
}: StoreUpdaterProps,
ref,
) => {
@@ -55,6 +56,7 @@ const StoreUpdater = forwardRef(
useStoreUpdater('getItemStyles', getItemStyles);
useStoreUpdater('creatorButtonProps', creatorButtonProps);
useStoreUpdater('hideRemove', hideRemove);
+ useStoreUpdater('handle', handle);
// KeyManager 状态受控
useStoreUpdater('initialValues', initialValues, [], (state) => {
diff --git a/src/SortableList/demos/Basic.tsx b/src/SortableList/demos/Basic.tsx
index 18ee24eb..3cc9b8de 100644
--- a/src/SortableList/demos/Basic.tsx
+++ b/src/SortableList/demos/Basic.tsx
@@ -1,6 +1,6 @@
/**
* title: 默认使用
- * description: 默认内容区域渲染 `id`，可通过 `renderContent` 来自定义渲染内容。
+ * description: 默认支持列表渲染
* compact: true
*/
import { SortableList } from '@ant-design/pro-editor';
diff --git a/src/SortableList/demos/_ItemRender.tsx b/src/SortableList/demos/_ItemRender.tsx
index d36c9554..2efe014a 100644
--- a/src/SortableList/demos/_ItemRender.tsx
+++ b/src/SortableList/demos/_ItemRender.tsx
@@ -1,5 +1,4 @@
-import { useSortableList } from '@ant-design/pro-editor';
-import { Input, Select } from 'antd';
+import { Input, Select, useSortableList } from '@ant-design/pro-editor';
import { memo, useState } from 'react';
import { Flexbox } from 'react-layout-kit';
import { ItemRenderProps, fieldStyle, tableColumnValueOptions } from './data';
@@ -22,10 +21,11 @@ const ItemRender = memo(({ item, index, compact = false }: ItemRenderProps) => {
if (index + 1 === value.length) {
const id = randomIndex();
instance.addItem({ id, title: `new-${randomIndex()}` });
- } else {
+ }
+ setTimeout(() => {
const nextNodeEl = document.getElementById(`index-${index + 1}`);
nextNodeEl?.focus();
- }
+ }, 0);
};
return (
@@ -43,8 +43,8 @@ const ItemRender = memo(({ item, index, compact = false }: ItemRenderProps) => {
if (changed) updateTitle();
handleNextFocus();
}}
- onChange={(e) => {
- setTitle(e.target.value);
+ onChange={(value) => {
+ setTitle(value);
setChanged(true);
}}
/>
diff --git a/src/SortableList/demos/creatorButtonProps.tsx b/src/SortableList/demos/creatorButtonProps.tsx
index d0a05205..ac310424 100644
--- a/src/SortableList/demos/creatorButtonProps.tsx
+++ b/src/SortableList/demos/creatorButtonProps.tsx
@@ -1,6 +1,6 @@
/**
* title: 创建按钮
- * description: 通过 `creatorButtonProps` 可以自定义创建按钮，record 为创建的数据，必须包含 id 字段
+ * description: 通过 `creatorButtonProps` 可以自定义创建按钮，record 为创建的数据
* compact: true
*/
import { SortableList } from '@ant-design/pro-editor';
diff --git a/src/SortableList/demos/handle.tsx b/src/SortableList/demos/handle.tsx
new file mode 100644
index 00000000..90f5c604
--- /dev/null
+++ b/src/SortableList/demos/handle.tsx
@@ -0,0 +1,21 @@
+/**
+ * title: 隐藏拖拽按钮
+ * description: 你可以设置 `handle` 属性来控制拖拽按钮的显隐
+ * compact: true
+ */
+import { SortableList } from '@ant-design/pro-editor';
+import { useTheme } from 'antd-style';
+import { Flexbox } from 'react-layout-kit';
+
+const list = ['hello', 'world'];
+
+const Demo = () => {
+ const token = useTheme();
+ return (
+
+
+ );
+};
+
+export default Demo;
diff --git a/src/SortableList/demos/hideRemove.tsx b/src/SortableList/demos/hideRemove.tsx
new file mode 100644
index 00000000..84ef1657
--- /dev/null
+++ b/src/SortableList/demos/hideRemove.tsx
@@ -0,0 +1,21 @@
+/**
+ * title: 隐藏删除按钮
+ * description: 你可以设置 `hideRemove` 属性来隐藏默认的删除按钮
+ * compact: true
+ */
+import { SortableList } from '@ant-design/pro-editor';
+import { useTheme } from 'antd-style';
+import { Flexbox } from 'react-layout-kit';
+
+const list = ['hello', 'world'];
+
+const Demo = () => {
+ const token = useTheme();
+ return (
+
+
+ );
+};
+
+export default Demo;
diff --git a/src/SortableList/features/DragOverlay.tsx b/src/SortableList/features/DragOverlay.tsx
index fab0ea6d..68c7cbdc 100644
--- a/src/SortableList/features/DragOverlay.tsx
+++ b/src/SortableList/features/DragOverlay.tsx
@@ -1,5 +1,4 @@
import { defaultDropAnimation, DragOverlay } from '@dnd-kit/core';
-import type { FC } from 'react';
import { memo } from 'react';
import { shallow } from 'zustand/shallow';
import { Item } from '../components';
@@ -13,18 +12,15 @@ import { getIndexOfActiveItem } from '../utils';
const selector = (s: Store) => ({
activeId: s.activeId,
+ handle: s.handle,
hideRemove: s.hideRemove,
renderItem: s.renderItem,
renderContent: s.renderContent,
getItemStyles: s.getItemStyles,
});
-interface OverlayProps {
- prefixCls: string;
-}
-
-const Overlay: FC = ({ prefixCls }) => {
- const { activeId, renderItem, hideRemove, getItemStyles, renderContent } = useStore(
+const Overlay = () => {
+ const { activeId, renderItem, handle, hideRemove, getItemStyles, renderContent } = useStore(
selector,
shallow,
);
@@ -48,7 +44,6 @@ const Overlay: FC = ({ prefixCls }) => {
dragOverlay
index={activeIndex}
item={items[activeIndex]}
- prefixCls={prefixCls}
renderItem={renderItem}
renderContent={renderContent}
style={getItemStyles({
@@ -60,6 +55,7 @@ const Overlay: FC = ({ prefixCls }) => {
isDragOverlay: true,
})}
hideRemove={hideRemove}
+ handle={handle}
/>
) : null}
diff --git a/src/SortableList/features/SortList.tsx b/src/SortableList/features/SortList.tsx
index 5936dff9..03e39317 100644
--- a/src/SortableList/features/SortList.tsx
+++ b/src/SortableList/features/SortList.tsx
@@ -1,6 +1,5 @@
import { Empty } from 'antd';
import isEqual from 'lodash.isequal';
-import type { FC } from 'react';
import { memo } from 'react';
import { shallow } from 'zustand/shallow';
import { List, SortableItem } from '../components';
@@ -8,7 +7,7 @@ import type { Store } from '../store';
import { useStore } from '../store';
import { PlusOutlined } from '@ant-design/icons';
-import { Button } from 'antd';
+import { Button } from '../../antd';
import { useStyle } from '../style';
@@ -20,15 +19,12 @@ const selector = (s: Store) => ({
keyManager: s.keyManager,
actions: s.actions,
hideRemove: s.hideRemove,
+ handle: s.handle,
creatorButtonProps: s.creatorButtonProps,
dispatchListData: s.dispatchListData,
});
-interface SortableListProps {
- prefixCls: string;
-}
-
-const SortableList: FC = ({ prefixCls }) => {
+const SortableList = () => {
const {
dispatchListData,
renderItem,
@@ -36,20 +32,27 @@ const SortableList: FC = ({ prefixCls }) => {
renderEmpty,
creatorButtonProps = false,
hideRemove,
+ handle,
keyManager,
getItemStyles,
actions,
} = useStore(selector, shallow);
- const { styles } = useStyle(prefixCls);
+ const { styles } = useStyle();
const items = useStore((s) => s.value, isEqual);
- const { record, creatorButtonText = '添加一列', position = 'bottom' } = creatorButtonProps || {};
+ const {
+ record,
+ creatorButtonText = '添加一列',
+ position = 'bottom',
+ style,
+ } = creatorButtonProps || {};
const CreateButton = ({ empty = false }) => {
return (
{
dispatchListData({
@@ -75,7 +78,7 @@ const SortableList: FC = ({ prefixCls }) => {
) : (
<>
{creatorButtonProps !== false && position === 'top' ?
+
{items.map((item, index) => {
return (
= ({ prefixCls }) => {
index={index}
actions={actions}
hideRemove={hideRemove}
+ handle={handle}
renderItem={renderItem}
renderContent={renderContent}
getItemStyles={getItemStyles}
onRemove={() => dispatchListData({ type: 'removeItem', index })}
useDragOverlay={true}
- prefixCls={prefixCls}
/>
);
})}
diff --git a/src/SortableList/index.en-US.md b/src/SortableList/index.en-US.md
index f0fbafd9..8104019b 100644
--- a/src/SortableList/index.en-US.md
+++ b/src/SortableList/index.en-US.md
@@ -16,7 +16,16 @@ Provide basic underlying encapsulation for sortable list scenarios, which can be
## How to use
->` | 对外部暴露方法 |
| hideRemove | `boolean` | 是否隐藏删除按钮，默认为 false |
+| handle | `boolean` | 是否显示拖拽按钮，默认为 true |
| creatorButtonProps | `CreatorButtonProps\|false` | 新建对象相关属性 |
| actions | `(item: T, index: number) => ReactNode[]` \| `React.ReactNode[]` | 除列表自带操作之外的其他操作自渲染 |
### CreatorButtonProps 创建按钮属性
-| 属性名 | 类型 | 描述 |
-| ----------------- | ---------------------- | -------------------- |
-| position | `'bottom'\|'top'` | 按钮位置，默认在下方 |
-| record | `(index: number) => T` | 生成初始值逻辑 |
-| creatorButtonText | `string` | 新增一行按钮文案 |
+| 属性名 | 类型 | 描述 |
+| ----------------- | ---------------------- | -------------------------------------------------------------------- |
+| position | `'bottom'\|'top'` | 按钮位置，默认在下方 |
+| record | `(index: number) => T` | 生成初始值逻辑 |
+| creatorButtonText | `string` | 新增一行按钮文案 |
+| style | CSSProperties | 按钮的样式设置，可以设置按钮是否显示，如 `style: { display: 'none'}` |
### GetItemStylesArgs
diff --git a/src/SortableList/store/initialState.ts b/src/SortableList/store/initialState.ts
index 576a0a90..25d710f7 100644
--- a/src/SortableList/store/initialState.ts
+++ b/src/SortableList/store/initialState.ts
@@ -5,6 +5,7 @@ export const initialState: SortableListState = {
value: [],
keyManager: [],
hideRemove: false,
+ handle: true,
onChange: undefined,
renderItem: undefined,
actions: [],
diff --git a/src/SortableList/style.ts b/src/SortableList/style.ts
index 67f32bc9..9a085413 100644
--- a/src/SortableList/style.ts
+++ b/src/SortableList/style.ts
@@ -1,12 +1,14 @@
import { createStyles, getStudioStylish } from '../theme';
-export const useStyle = createStyles((props, prefixCls: string) => {
- const { token, css, cx } = props;
+export const useStyle = createStyles((props) => {
+ const { token, css, cx, prefixCls } = props;
const common = getStudioStylish(props);
+ const antCls = prefixCls;
+
return {
btnAdd: cx(
- `${prefixCls}-btn-add`,
+ `${antCls}-btn-add`,
css`
height: 24px;
padding-block: 2px;
diff --git a/src/SortableList/type/component.ts b/src/SortableList/type/component.ts
index e925453a..ffdeb3c4 100644
--- a/src/SortableList/type/component.ts
+++ b/src/SortableList/type/component.ts
@@ -22,7 +22,6 @@ export interface BaseItemProps
transition?: string | null;
id: UniqueIdentifier;
onRemove?: () => void;
- prefixCls?: string;
}
export type RenderActionProps =
@@ -32,7 +31,7 @@ export type RenderActionProps =
export interface SortableItemProps
extends Pick<
StoreUpdaterProps,
- 'renderItem' | 'renderContent' | 'actions' | 'getItemStyles' | 'hideRemove'
+ 'renderItem' | 'renderContent' | 'actions' | 'getItemStyles' | 'hideRemove' | 'handle'
> {
disabled?: boolean;
id: UniqueIdentifier;
@@ -40,7 +39,6 @@ export interface SortableItemProps
item: T;
useDragOverlay?: boolean;
onRemove?: (index: number) => void;
- prefixCls?: string;
}
export type RenderContent = (item: T, index: number) => React.ReactNode;
@@ -62,6 +60,10 @@ export interface CreatorButtonProps {
* 新增一行按钮文案
*/
creatorButtonText?: string;
+ /**
+ * 按钮的样式设置，可以设置按钮是否显示，比如 style: {display: 'none'}
+ */
+ style?: CSSProperties;
}
export type RenderItem = (
diff --git a/src/SortableList/type/store.ts b/src/SortableList/type/store.ts
index aa7de5d4..34aa8cae 100644
--- a/src/SortableList/type/store.ts
+++ b/src/SortableList/type/store.ts
@@ -66,6 +66,10 @@ export interface SortableListState {
* 隐藏
*/
hideRemove?: boolean;
+ /**
+ * 是否显示拖拽手柄
+ */
+ handle?: boolean;
}
/**
@@ -127,6 +131,10 @@ export interface StoreUpdaterProps {
* 是否隐藏删除按钮，默认为 false
*/
hideRemove?: boolean;
+ /**
+ * 是否显示拖拽手柄，默认 true
+ */
+ handle?: boolean;
/**
* 自定义排序容器样式
*/
diff --git a/src/SortableTree/components/TreeItem/index.tsx b/src/SortableTree/components/TreeItem/index.tsx
index 2cdd073e..7abb9535 100644
--- a/src/SortableTree/components/TreeItem/index.tsx
+++ b/src/SortableTree/components/TreeItem/index.tsx
@@ -14,23 +14,28 @@ import { FlattenNode } from '../../types';
import { iOS } from '../../utils/utils';
const useStyles = createStyles(
- ({ css, cx }, { prefix, collapsed }: { prefix: string; collapsed: boolean }) => {
+ ({ css, cx, prefixCls, token }, { collapsed }: { collapsed: boolean }) => {
+ const componentPrefix = `${prefixCls}-${token.editorPrefix}-sortable-tree`;
+ const nodePrefix = `${componentPrefix}-node`;
return {
+ // 透出给组件层面拼接使用
+ componentPrefix,
container: cx(
- prefix,
- `${prefix}-indicator`,
+ nodePrefix,
+ `${nodePrefix}-indicator`,
css`
margin-bottom: 4px;
+ padding-left: 12px;
&:hover {
- .${prefix}-handle, .${prefix}-remove {
+ .${nodePrefix}-handle, .${nodePrefix}-remove {
opacity: 1;
}
}
`,
),
deleteAction: cx(
- `${prefix}-remove`,
+ `${nodePrefix}-remove`,
css`
opacity: 0;
`,
@@ -42,7 +47,7 @@ const useStyles = createStyles(
}
`,
extra: cx(
- `${prefix}-extra`,
+ `${nodePrefix}-extra`,
css`
margin-bottom: 8px;
`,
@@ -110,9 +115,9 @@ export interface TreeItemProps extends Omit, 'id'>
*/
hideRemove?: boolean;
/**
- * @title 样式类名前缀
+ * 虚拟滚动添加样式
*/
- prefixCls: string;
+ virtualStyle?: CSSProperties;
}
const animateLayoutChanges: AnimateLayoutChanges = ({ isSorting, wasDragging }) =>
@@ -133,11 +138,11 @@ const TreeItem: FC = memo(
showExtra,
hideRemove,
node,
- prefixCls,
+ virtualStyle,
...props
}) => {
- const prefix = `${prefixCls}-node`;
- const { styles, cx } = useStyles({ prefix, collapsed });
+ const { styles, cx } = useStyles({ collapsed });
+ const nodePrefix = `${styles.componentPrefix}-node`;
const [
indentationWidth,
@@ -162,7 +167,7 @@ const TreeItem: FC = memo(
const extraPanelVisible = showExtra && !clone;
- const containerRef = useRef(document.getElementsByClassName(prefixCls).item(0));
+ const containerRef = useRef(document.getElementsByClassName(styles.componentPrefix).item(0));
const {
isDragging: ghost,
@@ -188,18 +193,19 @@ const TreeItem: FC = memo(
ref={setDroppableNodeRef}
className={cx(
styles.container,
- clone && `${prefix}-clone`,
- ghost && `${prefix}-ghost`,
- selected && !clone && `${prefix}-selected`,
+ clone && `${nodePrefix}-clone`,
+ ghost && `${nodePrefix}-ghost`,
+ selected && !clone && `${nodePrefix}-selected`,
disableSelection && 'disableSelection',
)}
style={
{
pointerEvents: disableInteraction ? 'none' : undefined,
- '--spacing': `${indentationWidth * depth}px`,
+ '--spacing': `${indentationWidth * depth + (disableDrag ? 0 : 13)}px`,
transform: CSS.Translate.toString(transform),
transition,
+ ...virtualStyle,
} as CSSProperties
}
onClick={(e) => {
@@ -207,12 +213,12 @@ const TreeItem: FC = memo(
}}
{...props}
>
-
+
{disableDrag ? null : (
= memo(
className={styles.collapseAction}
/>
)}
- {Content ?
+ {Content ?
{!hideRemove && !clone && onRemove && (
{childCount}
+ {childCount}
) : null}
{extraPanelVisible ? (
diff --git a/src/SortableTree/container/App.tsx b/src/SortableTree/container/App.tsx
index d77b7d73..871ca986 100644
--- a/src/SortableTree/container/App.tsx
+++ b/src/SortableTree/container/App.tsx
@@ -20,7 +20,6 @@ import type { SensorContext } from '../types';
import { dataFlattenSelector, sortedIdsSelector, useStore } from '../store';
-import { getPrefixCls } from '@/theme';
import DragOverlay from '../features/DragOverlay';
import SortableList from '../features/TreeList';
@@ -42,98 +41,90 @@ export interface AppProps {
* 样式
*/
style?: CSSProperties;
- /**
- * 类名前缀
- */
- prefixCls?: string;
}
-const App: FC
= memo(
- ({ className, rootClassName, style, prefixCls: customPrefixCls }) => {
- const [
- offsetLeft,
- handleDragStart,
- handleDragCancel,
- handleDragEnd,
- handleDragMove,
- indentationWidth,
- handleDragOver,
- ] = useStore(
- (s) => [
- s.offsetLeft,
- s.handleDragStart,
- s.handleDragCancel,
- s.handleDragEnd,
- s.handleDragMove,
- s.indentationWidth,
- s.handleDragOver,
- ],
- shallow,
- );
-
- const prefixCls = getPrefixCls('sortable-tree', customPrefixCls);
-
- const { styles, cx } = useStyles(prefixCls);
- const flattenData = useStore(dataFlattenSelector, isEqual);
-
- const sensorContext: SensorContext = useRef({
+const App: FC = memo(({ className, rootClassName, style }) => {
+ const [
+ offsetLeft,
+ handleDragStart,
+ handleDragCancel,
+ handleDragEnd,
+ handleDragMove,
+ indentationWidth,
+ handleDragOver,
+ ] = useStore(
+ (s) => [
+ s.offsetLeft,
+ s.handleDragStart,
+ s.handleDragCancel,
+ s.handleDragEnd,
+ s.handleDragMove,
+ s.indentationWidth,
+ s.handleDragOver,
+ ],
+ shallow,
+ );
+
+ const { styles, cx } = useStyles();
+ const flattenData = useStore(dataFlattenSelector, isEqual);
+
+ const sensorContext: SensorContext = useRef({
+ items: flattenData,
+ offset: offsetLeft,
+ });
+
+ useEffect(() => {
+ sensorContext.current = {
items: flattenData,
offset: offsetLeft,
- });
-
- useEffect(() => {
- sensorContext.current = {
- items: flattenData,
- offset: offsetLeft,
- };
- }, [flattenData, offsetLeft]);
-
- const [coordinateGetter] = useState(() =>
- sortableTreeKeyboardCoordinates(sensorContext, true, indentationWidth),
- );
-
- const sensors = useSensors(
- useSensor(PointerSensor),
- useSensor(KeyboardSensor, {
- coordinateGetter,
- }),
- );
-
- const sortedIds = useStore(sortedIdsSelector, isEqual);
-
- const overlay = useMemo(
- () =>
- createPortal(
-
- ,
- document.body,
- ),
- [],
- );
-
- return (
-
-
-
- <>
-
-
-
- );
- },
-);
+ };
+ }, [flattenData, offsetLeft]);
+
+ const [coordinateGetter] = useState(() =>
+ sortableTreeKeyboardCoordinates(sensorContext, true, indentationWidth),
+ );
+
+ const sensors = useSensors(
+ useSensor(PointerSensor),
+ useSensor(KeyboardSensor, {
+ coordinateGetter,
+ }),
+ );
+
+ const sortedIds = useStore(sortedIdsSelector, isEqual);
+
+ const overlay = useMemo(
+ () =>
+ createPortal(
+
+ ,
+ document.body,
+ ),
+ [],
+ );
+
+ return (
+
+
+
+ <>
+
+
+
+ );
+});
export default App;
diff --git a/src/SortableTree/container/StoreUpdater.tsx b/src/SortableTree/container/StoreUpdater.tsx
index aa5cd2bc..03aa5a04 100644
--- a/src/SortableTree/container/StoreUpdater.tsx
+++ b/src/SortableTree/container/StoreUpdater.tsx
@@ -6,7 +6,7 @@ import { SortableTreeInstance, useSortableTree } from '../hooks/useSortableTree'
import type { ControlledState, OnTreeDataChange } from '../store';
import { useStoreApi } from '../store';
-import type { FlattenNode, Projected, RenderNodeProps, TreeData } from '../types';
+import type { FlattenNode, Projected, RenderNodeProps, TreeData, VirtualConfig } from '../types';
export interface StoreUpdaterProps extends ControlledState {
/**
@@ -46,6 +46,11 @@ export interface StoreUpdaterProps extends ControlledState {
targetNode: FlattenNode;
projected: Projected;
}) => boolean;
+
+ /**
+ * 开启虚拟滚动
+ */
+ virtual?: VirtualConfig;
}
const StoreUpdater = ({
@@ -61,6 +66,7 @@ const StoreUpdater = ({
indentationWidth,
disableDrag,
sortableRule,
+ virtual,
}: StoreUpdaterProps) => {
const storeApi = useStoreApi();
@@ -75,6 +81,7 @@ const StoreUpdater = ({
useStoreUpdater('indentationWidth', indentationWidth);
useStoreUpdater('hideAdd', hideAdd);
useStoreUpdater('hideRemove', hideRemove);
+ useStoreUpdater('virtual', virtual);
useStoreUpdater('disableDrag', disableDrag);
useStoreUpdater('sortableRule', sortableRule);
diff --git a/src/SortableTree/demos/controlled.tsx b/src/SortableTree/demos/controlled.tsx
index 052190d1..2d79cd21 100644
--- a/src/SortableTree/demos/controlled.tsx
+++ b/src/SortableTree/demos/controlled.tsx
@@ -2,10 +2,9 @@
* title: 受控模式
*/
import type { TreeData } from '@ant-design/pro-editor';
-import { SortableTree, useSortableTree } from '@ant-design/pro-editor';
+import { Input, SortableTree, useSortableTree } from '@ant-design/pro-editor';
import { useState } from 'react';
-import { Input } from 'antd';
import { initialData } from './data';
interface DataContent {
@@ -18,8 +17,8 @@ const Content = ({ value, id }) => {
return (
>(initialData);
return (
-
+
treeData={treeData}
renderContent={(item) => >(menuData);
return (
-
+
treeData={treeData}
onTreeDataChange={(data) => {
diff --git a/src/SortableTree/demos/virtual.tsx b/src/SortableTree/demos/virtual.tsx
new file mode 100644
index 00000000..e33c5e33
--- /dev/null
+++ b/src/SortableTree/demos/virtual.tsx
@@ -0,0 +1,34 @@
+/**
+ * title: 虚拟滚动
+ * description: 数据量较大时，使用 virtual 配置虚拟滚动
+ */
+import { SortableTree } from '@ant-design/pro-editor';
+import { treeData } from './data/virtual';
+
+interface DataContent {
+ name: string;
+ visible: boolean;
+ isLeaf: boolean;
+}
+
+const LayerManager = () => {
+ return (
+
+
+ treeData={treeData as any}
+ renderContent={(item) => {item.id}
}
+ SHOW_STORE_IN_DEVTOOLS
+ virtual={{
+ // 滚动容器高度，必填
+ height: 480,
+ // 指定列表项高度，默认为 36，可选
+ // itemHeight: (index: number) => number
+ }}
+ onTreeDataChange={(data) => {
+ console.log('变更：', data);
+ }}
+ />
+ = ({ prefixCls }) => {
+const Overlay = () => {
const [activeId, treeData, indentationWidth, getActiveNode] = useStore(
(s) => [s.activeId, s.treeData, s.indentationWidth, s.getActiveNode],
shallow,
@@ -55,13 +50,9 @@ const Overlay: FC = ({ prefixCls }) => {
const activeItem = getActiveNode();
return (
-
+
{activeId && activeItem ? (
(({ prefixCls, node }) => {
+const TreeNode = memo(({ node, virtualStyle }) => {
const [activeId, indentationWidth, dispatchTreeData, hideRemove] = useStore(
(s) => [s.activeId, s.indentationWidth, s.dispatchTreeData, s.hideRemove],
shallow,
@@ -31,7 +32,6 @@ const TreeNode = memo(({ prefixCls, node }) => {
return (
(({ prefixCls, node }) => {
children.length ? () => dispatchTreeData({ type: 'toggleCollapse', id }) : undefined
}
node={node}
+ virtualStyle={virtualStyle}
onRemove={onRemove}
/>
);
}, isEqual);
-const useStyle = createStyles((props, prefixCls: string) => {
- const { token, css } = props;
+const useStyle = createStyles((props) => {
+ const { token, css, prefixCls } = props;
const common = getStudioStylish(props);
+ const antCls = prefixCls;
+
return {
btnAdd: cx(
- 'studio-btn-solid',
- `${prefixCls}-btn-add`,
+ `${antCls}-btn-add`,
css`
height: 24px;
padding-block: 2px;
@@ -67,23 +69,38 @@ const useStyle = createStyles((props, prefixCls: string) => {
};
});
-interface TreeListProps {
- prefixCls: string;
-}
-
-const TreeList = memo(({ prefixCls }) => {
- const [dispatchTreeData, hideAdd] = useStore(
- (s) => [s.dispatchTreeData, s.hideAdd, s.hideRemove],
+const TreeList = memo(() => {
+ const [dispatchTreeData, hideAdd, virtual] = useStore(
+ (s) => [s.dispatchTreeData, s.hideAdd, s.virtual],
shallow,
);
const flattenData: FlattenNode[] = useStore(dataFlattenSelector, isEqual);
- const { styles } = useStyle(prefixCls);
+ const { styles } = useStyle();
+
+ const { height = 800, itemHeight = () => 36, width = '100%' } = virtual || {};
return (
<>
- {flattenData.map((node) => (
-
+ {({ index, data, style }) => {
+ const node = data[index];
+ return
+ ) : (
+ <>
+ {flattenData.map((node) => (
+ extends PublicSortableTreeStore {
getFlattenData: () => FlattenNode[];
}
```
-
-[//]: # '### 多选方案'
-[//]: #
-
-[//]: # "` | 树的数据 |
-| defaultTreeData | `TreeData` | 默认数据 |
-| onTreeDataChange | `(treeData: TreeData,event: TreeDataDispatchPayload) => void` | 数据变更回调 |
-| renderContent | `(node: FlattenNode) => JSX.Element` | 渲染内容 |
-| renderExtra | `(node: FlattenNode) => JSX.Element` | 渲染额外项 |
-| ref | `MutableRefObject>` | 对外部暴露方法 |
-| sortableRule | `data: { activeNode: FlattenNode; targetNode: FlattenNode; projected: Projected; }) => boolean` | 控制拖动排序的规则函数 |
+| 名称 | 类型 | 描述 |
+| ------------------- | ----------------------------------------------------------------------------------------------------- | -------------------------- |
+| hideAdd | `boolean` | 隐藏默认的添加按钮 |
+| hideRemove | `boolean` | 隐藏默认的删除按钮 |
+| disableDrag | `boolean` | 禁用拖拽 |
+| indentationWidth | `number` | 缩进宽度 |
+| onSelectedIdsChange | `(selectedIds: UniqueIdentifier[]) => void` | 选中 ID 变更回调 |
+| treeData | `TreeData` | 树的数据 |
+| defaultTreeData | `TreeData` | 默认数据 |
+| onTreeDataChange | `(treeData: TreeData,event: TreeDataDispatchPayload) => void` | 数据变更回调 |
+| renderContent | `(node: FlattenNode) => JSX.Element` | 渲染内容 |
+| renderExtra | `(node: FlattenNode) => JSX.Element` | 渲染额外项 |
+| ref | `MutableRefObject>` | 对外部暴露方法 |
+| sortableRule | `data: { activeNode: FlattenNode; targetNode: FlattenNode; projected: Projected; }) => boolean` | 控制拖动排序的规则函数 |
+| virtual | `VirtualConfig` \| `false` | 虚拟滚动配置，默认为 false |
+
+## VirtualConfig
+
+虚拟滚动配置
+
+| 名称 | 类型 | 描述 |
+| ---------- | --------------------------- | --------------------------- |
+| height | `number` | 虚拟滚动容器高度，必填 |
+| width | `number`\| `string` | 虚拟滚动容器宽度，默认 100% |
+| itemHeight | `(index: number) => number` | 列表项高度，默认为 36 |
## TreeNode
diff --git a/src/SortableTree/store/initialState.ts b/src/SortableTree/store/initialState.ts
index 89226b35..52ab4bda 100644
--- a/src/SortableTree/store/initialState.ts
+++ b/src/SortableTree/store/initialState.ts
@@ -1,4 +1,11 @@
-import type { FlattenNode, Projected, RenderNodeProps, TreeData, UniqueIdentifier } from '../types';
+import type {
+ FlattenNode,
+ Projected,
+ RenderNodeProps,
+ TreeData,
+ UniqueIdentifier,
+ VirtualConfig,
+} from '../types';
import { TreeDataDispatchPayload } from './treeDataReducer';
export type OnTreeDataChange = (
@@ -89,6 +96,10 @@ export interface State extends ControlledState {
targetNode: FlattenNode;
projected: Projected;
}) => boolean;
+ /**
+ * 虚拟滚动配置
+ */
+ virtual?: VirtualConfig;
}
export const initialDragState: Pick<
@@ -108,6 +119,7 @@ export const initialState: State = {
renderContent: undefined,
renderExtra: undefined,
hideAdd: false,
+ virtual: false,
disableDrag: false,
hideRemove: false,
...initialDragState,
diff --git a/src/SortableTree/style.ts b/src/SortableTree/style.ts
index 136f0f58..dfcf951b 100644
--- a/src/SortableTree/style.ts
+++ b/src/SortableTree/style.ts
@@ -1,7 +1,7 @@
import { createStyles } from '../theme';
-export const useStyles = createStyles(({ css, token }, prefixCls) => {
- const prefix = `${prefixCls}`;
+export const useStyles = createStyles(({ css, token, prefixCls }) => {
+ const prefix = `${prefixCls}-${token.editorPrefix}-sortable-tree`;
return css`
& .${prefix}-node {
diff --git a/src/SortableTree/types/custom.ts b/src/SortableTree/types/custom.ts
index 6de2f23b..da115e21 100644
--- a/src/SortableTree/types/custom.ts
+++ b/src/SortableTree/types/custom.ts
@@ -2,3 +2,20 @@ import { FC } from 'react';
import type { FlattenNode } from './data';
export type RenderNodeProps = (node: FlattenNode) => ReturnType;
+
+export type VirtualConfig =
+ | {
+ /**
+ * @title 虚拟滚动的高度
+ */
+ height: number;
+ /**
+ * @title 虚拟滚动的宽度
+ */
+ width?: number;
+ /**
+ * @title 虚拟滚动的行高
+ */
+ itemHeight?: (index: number) => number;
+ }
+ | false;
diff --git a/src/TipGuide/index.en-US.md b/src/TipGuide/index.en-US.md
index 0cbe6198..32661970 100644
--- a/src/TipGuide/index.en-US.md
+++ b/src/TipGuide/index.en-US.md
@@ -13,8 +13,6 @@ Guide users' attention in simple scenarios.
### Basic
-Note that `guideKey` is required and must be unique.
-
= ({
title,
offsetY,
maxWidth = 300,
- prefixCls: customPrefixCls,
className,
style,
defaultOpen = true,
@@ -72,9 +67,8 @@ const TipGuide: FC = ({
onOpenChange = () => {},
footerRender,
}) => {
- const prefixCls = getPrefixCls('tip-guide', customPrefixCls);
const token = useToken();
- const { styles, cx } = useStyle(prefixCls);
+ const { styles } = useStyle();
const [open, setOpen] = useMergedState(defaultOpen, {
value: outOpen,
onChange: onOpenChange,
@@ -124,7 +118,7 @@ const TipGuide: FC = ({
+
{title}
= ({
}
color={'blue'}
overlayStyle={{ maxWidth, zIndex: 1000, ...style }}
- overlayClassName={cx(`${prefixCls}-guide`, className)}
+ overlayClassName={`${styles.guide} ${className}`}
placement={placement}
arrow={{ pointAtCenter: true }}
trigger="hover"
diff --git a/src/TipGuide/index.zh-CN.md b/src/TipGuide/index.zh-CN.md
index 6053548c..b9618cd9 100644
--- a/src/TipGuide/index.zh-CN.md
+++ b/src/TipGuide/index.zh-CN.md
@@ -14,8 +14,6 @@ group: 基础组件
### 基础
-注意 `guideKey` 必填，且唯一。
-
= ({
onFocus,
onBlur,
onPressEnter,
- ...props
+ ...rest
}) => {
const { styles, cx } = useStyles();
@@ -65,8 +65,8 @@ export const InputNumber: FC = ({
return (
<_InputNumber
- size={'small'}
- {...props}
+ size={'middle'}
+ {...rest}
value={input}
onFocus={(event) => {
onFocus?.(event);
diff --git a/src/antd/Segmented.tsx b/src/antd/Segmented.tsx
index 5e6591bb..c0065200 100644
--- a/src/antd/Segmented.tsx
+++ b/src/antd/Segmented.tsx
@@ -6,10 +6,10 @@ import { ConfigProvider } from '../ConfigProvider';
import { createStyles } from '../theme';
const useStyles = createStyles(
- ({ token, css }) => css`
+ ({ token, css, prefixCls }) => css`
padding: 4px;
- .studio-segmented-item {
+ .${prefixCls}-segmented-item {
margin-right: 4px;
color: ${token.colorTextTertiary};
border-radius: 2px;
@@ -23,7 +23,7 @@ const useStyles = createStyles(
}
}
- .studio-segmented-item-selected {
+ .${prefixCls}-segmented-item-selected {
color: ${token.colorText};
&:hover {
@@ -31,7 +31,7 @@ const useStyles = createStyles(
}
}
- .studio-segmented-item-label {
+ .${prefixCls}-segmented-item-label {
min-height: auto;
padding: 2px 7px;
line-height: unset;
diff --git a/src/antd/index.en-US.md b/src/antd/index.en-US.md
index 233431a6..9d15c5ed 100644
--- a/src/antd/index.en-US.md
+++ b/src/antd/index.en-US.md
@@ -15,7 +15,8 @@ For the editing scenario, the basic styles and interactive feedback have been re
For input box controls, the timing of data changes has been optimized, and updates will only be triggered when the input box loses focus or the Enter key is pressed;
-({
+ customToken: {
+ editorPrefix: 'editor',
+ },
+});
+
export {
- ThemeProvider,
createGlobalStyle,
- createStyles,
css,
cx,
injectGlobal,
@@ -28,3 +30,4 @@ export {
type AntdToken,
} from 'antd-style';
export * from './themes';
+export { ThemeProvider, createStyles };
diff --git a/src/types/field.ts b/src/types/field.ts
deleted file mode 100644
index 3329e887..00000000
--- a/src/types/field.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * 字段类型
- */
-export enum APIFieldType {
- integer = 'integer',
- number = 'number',
- bool = 'bool',
- string = 'string',
- integerArray = 'integerArray',
- numberArray = 'numberArray',
- stringArray = 'stringArray',
- boolArray = 'boolArray',
- // 系统赋值字段中的类型
- any = 'any',
- anyArray = 'anyArray',
- object = 'object',
- objectArray = 'objectArray',
- // 仅在树中出现
- array = 'array',
-}
diff --git a/src/types/index.ts b/src/types/index.ts
index ebfb3d62..d04badc4 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1,4 +1,3 @@
export * from './c2d2c';
export * from './catogory';
-export * from './field';
export * from './schema';
diff --git a/tests/__snapshots__/demo.test.tsx.snap b/tests/__snapshots__/demo.test.tsx.snap
index 2c269dd6..5d6dc707 100644
--- a/tests/__snapshots__/demo.test.tsx.snap
+++ b/tests/__snapshots__/demo.test.tsx.snap
@@ -50,14 +50,14 @@ exports[`
工具
@@ -449,11 +449,11 @@ exports[`
> renders custom.tsx correctly 1`] = `
评分
> renders custom.tsx correctly 1`] = `
tabindex="0"
>
> renders custom.tsx correctly 1`] = `
> renders custom.tsx correctly 1`] = `
> renders custom.tsx correctly 1`] = `
tabindex="0"
>
> renders custom.tsx correctly 1`] = `
> renders custom.tsx correctly 1`] = `
> renders custom.tsx correctly 1`] = `
tabindex="0"
>
> renders custom.tsx correctly 1`] = `
> renders custom.tsx correctly 1`] = `
> renders custom.tsx correctly 1`] = `
tabindex="0"
>
> renders custom.tsx correctly 1`] = `
> renders custom.tsx correctly 1`] = `
> renders custom.tsx correctly 1`] = `
tabindex="0"
>
> renders custom.tsx correctly 1`] = `
> renders dropMenu.tsx correctly 1`] = `
u
u
u
@@ -2089,10 +2089,10 @@ exports[`
-
-
-[![contributors][contributors-shield]][contributors-url] [![forks][forks-shield]][forks-url] [![stargazers][stargazers-shield]][stargazers-url] [![issues][issues-shield]][issues-url]
+
-
-
- 
-
-
- 
-
-
- 
-
-
- 
-
-
- 
-
-
- 
+
+ 
+ 
+