@wordpress/components/build/disabled/index.js

UI components for WordPress.

"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _element = require("@wordpress/element");

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

var _lodash = require("lodash");

var _classnames = _interopRequireDefault(require("classnames"));

var _dom = require("@wordpress/dom");

var _disabledStyles = require("./styles/disabled-styles");

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const {
  Consumer,
  Provider
} = (0, _element.createContext)(false);
/**
 * Names of control nodes which qualify for disabled behavior.
 *
 * See WHATWG HTML Standard: 4.10.18.5: "Enabling and disabling form controls: the disabled attribute".
 *
 * @see https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#enabling-and-disabling-form-controls:-the-disabled-attribute
 *
 * @type {string[]}
 */

const DISABLED_ELIGIBLE_NODE_NAMES = ['BUTTON', 'FIELDSET', 'INPUT', 'OPTGROUP', 'OPTION', 'SELECT', 'TEXTAREA'];

function Disabled({
  className,
  children,
  isDisabled = true,
  ...props
}) {
  const node = (0, _element.useRef)();

  const disable = () => {
    _dom.focus.focusable.find(node.current).forEach(focusable => {
      if ((0, _lodash.includes)(DISABLED_ELIGIBLE_NODE_NAMES, focusable.nodeName)) {
        focusable.setAttribute('disabled', '');
      }

      if (focusable.nodeName === 'A') {
        focusable.setAttribute('tabindex', -1);
      }

      const tabIndex = focusable.getAttribute('tabindex');

      if (tabIndex !== null && tabIndex !== '-1') {
        focusable.removeAttribute('tabindex');
      }

      if (focusable.hasAttribute('contenteditable')) {
        focusable.setAttribute('contenteditable', 'false');
      }
    });
  }; // Debounce re-disable since disabling process itself will incur
  // additional mutations which should be ignored.


  const debouncedDisable = (0, _element.useCallback)((0, _lodash.debounce)(disable, {
    leading: true
  }), []);
  (0, _element.useLayoutEffect)(() => {
    if (!isDisabled) {
      return;
    }

    disable();
    const observer = new window.MutationObserver(debouncedDisable);
    observer.observe(node.current, {
      childList: true,
      attributes: true,
      subtree: true
    });
    return () => {
      observer.disconnect();
      debouncedDisable.cancel();
    };
  }, []);

  if (!isDisabled) {
    return (0, _element.createElement)(Provider, {
      value: false
    }, children);
  }

  return (0, _element.createElement)(Provider, {
    value: true
  }, (0, _element.createElement)(_disabledStyles.StyledWrapper, (0, _extends2.default)({
    ref: node,
    className: (0, _classnames.default)(className, 'components-disabled')
  }, props), children));
}

Disabled.Consumer = Consumer;
var _default = Disabled;
exports.default = _default;
//# sourceMappingURL=index.js.map