forked from crowetic/commerce
Add link component, make Button be isomorphic with react-aria
This commit is contained in:
parent
1912813c24
commit
4deaa5d1aa
@ -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>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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
|
||||||
|
11
components/ui/Link/Link.tsx
Normal file
11
components/ui/Link/Link.tsx
Normal 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
|
1
components/ui/Link/index.ts
Normal file
1
components/ui/Link/index.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
export { default } from './Link'
|
Loading…
x
Reference in New Issue
Block a user