@wordpress/block-editor
Version:
55 lines (54 loc) • 1.89 kB
JavaScript
/**
* External dependencies
*/
import { View } from 'react-native';
/**
* Internal dependencies
*/
import styles from './block-list-item.scss';
import { jsx as _jsx } from "react/jsx-runtime";
function Grid(props) {
/**
* Since we don't have `calc()`, we must calculate our spacings here in
* order to preserve even spacing between tiles and equal width for tiles
* in a given row.
*
* In order to ensure equal sizing of tile contents, we distribute the
* spacing such that each tile has an equal "share" of the fixed spacing. To
* keep the tiles properly aligned within their rows, we calculate the left
* and right paddings based on the tile's relative position within the row.
*
* Note: we use padding instead of margins so that the fixed spacing is
* included within the relative spacing (i.e. width percentage), and
* wrapping behavior is preserved.
*
* - The left most tile in a row must have left padding of zero.
* - The right most tile in a row must have a right padding of zero.
*
* The values of these left and right paddings are interpolated for tiles in
* between. The right padding is complementary with the left padding of the
* next tile (i.e. the right padding of [tile n] + the left padding of
* [tile n + 1] will be equal for all tiles except the last one in a given
* row).
*
*/
const {
numOfColumns,
children,
tileCount,
index,
maxWidth
} = props;
const lastTile = tileCount - 1;
const lastRow = Math.floor(lastTile / numOfColumns);
const row = Math.floor(index / numOfColumns);
const rowLength = row === lastRow ? lastTile % numOfColumns + 1 : numOfColumns;
return /*#__PURE__*/_jsx(View, {
style: [{
width: maxWidth / rowLength
}, styles.gridItem],
children: children
});
}
export default Grid;
//# sourceMappingURL=grid-item.native.js.map