fix: drag handler style overlap

twinkle77 · liujuping · commit 11e190affec1 · 2022-08-08T16:05:30.000+08:00
diff --git a/demo/src/index.ts b/demo/src/index.ts
@@ -8,40 +8,7 @@ preference.set('DataSourcePane', {
   importPlugins: [],
   dataSourceTypes: [
     {
-      type: 'fetch',
-      // schema: {
-      //   type: "object",
-      //   properties: {
-      //     id: {
-      //       type: "string"
-      //     },
-      //     type: {
-      //       type: "string"
-      //     },
-      //     isInit: {
-      //       type: "boolean",
-      //     },
-      //     options: {
-      //       type: "object",
-      //       properties: {
-      //         method: {
-      //           type: "string",
-      //         },
-      //         isCors: {
-      //           type: "boolean",
-      //         },
-      //         timeout: {
-      //           type: "number",
-      //         },
-      //         uri: {
-      //           type: "string",
-      //         },
-      //       },
-      //       required: ["method", "isCors", "timeout", "uri"]
-      //     }
-      //   },
-      //   required: ["id", "type", "isInit", "options"]
-      // }
+      type: 'fetch'
     },
     {
       type: 'jsonp',
diff --git a/packages/plugin-datasource-pane/src/components/DataSourceListItem/DataSourceListItem.tsx b/packages/plugin-datasource-pane/src/components/DataSourceListItem/DataSourceListItem.tsx
@@ -110,6 +110,10 @@ export class DataSourceListItem extends Component<DataSourceListItemProps> {
       selected,
       renderInfoTags = defaultRenderInfoTags,
     } = this.props;
+
+    // 拖拽中，需要向右偏移 8p，避免覆盖
+    const offsetStyle = mode === DataSourcePanelMode.SORTING ? { marginLeft: '8px' } : null;
+
     return this.props?.connectDropTarget?.(
       this.props?.connectDragPreview?.(
         <div
@@ -137,7 +141,7 @@ export class DataSourceListItem extends Component<DataSourceListItemProps> {
               onChange={this.handleExportCheckChange}
             />
           )}
-          <div className={generateClassName('list-item-title')}>
+          <div className={generateClassName('list-item-title')} style={offsetStyle}>
             <div
               className={generateClassName('list-item-id')}
               title={dataSource.id}
@@ -165,7 +169,7 @@ export class DataSourceListItem extends Component<DataSourceListItemProps> {
               </div>
             }
           </div>
-          <div className={generateClassName('list-item-desc')}>
+          <div className={generateClassName('list-item-desc')} style={offsetStyle}>
             {renderInfoTags(dataSource)?.map?.((tag: DataSourceInfoTag) => {
               if (tag.tooltip === true) {
                 return (
