cx/commerce
4
0
Fork 0
forked from crowetic/commerce
Code Pull Requests Activity

Button forward ref

Browse Source
This commit is contained in:
paco 2020-10-08 15:36:27 -06:00
parent 4deaa5d1aa
commit e1d3ceffc5
No known key found for this signature in database
GPG Key ID: CD243AF4E535B475
3 changed files with 11 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/ui/Button/Button.tsx
View File

@ -1,9 +1,11 @@
import cn from 'classnames' import cn from 'classnames'
import React, { import React, {
forwardRef,
ButtonHTMLAttributes, ButtonHTMLAttributes,
JSXElementConstructor, JSXElementConstructor,
useRef, useRef,
} from 'react' } from 'react'
import mergeRefs from 'react-merge-refs'
import { useButton } from 'react-aria' import { useButton } from 'react-aria'
import s from './Button.module.css' import s from './Button.module.css'
@ -16,7 +18,7 @@ interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
Component?: string | JSXElementConstructor<any> Component?: string | JSXElementConstructor<any>
} }
const Button: React.FC<Props> = (props) => { const Button: React.FC<Props> = forwardRef((props, buttonRef) => {
const { const {
className, className,
variant = 'filled', variant = 'filled',
@ -54,7 +56,7 @@ const Button: React.FC<Props> = (props) => {
href={href} href={href}
aria-pressed={active} aria-pressed={active}
data-variant={variant} data-variant={variant}
ref={ref} ref={mergeRefs([ref, buttonRef])}
{...rest} {...rest}
{...buttonProps} {...buttonProps}
data-active={isPressed ? '' : undefined} data-active={isPressed ? '' : undefined}
@ -62,6 +64,6 @@ const Button: React.FC<Props> = (props) => {
{children} {children}
</Component> </Component>
) )
} })
export default Button export default Button

1
package.json
View File

@ -30,6 +30,7 @@
"react": "^16.13.1", "react": "^16.13.1",
"react-aria": "^3.0.0", "react-aria": "^3.0.0",
"react-dom": "^16.13.1", "react-dom": "^16.13.1",
"react-merge-refs": "^1.1.0",
"react-ticker": "^1.2.2", "react-ticker": "^1.2.2",
"swr": "^0.3.3" "swr": "^0.3.3"
}, },

5
yarn.lock
View File

@ -6698,6 +6698,11 @@ react-is@16.13.1, react-is@^16.8.1:
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
react-merge-refs@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/react-merge-refs/-/react-merge-refs-1.1.0.tgz#73d88b892c6c68cbb7a66e0800faa374f4c38b06"
integrity sha512-alTKsjEL0dKH/ru1Iyn7vliS2QRcBp9zZPGoWxUOvRGWPUYgjo+V01is7p04It6KhgrzhJGnIj9GgX8W4bZoCQ==
react-refresh@0.8.3: react-refresh@0.8.3:
version "0.8.3" version "0.8.3"
resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f" resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"