@bianic-ui/clickable/dist/cjs/use-clickable.js

React hook and component that implements native button interactions

"use strict";

exports.__esModule = true;
exports.useClickable = useClickable;

var _utils = require("@bianic-ui/utils");

var _react = require("react");

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); }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

/**
 * useClickable
 *
 * React hook that implements all the interactions of a native `button`
 * component with support for making it focusable even if it's disabled.
 *
 * It can be used with both native button elements or other elements (like `div`).
 */
function useClickable(props) {
  if (props === void 0) {
    props = {};
  }

  var _props = props,
      htmlRef = _props.ref,
      isDisabled = _props.isDisabled,
      isFocusable = _props.isFocusable,
      _props$clickOnEnter = _props.clickOnEnter,
      clickOnEnter = _props$clickOnEnter === void 0 ? true : _props$clickOnEnter,
      _props$clickOnSpace = _props.clickOnSpace,
      clickOnSpace = _props$clickOnSpace === void 0 ? true : _props$clickOnSpace,
      onMouseDown = _props.onMouseDown,
      onMouseUp = _props.onMouseUp,
      onClick = _props.onClick,
      onKeyDown = _props.onKeyDown,
      onKeyUp = _props.onKeyUp,
      tabIndexProp = _props.tabIndex,
      onMouseOver = _props.onMouseOver,
      htmlProps = _objectWithoutPropertiesLoose(_props, ["ref", "isDisabled", "isFocusable", "clickOnEnter", "clickOnSpace", "onMouseDown", "onMouseUp", "onClick", "onKeyDown", "onKeyUp", "tabIndex", "onMouseOver"]);
  /**
   * We'll use this to track if the element is a button element
   */


  var _useState = (0, _react.useState)(true),
      isButton = _useState[0],
      setIsButton = _useState[1];
  /**
   * For custom button implementation, we'll use this to track when
   * we mouse down on the button, to enable use style it's ":active" style
   */


  var _useState2 = (0, _react.useState)(false),
      isActive = _useState2[0],
      setIsActive = _useState2[1];
  /**
   * The ref callback that fires as soon as the dom node is ready
   */


  var refCallback = (0, _react.useCallback)(function (node) {
    if ((node == null ? void 0 : node.tagName) !== "BUTTON") {
      setIsButton(false);
    }
  }, []);
  var tabIndex = isButton ? tabIndexProp : tabIndexProp || 0;
  var trulyDisabled = isDisabled && !isFocusable;
  var handleClick = (0, _react.useCallback)(function (event) {
    if (isDisabled) {
      event.stopPropagation();
      event.preventDefault();
      return;
    }

    var self = event.currentTarget;
    self.focus();
    onClick == null ? void 0 : onClick(event);
  }, [isDisabled, onClick]);
  var handleKeyDown = (0, _react.useCallback)(function (event) {
    onKeyDown == null ? void 0 : onKeyDown(event);

    if (isDisabled || event.defaultPrevented || event.metaKey) {
      return;
    }

    var shouldClickOnEnter = clickOnEnter && event.key === "Enter";
    var shouldClickOnSpace = clickOnSpace && event.key === " ";

    if (!isButton && shouldClickOnSpace) {
      event.preventDefault();
      setIsActive(true);
      return;
    }

    if (!isButton && shouldClickOnEnter) {
      event.preventDefault();
      var self = event.currentTarget;
      self.click();
      return;
    }
  }, [isDisabled, isButton, onKeyDown, clickOnEnter, clickOnSpace]);
  var handleKeyUp = (0, _react.useCallback)(function (event) {
    onKeyUp == null ? void 0 : onKeyUp(event);
    if (isDisabled || event.defaultPrevented || event.metaKey) return;
    var shouldClickOnSpace = clickOnSpace && event.key === " ";

    if (!isButton && shouldClickOnSpace) {
      event.preventDefault();
      setIsActive(false);
      var self = event.currentTarget;
      self.click();
    }
  }, [clickOnSpace, isButton, isDisabled, onKeyUp]);
  var handleMouseDown = (0, _react.useCallback)(function (event) {
    /**
     * Prevent right-click from triggering the
     * active state.
     */
    if ((0, _utils.isRightClick)(event)) return;

    if (isDisabled) {
      event.stopPropagation();
      event.preventDefault();
      return;
    }

    if (!isButton) {
      setIsActive(true);
    }

    onMouseDown == null ? void 0 : onMouseDown(event);
  }, [isDisabled, isButton, onMouseDown]);
  var handleMouseUp = (0, _react.useCallback)(function (event) {
    if (!isButton) {
      setIsActive(false);
    }

    onMouseUp == null ? void 0 : onMouseUp(event);
  }, [onMouseUp, isButton]);
  var handleMouseOver = (0, _react.useCallback)(function (event) {
    if (isDisabled) {
      event.preventDefault();
      return;
    }

    onMouseOver == null ? void 0 : onMouseOver(event);
  }, [isDisabled, onMouseOver]);
  var ref = (0, _utils.mergeRefs)(htmlRef, refCallback);

  if (isButton) {
    return _extends({}, htmlProps, {
      ref: ref,
      type: "button",
      "aria-disabled": trulyDisabled ? undefined : isDisabled,
      disabled: trulyDisabled,
      onClick: handleClick,
      onMouseDown: onMouseDown,
      onMouseUp: onMouseUp,
      onKeyUp: onKeyUp,
      onKeyDown: onKeyDown,
      onMouseOver: onMouseOver
    });
  }

  return _extends({}, htmlProps, {
    ref: ref,
    role: "button",
    "data-active": (0, _utils.dataAttr)(isActive),
    "aria-disabled": !!isDisabled,
    tabIndex: trulyDisabled ? undefined : tabIndex,
    onClick: handleClick,
    onMouseDown: handleMouseDown,
    onMouseUp: handleMouseUp,
    onKeyUp: handleKeyUp,
    onKeyDown: handleKeyDown,
    onMouseOver: handleMouseOver
  });
}
//# sourceMappingURL=use-clickable.js.map