How to use the office-ui-fabric-react/lib/Utilities.memoizeFunction function in office-ui-fabric-react

/*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
import { mergeStyleSets } from 'office-ui-fabric-react/lib/Styling';
import { memoizeFunction } from 'office-ui-fabric-react/lib/Utilities';

export interface IllustrationStyleProps {
  block: boolean;
  size: number;
}

export const getClassNames = memoizeFunction((styleProps: IllustrationStyleProps) => {
  const { block, size } = styleProps;
  const length = `${size}px`;

  return mergeStyleSets({
    root: {
      /* IE/Edge do not bubble click events up from SVG elements, so allow clicks to pass through */
      pointerEvents: 'none',
      display: block ? 'block' : 'inline',
      height: length,
      width: length,
    },
  });
});

initials,
    image: {
      borderRadius,
    },
    imageArea: {
      borderRadius,
    },
  });
});

export interface AvatarClassNameProps {
  size: AvatarSize;
  theme: ITheme;
}

export const getClassNames = memoizeFunction((props: AvatarClassNameProps) => {
  const { size, theme } = props;
  return mergeStyleSets({
    root: {
      position: 'relative',
    },
    badge: {
      position: 'absolute',
      height: size === AvatarSize.SMALL || size === AvatarSize.XSMALL ? '16px' : '20px',
      width: size === AvatarSize.SMALL || size === AvatarSize.XSMALL ? '16px' : '20px',
      bottom: '-2px',
      right: '-2px',
      borderRadius: borders.round,
      border: `solid 2px ${theme.palette.white}`,
      background: theme.palette.white,
      color: theme.palette.themeDark,
      selectors: {

import { memoizeFunction } from 'office-ui-fabric-react/lib/Utilities';
import { IButtonStyles } from 'office-ui-fabric-react/lib/Button';

export const getCustomActionBarButtonStyles = memoizeFunction(
  (): IButtonStyles => {
    return {
      root: {
        marginRight: '16px'
      },
      textContainer: {
        overflow: 'hidden'
      },
      label: {
        textOverflow: 'ellipsis',
        width: 'inherit',
        overflow: 'hidden',
        whiteSpace: 'nowrap',
        lineHeight: '14px',
        minHeight: '16px'
      }

/*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
import { mergeStyleSets, ITheme } from 'office-ui-fabric-react/lib/Styling';
import { memoizeFunction } from 'office-ui-fabric-react/lib/Utilities';
import { getNormalFocusStyle } from '../../util/styles/focusOutlines';

export interface NavigationLinkStyleProps {
  block?: boolean;
  unstyled?: boolean;
  theme: ITheme;
}

export const getClassNames = memoizeFunction((styleProps: NavigationLinkStyleProps) => {
  const { unstyled, block, theme } = styleProps;

  const overrides = unstyled
    ? {
        textDecoration: 'none',
        cursor: 'pointer',
        color: 'inherit',
      }
    : {
        textDecoration: 'underline',
        cursor: 'pointer',
        color: theme.semanticColors.linkHovered,
      };

  const baseStyles = {
    display: block ? 'block' : undefined,

export interface TileClassNameProps {
  aspectRatio: TileAspectRatio;
  borderColor?: PaletteColor;
  theme: ITheme;
}

const mapAspectRatioToPercent: Record = {
  [TileAspectRatio.TwoThree]: '150%',
  [TileAspectRatio.EightNine]: '112.5%',
  [TileAspectRatio.OneOne]: '100%',
  [TileAspectRatio.FourThree]: '75%',
  [TileAspectRatio.SixteenNine]: '56.25%',
  [TileAspectRatio.TwentyOneNine]: '42.85%',
};

export const getClassNames = memoizeFunction((classNameProps: TileClassNameProps) => {
  const { aspectRatio, borderColor, theme } = classNameProps;

  const borderWidth = borderColor ? '1px' : '0';
  const border = borderColor ? `solid ${borderWidth} ${theme.palette[borderColor]}` : undefined;

  return mergeStyleSets({
    root: {
      paddingBottom: mapAspectRatioToPercent[aspectRatio],
      position: 'relative',
      width: '100%',
      selectors: {
        '&.y-tile > *': {
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          border,

import { mergeStyleSets } from 'office-ui-fabric-react/lib/Styling';
import { memoizeFunction } from 'office-ui-fabric-react/lib/Utilities';

export interface ListStyleProps {
  type: 'ordered' | 'unordered';
  textSize?: TextSize;
}

const getMarginBottom = (textSize?: TextSize) => {
  if (textSize === TextSize.XSMALL || textSize === TextSize.SMALL || textSize === TextSize.MEDIUM_SUB) {
    return getGutterValue(3, true);
  }
  return getGutterValue(5, true);
};

export const getClassNames = memoizeFunction((styleProps: ListStyleProps) => {
  const { type, textSize } = styleProps;
  const isOrdered = type === 'ordered';

  return mergeStyleSets({
    root: {
      margin: 0,
      marginBottom: getMarginBottom(textSize),
      padding: isOrdered ? '0 0 0 2.8rem' : '0 0 0 3.5rem',
      listStylePosition: 'outside',
      listStyleType: isOrdered ? 'decimal' : 'disc',
      selectors: {
        '> .y-list--item': {
          padding: `0 0 ${getGutterValue(1, true)} 0`,
          paddingLeft: isOrdered ? '0.7rem' : undefined,
        },
      },

size?: HeadingSize;
}

const getFontWeight = (size?: HeadingSize) => {
  if (size === '4') {
    return fontWeights.normal;
  }

  if (size === 'none') {
    return 'inherit';
  }

  return fontWeights.bold;
};

export const getClassNames = memoizeFunction((styleProps: HeadingStyleProps) => {
  const { size } = styleProps;

  return mergeStyleSets({
    root: {
      display: 'inline',
      fontSize: 'inherit',
      lineHeight: 'inherit',
      fontWeight: getFontWeight(size),
      marginBottom: size === 'none' ? 0 : undefined,
    },
  });
});

/*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
import { mergeStyleSets, ITheme } from 'office-ui-fabric-react/lib/Styling';
import { memoizeFunction } from 'office-ui-fabric-react/lib/Utilities';
export interface PickerClassNameProps {
  theme: ITheme;
}

export const getClassNames = memoizeFunction((classNameProps: PickerClassNameProps) => {
  const { theme } = classNameProps;
  return mergeStyleSets({
    root: {
      selectors: {
        '.ms-BasePicker-text[class*="pickerText"][class*="inputFocused"]': {
          borderColor: theme.palette.themePrimary,
        },
        '.ms-BasePicker-text[class*="pickerText"]': {
          borderColor: theme.palette.neutralTertiary,
        },
      },
    },
    selectedItem: {
      backgroundColor: theme.semanticColors.menuItemBackgroundHovered,
      borderRadius: '2px',
      border: `solid 1px ${theme.semanticColors.bodyDivider}`,

export interface MediaObjectStyleProps {
  size: MediaObjectSize;
}

const getPaddingTop = (size: MediaObjectSize) => {
  if (size === MediaObjectSize.SMALL) {
    return '0.4rem';
  }
  if (size === MediaObjectSize.MEDIUM) {
    return '0.2rem';
  }
  return undefined;
};

export const getClassNames = memoizeFunction((styleProps: MediaObjectStyleProps) => {
  const { size } = styleProps;

  return mergeStyleSets({
    imageColumn: {
      paddingTop: getPaddingTop(size),
    },
  });
});

}
  return lineStarts;
}

export function _getErrorLineInfo(error: IDiagnostic, lineStarts: number[]): { line: number; col: number } {
  let line = 1;
  for (; line < lineStarts.length; line++) {
    if (lineStarts[line] > error.start!) {
      break;
    }
  }
  return { line, col: error.start! - lineStarts[line - 1] + 1 };
}

/** Convert from IPackageGroup[] to a map from package name to global name. @internal */
export const _supportedPackageToGlobalMap = memoizeFunction((supportedPackages: IBasicPackageGroup[]) => {
  const packagesToGlobals: { [packageName: string]: string } = {};
  for (const group of supportedPackages) {
    for (const pkg of group.packages) {
      packagesToGlobals[pkg.packageName] = group.globalName;
    }
  }
  return packagesToGlobals;
});