rsuite/cjs/Disclosure/Disclosure.js

A suite of react components

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

exports.__esModule = true;
exports.default = void 0;

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

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

var _DisclosureContext = _interopRequireWildcard(require("./DisclosureContext"));

var _DisclosureButton = _interopRequireDefault(require("./DisclosureButton"));

var _DisclosureContent = _interopRequireDefault(require("./DisclosureContent"));

var _useClickOutside = _interopRequireDefault(require("../utils/useClickOutside"));

// Headless Disclosure
// Ref: https://w3c.github.io/aria-practices/#disclosure
var initialDisclosureState = {
  open: false
};

function disclosureReducer(state, action) {
  switch (action.type) {
    case _DisclosureContext.DisclosureActionTypes.Show:
      return (0, _extends2.default)({}, state, {
        open: true
      });

    case _DisclosureContext.DisclosureActionTypes.Hide:
      return (0, _extends2.default)({}, state, {
        open: false
      });
  }

  return state;
}

var Disclosure = /*#__PURE__*/_react.default.memo(function (props) {
  var children = props.children,
      openProp = props.open,
      _props$defaultOpen = props.defaultOpen,
      defaultOpen = _props$defaultOpen === void 0 ? false : _props$defaultOpen,
      _props$hideOnClickOut = props.hideOnClickOutside,
      hideOnClickOutside = _props$hideOnClickOut === void 0 ? false : _props$hideOnClickOut,
      onToggle = props.onToggle,
      _props$trigger = props.trigger,
      trigger = _props$trigger === void 0 ? ['click'] : _props$trigger;
  var parentDisclosure = (0, _react.useContext)(_DisclosureContext.default);

  var _useReducer = (0, _react.useReducer)(disclosureReducer, (0, _extends2.default)({}, initialDisclosureState, {
    open: defaultOpen
  })),
      openState = _useReducer[0].open,
      dispatch = _useReducer[1];

  var containerElementRef = (0, _react.useRef)(null);
  var open = openProp !== null && openProp !== void 0 ? openProp : openState;
  (0, _useClickOutside.default)({
    enabled: hideOnClickOutside,
    isOutside: function isOutside(event) {
      var _containerElementRef$;

      return !((_containerElementRef$ = containerElementRef.current) !== null && _containerElementRef$ !== void 0 && _containerElementRef$.contains(event.target));
    },
    handle: function handle() {
      return dispatch({
        type: _DisclosureContext.DisclosureActionTypes.Hide
      });
    }
  });
  var onMouseOver = (0, _react.useCallback)(function (event) {
    if (!open) {
      dispatch({
        type: _DisclosureContext.DisclosureActionTypes.Show
      });
      onToggle === null || onToggle === void 0 ? void 0 : onToggle(true, event);
    }
  }, [open, dispatch, onToggle]);
  var onMouseOut = (0, _react.useCallback)(function (event) {
    if (open) {
      dispatch({
        type: _DisclosureContext.DisclosureActionTypes.Hide
      });
      onToggle === null || onToggle === void 0 ? void 0 : onToggle(false, event);
    }
  }, [open, dispatch, onToggle]);
  var contextValue = (0, _react.useMemo)(function () {
    var cascadeDispatch = function cascadeDispatch(action) {
      var result = dispatch(action);

      if ('cascade' in action) {
        parentDisclosure === null || parentDisclosure === void 0 ? void 0 : parentDisclosure[1](action);
      }

      return result;
    };

    return [{
      open: open
    }, cascadeDispatch, {
      onToggle: onToggle,
      trigger: trigger
    }];
  }, [parentDisclosure, open, dispatch, onToggle, trigger]);
  var renderProps = (0, _react.useMemo)(function () {
    var renderProps = {
      open: open
    };

    if (trigger.includes('mouseover')) {
      renderProps.onMouseOver = onMouseOver;
      renderProps.onMouseOut = onMouseOut;
    }

    return renderProps;
  }, [open, trigger, onMouseOver, onMouseOut]);
  return /*#__PURE__*/_react.default.createElement(_DisclosureContext.default.Provider, {
    value: contextValue
  }, children(renderProps, containerElementRef));
});

Disclosure.Button = _DisclosureButton.default;
Disclosure.Content = _DisclosureContent.default;
var _default = Disclosure;
exports.default = _default;