67 lines
No EOL
2.1 KiB
JavaScript
67 lines
No EOL
2.1 KiB
JavaScript
import React from 'react';
|
|
import { Modal, Icon, Tabs } from 'UI';
|
|
import styles from './trackingCodeModal.css';
|
|
import { editGDPR, saveGDPR } from 'Duck/site';
|
|
import { connect } from 'react-redux';
|
|
import ProjectCodeSnippet from './ProjectCodeSnippet';
|
|
import InstallDocs from './InstallDocs';
|
|
import cn from 'classnames';
|
|
|
|
const PROJECT = 'Using Script';
|
|
const DOCUMENTATION = 'Using NPM';
|
|
const TABS = [
|
|
{ key: PROJECT, text: PROJECT },
|
|
{ key: DOCUMENTATION, text: DOCUMENTATION }
|
|
];
|
|
|
|
class TrackingCodeModal extends React.PureComponent {
|
|
state = { copied: false, changed: false, activeTab: PROJECT };
|
|
|
|
setActiveTab = (tab) => {
|
|
this.setState({ activeTab: tab });
|
|
}
|
|
|
|
renderActiveTab = () => {
|
|
const { site } = this.props;
|
|
switch (this.state.activeTab) {
|
|
case PROJECT:
|
|
return <ProjectCodeSnippet />;
|
|
case DOCUMENTATION:
|
|
return <InstallDocs site={site} />;
|
|
}
|
|
return null;
|
|
}
|
|
|
|
render() {
|
|
const { site, displayed, onClose, title = '', subTitle } = this.props;
|
|
const { activeTab } = this.state;
|
|
return (
|
|
displayed &&
|
|
<Modal size="small" onClose={ onClose } open={ displayed } style={{ top: "85px" }} >
|
|
<Modal.Header className={ styles.modalHeader }>
|
|
<div>{ title } { subTitle && <span className="text-sm color-gray-dark">{subTitle}</span>}</div>
|
|
<div className={ cn(styles.closeButton, { 'hidden' : !onClose }) } role="button" tabIndex="-1" onClick={ onClose }>
|
|
<Icon name="close" size="16" />
|
|
</div>
|
|
</Modal.Header>
|
|
<Modal.Content className={ styles.content }>
|
|
<Tabs
|
|
className="px-5"
|
|
tabs={ TABS }
|
|
active={ activeTab } onClick={ this.setActiveTab } />
|
|
<div className="p-5">
|
|
{ this.renderActiveTab() }
|
|
</div>
|
|
</Modal.Content>
|
|
</Modal>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default connect(state => ({
|
|
site: state.getIn([ 'site', 'instance' ]),
|
|
gdpr: state.getIn([ 'site', 'instance', 'gdpr' ]),
|
|
saving: state.getIn([ 'site', 'saveGDPR', 'loading' ]),
|
|
}), {
|
|
editGDPR, saveGDPR
|
|
})(TrackingCodeModal); |