diff --git a/web/src/constants.js b/web/src/constants.js index de75b5da9c8620c0305caf0433f35b5e5d9058e2..7d3d43676c33f660b11b99212ab7187a92354dba 100644 --- a/web/src/constants.js +++ b/web/src/constants.js @@ -2,3 +2,5 @@ export const DEFAULT_PER_ROW = 4; export const MIN_PER_ROW = 2; export const MAX_PER_ROW = 10; export const FREQUENTLY_USED_ROWS = 3; + +export const FREQUENTLY_USED_PACKID = 'frequently-used' diff --git a/web/src/index.js b/web/src/index.js index 573b6cd8a0e8ea6aeafcec0d2c3c5000bde2821d..ffa3f3d540b405639fd20c2fd39b70fcaac9d114 100644 --- a/web/src/index.js +++ b/web/src/index.js @@ -61,7 +61,7 @@ const defaultSearchState = { } const makeFrequentlyUsedState = ({ stickerIDs, stickers } = {}) => ({ - id: "frequently-used", + id: constants.FREQUENTLY_USED_PACKID, title: "Frequently used", stickerIDs: stickerIDs ?? [], stickers: stickers ?? [], @@ -337,6 +337,12 @@ class App extends Component { this.navRef.scrollLeft += evt.deltaY } + maxToDisplayForPack(pack) { + return pack.id === constants.FREQUENTLY_USED_PACKID ? + constants.FREQUENTLY_USED_ROWS * this.state.stickersPerRow : + undefined + } + render() { this.applyThemeToBody(this.state.theme) @@ -394,6 +400,7 @@ class App extends Component { pack=${pack} send=${this.sendSticker} hideGifIndicator=${this.state.userSettings.hideGifIndicator} + maxToDisplayForPack=${this.maxToDisplayForPack(pack)} />`)} <${Settings} app=${this}/> </div> @@ -463,11 +470,11 @@ const NavBarItem = ({pack, iconOverride = null, onClickOverride = null, extraCla </a> ` -const Pack = ({ pack, send, hideGifIndicator }) => html` +const Pack = ({ pack, send, hideGifIndicator, maxToDisplay }) => html` <section class="stickerpack" id="pack-${pack.id}" data-pack-id=${pack.id}> <h1>${pack.title}</h1> <div class="sticker-list"> - ${pack.stickers.map(sticker => html` + ${pack.stickers.slice(0, maxToDisplay).map(sticker => html` <${Sticker} key=${sticker.id} sticker=${sticker} send=${send} hideGifIndicator=${hideGifIndicator} /> `)} </div>