@ringcentral/juno 2.4.2 → 2.5.0-beta.0

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

@@ -0,0 +1,184 @@
+"use strict";
+var _a;
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var React = tslib_1.__importStar(require("react"));
+var react_1 = require("react");
+var react_urx_1 = require("@virtuoso.dev/react-urx");
+var urx_1 = require("@virtuoso.dev/urx");
+var useChangedChildSizes_1 = tslib_1.__importDefault(require("./hooks/useChangedChildSizes"));
+var useSize_1 = tslib_1.__importDefault(require("./hooks/useSize"));
+var useWindowViewportRect_1 = tslib_1.__importDefault(require("./hooks/useWindowViewportRect"));
+var List_1 = require("./List");
+var listSystem_1 = require("./listSystem");
+var correctItemSize_1 = require("./utils/correctItemSize");
+var tableComponentPropsSystem = urx_1.system(function () {
+    var itemContent = urx_1.statefulStream(function (index) { return React.createElement("td", null,
+        "Item $",
+        index); });
+    var context = urx_1.statefulStream(null);
+    var fixedHeaderContent = urx_1.statefulStream(null);
+    var components = urx_1.statefulStream({});
+    var computeItemKey = urx_1.statefulStream(List_1.identity);
+    var scrollerRef = urx_1.statefulStream(urx_1.noop);
+    var distinctProp = function (propName, defaultValue) {
+        if (defaultValue === void 0) { defaultValue = null; }
+        return urx_1.statefulStreamFromEmitter(urx_1.pipe(components, urx_1.map(function (components) { return components[propName]; }), urx_1.distinctUntilChanged()), defaultValue);
+    };
+    return {
+        context: context,
+        itemContent: itemContent,
+        fixedHeaderContent: fixedHeaderContent,
+        components: components,
+        computeItemKey: computeItemKey,
+        scrollerRef: scrollerRef,
+        TableComponent: distinctProp('Table', 'table'),
+        TableHeadComponent: distinctProp('TableHead', 'thead'),
+        TableBodyComponent: distinctProp('TableBody', 'tbody'),
+        TableRowComponent: distinctProp('TableRow', 'tr'),
+        ScrollerComponent: distinctProp('Scroller', 'div'),
+        EmptyPlaceholder: distinctProp('EmptyPlaceholder'),
+        ScrollSeekPlaceholder: distinctProp('ScrollSeekPlaceholder'),
+    };
+});
+var combinedSystem = urx_1.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);
+}, urx_1.tup(listSystem_1.listSystem, tableComponentPropsSystem));
+var DefaultScrollSeekPlaceholder = function (_a) {
+    var height = _a.height;
+    return (React.createElement("tr", null,
+        React.createElement("td", { style: { height: height } })));
+};
+var FillerRow = function (_a) {
+    var height = _a.height;
+    return (React.createElement("tr", null,
+        React.createElement("td", { style: { height: height, padding: 0, border: 0 } })));
+};
+exports.Items = React.memo(function VirtuosoItems() {
+    var listState = exports.useEmitterValue('listState');
+    var deviation = exports.useEmitterValue('deviation');
+    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 trackItemSizes = exports.useEmitterValue('trackItemSizes');
+    var itemSize = exports.useEmitterValue('itemSize');
+    var log = exports.useEmitterValue('log');
+    var ref = useChangedChildSizes_1.default(sizeRanges, itemSize, trackItemSizes, scrollContainerStateCallback, log, customScrollParent);
+    var EmptyPlaceholder = exports.useEmitterValue('EmptyPlaceholder');
+    var ScrollSeekPlaceholder = exports.useEmitterValue('ScrollSeekPlaceholder') || DefaultScrollSeekPlaceholder;
+    var TableBodyComponent = exports.useEmitterValue('TableBodyComponent');
+    var TableRowComponent = exports.useEmitterValue('TableRowComponent');
+    var computeItemKey = exports.useEmitterValue('computeItemKey');
+    var isSeeking = exports.useEmitterValue('isSeeking');
+    var paddingTopAddition = exports.useEmitterValue('paddingTopAddition');
+    var firstItemIndex = exports.useEmitterValue('firstItemIndex');
+    var statefulTotalCount = exports.useEmitterValue('statefulTotalCount');
+    var context = exports.useEmitterValue('context');
+    if (statefulTotalCount === 0 && EmptyPlaceholder) {
+        return react_1.createElement(EmptyPlaceholder, List_1.contextPropIfNotDomElement(EmptyPlaceholder, context));
+    }
+    var paddingTop = listState.offsetTop + paddingTopAddition + deviation;
+    var paddingBottom = listState.offsetBottom;
+    var paddingTopEl = paddingTop > 0 ? React.createElement(FillerRow, { height: paddingTop, key: "padding-top" }) : null;
+    var paddingBottomEl = paddingBottom > 0 ? (React.createElement(FillerRow, { height: paddingBottom, key: "padding-bottom" })) : 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.createElement(ScrollSeekPlaceholder, tslib_1.__assign(tslib_1.__assign({}, List_1.contextPropIfNotDomElement(ScrollSeekPlaceholder, context)), { key: key, index: item.index, height: item.size, type: item.type || 'item' }));
+        }
+        return react_1.createElement(TableRowComponent, tslib_1.__assign(tslib_1.__assign({}, List_1.contextPropIfNotDomElement(TableRowComponent, context)), { key: key, 'data-index': index, 'data-known-size': item.size, 'data-item-index': item.index, style: { overflowAnchor: 'none' } }), itemContent(item.index, item.data, context));
+    });
+    return react_1.createElement(TableBodyComponent, tslib_1.__assign({ ref: ref, 'data-test-id': 'virtuoso-item-list' }, List_1.contextPropIfNotDomElement(TableBodyComponent, context)), tslib_1.__spread([paddingTopEl], items, [paddingBottomEl]));
+});
+var Viewport = function (_a) {
+    var children = _a.children;
+    var viewportHeight = exports.usePublisher('viewportHeight');
+    var viewportRef = useSize_1.default(urx_1.compose(viewportHeight, function (el) { return correctItemSize_1.correctItemSize(el, 'height'); }));
+    return (React.createElement("div", { style: List_1.viewportStyle, ref: viewportRef, "data-viewport-type": "element" }, children));
+};
+var WindowViewport = function (_a) {
+    var children = _a.children;
+    var windowViewportRect = exports.usePublisher('windowViewportRect');
+    var customScrollParent = exports.useEmitterValue('customScrollParent');
+    var viewportRef = useWindowViewportRect_1.default(windowViewportRect, customScrollParent);
+    return (React.createElement("div", { ref: viewportRef, style: List_1.viewportStyle, "data-viewport-type": "window" }, children));
+};
+var TableRoot = React.memo(function TableVirtuosoRoot(props) {
+    var useWindowScroll = exports.useEmitterValue('useWindowScroll');
+    var customScrollParent = exports.useEmitterValue('customScrollParent');
+    var fixedHeaderHeight = exports.usePublisher('fixedHeaderHeight');
+    var fixedHeaderContent = exports.useEmitterValue('fixedHeaderContent');
+    var context = exports.useEmitterValue('context');
+    var theadRef = useSize_1.default(urx_1.compose(fixedHeaderHeight, function (el) { return correctItemSize_1.correctItemSize(el, 'height'); }));
+    var TheScroller = customScrollParent || useWindowScroll ? WindowScroller : Scroller;
+    var TheViewport = customScrollParent || useWindowScroll ? WindowViewport : Viewport;
+    var TheTable = exports.useEmitterValue('TableComponent');
+    var TheTHead = exports.useEmitterValue('TableHeadComponent');
+    var theHead = fixedHeaderContent
+        ? React.createElement(TheTHead, tslib_1.__assign({ key: 'TableHead', style: { zIndex: 1, position: 'sticky', top: 0 }, ref: theadRef }, List_1.contextPropIfNotDomElement(TheTHead, context)), fixedHeaderContent())
+        : null;
+    return (React.createElement(TheScroller, tslib_1.__assign({}, props),
+        React.createElement(TheViewport, null, React.createElement(TheTable, tslib_1.__assign({ style: { borderSpacing: 0 } }, List_1.contextPropIfNotDomElement(TheTable, context)), [theHead, React.createElement(exports.Items, { key: "TableBody" })]))));
+});
+exports.Table = (_a = react_urx_1.systemToComponent(combinedSystem, {
+    required: {},
+    optional: {
+        context: 'context',
+        followOutput: 'followOutput',
+        firstItemIndex: 'firstItemIndex',
+        itemContent: 'itemContent',
+        fixedHeaderContent: 'fixedHeaderContent',
+        overscan: 'overscan',
+        increaseViewportBy: 'increaseViewportBy',
+        totalCount: 'totalCount',
+        topItemCount: 'topItemCount',
+        initialTopMostItemIndex: 'initialTopMostItemIndex',
+        components: 'components',
+        groupCounts: 'groupCounts',
+        atBottomThreshold: 'atBottomThreshold',
+        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',
+    },
+    events: {
+        isScrolling: 'isScrolling',
+        endReached: 'endReached',
+        startReached: 'startReached',
+        rangeChanged: 'rangeChanged',
+        atBottomStateChange: 'atBottomStateChange',
+        atTopStateChange: 'atTopStateChange',
+        totalListHeightChanged: 'totalListHeightChanged',
+        itemsRendered: 'itemsRendered',
+        groupIndices: 'groupIndices',
+    },
+}, TableRoot), _a.Component), exports.usePublisher = _a.usePublisher, exports.useEmitterValue = _a.useEmitterValue, exports.useEmitter = _a.useEmitter;
+var Scroller = List_1.buildScroller({ usePublisher: exports.usePublisher, useEmitterValue: exports.useEmitterValue, useEmitter: exports.useEmitter });
+var WindowScroller = List_1.buildWindowScroller({
+    usePublisher: exports.usePublisher,
+    useEmitterValue: exports.useEmitterValue,
+    useEmitter: exports.useEmitter,
+});