@gechiui/block-editor/build/hooks/dimensions.js

Generic block editor.

"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.AXIAL_SIDES = exports.ALL_SIDES = void 0;
exports.DimensionsPanel = DimensionsPanel;
exports.SPACING_SUPPORT_KEY = void 0;
exports.hasDimensionsSupport = hasDimensionsSupport;
exports.useCustomSides = useCustomSides;
exports.useIsDimensionsSupportValid = useIsDimensionsSupportValid;

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

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

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

var _blocks = require("@gechiui/blocks");

var _inspectorControls = _interopRequireDefault(require("../components/inspector-controls"));

var _gap = require("./gap");

var _margin = require("./margin");

var _padding = require("./padding");

/**
 * GeChiUI dependencies
 */

/**
 * Internal dependencies
 */
const SPACING_SUPPORT_KEY = 'spacing';
exports.SPACING_SUPPORT_KEY = SPACING_SUPPORT_KEY;
const ALL_SIDES = ['top', 'right', 'bottom', 'left'];
exports.ALL_SIDES = ALL_SIDES;
const AXIAL_SIDES = ['vertical', 'horizontal'];
/**
 * Inspector controls for dimensions support.
 *
 * @param {Object} props Block props.
 *
 * @return {GCElement} Inspector controls for spacing support features.
 */

exports.AXIAL_SIDES = AXIAL_SIDES;

function DimensionsPanel(props) {
  const isGapDisabled = (0, _gap.useIsGapDisabled)(props);
  const isPaddingDisabled = (0, _padding.useIsPaddingDisabled)(props);
  const isMarginDisabled = (0, _margin.useIsMarginDisabled)(props);
  const isDisabled = useIsDimensionsDisabled(props);
  const isSupported = hasDimensionsSupport(props.name);

  if (isDisabled || !isSupported) {
    return null;
  }

  const defaultSpacingControls = (0, _blocks.getBlockSupport)(props.name, [SPACING_SUPPORT_KEY, '__experimentalDefaultControls']);

  const createResetAllFilter = attribute => newAttributes => {
    var _newAttributes$style;

    return { ...newAttributes,
      style: { ...newAttributes.style,
        spacing: { ...((_newAttributes$style = newAttributes.style) === null || _newAttributes$style === void 0 ? void 0 : _newAttributes$style.spacing),
          [attribute]: undefined
        }
      }
    };
  };

  return (0, _element.createElement)(_inspectorControls.default, {
    __experimentalGroup: "dimensions"
  }, !isPaddingDisabled && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
    hasValue: () => (0, _padding.hasPaddingValue)(props),
    label: (0, _i18n.__)('内边距'),
    onDeselect: () => (0, _padding.resetPadding)(props),
    resetAllFilter: createResetAllFilter('padding'),
    isShownByDefault: defaultSpacingControls === null || defaultSpacingControls === void 0 ? void 0 : defaultSpacingControls.padding,
    panelId: props.clientId
  }, (0, _element.createElement)(_padding.PaddingEdit, props)), !isMarginDisabled && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
    hasValue: () => (0, _margin.hasMarginValue)(props),
    label: (0, _i18n.__)('边距'),
    onDeselect: () => (0, _margin.resetMargin)(props),
    resetAllFilter: createResetAllFilter('margin'),
    isShownByDefault: defaultSpacingControls === null || defaultSpacingControls === void 0 ? void 0 : defaultSpacingControls.margin,
    panelId: props.clientId
  }, (0, _element.createElement)(_margin.MarginEdit, props)), !isGapDisabled && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
    hasValue: () => (0, _gap.hasGapValue)(props),
    label: (0, _i18n.__)('块间​​距'),
    onDeselect: () => (0, _gap.resetGap)(props),
    resetAllFilter: createResetAllFilter('blockGap'),
    isShownByDefault: defaultSpacingControls === null || defaultSpacingControls === void 0 ? void 0 : defaultSpacingControls.blockGap,
    panelId: props.clientId
  }, (0, _element.createElement)(_gap.GapEdit, props)));
}
/**
 * Determine whether there is dimensions related block support.
 *
 * @param {string} blockName Block name.
 *
 * @return {boolean} Whether there is support.
 */


function hasDimensionsSupport(blockName) {
  if (_element.Platform.OS !== 'web') {
    return false;
  }

  return (0, _gap.hasGapSupport)(blockName) || (0, _padding.hasPaddingSupport)(blockName) || (0, _margin.hasMarginSupport)(blockName);
}
/**
 * Determines whether dimensions support has been disabled.
 *
 * @param {Object} props Block properties.
 *
 * @return {boolean} If spacing support is completely disabled.
 */


const useIsDimensionsDisabled = function () {
  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  const gapDisabled = (0, _gap.useIsGapDisabled)(props);
  const paddingDisabled = (0, _padding.useIsPaddingDisabled)(props);
  const marginDisabled = (0, _margin.useIsMarginDisabled)(props);
  return gapDisabled && paddingDisabled && marginDisabled;
};
/**
 * Custom hook to retrieve which padding/margin is supported
 * e.g. top, right, bottom or left.
 *
 * Sides are opted into by default. It is only if a specific side is set to
 * false that it is omitted.
 *
 * @param {string} blockName Block name.
 * @param {string} feature   The feature custom sides relate to e.g. padding or margins.
 *
 * @return {Object} Sides supporting custom margin.
 */


function useCustomSides(blockName, feature) {
  const support = (0, _blocks.getBlockSupport)(blockName, SPACING_SUPPORT_KEY); // Skip when setting is boolean as theme isn't setting arbitrary sides.

  if (!support || typeof support[feature] === 'boolean') {
    return;
  }

  return support[feature];
}
/**
 * Custom hook to determine whether the sides configured in the
 * block support are valid. A dimension property cannot declare
 * support for a mix of axial and individual sides.
 *
 * @param {string} blockName Block name.
 * @param {string} feature   The feature custom sides relate to e.g. padding or margins.
 *
 * @return {boolean} If the feature has a valid configuration of sides.
 */


function useIsDimensionsSupportValid(blockName, feature) {
  const sides = useCustomSides(blockName, feature);

  if (sides && sides.some(side => ALL_SIDES.includes(side)) && sides.some(side => AXIAL_SIDES.includes(side))) {
    // eslint-disable-next-line no-console
    console.warn(`The ${feature} support for the "${blockName}" block can not be configured to support both axial and arbitrary sides.`);
    return false;
  }

  return true;
}
//# sourceMappingURL=dimensions.js.map