@wordpress/block-library/build/list-item/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 = ListItemEdit;
var _reactNative = require("react-native");
var _blockEditor = require("@wordpress/block-editor");
var _i18n = require("@wordpress/i18n");
var _compose = require("@wordpress/compose");
var _data = require("@wordpress/data");
var _element = require("@wordpress/element");
var _hooks = require("./hooks");
var _edit = require("./edit.js");
var _style = _interopRequireDefault(require("./style.scss"));
var _listStyleType = _interopRequireDefault(require("./list-style-type"));
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const OPACITY = '9e';
function ListItemEdit({
  attributes,
  setAttributes,
  clientId,
  style,
  mergeBlocks
}) {
  const [contentWidth, setContentWidth] = (0, _element.useState)();
  const {
    placeholder,
    content
  } = attributes;
  const {
    blockIndex,
    hasInnerBlocks,
    indentationLevel,
    numberOfListItems,
    ordered,
    reversed,
    start
  } = (0, _data.useSelect)(select => {
    const {
      getBlockAttributes,
      getBlockCount,
      getBlockIndex,
      getBlockParentsByBlockName,
      getBlockRootClientId
    } = select(_blockEditor.store);
    const currentIndentationLevel = getBlockParentsByBlockName(clientId, 'core/list-item', true).length;
    const currentBlockIndex = getBlockIndex(clientId);
    const blockWithInnerBlocks = getBlockCount(clientId) > 0;
    const rootClientId = getBlockRootClientId(clientId);
    const blockAttributes = getBlockAttributes(rootClientId);
    const totalListItems = getBlockCount(rootClientId);
    const {
      ordered: isOrdered,
      reversed: isReversed,
      start: startValue
    } = blockAttributes || {};
    return {
      blockIndex: currentBlockIndex,
      hasInnerBlocks: blockWithInnerBlocks,
      indentationLevel: currentIndentationLevel,
      numberOfListItems: totalListItems,
      ordered: isOrdered,
      reversed: isReversed,
      start: startValue
    };
  }, [clientId]);
  const blockProps = (0, _blockEditor.useBlockProps)({
    ...(hasInnerBlocks && _style.default['wp-block-list-item__nested-blocks'])
  });
  const innerBlocksProps = (0, _blockEditor.useInnerBlocksProps)(blockProps, {
    renderAppender: false
  });

  // Set default placeholder text color from light/dark scheme or base colors
  const defaultPlaceholderFromScheme = (0, _compose.usePreferredColorSchemeStyle)(_style.default['wp-block-list-item__list-item-placeholder'], _style.default['wp-block-list-item__list-item-placeholder--dark']);
  const currentTextColor = style?.color || style?.baseColors?.color?.text;
  const defaultPlaceholderTextColor = currentTextColor ? currentTextColor : defaultPlaceholderFromScheme?.color;

  // Add hex opacity to default placeholder text color and style object
  const defaultPlaceholderTextColorWithOpacity = defaultPlaceholderTextColor + OPACITY;
  const styleWithPlaceholderOpacity = {
    ...style,
    ...(style?.color && {
      placeholderColor: style.color + OPACITY
    })
  };
  const preventDefault = (0, _element.useRef)(false);
  const {
    onEnter
  } = (0, _hooks.useEnter)({
    content,
    clientId
  }, preventDefault);
  const onMerge = (0, _hooks.useMerge)(clientId, mergeBlocks);
  const onLayout = (0, _element.useCallback)(({
    nativeEvent
  }) => {
    setContentWidth(prevState => {
      const {
        width
      } = nativeEvent.layout;
      if (!prevState || prevState.width !== width) {
        return Math.floor(width);
      }
      return prevState;
    });
  }, []);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
    style: _style.default['wp-block-list-item__list-item-parent'],
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
      style: _style.default['wp-block-list-item__list-item'],
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
        style: _style.default['wp-block-list-item__list-item-icon'],
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_listStyleType.default, {
          blockIndex: blockIndex,
          indentationLevel: indentationLevel,
          numberOfListItems: numberOfListItems,
          ordered: ordered,
          reversed: reversed,
          start: start,
          style: style
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
        style: _style.default['wp-block-list-item__list-item-content'],
        onLayout: onLayout,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.RichText, {
          __unstableUseSplitSelection: true,
          identifier: "content",
          tagName: "p",
          onChange: nextContent => setAttributes({
            content: nextContent
          }),
          value: content,
          placeholder: placeholder || (0, _i18n.__)('List'),
          placeholderTextColor: defaultPlaceholderTextColorWithOpacity,
          onMerge: onMerge,
          onEnter: onEnter,
          style: styleWithPlaceholderOpacity,
          deleteEnter: true,
          containerWidth: contentWidth
        })
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
      ...innerBlocksProps
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.BlockControls, {
      group: "block",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_edit.IndentUI, {
        clientId: clientId
      })
    })]
  });
}
//# sourceMappingURL=edit.native.js.map