@wordpress/components/build/color-edit/index.js

UI components for WordPress.

"use strict";

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

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

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

var _classnames = _interopRequireDefault(require("classnames"));

var _lodash = require("lodash");

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

var _icons = require("@wordpress/icons");

var _dropdown = _interopRequireDefault(require("../dropdown"));

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

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

var _button = _interopRequireDefault(require("../button"));

var _textControl = _interopRequireDefault(require("../text-control"));

var _baseControl = _interopRequireDefault(require("../base-control"));

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
function DropdownOpenOnMount({
  shouldOpen,
  isOpen,
  onToggle
}) {
  (0, _element.useEffect)(() => {
    if (shouldOpen && !isOpen) {
      onToggle();
    }
  }, []);
  return null;
}

function ColorOption({
  color,
  name,
  slug,
  onChange,
  onRemove,
  onConfirm,
  confirmLabel = (0, _i18n.__)('OK'),
  isEditingNameOnMount = false,
  isEditingColorOnMount = false,
  onCancel,
  immutableColorSlugs = []
}) {
  const [isHover, setIsHover] = (0, _element.useState)(false);
  const [isFocused, setIsFocused] = (0, _element.useState)(false);
  const [isEditingName, setIsEditingName] = (0, _element.useState)(isEditingNameOnMount);
  const [isShowingAdvancedPanel, setIsShowingAdvancedPanel] = (0, _element.useState)(false);
  const isShowingControls = (isHover || isFocused || isEditingName || isShowingAdvancedPanel) && !immutableColorSlugs.includes(slug);
  return (0, _element.createElement)("div", {
    tabIndex: 0,
    className: (0, _classnames.default)('components-color-edit__color-option', {
      'is-hover': isHover && !isEditingName && !isShowingAdvancedPanel
    }),
    onMouseEnter: () => setIsHover(true),
    onMouseLeave: () => setIsHover(false),
    onFocus: () => setIsFocused(true),
    onBlur: () => setIsFocused(false),
    "aria-label": name ? // translators: %s: The name of the color e.g: "vivid red".
    (0, _i18n.sprintf)((0, _i18n.__)('Color: %s'), name) : // translators: %s: color hex code e.g: "#f00".
    (0, _i18n.sprintf)((0, _i18n.__)('Color code: %s'), color)
  }, (0, _element.createElement)("div", {
    className: "components-color-edit__color-option-main-area"
  }, (0, _element.createElement)(_dropdown.default, {
    renderToggle: ({
      isOpen,
      onToggle
    }) => (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(DropdownOpenOnMount, {
      shouldOpen: isEditingColorOnMount,
      isOpen: isOpen,
      onToggle: onToggle
    }), (0, _element.createElement)(_circularOptionPicker.default.Option, {
      style: {
        backgroundColor: color,
        color
      },
      "aria-expanded": isOpen,
      "aria-haspopup": "true",
      onClick: onToggle,
      "aria-label": (0, _i18n.__)('Edit color value')
    })),
    renderContent: () => (0, _element.createElement)(_colorPicker.default, {
      color: color,
      onChangeComplete: newColor => onChange({
        color: newColor.hex,
        slug,
        name
      }),
      disableAlpha: true
    })
  }), !isEditingName && (0, _element.createElement)("div", {
    className: "components-color-edit__color-option-color-name"
  }, name), isEditingName && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_textControl.default, {
    className: "components-color-edit__color-option-color-name-input",
    hideLabelFromVision: true,
    onChange: newColorName => onChange({
      color,
      slug: (0, _lodash.kebabCase)(newColorName),
      name: newColorName
    }),
    label: (0, _i18n.__)('Color name'),
    placeholder: (0, _i18n.__)('Name'),
    value: name
  }), (0, _element.createElement)(_button.default, {
    onClick: () => {
      setIsEditingName(false);
      setIsFocused(false);

      if (onConfirm) {
        onConfirm();
      }
    },
    isPrimary: true
  }, confirmLabel)), !isEditingName && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_button.default, {
    className: (0, _classnames.default)({
      'components-color-edit__hidden-control': !isShowingControls
    }),
    icon: _icons.edit,
    label: (0, _i18n.__)('Edit color name'),
    onClick: () => setIsEditingName(true)
  }), (0, _element.createElement)(_button.default, {
    className: (0, _classnames.default)({
      'components-color-edit__hidden-control': !isShowingControls
    }),
    icon: _icons.close,
    label: (0, _i18n.__)('Remove color'),
    onClick: onRemove
  })), (0, _element.createElement)(_button.default, {
    className: (0, _classnames.default)({
      'components-color-edit__hidden-control': !isShowingControls
    }),
    icon: isShowingAdvancedPanel ? _icons.chevronUp : _icons.chevronDown,
    label: (0, _i18n.__)('Additional color settings'),
    onClick: () => {
      if (isShowingAdvancedPanel) {
        setIsFocused(false);
      }

      setIsShowingAdvancedPanel(!isShowingAdvancedPanel);
    },
    "aria-expanded": isShowingAdvancedPanel
  })), onCancel && (0, _element.createElement)(_button.default, {
    className: "components-color-edit__cancel-button",
    onClick: onCancel
  }, (0, _i18n.__)('Cancel')), isShowingAdvancedPanel && (0, _element.createElement)(_textControl.default, {
    className: "components-color-edit__slug-input",
    onChange: newSlug => onChange({
      color,
      slug: newSlug,
      name
    }),
    label: (0, _i18n.__)('Slug'),
    value: slug
  }));
}

function ColorInserter({
  onInsert,
  onCancel
}) {
  const [color, setColor] = (0, _element.useState)({
    color: '#fff',
    name: '',
    slug: ''
  });
  return (0, _element.createElement)(ColorOption, {
    color: color.color,
    name: color.name,
    slug: color.slug,
    onChange: setColor,
    confirmLabel: (0, _i18n.__)('Save'),
    onConfirm: () => onInsert(color),
    isEditingNameOnMount: true,
    isEditingColorOnMount: true,
    onCancel: onCancel
  });
}

function ColorEdit({
  colors,
  onChange,
  emptyUI,
  immutableColorSlugs,
  canReset = true
}) {
  const [isInsertingColor, setIsInsertingColor] = (0, _element.useState)(false);
  return (0, _element.createElement)(_baseControl.default, null, (0, _element.createElement)("fieldset", null, (0, _element.createElement)("div", {
    className: "components-color-edit__label-and-insert-container"
  }, (0, _element.createElement)("legend", null, (0, _element.createElement)("div", null, (0, _element.createElement)(_baseControl.default.VisualLabel, null, (0, _i18n.__)('Color palette')))), !isInsertingColor && (0, _element.createElement)(_button.default, {
    onClick: () => {
      setIsInsertingColor(true);
    },
    className: "components-color-edit__insert-button",
    icon: _icons.plus
  })), (0, _element.createElement)("div", null, !(0, _lodash.isEmpty)(colors) && colors.map((color, index) => {
    return (0, _element.createElement)(ColorOption, {
      key: index,
      color: color.color,
      name: color.name,
      slug: color.slug,
      immutableColorSlugs: immutableColorSlugs,
      onChange: newColor => {
        onChange(colors.map((currentColor, currentIndex) => {
          if (currentIndex === index) {
            return newColor;
          }

          return currentColor;
        }));
      },
      onRemove: () => {
        onChange(colors.filter((_currentColor, currentIndex) => {
          if (currentIndex === index) {
            return false;
          }

          return true;
        }));
      }
    });
  }), isInsertingColor && (0, _element.createElement)(ColorInserter, {
    onInsert: newColor => {
      setIsInsertingColor(false);
      onChange([...(colors || []), newColor]);
    },
    onCancel: () => setIsInsertingColor(false)
  }), !isInsertingColor && (0, _lodash.isEmpty)(colors) && emptyUI), !!canReset && (0, _element.createElement)(_button.default, {
    isSmall: true,
    isSecondary: true,
    className: "components-color-edit__reset-button",
    onClick: () => onChange()
  }, (0, _i18n.__)('Reset'))));
}
//# sourceMappingURL=index.js.map