add ui

ui/components/scratchpad/ScratchpadPretestContainer.js

@@ -0,0 +1,101 @@
+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>
+    );
+  }
+}