@wordpress/block-editor/build-module/components/inserter/search-results.native.js

Generic block editor.

import _extends from "@babel/runtime/helpers/esm/extends";
import { createElement } from "@wordpress/element";

/**
 * External dependencies
 */
import { FlatList, View, TouchableHighlight, TouchableWithoutFeedback, Dimensions } from 'react-native';
/**
 * WordPress dependencies
 */

import { useState, useEffect } from '@wordpress/element';
import { BottomSheet, InserterButton } from '@wordpress/components';
/**
 * Internal dependencies
 */

import styles from './style.scss';
const MIN_COL_NUM = 3;

function InserterSearchResults({
  items,
  onSelect,
  listProps,
  safeAreaBottomInset,
  searchFormHeight = 0
}) {
  const [numberOfColumns, setNumberOfColumns] = useState(MIN_COL_NUM);
  const [itemWidth, setItemWidth] = useState();
  const [maxWidth, setMaxWidth] = useState();
  useEffect(() => {
    Dimensions.addEventListener('change', onLayout);
    return () => {
      Dimensions.removeEventListener('change', onLayout);
    };
  }, []);

  function calculateItemWidth() {
    const {
      paddingLeft: itemPaddingLeft,
      paddingRight: itemPaddingRight
    } = InserterButton.Styles.modalItem;
    const {
      width
    } = InserterButton.Styles.modalIconWrapper;
    return width + itemPaddingLeft + itemPaddingRight;
  }

  function onLayout() {
    const sumLeftRightPadding = styles.columnPadding.paddingLeft + styles.columnPadding.paddingRight;
    const bottomSheetWidth = BottomSheet.getWidth();
    const containerTotalWidth = bottomSheetWidth - sumLeftRightPadding;
    const itemTotalWidth = calculateItemWidth();
    const columnsFitToWidth = Math.floor(containerTotalWidth / itemTotalWidth);
    const numColumns = Math.max(MIN_COL_NUM, columnsFitToWidth);
    setNumberOfColumns(numColumns);
    setMaxWidth(containerTotalWidth / numColumns);

    if (columnsFitToWidth < MIN_COL_NUM) {
      const updatedItemWidth = (bottomSheetWidth - 2 * sumLeftRightPadding) / MIN_COL_NUM;
      setItemWidth(updatedItemWidth);
    }
  }

  return createElement(TouchableHighlight, {
    accessible: false
  }, createElement(FlatList, _extends({
    onLayout: onLayout,
    key: `InserterUI-${numberOfColumns}` //re-render when numberOfColumns changes
    ,
    keyboardShouldPersistTaps: "always",
    numColumns: numberOfColumns,
    data: items,
    initialNumToRender: 3,
    ItemSeparatorComponent: () => createElement(TouchableWithoutFeedback, {
      accessible: false
    }, createElement(View, {
      style: styles.rowSeparator
    })),
    keyExtractor: item => item.name,
    renderItem: ({
      item
    }) => createElement(InserterButton, {
      item,
      itemWidth,
      maxWidth,
      onSelect
    })
  }, listProps, {
    contentContainerStyle: [...listProps.contentContainerStyle, {
      paddingBottom: (safeAreaBottomInset || styles.list.paddingBottom) + searchFormHeight
    }]
  })));
}

export default InserterSearchResults;
//# sourceMappingURL=search-results.native.js.map