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 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 | 2x 2x 2x 2x 2x 1x 1x 1x 1x 1x 2x 2x 2x 2x 2x 1x 1x 1x 1x 2x | import { ICustomShimmerItem } from './Component.types'; import { ItemColumns } from '../ManifestConstants'; import { IShimmerElement, ShimmerElementType } from '@fluentui/react'; export function getItemsFromDataset(dataset: ComponentFramework.PropertyTypes.DataSet): ICustomShimmerItem[] { Iif (dataset.error || dataset.paging.totalResultCount === undefined) { // Dataset is not defined so return dummy items return getDummyItems(0).concat(getDummyItems(1)); } const keyIndex: Record<string, number> = {}; return dataset.sortedRecordIds.map((id) => { const record = dataset.records[id]; // Prevent duplicate keys by appending the duplicate index let key = record.getValue(ItemColumns.Key) as string; Iif (keyIndex[key] !== undefined) { keyIndex[key]++; key += `_${keyIndex[key]}`; } else keyIndex[key] = 1; return { id: record.getRecordId(), key: key, type: record.getValue(ItemColumns.Type) as string, height: record.getValue(ItemColumns.Height) as number, width: record.getValue(ItemColumns.Width) as string, verticalAlign: record.getValue(ItemColumns.VerticalAlign) as string, data: record, } as ICustomShimmerItem; }); } export function getShimmerElements(items: ICustomShimmerItem[]): IShimmerElement[] { return items.map((item: ICustomShimmerItem) => ({ type: getShimmerElementType(item.type), ...(typeof item.width !== 'undefined' && item.width !== null && { width: item.width + '%' }), ...(typeof item.height !== 'undefined' && item.height !== null && { height: item.height }), ...(typeof item.verticalAlign !== 'undefined' && item.verticalAlign !== null && { width: item.verticalAlign }), })) as IShimmerElement[]; } export function getShimmerElementType(shimmerElementType: string): ShimmerElementType { let currentElementType: ShimmerElementType = ShimmerElementType.line; switch (shimmerElementType.toLowerCase()) { case 'circle': currentElementType = ShimmerElementType.circle; break; case 'gap': currentElementType = ShimmerElementType.gap; break; default: currentElementType; } return currentElementType; } function getDummyItems(index: number): ICustomShimmerItem[] { return [ { id: 1, key: 1, width: index === 0 ? '3.8' : '1.8', height: index === 0 ? 60 : 20, rowkey: '1', type: index === 0 ? 'circle' : 'line', }, { id: 2, key: 2, width: '2', height: 10, rowkey: '1', type: 'gap', }, { id: 3, key: 3, width: '20', height: 10, rowkey: '1', type: 'line', }, { id: 4, key: 4, width: '2', height: 10, rowkey: '1', type: 'gap', }, { id: 5, key: 5, width: '2.8', height: 30, rowkey: '1', type: 'line', }, { id: 6, key: 6, width: '2', height: 10, rowkey: '1', type: 'gap', }, { id: 7, key: 7, width: '20', height: 10, rowkey: '1', type: 'line', }, { id: 8, key: 8, width: '1', height: 10, rowkey: '1', type: 'gap', }, ] as unknown as ICustomShimmerItem[]; } |