@gechiui/block-editor/build/layouts/flex.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 _i18n = require("@gechiui/i18n");

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

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

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

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

var _components2 = require("../components");

/**
 * GeChiUI dependencies
 */

/**
 * Internal dependencies
 */
// Used with the default, horizontal flex orientation.
const justifyContentMap = {
  left: 'flex-start',
  right: 'flex-end',
  center: 'center',
  'space-between': 'space-between'
}; // Used with the vertical (column) flex orientation.

const alignItemsMap = {
  left: 'flex-start',
  right: 'flex-end',
  center: 'center'
};
const flexWrapOptions = ['wrap', 'nowrap'];
var _default = {
  name: 'flex',
  label: (0, _i18n.__)('灵活'),
  inspectorControls: function FlexLayoutInspectorControls(_ref) {
    let {
      layout = {},
      onChange
    } = _ref;
    const {
      allowOrientation = true
    } = layout;
    return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.Flex, null, (0, _element.createElement)(_components.FlexItem, null, (0, _element.createElement)(FlexLayoutJustifyContentControl, {
      layout: layout,
      onChange: onChange
    })), (0, _element.createElement)(_components.FlexItem, null, allowOrientation && (0, _element.createElement)(OrientationControl, {
      layout: layout,
      onChange: onChange
    }))), (0, _element.createElement)(FlexWrapControl, {
      layout: layout,
      onChange: onChange
    }));
  },
  toolBarControls: function FlexLayoutToolbarControls(_ref2) {
    let {
      layout = {},
      onChange,
      layoutBlockSupport
    } = _ref2;

    if (layoutBlockSupport !== null && layoutBlockSupport !== void 0 && layoutBlockSupport.allowSwitching) {
      return null;
    }

    return (0, _element.createElement)(_components2.BlockControls, {
      group: "block",
      __experimentalShareWithChildBlocks: true
    }, (0, _element.createElement)(FlexLayoutJustifyContentControl, {
      layout: layout,
      onChange: onChange,
      isToolbar: true
    }));
  },
  save: function FlexLayoutStyle(_ref3) {
    var _style$spacing$blockG, _style$spacing;

    let {
      selector,
      layout,
      style
    } = _ref3;
    const {
      orientation = 'horizontal'
    } = 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, 0.5em )';
    const justifyContent = justifyContentMap[layout.justifyContent] || justifyContentMap.left;
    const flexWrap = flexWrapOptions.includes(layout.flexWrap) ? layout.flexWrap : 'wrap';
    const rowOrientation = `
		flex-direction: row;
		align-items: center;
		justify-content: ${justifyContent};
		`;
    const alignItems = alignItemsMap[layout.justifyContent] || alignItemsMap.left;
    const columnOrientation = `
		flex-direction: column;
		align-items: ${alignItems};
		`;
    return (0, _element.createElement)("style", null, `
				${(0, _utils.appendSelectors)(selector)} {
					display: flex;
					gap: ${hasBlockGapStylesSupport ? blockGapValue : '0.5em'};
					flex-wrap: ${flexWrap};
					${orientation === 'horizontal' ? rowOrientation : columnOrientation}
				}

				${(0, _utils.appendSelectors)(selector, '> *')} {
					margin: 0;
				}
			`);
  },

  getOrientation(layout) {
    const {
      orientation = 'horizontal'
    } = layout;
    return orientation;
  },

  getAlignments() {
    return [];
  }

};
exports.default = _default;

function FlexLayoutJustifyContentControl(_ref4) {
  let {
    layout,
    onChange,
    isToolbar = false
  } = _ref4;
  const {
    justifyContent = 'left',
    orientation = 'horizontal'
  } = layout;

  const onJustificationChange = value => {
    onChange({ ...layout,
      justifyContent: value
    });
  };

  const allowedControls = ['left', 'center', 'right'];

  if (orientation === 'horizontal') {
    allowedControls.push('space-between');
  }

  if (isToolbar) {
    return (0, _element.createElement)(_components2.JustifyContentControl, {
      allowedControls: allowedControls,
      value: justifyContent,
      onChange: onJustificationChange,
      popoverProps: {
        position: 'bottom right',
        isAlternate: true
      }
    });
  }

  const justificationOptions = [{
    value: 'left',
    icon: _icons.justifyLeft,
    label: (0, _i18n.__)('左对齐项')
  }, {
    value: 'center',
    icon: _icons.justifyCenter,
    label: (0, _i18n.__)('居中对齐项')
  }, {
    value: 'right',
    icon: _icons.justifyRight,
    label: (0, _i18n.__)('右对齐项')
  }];

  if (orientation === 'horizontal') {
    justificationOptions.push({
      value: 'space-between',
      icon: _icons.justifySpaceBetween,
      label: (0, _i18n.__)('项目间距')
    });
  }

  return (0, _element.createElement)("fieldset", {
    className: "block-editor-hooks__flex-layout-justification-controls"
  }, (0, _element.createElement)("legend", null, (0, _i18n.__)('理由')), (0, _element.createElement)("div", null, justificationOptions.map(_ref5 => {
    let {
      value,
      icon,
      label
    } = _ref5;
    return (0, _element.createElement)(_components.Button, {
      key: value,
      label: label,
      icon: icon,
      isPressed: justifyContent === value,
      onClick: () => onJustificationChange(value)
    });
  })));
}

function FlexWrapControl(_ref6) {
  let {
    layout,
    onChange
  } = _ref6;
  const {
    flexWrap = 'wrap'
  } = layout;
  return (0, _element.createElement)(_components.ToggleControl, {
    label: (0, _i18n.__)('允许换行到多行'),
    onChange: value => {
      onChange({ ...layout,
        flexWrap: value ? 'wrap' : 'nowrap'
      });
    },
    checked: flexWrap === 'wrap'
  });
}

function OrientationControl(_ref7) {
  let {
    layout,
    onChange
  } = _ref7;
  const {
    orientation = 'horizontal'
  } = layout;
  return (0, _element.createElement)("fieldset", {
    className: "block-editor-hooks__flex-layout-orientation-controls"
  }, (0, _element.createElement)("legend", null, (0, _i18n.__)('方向')), (0, _element.createElement)(_components.Button, {
    label: 'horizontal',
    icon: _icons.arrowRight,
    isPressed: orientation === 'horizontal',
    onClick: () => onChange({ ...layout,
      orientation: 'horizontal'
    })
  }), (0, _element.createElement)(_components.Button, {
    label: 'vertical',
    icon: _icons.arrowDown,
    isPressed: orientation === 'vertical',
    onClick: () => onChange({ ...layout,
      orientation: 'vertical'
    })
  }));
}
//# sourceMappingURL=flex.js.map