You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
42 lines
1.9 KiB
42 lines
1.9 KiB
/*
|
|
* @Description: 显示tab中的内容
|
|
* @Author: tangjiang
|
|
* @Date: 2019-11-18 10:43:03
|
|
* @Last Modified by: tangjiang
|
|
* @Last Modified time: 2019-11-18 11:35:12
|
|
*/
|
|
import './index.scss';
|
|
import React, { PureComponent } from 'react';
|
|
import { Icon } from 'antd';
|
|
|
|
const tabCtx = (ctx, props) => (<p {...props}>{ctx}</p>);
|
|
const loadingCtx = (<span className={'ctx_loading'}><Icon className={'ctx_icon'} type="loading"/>加载中...</span>);
|
|
const loadedCtx = (<span className={'ctx_loaded'}><Icon className={'ctx_icon'} type="loading"/>加载完成</span>);
|
|
const maps = {
|
|
// default: (ctx, position) => (<p className={`tab_ctx_area tab_ctx_default pos_${position}`}>{ctx}</p>),
|
|
// loading: (ctx, position) => (<p className={`tab_ctx_area tab_ctx_loading pos_${position}`}>{ctx}</p>),
|
|
// loaded: (ctx, position) => (<p className={`tab_ctx_area tab_ctx_loaded pos_${position}`}>{ctx}</p>),
|
|
// final: (ctx, position) => (<p className={`tab_ctx_area tab_ctx_final pos_${position}`}>{ctx}</p>)
|
|
default: (ctx, position) => tabCtx(ctx, { className: `tab_ctx_area tab_ctx_default pos_${position}` }),
|
|
loading: (ctx, position) => tabCtx(loadingCtx, { className: `tab_ctx_area tab_ctx_loading pos_${position}` }),
|
|
loaded: (ctx, position) => tabCtx(loadedCtx, { className: `tab_ctx_area tab_ctx_loaded pos_${position}` }),
|
|
final: (ctx, position) => tabCtx(ctx, { className: `tab_ctx_area tab_ctx_final pos_${position}` })
|
|
}
|
|
|
|
export default class InitTabCtx extends PureComponent {
|
|
|
|
render () {
|
|
/**
|
|
* @param state 当前状态 default: 显示提示信息 init: 加载初始内容 loading: 加载中 loaded: 加载完成 final: 显示最终内容
|
|
* @param position: start | cetner | end
|
|
* @returns
|
|
*/
|
|
const { state, ctx, position = 'start' } = this.props;
|
|
return(
|
|
<React.Fragment>
|
|
{ maps[state](ctx, position) }
|
|
</React.Fragment>
|
|
)
|
|
}
|
|
}
|