From ac468f16a04302d900e3ec2c52d4e109dd17c6cf Mon Sep 17 00:00:00 2001 From: Nathan Bierema Date: Wed, 28 Dec 2022 15:48:45 -0500 Subject: [PATCH] Remove attr --- packages/d3tooltip/src/index.ts | 87 ++++++-------------- packages/d3tooltip/src/utils/index.ts | 7 -- packages/d3tooltip/src/utils/prependClass.ts | 28 ------- 3 files changed, 24 insertions(+), 98 deletions(-) delete mode 100644 packages/d3tooltip/src/utils/index.ts delete mode 100644 packages/d3tooltip/src/utils/prependClass.ts diff --git a/packages/d3tooltip/src/index.ts b/packages/d3tooltip/src/index.ts index b346be4f..00fd0e7b 100644 --- a/packages/d3tooltip/src/index.ts +++ b/packages/d3tooltip/src/index.ts @@ -5,8 +5,7 @@ import d3Package, { Selection, } from 'd3'; import { is } from 'ramda'; -import utils from './utils'; -const { prependClass, functor } = utils; +import functor from './utils/functor'; interface Options< GElement extends ContainerElement, @@ -30,6 +29,8 @@ const defaultOptions: Options = { root: undefined, }; +type StyleValue = string | number | boolean; + interface Tip< GElement extends ContainerElement, Datum, @@ -37,27 +38,8 @@ interface Tip< PDatum > { (selection: Selection): void; - attr: ( - this: 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; + // TODO Do we need to support functions or `null`? + style: (this: this, value: { [key: string]: StyleValue }) => this; text: ( this: this, d: string | ((datum: Datum, index?: number, outerIndex?: number) => string) @@ -79,10 +61,11 @@ export function tooltip< ...options, } as Options; - let attrs = { class: className }; - let text: (datum: Datum, index?: number, outerIndex?: number) => string = ( - node: Datum - ) => ''; + let text: ( + datum: Datum, + index?: number, + outerIndex?: number + ) => string = () => ''; let styles = {}; let el: Selection; @@ -99,53 +82,31 @@ export function tooltip< el = anchor .append('div') - .attr(prependClass(className)(attrs)) - .style({ - position: 'absolute', - 'z-index': 1001, - left: `${x}px`, - top: `${y}px`, - ...styles, - }) - .html(() => text(node)); + .attr('class', className) + .style('position', 'absolute') + .style('z-index', 1001) + .style('left', `${x}px`) + .style('top', `${y}px`); + + for (const [key, value] of Object.entries(styles)) { + el = el.style(key, value as StyleValue); + } + + el = el.html(() => text(node)); }); selection.on('mousemove.tip', (node) => { const [mouseX, mouseY] = d3.mouse(rootNode); const [x, y] = [left || mouseX + offset.left, top || mouseY - offset.top]; - el.style({ - left: `${x}px`, - top: `${y}px`, - }).html(() => text(node)); + el.style('left', `${x}px`) + .style('top', `${y}px`) + .html(() => text(node)); }); 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( this: typeof tip, d: diff --git a/packages/d3tooltip/src/utils/index.ts b/packages/d3tooltip/src/utils/index.ts deleted file mode 100644 index ef868239..00000000 --- a/packages/d3tooltip/src/utils/index.ts +++ /dev/null @@ -1,7 +0,0 @@ -import prependClass from './prependClass'; -import functor from './functor'; - -export default { - prependClass, - functor, -}; diff --git a/packages/d3tooltip/src/utils/prependClass.ts b/packages/d3tooltip/src/utils/prependClass.ts deleted file mode 100644 index cc9bf058..00000000 --- a/packages/d3tooltip/src/utils/prependClass.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { mapObjIndexed, join } from 'ramda'; -import functor from './functor'; -import { Primitive } from 'd3'; - -export default function prependClass(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; - } - ); -}