自定义文件浏览器

应用自定义主题

通过利用文件浏览器的组件,你可以轻松将Office UI Fabric应用到文件 Customizer 浏览器。 下面介绍了如何将主题应用到 GraphFileBrowser 使用 Customizer

  1. 在应用程序React中,从 Customizer 导入 office-ui-fabric-react/lib/Utilities 和从 ITheme office-ui-fabric/lib/Styling 导入。
  2. 创建自定义并 ITheme 传递到 的 settings 属性 Customizer 。 可以使用Office UI Fabric主题生成器创建自定义调色板。
  3. 使用 GraphFileBrowser 组件包装 Customizer 组件以查看应用的自定义主题。

下面是完成上述步骤后的代码示例:

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import { GraphFileBrowser } from '@microsoft/file-browser';
import { Customizer } from 'office-ui-fabric-react/lib/Utilities';
import { createTheme, ITheme } from 'office-ui-fabric-react/lib/Styling';

export const theme = createTheme({
  palette: {
    themePrimary: '#6264a7',
    themeLighterAlt: '#f7f7fb',
    themeLighter: '#e1e1f1',
    themeLight: '#c8c9e4',
    themeTertiary: '#989ac9',
    themeSecondary: '#7173b0',
    themeDarkAlt: '#585a95',
    themeDark: '#4a4c7e',
    themeDarker: '#37385d',
    neutralLighterAlt: '#f8f8f8',
    neutralLighter: '#f4f4f4',
    neutralLight: '#eaeaea',
    neutralQuaternaryAlt: '#dadada',
    neutralQuaternary: '#d0d0d0',
    neutralTertiaryAlt: '#c8c8c8',
    neutralTertiary: '#c2c2c2',
    neutralSecondary: '#858585',
    neutralPrimaryAlt: '#4b4b4b',
    neutralPrimary: '#333',
    neutralDark: '#272727',
    black: '#1d1d1d',
    white: '#fff'
  },
  semanticColors: {
    bodyBackground: '#fff',
    bodyText: '#333'
  }
});

class App extends React.Component {
  getAuthenticationToken() {
    return Promise.resolve('<access_token>');
  }

  render() {
    return (
      <Customizer
        settings={ { theme } }>
          <GraphFileBrowser
            getAuthenticationToken={this.getAuthenticationToken} />
      </Customizer>
    );
  }
}

ReactDOM.render(
  <App />,
  mountNode
);

呈现自定义操作按钮

为了支持高级方案,文件浏览器 SDK 公开用于React"选择"和"取消"操作按钮的"组件"属性。 默认情况下,组件在页脚中呈现"选择" GraphFileBrowser 和"取消"按钮。 每个按钮都有一个对应的函数,用于提供要呈现的自定义元素来表示默认按钮。 它们分别命名为 onRenderSuccessButtononRenderCancelButton

/**
  * Custom render function for the "Success" action button.
  */
onRenderSuccessButton?: IRenderFunction<IButtonProps>;
/**
  * Custom render function for the "Cancel" action button.
  */
onRenderCancelButton?: IRenderFunction<IButtonProps>;

onRenderSuccessButton onRenderCancelButton 属性的类型均来自 IRenderFunction office-ui-fabric-react 。 此类型接受组件属性并调用可选的呈现函数,该函数将属性用作其唯一的参数。 对于操作按钮,将传入类型的默认操作 GraphFileBrowser IButtonProps 按钮属性。 然后,开发人员可以随意应用这些属性,并返回一个有效 JSX.Element 属性,但是他们希望。

本演练介绍了自定义操作按钮的文本和样式。

自定义按钮文本

上述呈现函数允许完全自定义操作按钮。 例如,您可以使用以下实现自定义控件的文本,同时保留其余默认属性:

class App extends React.Component {
  public render() {
    return (
      <GraphFileBrowser
        getAuthenticationToken={this.getAuthenticationToken}
        onRenderSuccessButton={this.onRenderSuccessButton}
        onRenderCancelButton={this.onRenderCancelButton} />
    );
  }

  private getAuthenticationToken() {
    return Promise.resolve('<access_token>');
  }

  private onRenderSuccessButton(props) {
    return <PrimaryButton {...props} text="Ok" />
  }

  private onRenderCancelButton(props) {
    return <DefaultButton {...props} text="Discard" />
  }
}

这会将组件"选择"和"取消"按钮的文本替换为"确定"和"放弃 GraphFileBrowser "。

自定义按钮样式

通过使用 IRenderFunction<IButtonProps> ,开发人员可以自定义"文件浏览器"按钮,而更改其文本值。 例如,可以通过替代默认、悬停和按下的样式来按每个按钮应用自定义样式。

基于上述自定义"选择"按钮构建,让我们在默认、悬停和按下状态下 background-color 应用自定义。 由于我们呈现的是 Button,因此可以使用此 Wiki 条目中介绍的库方法设置 office-ui-fabric-react PrimaryButton styles 组件样式。

private onRenderSuccessButton(props) {
  const styles = {
    root: {
      backgroundColor: '#5c2d91'
    },
    rootHovered: {
      backgroundColor: '#6b3e9f'
    },
    rootPressed: {
      backgroundColor: '#32145a'
    }
  };

  return <PrimaryButton {...props} text="Ok" styles={styles} />
}

应用上述更改后,刷新应用程序以查看"确定"按钮以一组自定义颜色呈现,该按钮用于鼠标悬停、按下和默认 background-color 状态时。