diff --git a/scss/components/form/_combo.scss b/scss/components/form/_combo.scss index 6b82bc5b..d3ad66ee 100644 --- a/scss/components/form/_combo.scss +++ b/scss/components/form/_combo.scss @@ -53,6 +53,10 @@ margin-bottom: $Combo-items-marginBottom; } + &-item { + background: $white; + } + &--hor { .#{$ns}Combo-item { display: flex; diff --git a/src/components/TooltipWrapper.tsx b/src/components/TooltipWrapper.tsx index 9c21f601..1a7e1e1a 100644 --- a/src/components/TooltipWrapper.tsx +++ b/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 && (tooltip as TooltipObject).render ? ( (tooltip as TooltipObject).render!() diff --git a/src/renderers/Form/Combo.tsx b/src/renderers/Form/Combo.tsx index 6e47b875..5da66f8b 100644 --- a/src/renderers/Form/Combo.tsx +++ b/src/renderers/Form/Combo.tsx @@ -124,6 +124,7 @@ export default class ComboControl extends React.Component { sortable?: Sortable; defaultValue?: any; toDispose: Array = []; + id: string = guid(); constructor(props: ComboProps) { super(props); @@ -475,7 +476,7 @@ export default class ComboControl extends React.Component { 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`, diff --git a/src/renderers/Remark.tsx b/src/renderers/Remark.tsx index 41a2cd18..8bc1ce15 100644 --- a/src/renderers/Remark.tsx +++ b/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 { static propsList: Array = []; 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 { (tooltip && tooltip.className) || className || `Remark--warning` )} > - + ); @@ -90,6 +90,6 @@ export default themeable(Remark); @Renderer({ test: /(^|\/)remark$/, - name: 'remark' + name: "remark" }) export class RemarkRenderer extends Remark {}