@wordpress/components/build/navigator/navigator-button/hook.js

UI components for WordPress.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useNavigatorButton = useNavigatorButton;
var _element = require("@wordpress/element");
var _escapeHtml = require("@wordpress/escape-html");
var _context = require("../../context");
var _button = _interopRequireDefault(require("../../button"));
var _useNavigator = require("../use-navigator");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const cssSelectorForAttribute = (attrName, attrValue) => `[${attrName}="${attrValue}"]`;
function useNavigatorButton(props) {
  const {
    path,
    onClick,
    as = _button.default,
    attributeName = 'id',
    ...otherProps
  } = (0, _context.useContextSystem)(props, 'Navigator.Button');
  const escapedPath = (0, _escapeHtml.escapeAttribute)(path);
  const {
    goTo
  } = (0, _useNavigator.useNavigator)();
  const handleClick = (0, _element.useCallback)(e => {
    e.preventDefault();
    goTo(escapedPath, {
      focusTargetSelector: cssSelectorForAttribute(attributeName, escapedPath)
    });
    onClick?.(e);
  }, [goTo, onClick, attributeName, escapedPath]);
  return {
    as,
    onClick: handleClick,
    ...otherProps,
    [attributeName]: escapedPath
  };
}
//# sourceMappingURL=hook.js.map