通用自定义组件开发案例

/**
 * src/RepoList.tsx
 */
import React from 'react'
import 'antd/dist/antd.css'
import { Table } from 'antd'
import { RepoManager, IRepo } from '@qn-pandora/app-sdk'

const columns = [
  {
    title: '仓库名称',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '当前数据量',
    dataIndex: 'bytes',
    key: 'bytes'
  },
  {
    title: '数据条数',
    dataIndex: 'docTotal',
    key: 'docTotal'
  },
  {
    title: '存储时限',
    dataIndex: 'retention',
    key: 'retention'
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime'
  },
  {
    title: '更新时间',
    dataIndex: 'updateTime',
    key: 'updateTime'
  }
]

export default class RepoList extends React.Component<{}, { repos: IRepo[] }> {
  repoManager: RepoManager
  state = {
    repos: []
  }

  get dataSource() {
    return this.state.repos.map((repo: IRepo) => ({
      ...repo,
      key: repo.name
    }))
  }

  constructor(props: {}) {
    super(props)
    const fetchAll = false // false by default
    const pageSize = 20 // 10 by default

    // 创建@qn-pandora/app-sdk提供的RepoManager的实例
    this.repoManager = new RepoManager(fetchAll, pageSize)
  }

  render() {
    return <Table columns={columns} dataSource={this.dataSource} />
  }

  componentDidMount() {
    // 使用@qn-pandora/app-sdk提供的RepoManager获取仓库列表
    this.repoManager.listRepos().then(repos => {
      this.setState({ repos })
    })
  }
}

/**
 * src/index.tsx
 */
import React from 'react'
import ReactDOM from 'react-dom'
import { BaseComponent } from '@qn-pandora/app-sdk'
import RepoList from './RepoList'

export default class extends BaseComponent {
  render() {
    ReactDOM.render(<RepoList />, this.element)
  }
}