@wordpress/block-library/build/column/edit.native.js

Block library for the WordPress editor.

"use strict";

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

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

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

var _reactNative = require("react-native");

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

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

var _blockEditor = require("@wordpress/block-editor");

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

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

var _editor = _interopRequireDefault(require("./editor.scss"));

var _columnPreview = _interopRequireDefault(require("./column-preview"));

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

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
function ColumnEdit(_ref) {
  let {
    attributes,
    setAttributes,
    hasChildren,
    isSelected,
    getStylesFromColorScheme,
    isParentSelected,
    contentStyle,
    columns,
    selectedColumnIndex,
    parentAlignment,
    clientId,
    blockWidth
  } = _ref;

  if (!contentStyle) {
    contentStyle = {
      [clientId]: {}
    };
  }

  const {
    verticalAlignment,
    width
  } = attributes;
  const {
    valueUnit = '%'
  } = (0, _components.getValueAndUnit)(width) || {};
  const screenWidth = Math.floor(_reactNative.Dimensions.get('window').width);
  const [widthUnit, setWidthUnit] = (0, _element.useState)(valueUnit || '%');
  const units = (0, _components.__experimentalUseCustomUnits)({
    availableUnits: (0, _blockEditor.useSetting)('spacing.units') || ['%', 'px', 'em', 'rem', 'vw']
  });

  const updateAlignment = alignment => {
    setAttributes({
      verticalAlignment: alignment
    });
  };

  (0, _element.useEffect)(() => {
    setWidthUnit(valueUnit);
  }, [valueUnit]);
  (0, _element.useEffect)(() => {
    if (!verticalAlignment && parentAlignment) {
      updateAlignment(parentAlignment);
    }
  }, []);

  const onChangeWidth = nextWidth => {
    const widthWithUnit = (0, _utils.getWidthWithUnit)(nextWidth, widthUnit);
    setAttributes({
      width: widthWithUnit
    });
  };

  const onChangeUnit = nextUnit => {
    setWidthUnit(nextUnit);
    const widthWithoutUnit = parseFloat(width || (0, _utils.getWidths)(columns)[selectedColumnIndex]);
    setAttributes({
      width: (0, _utils.getWidthWithUnit)(widthWithoutUnit, nextUnit)
    });
  };

  const onChange = nextWidth => {
    if ((0, _utils.isPercentageUnit)(widthUnit) || !widthUnit) {
      return;
    }

    onChangeWidth(nextWidth);
  };

  const renderAppender = (0, _element.useCallback)(() => {
    const {
      width: columnWidth
    } = contentStyle[clientId];
    const isFullWidth = columnWidth === screenWidth;

    if (isSelected) {
      return (0, _element.createElement)(_reactNative.View, {
        style: [_editor.default.columnAppender, isFullWidth && _editor.default.fullwidthColumnAppender, isFullWidth && hasChildren && _editor.default.fullwidthHasInnerColumnAppender, !isFullWidth && hasChildren && _editor.default.hasInnerColumnAppender]
      }, (0, _element.createElement)(_blockEditor.InnerBlocks.ButtonBlockAppender, null));
    }

    return null;
  }, [contentStyle[clientId], screenWidth, isSelected, hasChildren]);

  if (!isSelected && !hasChildren) {
    return (0, _element.createElement)(_reactNative.View, {
      style: [!isParentSelected && getStylesFromColorScheme(_editor.default.columnPlaceholder, _editor.default.columnPlaceholderDark), _editor.default.columnPlaceholderNotSelected, contentStyle[clientId]]
    });
  }

  return (0, _element.createElement)(_element.Fragment, null, isSelected && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_blockEditor.BlockControls, null, (0, _element.createElement)(_blockEditor.BlockVerticalAlignmentToolbar, {
    onChange: updateAlignment,
    value: verticalAlignment
  })), (0, _element.createElement)(_blockEditor.InspectorControls, null, (0, _element.createElement)(_components.PanelBody, {
    title: (0, _i18n.__)('Column settings')
  }, (0, _element.createElement)(_components.UnitControl, {
    label: (0, _i18n.__)('Width'),
    min: 1,
    max: (0, _utils.isPercentageUnit)(widthUnit) ? 100 : undefined,
    onChange: onChange,
    onComplete: onChangeWidth,
    onUnitChange: onChangeUnit,
    value: (0, _utils.getWidths)(columns)[selectedColumnIndex],
    unit: widthUnit,
    units: units,
    preview: (0, _element.createElement)(_columnPreview.default, {
      columnWidths: (0, _utils.getWidths)(columns, false),
      selectedColumnIndex: selectedColumnIndex
    })
  })), (0, _element.createElement)(_components.PanelBody, null, (0, _element.createElement)(_components.FooterMessageControl, {
    label: (0, _i18n.__)('Note: Column layout may vary between themes and screen sizes')
  })))), (0, _element.createElement)(_reactNative.View, {
    style: [isSelected && hasChildren && _editor.default.innerBlocksBottomSpace, contentStyle[clientId]]
  }, (0, _element.createElement)(_blockEditor.InnerBlocks, {
    renderAppender: renderAppender,
    parentWidth: contentStyle[clientId].width,
    blockWidth: blockWidth
  })));
}

function ColumnEditWrapper(props) {
  const {
    verticalAlignment
  } = props.attributes;

  const getVerticalAlignmentRemap = alignment => {
    if (!alignment) return _editor.default.flexBase;
    return { ..._editor.default.flexBase,
      ..._editor.default[`is-vertically-aligned-${alignment}`]
    };
  };

  return (0, _element.createElement)(_reactNative.View, {
    style: getVerticalAlignmentRemap(verticalAlignment)
  }, (0, _element.createElement)(ColumnEdit, props));
}

var _default = (0, _compose.compose)([(0, _data.withSelect)((select, _ref2) => {
  var _getBlockAttributes;

  let {
    clientId
  } = _ref2;
  const {
    getBlockCount,
    getBlockRootClientId,
    getSelectedBlockClientId,
    getBlocks,
    getBlockOrder,
    getBlockAttributes
  } = select(_blockEditor.store);
  const selectedBlockClientId = getSelectedBlockClientId();
  const isSelected = selectedBlockClientId === clientId;
  const parentId = getBlockRootClientId(clientId);
  const hasChildren = !!getBlockCount(clientId);
  const isParentSelected = selectedBlockClientId && selectedBlockClientId === parentId;
  const blockOrder = getBlockOrder(parentId);
  const selectedColumnIndex = blockOrder.indexOf(clientId);
  const columns = getBlocks(parentId);
  const parentAlignment = (_getBlockAttributes = getBlockAttributes(parentId)) === null || _getBlockAttributes === void 0 ? void 0 : _getBlockAttributes.verticalAlignment;
  return {
    hasChildren,
    isParentSelected,
    isSelected,
    selectedColumnIndex,
    columns,
    parentAlignment
  };
}), _compose.withPreferredColorScheme])(ColumnEditWrapper);

exports.default = _default;
//# sourceMappingURL=edit.native.js.map