How to use @uifabric/example-app-base - 10 common examples

private _handleRouteChange = (): void => {
    const { pagePath: prevPagePath, platform } = this.state;
    const { siteDefinition } = this.props;
    const { platforms } = siteDefinition;

    const newPagePath = removeAnchorLink(location.hash);
    if (prevPagePath === newPagePath) {
      // Must have been a change to the anchor only (not the route).
      // Don't do a full update, just jump to the anchor.
      this._jumpToAnchor(extractAnchorLink(location.hash));
      return;
    }

    const platformKeys = platforms && (Object.keys(platforms) as TPlatforms[]);
    if (platformKeys && platformKeys.length > 0) {
      // Test if the platform has changed on each hashchange to avoid costly forEach below.
      const currentPlatformRegex = new RegExp(`/${platform}\\b`);

      if (!currentPlatformRegex.test(newPagePath)) {
        for (const key of platformKeys) {
          // If the user navigates directly to a platform specific page, set the active platform to that of the new page.
          const isNewPlatform = new RegExp(`/${key}`, 'gi');
          if (isNewPlatform.test(newPagePath)) {
            this._onPlatformChanged(key);
            break;
          }

getTileLayout,
  renderTileWithLayout
} from '@uifabric/experiments';
import { lorem } from '@uifabric/example-app-base';
import * as TileExampleStylesModule from './Tile.Example.scss';

// tslint:disable-next-line:no-any
const TileExampleStyles = TileExampleStylesModule as any;

const ITEMS: { name: string; activity: string }[] = [
  {
    name: lorem(2),
    activity: lorem(6)
  },
  {
    name: lorem(2),
    activity: lorem(6)
  },
  {
    name: lorem(2),
    activity: lorem(6)
  },
  {
    name: lorem(2),
    activity: lorem(6)
  },
  {
    name: lorem(2),
    activity: lorem(6)
  }
];

renderTileWithLayout
} from '@uifabric/experiments';
import { lorem } from '@uifabric/example-app-base';
import * as TileExampleStylesModule from './Tile.Example.scss';

const ITEMS: { name: string; activity: string }[] = [
  {
    name: lorem(2),
    activity: lorem(6)
  },
  {
    name: lorem(2),
    activity: lorem(6)
  },
  {
    name: lorem(2),
    activity: lorem(6)
  },
  {
    name: lorem(2),
    activity: lorem(6)
  }
];

// tslint:disable-next-line:no-any
const TileExampleStyles = TileExampleStylesModule as any;

interface IImageTileProps {
  tileSize: ISize;
  originalImageSize: ISize;
  showBackground: boolean;
  item: typeof ITEMS[0];

} from '@uifabric/experiments';
import { lorem } from '@uifabric/example-app-base';
import * as TileExampleStylesModule from './Tile.Example.scss';

const ITEMS: { name: string; activity: string }[] = [
  {
    name: lorem(2),
    activity: lorem(6)
  },
  {
    name: lorem(2),
    activity: lorem(6)
  },
  {
    name: lorem(2),
    activity: lorem(6)
  },
  {
    name: lorem(2),
    activity: lorem(6)
  }
];

// tslint:disable-next-line:no-any
const TileExampleStyles = TileExampleStylesModule as any;

interface IImageTileProps {
  tileSize: ISize;
  originalImageSize: ISize;
  showBackground: boolean;
  item: typeof ITEMS[0];
}

private _onInternalLinkClick = (ev: React.MouseEvent<{}> | React.KeyboardEvent<{}>, url: string): void => {
    trackEvent(EventNames.ClickedInternalLink, {
      topic: url, // @TODO: Remove topic when data is stale.
      currentArea: getSiteArea(),
      nextArea: getSiteArea(undefined, url),
      nextPage: url,
      currentPage: window.location.hash
    });
  };

private _onInternalLinkClick = (ev: React.MouseEvent<{}> | React.KeyboardEvent<{}>, url: string): void => {
    trackEvent(EventNames.ClickedInternalLink, {
      topic: url, // @TODO: Remove topic when data is stale.
      currentArea: getSiteArea(),
      nextArea: getSiteArea(undefined, url),
      nextPage: url,
      currentPage: window.location.hash
    });
  };

// ignore
      }

      // Set active platform for each top level page to local storage platform or the first platform defined for that page.
      topLevelPages.forEach(item => {
        activePlatforms[item] = activePlatforms[item] || getPageFirstPlatform(item, siteDefinition);
      });
    }

    const navData = this._getNavData(activePlatforms);
    let platform = 'default' as TPlatforms;

    // If current page doesn't have pages for the active platform, switch to its first platform.
    if (Object.keys(navData.pagePlatforms).length > 0 && navData.activePages.length === 0) {
      const firstPlatform = getPageFirstPlatform(getSiteArea(siteDefinition.pages), siteDefinition);
      const currentPage = getSiteArea(siteDefinition.pages);
      platform = firstPlatform;
      activePlatforms = {
        ...activePlatforms,
        [currentPage]: firstPlatform
      };
    }

    this.state = {
      activePlatforms,
      platform,
      ...navData
    };
  }

private _onPlatformChanged = (platformKey: TPlatforms): void => {
    const { siteDefinition } = this.props;
    if (platformKey !== this.state.platform) {
      trackEvent(EventNames.ChangedPlatform, {
        topic: getSiteArea(siteDefinition.pages), // @TODO: Remove topic when data is stale.
        currentArea: getSiteArea(siteDefinition.pages),
        platform: platformKey, // @TODO: Remove platform when data is stale.
        currentPlatform: this.state.platform,
        nextPlatform: platformKey
      });

      const { activePlatforms } = this.state;
      const currentPage = getSiteArea(siteDefinition.pages);

      this.setState(
        {
          platform: platformKey,
          activePlatforms: {
            ...activePlatforms,
            [currentPage]: platformKey
          }
        },
        this._setActivePlatforms
      );
    }
  };

private _onLeftNavLinkClick = (ev: React.MouseEvent) => {
    const { platform } = this.state;
    const { siteDefinition } = this.props;
    const target = ev.currentTarget as HTMLAnchorElement;
    trackEvent(EventNames.ClickedLeftNavLink, {
      // Use the dom element's title or innerText as the topic.
      topic: target.title || target.innerText, // @TODO: Remove topic when data is stale.
      currentArea: getSiteArea(siteDefinition.pages),
      nextArea: getSiteArea(siteDefinition.pages, target.hash || target.href),
      nextPage: target.hash || target.href,
      currentPage: window.location.hash,
      platform: platform === 'default' ? 'None' : platform, // @TODO: Remove platform when data is stale.
      currentPlatform: platform === 'default' ? 'None' : platform // Pages that don't have a platform will say 'none'
    });
  };

public componentDidUpdate(prevProps: ISiteProps, prevState: ISiteState): void {
    if (prevState.pagePath !== this.state.pagePath) {
      this._jumpToAnchor(extractAnchorLink(location.hash));
    }

    const { activePages, pagePlatforms } = this.state;
    const { siteDefinition } = this.props;

    // If current page doesn't have pages for the active platform, switch to its first platform.
    if (Object.keys(pagePlatforms).length > 0 && activePages.length === 0) {
      const firstPlatform = getPageFirstPlatform(getSiteArea(siteDefinition.pages), siteDefinition);
      this._onPlatformChanged(firstPlatform);
    }
  }