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

Generic block editor.

"use strict";

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

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

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

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

var _classnames = _interopRequireDefault(require("classnames"));

var _lodash = require("lodash");

var _compose = require("@gechiui/compose");

var _hooks = require("@gechiui/hooks");

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

var _data = require("@gechiui/data");

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

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

var _store = require("../store");

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

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

var _layout = require("../components/block-list/layout");

var _blockList = _interopRequireDefault(require("../components/block-list"));

var _layouts = require("../layouts");

/**
 * External dependencies
 */

/**
 * GeChiUI dependencies
 */

/**
 * Internal dependencies
 */
const layoutBlockSupportKey = '__experimentalLayout';

function LayoutPanel(_ref) {
  let {
    setAttributes,
    attributes,
    name: blockName
  } = _ref;
  const {
    layout
  } = attributes;
  const defaultThemeLayout = (0, _useSetting.default)('layout');
  const themeSupportsLayout = (0, _data.useSelect)(select => {
    const {
      getSettings
    } = select(_store.store);
    return getSettings().supportsLayout;
  }, []);
  const layoutBlockSupport = (0, _blocks.getBlockSupport)(blockName, layoutBlockSupportKey, {});
  const {
    allowSwitching,
    allowEditing = true,
    allowInheriting = true,
    default: defaultBlockLayout
  } = layoutBlockSupport;

  if (!allowEditing) {
    return null;
  }

  const usedLayout = layout || defaultBlockLayout || {};
  const {
    inherit = false,
    type = 'default'
  } = usedLayout;
  /**
   * `themeSupportsLayout` is only relevant to the `default/flow`
   * layout and it should not be taken into account when other
   * `layout` types are used.
   */

  if (type === 'default' && !themeSupportsLayout) {
    return null;
  }

  const layoutType = (0, _layouts.getLayoutType)(type);

  const onChangeType = newType => setAttributes({
    layout: {
      type: newType
    }
  });

  const onChangeLayout = newLayout => setAttributes({
    layout: newLayout
  });

  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components2.InspectorControls, null, (0, _element.createElement)(_components.PanelBody, {
    title: (0, _i18n.__)('布局')
  }, allowInheriting && !!defaultThemeLayout && (0, _element.createElement)(_components.ToggleControl, {
    label: (0, _i18n.__)('继承默认布局'),
    checked: !!inherit,
    onChange: () => setAttributes({
      layout: {
        inherit: !inherit
      }
    })
  }), !inherit && allowSwitching && (0, _element.createElement)(LayoutTypeSwitcher, {
    type: type,
    onChange: onChangeType
  }), !inherit && layoutType && (0, _element.createElement)(layoutType.inspectorControls, {
    layout: usedLayout,
    onChange: onChangeLayout,
    layoutBlockSupport: layoutBlockSupport
  }))), !inherit && layoutType && (0, _element.createElement)(layoutType.toolBarControls, {
    layout: usedLayout,
    onChange: onChangeLayout,
    layoutBlockSupport: layoutBlockSupport
  }));
}

function LayoutTypeSwitcher(_ref2) {
  let {
    type,
    onChange
  } = _ref2;
  return (0, _element.createElement)(_components.ButtonGroup, null, (0, _layouts.getLayoutTypes)().map(_ref3 => {
    let {
      name,
      label
    } = _ref3;
    return (0, _element.createElement)(_components.Button, {
      key: name,
      isPressed: type === name,
      onClick: () => onChange(name)
    }, label);
  }));
}
/**
 * Filters registered block settings, extending attributes to include `layout`.
 *
 * @param {Object} settings Original block settings.
 *
 * @return {Object} Filtered block settings.
 */


function addAttribute(settings) {
  if ((0, _lodash.has)(settings.attributes, ['layout', 'type'])) {
    return settings;
  }

  if ((0, _blocks.hasBlockSupport)(settings, layoutBlockSupportKey)) {
    settings.attributes = { ...settings.attributes,
      layout: {
        type: 'object'
      }
    };
  }

  return settings;
}
/**
 * Override the default edit UI to include layout controls
 *
 * @param {Function} BlockEdit Original component.
 *
 * @return {Function} Wrapped component.
 */


const withInspectorControls = (0, _compose.createHigherOrderComponent)(BlockEdit => props => {
  const {
    name: blockName
  } = props;
  const supportLayout = (0, _blocks.hasBlockSupport)(blockName, layoutBlockSupportKey);
  return [supportLayout && (0, _element.createElement)(LayoutPanel, (0, _extends2.default)({
    key: "layout"
  }, props)), (0, _element.createElement)(BlockEdit, (0, _extends2.default)({
    key: "edit"
  }, props))];
}, 'withInspectorControls');
/**
 * Override the default block element to add the layout styles.
 *
 * @param {Function} BlockListBlock Original component.
 *
 * @return {Function} Wrapped component.
 */

exports.withInspectorControls = withInspectorControls;
const withLayoutStyles = (0, _compose.createHigherOrderComponent)(BlockListBlock => props => {
  const {
    name,
    attributes
  } = props;
  const shouldRenderLayoutStyles = (0, _blocks.hasBlockSupport)(name, layoutBlockSupportKey);
  const id = (0, _compose.useInstanceId)(BlockListBlock);
  const defaultThemeLayout = (0, _useSetting.default)('layout') || {};
  const element = (0, _element.useContext)(_blockList.default.__unstableElementContext);
  const {
    layout
  } = attributes;
  const {
    default: defaultBlockLayout
  } = (0, _blocks.getBlockSupport)(name, layoutBlockSupportKey) || {};
  const usedLayout = layout !== null && layout !== void 0 && layout.inherit ? defaultThemeLayout : layout || defaultBlockLayout || {};
  const className = (0, _classnames.default)(props === null || props === void 0 ? void 0 : props.className, {
    [`gc-container-${id}`]: shouldRenderLayoutStyles
  });
  return (0, _element.createElement)(_element.Fragment, null, shouldRenderLayoutStyles && element && (0, _element.createPortal)((0, _element.createElement)(_layout.LayoutStyle, {
    selector: `.gc-container-${id}`,
    layout: usedLayout,
    style: attributes === null || attributes === void 0 ? void 0 : attributes.style
  }), element), (0, _element.createElement)(BlockListBlock, (0, _extends2.default)({}, props, {
    className: className
  })));
});
exports.withLayoutStyles = withLayoutStyles;
(0, _hooks.addFilter)('blocks.registerBlockType', 'core/layout/addAttribute', addAttribute);
(0, _hooks.addFilter)('editor.BlockListBlock', 'core/editor/layout/with-layout-styles', withLayoutStyles);
(0, _hooks.addFilter)('editor.BlockEdit', 'core/editor/layout/with-inspector-controls', withInspectorControls);
//# sourceMappingURL=layout.js.map