How to use the pro-layouts.Layouter function in pro-layouts
To help you get started, we’ve selected a few pro-layouts examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
wix / pro-gallery / packages / gallery / __testsDrivers__ / drivers / reactDriver.js View on Github 
scroll: this.scroll,
container: this.container,
styleParams: this.styleParams,
actions: this.actions,
itemsLoveData: {},
};
}
const layoutParams = {
items: galleryViewProps.items,
container: galleryViewProps.container,
styleParams: galleryViewProps.styleParams,
};
const galleryStructure = ItemsHelper.convertToGalleryItems(
new Layouter(layoutParams),
);
return {
totalItemsCount: galleryViewProps.totalItemsCount || 100,
renderedItemsCount: galleryViewProps.renderedItemsCount || 20,
items: galleryViewProps.items,
galleryStructure,
scroll: galleryViewProps.scroll,
container: galleryViewProps.container,
styleParams: galleryViewProps.styleParams,
actions: galleryViewProps.actions,
itemsLoveData: galleryViewProps.itemsLoveData,
convertToGalleryItems: ItemsHelper.convertToGalleryItems,
convertDtoToLayoutItem: ItemsHelper.convertDtoToLayoutItem,
};
},if (
Math.abs(windowHeight - window.innerHeight) < 100 &&
Math.abs(windowWidth - window.innerWidth) < 100
) {
console.log('Not re-rendering, change is too small');
return;
}
const layoutParams = {
items,
styleParams,
container: calcContainer()
};
layout = new Layouter(layoutParams);
createDom();
}items: this.items,
container: _container,
styleParams: _styles,
gotScrollEvent: true,
options: {
showAllItems: true,
skipVisibilitiesCalc: true,
useLayoutStore: false,
},
};
if (this.layouter && isNew.addedItems) {
layoutParams.options.useExistingLayout = true;
} else {
layoutParams.options.createLayoutOnInit = false;
this.layouter = new Layouter(layoutParams);
}
this.layout = this.layouter.createLayout(layoutParams);
const itemConfig = {
watermark: watermarkData,
sharpParams: _styles.sharpParams,
lastVisibleItemIdx: this.lastVisibleItemIdx,
resizeMediaUrl: this.props.resizeMediaUrl,
};
const existingLayout = this.galleryStructure || this.layout;
if (isNew.addedItems) {
this.galleryStructure = ItemsHelper.convertExistingStructureToGalleryItems(
existingLayout,
this.layout,
itemConfig,
);//update this.items
this.items = items.map(item => ItemsHelper.convertDtoToLayoutItem(item));
const layoutParams = {
items: this.items,
container,
styleParams: styles,
gotScrollEvent: true,
options: {
showAllItems: true,
skipVisibilitiesCalc: true,
useLayoutStore: false,
createLayoutOnInit: false,
},
};
this.layouter = new Layouter(layoutParams);
this.layout = this.layouter.createLayout(layoutParams);
this.galleryStructure = ItemsHelper.convertToGalleryItems(this.layout, {
thumbnailSize: styles.thumbnailSize,
sharpParams: styles.sharpParams,
resizeMediaUrl: this.props.resizeMediaUrl,
});
this.videoScrollHelper.updateGalleryStructure({
galleryStructure: this.galleryStructure,
scrollBase: container.scrollBase,
videoPlay: styles.videoPlay,
oneRow: styles.oneRow,
});
const allowPreloading = isEditMode() || gotFirstScrollEvent;
this.scrollCss = this.getScrollCssIfNeeded({
galleryDomId: this.props.domId,
items: this.galleryStructure.galleryItems,items: this.items,
container: _container,
styleParams: _styles,
gotScrollEvent: true,
options: {
showAllItems: true,
skipVisibilitiesCalc: true,
useLayoutStore: false,
},
};
if (this.layouter && isNew.addedItems) {
layoutParams.options.useExistingLayout = true;
} else {
layoutParams.options.createLayoutOnInit = false;
this.layouter = new Layouter(layoutParams);
}
this.layout = this.layouter.createLayout(layoutParams);
const itemConfig = {
watermark: watermarkData,
sharpParams: _styles.sharpParams,
thumbnailSize: styles.thumbnailSize,
resizeMediaUrl: this.props.resizeMediaUrl,
lastVisibleItemIdx: this.lastVisibleItemIdx,
};
const existingLayout = this.galleryStructure || this.layout;
if (isNew.addedItems) {
this.galleryStructure = ItemsHelper.convertExistingStructureToGalleryItems(
existingLayout,
this.layout,
itemConfig,//update this.items
this.items = items.map(item => ItemsHelper.convertDtoToLayoutItem(item));
const layoutParams = {
items: this.items,
container,
styleParams: styles,
gotScrollEvent: true,
options: {
showAllItems: true,
skipVisibilitiesCalc: true,
useLayoutStore: false,
createLayoutOnInit: false,
},
};
this.layouter = new Layouter(layoutParams);
this.layout = this.layouter.createLayout(layoutParams);
this.galleryStructure = ItemsHelper.convertToGalleryItems(this.layout, {
sharpParams: styles.sharpParams,
resizeMediaUrl: this.props.resizeMediaUrl,
});
this.videoScrollHelper.updateGalleryStructure({
galleryStructure: this.galleryStructure,
scrollBase: container.scrollBase,
videoPlay: styles.videoPlay,
oneRow: styles.oneRow,
});
const allowPreloading = isEditMode() || gotFirstScrollEvent;
this.scrollCss = this.getScrollCssIfNeeded({
galleryDomId: this.props.domId,
items: this.galleryStructure.galleryItems,
styleParams: styles,
