@vimeo/iris/_deprecated/Grid/Grid.js

Vimeo Design System

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tslib_es6 = require('../../tslib.es6-3ec409b7.js');
var React = require('react');
var _deprecated_Grid_Grid_style = require('./Grid.style.js');
var _deprecated_Grid_Grid_state = require('./Grid.state.js');
var utils_HOCs_withIris = require('../../utils/HOCs/withIris.js');
var utils_hooks_useMeasure = require('../../utils/hooks/useMeasure.js');
require('styled-components');
require('polished');
require('react-dom');
require('../../utils/DOM/createPortalOutlet.js');
require('../../utils/DOM/SSR.js');
require('../../utils/DOM/createElement.js');
require('../../utils/DOM/geometry.js');
require('../../utils/DOM/removeElementByID.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

var Grid = utils_HOCs_withIris.withIris(GridComponent);
function GridComponent(_a) {
    var _b;
    var children = _a.children, masonry = _a.masonry, _c = _a.columns, columns = _c === void 0 ? 4 : _c, featured = _a.featured, forwardRef = _a.forwardRef, props = tslib_es6.__rest(_a, ["children", "masonry", "columns", "featured", "forwardRef"]);
    var _d = tslib_es6.__read(React.useReducer(_deprecated_Grid_Grid_state.reducer, _deprecated_Grid_Grid_state.initialState()), 2), state = _d[0], dispatch = _d[1];
    var gridGap = state.gridGap;
    var ref = React.useRef(null);
    React.useImperativeHandle(forwardRef, function () { return ref.current; }, [ref]);
    var _e = tslib_es6.__read(utils_hooks_useMeasure.useMeasure(React__default["default"].createElement("div", null, children), { depth: 1 }), 2), measuredGridItems = _e[0], data = _e[1];
    React.useEffect(function () {
        var _a, _b, _c;
        var lastGap = gridGap;
        var gap = parseInt((_c = (_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.gap.slice(0, -2)) !== null && _c !== void 0 ? _c : 0);
        var gapChanged = !Number.isNaN(gap) && gap !== lastGap && gap > 0;
        if (gapChanged)
            dispatch({ type: 'SET_GRID_GAP', payload: gap });
    }, [gridGap]);
    function applyGridStyles(_a, i, height) {
        var style = _a.props.style;
        var gridColumn = featured === i ? '1/-1' : '';
        if (!masonry)
            return tslib_es6.__assign(tslib_es6.__assign({}, style), { gridColumn: gridColumn });
        // masonry requires us to calculate `grid-row-end` for each
        // child based upon the child's height
        var marginBottom = gridGap;
        var gridRowEnd = 'span ' + (height + gridGap + 1);
        return tslib_es6.__assign(tslib_es6.__assign({}, style), { gridRowEnd: gridRowEnd, marginBottom: marginBottom, gridColumn: gridColumn });
    }
    function cloneWithStyles(heights) {
        return function (child, i) {
            var style = applyGridStyles(child, i, heights[i]);
            return React.cloneElement(child, { style: style });
        };
    }
    function rebuildChildren() {
        var _a;
        // if useMeasure returns a portal to perform a measure
        if (measuredGridItems.type !== 'div')
            return children;
        // if useMeasure returns the component(s) with the measurements
        if (measuredGridItems.type === 'div') {
            var heights = (_a = data === null || data === void 0 ? void 0 : data.children) === null || _a === void 0 ? void 0 : _a.map(function (_a) {
                var height = _a.height;
                return height;
            });
            var children_1 = measuredGridItems.props.children;
            var gridItems = children_1.map(cloneWithStyles(heights));
            return gridItems;
        }
    }
    children = ((_b = measuredGridItems === null || measuredGridItems === void 0 ? void 0 : measuredGridItems.props) === null || _b === void 0 ? void 0 : _b.children)
        ? rebuildChildren()
        : measuredGridItems;
    return (React__default["default"].createElement(_deprecated_Grid_Grid_style.Styled, tslib_es6.__assign({ columns: columns, masonry: masonry, gridGap: gridGap, ref: ref, stagger: false }, props), children));
}

exports.Grid = Grid;