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

Generic block editor.

import { createElement } from "@gechiui/element";

/**
 * GeChiUI dependencies
 */
import { useState, useEffect } from '@gechiui/element';
import { __ } from '@gechiui/i18n';
/**
 * Internal dependencies
 */

import PanelColorGradientSettings from '../components/colors-gradients/panel-color-gradient-settings';
import ContrastChecker from '../components/contrast-checker';
import InspectorControls from '../components/inspector-controls';
import { __unstableUseBlockRef as useBlockRef } from '../components/block-list/use-block-props/use-block-refs';

function getComputedStyle(node) {
  return node.ownerDocument.defaultView.getComputedStyle(node);
}

export default function ColorPanel(_ref) {
  let {
    settings,
    clientId,
    enableContrastChecking = true,
    showTitle = true
  } = _ref;
  const [detectedBackgroundColor, setDetectedBackgroundColor] = useState();
  const [detectedColor, setDetectedColor] = useState();
  const ref = useBlockRef(clientId);
  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 createElement(InspectorControls, null, createElement(PanelColorGradientSettings, {
    title: __('颜色'),
    initialOpen: false,
    settings: settings,
    showTitle: showTitle,
    __experimentalHasMultipleOrigins: true,
    __experimentalIsRenderedInSidebar: true
  }, enableContrastChecking && createElement(ContrastChecker, {
    backgroundColor: detectedBackgroundColor,
    textColor: detectedColor
  })));
}
//# sourceMappingURL=color-panel.js.map