@maestro_io/maestro-web-sdk 3.3.1 → 4.0.0-beta.2

package/dist/src/modules/fantasy/components/ExpandedAthleteList/ExpandedAthletesList.js

@@ -0,0 +1,107 @@
+import React from 'react';
+import TopPlayerCard from '../TopPlayerCard';
+class ExpandedAthletesList extends React.Component {
+    constructor() {
+        super(...arguments);
+        Object.defineProperty(this, "refsArray", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "titleContainer", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "wrapperRef", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "state", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: {
+                maxHeight: '0',
+                isLastItem: false,
+            }
+        });
+        Object.defineProperty(this, "onBecameFocused", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (index) => () => {
+                this.updateMaxHeight(index);
+                // set timeout to account for max-height animation transition
+                if (this.wrapperRef) {
+                    const handleTransitionEnd = () => {
+                        this.scrollToElement(index);
+                        this.wrapperRef?.removeEventListener('transitionend', handleTransitionEnd);
+                    };
+                    this.wrapperRef.addEventListener('transitionend', handleTransitionEnd);
+                }
+            }
+        });
+    }
+    updateMaxHeight(focusedIndex) {
+        const items = this.refsArray.slice(focusedIndex);
+        const maxHeight = items.reduce((prev, curr) => {
+            if (!curr) {
+                return prev;
+            }
+            return prev + curr.clientHeight;
+        }, 0) + (this.titleContainer?.clientHeight || 0);
+        const newMaxHeight = `${maxHeight}px`;
+        if (newMaxHeight !== this.state.maxHeight) {
+            this.setState({ maxHeight: newMaxHeight });
+        }
+    }
+    scrollToElement(focusedIndex) {
+        const element = this.refsArray[focusedIndex];
+        if (!element) {
+            return;
+        }
+        if (this.wrapperRef) {
+            const wrapperRect = this.wrapperRef.getBoundingClientRect();
+            const elementRect = element.getBoundingClientRect();
+            let scrollTop = elementRect.top - wrapperRect.top + this.wrapperRef.scrollTop;
+            const isFocusingTopPlayers = focusedIndex >= this.props.items.length;
+            if (isFocusingTopPlayers) {
+                scrollTop = scrollTop - 52 - 10; // account for sticky header height
+            }
+            this.wrapperRef.scrollTo({
+                top: scrollTop,
+                behavior: 'smooth',
+            });
+            const isLastItem = focusedIndex === this.refsArray.length - 1;
+            if (isLastItem !== this.state.isLastItem) {
+                this.setState({
+                    isLastItem: isLastItem,
+                });
+            }
+        }
+    }
+    render() {
+        return (React.createElement("div", { className: this.props.className, style: {
+                maxHeight: this.state.maxHeight,
+            }, ref: (ref) => {
+                this.wrapperRef = ref;
+            }, "data-is-last-item": this.state.isLastItem },
+            this.props.items.map((item, i) => (React.createElement("div", { ref: (ref) => {
+                    this.refsArray[i] = ref;
+                }, key: this.props.getItemKey(item, i), className: "athlete-card-wrapper" }, this.props.renderItem(item, i, this.props.onArrowPress(i), this.props.onBackPress, this.onBecameFocused(i))))),
+            this.props.topPlayers.length > 0 && (React.createElement("div", { className: "top-players-section" },
+                React.createElement("div", { className: "sticky-header T05_ALT", ref: (ref) => {
+                        this.titleContainer = ref;
+                    } }, "Top In-Game Players"),
+                this.props.topPlayers.map((player, index) => (React.createElement("div", { ref: (ref) => {
+                        this.refsArray[this.props.items.length + index] = ref;
+                    }, key: 'top-players' + index, className: "athlete-card-wrapper" },
+                    React.createElement(TopPlayerCard, { index: index + 1, player: player, key: `${player.abbrevName}-${index}`, parentFocusKey: this.props.focusKey, focusKey: `${this.props.focusKey}-top-players-${index}`, onArrowPress: this.props.onArrowPress(index + this.props.items.length), onBackPress: this.props.onBackPress, onBecameFocused: this.onBecameFocused(index + this.props.items.length) }))))))));
+    }
+}
+export default ExpandedAthletesList;

package/dist/src/modules/fantasy/components/ExpandedAthleteList/index.js

@@ -0,0 +1 @@
+export { default } from './ExpandedAthletesList';

package/dist/src/modules/fantasy/components/LeagueCard/LeagueCard.js

@@ -0,0 +1,20 @@
+import Image from '@/components/atoms/Image';
+import { withFocusable, } from '@/external/spatial-navigation';
+import './LeagueCard.styles.css';
+import React from 'react';
+import Icon from '@/components/atoms/SvgIcon';
+class LeagueCard extends React.Component {
+    render() {
+        return (React.createElement("section", { className: "league-card focus-ring T02", "data-focused": this.props.focused, style: {
+                '--league-color': `${this.props.leagueColor}`,
+            } },
+            React.createElement("header", { className: "T10 FONT_BOLD" },
+                React.createElement(Image, { src: this.props.leagueLogo, alt: "League Logo", width: 64, height: 64 }),
+                React.createElement("span", null, this.props.renderTitle()),
+                this.props.shouldExpand && (React.createElement("div", { className: "icon-container", "data-focused": this.props.focused },
+                    React.createElement(Icon, { iconName: this.props.expanded ? 'collapse' : 'expand', width: 48, height: 48 })))),
+            React.createElement("div", { className: "divider" }),
+            React.createElement("div", { className: "content" }, this.props.children)));
+    }
+}
+export default withFocusable()(LeagueCard);

package/dist/src/modules/fantasy/components/LeagueCard/index.js

@@ -0,0 +1,2 @@
+import LeagueCard from './LeagueCard';
+export default LeagueCard;

package/dist/src/modules/fantasy/components/TopPlayerCard/TopPlayerCard.js

@@ -0,0 +1,29 @@
+import { withFocusable, } from '@/external/spatial-navigation';
+import React from 'react';
+import './TopPlayerCard.styles.css';
+import HeadshotImage from '@/components/molecules/HeadshotImage';
+const TopPlayerCard = (props) => {
+    return (React.createElement("div", { className: "top-player-card focus-ring T02", "data-focused": props.focused },
+        React.createElement("div", { className: "top-player-image-wrapper" },
+            React.createElement(HeadshotImage, { src: props.player.headshot, alt: `${props.player.abbrevName} Headshot` }),
+            React.createElement("div", { className: "top-player-index" },
+                ' ',
+                React.createElement("span", null, props.index))),
+        React.createElement("div", { className: "top-player-content" },
+            React.createElement("div", { className: "top-player-name T05_ALT" },
+                props.player.abbrevName,
+                ' ',
+                React.createElement("span", { className: "TEXT_200 T02" },
+                    props.player.position,
+                    " ",
+                    props.player.teamTriCode)),
+            React.createElement("div", { className: "top-player-points" },
+                React.createElement("span", { className: "T30 FONT_BOLD" }, props.player.points.toFixed(2)),
+                ' ',
+                React.createElement("span", { className: "T02 TEXT_200" }, "PTS")),
+            props.player.rosteredBy ? (React.createElement("div", { className: "top-player-roster-info T05_ALT" },
+                React.createElement("span", { className: "TEXT_200" }, "Rostered"),
+                " ",
+                props.player.rosteredBy)) : (React.createElement("div", { className: "top-player-roster-info not-rostered T05_ALT" }, "Not Rostered")))));
+};
+export default withFocusable()(TopPlayerCard);

package/dist/src/modules/fantasy/components/TopPlayerCard/index.js

@@ -0,0 +1,2 @@
+export { default } from './TopPlayerCard';
+export * from './TopPlayerCard';