@heymarco/next-auth/dist/components/ButtonWithBusy.js

A complete authentication solution for web applications.

'use client';
// react:
import { 
// react:
default as React, } from 'react';
// reusable-ui core:
import { 
// react helper hooks:
useMergeRefs, } from '@reusable-ui/core'; // a set of reusable-ui packages which are responsible for building any component
// internals:
import { 
// states:
useSignInState, } from './states/signInState.js';
const ButtonWithBusy = (props) => {
    // states:
    const { 
    // states:
    isBusy, } = useSignInState();
    // rest props:
    const { 
    // appearances:
    iconBusy = 'busy', 
    // behaviors:
    busyType, 
    // components:
    buttonComponent, ...restButtonIconProps } = props;
    // fn props:
    const isBusyType = !busyType ? isBusy : (isBusy === busyType);
    const icon = buttonComponent?.props?.icon;
    // refs:
    const mergedElmRef = useMergeRefs(
    // preserves the original `elmRef` from `buttonComponent`:
    buttonComponent.props.elmRef, 
    // preserves the original `elmRef` from `props`:
    props.elmRef);
    const mergedOuterRef = useMergeRefs(
    // preserves the original `outerRef` from `buttonComponent`:
    buttonComponent.props.outerRef, 
    // preserves the original `outerRef` from `props`:
    props.outerRef);
    // jsx:
    /* <Button> or <ButtonIcon> */
    return React.cloneElement(buttonComponent, 
    // props:
    {
        // other props:
        ...restButtonIconProps,
        ...buttonComponent.props, // overwrites restButtonIconProps (if any conflics)
        // refs:
        elmRef: mergedElmRef,
        outerRef: mergedOuterRef,
        // appearances:
        icon: !icon ? undefined : (isBusyType ? iconBusy : icon),
    });
};
export { ButtonWithBusy, ButtonWithBusy as default, };