woocommerce/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/Toggle/Toggle.js

41 lines
848 B
JavaScript
Raw Normal View History

/**
* External dependencies
*/
import { Button } from '@wordpress/components';
import ChevronUpIcon from 'gridicons/dist/chevron-up';
import ChevronDownIcon from 'gridicons/dist/chevron-down';
import { useState } from '@wordpress/element';
/**
* Internal dependencies
*/
import './Toggle.scss';
export const Toggle = ( { children, heading, onToggle } ) => {
const [ isShow, setIsShow ] = useState( false );
const onClick = () => {
onToggle( isShow );
setIsShow( ! isShow );
};
return (
<div className="toggle">
<Button
isTertiary
onClick={ onClick }
aria-expanded={ isShow }
frameBorder={ 0 }
className="toggle-button"
>
{ heading }
{ isShow ? (
<ChevronUpIcon size={ 18 } />
) : (
<ChevronDownIcon size={ 18 } />
) }
</Button>
{ isShow ? children : null }
</div>
);
};