|
7 | 7 | */ |
8 | 8 | import cn from 'classnames' |
9 | 9 | import * as m from 'motion/react-m' |
10 | | -import { forwardRef, type MouseEventHandler, type ReactNode } from 'react' |
| 10 | +import { type MouseEventHandler, type ReactNode } from 'react' |
11 | 11 |
|
12 | 12 | import { Spinner } from '~/ui/lib/Spinner' |
13 | 13 | import { Tooltip } from '~/ui/lib/Tooltip' |
@@ -55,80 +55,82 @@ const noop: MouseEventHandler<HTMLButtonElement> = (e) => { |
55 | 55 | e.preventDefault() |
56 | 56 | } |
57 | 57 |
|
58 | | -export interface ButtonProps |
59 | | - extends React.ComponentPropsWithRef<'button'>, |
60 | | - ButtonStyleProps { |
| 58 | +export interface ButtonProps extends React.ComponentProps<'button'>, ButtonStyleProps { |
61 | 59 | innerClassName?: string |
62 | 60 | loading?: boolean |
63 | 61 | disabledReason?: ReactNode |
64 | 62 | } |
65 | 63 |
|
66 | | -// Use `forwardRef` so the ref points to the DOM element (not the React Component) |
67 | | -// so it can be focused using the DOM API (eg. this.buttonRef.current.focus()) |
68 | | -export const Button = forwardRef<HTMLButtonElement, ButtonProps>( |
69 | | - ( |
70 | | - { |
71 | | - type = 'button', |
72 | | - children, |
73 | | - size, |
74 | | - variant, |
75 | | - className, |
76 | | - loading, |
77 | | - innerClassName, |
78 | | - disabled, |
79 | | - onClick, |
80 | | - disabledReason, |
81 | | - // needs to be a spread because we sometimes get passed arbitrary <button> |
82 | | - // props by the parent |
83 | | - ...rest |
84 | | - }, |
85 | | - ref |
86 | | - ) => { |
87 | | - const isDisabled = disabled || loading |
88 | | - return ( |
89 | | - <Wrap |
90 | | - when={isDisabled && disabledReason} |
91 | | - with={<Tooltip content={disabledReason} ref={ref} placement="bottom" />} |
| 64 | +// The ref situation is a little confusing. We need a ref prop for the button |
| 65 | +// (and to pass it through to <button> so it actually does something) so we can |
| 66 | +// focus to the button programmatically. There is an example in TlsCertsField |
| 67 | +// in the silo create form: when there are no certs added, the validation error |
| 68 | +// on submit focuses and scrolls to the add TLS cert button. All of that is |
| 69 | +// normal. The confusing part is that when the button is disabled and wrapped |
| 70 | +// in a tooltip, the tooltip component wants to add its own ref to the button |
| 71 | +// so it can figure out where to place the tooltip. In order to make both refs |
| 72 | +// work at the same time (so that, for example, in theory, a button could be |
| 73 | +// simultaneously disabled with a tooltip *and* be focused programmatically [I |
| 74 | +// tested this]), we merge the two refs inside Tooltip, using child.props.ref to |
| 75 | +// get the original ref on the button. |
| 76 | + |
| 77 | +export const Button = ({ |
| 78 | + type = 'button', |
| 79 | + children, |
| 80 | + size, |
| 81 | + variant, |
| 82 | + className, |
| 83 | + loading, |
| 84 | + innerClassName, |
| 85 | + disabled, |
| 86 | + onClick, |
| 87 | + disabledReason, |
| 88 | + // needs to be a spread because we sometimes get passed arbitrary <button> |
| 89 | + // props by the parent |
| 90 | + ...rest |
| 91 | +}: ButtonProps) => { |
| 92 | + const isDisabled = disabled || loading |
| 93 | + return ( |
| 94 | + <Wrap |
| 95 | + when={isDisabled && disabledReason} |
| 96 | + with={<Tooltip content={disabledReason} placement="bottom" />} |
| 97 | + > |
| 98 | + <button |
| 99 | + className={cn( |
| 100 | + buttonStyle({ size, variant }), |
| 101 | + className, |
| 102 | + { 'visually-disabled': isDisabled }, |
| 103 | + 'overflow-hidden' |
| 104 | + )} |
| 105 | + /* eslint-disable-next-line react/button-has-type */ |
| 106 | + type={type} |
| 107 | + onMouseDown={isDisabled ? noop : undefined} |
| 108 | + onClick={isDisabled ? noop : onClick} |
| 109 | + aria-disabled={isDisabled} |
| 110 | + /* this includes the ref. that's important. see big comment above */ |
| 111 | + {...rest} |
92 | 112 | > |
93 | | - <button |
94 | | - className={cn( |
95 | | - buttonStyle({ size, variant }), |
96 | | - className, |
97 | | - { |
98 | | - 'visually-disabled': isDisabled, |
99 | | - }, |
100 | | - 'overflow-hidden' |
101 | | - )} |
102 | | - ref={ref} |
103 | | - /* eslint-disable-next-line react/button-has-type */ |
104 | | - type={type} |
105 | | - onMouseDown={isDisabled ? noop : undefined} |
106 | | - onClick={isDisabled ? noop : onClick} |
107 | | - aria-disabled={isDisabled} |
108 | | - {...rest} |
109 | | - > |
110 | | - {loading && ( |
111 | | - <m.span |
112 | | - animate={{ opacity: 1, y: '-50%', x: '-50%' }} |
113 | | - initial={{ opacity: 0, y: 'calc(-50% - 25px)', x: '-50%' }} |
114 | | - transition={{ type: 'spring', duration: 0.3, bounce: 0 }} |
115 | | - className="absolute left-1/2 top-1/2" |
116 | | - > |
117 | | - <Spinner variant={variant} /> |
118 | | - </m.span> |
119 | | - )} |
| 113 | + {loading && ( |
120 | 114 | <m.span |
121 | | - className={cn('flex items-center', innerClassName)} |
122 | | - animate={{ |
123 | | - opacity: loading ? 0 : 1, |
124 | | - y: loading ? 25 : 0, |
125 | | - }} |
| 115 | + animate={{ opacity: 1, y: '-50%', x: '-50%' }} |
| 116 | + initial={{ opacity: 0, y: 'calc(-50% - 25px)', x: '-50%' }} |
126 | 117 | transition={{ type: 'spring', duration: 0.3, bounce: 0 }} |
| 118 | + className="absolute left-1/2 top-1/2" |
127 | 119 | > |
128 | | - {children} |
| 120 | + <Spinner variant={variant} /> |
129 | 121 | </m.span> |
130 | | - </button> |
131 | | - </Wrap> |
132 | | - ) |
133 | | - } |
134 | | -) |
| 122 | + )} |
| 123 | + <m.span |
| 124 | + className={cn('flex items-center', innerClassName)} |
| 125 | + animate={{ |
| 126 | + opacity: loading ? 0 : 1, |
| 127 | + y: loading ? 25 : 0, |
| 128 | + }} |
| 129 | + transition={{ type: 'spring', duration: 0.3, bounce: 0 }} |
| 130 | + > |
| 131 | + {children} |
| 132 | + </m.span> |
| 133 | + </button> |
| 134 | + </Wrap> |
| 135 | + ) |
| 136 | +} |
0 commit comments