4
0
forked from crowetic/commerce

Add link component, make Button be isomorphic with react-aria

This commit is contained in:
paco 2020-10-08 15:34:10 -06:00
parent 1912813c24
commit 4deaa5d1aa
No known key found for this signature in database
GPG Key ID: CD243AF4E535B475
5 changed files with 70 additions and 42 deletions

View File

@ -5,6 +5,7 @@ import { Trash, Cross } from '@components/icon'
import { useUI } from '@components/ui/context' import { useUI } from '@components/ui/context'
import { useCart } from '@lib/bigcommerce/cart' import { useCart } from '@lib/bigcommerce/cart'
import CartItem from '../CartItem' import CartItem from '../CartItem'
import Link from '@components/ui/Link'
const CartSidebarView: FC = () => { const CartSidebarView: FC = () => {
const { data, isEmpty } = useCart() const { data, isEmpty } = useCart()
@ -60,7 +61,9 @@ const CartSidebarView: FC = () => {
</ul> </ul>
</div> </div>
<div className="flex-shrink-0 px-4 border-t border-gray-200 py-5 sm:px-6"> <div className="flex-shrink-0 px-4 border-t border-gray-200 py-5 sm:px-6">
<Button>Proceed to Checkout</Button> <Button href="/checkout" Component={Link}>
Proceed to Checkout
</Button>
</div> </div>
</> </>
)} )}

View File

@ -10,7 +10,7 @@
@apply border-gray-700 shadow-outline; @apply border-gray-700 shadow-outline;
} }
.root:active { .root[data-active] {
@apply bg-gray-700; @apply bg-gray-700;
} }

View File

@ -1,5 +1,10 @@
import cn from 'classnames' import cn from 'classnames'
import React, { ButtonHTMLAttributes } from 'react' import React, {
ButtonHTMLAttributes,
JSXElementConstructor,
useRef,
} from 'react'
import { useButton } from 'react-aria'
import s from './Button.module.css' import s from './Button.module.css'
interface Props extends ButtonHTMLAttributes<HTMLButtonElement> { interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
@ -8,47 +13,55 @@ interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
variant?: 'filled' | 'outlined' | 'flat' | 'none' variant?: 'filled' | 'outlined' | 'flat' | 'none'
active?: boolean active?: boolean
type?: 'submit' | 'reset' | 'button' type?: 'submit' | 'reset' | 'button'
Component?: string | JSXElementConstructor<any>
} }
export default class Button extends React.Component<Props> { const Button: React.FC<Props> = (props) => {
public render() { const {
const { className,
className, variant = 'filled',
variant = 'filled', children,
children, href,
disabled = false, active,
href, onClick,
active, disabled,
...rest Component = 'button',
} = this.props ...rest
} = props
const ref = useRef<typeof Component>(null)
const { buttonProps, isPressed } = useButton(
{
...props,
// @ts-ignore onClick === onPress for our purposes
onPress: onClick,
isDisabled: disabled,
elementType: Component,
},
ref
)
let Component: React.ComponentType< const rootClassName = cn(
React.AnchorHTMLAttributes< s.root,
HTMLAnchorElement | HTMLButtonElement | HTMLDivElement {
> & [s.filled]: variant === 'filled',
React.ClassAttributes<HTMLButtonElement | HTMLAnchorElement> },
> = 'a' as any className
)
// Catch for buttons / span / stc. return (
<Component
const rootClassName = cn( className={rootClassName}
s.root, href={href}
{ aria-pressed={active}
[s.filled]: variant === 'filled', data-variant={variant}
}, ref={ref}
className {...rest}
) {...buttonProps}
data-active={isPressed ? '' : undefined}
return ( >
<Component {children}
className={rootClassName} </Component>
href={href} )
aria-pressed={active}
data-variant={variant}
{...rest}
>
{children}
</Component>
)
}
} }
export default Button

View File

@ -0,0 +1,11 @@
import NextLink, { LinkProps as NextLinkProps } from 'next/link'
const Link: React.FC<NextLinkProps> = ({ href, children, ...props }) => {
return (
<NextLink href={href}>
<a {...props}>{children}</a>
</NextLink>
)
}
export default Link

View File

@ -0,0 +1 @@
export { default } from './Link'