feat(create-slider-with-tooltip): add get container method (#615)

* feat(create-slider-with-tooltip): add get container method

* follow the issue #598
* add the possibility to add a get container method to fix the relative parent of the slider's tooltip

* fix(create-slider-with-tooltip): default behaviour of getTooltipContainer

* fix(create-slider-with-tooltip): import handle

* fix(create-slider-with-tooltip): add one test

* fix(create-slider-with-tooltip): dumb commit

* fix(create-slider-with-tooltip): dumb commit

Author: KALrious

src/createSliderWithTooltip.jsx

@@ -9,11 +9,13 @@ export default function createSliderWithTooltip(Component) {
       tipFormatter: PropTypes.func,
       handleStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.arrayOf(PropTypes.object)]),
       tipProps: PropTypes.object,
+      getTooltipContainer: PropTypes.func,
     };
     static defaultProps = {
       tipFormatter(value) { return value; },
       handleStyle: [{}],
       tipProps: {},
+      getTooltipContainer: node => node.parentNode,
     };
     state = {
       visibles: {},
@@ -33,6 +35,7 @@ export default function createSliderWithTooltip(Component) {
         tipFormatter,
         tipProps,
         handleStyle,
+        getTooltipContainer,
       } = this.props;
 
       const {
@@ -53,6 +56,7 @@ export default function createSliderWithTooltip(Component) {
       return (
         <Tooltip
           {...restTooltipProps}
+          getTooltipContainer={getTooltipContainer}
           prefixCls={prefixCls}
           overlay={overlay}
           placement={placement}

tests/common/createSlider.test.js

@@ -1,7 +1,7 @@
 /* eslint-disable max-len, no-undef */
 import React from 'react';
 import { mount } from 'enzyme';
-import Slider, { Range } from '../../src';
+import Slider, { Range, createSliderWithTooltip } from '../../src';
 
 const setWidth = (object, width) => {
   // https://github.com/tmpvar/jsdom/commit/0cdb2efcc69b6672dc2928644fc0172df5521176
@@ -269,4 +269,17 @@ describe('createSlider', () => {
     expect(sliderOnAfterChange).toHaveBeenCalled();
     expect(sliderOnAfterChange).toHaveBeenCalledTimes(1);
   });
+
+  it('the tooltip should be attach to the container with the id tooltip', () => {
+    const SliderWithTooltip = createSliderWithTooltip(Slider);
+    const tooltipPrefixer = {
+      prefixCls: 'slider-tooltip',
+    };
+    const tooltipParent = document.createElement('div');
+    tooltipParent.setAttribute('id', 'tooltip');
+    const wrapper = mount(
+      <SliderWithTooltip tipProps={tooltipPrefixer} getTooltipContainer={() => document.getElementById('tooltip')} />
+    );
+    expect(wrapper.instance().props.getTooltipContainer).toBeTruthy();
+  });
 });