combo 交叉拖拽问题修复

scss/components/form/_combo.scss

@@ -53,6 +53,10 @@
     margin-bottom: $Combo-items-marginBottom;
   }
 
+  &-item {
+    background: $white;
+  }
+
   &--hor {
     .#{$ns}Combo-item {
       display: flex;

src/components/TooltipWrapper.tsx

@@ -32,6 +32,7 @@ export interface TooltipWrapperProps {
   overlay?: any;
   delay: number;
   theme?: string;
+  tooltipClassName?: string;
 }
 
 interface TooltipWrapperState {
@@ -171,7 +172,8 @@ export class TooltipWrapper extends React.Component<
       placement,
       container,
       trigger,
-      rootClose
+      rootClose,
+      tooltipClassName
     } = this.props;
 
     const child = React.Children.only(children);
@@ -214,6 +216,7 @@ export class TooltipWrapper extends React.Component<
       >
         <Tooltip
           title={typeof tooltip !== "string" ? tooltip.title : undefined}
+          className={tooltipClassName}
         >
           {tooltip && (tooltip as TooltipObject).render ? (
             (tooltip as TooltipObject).render!()

src/renderers/Form/Combo.tsx

@@ -124,6 +124,7 @@ export default class ComboControl extends React.Component<ComboProps> {
   sortable?: Sortable;
   defaultValue?: any;
   toDispose: Array<Function> = [];
+  id: string = guid();
   constructor(props: ComboProps) {
     super(props);
 
@@ -475,7 +476,7 @@ export default class ComboControl extends React.Component<ComboProps> {
     this.sortable = new Sortable(
       dom.querySelector(`.${ns}Combo-items`) as HTMLElement,
       {
-        group: 'combo',
+        group: `combo-${this.id}`,
         animation: 150,
         handle: `.${ns}Combo-itemDrager`,
         ghostClass: `${ns}Combo-item--dragging`,

src/renderers/Remark.tsx

@@ -1,19 +1,19 @@
-import React from 'react';
-import {Renderer, RendererProps} from '../factory';
-import {Api, SchemaNode, Schema, Action} from '../types';
-import cx from 'classnames';
-import TooltipWrapper from '../components/TooltipWrapper';
-import {filter} from '../utils/tpl';
-import {themeable} from '../theme';
+import React from "react";
+import { Renderer, RendererProps } from "../factory";
+import { Api, SchemaNode, Schema, Action } from "../types";
+import cx from "classnames";
+import TooltipWrapper from "../components/TooltipWrapper";
+import { filter } from "../utils/tpl";
+import { themeable } from "../theme";
 
 export function filterContents(
   tooltip:
     | string
     | undefined
-    | {title?: string; content?: string; body?: string},
+    | { title?: string; content?: string; body?: string },
   data: any
 ) {
-  if (typeof tooltip === 'string') {
+  if (typeof tooltip === "string") {
     return filter(tooltip, data);
   } else if (tooltip) {
     return tooltip.title
@@ -21,11 +21,11 @@ export function filterContents(
           title: filter(tooltip.title, data),
           content:
             tooltip.content || tooltip.body
-              ? filter(tooltip.content || tooltip.body || '', data)
+              ? filter(tooltip.content || tooltip.body || "", data)
               : undefined
         }
       : tooltip.content || tooltip.body
-      ? filter(tooltip.content || tooltip.body || '', data)
+      ? filter(tooltip.content || tooltip.body || "", data)
       : undefined;
   }
   return tooltip;
@@ -43,8 +43,8 @@ type RemarkProps = {
 class Remark extends React.Component<RemarkProps> {
   static propsList: Array<string> = [];
   static defaultProps = {
-    icon: 'fa fa-question-circle',
-    trigger: ['hover', 'focus']
+    icon: "fa fa-question-circle",
+    trigger: ["hover", "focus"]
   };
 
   render() {
@@ -79,7 +79,7 @@ class Remark extends React.Component<RemarkProps> {
             (tooltip && tooltip.className) || className || `Remark--warning`
           )}
         >
-          <i className={cx('Remark-icon', (tooltip && tooltip.icon) || icon)} />
+          <i className={cx("Remark-icon", (tooltip && tooltip.icon) || icon)} />
         </div>
       </TooltipWrapper>
     );
@@ -90,6 +90,6 @@ export default themeable(Remark);
 
 @Renderer({
   test: /(^|\/)remark$/,
-  name: 'remark'
+  name: "remark"
 })
 export class RemarkRenderer extends Remark {}