pro-gallery-blueprints
TypeScript icon, indicating that this package has built-in type declarations

5.0.90 • Public • Published

pro-gallery-lib

The pro-gallery-lib containys helpers and files that can be imported individually.

Blueprints - v.3+

The pro-gallery-lib exports Blueprints and BlueprintsManager

BlueprintsManager

The BlueprintsManager is a class that takes care of fetching needed params and creating a new blueprint when it might be needed.

The blueprintsManager works with an api provided by the user (see blow)

Function Name description arguments return
async createBlueprint Used when changes were made that might require a new blueprint, params can be empty - the manager will fetch by the provided api params: {options, items, container, totalItemsCount} {blueprint: object, blueprintChange: boolean}
init call to provide the deviceType and api config: {api, deviceType, totalItemsCount} --
getMoreItems Call this when the gallery needs more items currentItemsLength: number --

BlueprintsManager API

To use the blueprints Manager to the full extent you need to provide it with an api to be able to manage fetching needed data and updating on ready blueprints.

An example can be found in the Playground code

Function Name description arguments expected return
fetchMoreItems Will be called when the BM requires more items (under the totalItemsCount) currentItemLength: number --
fetchItems Will be called by the BM to get the current items -- items
fetchOptions Will be called by the BM to get the current options -- options
fetchContainer Will be called by the BM to get the current container -- container
getTotalItemsCount Will be called by the BM to get the totalItemsCount -- totalItemsCount: number
onBlueprintReady Will be called by the BM when a requested blueprint is ready {blueprint: object, blueprintChanged: boolean} --
isUsingCustomInfoElements Will be called by the BM to know if Custom Info Elements are used -- boolean

basic usage

import { BlueprintsManager, GALLERY_CONSTS } from 'pro-gallery-lib'

const blueprintsManager = new BlueprintsManager({
      id: `gallery1`,
    });
    const blueprintsApi = {
        fetchMoreItems(currentItemLength) {
            // fire your get more items method here; no return expected;
        }
        fetchItems() {
            //return the current items array;
        }
        fetchOptions() {
            //return the current options object;
        }
        fetchContainer() {
            //return the current container object;
        }
        getTotalItemsCount() {
            //return the current totalItemsCount;
        }
        onBlueprintReady({ blueprint, blueprintChanged }) {
            // set the new blueprint as the new state, blueprintChanged can be used to do this only if there was an actual change in the blueprint object.
        }

        isUsingCustomInfoElements() {
            // return true/false to reflect the usage of Custom info elements. used to process the options accordingly.
        }
    }
blueprintsManager.init({
    api: blueprintsApi,
    deviceType: GALLERY_CONSTS.deviceType.DESKTOP,
    // totalItemsCont, This is optional and can be passed in the params in createBlueprint(params) or via the api;
});
const triggerBlueprintCreation = () => { //call this whenever something changes (options/ items/ container...anything). If this was called and nothing relevant changed the BM will call the onBlueprintReady api with a false blueprintChanged flag.
    blueprintsManager.createBlueprint({}); //since the api is used params can be empty, the BM will use the provided api to fetch all the needed params to create a blueprint.
}

Basic component code:

Here we use the ProGalleryRenderer instead of the ProGallery.

Instead of the normal options, items, container props we will destruct the blueprint we got from the blueprintsManager into the props.

import { ProGalleryRenderer } from 'pro-gallery'
import 'pro-gallery/dist/statics/main.css';


<ProGalleryRenderer
    id={id}
    {...blueprint}
    scrollingElement = { () => document.getElementById('gallery') || window }
    eventsListener = {(eventName, eventData) => console.log({eventName, eventData})}
    createMediaUrl =  {({item, originalUrl, resizeMethod, requiredWidth, requiredHeight}) => `https://...`}
    isPrerenderMode = {isPrerenderMode}
/>

Readme

Keywords

none

Package Sidebar

Install

npm i pro-gallery-blueprints

Weekly Downloads

2,692

Version

5.0.90

License

none

Unpacked Size

317 kB

Total Files

23

Last publish

Collaborators

  • guysopher