@ringcentral/juno 2.40.1 → 2.41.1

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

@@ -0,0 +1,317 @@
+"use strict";
+var _a;
+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 useIsomorphicLayoutEffect_1 = tslib_1.__importDefault(require("./hooks/useIsomorphicLayoutEffect"));
+var useChangedChildSizes_1 = tslib_1.__importDefault(require("./hooks/useChangedChildSizes"));
+var useScrollTop_1 = tslib_1.__importDefault(require("./hooks/useScrollTop"));
+var useSize_1 = tslib_1.__importDefault(require("./hooks/useSize"));
+var listSystem_1 = require("./listSystem");
+var positionStickyCssValue_1 = require("./utils/positionStickyCssValue");
+var useWindowViewportRect_1 = tslib_1.__importDefault(require("./hooks/useWindowViewportRect"));
+var correctItemSize_1 = require("./utils/correctItemSize");
+var context_1 = require("./utils/context");
+function identity(value) {
+    return value;
+}
+exports.identity = identity;
+var listComponentPropsSystem = /*#__PURE__*/ u.system(function () {
+    var itemContent = u.statefulStream(function (index) { return "Item " + index; });
+    var context = u.statefulStream(null);
+    var groupContent = u.statefulStream(function (index) { return "Group " + index; });
+    var components = u.statefulStream({});
+    var computeItemKey = u.statefulStream(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,
+        groupContent: groupContent,
+        components: components,
+        computeItemKey: computeItemKey,
+        headerFooterTag: headerFooterTag,
+        scrollerRef: scrollerRef,
+        FooterComponent: distinctProp('Footer'),
+        HeaderComponent: distinctProp('Header'),
+        TopItemListComponent: distinctProp('TopItemList'),
+        ListComponent: distinctProp('List', 'div'),
+        ItemComponent: distinctProp('Item', 'div'),
+        GroupComponent: distinctProp('Group', 'div'),
+        ScrollerComponent: distinctProp('Scroller', 'div'),
+        EmptyPlaceholder: distinctProp('EmptyPlaceholder'),
+        ScrollSeekPlaceholder: distinctProp('ScrollSeekPlaceholder'),
+    };
+});
+var combinedSystem = /*#__PURE__*/ u.system(function (_a) {
+    var _b = tslib_1.__read(_a, 2), listSystem = _b[0], propsSystem = _b[1];
+    return tslib_1.__assign(tslib_1.__assign({}, listSystem), propsSystem);
+}, u.tup(listSystem_1.listSystem, listComponentPropsSystem));
+var DefaultScrollSeekPlaceholder = function (_a) {
+    var height = _a.height;
+    return react_1.default.createElement("div", { style: { height: height } });
+};
+var GROUP_STYLE = { position: positionStickyCssValue_1.positionStickyCssValue(), zIndex: 1, overflowAnchor: 'none' };
+var ITEM_STYLE = { overflowAnchor: 'none' };
+var Items = /*#__PURE__*/ react_1.default.memo(function VirtuosoItems(_a) {
+    var _b = _a.showTopList, showTopList = _b === void 0 ? false : _b;
+    var listState = exports.useEmitterValue('listState');
+    var sizeRanges = exports.usePublisher('sizeRanges');
+    var useWindowScroll = exports.useEmitterValue('useWindowScroll');
+    var customScrollParent = exports.useEmitterValue('customScrollParent');
+    var windowScrollContainerStateCallback = exports.usePublisher('windowScrollContainerState');
+    var _scrollContainerStateCallback = exports.usePublisher('scrollContainerState');
+    var scrollContainerStateCallback = customScrollParent || useWindowScroll ? windowScrollContainerStateCallback : _scrollContainerStateCallback;
+    var itemContent = exports.useEmitterValue('itemContent');
+    var context = exports.useEmitterValue('context');
+    var groupContent = exports.useEmitterValue('groupContent');
+    var trackItemSizes = exports.useEmitterValue('trackItemSizes');
+    var itemSize = exports.useEmitterValue('itemSize');
+    var log = exports.useEmitterValue('log');
+    var listGap = exports.usePublisher('gap');
+    var callbackRef = useChangedChildSizes_1.default(sizeRanges, itemSize, trackItemSizes, showTopList ? u.noop : scrollContainerStateCallback, log, listGap, customScrollParent).callbackRef;
+    var _c = tslib_1.__read(react_1.default.useState(0), 2), deviation = _c[0], setDeviation = _c[1];
+    exports.useEmitter('deviation', function (value) {
+        if (deviation !== value) {
+            // ref.current!.style.marginTop = `${value}px`
+            setDeviation(value);
+        }
+    });
+    var EmptyPlaceholder = exports.useEmitterValue('EmptyPlaceholder');
+    var ScrollSeekPlaceholder = exports.useEmitterValue('ScrollSeekPlaceholder') || DefaultScrollSeekPlaceholder;
+    var ListComponent = exports.useEmitterValue('ListComponent');
+    var ItemComponent = exports.useEmitterValue('ItemComponent');
+    var GroupComponent = exports.useEmitterValue('GroupComponent');
+    var computeItemKey = exports.useEmitterValue('computeItemKey');
+    var isSeeking = exports.useEmitterValue('isSeeking');
+    var hasGroups = exports.useEmitterValue('groupIndices').length > 0;
+    var paddingTopAddition = exports.useEmitterValue('paddingTopAddition');
+    var scrolledToInitialItem = exports.useEmitterValue('scrolledToInitialItem');
+    var containerStyle = showTopList
+        ? {}
+        : tslib_1.__assign({ boxSizing: 'border-box', paddingTop: listState.offsetTop + paddingTopAddition, paddingBottom: listState.offsetBottom, marginTop: deviation }, (scrolledToInitialItem ? {} : { visibility: 'hidden' }));
+    if (!showTopList && listState.totalCount === 0 && EmptyPlaceholder) {
+        return react_1.default.createElement(EmptyPlaceholder, contextPropIfNotDomElement(EmptyPlaceholder, context));
+    }
+    return react_1.default.createElement(ListComponent, tslib_1.__assign(tslib_1.__assign({}, contextPropIfNotDomElement(ListComponent, context)), { ref: callbackRef, style: containerStyle, 'data-test-id': showTopList ? 'virtuoso-top-item-list' : 'virtuoso-item-list' }), (showTopList ? listState.topItems : listState.items).map(function (item) {
+        var index = item.originalIndex;
+        var key = computeItemKey(index + listState.firstItemIndex, item.data, context);
+        if (isSeeking) {
+            return react_1.default.createElement(ScrollSeekPlaceholder, tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, contextPropIfNotDomElement(ScrollSeekPlaceholder, context)), { key: key, index: item.index, height: item.size, type: item.type || 'item' }), (item.type === 'group' ? {} : { groupIndex: item.groupIndex })));
+        }
+        if (item.type === 'group') {
+            return react_1.default.createElement(GroupComponent, tslib_1.__assign(tslib_1.__assign({}, contextPropIfNotDomElement(GroupComponent, context)), { key: key, 'data-index': index, 'data-known-size': item.size, 'data-item-index': item.index, style: GROUP_STYLE }), groupContent(item.index, context));
+        }
+        else {
+            return react_1.default.createElement(ItemComponent, tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, contextPropIfNotDomElement(ItemComponent, context)), itemPropIfNotDomElement(ItemComponent, item.data)), { key: key, 'data-index': index, 'data-known-size': item.size, 'data-item-index': item.index, 'data-item-group-index': item.groupIndex, style: ITEM_STYLE }), hasGroups
+                ? itemContent(item.index, item.groupIndex, item.data, context)
+                : itemContent(item.index, item.data, context));
+        }
+    }));
+});
+exports.scrollerStyle = {
+    height: '100%',
+    outline: 'none',
+    overflowY: 'auto',
+    position: 'relative',
+    WebkitOverflowScrolling: 'touch',
+};
+exports.viewportStyle = {
+    width: '100%',
+    height: '100%',
+    position: 'absolute',
+    top: 0,
+};
+var topItemListStyle = {
+    width: '100%',
+    position: positionStickyCssValue_1.positionStickyCssValue(),
+    top: 0,
+    zIndex: 1,
+};
+function contextPropIfNotDomElement(element, context) {
+    if (typeof element === 'string') {
+        return undefined;
+    }
+    return { context: context };
+}
+exports.contextPropIfNotDomElement = contextPropIfNotDomElement;
+function itemPropIfNotDomElement(element, item) {
+    return { item: typeof element === 'string' ? undefined : item };
+}
+exports.itemPropIfNotDomElement = itemPropIfNotDomElement;
+var Header = react_1.default.memo(function VirtuosoHeader() {
+    var Header = exports.useEmitterValue('HeaderComponent');
+    var headerHeight = exports.usePublisher('headerHeight');
+    var headerFooterTag = exports.useEmitterValue('headerFooterTag');
+    var ref = useSize_1.default(function (el) { return headerHeight(correctItemSize_1.correctItemSize(el, 'height')); });
+    var context = exports.useEmitterValue('context');
+    return Header
+        ? react_1.default.createElement(headerFooterTag, { ref: ref }, react_1.default.createElement(Header, contextPropIfNotDomElement(Header, context)))
+        : null;
+});
+var Footer = react_1.default.memo(function VirtuosoFooter() {
+    var Footer = exports.useEmitterValue('FooterComponent');
+    var footerHeight = exports.usePublisher('footerHeight');
+    var headerFooterTag = exports.useEmitterValue('headerFooterTag');
+    var ref = useSize_1.default(function (el) { return footerHeight(correctItemSize_1.correctItemSize(el, 'height')); });
+    var context = exports.useEmitterValue('context');
+    return Footer
+        ? react_1.default.createElement(headerFooterTag, { ref: ref }, react_1.default.createElement(Footer, contextPropIfNotDomElement(Footer, context)))
+        : null;
+});
+function buildScroller(_a) {
+    var usePublisher = _a.usePublisher, useEmitter = _a.useEmitter, useEmitterValue = _a.useEmitterValue;
+    var Scroller = react_1.default.memo(function VirtuosoScroller(_a) {
+        var style = _a.style, children = _a.children, props = tslib_1.__rest(_a, ["style", "children"]);
+        var scrollContainerStateCallback = usePublisher('scrollContainerState');
+        var ScrollerComponent = useEmitterValue('ScrollerComponent');
+        var smoothScrollTargetReached = usePublisher('smoothScrollTargetReached');
+        var scrollerRefCallback = useEmitterValue('scrollerRef');
+        var context = useEmitterValue('context');
+        var _b = useScrollTop_1.default(scrollContainerStateCallback, smoothScrollTargetReached, ScrollerComponent, scrollerRefCallback), scrollerRef = _b.scrollerRef, scrollByCallback = _b.scrollByCallback, scrollToCallback = _b.scrollToCallback;
+        useEmitter('scrollTo', scrollToCallback);
+        useEmitter('scrollBy', scrollByCallback);
+        return react_1.default.createElement(ScrollerComponent, tslib_1.__assign(tslib_1.__assign({ ref: scrollerRef, style: tslib_1.__assign(tslib_1.__assign({}, exports.scrollerStyle), style), 'data-test-id': 'virtuoso-scroller', 'data-virtuoso-scroller': true, tabIndex: 0 }, props), contextPropIfNotDomElement(ScrollerComponent, context)), children);
+    });
+    return Scroller;
+}
+exports.buildScroller = buildScroller;
+function buildWindowScroller(_a) {
+    var usePublisher = _a.usePublisher, useEmitter = _a.useEmitter, useEmitterValue = _a.useEmitterValue;
+    var Scroller = react_1.default.memo(function VirtuosoWindowScroller(_a) {
+        var style = _a.style, children = _a.children, props = tslib_1.__rest(_a, ["style", "children"]);
+        var scrollContainerStateCallback = usePublisher('windowScrollContainerState');
+        var ScrollerComponent = useEmitterValue('ScrollerComponent');
+        var smoothScrollTargetReached = usePublisher('smoothScrollTargetReached');
+        var totalListHeight = useEmitterValue('totalListHeight');
+        var deviation = useEmitterValue('deviation');
+        var customScrollParent = useEmitterValue('customScrollParent');
+        var context = useEmitterValue('context');
+        var _b = useScrollTop_1.default(scrollContainerStateCallback, smoothScrollTargetReached, ScrollerComponent, u.noop, customScrollParent), scrollerRef = _b.scrollerRef, scrollByCallback = _b.scrollByCallback, scrollToCallback = _b.scrollToCallback;
+        useIsomorphicLayoutEffect_1.default(function () {
+            scrollerRef.current = customScrollParent ? customScrollParent : window;
+            return function () {
+                scrollerRef.current = null;
+            };
+        }, [scrollerRef, customScrollParent]);
+        useEmitter('windowScrollTo', scrollToCallback);
+        useEmitter('scrollBy', scrollByCallback);
+        return react_1.default.createElement(ScrollerComponent, tslib_1.__assign(tslib_1.__assign({ style: tslib_1.__assign(tslib_1.__assign({ position: 'relative' }, style), (totalListHeight !== 0 ? { height: totalListHeight + deviation } : {})), 'data-virtuoso-scroller': true }, props), contextPropIfNotDomElement(ScrollerComponent, context)), children);
+    });
+    return Scroller;
+}
+exports.buildWindowScroller = buildWindowScroller;
+var Viewport = function (_a) {
+    var children = _a.children;
+    var ctx = react_1.default.useContext(context_1.VirtuosoMockContext);
+    var viewportHeight = exports.usePublisher('viewportHeight');
+    var fixedItemHeight = exports.usePublisher('fixedItemHeight');
+    var viewportRef = useSize_1.default(u.compose(viewportHeight, function (el) { return correctItemSize_1.correctItemSize(el, 'height'); }));
+    react_1.default.useEffect(function () {
+        if (ctx) {
+            viewportHeight(ctx.viewportHeight);
+            fixedItemHeight(ctx.itemHeight);
+        }
+    }, [ctx, viewportHeight, fixedItemHeight]);
+    return (react_1.default.createElement("div", { style: exports.viewportStyle, ref: viewportRef, "data-viewport-type": "element" }, children));
+};
+var WindowViewport = function (_a) {
+    var children = _a.children;
+    var ctx = react_1.default.useContext(context_1.VirtuosoMockContext);
+    var windowViewportRect = exports.usePublisher('windowViewportRect');
+    var fixedItemHeight = exports.usePublisher('fixedItemHeight');
+    var customScrollParent = exports.useEmitterValue('customScrollParent');
+    var viewportRef = useWindowViewportRect_1.default(windowViewportRect, customScrollParent);
+    react_1.default.useEffect(function () {
+        if (ctx) {
+            fixedItemHeight(ctx.itemHeight);
+            windowViewportRect({ offsetTop: 0, visibleHeight: ctx.viewportHeight, visibleWidth: 100 });
+        }
+    }, [ctx, windowViewportRect, fixedItemHeight]);
+    return (react_1.default.createElement("div", { ref: viewportRef, style: exports.viewportStyle, "data-viewport-type": "window" }, children));
+};
+var TopItemListContainer = function (_a) {
+    var children = _a.children;
+    var TopItemList = exports.useEmitterValue('TopItemListComponent');
+    var headerHeight = exports.useEmitterValue('headerHeight');
+    var style = tslib_1.__assign(tslib_1.__assign({}, topItemListStyle), { marginTop: headerHeight + "px" });
+    var context = exports.useEmitterValue('context');
+    return react_1.default.createElement(TopItemList || 'div', { style: style, context: context }, children);
+};
+var ListRoot = react_1.default.memo(function VirtuosoRoot(props) {
+    var useWindowScroll = exports.useEmitterValue('useWindowScroll');
+    var showTopList = exports.useEmitterValue('topItemsIndexes').length > 0;
+    var customScrollParent = exports.useEmitterValue('customScrollParent');
+    var TheScroller = customScrollParent || useWindowScroll ? WindowScroller : Scroller;
+    var TheViewport = customScrollParent || useWindowScroll ? WindowViewport : Viewport;
+    return (react_1.default.createElement(TheScroller, tslib_1.__assign({}, props),
+        showTopList && (react_1.default.createElement(TopItemListContainer, null,
+            react_1.default.createElement(Items, { showTopList: true }))),
+        react_1.default.createElement(TheViewport, null,
+            react_1.default.createElement(Header, null),
+            react_1.default.createElement(Items, null),
+            react_1.default.createElement(Footer, null))));
+});
+exports.List = (_a = react_urx_1.systemToComponent(combinedSystem, {
+    required: {},
+    optional: {
+        restoreStateFrom: 'restoreStateFrom',
+        context: 'context',
+        followOutput: 'followOutput',
+        itemContent: 'itemContent',
+        groupContent: 'groupContent',
+        overscan: 'overscan',
+        increaseViewportBy: 'increaseViewportBy',
+        totalCount: 'totalCount',
+        groupCounts: 'groupCounts',
+        topItemCount: 'topItemCount',
+        firstItemIndex: 'firstItemIndex',
+        initialTopMostItemIndex: 'initialTopMostItemIndex',
+        components: 'components',
+        atBottomThreshold: 'atBottomThreshold',
+        atTopThreshold: 'atTopThreshold',
+        computeItemKey: 'computeItemKey',
+        defaultItemHeight: 'defaultItemHeight',
+        fixedItemHeight: 'fixedItemHeight',
+        itemSize: 'itemSize',
+        scrollSeekConfiguration: 'scrollSeekConfiguration',
+        headerFooterTag: 'headerFooterTag',
+        data: 'data',
+        initialItemCount: 'initialItemCount',
+        initialScrollTop: 'initialScrollTop',
+        alignToBottom: 'alignToBottom',
+        useWindowScroll: 'useWindowScroll',
+        customScrollParent: 'customScrollParent',
+        scrollerRef: 'scrollerRef',
+        logLevel: 'logLevel',
+    },
+    methods: {
+        scrollToIndex: 'scrollToIndex',
+        scrollIntoView: 'scrollIntoView',
+        scrollTo: 'scrollTo',
+        scrollBy: 'scrollBy',
+        autoscrollToBottom: 'autoscrollToBottom',
+        getState: 'getState',
+    },
+    events: {
+        isScrolling: 'isScrolling',
+        endReached: 'endReached',
+        startReached: 'startReached',
+        rangeChanged: 'rangeChanged',
+        atBottomStateChange: 'atBottomStateChange',
+        atTopStateChange: 'atTopStateChange',
+        totalListHeightChanged: 'totalListHeightChanged',
+        itemsRendered: 'itemsRendered',
+        groupIndices: 'groupIndices',
+    },
+}, ListRoot), _a.Component), exports.usePublisher = _a.usePublisher, exports.useEmitterValue = _a.useEmitterValue, exports.useEmitter = _a.useEmitter;
+var Scroller = /*#__PURE__*/ buildScroller({ usePublisher: exports.usePublisher, useEmitterValue: exports.useEmitterValue, useEmitter: exports.useEmitter });
+var WindowScroller = /*#__PURE__*/ buildWindowScroller({ usePublisher: exports.usePublisher, useEmitterValue: exports.useEmitterValue, useEmitter: exports.useEmitter });
+exports.Virtuoso = exports.List;
+exports.GroupedVirtuoso = exports.List;