@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 _reactNative = require("react-native");
var _data = require("@wordpress/data");
var _compose = require("@wordpress/compose");
var _element = require("@wordpress/element");
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");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function ColumnEdit({
  attributes,
  setAttributes,
  hasChildren,
  isSelected,
  getStylesFromColorScheme,
  contentStyle,
  columns,
  selectedColumnIndex,
  parentAlignment,
  clientId,
  blockWidth
}) {
  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 [availableUnits] = (0, _blockEditor.useSettings)('spacing.units');
  const units = (0, _components.__experimentalUseCustomUnits)({
    availableUnits: availableUnits || ['%', '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)(() => {
    if (isSelected) {
      const {
        width: columnWidth
      } = contentStyle[clientId] || {};
      const isFullWidth = columnWidth === screenWidth;
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
        style: [_editor.default.columnAppender, isFullWidth && _editor.default.fullwidthColumnAppender, isFullWidth && hasChildren && _editor.default.fullwidthHasInnerColumnAppender, !isFullWidth && hasChildren && _editor.default.hasInnerColumnAppender],
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.InnerBlocks.ButtonBlockAppender, {})
      });
    }
    return null;
  }, [contentStyle, clientId, screenWidth, isSelected, hasChildren]);
  if (!isSelected && !hasChildren) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
      style: [getStylesFromColorScheme(_editor.default.columnPlaceholder, _editor.default.columnPlaceholderDark), contentStyle[clientId]]
    });
  }
  const parentWidth = contentStyle && contentStyle[clientId] && contentStyle[clientId].width;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [isSelected && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.BlockControls, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.BlockVerticalAlignmentToolbar, {
          onChange: updateAlignment,
          value: verticalAlignment
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_blockEditor.InspectorControls, {
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.PanelBody, {
          title: (0, _i18n.__)('Settings'),
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_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: /*#__PURE__*/(0, _jsxRuntime.jsx)(_columnPreview.default, {
              columnWidths: (0, _utils.getWidths)(columns, false),
              selectedColumnIndex: selectedColumnIndex
            })
          })
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.PanelBody, {
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FooterMessageControl, {
            label: (0, _i18n.__)('Note: Column layout may vary between themes and screen sizes')
          })
        })]
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
      style: [isSelected && hasChildren && _editor.default.innerBlocksBottomSpace, contentStyle[clientId]],
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.InnerBlocks, {
        renderAppender: renderAppender,
        parentWidth: parentWidth,
        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 /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
    style: getVerticalAlignmentRemap(verticalAlignment),
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ColumnEdit, {
      ...props
    })
  });
}
var _default = exports.default = (0, _compose.compose)([(0, _data.withSelect)((select, {
  clientId
}) => {
  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 blockOrder = getBlockOrder(parentId);
  const selectedColumnIndex = blockOrder.indexOf(clientId);
  const columns = getBlocks(parentId);
  const parentAlignment = getBlockAttributes(parentId)?.verticalAlignment;
  return {
    hasChildren,
    isSelected,
    selectedColumnIndex,
    columns,
    parentAlignment
  };
}), _compose.withPreferredColorScheme])(ColumnEditWrapper);
//# sourceMappingURL=edit.native.js.map