@ringcentral/juno 2.40.1 → 2.41.0

package/components/Virtuoso/react-virtuoso/VirtuosoGrid.js

@@ -0,0 +1,199 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var react_urx_1 = require("./react-urx");
+var u = tslib_1.__importStar(require("./urx"));
+var react_1 = tslib_1.__importDefault(require("react"));
+var gridSystem_1 = require("./gridSystem");
+var useSize_1 = tslib_1.__importDefault(require("./hooks/useSize"));
+var useWindowViewportRect_1 = tslib_1.__importDefault(require("./hooks/useWindowViewportRect"));
+var Virtuoso_1 = require("./Virtuoso");
+var loggerSystem_1 = require("./loggerSystem");
+var correctItemSize_1 = require("./utils/correctItemSize");
+var context_1 = require("./utils/context");
+var gridComponentPropsSystem = /*#__PURE__*/ u.system(function () {
+    var itemContent = u.statefulStream(function (index) { return "Item " + index; });
+    var components = u.statefulStream({});
+    var context = u.statefulStream(null);
+    var itemClassName = u.statefulStream('virtuoso-grid-item');
+    var listClassName = u.statefulStream('virtuoso-grid-list');
+    var computeItemKey = u.statefulStream(Virtuoso_1.identity);
+    var headerFooterTag = u.statefulStream('div');
+    var scrollerRef = u.statefulStream(u.noop);
+    var distinctProp = function (propName, defaultValue) {
+        if (defaultValue === void 0) { defaultValue = null; }
+        return u.statefulStreamFromEmitter(u.pipe(components, u.map(function (components) { return components[propName]; }), u.distinctUntilChanged()), defaultValue);
+    };
+    return {
+        context: context,
+        itemContent: itemContent,
+        components: components,
+        computeItemKey: computeItemKey,
+        itemClassName: itemClassName,
+        listClassName: listClassName,
+        headerFooterTag: headerFooterTag,
+        scrollerRef: scrollerRef,
+        FooterComponent: distinctProp('Footer'),
+        HeaderComponent: distinctProp('Header'),
+        ListComponent: distinctProp('List', 'div'),
+        ItemComponent: distinctProp('Item', 'div'),
+        ScrollerComponent: distinctProp('Scroller', 'div'),
+        ScrollSeekPlaceholder: distinctProp('ScrollSeekPlaceholder', 'div'),
+    };
+});
+var combinedSystem = /*#__PURE__*/ u.system(function (_a) {
+    var _b = tslib_1.__read(_a, 2), gridSystem = _b[0], gridComponentPropsSystem = _b[1];
+    return tslib_1.__assign(tslib_1.__assign({}, gridSystem), gridComponentPropsSystem);
+}, u.tup(gridSystem_1.gridSystem, gridComponentPropsSystem));
+var GridItems = react_1.default.memo(function GridItems() {
+    var gridState = useEmitterValue('gridState');
+    var listClassName = useEmitterValue('listClassName');
+    var itemClassName = useEmitterValue('itemClassName');
+    var itemContent = useEmitterValue('itemContent');
+    var computeItemKey = useEmitterValue('computeItemKey');
+    var isSeeking = useEmitterValue('isSeeking');
+    var scrollHeightCallback = usePublisher('scrollHeight');
+    var ItemComponent = useEmitterValue('ItemComponent');
+    var ListComponent = useEmitterValue('ListComponent');
+    var ScrollSeekPlaceholder = useEmitterValue('ScrollSeekPlaceholder');
+    var context = useEmitterValue('context');
+    var itemDimensions = usePublisher('itemDimensions');
+    var gridGap = usePublisher('gap');
+    var log = useEmitterValue('log');
+    var stateRestoreInProgress = useEmitterValue('stateRestoreInProgress');
+    var listRef = useSize_1.default(function (el) {
+        var scrollHeight = el.parentElement.parentElement.scrollHeight;
+        scrollHeightCallback(scrollHeight);
+        var firstItem = el.firstChild;
+        if (firstItem) {
+            var _a = firstItem.getBoundingClientRect(), width = _a.width, height = _a.height;
+            itemDimensions({ width: width, height: height });
+        }
+        gridGap({
+            row: resolveGapValue('row-gap', getComputedStyle(el).rowGap, log),
+            column: resolveGapValue('column-gap', getComputedStyle(el).columnGap, log),
+        });
+    });
+    if (stateRestoreInProgress) {
+        return null;
+    }
+    //   console.log('rendering items', gridState.items)
+    return react_1.default.createElement(ListComponent, tslib_1.__assign(tslib_1.__assign({ ref: listRef, className: listClassName }, Virtuoso_1.contextPropIfNotDomElement(ListComponent, context)), { style: { paddingTop: gridState.offsetTop, paddingBottom: gridState.offsetBottom }, 'data-test-id': 'virtuoso-item-list' }), gridState.items.map(function (item) {
+        var key = computeItemKey(item.index, item.data, context);
+        return isSeeking
+            ? react_1.default.createElement(ScrollSeekPlaceholder, tslib_1.__assign(tslib_1.__assign({ key: key }, Virtuoso_1.contextPropIfNotDomElement(ScrollSeekPlaceholder, context)), { index: item.index, height: gridState.itemHeight, width: gridState.itemWidth }))
+            : react_1.default.createElement(ItemComponent, tslib_1.__assign(tslib_1.__assign({}, Virtuoso_1.contextPropIfNotDomElement(ItemComponent, context)), { className: itemClassName, 'data-index': item.index, key: key }), itemContent(item.index, item.data, context));
+    }));
+});
+var Header = react_1.default.memo(function VirtuosoHeader() {
+    var Header = useEmitterValue('HeaderComponent');
+    var headerHeight = usePublisher('headerHeight');
+    var headerFooterTag = useEmitterValue('headerFooterTag');
+    var ref = useSize_1.default(function (el) { return headerHeight(correctItemSize_1.correctItemSize(el, 'height')); });
+    var context = useEmitterValue('context');
+    return Header
+        ? react_1.default.createElement(headerFooterTag, { ref: ref }, react_1.default.createElement(Header, Virtuoso_1.contextPropIfNotDomElement(Header, context)))
+        : null;
+});
+var Footer = react_1.default.memo(function VirtuosoGridFooter() {
+    var Footer = useEmitterValue('FooterComponent');
+    var footerHeight = usePublisher('footerHeight');
+    var headerFooterTag = useEmitterValue('headerFooterTag');
+    var ref = useSize_1.default(function (el) { return footerHeight(correctItemSize_1.correctItemSize(el, 'height')); });
+    var context = useEmitterValue('context');
+    return Footer
+        ? react_1.default.createElement(headerFooterTag, { ref: ref }, react_1.default.createElement(Footer, Virtuoso_1.contextPropIfNotDomElement(Footer, context)))
+        : null;
+});
+var Viewport = function (_a) {
+    var children = _a.children;
+    var ctx = react_1.default.useContext(context_1.VirtuosoGridMockContext);
+    var itemDimensions = usePublisher('itemDimensions');
+    var viewportDimensions = usePublisher('viewportDimensions');
+    var viewportRef = useSize_1.default(function (el) {
+        viewportDimensions(el.getBoundingClientRect());
+    });
+    react_1.default.useEffect(function () {
+        if (ctx) {
+            viewportDimensions({ height: ctx.viewportHeight, width: ctx.viewportWidth });
+            itemDimensions({ height: ctx.itemHeight, width: ctx.itemWidth });
+        }
+    }, [ctx, viewportDimensions, itemDimensions]);
+    return (react_1.default.createElement("div", { style: Virtuoso_1.viewportStyle, ref: viewportRef }, children));
+};
+var WindowViewport = function (_a) {
+    var children = _a.children;
+    var ctx = react_1.default.useContext(context_1.VirtuosoGridMockContext);
+    var windowViewportRect = usePublisher('windowViewportRect');
+    var itemDimensions = usePublisher('itemDimensions');
+    var customScrollParent = useEmitterValue('customScrollParent');
+    var viewportRef = useWindowViewportRect_1.default(windowViewportRect, customScrollParent);
+    react_1.default.useEffect(function () {
+        if (ctx) {
+            itemDimensions({ height: ctx.itemHeight, width: ctx.itemWidth });
+            windowViewportRect({ offsetTop: 0, visibleHeight: ctx.viewportHeight, visibleWidth: ctx.viewportWidth });
+        }
+    }, [ctx, windowViewportRect, itemDimensions]);
+    return (react_1.default.createElement("div", { ref: viewportRef, style: Virtuoso_1.viewportStyle }, children));
+};
+var GridRoot = react_1.default.memo(function GridRoot(_a) {
+    var props = tslib_1.__rest(_a, []);
+    var useWindowScroll = useEmitterValue('useWindowScroll');
+    var customScrollParent = useEmitterValue('customScrollParent');
+    var TheScroller = customScrollParent || useWindowScroll ? WindowScroller : Scroller;
+    var TheViewport = customScrollParent || useWindowScroll ? WindowViewport : Viewport;
+    return (react_1.default.createElement(TheScroller, tslib_1.__assign({}, props),
+        react_1.default.createElement(TheViewport, null,
+            react_1.default.createElement(Header, null),
+            react_1.default.createElement(GridItems, null),
+            react_1.default.createElement(Footer, null))));
+});
+var _a = react_urx_1.systemToComponent(combinedSystem, {
+    optional: {
+        context: 'context',
+        totalCount: 'totalCount',
+        overscan: 'overscan',
+        itemContent: 'itemContent',
+        components: 'components',
+        computeItemKey: 'computeItemKey',
+        data: 'data',
+        initialItemCount: 'initialItemCount',
+        scrollSeekConfiguration: 'scrollSeekConfiguration',
+        headerFooterTag: 'headerFooterTag',
+        listClassName: 'listClassName',
+        itemClassName: 'itemClassName',
+        useWindowScroll: 'useWindowScroll',
+        customScrollParent: 'customScrollParent',
+        scrollerRef: 'scrollerRef',
+        logLevel: 'logLevel',
+        restoreStateFrom: 'restoreStateFrom',
+        initialTopMostItemIndex: 'initialTopMostItemIndex',
+    },
+    methods: {
+        scrollTo: 'scrollTo',
+        scrollBy: 'scrollBy',
+        scrollToIndex: 'scrollToIndex',
+    },
+    events: {
+        isScrolling: 'isScrolling',
+        endReached: 'endReached',
+        startReached: 'startReached',
+        rangeChanged: 'rangeChanged',
+        atBottomStateChange: 'atBottomStateChange',
+        atTopStateChange: 'atTopStateChange',
+        stateChanged: 'stateChanged',
+    },
+}, GridRoot), Grid = _a.Component, usePublisher = _a.usePublisher, useEmitterValue = _a.useEmitterValue, useEmitter = _a.useEmitter;
+exports.Grid = Grid;
+var Scroller = /*#__PURE__*/ Virtuoso_1.buildScroller({ usePublisher: usePublisher, useEmitterValue: useEmitterValue, useEmitter: useEmitter });
+var WindowScroller = /*#__PURE__*/ Virtuoso_1.buildWindowScroller({ usePublisher: usePublisher, useEmitterValue: useEmitterValue, useEmitter: useEmitter });
+function resolveGapValue(property, value, log) {
+    if (value !== 'normal' && !(value === null || value === void 0 ? void 0 : value.endsWith('px'))) {
+        log(property + " was not resolved to pixel value correctly", value, loggerSystem_1.LogLevel.WARN);
+    }
+    if (value === 'normal') {
+        return 0;
+    }
+    return parseInt(value !== null && value !== void 0 ? value : '0', 10);
+}
+exports.VirtuosoGrid = Grid;