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

🚚 Rename UI hook to make it more generic

Browse source
This commit is contained in:
Philipp Stracker 2025-02-13 16:22:40 +01:00
parent e8379f09e8
commit 4ecd07b453
No known key found for this signature in database
2 changed files with 12 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

4
modules/ppcp-settings/resources/js/Components/ReusableComponents/AccordionSection.js
View file

@ -2,7 +2,7 @@ import { Icon } from '@wordpress/components';
import { chevronDown, chevronUp } from '@wordpress/icons'; import { chevronDown, chevronUp } from '@wordpress/icons';
import classNames from 'classnames'; import classNames from 'classnames';
import { useAccordionState } from '../../hooks/useAccordionState'; import { useToggleState } from '../../hooks/useToggleState';
import { import {
Content, Content,
Description, Description,
@ -21,7 +21,7 @@ const Accordion = ( {
children = null, children = null,
className = '', className = '',
} ) => { } ) => {
const { isOpen, toggleOpen } = useAccordionState( { id, initiallyOpen } ); const { isOpen, toggleOpen } = useToggleState( { id, initiallyOpen } );
const wrapperClasses = classNames( 'ppcp-r-accordion', className, { const wrapperClasses = classNames( 'ppcp-r-accordion', className, {
'ppcp--is-open': isOpen, 'ppcp--is-open': isOpen,
} ); } );

11
modules/ppcp-settings/resources/js/hooks/useAccordionState.js → modules/ppcp-settings/resources/js/hooks/useToggleState.js
View file

@ -11,7 +11,16 @@ const determineInitialState = ( id, initiallyOpen ) => {
return checkIfCurrentTab( id ); return checkIfCurrentTab( id );
}; };
export function useAccordionState( { id = '', initiallyOpen = null } ) { /**
* Allows managing a toggle-able component, such as an accordion or a modal dialog.
*
* @param {Object} props
* @param {string} props.id - Optional, if provided, the toggle can be opened via the URL.
* @param {null|boolean} props.initiallyOpen - Optional. If provided, it defines the initial open state.
* If omitted, the initial open state is determined by using the "id" logic (inspecting the URL).
* @return {{isOpen: unknown, toggleOpen: (function(*): boolean)}} Hook object.
*/
export function useToggleState( { id = '', initiallyOpen = null } ) {
const [ isOpen, setIsOpen ] = useState( const [ isOpen, setIsOpen ] = useState(
determineInitialState( id, initiallyOpen ) determineInitialState( id, initiallyOpen )
); );