reduxjs/redux-devtools
1
1
Fork 0
mirror of https://github.com/reduxjs/redux-devtools.git synced 2025-07-23 14:39:58 +03:00
Code Issues Packages Projects Releases Wiki Activity

Remove attr

Browse Source
This commit is contained in:
Nathan Bierema 2022-12-28 15:48:45 -05:00
parent e54c7d969e
commit ac468f16a0
3 changed files with 24 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
packages/d3tooltip/src/index.ts
View File

@ -5,8 +5,7 @@ import d3Package, {
Selection, Selection,
} from 'd3'; } from 'd3';
import { is } from 'ramda'; import { is } from 'ramda';
import utils from './utils'; import functor from './utils/functor';
const { prependClass, functor } = utils;
interface Options< interface Options<
GElement extends ContainerElement, GElement extends ContainerElement,
@ -30,6 +29,8 @@ const defaultOptions: Options<ContainerElement, unknown, BaseType, unknown> = {
root: undefined, root: undefined,
}; };
type StyleValue = string | number | boolean;
interface Tip< interface Tip<
GElement extends ContainerElement, GElement extends ContainerElement,
Datum, Datum,
@ -37,27 +38,8 @@ interface Tip<
PDatum PDatum
> { > {
(selection: Selection<GElement, Datum, PElement, PDatum>): void; (selection: Selection<GElement, Datum, PElement, PDatum>): void;
attr: ( // TODO Do we need to support functions or `null`?
this: this, style: (this: this, value: { [key: string]: StyleValue }) => this;
d:
| string
| {
[key: string]:
| Primitive
| ((datum: Datum, index: number, outerIndex: number) => Primitive);
}
) => this;
style: (
this: this,
d:
| string
| {
[key: string]:
| Primitive
| ((datum: Datum, index: number, outerIndex: number) => Primitive);
}
| undefined
) => this;
text: ( text: (
this: this, this: this,
d: string | ((datum: Datum, index?: number, outerIndex?: number) => string) d: string | ((datum: Datum, index?: number, outerIndex?: number) => string)
@ -79,10 +61,11 @@ export function tooltip<
...options, ...options,
} as Options<GElement, Datum, PElement, PDatum>; } as Options<GElement, Datum, PElement, PDatum>;
let attrs = { class: className }; let text: (
let text: (datum: Datum, index?: number, outerIndex?: number) => string = ( datum: Datum,
node: Datum index?: number,
) => ''; outerIndex?: number
) => string = () => '';
let styles = {}; let styles = {};
let el: Selection<HTMLDivElement, Datum, BaseType, PDatum>; let el: Selection<HTMLDivElement, Datum, BaseType, PDatum>;
@ -99,53 +82,31 @@ export function tooltip<
el = anchor el = anchor
.append('div') .append('div')
.attr(prependClass(className)(attrs)) .attr('class', className)
.style({ .style('position', 'absolute')
position: 'absolute', .style('z-index', 1001)
'z-index': 1001, .style('left', `${x}px`)
left: `${x}px`, .style('top', `${y}px`);
top: `${y}px`,
...styles, for (const [key, value] of Object.entries(styles)) {
}) el = el.style(key, value as StyleValue);
.html(() => text(node)); }
el = el.html(() => text(node));
}); });
selection.on('mousemove.tip', (node) => { selection.on('mousemove.tip', (node) => {
const [mouseX, mouseY] = d3.mouse(rootNode); const [mouseX, mouseY] = d3.mouse(rootNode);
const [x, y] = [left || mouseX + offset.left, top || mouseY - offset.top]; const [x, y] = [left || mouseX + offset.left, top || mouseY - offset.top];
el.style({ el.style('left', `${x}px`)
left: `${x}px`, .style('top', `${y}px`)
top: `${y}px`, .html(() => text(node));
}).html(() => text(node));
}); });
selection.on('mouseout.tip', () => el.remove()); selection.on('mouseout.tip', () => el.remove());
} }
tip.attr = function setAttr(
this: typeof tip,
d:
| string
| {
[key: string]:
| Primitive
| ((datum: Datum, index: number, outerIndex: number) => Primitive);
}
) {
if (is(Object, d)) {
attrs = {
...attrs,
...(d as {
[key: string]:
| Primitive
| ((datum: Datum, index: number, outerIndex: number) => Primitive);
}),
};
}
return this;
};
tip.style = function setStyle( tip.style = function setStyle(
this: typeof tip, this: typeof tip,
d: d:

7
packages/d3tooltip/src/utils/index.ts
View File

@ -1,7 +0,0 @@
import prependClass from './prependClass';
import functor from './functor';
export default {
prependClass,
functor,
};

28
packages/d3tooltip/src/utils/prependClass.ts
View File

@ -1,28 +0,0 @@
import { mapObjIndexed, join } from 'ramda';
import functor from './functor';
import { Primitive } from 'd3';
export default function prependClass<Datum>(className: string) {
return mapObjIndexed(
(
value:
| Primitive
| ((datum: Datum, index: number, outerIndex?: number) => Primitive),
key
) => {
if (key === 'class') {
const fn = functor(value);
return (d: Datum, i: number) => {
const classNames = fn(d, i);
if (classNames !== className) {
return join(' ', [className, classNames]);
}
return classNames;
};
}
return value;
}
);
}