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

Generic block 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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

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

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

var _style = _interopRequireDefault(require("./style.scss"));

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const MIN_COL_NUM = 3;

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

    return () => {
      _reactNative.Dimensions.removeEventListener('change', onLayout);
    };
  }, []);

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

  function onLayout() {
    const sumLeftRightPadding = _style.default.columnPadding.paddingLeft + _style.default.columnPadding.paddingRight;

    const bottomSheetWidth = _components.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 (0, _element.createElement)(_reactNative.TouchableHighlight, {
    accessible: false
  }, (0, _element.createElement)(_reactNative.FlatList, (0, _extends2.default)({
    onLayout: onLayout,
    key: `InserterUI-${numberOfColumns}` //re-render when numberOfColumns changes
    ,
    keyboardShouldPersistTaps: "always",
    numColumns: numberOfColumns,
    data: items,
    initialNumToRender: 3,
    ItemSeparatorComponent: () => (0, _element.createElement)(_reactNative.TouchableWithoutFeedback, {
      accessible: false
    }, (0, _element.createElement)(_reactNative.View, {
      style: _style.default.rowSeparator
    })),
    keyExtractor: item => item.name,
    renderItem: ({
      item
    }) => (0, _element.createElement)(_components.InserterButton, {
      item,
      itemWidth,
      maxWidth,
      onSelect
    })
  }, listProps, {
    contentContainerStyle: [...listProps.contentContainerStyle, {
      paddingBottom: (safeAreaBottomInset || _style.default.list.paddingBottom) + searchFormHeight
    }]
  })));
}

var _default = InserterSearchResults;
exports.default = _default;
//# sourceMappingURL=search-results.native.js.map