@enact/ui/Resizable/useResize.js

A collection of simplified unstyled cross-platform UI components for Enact

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _handle = require("@enact/core/handle");
var _react = require("react");
var _ResizeContext = _interopRequireDefault(require("./ResizeContext"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
/**
 * Object returned by `useResize`
 * Object has a property named with the value of the resize property of config.
 * And this property has resizehandler.
 *
 * @typedef {Object} useResizeInterface
 * @memberof ui/Resizable
 * @private
 */

/**
 * A custom hook which returns handler that indicates a resize is necessary
 *
 * @param {Object} props  Resize component props
 * @param {Object} config  Configuration options with resize, filter property
 * @returns {useResizeInterface}
 * @private
 *
 */
var useResize = function useResize(props, config) {
  // `resize` is the name of the event on the component to listen for size changes.
  var _config$filter = config.filter,
    filter = _config$filter === void 0 ? null : _config$filter,
    _config$resize = config.resize,
    resize = _config$resize === void 0 ? null : _config$resize;
  var resizeContextValue = (0, _react.use)(_ResizeContext["default"]);
  var mutableRef = (0, _react.useRef)({
    resizeRegistry: null
  });
  (0, _react.useEffect)(function () {
    var resizeRegistry = mutableRef.current.resizeRegistry;
    if (resizeContextValue && typeof resizeContextValue === 'function') {
      mutableRef.current.resizeRegistry = resizeContextValue(function () {});
    }
    return function () {
      if (resizeRegistry) {
        resizeRegistry.unregister();
      }
    };
  }, [resizeContextValue]);
  var handleResize = (0, _react.useCallback)(function (ev) {
    (0, _handle.forward)(resize, ev, props);

    // Notifies a container that a resize is necessary
    if ((filter === null || filter(ev, props)) && mutableRef.current.resizeRegistry) {
      mutableRef.current.resizeRegistry.notify({
        action: 'invalidateBounds'
      });
    }
  }, [filter, props, resize]);
  return _defineProperty({}, resize, handleResize);
};
var _default = exports["default"] = useResize;