70 lines
1.7 KiB
JavaScript
70 lines
1.7 KiB
JavaScript
import React from 'react';
|
|
|
|
import { Tabs } from 'UI';
|
|
|
|
import InstallDocs from './InstallDocs';
|
|
import InstallMobileDocs from './InstallIosDocs';
|
|
import ProjectCodeSnippet from './ProjectCodeSnippet';
|
|
|
|
const PROJECT = 'Using Script';
|
|
const DOCUMENTATION = 'Using NPM';
|
|
const TABS = [
|
|
{ key: DOCUMENTATION, text: DOCUMENTATION },
|
|
{ key: PROJECT, text: PROJECT },
|
|
];
|
|
|
|
class TrackingCodeModal extends React.PureComponent {
|
|
state = { copied: false, changed: false, activeTab: DOCUMENTATION };
|
|
|
|
setActiveTab = (tab) => {
|
|
this.setState({ activeTab: tab });
|
|
};
|
|
|
|
renderActiveTab = () => {
|
|
const { site } = this.props;
|
|
switch (this.state.activeTab) {
|
|
case PROJECT:
|
|
return <ProjectCodeSnippet site={site} />;
|
|
case DOCUMENTATION:
|
|
return <InstallDocs site={site} />;
|
|
}
|
|
return null;
|
|
};
|
|
|
|
render() {
|
|
const { title = '', subTitle, site } = this.props;
|
|
const { activeTab } = this.state;
|
|
console.log(this.props.site);
|
|
return (
|
|
<div
|
|
className="bg-white h-screen overflow-y-auto"
|
|
style={{ width: '700px' }}
|
|
>
|
|
<h3 className="p-5 text-2xl">
|
|
{title}{' '}
|
|
{subTitle && (
|
|
<span className="text-sm color-gray-dark">{subTitle}</span>
|
|
)}
|
|
</h3>
|
|
|
|
{site.platform === 'ios' ? (
|
|
<div className={'p-5'}>
|
|
<InstallMobileDocs site={site} />
|
|
</div>
|
|
) : (
|
|
<div>
|
|
<Tabs
|
|
className="px-5"
|
|
tabs={TABS}
|
|
active={activeTab}
|
|
onClick={this.setActiveTab}
|
|
/>
|
|
<div className="p-5">{this.renderActiveTab()}</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default TrackingCodeModal;
|