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

UI components for WordPress.

import { createElement, Fragment } from "@wordpress/element";

/**
 * WordPress dependencies
 */
import { PanelBody, RadioControl, RangeControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { useState } from '@wordpress/element';
/**
 * Internal dependencies
 */

import { colorsUtils } from '../mobile/color-settings/utils';
import { getGradientAstWithDefault } from './utils';
import { serializeGradient } from './serializer';
import { DEFAULT_LINEAR_GRADIENT_ANGLE, HORIZONTAL_GRADIENT_ORIENTATION } from './constants';
import styles from './style.scss';

function CustomGradientPicker(_ref) {
  let {
    setColor,
    currentValue,
    isGradientColor
  } = _ref;
  const [gradientOrientation, setGradientOrientation] = useState(HORIZONTAL_GRADIENT_ORIENTATION);
  const [currentColor, setCurrentColor] = useState(currentValue);
  const {
    getGradientType,
    gradients,
    gradientOptions
  } = colorsUtils;
  const {
    gradientAST
  } = getGradientAstWithDefault(currentColor);
  const gradientType = getGradientType(currentColor);

  function isLinearGradient(type) {
    return type === gradients.linear;
  }

  function getGradientColor(type) {
    const {
      orientation,
      ...restGradientAST
    } = gradientAST;

    if (orientation) {
      setGradientOrientation(orientation);
    }

    return serializeGradient(isLinearGradient(type) ? { ...gradientAST,
      ...(gradientAST.orientation ? {} : {
        orientation: gradientOrientation
      }),
      type
    } : { ...restGradientAST,
      type
    });
  }

  function onGradientTypeChange(type) {
    const gradientColor = getGradientColor(type);
    setCurrentColor(gradientColor);
    setColor(gradientColor);
  }

  function setGradientAngle(value) {
    const gradientColor = serializeGradient({ ...gradientAST,
      orientation: {
        type: 'angular',
        value
      }
    });

    if (isGradientColor && gradientColor !== currentColor) {
      setCurrentColor(gradientColor);
      setColor(gradientColor);
    }
  }

  function getGradientAngle() {
    var _gradientAST$orientat, _gradientAST$orientat2;

    return (_gradientAST$orientat = gradientAST === null || gradientAST === void 0 ? void 0 : (_gradientAST$orientat2 = gradientAST.orientation) === null || _gradientAST$orientat2 === void 0 ? void 0 : _gradientAST$orientat2.value) !== null && _gradientAST$orientat !== void 0 ? _gradientAST$orientat : DEFAULT_LINEAR_GRADIENT_ANGLE;
  }

  return createElement(Fragment, null, createElement(PanelBody, {
    title: __('Gradient Type')
  }, createElement(RadioControl, {
    selected: gradientType,
    options: gradientOptions,
    onChange: onGradientTypeChange
  })), isLinearGradient(gradientType) && createElement(PanelBody, {
    style: styles.angleControl
  }, createElement(RangeControl, {
    label: __('Angle'),
    minimumValue: 0,
    maximumValue: 360,
    value: getGradientAngle(),
    onChange: setGradientAngle
  })));
}

export default CustomGradientPicker;
//# sourceMappingURL=index.native.js.map