@wordpress/components
Version:
UI components for WordPress.
108 lines (105 loc) • 3.48 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _i18n = require("@wordpress/i18n");
var _element = require("@wordpress/element");
var _utils = require("../mobile/color-settings/utils");
var _utils2 = require("./utils");
var _serializer = require("./serializer");
var _constants = require("./constants");
var _style = _interopRequireDefault(require("./style.scss"));
var _body = _interopRequireDefault(require("../panel/body"));
var _radioControl = _interopRequireDefault(require("../radio-control"));
var _rangeControl = _interopRequireDefault(require("../range-control"));
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function CustomGradientPicker({
setColor,
currentValue,
isGradientColor
}) {
const [gradientOrientation, setGradientOrientation] = (0, _element.useState)(_constants.HORIZONTAL_GRADIENT_ORIENTATION);
const [currentColor, setCurrentColor] = (0, _element.useState)(currentValue);
const {
getGradientType,
gradients,
gradientOptions
} = _utils.colorsUtils;
const {
gradientAST
} = (0, _utils2.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 (0, _serializer.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 = (0, _serializer.serializeGradient)({
...gradientAST,
orientation: {
type: 'angular',
value
}
});
if (isGradientColor && gradientColor !== currentColor) {
setCurrentColor(gradientColor);
setColor(gradientColor);
}
}
function getGradientAngle() {
var _gradientAST$orientat;
return (_gradientAST$orientat = gradientAST?.orientation?.value) !== null && _gradientAST$orientat !== void 0 ? _gradientAST$orientat : _constants.DEFAULT_LINEAR_GRADIENT_ANGLE;
}
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_body.default, {
title: (0, _i18n.__)('Gradient Type'),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_radioControl.default, {
selected: gradientType,
options: gradientOptions,
onChange: onGradientTypeChange
})
}), isLinearGradient(gradientType) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_body.default, {
style: _style.default.angleControl,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_rangeControl.default, {
label: (0, _i18n.__)('Angle'),
minimumValue: 0,
maximumValue: 360,
value: getGradientAngle(),
onChange: setGradientAngle
})
})]
});
}
var _default = exports.default = CustomGradientPicker;
//# sourceMappingURL=index.native.js.map