@wordpress/block-editor/build/components/child-layout-control/index.js

Generic block editor.

"use strict";

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

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

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

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

/**
 * WordPress dependencies
 */
function helpText(selfStretch, parentLayout) {
  const {
    orientation = 'horizontal'
  } = parentLayout;

  if (selfStretch === 'fill') {
    return (0, _i18n.__)('Stretch to fill available space.');
  }

  if (selfStretch === 'fixed' && orientation === 'horizontal') {
    return (0, _i18n.__)('Specify a fixed width.');
  } else if (selfStretch === 'fixed') {
    return (0, _i18n.__)('Specify a fixed height.');
  }

  return (0, _i18n.__)('Fit contents.');
}
/**
 * Form to edit the child layout value.
 *
 * @param {Object}   props              Props.
 * @param {Object}   props.value        The child layout value.
 * @param {Function} props.onChange     Function to update the child layout value.
 * @param {Object}   props.parentLayout The parent layout value.
 *
 * @return {WPElement} child layout edit element.
 */


function ChildLayoutControl({
  value: childLayout = {},
  onChange,
  parentLayout
}) {
  const {
    selfStretch,
    flexSize
  } = childLayout;
  (0, _element.useEffect)(() => {
    if (selfStretch === 'fixed' && !flexSize) {
      onChange({ ...childLayout,
        selfStretch: 'fit'
      });
    }
  }, []);
  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.__experimentalToggleGroupControl, {
    __nextHasNoMarginBottom: true,
    size: '__unstable-large',
    label: childLayoutOrientation(parentLayout),
    value: selfStretch || 'fit',
    help: helpText(selfStretch, parentLayout),
    onChange: value => {
      const newFlexSize = value !== 'fixed' ? null : flexSize;
      onChange({ ...childLayout,
        selfStretch: value,
        flexSize: newFlexSize
      });
    },
    isBlock: true
  }, (0, _element.createElement)(_components.__experimentalToggleGroupControlOption, {
    key: 'fit',
    value: 'fit',
    label: (0, _i18n.__)('Fit')
  }), (0, _element.createElement)(_components.__experimentalToggleGroupControlOption, {
    key: 'fill',
    value: 'fill',
    label: (0, _i18n.__)('Fill')
  }), (0, _element.createElement)(_components.__experimentalToggleGroupControlOption, {
    key: 'fixed',
    value: 'fixed',
    label: (0, _i18n.__)('Fixed')
  })), selfStretch === 'fixed' && (0, _element.createElement)(_components.__experimentalUnitControl, {
    size: '__unstable-large',
    onChange: value => {
      onChange({ ...childLayout,
        flexSize: value
      });
    },
    value: flexSize
  }));
}

function childLayoutOrientation(parentLayout) {
  const {
    orientation = 'horizontal'
  } = parentLayout;
  return orientation === 'horizontal' ? (0, _i18n.__)('Width') : (0, _i18n.__)('Height');
}
//# sourceMappingURL=index.js.map