Commit ⋅ react-component/slider

Showing 3 of 7 files from the diff.

Newly tracked file

100.00% 100.00% ø

src/common/SliderTooltip.tsx created.

100.00% ø ø

src/index.tsx changed.

96.15% 100.00% ø

src/createSliderWithTooltip.tsx changed.

Other files ignored by Codecov

tests/common/SliderTooltip.test.js is new.

tests/type.test.tsx has changed.

examples/handle.jsx has changed.

README.md has changed.

@@ -0,0 +1,37 @@

1	+	import * as React from 'react';
2	+	import Tooltip from 'rc-tooltip';
3	+	import { TooltipProps } from 'rc-tooltip/lib/Tooltip';
4	+	import { composeRef } from 'rc-util/lib/ref';
5	+	import raf from 'rc-util/lib/raf';
6	+
7	+	const SliderTooltip = React.forwardRef<unknown, TooltipProps>((props, ref) => {
8	+	const { visible, overlay } = props;
9	+	const innerRef = React.useRef<any>(null);
10	+	const tooltipRef = composeRef(ref, innerRef);
11	+
12	+	const rafRef = React.useRef<number \| null>(null);
13	+
14	+	function cancelKeepAlign() {
15	+	raf.cancel(rafRef.current!);
16	+	}
17	+
18	+	function keepAlign() {
19	+	rafRef.current = raf(() => {
20	+	innerRef.current.forcePopupAlign();
21	+	});
22	+	}
23	+
24	+	React.useEffect(() => {
25	+	if (visible) {
26	+	keepAlign();
27	+	} else {
28	+	cancelKeepAlign();
29	+	}
30	+
31	+	return cancelKeepAlign;
32	+	}, [visible, overlay]);
33	+
34	+	return <Tooltip ref={tooltipRef} {...props} />;
35	+	});
36	+
37	+	export default SliderTooltip;

@@ -2,6 +2,7 @@

import Range from './Range';
import Handle from './Handle';
import createSliderWithTooltip from './createSliderWithTooltip';
import SliderTooltip from './common/SliderTooltip';

interface CompoundedComponent extends React.ComponentClass<SliderProps> {
  Range: typeof Range;

@@ -15,4 +16,4 @@

15	16		InternalSlider.Handle = Handle;
16	17		InternalSlider.createSliderWithTooltip = createSliderWithTooltip;
17	18		export default InternalSlider;
18		-	export { Range, Handle, createSliderWithTooltip };
	19	+	export { Range, Handle, createSliderWithTooltip, SliderTooltip };

@@ -1,6 +1,7 @@

import React from 'react';
import Tooltip from 'rc-tooltip';
import Tooltip from './common/SliderTooltip';
import Handle from './Handle';
import { GenericSliderProps } from './interface';

export interface ComponentWrapperProps {
  tipFormatter?: (value: number) => React.ReactNode;

@@ -10,7 +11,6 @@

    placement?: string;
    visible?: boolean;
  };
  handleStyle?: React.CSSProperties;
  getTooltipContainer?: () => HTMLElement;
}


@@ -18,7 +18,9 @@

  visibles: Record<number, boolean>;
}

export default function createSliderWithTooltip<Props>(Component: React.ComponentClass<Props>) {
export default function createSliderWithTooltip<Props extends GenericSliderProps>(
  Component: React.ComponentClass<Props>,
) {
  return class ComponentWrapper extends React.Component<
    ComponentWrapperProps & React.ComponentProps<typeof Component>,
    ComponentWrapperState

Files		•	•	•	Coverage
src	706	625	0	81	88.53%
Project Totals (11 files)	706	625	0	81	88.53%

View CI Build Download

No yaml found.

Create your codecov.yml to customize your Codecov experience

Read the docs

Interact now

The inner-most circle is the entire project, moving away from the center are folders then, finally, a single file. The size and color of each slice is representing the number of statements and the coverage, respectively.

SVG

The top section represents the entire project. Proceeding with folders and finally individual files. The size and color of each slice is representing the number of statements and the coverage, respectively.

SVG

Each block represents a single file in the project. The size and color of each block is represented by the number of statements and the coverage, respectively.

SVG

Learn more about the coverage sunburst graph

Navigation	Overlay
`t` Navigate files	`h` Toggle hits
`y` Change url to tip of branch	`m` Toggle misses
`b / v` Jump to prev/next hit line	`p` Toggle partial
`z / x` Jump to prev/next missed or partial line	`1..9` Toggle flags
`shift + o` Open current page in GitHub	`a` Toggle all on
`/ or ?` Show keyboard shortcuts dialog	`c` Toggle context lines or commits

2	2		import Range from './Range';
3	3		import Handle from './Handle';
4	4		import createSliderWithTooltip from './createSliderWithTooltip';
	5	+	import SliderTooltip from './common/SliderTooltip';
5	6
6	7		interface CompoundedComponent extends React.ComponentClass<SliderProps> {
7	8		Range: typeof Range;

1	1		import React from 'react';
2		-	import Tooltip from 'rc-tooltip';
	2	+	import Tooltip from './common/SliderTooltip';
3	3		import Handle from './Handle';
	4	+	import { GenericSliderProps } from './interface';
4	5
5	6		export interface ComponentWrapperProps {
6	7		tipFormatter?: (value: number) => React.ReactNode;

10	11		placement?: string;
11	12		visible?: boolean;
12	13		};
13		-	handleStyle?: React.CSSProperties;
14	14		getTooltipContainer?: () => HTMLElement;
15	15		}
16	16

18	18		visibles: Record<number, boolean>;
19	19		}
20	20
21		-	export default function createSliderWithTooltip<Props>(Component: React.ComponentClass<Props>) {
	21	+	export default function createSliderWithTooltip<Props extends GenericSliderProps>(
	22	+	Component: React.ComponentClass<Props>,
	23	+	) {
22	24		return class ComponentWrapper extends React.Component<
23	25		ComponentWrapperProps & React.ComponentProps<typeof Component>,
24	26		ComponentWrapperState

Updating our web app

No yaml found.