@gechiui/block-editor/build-module/layouts/flex.js

Generic block editor.

import { createElement, Fragment } from "@gechiui/element";

/**
 * GeChiUI dependencies
 */
import { __ } from '@gechiui/i18n';
import { justifyLeft, justifyCenter, justifyRight, justifySpaceBetween, arrowRight, arrowDown } from '@gechiui/icons';
import { Button, ToggleControl, Flex, FlexItem } from '@gechiui/components';
/**
 * Internal dependencies
 */

import { appendSelectors } from './utils';
import useSetting from '../components/use-setting';
import { BlockControls, JustifyContentControl } from '../components'; // 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'];
export default {
  name: 'flex',
  label: __('灵活'),
  inspectorControls: function FlexLayoutInspectorControls(_ref) {
    let {
      layout = {},
      onChange
    } = _ref;
    const {
      allowOrientation = true
    } = layout;
    return createElement(Fragment, null, createElement(Flex, null, createElement(FlexItem, null, createElement(FlexLayoutJustifyContentControl, {
      layout: layout,
      onChange: onChange
    })), createElement(FlexItem, null, allowOrientation && createElement(OrientationControl, {
      layout: layout,
      onChange: onChange
    }))), 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 createElement(BlockControls, {
      group: "block",
      __experimentalShareWithChildBlocks: true
    }, 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 = useSetting('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 createElement("style", null, `
				${appendSelectors(selector)} {
					display: flex;
					gap: ${hasBlockGapStylesSupport ? blockGapValue : '0.5em'};
					flex-wrap: ${flexWrap};
					${orientation === 'horizontal' ? rowOrientation : columnOrientation}
				}

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

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

  getAlignments() {
    return [];
  }

};

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 createElement(JustifyContentControl, {
      allowedControls: allowedControls,
      value: justifyContent,
      onChange: onJustificationChange,
      popoverProps: {
        position: 'bottom right',
        isAlternate: true
      }
    });
  }

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

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

  return createElement("fieldset", {
    className: "block-editor-hooks__flex-layout-justification-controls"
  }, createElement("legend", null, __('理由')), createElement("div", null, justificationOptions.map(_ref5 => {
    let {
      value,
      icon,
      label
    } = _ref5;
    return createElement(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 createElement(ToggleControl, {
    label: __('允许换行到多行'),
    onChange: value => {
      onChange({ ...layout,
        flexWrap: value ? 'wrap' : 'nowrap'
      });
    },
    checked: flexWrap === 'wrap'
  });
}

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