@aliretail/react-materials-components/demo/DataExport/usage.md

B 端物料组件库

---
title: DataExport-Usage
order: 1
---

```jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { DataExport } from '@aliretail/react-materials-components';

import { Button } from '@alifd/next';
import '../../src/DataExport/index.scss';

class App extends Component {
  state = {
    useDefault: true,
  };
  onExportButtonClick = () => {
    return {
      foo: '123',
      bar: 'test',
    };
  };

  onExport = (query) => {
    console.log('onExport:', query);
    return Promise.resolve({
      success: true,
      message: 'testtst',
      data: {
        jobid: 'aaa',
      },
    });
  };

  queryExportState = (jobId, cb) => {
    console.log('jobId:', jobId);
    return Promise.resolve({
      success: true,
      finished: 100,
    });
  };

  translateQuery = (query) => {
    const result = [];
    for (const key in query) {
      result.push({
        label: key,
        value: query[key],
      });
    }
    return result;
  };

  onFetchHistory = (currentPage, pageSize) => {
    console.log(`currentPage=${currentPage},pageSize=${pageSize}`);
    const list = [];
    for (let idx = 0; idx < pageSize; idx++) {
      const statusArr = ['process', 'finish', 'fail'];
      const status = statusArr[idx % 3];
      list.push({
        creator: `creator_${idx}`,
        finished: status === 'finish' ? 100 : 48,
        createdTime: 1604460724968,
        finishedTime: 160446073498,
        exportQuery: {
          foo: 'test',
          idx: (currentPage - 1) * pageSize + idx,
          status,
        },
        status,
        downloadUrl: 'http://download.com/xxx',
      });
    }
    return Promise.resolve({
      success: true,
      data: {
        total: 123,
        list,
      },
    });
  };

  render() {
    const exportProps = {
      onExportButtonClick: this.onExportButtonClick,
      queryExportState: this.queryExportState,
      onExport: this.onExport,
      translateQuery: this.translateQuery,
      onFetchHistory: this.onFetchHistory,
    };
    const { useDefault } = this.state;
    const onClick = () => {
      this.setState({
        useDefault: !useDefault,
      });
    };
    return (
      <div>
        <div>
          切换按钮：<Button onClick={onClick}>{useDefault ? '自定义' : '使用默认'}</Button>
        </div>
        {useDefault ? (
          <DataExport {...exportProps} />
        ) : (
          <DataExport {...exportProps}>
            <Button data-button-type="history" type="secondary">
              查看历史
            </Button>
            <Button>其他无关的按钮</Button>
            <Button data-button-type="export" type="primary">
              导出
            </Button>
          </DataExport>
        )}
      </div>
    );
  }
}

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