woocommerce/plugins/woocommerce-blocks/assets/js/blocks/featured-items/constrained-resizable.tsx

47 lines
1.0 KiB
TypeScript
Raw Normal View History

/**
* External dependencies
*/
import classnames from 'classnames';
import { useState } from 'react';
import { ResizableBox } from '@wordpress/components';
/**
* Internal dependencies
*/
import { useThrottle } from '../../utils/useThrottle';
type ResizeCallback = Exclude< ResizableBox.Props[ 'onResize' ], undefined >;
export const ConstrainedResizable = ( {
className = '',
onResize,
...props
}: ResizableBox.Props ): JSX.Element => {
const [ isResizing, setIsResizing ] = useState( false );
const classNames = classnames( className, {
'is-resizing': isResizing,
} );
const throttledResize = useThrottle< ResizeCallback >(
( event, direction, elt, _delta ) => {
if ( ! isResizing ) setIsResizing( true );
onResize?.( event, direction, elt, _delta );
},
50,
{ leading: true }
);
return (
<ResizableBox
className={ classNames }
enable={ { bottom: true } }
onResize={ throttledResize }
onResizeStop={ ( ...args ) => {
onResize?.( ...args );
setIsResizing( false );
} }
{ ...props }
/>
);
};