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

♻️ 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 { __ } from '@wordpress/i18n';
const onSelect = ( tabName ) => {
console.log( 'Selecting tab', tabName );
};
const TabNavigation = ( { tabs } ) => {
const updatePanelUri = ( tabName ) => {
};
const TabNavigation = () => {
return (
<TabPanel
className="my-tab-panel"
activeClass="active-tab"
onSelect={ onSelect }
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',
},
] }
className={ `ppcp-r-tabs ${ panel }` }
onSelect={ updatePanelUri }
tabs={ tabs }
>
{ ( tab ) => <p>{ tab.title }</p> }
{ ( tab ) => {
return tab.component || <>{ tab.title ?? tab.name }</>;
} }
</TabPanel>
);
};

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

@ -1,11 +1,7 @@
import TabNavigation from '../../ReusableComponents/TabNavigation';
const Dashboard = () => {
return (
<div>
<TabNavigation />
</div>
);
return <div>Settings Page</div>;
};
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 { useState } from '@wordpress/element';
import Dashboard from './Dashboard/Dashboard';
import TabNavigation from '../ReusableComponents/TabNavigation';
import { getSettingsTabs } from './tabs';
const Settings = () => {
const [ onboarded, setOnboarded ] = useState( true );
const tabs = getSettingsTabs();
return <>{ onboarded ? <Onboarding /> : <Dashboard /> }</>;
return <TabNavigation tabs={ tabs }></TabNavigation>;
};
export default Settings;