@wordpress/components/build/custom-gradient-picker/index.js

UI components for WordPress.

"use strict";

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

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

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

var _lodash = require("lodash");

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

var _anglePickerControl = _interopRequireDefault(require("../angle-picker-control"));

var _customGradientBar = _interopRequireDefault(require("../custom-gradient-bar"));

var _flex = require("../flex");

var _selectControl = _interopRequireDefault(require("../select-control"));

var _utils = require("./utils");

var _serializer = require("./serializer");

var _constants = require("./constants");

var _customGradientPickerStyles = require("./styles/custom-gradient-picker-styles");

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const GradientAnglePicker = ({
  gradientAST,
  hasGradient,
  onChange
}) => {
  const angle = (0, _lodash.get)(gradientAST, ['orientation', 'value'], _constants.DEFAULT_LINEAR_GRADIENT_ANGLE);

  const onAngleChange = newAngle => {
    onChange((0, _serializer.serializeGradient)({ ...gradientAST,
      orientation: {
        type: 'angular',
        value: newAngle
      }
    }));
  };

  return (0, _element.createElement)(_anglePickerControl.default, {
    hideLabelFromVision: true,
    onChange: onAngleChange,
    value: hasGradient ? angle : ''
  });
};

const GradientTypePicker = ({
  gradientAST,
  hasGradient,
  onChange
}) => {
  const {
    type
  } = gradientAST;

  const onSetLinearGradient = () => {
    onChange((0, _serializer.serializeGradient)({ ...gradientAST,
      ...(gradientAST.orientation ? {} : {
        orientation: _constants.HORIZONTAL_GRADIENT_ORIENTATION
      }),
      type: 'linear-gradient'
    }));
  };

  const onSetRadialGradient = () => {
    onChange((0, _serializer.serializeGradient)({ ...(0, _lodash.omit)(gradientAST, ['orientation']),
      type: 'radial-gradient'
    }));
  };

  const handleOnChange = next => {
    if (next === 'linear-gradient') {
      onSetLinearGradient();
    }

    if (next === 'radial-gradient') {
      onSetRadialGradient();
    }
  };

  return (0, _element.createElement)(_selectControl.default, {
    className: "components-custom-gradient-picker__type-picker",
    label: (0, _i18n.__)('Type'),
    labelPosition: 'side',
    onChange: handleOnChange,
    options: _constants.GRADIENT_OPTIONS,
    value: hasGradient && type
  });
};

function CustomGradientPicker({
  value,
  onChange
}) {
  const gradientAST = (0, _utils.getGradientAstWithDefault)(value); // On radial gradients the bar should display a linear gradient.
  // On radial gradients the bar represents a slice of the gradient from the center until the outside.

  const background = gradientAST.type === 'radial-gradient' ? (0, _utils.getLinearGradientRepresentationOfARadial)(gradientAST) : gradientAST.value;
  const hasGradient = gradientAST.value !== _constants.DEFAULT_GRADIENT; // Control points color option may be hex from presets, custom colors will be rgb.
  // The position should always be a percentage.

  const controlPoints = gradientAST.colorStops.map(colorStop => ({
    color: (0, _utils.getStopCssColor)(colorStop),
    position: parseInt(colorStop.length.value)
  }));
  return (0, _element.createElement)("div", {
    className: "components-custom-gradient-picker"
  }, (0, _element.createElement)(_customGradientBar.default, {
    background: background,
    hasGradient: hasGradient,
    value: controlPoints,
    onChange: newControlPoints => {
      onChange((0, _serializer.serializeGradient)((0, _utils.getGradientAstWithControlPoints)(gradientAST, newControlPoints)));
    }
  }), (0, _element.createElement)(_flex.Flex, {
    gap: 3,
    className: "components-custom-gradient-picker__ui-line"
  }, (0, _element.createElement)(_customGradientPickerStyles.SelectWrapper, null, (0, _element.createElement)(GradientTypePicker, {
    gradientAST: gradientAST,
    hasGradient: hasGradient,
    onChange: onChange
  })), (0, _element.createElement)(_customGradientPickerStyles.AccessoryWrapper, null, gradientAST.type === 'linear-gradient' && (0, _element.createElement)(GradientAnglePicker, {
    gradientAST: gradientAST,
    hasGradient: hasGradient,
    onChange: onChange
  }))));
}
//# sourceMappingURL=index.js.map