@wordpress/block-editor/build/components/global-styles/effects-panel.js

Generic block editor.

"use strict";

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

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

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

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

var _components = require("@wordpress/components");

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

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

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

var _object = require("../../utils/object");

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
function useHasEffectsPanel(settings) {
  const hasShadowControl = useHasShadowControl(settings);
  return hasShadowControl;
}

function useHasShadowControl(settings) {
  return !!settings?.shadow;
}

function EffectsToolsPanel({
  resetAllFilter,
  onChange,
  value,
  panelId,
  children
}) {
  const resetAll = () => {
    const updatedValue = resetAllFilter(value);
    onChange(updatedValue);
  };

  return (0, _element.createElement)(_components.__experimentalToolsPanel, {
    label: (0, _i18n.__)('Effects'),
    resetAll: resetAll,
    panelId: panelId
  }, children);
}

const DEFAULT_CONTROLS = {
  shadow: true
};

function EffectsPanel({
  as: Wrapper = EffectsToolsPanel,
  value,
  onChange,
  inheritedValue = value,
  settings,
  panelId,
  defaultControls = DEFAULT_CONTROLS
}) {
  const decodeValue = rawValue => (0, _utils.getValueFromVariable)({
    settings
  }, '', rawValue); // Shadow


  const hasShadowEnabled = useHasShadowControl(settings);
  const shadow = decodeValue(inheritedValue?.shadow);

  const setShadow = newValue => {
    onChange((0, _object.setImmutably)(value, ['shadow'], newValue));
  };

  const hasShadow = () => !!value?.shadow;

  const resetShadow = () => setShadow(undefined);

  const resetAllFilter = (0, _element.useCallback)(previousValue => {
    return { ...previousValue,
      shadow: undefined
    };
  }, []);
  return (0, _element.createElement)(Wrapper, {
    resetAllFilter: resetAllFilter,
    value: value,
    onChange: onChange,
    panelId: panelId
  }, hasShadowEnabled && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
    label: (0, _i18n.__)('Shadow'),
    hasValue: hasShadow,
    onDeselect: resetShadow,
    isShownByDefault: defaultControls.shadow,
    panelId: panelId
  }, (0, _element.createElement)(_components.__experimentalItemGroup, {
    isBordered: true,
    isSeparated: true
  }, (0, _element.createElement)(ShadowPopover, {
    shadow: shadow,
    onShadowChange: setShadow,
    settings: settings
  }))));
}

const ShadowPopover = ({
  shadow,
  onShadowChange,
  settings
}) => {
  const popoverProps = {
    placement: 'left-start',
    offset: 36,
    shift: true
  };
  return (0, _element.createElement)(_components.Dropdown, {
    popoverProps: popoverProps,
    className: "block-editor-global-styles-effects-panel__shadow-dropdown",
    renderToggle: renderShadowToggle(),
    renderContent: () => (0, _element.createElement)(_components.__experimentalDropdownContentWrapper, {
      paddingSize: "medium"
    }, (0, _element.createElement)(ShadowPopoverContainer, {
      shadow: shadow,
      onShadowChange: onShadowChange,
      settings: settings
    }))
  });
};

function renderShadowToggle() {
  return ({
    onToggle,
    isOpen
  }) => {
    const toggleProps = {
      onClick: onToggle,
      className: (0, _classnames.default)({
        'is-open': isOpen
      }),
      'aria-expanded': isOpen
    };
    return (0, _element.createElement)(_components.Button, toggleProps, (0, _element.createElement)(_components.__experimentalHStack, {
      justify: "flex-start"
    }, (0, _element.createElement)(_icons.Icon, {
      className: "block-editor-global-styles-effects-panel__toggle-icon",
      icon: _icons.shadow,
      size: 24
    }), (0, _element.createElement)(_components.FlexItem, null, (0, _i18n.__)('Shadow'))));
  };
}

function ShadowPopoverContainer({
  shadow,
  onShadowChange,
  settings
}) {
  const defaultShadows = settings?.shadow?.presets?.default;
  const themeShadows = settings?.shadow?.presets?.theme;
  const defaultPresetsEnabled = settings?.shadow?.defaultPresets;
  const shadows = [...(defaultPresetsEnabled ? defaultShadows : []), ...(themeShadows || [])];
  return (0, _element.createElement)("div", {
    className: "block-editor-global-styles-effects-panel__shadow-popover-container"
  }, (0, _element.createElement)(_components.__experimentalVStack, {
    spacing: 4
  }, (0, _element.createElement)(_components.__experimentalHeading, {
    level: 5
  }, (0, _i18n.__)('Shadow')), (0, _element.createElement)(ShadowPresets, {
    presets: shadows,
    activeShadow: shadow,
    onSelect: onShadowChange
  })));
}

function ShadowPresets({
  presets,
  activeShadow,
  onSelect
}) {
  return !presets ? null : (0, _element.createElement)(_components.__experimentalGrid, {
    columns: 6,
    gap: 0,
    align: "center",
    justify: "center"
  }, presets.map(({
    name,
    slug,
    shadow
  }) => (0, _element.createElement)(ShadowIndicator, {
    key: slug,
    label: name,
    isActive: shadow === activeShadow,
    onSelect: () => onSelect(shadow === activeShadow ? undefined : shadow),
    shadow: shadow
  })));
}

function ShadowIndicator({
  label,
  isActive,
  onSelect,
  shadow
}) {
  return (0, _element.createElement)("div", {
    className: "block-editor-global-styles-effects-panel__shadow-indicator-wrapper"
  }, (0, _element.createElement)(_components.Button, {
    className: "block-editor-global-styles-effects-panel__shadow-indicator",
    onClick: onSelect,
    label: label,
    style: {
      boxShadow: shadow
    },
    showTooltip: true
  }, isActive && (0, _element.createElement)(_icons.Icon, {
    icon: _icons.check
  })));
}
//# sourceMappingURL=effects-panel.js.map