@wordpress/block-library/build-module/cover/use-cover-is-dark.native.js

Block library for the WordPress editor.

/**
 * External dependencies
 */
import { colord } from 'colord';
/**
 * WordPress dependencies
 */

import { useEffect, useState } from '@wordpress/element';
/**
 * useCoverIsDark is a hook that returns a boolean variable specifying if the cover
 * background is dark or not.
 *
 * @param {?boolean} initialValue Initial value.
 * @param {?string}  url          Url of the media background.
 * @param {?number}  dimRatio     Transparency of the overlay color. If an image and
 *                                color are set, dimRatio is used to decide what is used
 *                                for background darkness checking purposes.
 * @param {?string}  overlayColor String containing the overlay color value if one exists.
 *
 * @return {boolean} True if the cover background is considered "dark" and false otherwise.
 */

export default function useCoverIsDark() {
  let initialValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
  let url = arguments.length > 1 ? arguments[1] : undefined;
  let dimRatio = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 50;
  let overlayColor = arguments.length > 3 ? arguments[3] : undefined;
  const [isDark, setIsDark] = useState(initialValue);
  useEffect(() => {
    // If opacity is greater than 50 the dominant color is the overlay color,
    // so use that color for the dark mode computation.
    if (dimRatio > 50 || !url) {
      if (!overlayColor) {
        // If no overlay color exists the overlay color is black (isDark )
        setIsDark(true);
        return;
      }

      setIsDark(colord(overlayColor).isDark());
    }
  }, [overlayColor, dimRatio > 50 || !url, setIsDark]);
  useEffect(() => {
    if (!url && !overlayColor) {
      // Reset isDark.
      setIsDark(false);
    }
  }, [!url && !overlayColor, setIsDark]);
  return isDark;
}
//# sourceMappingURL=use-cover-is-dark.native.js.map