@wordpress/block-editor 12.0.0 → 12.1.0

package/build/components/block-list/index.native.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.BlockList = void 0;
+exports.default = BlockList;
 
 var _element = require("@wordpress/element");
 
@@ -15,8 +15,6 @@ var _reactNative = require("react-native");
 
 var _data = require("@wordpress/data");
 
-var _compose = require("@wordpress/compose");
-
 var _blocks = require("@wordpress/blocks");
 
 var _components = require("@wordpress/components");
@@ -68,74 +66,98 @@ const getStyles = (isRootList, isStackedHorizontally, horizontalAlignment) => {
   return computedStyles;
 };
 
-class BlockList extends _element.Component {
-  constructor() {
-    super(...arguments);
-    this.extraData = {
-      parentWidth: this.props.parentWidth,
-      renderFooterAppender: this.props.renderFooterAppender,
-      renderAppender: this.props.renderAppender,
-      onDeleteBlock: this.props.onDeleteBlock,
-      contentStyle: this.props.contentStyle
-    };
-    this.renderItem = this.renderItem.bind(this);
-    this.renderBlockListFooter = this.renderBlockListFooter.bind(this);
-    this.scrollViewInnerRef = this.scrollViewInnerRef.bind(this);
-    this.addBlockToEndOfPost = this.addBlockToEndOfPost.bind(this);
-    this.shouldFlatListPreventAutomaticScroll = this.shouldFlatListPreventAutomaticScroll.bind(this);
-    this.shouldShowInnerBlockAppender = this.shouldShowInnerBlockAppender.bind(this);
-    this.renderEmptyList = this.renderEmptyList.bind(this);
-    this.getExtraData = this.getExtraData.bind(this);
-    this.getCellRendererComponent = this.getCellRendererComponent.bind(this);
-    this.onLayout = this.onLayout.bind(this);
-    this.state = {
-      blockWidth: this.props.blockWidth || 0
-    };
-  }
-
-  addBlockToEndOfPost(newBlock) {
-    this.props.insertBlock(newBlock, this.props.blockCount);
-  }
-
-  scrollViewInnerRef(ref) {
-    this.scrollViewRef = ref;
-  }
-
-  shouldFlatListPreventAutomaticScroll() {
-    return this.props.isBlockInsertionPointVisible;
-  }
+function BlockList(_ref) {
+  let {
+    blockWidth: initialBlockWidth,
+    contentResizeMode,
+    contentStyle,
+    filterInnerBlocks,
+    gridProperties,
+    header,
+    horizontal,
+    horizontalAlignment,
+    marginHorizontal = _style.default.defaultBlock.marginLeft,
+    marginVertical = _style.default.defaultBlock.marginTop,
+    onAddBlock,
+    onDeleteBlock,
+    orientation,
+    parentWidth,
+    renderAppender,
+    renderFooterAppender,
+    rootClientId,
+    title,
+    withFooter = true
+  } = _ref;
+  const {
+    blockClientIds,
+    blockCount,
+    blockInsertionPointIsVisible,
+    isReadOnly,
+    isRootList,
+    isFloatingToolbarVisible,
+    isStackedHorizontally,
+    maxWidth,
+    isRTL
+  } = (0, _data.useSelect)(select => {
+    const {
+      getBlockCount,
+      getBlockHierarchyRootClientId,
+      getBlockOrder,
+      getSelectedBlockClientId,
+      isBlockInsertionPointVisible,
+      getSettings
+    } = select(_store.store);
+    const selectedBlockClientId = getSelectedBlockClientId();
+    const rootBlockId = getBlockHierarchyRootClientId(selectedBlockClientId);
+    let blockOrder = getBlockOrder(rootClientId); // Display only block which fulfill the condition in passed `filterInnerBlocks` function.
+
+    if (filterInnerBlocks) {
+      blockOrder = filterInnerBlocks(blockOrder);
+    }
 
-  shouldShowInnerBlockAppender() {
     const {
-      blockClientIds,
-      renderAppender
-    } = this.props;
-    return renderAppender && blockClientIds.length > 0;
-  }
+      isRTL: isRTLSetting,
+      maxWidth: maxWidthSetting,
+      readOnly
+    } = getSettings();
+    return {
+      blockClientIds: blockOrder,
+      blockCount: getBlockCount(),
+      blockInsertionPointIsVisible: _reactNative.Platform.OS === 'ios' && isBlockInsertionPointVisible(),
+      isReadOnly: readOnly,
+      isRootList: rootClientId === undefined,
+      isFloatingToolbarVisible: !!selectedBlockClientId && !!getBlockCount(rootBlockId),
+      isStackedHorizontally: orientation === 'horizontal',
+      maxWidth: maxWidthSetting,
+      isRTL: isRTLSetting
+    };
+  }, [filterInnerBlocks, orientation, rootClientId]);
+  const {
+    insertBlock,
+    clearSelectedBlock
+  } = (0, _data.useDispatch)(_store.store);
+  const extraData = (0, _element.useRef)({
+    parentWidth,
+    renderFooterAppender,
+    renderAppender,
+    onDeleteBlock,
+    contentStyle
+  });
+  const [blockWidth, setBlockWidth] = (0, _element.useState)(initialBlockWidth || 0);
+
+  const addBlockToEndOfPost = newBlock => {
+    insertBlock(newBlock, blockCount);
+  };
 
-  renderEmptyList() {
-    return (0, _element.createElement)(EmptyListComponentCompose, {
-      rootClientId: this.props.rootClientId,
-      renderAppender: this.props.renderAppender,
-      renderFooterAppender: this.props.renderFooterAppender
-    });
-  }
+  const scrollViewRef = (0, _element.useRef)(null);
 
-  getExtraData() {
-    const {
-      parentWidth,
-      renderFooterAppender,
-      onDeleteBlock,
-      contentStyle,
-      renderAppender,
-      gridProperties
-    } = this.props;
-    const {
-      blockWidth
-    } = this.state;
+  const shouldFlatListPreventAutomaticScroll = () => blockInsertionPointIsVisible;
 
-    if (this.extraData.parentWidth !== parentWidth || this.extraData.renderFooterAppender !== renderFooterAppender || this.extraData.onDeleteBlock !== onDeleteBlock || this.extraData.contentStyle !== contentStyle || this.extraData.renderAppender !== renderAppender || this.extraData.blockWidth !== blockWidth || this.extraData.gridProperties !== gridProperties) {
-      this.extraData = {
+  const shouldShowInnerBlockAppender = () => renderAppender && blockClientIds.length > 0;
+
+  const getExtraData = () => {
+    if (extraData.current.parentWidth !== parentWidth || extraData.current.renderFooterAppender !== renderFooterAppender || extraData.current.onDeleteBlock !== onDeleteBlock || extraData.current.contentStyle !== contentStyle || extraData.current.renderAppender !== renderAppender || extraData.current.blockWidth !== blockWidth || extraData.current.gridProperties !== gridProperties) {
+      extraData.current = {
         parentWidth,
         renderFooterAppender,
         onDeleteBlock,
@@ -146,101 +168,27 @@ class BlockList extends _element.Component {
       };
     }
 
-    return this.extraData;
-  }
-
-  getCellRendererComponent(_ref) {
-    let {
-      children,
-      item,
-      onLayout
-    } = _ref;
-    const {
-      rootClientId
-    } = this.props;
-    return (0, _element.createElement)(_blockListItemCell.default, {
-      children: children,
-      clientId: item,
-      onLayout: onLayout,
-      rootClientId: rootClientId
-    });
-  }
+    return extraData.current;
+  };
 
-  onLayout(_ref2) {
+  const onLayout = _ref2 => {
     let {
       nativeEvent
     } = _ref2;
     const {
       layout
     } = nativeEvent;
-    const {
-      blockWidth
-    } = this.state;
-    const {
-      isRootList,
-      maxWidth
-    } = this.props;
     const layoutWidth = Math.floor(layout.width);
 
     if (isRootList && blockWidth !== layoutWidth) {
-      this.setState({
-        blockWidth: Math.min(layoutWidth, maxWidth)
-      });
+      setBlockWidth(Math.min(layoutWidth, maxWidth));
     } else if (!isRootList && !blockWidth) {
-      this.setState({
-        blockWidth: Math.min(layoutWidth, maxWidth)
-      });
+      setBlockWidth(Math.min(layoutWidth, maxWidth));
     }
-  }
-
-  render() {
-    const {
-      isRootList,
-      isRTL
-    } = this.props; // Use of Context to propagate the main scroll ref to its children e.g InnerBlocks.
-
-    const blockList = isRootList ? (0, _element.createElement)(_blockListContext.BlockListProvider, {
-      value: { ..._blockListContext.DEFAULT_BLOCK_LIST_CONTEXT,
-        scrollRef: this.scrollViewRef
-      }
-    }, (0, _element.createElement)(_blockDraggable.BlockDraggableWrapper, {
-      isRTL: isRTL
-    }, _ref3 => {
-      let {
-        onScroll
-      } = _ref3;
-      return this.renderList({
-        onScroll
-      });
-    })) : (0, _element.createElement)(_blockListContext.BlockListConsumer, null, _ref4 => {
-      let {
-        scrollRef
-      } = _ref4;
-      return this.renderList({
-        parentScrollRef: scrollRef
-      });
-    });
-    return blockList;
-  }
+  };
 
-  renderList() {
+  const renderList = function () {
     let extraProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    const {
-      clearSelectedBlock,
-      blockClientIds,
-      title,
-      header,
-      isReadOnly,
-      isRootList,
-      horizontal,
-      marginVertical = _style.default.defaultBlock.marginTop,
-      marginHorizontal = _style.default.defaultBlock.marginLeft,
-      isFloatingToolbarVisible,
-      isStackedHorizontally,
-      horizontalAlignment,
-      contentResizeMode,
-      blockWidth
-    } = this.props;
     const {
       parentScrollRef,
       onScroll
@@ -268,7 +216,7 @@ class BlockList extends _element.Component {
     return (0, _element.createElement)(_reactNative.View, {
       style: containerStyle,
       onAccessibilityEscape: clearSelectedBlock,
-      onLayout: this.onLayout,
+      onLayout: onLayout,
       testID: "block-list-wrapper"
     }, (0, _element.createElement)(_components.KeyboardAwareFlatList, (0, _extends2.default)({}, _reactNative.Platform.OS === 'android' ? {
       removeClippedSubviews: false
@@ -276,58 +224,54 @@ class BlockList extends _element.Component {
       // Disable clipping on Android to fix focus losing. See https://github.com/wordpress-mobile/gutenberg-mobile/pull/741#issuecomment-472746541
       accessibilityLabel: "block-list",
       innerRef: ref => {
-        this.scrollViewInnerRef(parentScrollRef || ref);
+        scrollViewRef.current = parentScrollRef || ref;
       },
       extraScrollHeight: extraScrollHeight,
       keyboardShouldPersistTaps: "always",
       scrollViewStyle: scrollViewStyle,
-      extraData: this.getExtraData(),
+      extraData: getExtraData(),
       scrollEnabled: isRootList,
       contentContainerStyle: [horizontal && _style.default.horizontalContentContainer, isWider(blockWidth, 'medium') && (isContentStretch && isMultiBlocks ? _style.default.horizontalContentContainerStretch : _style.default.horizontalContentContainerCenter)],
       style: getStyles(isRootList, isStackedHorizontally, horizontalAlignment),
       data: blockClientIds,
       keyExtractor: identity,
-      renderItem: this.renderItem,
-      CellRendererComponent: this.getCellRendererComponent,
-      shouldPreventAutomaticScroll: this.shouldFlatListPreventAutomaticScroll,
+      listKey: rootClientId ? `list-${rootClientId}` : 'list-root',
+      renderItem: renderItem,
+      CellRendererComponent: _blockListItemCell.default,
+      shouldPreventAutomaticScroll: shouldFlatListPreventAutomaticScroll,
       title: title,
       ListHeaderComponent: header,
-      ListEmptyComponent: !isReadOnly && this.renderEmptyList,
-      ListFooterComponent: this.renderBlockListFooter,
+      ListEmptyComponent: !isReadOnly && (0, _element.createElement)(EmptyList, {
+        orientation: orientation,
+        rootClientId: rootClientId,
+        renderAppender: renderAppender,
+        renderFooterAppender: renderFooterAppender
+      }),
+      ListFooterComponent: (0, _element.createElement)(Footer, {
+        addBlockToEndOfPost: addBlockToEndOfPost,
+        isReadOnly: isReadOnly,
+        renderFooterAppender: renderFooterAppender,
+        withFooter: withFooter
+      }),
       onScroll: onScroll
-    })), this.shouldShowInnerBlockAppender() && (0, _element.createElement)(_reactNative.View, {
+    })), shouldShowInnerBlockAppender() && (0, _element.createElement)(_reactNative.View, {
       style: {
         marginHorizontal: marginHorizontal - _style.default.innerAppender.marginLeft
       }
     }, (0, _element.createElement)(_blockListAppender.default, {
-      rootClientId: this.props.rootClientId,
-      renderAppender: this.props.renderAppender,
+      rootClientId: rootClientId,
+      renderAppender: renderAppender,
       showSeparator: true
     })));
-  }
+  };
 
-  renderItem(_ref5) {
+  const renderItem = _ref3 => {
     let {
-      item: clientId
-    } = _ref5;
-    const {
-      contentResizeMode,
-      contentStyle,
-      onAddBlock,
-      onDeleteBlock,
-      rootClientId,
-      isStackedHorizontally,
-      blockClientIds,
-      parentWidth,
-      marginVertical = _style.default.defaultBlock.marginTop,
-      marginHorizontal = _style.default.defaultBlock.marginLeft,
-      gridProperties
-    } = this.props;
-    const {
-      blockWidth
-    } = this.state; // Extracting the grid item properties here to avoid
+      item: clientId,
+      index
+    } = _ref3;
+    // Extracting the grid item properties here to avoid
     // re-renders in the blockListItem component.
-
     const isGridItem = !!gridProperties;
     const gridItemProps = gridProperties && {
       numOfColumns: gridProperties.numColumns,
@@ -335,6 +279,7 @@ class BlockList extends _element.Component {
       tileIndex: blockClientIds.indexOf(clientId)
     };
     return (0, _element.createElement)(_blockListItem.default, (0, _extends2.default)({
+      index: index,
       isStackedHorizontally: isStackedHorizontally,
       rootClientId: rootClientId,
       clientId: clientId,
@@ -345,142 +290,101 @@ class BlockList extends _element.Component {
       marginVertical: marginVertical,
       marginHorizontal: marginHorizontal,
       onDeleteBlock: onDeleteBlock,
-      shouldShowInnerBlockAppender: this.shouldShowInnerBlockAppender,
+      shouldShowInnerBlockAppender: shouldShowInnerBlockAppender,
       blockWidth: blockWidth,
       isGridItem: isGridItem
     }, gridItemProps));
-  }
+  }; // Use of Context to propagate the main scroll ref to its children e.g InnerBlocks.
 
-  renderBlockListFooter() {
-    const paragraphBlock = (0, _blocks.createBlock)('core/paragraph');
-    const {
-      isReadOnly,
-      withFooter = true,
-      renderFooterAppender
-    } = this.props;
-
-    if (!isReadOnly && withFooter) {
-      return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_reactNative.TouchableWithoutFeedback, {
-        accessibilityLabel: (0, _i18n.__)('Add paragraph block'),
-        testID: (0, _i18n.__)('Add paragraph block'),
-        onPress: () => {
-          this.addBlockToEndOfPost(paragraphBlock);
-        }
-      }, (0, _element.createElement)(_reactNative.View, {
-        style: _style.default.blockListFooter
-      })));
-    } else if (renderFooterAppender) {
-      return renderFooterAppender();
-    }
-
-    return null;
-  }
 
+  const blockList = isRootList ? (0, _element.createElement)(_blockListContext.BlockListProvider, {
+    value: { ..._blockListContext.DEFAULT_BLOCK_LIST_CONTEXT,
+      scrollRef: scrollViewRef.current
+    }
+  }, (0, _element.createElement)(_blockDraggable.BlockDraggableWrapper, {
+    isRTL: isRTL
+  }, _ref4 => {
+    let {
+      onScroll
+    } = _ref4;
+    return renderList({
+      onScroll
+    });
+  })) : (0, _element.createElement)(_blockListContext.BlockListConsumer, null, _ref5 => {
+    let {
+      scrollRef
+    } = _ref5;
+    return renderList({
+      parentScrollRef: scrollRef
+    });
+  });
+  return blockList;
 }
 
-exports.BlockList = BlockList;
-
-var _default = (0, _compose.compose)([(0, _data.withSelect)((select, _ref6) => {
+function Footer(_ref6) {
   let {
-    rootClientId,
-    orientation,
-    filterInnerBlocks
-  } = _ref6;
-  const {
-    getBlockCount,
-    getBlockHierarchyRootClientId,
-    getBlockOrder,
-    getSelectedBlockClientId,
-    isBlockInsertionPointVisible,
-    getSettings
-  } = select(_store.store);
-  const isStackedHorizontally = orientation === 'horizontal';
-  const selectedBlockClientId = getSelectedBlockClientId();
-  let blockClientIds = getBlockOrder(rootClientId); // Display only block which fulfill the condition in passed `filterInnerBlocks` function.
-
-  if (filterInnerBlocks) {
-    blockClientIds = filterInnerBlocks(blockClientIds);
-  }
-
-  const {
-    maxWidth
-  } = getSettings();
-  const isReadOnly = getSettings().readOnly;
-  const blockCount = getBlockCount();
-  const rootBlockId = getBlockHierarchyRootClientId(selectedBlockClientId);
-  const isFloatingToolbarVisible = !!selectedBlockClientId && !!getBlockCount(rootBlockId);
-  const isRTL = getSettings().isRTL;
-  return {
-    blockClientIds,
-    blockCount,
-    isBlockInsertionPointVisible: _reactNative.Platform.OS === 'ios' && isBlockInsertionPointVisible(),
+    addBlockToEndOfPost,
     isReadOnly,
-    isRootList: rootClientId === undefined,
-    isFloatingToolbarVisible,
-    isStackedHorizontally,
-    maxWidth,
-    isRTL
-  };
-}), (0, _data.withDispatch)(dispatch => {
-  const {
-    insertBlock,
-    replaceBlock,
-    clearSelectedBlock
-  } = dispatch(_store.store);
-  return {
-    clearSelectedBlock,
-    insertBlock,
-    replaceBlock
-  };
-}), _compose.withPreferredColorScheme])(BlockList);
-
-exports.default = _default;
-
-class EmptyListComponent extends _element.Component {
-  render() {
-    const {
-      shouldShowInsertionPoint,
-      rootClientId,
-      renderAppender,
-      renderFooterAppender
-    } = this.props;
-
-    if (renderFooterAppender || renderAppender === false) {
-      return null;
-    }
+    renderFooterAppender,
+    withFooter
+  } = _ref6;
 
-    return (0, _element.createElement)(_reactNative.View, {
-      style: _style.default.defaultAppender
-    }, (0, _element.createElement)(_components.ReadableContentView, {
-      align: renderAppender ? _components.WIDE_ALIGNMENTS.alignments.full : undefined
-    }, (0, _element.createElement)(_blockListAppender.default, {
-      rootClientId: rootClientId,
-      renderAppender: renderAppender,
-      showSeparator: shouldShowInsertionPoint
+  if (!isReadOnly && withFooter) {
+    return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_reactNative.TouchableWithoutFeedback, {
+      accessibilityLabel: (0, _i18n.__)('Add paragraph block'),
+      testID: (0, _i18n.__)('Add paragraph block'),
+      onPress: () => {
+        const paragraphBlock = (0, _blocks.createBlock)('core/paragraph');
+        addBlockToEndOfPost(paragraphBlock);
+      }
+    }, (0, _element.createElement)(_reactNative.View, {
+      style: _style.default.blockListFooter
     })));
+  } else if (renderFooterAppender) {
+    return renderFooterAppender();
   }
 
+  return null;
 }
 
-const EmptyListComponentCompose = (0, _compose.compose)([(0, _data.withSelect)((select, _ref7) => {
+function EmptyList(_ref7) {
   let {
-    rootClientId,
-    orientation
+    orientation,
+    renderAppender,
+    renderFooterAppender,
+    rootClientId
   } = _ref7;
   const {
-    getBlockOrder,
-    getBlockInsertionPoint,
-    isBlockInsertionPointVisible
-  } = select(_store.store);
-  const isStackedHorizontally = orientation === 'horizontal';
-  const blockClientIds = getBlockOrder(rootClientId);
-  const insertionPoint = getBlockInsertionPoint();
-  const blockInsertionPointIsVisible = isBlockInsertionPointVisible();
-  const shouldShowInsertionPoint = !isStackedHorizontally && blockInsertionPointIsVisible && insertionPoint.rootClientId === rootClientId && ( // If list is empty, show the insertion point (via the default appender)
-  blockClientIds.length === 0 || // Or if the insertion point is right before the denoted block.
-  !blockClientIds[insertionPoint.index]);
-  return {
     shouldShowInsertionPoint
-  };
-})])(EmptyListComponent);
+  } = (0, _data.useSelect)(select => {
+    const {
+      getBlockOrder,
+      getBlockInsertionPoint,
+      isBlockInsertionPointVisible
+    } = select(_store.store);
+    const isStackedHorizontally = orientation === 'horizontal';
+    const blockClientIds = getBlockOrder(rootClientId);
+    const insertionPoint = getBlockInsertionPoint();
+    const blockInsertionPointIsVisible = isBlockInsertionPointVisible();
+    return {
+      shouldShowInsertionPoint: !isStackedHorizontally && blockInsertionPointIsVisible && insertionPoint.rootClientId === rootClientId && ( // If list is empty, show the insertion point (via the default appender)
+      blockClientIds.length === 0 || // Or if the insertion point is right before the denoted block.
+      !blockClientIds[insertionPoint.index])
+    };
+  });
+
+  if (renderFooterAppender || renderAppender === false) {
+    return null;
+  }
+
+  return (0, _element.createElement)(_reactNative.View, {
+    style: _style.default.defaultAppender
+  }, (0, _element.createElement)(_components.ReadableContentView, {
+    align: renderAppender ? _components.WIDE_ALIGNMENTS.alignments.full : undefined
+  }, (0, _element.createElement)(_blockListAppender.default, {
+    rootClientId: rootClientId,
+    renderAppender: renderAppender,
+    showSeparator: shouldShowInsertionPoint
+  })));
+}
 //# sourceMappingURL=index.native.js.map