feat: rm Sortablejs, add @dnd-kit/*

magicdawn · Nov 8, 2023 · 37d6ef1 · 37d6ef1
1 parent 21c900c
commit 37d6ef1
Show file tree

Hide file tree

Showing 10 changed files with 281 additions and 186 deletions.
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -10,6 +10,10 @@
   },
   "dependencies": {
     "@ant-design/icons": "^5.2.6",
+    "@dnd-kit/core": "^6.1.0",
+    "@dnd-kit/modifiers": "^7.0.0",
+    "@dnd-kit/sortable": "^8.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@icon-park/react": "^1.4.2",
     "ahooks": "^3.7.8",
     "antd": "^5.11.0",
@@ -40,7 +44,6 @@
     "react-dom": "^18.2.0",
     "react-monaco-editor": "^0.54.0",
     "react-router-dom": "^6.18.0",
-    "react-sortablejs": "^6.1.4",
     "react-spinkit": "^3.0.0",
     "react-spinners": "^0.13.8",
     "reuse-promise": "^2.0.0",

diff --git a/packages/ui/src/common/dnd.ts b/packages/ui/src/common/dnd.ts
@@ -0,0 +1 @@
+export * from '@dnd-kit/modifiers'
diff --git a/packages/ui/src/page/common/global/loading.tsx b/packages/ui/src/page/common/global/loading.tsx
@@ -31,7 +31,7 @@ function Loading({ visible }: { visible: boolean }) {
       footer={null}
       centered
       closable={false}
-      bodyStyle={{ padding: 0, backgroundColor: 'transparent' }}
+      styles={{ body: { padding: 0, backgroundColor: 'transparent' } }}
     >
       <PacmanLoader color={color} size={100} />
     </Modal>
@@ -51,7 +51,7 @@ const hide = wrapAction(() => {
   proxyProps.visible = false
 })
 
-export { WrappedComponent, show, hide }
+export { WrappedComponent, hide, show }
 export default { WrappedComponent, show, hide }
 
 // setTimeout(() => {

diff --git a/packages/ui/src/page/library-rule-list/AddRuleModal.tsx b/packages/ui/src/page/library-rule-list/AddRuleModal.tsx
@@ -154,7 +154,7 @@ export default function AddRuleModal(props: IProps) {
       maskClosable={false}
       title='添加规则'
       width={'95vw'}
-      bodyStyle={{ padding: '24px 12px' }}
+      styles={{ body: { padding: '24px 12px' } }}
       okButtonProps={okButtonProps}
       destroyOnClose
       okText={mode === 'from-global' ? '添加并重新生成' : '确定'}

diff --git a/packages/ui/src/page/library-rule-list/index.module.less b/packages/ui/src/page/library-rule-list/index.module.less
@@ -29,7 +29,7 @@
 
       margin: 15px 15px;
       border-radius: 10px;
-      border: 1px solid #ccc;
+      border: 1px solid #ede;
       padding: 10px 10px;
 
       .list-item-info {