Merge pull request #47 from aboveyunhai/fix-hover-disabled-style

Fix hover disabled style
aboveyunhai · Apr 17, 2023 · 19cea7a · 19cea7a
2 parents 49d1bc7 + 14c5adc
commit 19cea7a
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 20 deletions.
diff --git a/example/index.tsx b/example/index.tsx
@@ -10,6 +10,7 @@ import {
   Flex,
   Heading,
   HStack,
+  Link,
   StackDivider,
   Switch,
   ThemeConfig,
@@ -58,14 +59,19 @@ const App = () => {
       divider={<StackDivider />}
     >
       <Heading>Chakra-Dayzed-Datepicker</Heading>
-      <GitHubButton
-        href="https://github.com/aboveyunhai/chakra-dayzed-datepicker"
-        data-size="large"
-        data-show-count="true"
-        aria-label="Star aboveyunhai/chakra-dayzed-datepicker on GitHub"
-      >
-        Star
-      </GitHubButton>
+      <Flex gridGap={5} height="28px">
+        <GitHubButton
+          href="https://github.com/aboveyunhai/chakra-dayzed-datepicker"
+          data-size="large"
+          data-show-count="true"
+          aria-label="Star aboveyunhai/chakra-dayzed-datepicker on GitHub"
+        >
+          Star
+        </GitHubButton>
+        <Link href="https://github.com/aboveyunhai/chakra-dayzed-datepicker/blob/main/example/index.tsx">
+          Source code of all examples
+        </Link>
+      </Flex>
       <Section title="Single:">
         <Flex alignItems={'center'}>
           <Box marginRight={'1rem'}>closeOnSelect:</Box>

diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
     "dist",
     "src"
   ],
-  "homepage": "https://github.com/aboveyunhai/chakra-dayzed-datepicker",
+  "homepage": "https://aboveyunhai.github.io/chakra-dayzed-datepicker",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/aboveyunhai/chakra-dayzed-datepicker.git"

diff --git a/src/components/dayOfMonth.tsx b/src/components/dayOfMonth.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@chakra-ui/react';
+import { Button, ButtonProps } from '@chakra-ui/react';
 import { DateObj, RenderProps } from 'dayzed';
 import React, { useMemo } from 'react';
 import { DatepickerProps, DayOfMonthBtnStyleProps } from '../utils/commonTypes';
@@ -10,6 +10,10 @@ interface DayOfMonthProps extends DatepickerProps {
   onMouseEnter?: React.MouseEventHandler<HTMLButtonElement> | undefined;
 }
 
+type HoverStyle =
+  | (ButtonProps['_hover'] & { _disabled: ButtonProps['_disabled'] })
+  | undefined;
+
 const halfGap = 0.125; //default Chakra-gap-space-1 is 0.25rem
 
 export const DayOfMonth: React.FC<DayOfMonthProps> = ({
@@ -32,11 +36,12 @@ export const DayOfMonth: React.FC<DayOfMonthProps> = ({
     () => ({
       defaultBtnProps: {
         size: 'sm',
-        variant: 'outline',
-        background: 'transparent',
-        borderColor: 'transparent',
+        variant: 'ghost',
+        // background: 'transparent',
+        // borderColor: 'transparent',
         // this intends to fill the visual gap from Grid to improve the UX
         // so the button active area is actually larger than what it's seen
+        ...defaultBtnProps,
         _after: {
           content: "''",
           position: 'absolute',
@@ -46,14 +51,17 @@ export const DayOfMonth: React.FC<DayOfMonthProps> = ({
           right: `-${halfGap}rem`,
           borderWidth: `${halfGap}rem`,
           borderColor: 'transparent',
+          ...defaultBtnProps?._after,
+        },
+        _hover: {
+          bg: 'purple.400',
+          ...defaultBtnProps?._hover,
+          _disabled: {
+            bg: 'gray.100',
+            // temperory hack to persist the typescript checking
+            ...(defaultBtnProps?._hover as HoverStyle)?._disabled,
+          },
         },
-        ...defaultBtnProps,
-        _hover: selectable
-          ? {
-              bg: 'purple.400',
-              ...defaultBtnProps?._hover,
-            }
-          : undefined,
       },
       isInRangeBtnProps: {
         background: 'purple.200',