@reach/rect
Advanced tools
Comparing version 0.4.0-beta.0 to 0.4.0
@@ -1,16 +0,13 @@ | ||
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } | ||
import React, { useRef, useState, useLayoutEffect } from "react"; | ||
import Component from "@reach/component-component"; | ||
import observeRect from "@reach/observe-rect"; | ||
import { func, bool } from "prop-types"; | ||
var render = function render(_ref) { | ||
var refs = _ref.refs, | ||
children = _ref.props.children, | ||
rect = _ref.state.rect; | ||
var Rect = function Rect(_ref) { | ||
var onChange = _ref.onChange, | ||
observe = _ref.observe, | ||
children = _ref.children; | ||
var ref = React.useRef(null); | ||
var rect = useRect(ref, observe, onChange); | ||
return children({ | ||
ref: function ref(node) { | ||
return refs.node = node; | ||
}, | ||
ref: ref, | ||
rect: rect | ||
@@ -20,57 +17,2 @@ }); | ||
var didMount = function didMount(_ref2) { | ||
var setState = _ref2.setState, | ||
refs = _ref2.refs, | ||
props = _ref2.props; | ||
if (!refs.node) { | ||
console.warn("You need to place the ref"); | ||
return; | ||
} | ||
refs.observer = observeRect(refs.node, function (rect) { | ||
props.onChange && props.onChange(rect); | ||
setState({ | ||
rect: rect | ||
}); | ||
}); | ||
if (props.observe) { | ||
refs.observer.observe(); | ||
} | ||
}; | ||
var didUpdate = function didUpdate(_ref3) { | ||
var refs = _ref3.refs, | ||
props = _ref3.props, | ||
prevProps = _ref3.prevProps; | ||
if (props.observe && !prevProps.observe) { | ||
refs.observer.observe(); | ||
} else if (!props.observe && prevProps.observe) { | ||
refs.observer.unobserve(); | ||
} | ||
}; | ||
var willUnmount = function willUnmount(_ref4) { | ||
var refs = _ref4.refs; | ||
refs.observer.unobserve(); | ||
}; | ||
var Rect = function Rect(props) { | ||
return React.createElement(Component, _extends({}, props, { | ||
refs: { | ||
node: undefined, | ||
observer: undefined | ||
}, | ||
initialState: { | ||
rect: undefined | ||
}, | ||
didMount: didMount, | ||
didUpdate: didUpdate, | ||
willUnmount: willUnmount, | ||
render: render | ||
})); | ||
}; | ||
Rect.defaultProps = { | ||
@@ -88,3 +30,3 @@ observe: true | ||
export function useRect(nodeRef, observe) { | ||
export function useRect(nodeRef, observe, onChange) { | ||
if (observe === void 0) { | ||
@@ -100,16 +42,23 @@ observe = true; | ||
useLayoutEffect(function () { | ||
if (!observerRef.current && nodeRef.current) { | ||
observerRef.current = observeRect(nodeRef.current, setRect); | ||
var cleanup = function cleanup() { | ||
observerRef.current && observerRef.current.unobserve(); | ||
}; | ||
if (!nodeRef.current) { | ||
console.warn("You need to place the ref"); | ||
return cleanup; | ||
} | ||
if (observe) { | ||
observerRef.current.observe(); | ||
if (!observerRef.current && nodeRef.current) { | ||
observerRef.current = observeRect(nodeRef.current, function (rect) { | ||
onChange && onChange(rect); | ||
setRect(rect); | ||
}); | ||
} | ||
return function () { | ||
return observerRef.current.unobserve(); | ||
}; // eslint-disable-next-line react-hooks/exhaustive-deps | ||
}, [observe]); | ||
observe && observerRef.current.observe(); | ||
return cleanup; // eslint-disable-next-line react-hooks/exhaustive-deps | ||
}, [observe, onChange]); | ||
return rect; | ||
} | ||
export default Rect; |
98
index.js
@@ -9,4 +9,2 @@ "use strict"; | ||
var _componentComponent = _interopRequireDefault(require("@reach/component-component")); | ||
var _observeRect = _interopRequireDefault(require("@reach/observe-rect")); | ||
@@ -22,12 +20,12 @@ | ||
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } | ||
var Rect = function Rect(_ref) { | ||
var onChange = _ref.onChange, | ||
observe = _ref.observe, | ||
children = _ref.children; | ||
var render = function render(_ref) { | ||
var refs = _ref.refs, | ||
children = _ref.props.children, | ||
rect = _ref.state.rect; | ||
var ref = _react["default"].useRef(null); | ||
var rect = useRect(ref, observe, onChange); | ||
return children({ | ||
ref: function ref(node) { | ||
return refs.node = node; | ||
}, | ||
ref: ref, | ||
rect: rect | ||
@@ -37,57 +35,2 @@ }); | ||
var didMount = function didMount(_ref2) { | ||
var setState = _ref2.setState, | ||
refs = _ref2.refs, | ||
props = _ref2.props; | ||
if (!refs.node) { | ||
console.warn("You need to place the ref"); | ||
return; | ||
} | ||
refs.observer = (0, _observeRect["default"])(refs.node, function (rect) { | ||
props.onChange && props.onChange(rect); | ||
setState({ | ||
rect: rect | ||
}); | ||
}); | ||
if (props.observe) { | ||
refs.observer.observe(); | ||
} | ||
}; | ||
var didUpdate = function didUpdate(_ref3) { | ||
var refs = _ref3.refs, | ||
props = _ref3.props, | ||
prevProps = _ref3.prevProps; | ||
if (props.observe && !prevProps.observe) { | ||
refs.observer.observe(); | ||
} else if (!props.observe && prevProps.observe) { | ||
refs.observer.unobserve(); | ||
} | ||
}; | ||
var willUnmount = function willUnmount(_ref4) { | ||
var refs = _ref4.refs; | ||
refs.observer.unobserve(); | ||
}; | ||
var Rect = function Rect(props) { | ||
return _react["default"].createElement(_componentComponent["default"], _extends({}, props, { | ||
refs: { | ||
node: undefined, | ||
observer: undefined | ||
}, | ||
initialState: { | ||
rect: undefined | ||
}, | ||
didMount: didMount, | ||
didUpdate: didUpdate, | ||
willUnmount: willUnmount, | ||
render: render | ||
})); | ||
}; | ||
Rect.defaultProps = { | ||
@@ -105,3 +48,3 @@ observe: true | ||
function useRect(nodeRef, observe) { | ||
function useRect(nodeRef, observe, onChange) { | ||
if (observe === void 0) { | ||
@@ -117,14 +60,21 @@ observe = true; | ||
(0, _react.useLayoutEffect)(function () { | ||
if (!observerRef.current && nodeRef.current) { | ||
observerRef.current = (0, _observeRect["default"])(nodeRef.current, setRect); | ||
var cleanup = function cleanup() { | ||
observerRef.current && observerRef.current.unobserve(); | ||
}; | ||
if (!nodeRef.current) { | ||
console.warn("You need to place the ref"); | ||
return cleanup; | ||
} | ||
if (observe) { | ||
observerRef.current.observe(); | ||
if (!observerRef.current && nodeRef.current) { | ||
observerRef.current = (0, _observeRect["default"])(nodeRef.current, function (rect) { | ||
onChange && onChange(rect); | ||
setRect(rect); | ||
}); | ||
} | ||
return function () { | ||
return observerRef.current.unobserve(); | ||
}; // eslint-disable-next-line react-hooks/exhaustive-deps | ||
}, [observe]); | ||
observe && observerRef.current.observe(); | ||
return cleanup; // eslint-disable-next-line react-hooks/exhaustive-deps | ||
}, [observe, onChange]); | ||
return rect; | ||
@@ -131,0 +81,0 @@ } |
{ | ||
"name": "@reach/rect", | ||
"version": "0.4.0-beta.0", | ||
"version": "0.4.0", | ||
"description": "Measure React elements position in the DOM", | ||
@@ -8,7 +8,5 @@ "main": "index.js", | ||
"scripts": { | ||
"build": "node ../../shared/build-package", | ||
"lint": "eslint . --max-warnings=0" | ||
"build": "node ../../shared/build-package" | ||
}, | ||
"dependencies": { | ||
"@reach/component-component": "^0.4.0-beta.0", | ||
"@reach/observe-rect": "^1.0.3", | ||
@@ -21,3 +19,3 @@ "prop-types": "^15.7.2" | ||
}, | ||
"author": "Ryan Florence <@ryanflorence>", | ||
"author": "React Training <hello@reacttraining.com>", | ||
"license": "MIT", | ||
@@ -29,5 +27,6 @@ "files": [ | ||
"index.js", | ||
"index.d.ts", | ||
"styles.css" | ||
], | ||
"gitHead": "f8b2458e7f6d77300a65c2e02b75a5a1a41713a1" | ||
"gitHead": "0f3d2c7e530cd80e1d1bd338182ac89a3ba23999" | ||
} |
import React, { useRef, useState, useLayoutEffect } from "react"; | ||
import Component from "@reach/component-component"; | ||
import observeRect from "@reach/observe-rect"; | ||
import { func, bool } from "prop-types"; | ||
let render = ({ refs, props: { children }, state: { rect } }) => | ||
children({ ref: node => (refs.node = node), rect }); | ||
let didMount = ({ setState, refs, props }) => { | ||
if (!refs.node) { | ||
console.warn("You need to place the ref"); | ||
return; | ||
} | ||
refs.observer = observeRect(refs.node, rect => { | ||
props.onChange && props.onChange(rect); | ||
setState({ rect }); | ||
}); | ||
if (props.observe) { | ||
refs.observer.observe(); | ||
} | ||
let Rect = ({ onChange, observe, children }) => { | ||
const ref = React.useRef(null); | ||
const rect = useRect(ref, observe, onChange); | ||
return children({ ref, rect }); | ||
}; | ||
let didUpdate = ({ refs, props, prevProps }) => { | ||
if (props.observe && !prevProps.observe) { | ||
refs.observer.observe(); | ||
} else if (!props.observe && prevProps.observe) { | ||
refs.observer.unobserve(); | ||
} | ||
}; | ||
let willUnmount = ({ refs }) => { | ||
refs.observer.unobserve(); | ||
}; | ||
let Rect = props => ( | ||
<Component | ||
{...props} | ||
refs={{ | ||
node: undefined, | ||
observer: undefined | ||
}} | ||
initialState={{ | ||
rect: undefined | ||
}} | ||
didMount={didMount} | ||
didUpdate={didUpdate} | ||
willUnmount={willUnmount} | ||
render={render} | ||
/> | ||
); | ||
Rect.defaultProps = { | ||
@@ -64,15 +23,26 @@ observe: true | ||
export function useRect(nodeRef, observe = true) { | ||
export function useRect(nodeRef, observe = true, onChange) { | ||
let [rect, setRect] = useState(null); | ||
let observerRef = useRef(null); | ||
useLayoutEffect(() => { | ||
const cleanup = () => { | ||
observerRef.current && observerRef.current.unobserve(); | ||
}; | ||
if (!nodeRef.current) { | ||
console.warn("You need to place the ref"); | ||
return cleanup; | ||
} | ||
if (!observerRef.current && nodeRef.current) { | ||
observerRef.current = observeRect(nodeRef.current, setRect); | ||
observerRef.current = observeRect(nodeRef.current, rect => { | ||
onChange && onChange(rect); | ||
setRect(rect); | ||
}); | ||
} | ||
if (observe) { | ||
observerRef.current.observe(); | ||
} | ||
return () => observerRef.current.unobserve(); | ||
observe && observerRef.current.observe(); | ||
return cleanup; | ||
// eslint-disable-next-line react-hooks/exhaustive-deps | ||
}, [observe]); | ||
}, [observe, onChange]); | ||
return rect; | ||
@@ -79,0 +49,0 @@ } |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
4
6
7489
165
1
- Removed@reach/component-component@0.4.0(transitive)