woocommerce/plugins/woocommerce-blocks/assets/js/base/components/button/index.tsx

71 lines
1.4 KiB
TypeScript
Raw Normal View History

/**
* External dependencies
*/
import { Button as WPButton } from 'wordpress-components';
import type { Button as WPButtonType } from '@wordpress/components';
import classNames from 'classnames';
Update Express Payments Loading UI (https://github.com/woocommerce/woocommerce-blocks/pull/4228) * Separate button spinner to separate component for reuse * Use block checkout spinner in loading mask * Block pointer events within loading mask * Give the useRef within useShallowEqual a default value This prevents the potential of having an undefined value returned. * State setter and dispatch are stable These do not need to be used as dependencies. * Prevent re-renders of children when using loading mask. This prevents children being rerendered and losing state. Loading styles are applied instead using a classname, but leaving the divs in place. * Use memoization to to prevent excessive express payment rerenders * Wrap express payment in loading mask * Show loading state after submission * remove eslint exclusion * Move spinner to base components so it's available outside of the checkout package * Avoid extra is-loading classname * Update snaps/fix tests * Remove memorization of payment method content due to stale data * Express payment error handling * Split up payment method context to make it more manageable * Add blocking logic to cart * Update snap * Restore useRef * Fix missing function removed by accident * Fix setActivePaymentMethod and started status (so saved methods still allow express to be initialized) * Loading Mask Todo * Remove boolean shallow equals * Missing dep * Memoize typo * Document changes in useStoreEvents * Replace expressPaymentMethodActive * setExpressPaymentError deprecation * Only change status if an error is passed * Track disabled state via useCheckoutSubmit * useCallback on error message functions * Fix mocks in test
2021-06-16 12:44:40 +00:00
import Spinner from '@woocommerce/base-components/spinner';
/**
* Internal dependencies
*/
import './style.scss';
export interface ButtonProps
extends Omit< WPButtonType.ButtonProps, 'variant' | 'href' > {
/**
* Show spinner
*
* @default false
*/
showSpinner?: boolean | undefined;
/**
* Button variant
*/
variant?: 'text' | 'contained' | 'outlined';
/**
* The URL the button should link to.
*/
href?: string | undefined;
}
export interface AnchorProps extends Omit< ButtonProps, 'href' > {
/**
* Button href
*/
href?: string | undefined;
}
/**
* Component that visually renders a button but semantically might be `<button>` or `<a>` depending
* on the props.
*/
const Button = ( {
className,
showSpinner = false,
children,
variant = 'contained',
...props
}: ButtonProps ): JSX.Element => {
const buttonClassName = classNames(
'wc-block-components-button',
'wp-element-button',
className,
variant,
{
'wc-block-components-button--loading': showSpinner,
}
);
return (
<WPButton className={ buttonClassName } { ...props }>
Update Express Payments Loading UI (https://github.com/woocommerce/woocommerce-blocks/pull/4228) * Separate button spinner to separate component for reuse * Use block checkout spinner in loading mask * Block pointer events within loading mask * Give the useRef within useShallowEqual a default value This prevents the potential of having an undefined value returned. * State setter and dispatch are stable These do not need to be used as dependencies. * Prevent re-renders of children when using loading mask. This prevents children being rerendered and losing state. Loading styles are applied instead using a classname, but leaving the divs in place. * Use memoization to to prevent excessive express payment rerenders * Wrap express payment in loading mask * Show loading state after submission * remove eslint exclusion * Move spinner to base components so it's available outside of the checkout package * Avoid extra is-loading classname * Update snaps/fix tests * Remove memorization of payment method content due to stale data * Express payment error handling * Split up payment method context to make it more manageable * Add blocking logic to cart * Update snap * Restore useRef * Fix missing function removed by accident * Fix setActivePaymentMethod and started status (so saved methods still allow express to be initialized) * Loading Mask Todo * Remove boolean shallow equals * Missing dep * Memoize typo * Document changes in useStoreEvents * Replace expressPaymentMethodActive * setExpressPaymentError deprecation * Only change status if an error is passed * Track disabled state via useCheckoutSubmit * useCallback on error message functions * Fix mocks in test
2021-06-16 12:44:40 +00:00
{ showSpinner && <Spinner /> }
<span className="wc-block-components-button__text">
{ children }
</span>
</WPButton>
);
};
export default Button;