How to use the @uifabric/experiments/lib/components/TilesList/examples/ExampleHelpers.getTileCells function in @uifabric/experiments

To help you get started, we’ve selected a few @uifabric/experiments examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github OfficeDev / office-ui-fabric-react / packages / experiments / src / components / TilesList / examples / TilesList.Document.Example.tsx View on Github external
public componentDidUpdate(previousProps: ITilesListDocumentExampleProps, prevState: ITilesListDocumentExampleState): void {
    const { isDataLoaded } = this.state;
    if (this.props.tileSize !== previousProps.tileSize || this.state.isFluentStyling !== prevState.isFluentStyling) {
      if (!isDataLoaded) {
        this.setState({
          cells: getTileCells(SHIMMER_GROUPS, {
            onRenderCell: this._onRenderShimmerCell,
            onRenderHeader: this._onRenderShimmerHeader,
            size: this.props.tileSize,
            shimmerMode: true
          })
        });
      } else {
        this.setState({
          cells: getTileCells(GROUPS, {
            onRenderCell: this._onRenderDocumentCell,
            onRenderHeader: this._onRenderHeader,
            size: this.props.tileSize
          })
        });
      }
    }
github OfficeDev / office-ui-fabric-react / packages / experiments / src / components / TilesList / examples / TilesList.Media.Example.tsx View on Github external
private _onToggleNameplateOnlyOnHover = (event: React.MouseEvent, checked: boolean): void => {
    this.setState({
      nameplateOnlyOnHover: checked,
      cells: getTileCells(GROUPS, {
        onRenderCell: this._onRenderMediaCell,
        onRenderHeader: this._onRenderHeader
      })
    });
  };
github OfficeDev / office-ui-fabric-react / packages / experiments / src / components / TilesList / examples / TilesList.Document.Example.tsx View on Github external
private _onToggleIsDataLoaded = (event: React.MouseEvent, checked: boolean): void => {
    const { tileSize } = this.props;
    const { isDataLoaded } = this.state;
    let { cells } = this.state;

    if (cells.length && !cells[0].isPlaceholder) {
      cells = getTileCells(SHIMMER_GROUPS, {
        onRenderCell: this._onRenderShimmerCell,
        onRenderHeader: this._onRenderShimmerHeader,
        shimmerMode: true,
        size: tileSize
      });
    } else {
      cells = getTileCells(GROUPS, {
        onRenderCell: this._onRenderDocumentCell,
        onRenderHeader: this._onRenderHeader,
        size: tileSize
      });
    }

    this.setState({
      isDataLoaded: !isDataLoaded,
      cells: cells
    });
  };
github OfficeDev / office-ui-fabric-react / packages / experiments / src / components / TilesList / examples / TilesList.Document.Example.tsx View on Github external
public componentDidUpdate(previousProps: ITilesListDocumentExampleProps, prevState: ITilesListDocumentExampleState): void {
    const { isDataLoaded } = this.state;
    if (this.props.tileSize !== previousProps.tileSize || this.state.isFluentStyling !== prevState.isFluentStyling) {
      if (!isDataLoaded) {
        this.setState({
          cells: getTileCells(SHIMMER_GROUPS, {
            onRenderCell: this._onRenderShimmerCell,
            onRenderHeader: this._onRenderShimmerHeader,
            size: this.props.tileSize,
            shimmerMode: true
          })
        });
      } else {
        this.setState({
          cells: getTileCells(GROUPS, {
            onRenderCell: this._onRenderDocumentCell,
            onRenderHeader: this._onRenderHeader,
            size: this.props.tileSize
          })
        });
      }
    }
  }
github OfficeDev / office-ui-fabric-react / packages / experiments / src / components / TilesList / examples / TilesList.Document.Example.tsx View on Github external
constructor(props: ITilesListDocumentExampleProps) {
    super(props);

    this._selection = new Selection({
      getKey: (item: IExampleItem) => item.key,
      onSelectionChanged: this._onSelectionChange
    });

    this._selection.setItems(ITEMS);

    this.state = {
      isModalSelection: this._selection.isModal(),
      isDataLoaded: false,
      isFluentStyling: false,
      cells: getTileCells(SHIMMER_GROUPS, {
        onRenderCell: this._onRenderShimmerCell,
        onRenderHeader: this._onRenderShimmerHeader,
        size: props.tileSize,
        shimmerMode: true
      })
    };
  }
github OfficeDev / office-ui-fabric-react / packages / experiments / src / components / TilesList / examples / TilesList.Document.Example.tsx View on Github external
private _onToggleIsDataLoaded = (event: React.MouseEvent, checked: boolean): void => {
    const { tileSize } = this.props;
    const { isDataLoaded } = this.state;
    let { cells } = this.state;

    if (cells.length && !cells[0].isPlaceholder) {
      cells = getTileCells(SHIMMER_GROUPS, {
        onRenderCell: this._onRenderShimmerCell,
        onRenderHeader: this._onRenderShimmerHeader,
        shimmerMode: true,
        size: tileSize
      });
    } else {
      cells = getTileCells(GROUPS, {
        onRenderCell: this._onRenderDocumentCell,
        onRenderHeader: this._onRenderHeader,
        size: tileSize
      });
    }

    this.setState({
      isDataLoaded: !isDataLoaded,
      cells: cells
github OfficeDev / office-ui-fabric-react / packages / experiments / src / components / TilesList / examples / TilesList.Media.Example.tsx View on Github external
constructor(props: {}) {
    super(props);

    this._selection = new Selection({
      getKey: (item: IExampleItem) => item.key,
      onSelectionChanged: this._onSelectionChange
    });

    this._selection.setItems(ITEMS);

    this.state = {
      isModalSelection: this._selection.isModal(),
      nameplateOnlyOnHover: false,
      cells: getTileCells(GROUPS, {
        onRenderCell: this._onRenderMediaCell,
        onRenderHeader: this._onRenderHeader
      })
    };
  }