antd#ButtonProps TypeScript Examples

ButtonRenderTest = (props: ButtonProps & { render: React.ReactNode, text: string }) => {
    const [renderTestComponent, setRenderTestComponent] = useState(false);
    return (
        <>
            <Button {...props} onClick={() => setRenderTestComponent(true)}>{props.text}</Button>
            {renderTestComponent === true && props.render}
        </>
    )
}

export function ValueInspectorButton({
    icon,
    onClick,
    children,
    disabled = false,
    style,
    title,
    innerRef: refProp,
}: ValueInspectorButtonProps): JSX.Element {
    const props = {
        type: 'link' as const,
        icon,
        onClick,
        className: 'funnel-inspect-button',
        disabled,
        style,
        title,
        children: <span className="funnel-inspect-label">{children}</span>,
    }
    if (refProp) {
        const InnerComponent: ForwardRefRenderFunction<HTMLElement | null, ButtonProps> = (_, ref) => (
            <Button ref={ref} {...props} />
        )
        const RefComponent = React.forwardRef(InnerComponent)
        return <RefComponent ref={refProp} />
    } else {
        return <Button {...props} />
    }
}

function calcShape(
  inputShape: IconBtnShapeType = 'circle'
): ButtonProps['shape'] {
  if (inputShape === 'circle') {
    return 'circle';
  }

  return 'default';
}

Button: React.FC<CustomButtonProps> = (props) => {
    const { type, secondary, onClick, eventName: propEventName, eventProperties = {}, ...restProps } = props
    const { getTrackingWrappedCallback, getEventName } = useTracking()

    const eventName = propEventName ? propEventName : getEventName(TrackingEventType.Click)
    const componentProperties = { ...eventProperties }

    if (restProps.children && typeof restProps.children === 'string') {
        componentProperties['components'] = { value: restProps.children }
    }

    const onClickCallback = eventName ? getTrackingWrappedCallback(eventName, componentProperties, onClick) : onClick

    if (!SKIP_BUTTON_TYPES_FOR_DEFAULT.includes(type)) {
        return <DefaultButton {...restProps} type={type as ButtonProps['type']} onClick={onClickCallback}/>
    }

    let buttonStyles
    if (BUTTON_TYPE_STYLES[type]) {
        buttonStyles = BUTTON_TYPE_STYLES[type]
    } else if (type === 'sberDefaultGradient') {
        buttonStyles = buttonDefaultGradientCss(secondary)
    } else {
        buttonStyles = secondary ? buttonSecondaryCss(colors[type]) : buttonCss(colors[type])
    }

    return <DefaultButton css={buttonStyles} {...restProps} onClick={onClickCallback}/>
}

WalletModalButton: FC<ButtonProps> = ({
    children = 'Select Wallet',
    type = 'primary',
    size = 'large',
    htmlType = 'button',
    onClick,
    ...props
}) => {
    const { setVisible } = useWalletModal();

    const handleClick: MouseEventHandler<HTMLButtonElement> = useCallback(
        (event) => {
            if (onClick) onClick(event);
            if (!event.defaultPrevented) setVisible(true);
        },
        [onClick, setVisible]
    );

    return (
        <Button onClick={handleClick} type={type} size={size} htmlType={htmlType} {...props}>
            {children}
        </Button>
    );
}

WalletConnectButton: FC<ButtonProps> = ({
    type = 'primary',
    size = 'large',
    htmlType = 'button',
    children,
    disabled,
    onClick,
    ...props
}) => {
    const { wallet, connect, connecting, connected } = useWallet();

    const handleClick: MouseEventHandler<HTMLButtonElement> = useCallback(
        (event) => {
            if (onClick) onClick(event);
            // eslint-disable-next-line @typescript-eslint/no-empty-function
            if (!event.defaultPrevented)
                connect().catch(() => {
                    // Silently catch because any errors are caught by the context `onError` handler
                });
        },
        [onClick, connect]
    );

    const content = useMemo(() => {
        if (children) return children;
        if (connecting) return 'Connecting ...';
        if (connected) return 'Connected';
        if (wallet) return 'Connect';
        return 'Connect Wallet';
    }, [children, connecting, connected, wallet]);

    return (
        <Button
            onClick={handleClick}
            disabled={disabled || !wallet || connecting || connected}
            icon={<WalletIcon wallet={wallet} />}
            type={type}
            size={size}
            htmlType={htmlType}
            {...props}
        >
            {content}
        </Button>
    );
}

WalletDisconnectButton: FC<ButtonProps> = ({
    type = 'primary',
    size = 'large',
    htmlType = 'button',
    children,
    disabled,
    onClick,
    ...props
}) => {
    const { wallet, disconnect, disconnecting } = useWallet();

    const handleClick: MouseEventHandler<HTMLButtonElement> = useCallback(
        (event) => {
            if (onClick) onClick(event);
            // eslint-disable-next-line @typescript-eslint/no-empty-function
            if (!event.defaultPrevented)
                disconnect().catch(() => {
                    // Silently catch because any errors are caught by the context `onError` handler
                });
        },
        [onClick, disconnect]
    );

    const content = useMemo(() => {
        if (children) return children;
        if (disconnecting) return 'Disconnecting ...';
        if (wallet) return 'Disconnect';
        return 'Disconnect Wallet';
    }, [children, disconnecting, wallet]);

    return (
        <Button
            onClick={handleClick}
            disabled={disabled || !wallet}
            icon={<WalletIcon wallet={wallet} />}
            type={type}
            size={size}
            htmlType={htmlType}
            {...props}
        >
            {content}
        </Button>
    );
}

WalletMultiButton: FC<ButtonProps> = ({
    type = 'primary',
    size = 'large',
    htmlType = 'button',
    children,
    ...props
}) => {
    const { publicKey, wallet, disconnect } = useWallet();
    const { setVisible } = useWalletModal();

    const base58 = useMemo(() => publicKey?.toBase58(), [publicKey]);
    const content = useMemo(() => {
        if (children) return children;
        if (!wallet || !base58) return null;
        return base58.slice(0, 4) + '..' + base58.slice(-4);
    }, [children, wallet, base58]);

    if (!wallet) {
        return (
            <WalletModalButton type={type} size={size} htmlType={htmlType} {...props}>
                {children}
            </WalletModalButton>
        );
    }
    if (!base58) {
        return (
            <WalletConnectButton type={type} size={size} htmlType={htmlType} {...props}>
                {children}
            </WalletConnectButton>
        );
    }

    return (
        <Dropdown
            overlay={
                <Menu className="wallet-adapter-multi-button-menu">
                    <Menu.Item className="wallet-adapter-multi-button-menu-item">
                        <Button
                            icon={<WalletIcon wallet={wallet} />}
                            type={type}
                            size={size}
                            htmlType={htmlType}
                            className="wallet-adapter-multi-button-menu-button"
                            block
                            {...props}
                        >
                            {wallet.adapter.name}
                        </Button>
                    </Menu.Item>
                    <Menu.Item
                        onClick={async () => {
                            await navigator.clipboard.writeText(base58);
                        }}
                        icon={<CopyIcon className=".wallet-adapter-multi-button-icon" />}
                        className="wallet-adapter-multi-button-item"
                    >
                        Copy address
                    </Menu.Item>
                    <Menu.Item
                        onClick={() => setTimeout(() => setVisible(true), 100)}
                        icon={<SwitchIcon className=".wallet-adapter-multi-button-icon" />}
                        className="wallet-adapter-multi-button-item"
                    >
                        Change wallet
                    </Menu.Item>
                    <Menu.Item
                        onClick={() => {
                            // eslint-disable-next-line @typescript-eslint/no-empty-function
                            disconnect().catch(() => {
                                // Silently catch because any errors are caught by the context `onError` handler
                            });
                        }}
                        icon={<DisconnectIcon className=".wallet-adapter-multi-button-icon" />}
                        className="wallet-adapter-multi-button-item"
                    >
                        Disconnect
                    </Menu.Item>
                </Menu>
            }
            trigger={['click']}
        >
            <Button icon={<WalletIcon wallet={wallet} />} type={type} size={size} htmlType={htmlType} {...props}>
                {content}
            </Button>
        </Dropdown>
    );
}