woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-06 18:16:38 +08:00
Code Issues Projects Packages Wiki Activity Actions

♻️ Integrate the new TabNavigation component

Browse source
This commit is contained in:
Philipp Stracker 2024-10-28 15:47:53 +01:00
parent 3c31297e10
commit 7ecbd6a1ca
No known key found for this signature in database
3 changed files with 13 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

44
modules/ppcp-settings/resources/js/Components/ReusableComponents/TabNavigation.js
View file

@ -1,43 +1,19 @@
import { TabPanel } from '@wordpress/components'; import { TabPanel } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
const onSelect = ( tabName ) => { const TabNavigation = ( { tabs } ) => {
console.log( 'Selecting tab', tabName );
}; const updatePanelUri = ( tabName ) => {
};
const TabNavigation = () => {
return ( return (
<TabPanel <TabPanel
className="my-tab-panel" className={ `ppcp-r-tabs ${ panel }` }
activeClass="active-tab" onSelect={ updatePanelUri }
onSelect={ onSelect } tabs={ tabs }
tabs={ [
{
name: 'dashboard',
title: __( 'Dashboard', 'woocommerce-paypal-payments' ),
className: 'ppcp-r-tab-dashboard',
},
{
name: 'payment-methods',
title: __(
'Payment Methods',
'woocommerce-paypal-payments'
),
className: 'ppcp-r-tab-payment-methods',
},
{
name: 'settings',
title: __( 'Settings', 'woocommerce-paypal-payments' ),
className: 'ppcp-r-tab-settings',
},
{
name: 'styling',
title: __( 'Styling', 'woocommerce-paypal-payments' ),
className: 'ppcp-r-tab-styling',
},
] }
> >
{ ( tab ) => <p>{ tab.title }</p> } { ( tab ) => {
return tab.component || <>{ tab.title ?? tab.name }</>;
} }
</TabPanel> </TabPanel>
); );
}; };

6
modules/ppcp-settings/resources/js/Components/Screens/Dashboard/Dashboard.js
View file

@ -1,11 +1,7 @@
import TabNavigation from '../../ReusableComponents/TabNavigation'; import TabNavigation from '../../ReusableComponents/TabNavigation';
const Dashboard = () => { const Dashboard = () => {
return ( return <div>Settings Page</div>;
<div>
<TabNavigation />
</div>
);
}; };
export default Dashboard; export default Dashboard;

7
modules/ppcp-settings/resources/js/Components/Screens/Settings.js
View file

@ -1,13 +1,10 @@
import Onboarding from './Onboarding/Onboarding'; import TabNavigation from '../ReusableComponents/TabNavigation';
import { useState } from '@wordpress/element';
import Dashboard from './Dashboard/Dashboard';
import { getSettingsTabs } from './tabs'; import { getSettingsTabs } from './tabs';
const Settings = () => { const Settings = () => {
const [ onboarded, setOnboarded ] = useState( true );
const tabs = getSettingsTabs(); const tabs = getSettingsTabs();
return <>{ onboarded ? <Onboarding /> : <Dashboard /> }</>; return <TabNavigation tabs={ tabs }></TabNavigation>;
}; };
export default Settings; export default Settings;