@helpscout/hsds-react/components/MessageCard/utils/MessageCard.hooks.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.useButtonResizeOnSelection = useButtonResizeOnSelection;

var _react = _interopRequireDefault(require("react"));

var DEFAULT_TRANSITION_TIMEOUT = 200;
/**
 * Survey buttons resize from a larger to a smaller size after they have
 * been selected, but they do so after a short delay to allow for animations
 * to complete. This hooks provides the logic to resize the buttons on selection
 * after a given delay.
 */

function useButtonResizeOnSelection(_ref) {
  var _ref$defaultSize = _ref.defaultSize,
      defaultSize = _ref$defaultSize === void 0 ? 'lg' : _ref$defaultSize,
      _ref$selectedSize = _ref.selectedSize,
      selectedSize = _ref$selectedSize === void 0 ? 'md' : _ref$selectedSize,
      _ref$onSelection = _ref.onSelection,
      onSelection = _ref$onSelection === void 0 ? function () {} : _ref$onSelection,
      _ref$transitionTimeou = _ref.transitionTimeout,
      transitionTimeout = _ref$transitionTimeou === void 0 ? DEFAULT_TRANSITION_TIMEOUT : _ref$transitionTimeou,
      _ref$disableTransitio = _ref.disableTransition,
      disableTransition = _ref$disableTransitio === void 0 ? false : _ref$disableTransitio;

  var _React$useState = _react.default.useState(defaultSize),
      buttonSize = _React$useState[0],
      setButtonSize = _React$useState[1];

  var timeoutId = null;

  _react.default.useEffect(function () {
    return function () {
      if (timeoutId) {
        clearTimeout(timeoutId);
      }
    };
  }, [timeoutId]);

  function handleOnClick(id) {
    onSelection(id);
    if (disableTransition) return;
    timeoutId = setTimeout(function () {
      setButtonSize(selectedSize);
    }, transitionTimeout);
  }

  return {
    buttonSize: buttonSize,
    handleOnClick: handleOnClick
  };
}