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

Generic block editor.

"use strict";

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

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

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

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

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

var _borderRadiusControl = _interopRequireDefault(require("../border-radius-control"));

var _hooks = require("./hooks");

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

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
function useHasBorderPanel(settings) {
  const controls = [useHasBorderColorControl(settings), useHasBorderRadiusControl(settings), useHasBorderStyleControl(settings), useHasBorderWidthControl(settings)];
  return controls.some(Boolean);
}

function useHasBorderColorControl(settings) {
  return settings?.border?.color;
}

function useHasBorderRadiusControl(settings) {
  return settings?.border?.radius;
}

function useHasBorderStyleControl(settings) {
  return settings?.border?.style;
}

function useHasBorderWidthControl(settings) {
  return settings?.border?.width;
}

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

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

const DEFAULT_CONTROLS = {
  radius: true,
  color: true,
  width: true
};

function BorderPanel({
  as: Wrapper = BorderToolsPanel,
  value,
  onChange,
  inheritedValue = value,
  settings,
  panelId,
  defaultControls = DEFAULT_CONTROLS
}) {
  const colors = (0, _hooks.useColorsPerOrigin)(settings);

  const decodeValue = rawValue => (0, _utils.getValueFromVariable)({
    settings
  }, '', rawValue);

  const encodeColorValue = colorValue => {
    const allColors = colors.flatMap(({
      colors: originColors
    }) => originColors);
    const colorObject = allColors.find(({
      color
    }) => color === colorValue);
    return colorObject ? 'var:preset|color|' + colorObject.slug : colorValue;
  };

  const decodeColorValue = (0, _element.useCallback)(colorValue => {
    const allColors = colors.flatMap(({
      colors: originColors
    }) => originColors);
    const colorObject = allColors.find(({
      slug
    }) => colorValue === 'var:preset|color|' + slug);
    return colorObject ? colorObject.color : colorValue;
  }, [colors]);
  const border = (0, _element.useMemo)(() => {
    if ((0, _components.__experimentalHasSplitBorders)(inheritedValue?.border)) {
      const borderValue = { ...inheritedValue?.border
      };
      ['top', 'right', 'bottom', 'left'].forEach(side => {
        borderValue[side] = { ...borderValue[side],
          color: decodeColorValue(borderValue[side]?.color)
        };
      });
      return borderValue;
    }

    return { ...inheritedValue?.border,
      color: inheritedValue?.border?.color ? decodeColorValue(inheritedValue?.border?.color) : undefined
    };
  }, [inheritedValue?.border, decodeColorValue]);

  const setBorder = newBorder => onChange({ ...value,
    border: newBorder
  });

  const showBorderColor = useHasBorderColorControl(settings);
  const showBorderStyle = useHasBorderStyleControl(settings);
  const showBorderWidth = useHasBorderWidthControl(settings); // Border radius.

  const showBorderRadius = useHasBorderRadiusControl(settings);
  const borderRadiusValues = decodeValue(border?.radius);

  const setBorderRadius = newBorderRadius => setBorder({ ...border,
    radius: newBorderRadius
  });

  const hasBorderRadius = () => {
    const borderValues = value?.border?.radius;

    if (typeof borderValues === 'object') {
      return Object.entries(borderValues).some(Boolean);
    }

    return !!borderValues;
  };

  const resetBorder = () => {
    if (hasBorderRadius()) {
      return setBorder({
        radius: value?.border?.radius
      });
    }

    setBorder(undefined);
  };

  const onBorderChange = newBorder => {
    // Ensure we have a visible border style when a border width or
    // color is being selected.
    const updatedBorder = { ...newBorder
    };

    if ((0, _components.__experimentalHasSplitBorders)(updatedBorder)) {
      ['top', 'right', 'bottom', 'left'].forEach(side => {
        if (updatedBorder[side]) {
          updatedBorder[side] = { ...updatedBorder[side],
            color: encodeColorValue(updatedBorder[side]?.color)
          };
        }
      });
    } else if (updatedBorder) {
      updatedBorder.color = encodeColorValue(updatedBorder.color);
    } // As radius is maintained separately to color, style, and width
    // maintain its value. Undefined values here will be cleaned when
    // global styles are saved.


    setBorder({
      radius: border?.radius,
      ...updatedBorder
    });
  };

  const resetAllFilter = (0, _element.useCallback)(previousValue => {
    return { ...previousValue,
      border: undefined
    };
  }, []);
  const showBorderByDefault = defaultControls?.color || defaultControls?.width;
  return (0, _element.createElement)(Wrapper, {
    resetAllFilter: resetAllFilter,
    value: value,
    onChange: onChange,
    panelId: panelId
  }, (showBorderWidth || showBorderColor) && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
    hasValue: () => (0, _components.__experimentalIsDefinedBorder)(value?.border),
    label: (0, _i18n.__)('Border'),
    onDeselect: () => resetBorder(),
    isShownByDefault: showBorderByDefault,
    panelId: panelId
  }, (0, _element.createElement)(_components.__experimentalBorderBoxControl, {
    colors: colors,
    enableAlpha: true,
    enableStyle: showBorderStyle,
    onChange: onBorderChange,
    popoverOffset: 40,
    popoverPlacement: "left-start",
    value: border,
    __experimentalIsRenderedInSidebar: true,
    size: '__unstable-large'
  })), showBorderRadius && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
    hasValue: hasBorderRadius,
    label: (0, _i18n.__)('Radius'),
    onDeselect: () => setBorderRadius(undefined),
    isShownByDefault: defaultControls.radius,
    panelId: panelId
  }, (0, _element.createElement)(_borderRadiusControl.default, {
    values: borderRadiusValues,
    onChange: newValue => {
      setBorderRadius(newValue || undefined);
    }
  })));
}
//# sourceMappingURL=border-panel.js.map