63 lines
1.6 KiB
TypeScript
63 lines
1.6 KiB
TypeScript
import React, { useState, useEffect } from 'react'
|
|
import { __ } from '@wordpress/i18n'
|
|
import { FileUploadForm } from './FromFileUpload/FileUploadForm'
|
|
import { ImportForm } from './FromOtherPlugins/ImportForm'
|
|
import { ImportSection } from './shared'
|
|
|
|
type TabType = 'upload' | 'plugins'
|
|
|
|
export const ImportApp: React.FC = () => {
|
|
const [activeTab, setActiveTab] = useState<TabType>('upload')
|
|
|
|
useEffect(() => {
|
|
const urlParams = new URLSearchParams(window.location.search)
|
|
const tabParam = urlParams.get('tab') as TabType
|
|
if (tabParam === 'plugins' || tabParam === 'upload') {
|
|
setActiveTab(tabParam)
|
|
}
|
|
}, [])
|
|
|
|
const handleTabChange = (tab: TabType) => {
|
|
setActiveTab(tab)
|
|
|
|
const url = new URL(window.location.href)
|
|
url.searchParams.set('tab', tab)
|
|
window.history.replaceState({}, '', url)
|
|
}
|
|
|
|
return (
|
|
<div className="narrow" style={{ maxWidth: '800px' }}>
|
|
<h2 className="nav-tab-wrapper" style={{ marginBottom: '20px' }}>
|
|
<a
|
|
className={`nav-tab${activeTab === 'upload' ? ' nav-tab-active' : ''}`}
|
|
href="#"
|
|
onClick={(e) => {
|
|
e.preventDefault()
|
|
handleTabChange('upload')
|
|
}}
|
|
>
|
|
{__('Import Snippets', 'code-snippets')}
|
|
</a>
|
|
<a
|
|
className={`nav-tab${activeTab === 'plugins' ? ' nav-tab-active' : ''}`}
|
|
href="#"
|
|
onClick={(e) => {
|
|
e.preventDefault()
|
|
handleTabChange('plugins')
|
|
}}
|
|
>
|
|
{__('Import from other plugins', 'code-snippets')}
|
|
</a>
|
|
</h2>
|
|
|
|
<ImportSection active={activeTab === 'upload'}>
|
|
<FileUploadForm />
|
|
</ImportSection>
|
|
|
|
<ImportSection active={activeTab === 'plugins'}>
|
|
<ImportForm />
|
|
</ImportSection>
|
|
</div>
|
|
)
|
|
}
|