How to use office-ui-fabric-react - 10 common examples

(errorMessage: string, exceptionMessage: string): IAction => {
        // tslint:disable-next-line:no-console
        console.log(exceptionMessage);
        return {
            payload: {
                message: errorMessage,
                showMessage: true,
                type: MessageBarType.error
            },
            type: actions.HANDLE_ASYNC_ERROR
        };
    };

return async (dispatch: Dispatch>) => {
        try {
            const customActionsRet: ICustomAction[] = await api.getCustomActions(caType);
            dispatch(setAllProperties(customActionsRet));
        } catch (error) {
            // tslint:disable-next-line:no-console
            console.log(error);
            dispatch(setMessageData({
                message: constants.ERROR_MESSAGE_GET_ALL_CUSTOM_ACTIONS,
                showMessage: true,
                type: MessageBarType.error
            }));
        }
    };
};

getXrmP().then(xrm => {

        const data = getURLParameter("data", document.location.search)
        let params = {} as { addressEditorRunProps?: Partial }
        try {
            params = JSON.parse(data || "{}")
        } catch (e) {
            console.log(`${NAME}: Error parsing data object from url. Continuing.`, e)
        }
        props = R.mergeDeepRight(props, params.addressEditorRunProps || {}) as AddressEditorRunProps

        const client = props.client || mkClient(xrm, API_POSTFIX)
        const repo: CustomerAddressDAO = props.addressRepo || new CustomerAddressDAOImpl(client)
        const className = mergeStyles(props.className, defaultStyles, props.styles)
        const sec = new Security(client)
        const metadatap = getEditorEntityMetadata(repo.metadata)

        // todo Remove dependency on Page and rely on form context perhaps, also rely on metadata
        const entityName = xrm.Page.data.entity.getEntityName()
        const access = sec.userPrinicpalAccessForRecord(xrm.Utility.getGlobalContext().getUserId(),
            entityName, cleanId(xrm.Page.data.entity.getId()))

        const controller: DataController =
            props.controller ||
            (props.makeController ? props.makeController(repo) : makeController(repo, directCopyProps))

        const renderit = (target: HTMLElement, metadata: EditorEntityMetadata, access: AccessRights) => {
            const Ed = addEditorState(AddressEditor)
            const defaultRenderEditor = (props: AddressEditorProps) => 
            const specification: EditorSpecification = {

return async (dispatch: Dispatch>) => {
        try {
            dispatch(setWorkingOnIt(true));
            const result = await api.setAttachments(item);
            if (result) {
                const msg = `Users ${(!item.enableAttachments ? "CAN" : "CAN NOT")}
                 attach files to items in this list ${item.title}.`;
                const messageData = {
                    message: msg,
                    showMessage: true,
                    type: MessageBarType.success
                } as IMessageData;
                dispatch(getAllSiteContent(messageData));
            } else {
                throw new Error("Error setAttachments returned false");
            }
        } catch (error) {
            // tslint:disable-next-line:no-console
            console.log(error);
            dispatch(setMessageData({
                message: constants.ERROR_MESSAGE_SET_LIST_ATTACHMENTS_ENABLE,
                showMessage: true,
                type: MessageBarType.error
            }));
        }
    };
};

started: 1,
            beta: 2,
            release: 3
        };

        // Nav-linkText is a class name from the Fabric nav
        return (
            <>
                
                <span>
                    {link.name}
                </span>
                {link.status !== undefined &amp;&amp; (
                    <span>
                        {exampleStatus[link.status]}
                    </span>
                )}
            
        );
    };

private _pageContent = (sections: IPageSectionProps[]): JSX.Element | undefined => {
    const { sectionWrapperClassName, showSideRail } = this.props;
    const { isMountedOffset } = this.state;

    return (
      <div>
        {// Map over array of section objects in order to add increasing transitionDelay to stagger load animation.
        sections.map((section: IPageSectionProps, sectionIndex: number) =&gt; {
          const { renderAs: SectionType = OtherPageSection, className, style, ...rest } = section;
          return (
            </div>

hideBackground={!props.showBackground}
      showBackgroundFrame={true}
    />
  );

  const { backgroundSize } = getTileLayout(tile);

  const imageSize = fitContentToBounds({
    contentSize: props.originalImageSize,
    boundsSize: backgroundSize || { width: 0, height: 0 },
    mode: 'cover'
  });

  return (
    <div style="{{">
      {renderTileWithLayout(tile, {
        background: (
          <img src="{`//placehold.it/${Math.round(imageSize.width)}x${Math.round(imageSize.height)}`}">
        )
      })}
    </div>
  );

import * as React from 'react';
import { Stack } from '../Stack';
import { IStackStyles, IStackTokens } from '../Stack.types';
import { mergeStyles, DefaultPalette } from 'office-ui-fabric-react/lib/Styling';

// Styles definition
const stackStyles: IStackStyles = {
  root: {
    background: DefaultPalette.themeTertiary
  }
};
const stackItemStyles = mergeStyles({
  alignItems: 'center',
  background: DefaultPalette.themePrimary,
  color: DefaultPalette.white,
  display: 'flex',
  height: 50,
  justifyContent: 'center',
  width: 50
});

// Tokens definition
const sectionStackTokens: IStackTokens = { childrenGap: 10 };
const headingStackTokens: IStackTokens = { childrenGap: 50 };
const numericalSpacingStackTokens: IStackTokens = {
  childrenGap: 10,
  padding: 10
};

style[key] = {
      ...style[key],
      ...codeStyle,
      padding: '6px 20px',
      background: 'white'
    };
  } else {
    // correct text colors (convert to lowercase due to inconsistent casing)
    const color = (style[key].color || '').toLowerCase();
    if (colorMap[color]) {
      style[key].color = colorMap[color];
    }
  }
}

const rootClass = mergeStyles({
  maxHeight: 400
});

export interface ITypeScriptSnippetProps {
  className?: string;
}

/** TypeScript code snippet with a theme similar to Monaco's VS light. */
export const TypeScriptSnippet: React.FunctionComponent = props => {
  return (
    
      {props.children}
    
  );
};

import * as React from 'react';
import { max as d3Max, min as d3Min } from 'd3-array';
import { axisLeft as d3AxisLeft, axisBottom as d3AxisBottom } from 'd3-axis';
import { scaleLinear as d3ScaleLinear, scaleTime as d3ScaleTime } from 'd3-scale';
import { select as d3Select } from 'd3-selection';
import * as d3TimeFormat from 'd3-time-format';
import { ILegend, Legends } from '../Legends/index';
import { classNamesFunction } from 'office-ui-fabric-react/lib/Utilities';
import { IProcessedStyleSet } from 'office-ui-fabric-react/lib/Styling';
import { ILineChartProps, ILineChartStyleProps, ILineChartStyles, ILineChartDataPoint, ILineChartPoints } from './LineChart.types';
import { Callout, DirectionalHint } from 'office-ui-fabric-react/lib/Callout';

const getClassNames = classNamesFunction();

export class LineChartBase extends React.Component<
  ILineChartProps,
  {
    _width: number;
    _height: number;
    containerWidth: number;
    containerHeight: number;
    isCalloutVisible: boolean;
    hoverYValue: string | number | null;
    hoverXValue: string | number | null;
    activeLegend: string;
    lineColor: string;
    // tslint:disable-next-line:no-any
    refSelected: any;
    hoveredLineColor: string;