You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
102 lines
2.8 KiB
JavaScript
102 lines
2.8 KiB
JavaScript
import React from 'react';
|
|
import { connect } from 'react-redux';
|
|
import Tabs, { TabPane } from 'rc-tabs';
|
|
import TabContent from 'rc-tabs/lib/TabContent';
|
|
import ScrollableInkTabBar from 'rc-tabs/lib/ScrollableInkTabBar';
|
|
|
|
import i18n from 'vj/utils/i18n';
|
|
import Icon from 'vj/components/react/IconComponent';
|
|
import Panel from './PanelComponent';
|
|
import PanelButton from './PanelButtonComponent';
|
|
import ScratchpadPretestTabPane from './ScratchpadPretestTabPaneContainer';
|
|
|
|
const mapStateToProps = (state) => ({
|
|
current: state.pretest.current,
|
|
tabs: state.pretest.tabs,
|
|
meta: state.pretest.meta,
|
|
});
|
|
|
|
const mapDispatchToProps = (dispatch) => ({
|
|
handleClickAdd() {
|
|
dispatch({
|
|
type: 'SCRATCHPAD_PRETEST_ADD_DATA',
|
|
});
|
|
},
|
|
handleClickRemove() {
|
|
dispatch({
|
|
type: 'SCRATCHPAD_PRETEST_REMOVE_DATA',
|
|
});
|
|
},
|
|
handleSwitchData(id) {
|
|
dispatch({
|
|
type: 'SCRATCHPAD_PRETEST_SWITCH_TO_DATA',
|
|
payload: id,
|
|
});
|
|
},
|
|
handleClickClose() {
|
|
dispatch({
|
|
type: 'SCRATCHPAD_UI_SET_VISIBILITY',
|
|
payload: {
|
|
uiElement: 'pretest',
|
|
visibility: false,
|
|
},
|
|
});
|
|
},
|
|
});
|
|
|
|
@connect(mapStateToProps, mapDispatchToProps)
|
|
export default class ScratchpadPretestContainer extends React.PureComponent {
|
|
render() {
|
|
return (
|
|
<Panel
|
|
title={(
|
|
<span>
|
|
<Icon name="edit" />
|
|
{' '}
|
|
{i18n('Pretest')}
|
|
</span>
|
|
)}
|
|
>
|
|
<Tabs
|
|
className="scratchpad__panel-tab flex-col flex-fill"
|
|
activeKey={this.props.current}
|
|
onChange={(tabId) => this.props.handleSwitchData(tabId)}
|
|
animation="slide-horizontal"
|
|
renderTabBar={() => (
|
|
<ScrollableInkTabBar
|
|
extraContent={(
|
|
<span>
|
|
<PanelButton
|
|
data-tooltip={i18n('Add new data')}
|
|
onClick={() => this.props.handleClickAdd()}
|
|
>
|
|
{i18n('Add')}
|
|
</PanelButton>
|
|
<PanelButton
|
|
data-tooltip={i18n('Remove this data')}
|
|
onClick={() => this.props.handleClickRemove()}
|
|
>
|
|
{i18n('Remove')}
|
|
</PanelButton>
|
|
<PanelButton
|
|
onClick={() => this.props.handleClickClose()}
|
|
>
|
|
<Icon name="close" />
|
|
</PanelButton>
|
|
</span>
|
|
)}
|
|
/>
|
|
)}
|
|
renderTabContent={() => <TabContent />}
|
|
>
|
|
{this.props.tabs.map((tabId) => (
|
|
<TabPane tab={this.props.meta[tabId].title} key={tabId}>
|
|
<ScratchpadPretestTabPane id={tabId} />
|
|
</TabPane>
|
|
))}
|
|
</Tabs>
|
|
</Panel>
|
|
);
|
|
}
|
|
}
|