How to use the choerodon-ui.Tabs.TabPane function in choerodon-ui

import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import { Button, List, Tabs, Collapse, Modal, Icon, Checkbox, Avatar, Tooltip } from 'choerodon-ui';
import { injectIntl, FormattedMessage } from 'react-intl';
import { axios, Content, Header, Page, Permission } from 'choerodon-boot-combine';
import { withRouter } from 'react-router-dom';
import classnames from 'classnames';
import './UserMsg.scss';
import UserMsgStore from '../../../stores/user/user-msg/UserMsgStore';
import '../../../common/ConfirmModal.scss';

const intlPrefix = 'user.usermsg';
const Panel = Collapse.Panel;
const TabPane = Tabs.TabPane;

function timestampFormat(timestamp) {
  function zeroize(num) {
    return (String(num).length === 1 ? '0' : '') + num;
  }

  const curTimestamp = parseInt(new Date().getTime() / 1000, 10); // 当前时间戳
  const timestampDiff = curTimestamp - timestamp; // 参数时间戳与当前时间戳相差秒数

  const curDate = new Date(curTimestamp * 1000); // 当前时间日期对象
  const tmDate = new Date(timestamp * 1000); // 参数时间戳转换成的日期对象

  const Y = tmDate.getFullYear(); const m = tmDate.getMonth() + 1; const
    d = tmDate.getDate();
  const H = tmDate.getHours(); const i = tmDate.getMinutes(); const
    s = tmDate.getSeconds();

* @Last Modified by: LainCarl
 * @Last Modified time: 2019-02-26 15:30:47
 * @Feature: 用户自定义状态展示组件
 */

import React from 'react';
import PropTypes from 'prop-types';
import {
  Tabs, Button, Spin, 
} from 'choerodon-ui';
import { FormattedMessage } from 'react-intl';
import { Page, Header, Content } from '@choerodon/boot';
import { CreateStatus, EditStatus, StatusTable } from '../components';
import { getProjectName } from '../../../../common/utils';

const TabPane = Tabs.TabPane;
const defaultProps = {

};

const propTypes = {
  loading: PropTypes.bool.isRequired,
  createVisible: PropTypes.bool.isRequired,
  editVisible: PropTypes.bool.isRequired,
  statusList: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
  CurrentEditStatus: PropTypes.shape({}).isRequired,
  EditStatusLoading: PropTypes.bool.isRequired,
  CreateStatusLoading: PropTypes.bool.isRequired,
  onRefreshClick: PropTypes.func.isRequired,
  onTabChange: PropTypes.func.isRequired,
  onShowCreateClick: PropTypes.func.isRequired,
  onEditStatusClick: PropTypes.func.isRequired,

import { injectIntl, FormattedMessage } from 'react-intl';
import { Content, Header, Page, Permission, stores } from '@choerodon/boot';
import _ from 'lodash';
import Graph from '../../../../components/Graph';
import StateStore from '../../../../stores/organization/state';
import '../../../main.scss';
import './EditConfigSelect.scss';

const prefixCls = 'issue-state-machine-config-select';
const { AppState } = stores;

const Sidebar = Modal.Sidebar;
const FormItem = Form.Item;
const TextArea = Input.TextArea;
const Option = Select.Option;
const TabPane = Tabs.TabPane;

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 100 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 26 },
  },
};

@observer
class EditConfigSelect extends Component {
  constructor(props) {
    const menu = AppState.currentMenuType;

import React, { Component } from 'react';
import { observer, inject } from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { injectIntl, FormattedMessage } from 'react-intl';
import { Button, Table, Modal, Tabs } from 'choerodon-ui';
import { Content, Header, Page, Permission, stores } from 'choerodon-front-boot';
import TimePopover from '../../../../components/timePopover';
import '../../../main.scss';
import './EditVersion.scss';

const TabPane = Tabs.TabPane;
const { AppState } = stores;

@observer
class EditVersion extends Component {
  constructor(props) {
    const menu = AppState.currentMenuType;
    super(props);
    this.state = {
      name: props.match.params.name || '',
      id: props.match.params.id || '',
      projectId: menu.id,
      selectedRowKeys: [],
      key: '1',
    };
  }

import {
  Button,
  Tabs,
} from 'choerodon-ui';
import { Content, Header, Page, stores } from '@choerodon/boot';
import { injectIntl, FormattedMessage } from 'react-intl';
import _ from 'lodash';
import LoadingBar from '../../../../components/loadingBar';
import '../../../main.scss';
import './index.scss';
import '../../container/containerHome/ContainerHome.scss';
import Event from './TabPane/event';
import RunDetail from './TabPane/runDetail';
import OperationLog from './TabPane/OperationLog';

const TabPane = Tabs.TabPane;

const { AppState } = stores;

@observer
class InstancesDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      id: props.match.params.id,
      status: props.match.params.status,
      overview: props.location.search.indexOf('overview') > 0,
      current: '1',
    };
  }

  componentDidMount() {

import { injectIntl, FormattedMessage } from 'react-intl';
import TimeAgo from 'timeago-react';
import _ from 'lodash';
import MouserOverWrapper from '../../components/MouseOverWrapper';
import DevPipelineStore from '../../stores/project/devPipeline';
import DepPipelineEmpty from '../../components/DepPipelineEmpty/DepPipelineEmpty';
import Tips from '../../components/Tips';
import MergeRequestStore from './stores';
import handleMapStore from '../code-manager/main-view/store/handleMapStore';

import './index.scss';
import '../main.scss';

const { AppState } = stores;
const { Option, OptGroup } = Select;
const TabPane = Tabs.TabPane;

@observer
class MergeRequestHome extends Component {
  constructor(props) {
    super(props);
    handleMapStore.setCodeManagerMergeRequest({
      refresh: this.reload,
      select: this.handleChange,
    });
    this.state = {
      tabKey: 'opened',
    };
  }

  componentDidMount() {
    DevPipelineStore.queryAppData(AppState.currentMenuType.id, 'merge');

import React, { Component } from 'react';
import { Button, Form, Modal, Table, Tooltip, Radio, Select, Input } from 'choerodon-ui';
import { inject, observer } from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { Content, Header, Page, Permission, stores } from 'choerodon-boot-combine';
import { injectIntl, FormattedMessage } from 'react-intl';
import './Application.scss';
import { Tabs } from 'choerodon-ui';
import MouseOverWrapper from '../../../components/mouseOverWrapper';
import StatusTag from '../../../components/statusTag';

const RadioGroup = Radio.Group;
const Option = Select.Option;
const TabPane = Tabs.TabPane;
const FormItem = Form.Item;
const { Sidebar } = Modal;
const intlPrefix = 'organization.application';
const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 8 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 },
  },
};
const isNum = /^\d+$/;

@Form.create({})

Tooltip,
  Icon,
} from 'choerodon-ui';
import {
  Content,
  Header,
  Page,
  Permission,
  stores,
} from '@choerodon/boot';
import '../../../main.scss';
import editReleaseStore from '../../../../stores/project/appRelease/editRelease';
import AppVersionStore from '../../../../stores/project/applicationVersion';
import DepPipelineEmpty from '../../../../components/DepPipelineEmpty/DepPipelineEmpty';

const TabPane = Tabs.TabPane;
const { AppState } = stores;
const HEIGHT =
  window.innerHeight ||
  document.documentElement.clientHeight ||
  document.body.clientHeight;

@observer
class AppReleaseHome extends Component {
  constructor(props) {
    const menu = AppState.currentMenuType;
    super(props);
    this.state = {
      projectId: menu.id,
      key: props.match.params.key === '2' ? '2' : '1',
      paras: [],
      filters: {},

if (dropSide) {
    currentDropOverItem = currentTarget;
    currentDropSide = dropSide;
    currentDropOverItem.classList.add(dropSideClassName(currentDropSide));
  }
}

function removeDragClass() {
  if (currentDropOverItem && currentDropSide) {
    currentDropOverItem.classList.remove(dropSideClassName(currentDropSide));
  }
}

const { Sidebar } = Modal;
const FormItem = Form.Item;
const TabPane = Tabs.TabPane;
const inputWidth = 512;
const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 100 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 10 },
  },
};

@Form.create({})
@withRouter
@injectIntl
@inject('AppState')

import React, { Component } from 'react';
import ReactQuill, { Quill } from 'react-quill';
import { axios, Content } from 'choerodon-boot-combine';
import 'react-quill/dist/quill.snow.css';
import './Editor.scss';
import { Modal, Input, Button, Form, Tabs, Upload, Icon } from 'choerodon-ui';
import { FormattedMessage, injectIntl } from 'react-intl';

const TabPane = Tabs.TabPane;
const Dragger = Upload.Dragger;
const FormItem = Form.Item;
const limitSize = 5120;
const Align = Quill.import('attributors/style/align');
Align.whitelist = ['right', 'center', 'justify'];
Quill.register(Align, true);

const Size = Quill.import('attributors/style/size');
Size.whitelist = ['10px', '12px', '14px', '16px', '18px', '20px'];
Quill.register(Size, true);

const Font = Quill.import('attributors/style/font');
Font.whitelist = ['STSong', 'STKaiti', 'STHeiti', 'STFangsong', 'SimSun', 'KaiTi', 'SimHei', 'FangSong', 'Microsoft-YaHei'];
Quill.register(Font, true);

const CustomToolbar = () => (