@wordpress/components/build/duotone-picker/duotone-picker.js

UI components for WordPress.

"use strict";

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

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

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

var _lodash = require("lodash");

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

var _colorListPicker = _interopRequireDefault(require("../color-list-picker"));

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

var _customDuotoneBar = _interopRequireDefault(require("./custom-duotone-bar"));

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

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
function DuotonePicker({
  colorPalette,
  duotonePalette,
  value,
  onChange
}) {
  const [defaultDark, defaultLight] = (0, _element.useMemo)(() => (0, _utils.getDefaultColors)(colorPalette), [colorPalette]);
  return (0, _element.createElement)(_circularOptionPicker.default, {
    options: duotonePalette.map(({
      colors,
      slug,
      name
    }) => {
      const style = {
        background: (0, _utils.getGradientFromCSSColors)(colors, '135deg'),
        color: 'transparent'
      };
      const tooltipText = name !== null && name !== void 0 ? name : (0, _i18n.sprintf)( // translators: %s: duotone code e.g: "dark-grayscale" or "7f7f7f-ffffff".
      (0, _i18n.__)('Duotone code: %s'), slug);
      const label = name ? (0, _i18n.sprintf)( // translators: %s: The name of the option e.g: "Dark grayscale".
      (0, _i18n.__)('Duotone: %s'), name) : tooltipText;
      const isSelected = (0, _lodash.isEqual)(colors, value);
      return (0, _element.createElement)(_circularOptionPicker.default.Option, {
        key: slug,
        value: colors,
        isSelected: isSelected,
        "aria-label": label,
        tooltipText: tooltipText,
        style: style,
        onClick: () => {
          onChange(isSelected ? undefined : colors);
        }
      });
    }),
    actions: (0, _element.createElement)(_circularOptionPicker.default.ButtonAction, {
      onClick: () => onChange(undefined)
    }, (0, _i18n.__)('Clear'))
  }, (0, _element.createElement)(_customDuotoneBar.default, {
    value: value,
    onChange: onChange
  }), (0, _element.createElement)(_colorListPicker.default, {
    labels: [(0, _i18n.__)('Shadows'), (0, _i18n.__)('Highlights')],
    colors: colorPalette,
    value: value,
    onChange: newColors => {
      if (!newColors[0]) {
        newColors[0] = defaultDark;
      }

      if (!newColors[1]) {
        newColors[1] = defaultLight;
      }

      const newValue = newColors.length >= 2 ? newColors : undefined;
      onChange(newValue);
    }
  }));
}

var _default = DuotonePicker;
exports.default = _default;
//# sourceMappingURL=duotone-picker.js.map