@wordpress/compose/build/hooks/use-resize-observer/legacy/index.native.js

WordPress higher-order components (HOCs).

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _reactNative = require("react-native");
var _element = require("@wordpress/element");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Hook which allows to listen the resize event of any target element when it changes sizes.
 *
 * @example
 *
 * ```js
 * const App = () => {
 * 	const [ resizeListener, sizes ] = useResizeObserver();
 *
 * 	return (
 * 		<View>
 * 			{ resizeListener }
 * 			Your content here
 * 		</View>
 * 	);
 * };
 * ```
 */const useResizeObserver = () => {
  const [measurements, setMeasurements] = (0, _element.useState)(null);
  const onLayout = (0, _element.useCallback)(({
    nativeEvent
  }) => {
    const {
      width,
      height
    } = nativeEvent.layout;
    setMeasurements(prevState => {
      if (!prevState || prevState.width !== width || prevState.height !== height) {
        return {
          width: Math.floor(width),
          height: Math.floor(height)
        };
      }
      return prevState;
    });
  }, []);
  const observer = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
    testID: "resize-observer",
    style: _reactNative.StyleSheet.absoluteFill,
    onLayout: onLayout
  });
  return [observer, measurements];
};
var _default = exports.default = useResizeObserver;
//# sourceMappingURL=index.native.js.map