@gechiui/block-editor/build/components/gradients/use-gradient.js

Generic block editor.

"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.__experimentalGetGradientClass = __experimentalGetGradientClass;
exports.__experimentalGetGradientObjectByGradientValue = __experimentalGetGradientObjectByGradientValue;
exports.__experimentalUseGradient = __experimentalUseGradient;
exports.getGradientSlugByValue = getGradientSlugByValue;
exports.getGradientValueBySlug = getGradientValueBySlug;

var _lodash = require("lodash");

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

var _data = require("@gechiui/data");

var _blockEdit = require("../block-edit");

var _useSetting = _interopRequireDefault(require("../use-setting"));

var _store = require("../../store");

/**
 * External dependencies
 */

/**
 * GeChiUI dependencies
 */

/**
 * Internal dependencies
 */
function __experimentalGetGradientClass(gradientSlug) {
  if (!gradientSlug) {
    return undefined;
  }

  return `has-${gradientSlug}-gradient-background`;
}
/**
 * Retrieves the gradient value per slug.
 *
 * @param {Array}  gradients Gradient Palette
 * @param {string} slug      Gradient slug
 *
 * @return {string} Gradient value.
 */


function getGradientValueBySlug(gradients, slug) {
  const gradient = (0, _lodash.find)(gradients, ['slug', slug]);
  return gradient && gradient.gradient;
}

function __experimentalGetGradientObjectByGradientValue(gradients, value) {
  const gradient = (0, _lodash.find)(gradients, ['gradient', value]);
  return gradient;
}
/**
 * Retrieves the gradient slug per slug.
 *
 * @param {Array}  gradients Gradient Palette
 * @param {string} value     Gradient value
 * @return {string} Gradient slug.
 */


function getGradientSlugByValue(gradients, value) {
  const gradient = __experimentalGetGradientObjectByGradientValue(gradients, value);

  return gradient && gradient.slug;
}

function __experimentalUseGradient() {
  let {
    gradientAttribute = 'gradient',
    customGradientAttribute = 'customGradient'
  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  const {
    clientId
  } = (0, _blockEdit.useBlockEditContext)();
  const userGradientPalette = (0, _useSetting.default)('color.gradients.custom');
  const themeGradientPalette = (0, _useSetting.default)('color.gradients.theme');
  const defaultGradientPalette = (0, _useSetting.default)('color.gradients.default');
  const allGradients = (0, _element.useMemo)(() => [...(userGradientPalette || []), ...(themeGradientPalette || []), ...(defaultGradientPalette || [])], [userGradientPalette, themeGradientPalette, defaultGradientPalette]);
  const {
    gradient,
    customGradient
  } = (0, _data.useSelect)(select => {
    const {
      getBlockAttributes
    } = select(_store.store);
    const attributes = getBlockAttributes(clientId) || {};
    return {
      customGradient: attributes[customGradientAttribute],
      gradient: attributes[gradientAttribute]
    };
  }, [clientId, gradientAttribute, customGradientAttribute]);
  const {
    updateBlockAttributes
  } = (0, _data.useDispatch)(_store.store);
  const setGradient = (0, _element.useCallback)(newGradientValue => {
    const slug = getGradientSlugByValue(allGradients, newGradientValue);

    if (slug) {
      updateBlockAttributes(clientId, {
        [gradientAttribute]: slug,
        [customGradientAttribute]: undefined
      });
      return;
    }

    updateBlockAttributes(clientId, {
      [gradientAttribute]: undefined,
      [customGradientAttribute]: newGradientValue
    });
  }, [allGradients, clientId, updateBlockAttributes]);

  const gradientClass = __experimentalGetGradientClass(gradient);

  let gradientValue;

  if (gradient) {
    gradientValue = getGradientValueBySlug(allGradients, gradient);
  } else {
    gradientValue = customGradient;
  }

  return {
    gradientClass,
    gradientValue,
    setGradient
  };
}
//# sourceMappingURL=use-gradient.js.map