react-d3-utils - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0

CHANGELOG.md

 # Changelog
 
+## [0.2.0](https://www.github.com/zakodium/react-d3-utils/compare/v0.1.1...v0.2.0) (2021-02-08)
+
+
+### Features
+
+* add useBBoxObserver hook ([#10](https://www.github.com/zakodium/react-d3-utils/issues/10)) ([0ee4470](https://www.github.com/zakodium/react-d3-utils/commit/0ee4470614308cf70664e3c8a52201e7e69354f8))
+
+
+### Bug Fixes
+
+* reposition group when children change ([0e2a021](https://www.github.com/zakodium/react-d3-utils/commit/0e2a02185402b6137542381528cf972e1f90d924))
+
 ### [0.1.1](https://www.github.com/zakodium/react-d3-utils/compare/v0.1.0...v0.1.1) (2021-02-06)
@@ -4,0 +16,0 @@

lib-esm/components/AlignGroup.d.ts

 import { ReactNode } from 'react';
-declare type Align = 'start' | 'middle' | 'end';
+export declare type Align = 'start' | 'middle' | 'end';
 export interface AlignGroupProps {
@@ -11,2 +11,1 @@ x?: number;
 export declare function AlignGroup(props: AlignGroupProps): JSX.Element;
-export {};

lib-esm/components/AlignGroup.js

 import { jsx as _jsx } from "react/jsx-runtime";
-import { useLayoutEffect, useRef, useMemo, useState, } from 'react';
+import { useMemo } from 'react';
+import { useBBoxObserver } from '../hooks/useBBoxObserver';
 function calculatePosition(start, align, space) {
@@ -21,13 +22,7 @@ switch (align) {
     const { x = 0, y = 0, verticalAlign = 'start', horizontalAlign = 'start', children, } = props;
-    const groupRef = useRef(null);
-    const [state, setState] = useState({ height: 0, width: 0, x: 0, y: 0 });
-    useLayoutEffect(() => {
-        var _a;
-        const { height = 0, width = 0, x = 0, y = 0 } = ((_a = groupRef === null || groupRef === void 0 ? void 0 : groupRef.current) === null || _a === void 0 ? void 0 : _a.getBBox()) || {};
-        setState({ height, width, x, y });
-    }, []);
-    const xPosition = useMemo(() => calculatePosition(x - state.x, horizontalAlign, state.width), [x, horizontalAlign, state.width, state.x]);
-    const yPosition = useMemo(() => calculatePosition(y - state.y, verticalAlign, state.height), [y, verticalAlign, state.height, state.y]);
-    return (_jsx("g", Object.assign({ ref: groupRef, transform: `translate(${xPosition}, ${yPosition})` }, { children: children }), void 0));
+    const observed = useBBoxObserver();
+    const xPosition = useMemo(() => calculatePosition(x - observed.x, horizontalAlign, observed.width || 0), [x, horizontalAlign, observed.x, observed.width]);
+    const yPosition = useMemo(() => calculatePosition(y - observed.y, verticalAlign, observed.height || 0), [y, verticalAlign, observed.y, observed.height]);
+    return (_jsx("g", Object.assign({ ref: observed.ref, transform: `translate(${xPosition}, ${yPosition})` }, { children: children }), void 0));
 }
 //# sourceMappingURL=AlignGroup.js.map

lib-esm/index.d.ts

 export * from './components/AlignGroup';
 export * from './components/ResponsiveChart';
+export * from './hooks/useBBoxObserver';

lib-esm/index.js

 export * from './components/AlignGroup';
 export * from './components/ResponsiveChart';
+export * from './hooks/useBBoxObserver';
 //# sourceMappingURL=index.js.map

lib/components/AlignGroup.js

@@ -6,2 +6,3 @@ "use strict";
 const react_1 = require("react");
+const useBBoxObserver_1 = require("../hooks/useBBoxObserver");
 function calculatePosition(start, align, space) {
@@ -25,13 +26,7 @@ switch (align) {
     const { x = 0, y = 0, verticalAlign = 'start', horizontalAlign = 'start', children, } = props;
-    const groupRef = react_1.useRef(null);
-    const [state, setState] = react_1.useState({ height: 0, width: 0, x: 0, y: 0 });
-    react_1.useLayoutEffect(() => {
-        var _a;
-        const { height = 0, width = 0, x = 0, y = 0 } = ((_a = groupRef === null || groupRef === void 0 ? void 0 : groupRef.current) === null || _a === void 0 ? void 0 : _a.getBBox()) || {};
-        setState({ height, width, x, y });
-    }, []);
-    const xPosition = react_1.useMemo(() => calculatePosition(x - state.x, horizontalAlign, state.width), [x, horizontalAlign, state.width, state.x]);
-    const yPosition = react_1.useMemo(() => calculatePosition(y - state.y, verticalAlign, state.height), [y, verticalAlign, state.height, state.y]);
-    return (jsx_runtime_1.jsx("g", Object.assign({ ref: groupRef, transform: `translate(${xPosition}, ${yPosition})` }, { children: children }), void 0));
+    const observed = useBBoxObserver_1.useBBoxObserver();
+    const xPosition = react_1.useMemo(() => calculatePosition(x - observed.x, horizontalAlign, observed.width || 0), [x, horizontalAlign, observed.x, observed.width]);
+    const yPosition = react_1.useMemo(() => calculatePosition(y - observed.y, verticalAlign, observed.height || 0), [y, verticalAlign, observed.y, observed.height]);
+    return (jsx_runtime_1.jsx("g", Object.assign({ ref: observed.ref, transform: `translate(${xPosition}, ${yPosition})` }, { children: children }), void 0));
 }
 exports.AlignGroup = AlignGroup;

lib/index.js

@@ -15,1 +15,2 @@ "use strict";
 __exportStar(require("./components/ResponsiveChart"), exports);
+__exportStar(require("./hooks/useBBoxObserver"), exports);

package.json

 {
   "name": "react-d3-utils",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Low-level utilities to build charts with React and D3",
@@ -19,3 +19,3 @@ "main": "lib/index.js",
     "dev": "start-storybook -p 6006",
-    "eslint": "eslint --ext ts,tsx src stories",
+    "eslint": "eslint src stories",
     "eslint-fix": "npm run eslint -- --fix",
@@ -39,9 +39,9 @@ "prepublishOnly": "npm run build",
     "@babel/core": "^7.12.13",
-    "@storybook/addon-actions": "^6.1.16",
-    "@storybook/addon-essentials": "^6.1.16",
-    "@storybook/addon-links": "^6.1.16",
-    "@storybook/addon-storysource": "^6.1.16",
-    "@storybook/react": "^6.1.16",
+    "@storybook/addon-actions": "^6.1.17",
+    "@storybook/addon-essentials": "^6.1.17",
+    "@storybook/addon-links": "^6.1.17",
+    "@storybook/addon-storysource": "^6.1.17",
+    "@storybook/react": "^6.1.17",
     "@types/react": "^17.0.1",
-    "@zakodium/eslint-config": "^2.2.2",
+    "@zakodium/eslint-config": "^3.0.0",
     "babel-loader": "^8.2.2",
@@ -48,0 +48,0 @@ "eslint": "^7.19.0",

No alert changes

Improved metrics

Total package byte prevSize

17913

increased by40.63%

Number of package files

20

increased by25%

Lines of code

237

increased by58%

No dependency changes