fix: ripple effect

skynexui · Dec 22, 2021 · 3cbeae3 · 3cbeae3 · vercel · Dec 22, 2021
1 parent d5b8ed9
commit 3cbeae3
Show file tree

Hide file tree

Showing 5 changed files with 105 additions and 43 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -19,6 +19,7 @@ module.exports = {
   },
   plugins: ['react', 'react-hooks', '@typescript-eslint', 'prettier'],
   rules: {
+    'import/extensions': ['off'],
     'import/no-unresolved': 'error',
     'import/prefer-default-export': 'off',
     'react/jsx-filename-extension': [1, { extensions: ['.tsx'] }],

diff --git a/lib/components/box/box-base.tsx b/lib/components/box/box-base.tsx
@@ -13,6 +13,7 @@ interface BoxProps {
   styleSheet?: StyleSheet;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   ref: Ref<any>;
+  onClick: unknown;
 }
 
 export const BoxBase = React.forwardRef(

diff --git a/lib/components/button/button.tsx b/lib/components/button/button.tsx
@@ -1,11 +1,11 @@
 /* eslint-disable react/button-has-type */
 import React, { ChangeEventHandler } from 'react';
-import Ripples from 'react-ripples';
 import { StyleSheet } from '@lib/core/stylesheet/stylesheet';
 import { BoxBase } from '@lib/components/box/box-base';
 import { TypographyVariants } from '@lib/core/typography/typography';
 import { Text } from '@lib/components/text/text';
 import { theme } from '@lib/core/theme/theme';
+import { useRipples } from './ripples/ripples';
 
 // TODO: Move it to the theme
 const buttonVariantToStyle = {
@@ -102,6 +102,7 @@ const buttonSizes = {
 };
 
 interface ButtonProps {
+  fullWidth?: boolean;
   variant?: 'primary' | 'secondary' | 'tertiary';
   buttonColors?: ButtonColorValues;
   colorVariant?:
@@ -118,15 +119,18 @@ interface ButtonProps {
   disabled?: boolean;
   styleSheet?: StyleSheet;
   label: string;
-  onClick?: ChangeEventHandler<HTMLInputElement>;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
 }
 export function Button({
   label,
   styleSheet,
   colorVariant,
   buttonColors,
+  fullWidth,
+  onClick,
   ...props
 }: ButtonProps): JSX.Element {
+  const { onClickRipple, rippleStyle } = useRipples();
   const borderRadius = rounded[props.rounded];
   const { textVariant, ...buttonSize } = buttonSizes[props.size];
   const colorSet = (() => {
@@ -165,51 +169,57 @@ export function Button({
     buttonStyles[buttonVariantToStyle[props.variant]](colorSet);
 
   return (
-    <Ripples during={1000} color="rgba(255,255,255,0.2)">
-      <BoxBase
-        as="button"
+    <BoxBase
+      as="button"
+      styleSheet={{
+        ...buttonSize,
+        ...buttonStyle,
+        width: fullWidth ? '100%' : 'initial',
+        borderRadius,
+        cursor: 'pointer',
+        outline: '0',
+        transition: '.2s ease-in-out',
+        border: '1px solid transparent',
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        position: 'relative',
+        ...styleSheet,
+        disabled: {
+          ...styleSheet.disabled,
+          cursor: 'not-allowed',
+          opacity: '.65',
+        },
+        hover: {
+          ...buttonStyle.hover,
+          ...styleSheet.hover,
+        },
+        focus: {
+          ...buttonStyle.focus,
+          ...styleSheet.focus,
+        },
+      }}
+      onClick={(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        onClick(event);
+        onClickRipple(event);
+      }}
+      {...props}
+    >
+      <Text
+        variant={textVariant as TypographyVariants}
         styleSheet={{
-          ...buttonSize,
-          ...buttonStyle,
-          transition: '.2s ease-in-out',
-          borderRadius,
-          display: 'inline-flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          outline: '0',
-          border: '1px solid transparent',
-          cursor: 'pointer',
-          ...styleSheet,
-          disabled: {
-            ...styleSheet.disabled,
-            cursor: 'not-allowed',
-            opacity: '.65',
-          },
-          hover: {
-            ...buttonStyle.hover,
-            ...styleSheet.hover,
-          },
-          focus: {
-            ...buttonStyle.focus,
-            ...styleSheet.focus,
-          },
+          color: 'inherit',
         }}
-        {...props}
       >
-        <Text
-          variant={textVariant as TypographyVariants}
-          styleSheet={{
-            color: 'inherit',
-          }}
-        >
-          {label}
-        </Text>
-      </BoxBase>
-    </Ripples>
+        {label}
+      </Text>
+      <s style={rippleStyle as unknown} />
+    </BoxBase>
   );
 }
 
 Button.defaultProps = {
+  fullWidth: false,
   variant: 'primary',
   colorVariant: 'primary',
   rounded: 'sm',
@@ -218,7 +228,5 @@ Button.defaultProps = {
   buttonColors: undefined,
   disabled: false,
   styleSheet: { hover: {}, focus: {}, disabled: {} },
-  onClick: (): void => {
-    return undefined;
-  },
+  onClick: (): void => undefined,
 };
diff --git a/lib/components/button/ripples/ripples.tsx b/lib/components/button/ripples/ripples.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+
+export const useRipples = () => {
+  const during = 1000;
+  const color = 'rgba(255, 255, 255, 0.5)';
+  const [rippleStyle, setRippleStyle] = React.useState({
+    backgroundColor: color,
+    position: 'absolute',
+    borderRadius: '50%',
+    opacity: 0,
+    width: 35,
+    height: 35,
+    transform: 'translate(-50%, -50%)',
+    pointerEvents: 'none',
+    top: 0,
+    left: 0,
+    transition: 'initial',
+  });
+
+  const onClick = (ev: React.MouseEvent<HTMLButtonElement>) => {
+    ev.stopPropagation();
+    const { pageX, pageY, currentTarget } = ev;
+    const rect = currentTarget.getBoundingClientRect();
+    const left = pageX - (rect.left + window.scrollX);
+    const top = pageY - (rect.top + window.scrollY);
+    const size = Math.max(rect.width, rect.height);
+
+    setRippleStyle({
+      ...rippleStyle,
+      left,
+      top,
+      opacity: 1,
+      transform: 'translate(-50%, -50%)',
+      transition: 'initial',
+    });
+
+    setTimeout(() => {
+      setRippleStyle({
+        ...rippleStyle,
+        opacity: 0,
+        transform: `scale(${size / 9})`,
+        transition: `all ${during}ms`,
+      });
+    }, 50);
+  };
+
+  return {
+    rippleStyle,
+    onClickRipple: onClick,
+  };
+};
diff --git a/lib/core/stylesheet/stylesheet.ts b/lib/core/stylesheet/stylesheet.ts
@@ -4,6 +4,7 @@ type ResponsiveProperty<Type> = Partial<Record<Breakpoints, Type>>;
 
 export interface StyleSheet {
   srOnly?: boolean;
+  position?: ResponsiveProperty<string> | string;
   transition?: ResponsiveProperty<string> | string;
   fontFamily?: ResponsiveProperty<string> | string;
   fontSize?: ResponsiveProperty<string | number> | string;