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

UI components for WordPress.

"use strict";

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

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

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

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

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

var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));

var _circularOptionPicker = _interopRequireDefault(require("../circular-option-picker"));

var _customGradientPicker = _interopRequireDefault(require("../custom-gradient-picker"));

var _vStack = require("../v-stack");

var _styles = require("../color-palette/styles");

var _spacer = require("../spacer");

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
// The Multiple Origin Gradients have a `gradients` property (an array of
// gradient objects), while Single Origin ones have a `gradient` property.
const isMultipleOriginObject = obj => Array.isArray(obj.gradients) && !('gradient' in obj);

const isMultipleOriginArray = arr => {
  return arr.length > 0 && arr.every(gradientObj => isMultipleOriginObject(gradientObj));
};

function SingleOrigin(_ref) {
  let {
    className,
    clearGradient,
    gradients,
    onChange,
    value,
    actions
  } = _ref;
  const gradientOptions = (0, _element.useMemo)(() => {
    return gradients.map((_ref2, index) => {
      let {
        gradient,
        name
      } = _ref2;
      return (0, _element.createElement)(_circularOptionPicker.default.Option, {
        key: gradient,
        value: gradient,
        isSelected: value === gradient,
        tooltipText: name || // translators: %s: gradient code e.g: "linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);".
        (0, _i18n.sprintf)((0, _i18n.__)('Gradient code: %s'), gradient),
        style: {
          color: 'rgba( 0,0,0,0 )',
          background: gradient
        },
        onClick: value === gradient ? clearGradient : () => onChange(gradient, index),
        "aria-label": name ? // translators: %s: The name of the gradient e.g: "Angular red to blue".
        (0, _i18n.sprintf)((0, _i18n.__)('Gradient: %s'), name) : // translators: %s: gradient code e.g: "linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);".
        (0, _i18n.sprintf)((0, _i18n.__)('Gradient code: %s'), gradient)
      });
    });
  }, [gradients, value, onChange, clearGradient]);
  return (0, _element.createElement)(_circularOptionPicker.default, {
    className: className,
    options: gradientOptions,
    actions: actions
  });
}

function MultipleOrigin(_ref3) {
  let {
    className,
    clearGradient,
    gradients,
    onChange,
    value,
    actions,
    headingLevel
  } = _ref3;
  return (0, _element.createElement)(_vStack.VStack, {
    spacing: 3,
    className: className
  }, gradients.map((_ref4, index) => {
    let {
      name,
      gradients: gradientSet
    } = _ref4;
    return (0, _element.createElement)(_vStack.VStack, {
      spacing: 2,
      key: index
    }, (0, _element.createElement)(_styles.ColorHeading, {
      level: headingLevel
    }, name), (0, _element.createElement)(SingleOrigin, (0, _extends2.default)({
      clearGradient: clearGradient,
      gradients: gradientSet,
      onChange: gradient => onChange(gradient, index),
      value: value
    }, gradients.length === index + 1 ? {
      actions
    } : {})));
  }));
}

function Component(props) {
  if (isMultipleOriginArray(props.gradients)) {
    return (0, _element.createElement)(MultipleOrigin, props);
  }

  return (0, _element.createElement)(SingleOrigin, props);
}
/**
 *  GradientPicker is a React component that renders a color gradient picker to
 * define a multi step gradient. There's either a _linear_ or a _radial_ type
 * available.
 *
 * ```jsx
 *import { GradientPicker } from '@wordpress/components';
 *import { useState } from '@wordpress/element';
 *
 *const myGradientPicker = () => {
 *	const [ gradient, setGradient ] = useState( null );
 *
 *	return (
 *		<GradientPicker
 *			__nextHasNoMargin
 *			value={ gradient }
 *			onChange={ ( currentGradient ) => setGradient( currentGradient ) }
 *			gradients={ [
 *				{
 *					name: 'JShine',
 *					gradient:
 *						'linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)',
 *					slug: 'jshine',
 *				},
 *				{
 *					name: 'Moonlit Asteroid',
 *					gradient:
 *						'linear-gradient(135deg,#0F2027 0%, #203A43 0%, #2c5364 100%)',
 *					slug: 'moonlit-asteroid',
 *				},
 *				{
 *					name: 'Rastafarie',
 *					gradient:
 *						'linear-gradient(135deg,#1E9600 0%, #FFF200 0%, #FF0000 100%)',
 *					slug: 'rastafari',
 *				},
 *			] }
 *		/>
 *	);
 *};
 *```
 *
 */


function GradientPicker(_ref5) {
  let {
    /** Start opting into the new margin-free styles that will become the default in a future version. */
    __nextHasNoMargin = false,
    className,
    gradients = [],
    onChange,
    value,
    clearable = true,
    disableCustomGradients = false,
    __experimentalIsRenderedInSidebar,
    headingLevel = 2
  } = _ref5;
  const clearGradient = (0, _element.useCallback)(() => onChange(undefined), [onChange]);

  if (!__nextHasNoMargin) {
    (0, _deprecated.default)('Outer margin styles for wp.components.GradientPicker', {
      since: '6.1',
      version: '6.4',
      hint: 'Set the `__nextHasNoMargin` prop to true to start opting into the new styles, which will become the default in a future version'
    });
  }

  const deprecatedMarginSpacerProps = !__nextHasNoMargin ? {
    marginTop: !gradients.length ? 3 : undefined,
    marginBottom: !clearable ? 6 : 0
  } : {};
  return (// Outmost Spacer wrapper can be removed when deprecation period is over
    (0, _element.createElement)(_spacer.Spacer, (0, _extends2.default)({
      marginBottom: 0
    }, deprecatedMarginSpacerProps), (0, _element.createElement)(_vStack.VStack, {
      spacing: gradients.length ? 4 : 0
    }, !disableCustomGradients && (0, _element.createElement)(_customGradientPicker.default, {
      __nextHasNoMargin: true,
      __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
      value: value,
      onChange: onChange
    }), (gradients.length || clearable) && (0, _element.createElement)(Component, {
      className: className,
      clearGradient: clearGradient,
      gradients: gradients,
      onChange: onChange,
      value: value,
      actions: clearable && !disableCustomGradients && (0, _element.createElement)(_circularOptionPicker.default.ButtonAction, {
        onClick: clearGradient
      }, (0, _i18n.__)('Clear')),
      headingLevel: headingLevel
    })))
  );
}

var _default = GradientPicker;
exports.default = _default;
//# sourceMappingURL=index.js.map