All files / Shimmer index.ts

95.65% Statements 22/23
73.91% Branches 17/23
60% Functions 3/5
95.45% Lines 21/22

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70  1x 1x   1x       1x                       1x 1x 1x 1x               1x 1x 1x 1x 1x 1x       1x 1x 1x               1x             1x               1x     1x  
import { IInputs, IOutputs } from './generated/ManifestTypes';
import { CanvasShimmer } from './components/CanvasShimmer';
import * as React from 'react';
import { ICustomShimmerItem, IShimmerProps } from './components/Component.types';
import { getItemsFromDataset, getShimmerElements } from './components/DatasetMapping';
import { ManifestPropertyNames } from './ManifestConstants';
import { IShimmerElement } from '@fluentui/react';
 
export class Shimmer implements ComponentFramework.ReactControl<IInputs, IOutputs> {
    theComponent: ComponentFramework.ReactControl<IInputs, IOutputs>;
    notifyOutputChanged: () => void;
    context: ComponentFramework.Context<IInputs>;
    items: ICustomShimmerItem[];
    shimmerElements: IShimmerElement[];
    /**
     * Used to initialize the control instance. Controls can kick off remote server calls and other initialization actions here.
     * Data-set values are not initialized here, use updateView.
     * @param context The entire property bag available to control via Context Object; It contains values as set up by the customizer mapped to property names defined in the manifest, as well as utility functions.
     * @param notifyOutputChanged A callback method to alert the framework that the control has new outputs ready to be retrieved asynchronously.
     */
    public init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void): void {
        this.notifyOutputChanged = notifyOutputChanged;
        this.context = context;
        this.context.mode.trackContainerResize(true);
    }
 
    /**
     * Called when any value in the property bag has changed. This includes field values, data-sets, global values such as container height and width, offline status, control metadata values such as label, visible, etc.
     * @param context The entire property bag available to control via Context Object; It contains values as set up by the customizer mapped to names defined in the manifest, as well as utility functions
     * @returns ReactElement root react element for the control
     */
    public updateView(context: ComponentFramework.Context<IInputs>): React.ReactElement {
        const dataset = context.parameters.items;
        const datasetChanged = context.updatedProperties.indexOf(ManifestPropertyNames.dataset) > -1 || !this.items;
        if (datasetChanged) {
            this.items = getItemsFromDataset(dataset);
            this.shimmerElements = getShimmerElements(this.items);
        }
 
        // The test harness provides width/height as strings so use parseInt
        const allocatedWidth = parseInt(context.mode.allocatedWidth as unknown as string);
        const allocatedHeight = parseInt(context.mode.allocatedHeight as unknown as string);
        const props: IShimmerProps = {
            width: allocatedWidth,
            height: allocatedHeight,
            shimmerElements: this.shimmerElements,
            themeJSON: context.parameters?.Theme.raw ?? '',
            spacebetweenShimmer: context.parameters?.SpacebetweenShimmer.raw ?? '10px',
            rowCount: context.parameters.RowCount.raw ?? 0,
        };
        return React.createElement(CanvasShimmer, props);
    }
 
    /**
     * It is called by the framework prior to a control receiving new data.
     * @returns an object based on nomenclature defined in manifest, expecting object[s] for property marked as “bound” or “output”
     */
    public getOutputs(): IOutputs {
        return {};
    }
 
    /**
     * Called when the control is to be removed from the DOM tree. Controls should use this call for cleanup.
     * i.e. cancelling any pending remote calls, removing listeners, etc.
     */
    public destroy(): void {
        // Add code to cleanup control if necessary
    }
}