@ringcentral/juno 2.40.0 → 2.41.0

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

@@ -0,0 +1,217 @@
+"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 useChangedChildSizes_1 = tslib_1.__importDefault(require("./hooks/useChangedChildSizes"));
+var listSystem_1 = require("./listSystem");
+var Virtuoso_1 = require("./Virtuoso");
+var useSize_1 = tslib_1.__importDefault(require("./hooks/useSize"));
+var correctItemSize_1 = require("./utils/correctItemSize");
+var useWindowViewportRect_1 = tslib_1.__importDefault(require("./hooks/useWindowViewportRect"));
+var context_1 = require("./utils/context");
+var tableComponentPropsSystem = /*#__PURE__*/ u.system(function () {
+    var itemContent = u.statefulStream(function (index) { return react_1.default.createElement("td", null,
+        "Item $",
+        index); });
+    var context = u.statefulStream(null);
+    var fixedHeaderContent = u.statefulStream(null);
+    var fixedFooterContent = u.statefulStream(null);
+    var components = u.statefulStream({});
+    var computeItemKey = u.statefulStream(Virtuoso_1.identity);
+    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,
+        fixedHeaderContent: fixedHeaderContent,
+        fixedFooterContent: fixedFooterContent,
+        components: components,
+        computeItemKey: computeItemKey,
+        scrollerRef: scrollerRef,
+        TableComponent: distinctProp('Table', 'table'),
+        TableHeadComponent: distinctProp('TableHead', 'thead'),
+        TableFooterComponent: distinctProp('TableFoot', 'tfoot'),
+        TableBodyComponent: distinctProp('TableBody', 'tbody'),
+        TableRowComponent: distinctProp('TableRow', 'tr'),
+        ScrollerComponent: distinctProp('Scroller', 'div'),
+        EmptyPlaceholder: distinctProp('EmptyPlaceholder'),
+        ScrollSeekPlaceholder: distinctProp('ScrollSeekPlaceholder'),
+        FillerRow: distinctProp('FillerRow'),
+    };
+});
+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, tableComponentPropsSystem));
+var DefaultScrollSeekPlaceholder = function (_a) {
+    var height = _a.height;
+    return (react_1.default.createElement("tr", null,
+        react_1.default.createElement("td", { style: { height: height } })));
+};
+var DefaultFillerRow = function (_a) {
+    var height = _a.height;
+    return (react_1.default.createElement("tr", null,
+        react_1.default.createElement("td", { style: { height: height, padding: 0, border: 0 } })));
+};
+var ITEM_STYLE = { overflowAnchor: 'none' };
+var Items = /*#__PURE__*/ react_1.default.memo(function VirtuosoItems() {
+    var listState = useEmitterValue('listState');
+    var sizeRanges = usePublisher('sizeRanges');
+    var useWindowScroll = useEmitterValue('useWindowScroll');
+    var customScrollParent = useEmitterValue('customScrollParent');
+    var windowScrollContainerStateCallback = usePublisher('windowScrollContainerState');
+    var _scrollContainerStateCallback = usePublisher('scrollContainerState');
+    var scrollContainerStateCallback = customScrollParent || useWindowScroll ? windowScrollContainerStateCallback : _scrollContainerStateCallback;
+    var itemContent = useEmitterValue('itemContent');
+    var trackItemSizes = useEmitterValue('trackItemSizes');
+    var itemSize = useEmitterValue('itemSize');
+    var log = useEmitterValue('log');
+    var _a = useChangedChildSizes_1.default(sizeRanges, itemSize, trackItemSizes, scrollContainerStateCallback, log, undefined, customScrollParent), callbackRef = _a.callbackRef, ref = _a.ref;
+    var _b = tslib_1.__read(react_1.default.useState(0), 2), deviation = _b[0], setDeviation = _b[1];
+    useEmitter('deviation', function (value) {
+        if (deviation !== value) {
+            ref.current.style.marginTop = value + "px";
+            setDeviation(value);
+        }
+    });
+    var EmptyPlaceholder = useEmitterValue('EmptyPlaceholder');
+    var ScrollSeekPlaceholder = useEmitterValue('ScrollSeekPlaceholder') || DefaultScrollSeekPlaceholder;
+    var FillerRow = useEmitterValue('FillerRow') || DefaultFillerRow;
+    var TableBodyComponent = useEmitterValue('TableBodyComponent');
+    var TableRowComponent = useEmitterValue('TableRowComponent');
+    var computeItemKey = useEmitterValue('computeItemKey');
+    var isSeeking = useEmitterValue('isSeeking');
+    var paddingTopAddition = useEmitterValue('paddingTopAddition');
+    var firstItemIndex = useEmitterValue('firstItemIndex');
+    var statefulTotalCount = useEmitterValue('statefulTotalCount');
+    var context = useEmitterValue('context');
+    if (statefulTotalCount === 0 && EmptyPlaceholder) {
+        return react_1.default.createElement(EmptyPlaceholder, Virtuoso_1.contextPropIfNotDomElement(EmptyPlaceholder, context));
+    }
+    var paddingTop = listState.offsetTop + paddingTopAddition + deviation;
+    var paddingBottom = listState.offsetBottom;
+    var paddingTopEl = paddingTop > 0 ? react_1.default.createElement(FillerRow, { height: paddingTop, key: "padding-top", context: context }) : null;
+    var paddingBottomEl = paddingBottom > 0 ? react_1.default.createElement(FillerRow, { height: paddingBottom, key: "padding-bottom", context: context }) : null;
+    var items = listState.items.map(function (item) {
+        var index = item.originalIndex;
+        var key = computeItemKey(index + firstItemIndex, item.data, context);
+        if (isSeeking) {
+            return react_1.default.createElement(ScrollSeekPlaceholder, tslib_1.__assign(tslib_1.__assign({}, Virtuoso_1.contextPropIfNotDomElement(ScrollSeekPlaceholder, context)), { key: key, index: item.index, height: item.size, type: item.type || 'item' }));
+        }
+        return react_1.default.createElement(TableRowComponent, tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, Virtuoso_1.contextPropIfNotDomElement(TableRowComponent, context)), Virtuoso_1.itemPropIfNotDomElement(TableRowComponent, item.data)), { key: key, 'data-index': index, 'data-known-size': item.size, 'data-item-index': item.index, style: ITEM_STYLE }), itemContent(item.index, item.data, context));
+    });
+    return react_1.default.createElement(TableBodyComponent, tslib_1.__assign({ ref: callbackRef, 'data-test-id': 'virtuoso-item-list' }, Virtuoso_1.contextPropIfNotDomElement(TableBodyComponent, context)), tslib_1.__spread([paddingTopEl], items, [paddingBottomEl]));
+});
+var Viewport = function (_a) {
+    var children = _a.children;
+    var ctx = react_1.default.useContext(context_1.VirtuosoMockContext);
+    var viewportHeight = usePublisher('viewportHeight');
+    var fixedItemHeight = 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: Virtuoso_1.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 = usePublisher('windowViewportRect');
+    var fixedItemHeight = usePublisher('fixedItemHeight');
+    var customScrollParent = 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: Virtuoso_1.viewportStyle, "data-viewport-type": "window" }, children));
+};
+var TableRoot = react_1.default.memo(function TableVirtuosoRoot(props) {
+    var useWindowScroll = useEmitterValue('useWindowScroll');
+    var customScrollParent = useEmitterValue('customScrollParent');
+    var fixedHeaderHeight = usePublisher('fixedHeaderHeight');
+    var fixedFooterHeight = usePublisher('fixedFooterHeight');
+    var fixedHeaderContent = useEmitterValue('fixedHeaderContent');
+    var fixedFooterContent = useEmitterValue('fixedFooterContent');
+    var context = useEmitterValue('context');
+    var theadRef = useSize_1.default(u.compose(fixedHeaderHeight, function (el) { return correctItemSize_1.correctItemSize(el, 'height'); }));
+    var tfootRef = useSize_1.default(u.compose(fixedFooterHeight, function (el) { return correctItemSize_1.correctItemSize(el, 'height'); }));
+    var TheScroller = customScrollParent || useWindowScroll ? WindowScroller : Scroller;
+    var TheViewport = customScrollParent || useWindowScroll ? WindowViewport : Viewport;
+    var TheTable = useEmitterValue('TableComponent');
+    var TheTHead = useEmitterValue('TableHeadComponent');
+    var TheTFoot = useEmitterValue('TableFooterComponent');
+    var theHead = fixedHeaderContent
+        ? react_1.default.createElement(TheTHead, tslib_1.__assign({ key: 'TableHead', style: { zIndex: 2, position: 'sticky', top: 0 }, ref: theadRef }, Virtuoso_1.contextPropIfNotDomElement(TheTHead, context)), fixedHeaderContent())
+        : null;
+    var theFoot = fixedFooterContent
+        ? react_1.default.createElement(TheTFoot, tslib_1.__assign({ key: 'TableFoot', style: { zIndex: 1, position: 'sticky', bottom: 0 }, ref: tfootRef }, Virtuoso_1.contextPropIfNotDomElement(TheTFoot, context)), fixedFooterContent())
+        : null;
+    return (react_1.default.createElement(TheScroller, tslib_1.__assign({}, props),
+        react_1.default.createElement(TheViewport, null, react_1.default.createElement(TheTable, tslib_1.__assign({ style: { borderSpacing: 0, overflowAnchor: 'none' } }, Virtuoso_1.contextPropIfNotDomElement(TheTable, context)), [theHead, react_1.default.createElement(Items, { key: "TableBody" }), theFoot]))));
+});
+var _a = react_urx_1.systemToComponent(combinedSystem, {
+    required: {},
+    optional: {
+        restoreStateFrom: 'restoreStateFrom',
+        context: 'context',
+        followOutput: 'followOutput',
+        firstItemIndex: 'firstItemIndex',
+        itemContent: 'itemContent',
+        fixedHeaderContent: 'fixedHeaderContent',
+        fixedFooterContent: 'fixedFooterContent',
+        overscan: 'overscan',
+        increaseViewportBy: 'increaseViewportBy',
+        totalCount: 'totalCount',
+        topItemCount: 'topItemCount',
+        initialTopMostItemIndex: 'initialTopMostItemIndex',
+        components: 'components',
+        groupCounts: 'groupCounts',
+        atBottomThreshold: 'atBottomThreshold',
+        atTopThreshold: 'atTopThreshold',
+        computeItemKey: 'computeItemKey',
+        defaultItemHeight: 'defaultItemHeight',
+        fixedItemHeight: 'fixedItemHeight',
+        itemSize: 'itemSize',
+        scrollSeekConfiguration: 'scrollSeekConfiguration',
+        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',
+        getState: 'getState',
+    },
+    events: {
+        isScrolling: 'isScrolling',
+        endReached: 'endReached',
+        startReached: 'startReached',
+        rangeChanged: 'rangeChanged',
+        atBottomStateChange: 'atBottomStateChange',
+        atTopStateChange: 'atTopStateChange',
+        totalListHeightChanged: 'totalListHeightChanged',
+        itemsRendered: 'itemsRendered',
+        groupIndices: 'groupIndices',
+    },
+}, TableRoot), Table = _a.Component, usePublisher = _a.usePublisher, useEmitterValue = _a.useEmitterValue, useEmitter = _a.useEmitter;
+var Scroller = /*#__PURE__*/ Virtuoso_1.buildScroller({ usePublisher: usePublisher, useEmitterValue: useEmitterValue, useEmitter: useEmitter });
+var WindowScroller = /*#__PURE__*/ Virtuoso_1.buildWindowScroller({ usePublisher: usePublisher, useEmitterValue: useEmitterValue, useEmitter: useEmitter });
+exports.TableVirtuoso = Table;