@gechiui/block-editor/build/layouts/flow.js

Generic block editor.

"use strict";

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

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

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

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

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

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

var _useSetting = _interopRequireDefault(require("../components/use-setting"));

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

/**
 * GeChiUI dependencies
 */

/**
 * Internal dependencies
 */
var _default = {
  name: 'default',
  label: (0, _i18n.__)('流动'),
  inspectorControls: function DefaultLayoutInspectorControls(_ref) {
    let {
      layout,
      onChange
    } = _ref;
    const {
      wideSize,
      contentSize
    } = layout;
    const units = (0, _components.__experimentalUseCustomUnits)({
      availableUnits: (0, _useSetting.default)('spacing.units') || ['%', 'px', 'em', 'rem', 'vw']
    });
    return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)("div", {
      className: "block-editor-hooks__layout-controls"
    }, (0, _element.createElement)("div", {
      className: "block-editor-hooks__layout-controls-unit"
    }, (0, _element.createElement)(_components.__experimentalUnitControl, {
      label: (0, _i18n.__)('内容'),
      labelPosition: "top",
      __unstableInputWidth: "80px",
      value: contentSize || wideSize || '',
      onChange: nextWidth => {
        nextWidth = 0 > parseFloat(nextWidth) ? '0' : nextWidth;
        onChange({ ...layout,
          contentSize: nextWidth
        });
      },
      units: units
    }), (0, _element.createElement)(_icons.Icon, {
      icon: _icons.positionCenter
    })), (0, _element.createElement)("div", {
      className: "block-editor-hooks__layout-controls-unit"
    }, (0, _element.createElement)(_components.__experimentalUnitControl, {
      label: (0, _i18n.__)('宽'),
      labelPosition: "top",
      __unstableInputWidth: "80px",
      value: wideSize || contentSize || '',
      onChange: nextWidth => {
        nextWidth = 0 > parseFloat(nextWidth) ? '0' : nextWidth;
        onChange({ ...layout,
          wideSize: nextWidth
        });
      },
      units: units
    }), (0, _element.createElement)(_icons.Icon, {
      icon: _icons.stretchWide
    }))), (0, _element.createElement)("div", {
      className: "block-editor-hooks__layout-controls-reset"
    }, (0, _element.createElement)(_components.Button, {
      variant: "secondary",
      isSmall: true,
      disabled: !contentSize && !wideSize,
      onClick: () => onChange({
        contentSize: undefined,
        wideSize: undefined,
        inherit: false
      })
    }, (0, _i18n.__)('重置'))), (0, _element.createElement)("p", {
      className: "block-editor-hooks__layout-controls-helptext"
    }, (0, _i18n.__)('自定义所有被分配到中间或宽列的元素的宽度。')));
  },
  toolBarControls: function DefaultLayoutToolbarControls() {
    return null;
  },
  save: function DefaultLayoutStyle(_ref2) {
    var _style$spacing$blockG, _style$spacing;

    let {
      selector,
      layout = {},
      style
    } = _ref2;
    const {
      contentSize,
      wideSize
    } = layout;
    const blockGapSupport = (0, _useSetting.default)('spacing.blockGap');
    const hasBlockGapStylesSupport = blockGapSupport !== null;
    const blockGapValue = (_style$spacing$blockG = style === null || style === void 0 ? void 0 : (_style$spacing = style.spacing) === null || _style$spacing === void 0 ? void 0 : _style$spacing.blockGap) !== null && _style$spacing$blockG !== void 0 ? _style$spacing$blockG : 'var( --gc--style--block-gap )';
    let output = !!contentSize || !!wideSize ? `
					${(0, _utils.appendSelectors)(selector, '> *')} {
						max-width: ${contentSize !== null && contentSize !== void 0 ? contentSize : wideSize};
						margin-left: auto !important;
						margin-right: auto !important;
					}

					${(0, _utils.appendSelectors)(selector, '> [data-align="wide"]')}  {
						max-width: ${wideSize !== null && wideSize !== void 0 ? wideSize : contentSize};
					}

					${(0, _utils.appendSelectors)(selector, '> [data-align="full"]')} {
						max-width: none;
					}
				` : '';
    output += `
			${(0, _utils.appendSelectors)(selector, '> [data-align="left"]')} {
				float: left;
				margin-right: 2em;
			}

			${(0, _utils.appendSelectors)(selector, '> [data-align="right"]')} {
				float: right;
				margin-left: 2em;
			}

		`;

    if (hasBlockGapStylesSupport) {
      output += `
				${(0, _utils.appendSelectors)(selector, '> *')} {
					margin-top: 0;
					margin-bottom: 0;
				}
				${(0, _utils.appendSelectors)(selector, '> * + *')} {
					margin-top: ${blockGapValue};
				}
			`;
    }

    return (0, _element.createElement)("style", null, output);
  },

  getOrientation() {
    return 'vertical';
  },

  getAlignments(layout) {
    const alignmentInfo = getAlignmentsInfo(layout);

    if (layout.alignments !== undefined) {
      if (!layout.alignments.includes('none')) {
        layout.alignments.unshift('none');
      }

      return layout.alignments.map(alignment => ({
        name: alignment,
        info: alignmentInfo[alignment]
      }));
    }

    const {
      contentSize,
      wideSize
    } = layout;
    const alignments = [{
      name: 'left'
    }, {
      name: 'center'
    }, {
      name: 'right'
    }];

    if (contentSize) {
      alignments.unshift({
        name: 'full'
      });
    }

    if (wideSize) {
      alignments.unshift({
        name: 'wide',
        info: alignmentInfo.wide
      });
    }

    alignments.unshift({
      name: 'none',
      info: alignmentInfo.none
    });
    return alignments;
  }

};
/**
 * Helper method to assign contextual info to clarify
 * alignment settings.
 *
 * Besides checking if `contentSize` and `wideSize` have a
 * value, we now show this information only if their values
 * are not a `css var`. This needs to change when parsing
 * css variables land.
 *
 * @see https://github.com/GeChiUI/gutenberg/pull/34710#issuecomment-918000752
 *
 * @param {Object} layout The layout object.
 * @return {Object} An object with contextual info per alignment.
 */

exports.default = _default;

function getAlignmentsInfo(layout) {
  const {
    contentSize,
    wideSize
  } = layout;
  const alignmentInfo = {};
  const sizeRegex = /^(?!0)\d+(px|em|rem|vw|vh|%)?$/i;

  if (sizeRegex.test(contentSize)) {
    // translators: %s: container size (i.e. 600px etc)
    alignmentInfo.none = (0, _i18n.sprintf)((0, _i18n.__)('最大 %s 宽'), contentSize);
  }

  if (sizeRegex.test(wideSize)) {
    // translators: %s: container size (i.e. 600px etc)
    alignmentInfo.wide = (0, _i18n.sprintf)((0, _i18n.__)('最大 %s 宽'), wideSize);
  }

  return alignmentInfo;
}
//# sourceMappingURL=flow.js.map