@gechiui/block-editor/build/hooks/color-panel.js

Generic block editor.

"use strict";

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

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

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

var _i18n = require("@gechiui/i18n");

var _panelColorGradientSettings = _interopRequireDefault(require("../components/colors-gradients/panel-color-gradient-settings"));

var _contrastChecker = _interopRequireDefault(require("../components/contrast-checker"));

var _inspectorControls = _interopRequireDefault(require("../components/inspector-controls"));

var _useBlockRefs = require("../components/block-list/use-block-props/use-block-refs");

/**
 * GeChiUI dependencies
 */

/**
 * Internal dependencies
 */
function getComputedStyle(node) {
  return node.ownerDocument.defaultView.getComputedStyle(node);
}

function ColorPanel(_ref) {
  let {
    settings,
    clientId,
    enableContrastChecking = true,
    showTitle = true
  } = _ref;
  const [detectedBackgroundColor, setDetectedBackgroundColor] = (0, _element.useState)();
  const [detectedColor, setDetectedColor] = (0, _element.useState)();
  const ref = (0, _useBlockRefs.__unstableUseBlockRef)(clientId);
  (0, _element.useEffect)(() => {
    if (!enableContrastChecking) {
      return;
    }

    if (!ref.current) {
      return;
    }

    setDetectedColor(getComputedStyle(ref.current).color);
    let backgroundColorNode = ref.current;
    let backgroundColor = getComputedStyle(backgroundColorNode).backgroundColor;

    while (backgroundColor === 'rgba(0, 0, 0, 0)' && backgroundColorNode.parentNode && backgroundColorNode.parentNode.nodeType === backgroundColorNode.parentNode.ELEMENT_NODE) {
      backgroundColorNode = backgroundColorNode.parentNode;
      backgroundColor = getComputedStyle(backgroundColorNode).backgroundColor;
    }

    setDetectedBackgroundColor(backgroundColor);
  });
  return (0, _element.createElement)(_inspectorControls.default, null, (0, _element.createElement)(_panelColorGradientSettings.default, {
    title: (0, _i18n.__)('颜色'),
    initialOpen: false,
    settings: settings,
    showTitle: showTitle,
    __experimentalHasMultipleOrigins: true,
    __experimentalIsRenderedInSidebar: true
  }, enableContrastChecking && (0, _element.createElement)(_contrastChecker.default, {
    backgroundColor: detectedBackgroundColor,
    textColor: detectedColor
  })));
}
//# sourceMappingURL=color-panel.js.map