Add correct isDisabled prop

Author: Zeko369

example/pages/index.tsx

@@ -44,6 +44,11 @@ const Home: NextPage = () => {
         label="This is just a button link"
         other={{ onClick: () => alert('click') }}
       />
+      <Row
+        label="This is disabled"
+        href="/other"
+        other={{ isDisabled: true }}
+      />
 
       <Heading size="md">{`IsExternal prop => [o -> /other, g -> https://google.com]`}</Heading>
       <Row label="/o1" href="/other" other={{ isExternal: true }} />

src/LinkingComponent.tsx

@@ -15,10 +15,15 @@ export interface LinkingComponentProps extends Omit<LinkProps, 'href'> {
   href?: Url;
   justLink?: boolean;
   isExternal?: boolean;
+  isDisabled?: boolean;
 }
 
 export const LinkingComponent: React.FC<LinkingComponentProps> = (props) => {
-  const { as, href, children, justLink, isExternal } = props;
+  const { as, href, children, justLink, isExternal, isDisabled } = props;
+
+  if (isDisabled) {
+    return <>{children}</>;
+  }
 
   if (href === undefined || (!as && external(href)) || isExternal) {
     const props = {

src/index.tsx

@@ -40,6 +40,7 @@ export const Link: React.FC<LinkProps> = (props) => {
     children,
     linkProps,
     justLink,
+    isDisabled,
     noUnderline,
     ...rest
   } = props;
@@ -51,22 +52,26 @@ export const Link: React.FC<LinkProps> = (props) => {
       as={nextAs}
       justLink={justLink}
       isExternal={(rest as any).isExternal}
+      isDisabled={isDisabled}
       {...linkProps}
     >
       {justLink ? (
         children
       ) : (
         <ChakraLink
-          as={asHelper(href)}
-          href={href}
-          isExternal={(rest as any).isExternal || (!nextAs && external(href))}
           {...(noUnderline && {
+            _hover: { textDecoration: 'none !important' }
+          })}
+          isExternal={(rest as any).isExternal || (!nextAs && external(href))}
+          {...(isDisabled && {
+            cursor: 'not-allowed',
+            opacity: '0.4',
             _hover: {
-              textDecoration: 'none !important'
+              textDecoration: 'none'
             }
           })}
-          {...rest}
           aria-current={isActive ? 'page' : undefined}
+          {...rest}
         >
           {children}
         </ChakraLink>
@@ -76,19 +81,29 @@ export const Link: React.FC<LinkProps> = (props) => {
 };
 
 export const LinkButton: React.FC<LinkButtonProps> = (props) => {
-  const { nextAs, href, children, linkProps, isExternal, ...rest } = props;
+  const {
+    nextAs,
+    href,
+    children,
+    isDisabled,
+    linkProps,
+    isExternal,
+    ...rest
+  } = props;
   const isActive = useIsActive(href);
 
   return (
     <LinkingComponent
       isExternal={isExternal}
       href={href}
       as={nextAs}
+      isDisabled={isDisabled}
       {...linkProps}
     >
       <Button
         as={asHelper(href)}
         aria-current={isActive ? 'page' : undefined}
+        isDisabled={isDisabled}
         {...rest}
       >
         {children}
@@ -98,20 +113,30 @@ export const LinkButton: React.FC<LinkButtonProps> = (props) => {
 };
 
 export const LinkIconButton: React.FC<LinkButtonIconProps> = (props) => {
-  const { nextAs, href, children, linkProps, isExternal, ...rest } = props;
+  const {
+    nextAs,
+    href,
+    children,
+    isDisabled,
+    linkProps,
+    isExternal,
+    ...rest
+  } = props;
   const isActive = useIsActive(href);
 
   return (
     <LinkingComponent
       isExternal={isExternal}
       href={href}
       as={nextAs}
+      isDisabled={isDisabled}
       {...linkProps}
     >
       <IconButton
         as={asHelper(href)}
         // ADD DISABLED
         aria-current={isActive ? 'page' : undefined}
+        isDisabled={isDisabled}
         {...rest}
       >
         {children}

src/types.ts

@@ -14,13 +14,15 @@ export type BaseProps = {
 
 type JustLink = { justLink: true };
 type ChakraSpecific = {
-  isDisabled?: boolean;
   justLink?: false;
   noUnderline?: boolean;
 };
 
 type Props<T> = BaseProps &
-  ((ChakraSpecific & T) | JustLink) & { noUnderline?: boolean };
+  ((ChakraSpecific & T) | JustLink) & {
+    noUnderline?: boolean;
+    isDisabled?: boolean;
+  };
 
 export type LinkProps = Props<ChakraLinkProps>;
 export type LinkButtonProps = ChakraButtonProps & ChakraSpecific & BaseProps;