@wordpress/components/build-module/custom-gradient-picker/utils.js

UI components for WordPress.

/**
 * External dependencies
 */
import gradientParser from 'gradient-parser';
import tinycolor from 'tinycolor2';
/**
 * Internal dependencies
 */

import { DEFAULT_GRADIENT, HORIZONTAL_GRADIENT_ORIENTATION, DIRECTIONAL_ORIENTATION_ANGLE_MAP } from './constants';
import { serializeGradient } from './serializer';
export function getLinearGradientRepresentationOfARadial(gradientAST) {
  return serializeGradient({
    type: 'linear-gradient',
    orientation: HORIZONTAL_GRADIENT_ORIENTATION,
    colorStops: gradientAST.colorStops
  });
}

function hasUnsupportedLength(item) {
  return item.length === undefined || item.length.type !== '%';
}

export function getGradientAstWithDefault(value) {
  var _gradientAST$orientat;

  // gradientAST will contain the gradient AST as parsed by gradient-parser npm module.
  // More information of its structure available at https://www.npmjs.com/package/gradient-parser#ast.
  let gradientAST;

  try {
    gradientAST = gradientParser.parse(value)[0];
    gradientAST.value = value;
  } catch (error) {
    gradientAST = gradientParser.parse(DEFAULT_GRADIENT)[0];
    gradientAST.value = DEFAULT_GRADIENT;
  }

  if (((_gradientAST$orientat = gradientAST.orientation) === null || _gradientAST$orientat === void 0 ? void 0 : _gradientAST$orientat.type) === 'directional') {
    gradientAST.orientation.type = 'angular';
    gradientAST.orientation.value = DIRECTIONAL_ORIENTATION_ANGLE_MAP[gradientAST.orientation.value].toString();
  }

  if (gradientAST.colorStops.some(hasUnsupportedLength)) {
    const {
      colorStops
    } = gradientAST;
    const step = 100 / (colorStops.length - 1);
    colorStops.forEach((stop, index) => {
      stop.length = {
        value: step * index,
        type: '%'
      };
    });
    gradientAST.value = serializeGradient(gradientAST);
  }

  return gradientAST;
}
export function getGradientAstWithControlPoints(gradientAST, newControlPoints) {
  return { ...gradientAST,
    colorStops: newControlPoints.map(({
      position,
      color
    }) => {
      const {
        r,
        g,
        b,
        a
      } = tinycolor(color).toRgb();
      return {
        length: {
          type: '%',
          value: position.toString()
        },
        type: a < 1 ? 'rgba' : 'rgb',
        value: a < 1 ? [r, g, b, a] : [r, g, b]
      };
    })
  };
}
export function getStopCssColor(colorStop) {
  switch (colorStop.type) {
    case 'hex':
      return `#${colorStop.value}`;

    case 'literal':
      return colorStop.value;

    case 'rgb':
    case 'rgba':
      return `${colorStop.type}(${colorStop.value.join(',')})`;

    default:
      // Should be unreachable if passing an AST from gradient-parser.
      // See https://github.com/rafaelcaricio/gradient-parser#ast.
      return 'transparent';
  }
}
//# sourceMappingURL=utils.js.map