feat: allow to enable/disable touch ripple

konstaui · Aug 27, 2021 · 0529a6b · 0529a6b
1 parent b058c59
commit 0529a6b
Show file tree

Hide file tree

Showing 19 changed files with 78 additions and 14 deletions.
diff --git a/TODO.md b/TODO.md
@@ -6,4 +6,3 @@
 
 - React
   - DTS
-  - enable/disable touch ripple
diff --git a/src/react/components/App.jsx b/src/react/components/App.jsx
@@ -9,6 +9,7 @@ const App = forwardRef((props, ref) => {
 
     theme = 'material',
     dark = true,
+    touchRipple = true,
 
     // Children
     children,
@@ -30,7 +31,7 @@ const App = forwardRef((props, ref) => {
   };
 
   return (
-    <TailwindMobileProvider theme={theme} dark={dark}>
+    <TailwindMobileProvider theme={theme} dark={dark} touchRipple={touchRipple}>
       <Component
         ref={elRef}
         className={cls(`twm-${theme}`, className)}

diff --git a/src/react/components/Button.jsx b/src/react/components/Button.jsx
@@ -32,6 +32,8 @@ const Button = forwardRef((props, ref) => {
     segmentedStrong,
     segmentedActive,
 
+    touchRipple = true,
+
     // Children
     children,
 
@@ -58,7 +60,7 @@ const Button = forwardRef((props, ref) => {
   const themeClasses = useThemeClasses({ ios, material });
   const dark = useDarkClasses();
 
-  useTouchRipple(rippleElRef, theme === 'material');
+  useTouchRipple(rippleElRef, theme === 'material' && touchRipple);
 
   const size = large ? 'large' : small ? 'small' : 'medium';
   let style = outline

diff --git a/src/react/components/Fab.jsx b/src/react/components/Fab.jsx
@@ -17,6 +17,8 @@ const Fab = forwardRef((props, ref) => {
     ios,
     material,
 
+    touchRipple = true,
+
     // Children
     children,
 
@@ -39,7 +41,7 @@ const Fab = forwardRef((props, ref) => {
   const theme = useTheme({ ios, material });
   const themeClasses = useThemeClasses({ ios, material });
 
-  useTouchRipple(rippleElRef, theme === 'material');
+  useTouchRipple(rippleElRef, theme === 'material' && touchRipple);
 
   const colors = {
     bg: 'bg-primary',

diff --git a/src/react/components/Icon.jsx b/src/react/components/Icon.jsx
@@ -49,7 +49,7 @@ const Icon = forwardRef((props, ref) => {
     <Component ref={elRef} className={c.base} {...attrs}>
       {theme === 'ios' ? ios : material}
       {typeof badge !== 'undefined' && badge !== null && (
-        <Badge sm className={c.badge} colors={badgeColors}>
+        <Badge small className={c.badge} colors={badgeColors}>
           {badge}
         </Badge>
       )}

diff --git a/src/react/components/Link.jsx b/src/react/components/Link.jsx
@@ -21,6 +21,7 @@ const Link = forwardRef((props, ref) => {
     tabbar,
     tabbarActive,
 
+    touchRipple = true,
     ios,
     material,
 
@@ -50,7 +51,7 @@ const Link = forwardRef((props, ref) => {
   const dark = useDarkClasses();
 
   const needsTouchRipple =
-    theme === 'material' && (toolbar || tabbar || navbar);
+    theme === 'material' && (toolbar || tabbar || navbar) && touchRipple;
 
   useTouchRipple(rippleElRef, needsTouchRipple);
 

diff --git a/src/react/components/ListButton.jsx b/src/react/components/ListButton.jsx
@@ -27,6 +27,8 @@ const ListButton = forwardRef((props, ref) => {
     ios,
     material,
 
+    touchRipple = true,
+
     // Children
     children,
 
@@ -50,7 +52,7 @@ const ListButton = forwardRef((props, ref) => {
   const theme = useTheme({ ios, material });
   const themeClasses = useThemeClasses({ ios, material });
 
-  useTouchRipple(rippleElRef, theme === 'material');
+  useTouchRipple(rippleElRef, theme === 'material' && touchRipple);
 
   const colors = {
     text: 'text-primary',

diff --git a/src/react/components/ListItem.jsx b/src/react/components/ListItem.jsx
@@ -55,6 +55,8 @@ const ListItem = forwardRef((props, ref) => {
     ios,
     material,
 
+    touchRipple = true,
+
     // Children
     children,
 
@@ -95,7 +97,8 @@ const ListItem = forwardRef((props, ref) => {
   const isLink = !!href || href === '' || menuListItem || link;
   const isLabel = !!label;
 
-  const needsTouchRipple = theme === 'material' && (isLabel || isLink);
+  const needsTouchRipple =
+    theme === 'material' && (isLabel || isLink) && touchRipple;
 
   useTouchRipple(rippleElRef, needsTouchRipple);
 

diff --git a/src/react/components/Stepper.jsx b/src/react/components/Stepper.jsx
@@ -35,6 +35,8 @@ const Stepper = forwardRef((props, ref) => {
     ios,
     material,
 
+    touchRipple = true,
+
     children,
     ...rest
   } = props;
@@ -52,8 +54,8 @@ const Stepper = forwardRef((props, ref) => {
   const theme = useTheme({ ios, material });
   const themeClasses = useThemeClasses({ ios, material });
 
-  useTouchRipple(buttonLeftElRef, theme === 'material');
-  useTouchRipple(buttonRightElRef, theme === 'material');
+  useTouchRipple(buttonLeftElRef, theme === 'material' && touchRipple);
+  useTouchRipple(buttonRightElRef, theme === 'material' && touchRipple);
 
   const colors = {
     text: 'text-primary',

diff --git a/src/react/shared/TailwindMobileContext.js b/src/react/shared/TailwindMobileContext.js
@@ -1,5 +1,9 @@
 import React from 'react';
 
-const TailwindMobileContext = React.createContext({ theme: 'ios', dark: true });
+const TailwindMobileContext = React.createContext({
+  theme: 'ios',
+  dark: true,
+  touchRipple: true,
+});
 
 export { TailwindMobileContext };
diff --git a/src/react/shared/TailwindMobileProvider.jsx b/src/react/shared/TailwindMobileProvider.jsx
@@ -2,10 +2,10 @@ import React from 'react';
 import { TailwindMobileContext } from './TailwindMobileContext.js';
 
 const TailwindMobileProvider = (props) => {
-  const { theme, dark, children } = props;
+  const { theme, dark, touchRipple, children } = props;
 
   return (
-    <TailwindMobileContext.Provider value={{ theme, dark }}>
+    <TailwindMobileContext.Provider value={{ theme, dark, touchRipple }}>
       {children}
     </TailwindMobileContext.Provider>
   );

diff --git a/src/react/shared/use-touch-ripple.js b/src/react/shared/use-touch-ripple.js
@@ -1,7 +1,10 @@
-import { useRef, useEffect } from 'react';
+import { useRef, useEffect, useContext } from 'react';
+import { TailwindMobileContext } from './TailwindMobileContext.js';
 import { TouchRipple } from './touch-ripple-class.js';
 
 export const useTouchRipple = (elRef, needsTouchRipple) => {
+  const context = useContext(TailwindMobileContext);
+
   const ripple = useRef(null);
   const removeRipple = () => {
     if (ripple.current) ripple.current.remove();
@@ -19,6 +22,8 @@ export const useTouchRipple = (elRef, needsTouchRipple) => {
   };
 
   const attachEvents = () => {
+    if (!context.touchRipple) return;
+
     const el = elRef.current;
     el.addEventListener('pointerdown', onPointerDown);
     el.addEventListener('pointermove', onPointerMove);

diff --git a/src/types/App.d.ts b/src/types/App.d.ts
@@ -17,4 +17,10 @@ interface Props {
    * @default false
    * */
   dark?: boolean;
+  /**
+   * Enables touch ripple effect in Material theme. Allows to globally disable touch ripple for all components
+   *
+   * @default true
+   */
+  touchRipple?: boolean;
 }
diff --git a/src/types/Button.d.ts b/src/types/Button.d.ts
@@ -110,4 +110,11 @@ interface Props {
    * @default false
    */
   segmentedActive?: boolean;
+
+  /**
+   * Enables touch ripple effect in Material theme
+   *
+   * @default true
+   */
+  touchRipple?: boolean;
 }
diff --git a/src/types/Fab.d.ts b/src/types/Fab.d.ts
@@ -46,4 +46,10 @@ interface Props {
    * Fab's icon
    */
   icon?: React.ReactNode;
+  /**
+   * Enables touch ripple effect in Material theme
+   *
+   * @default true
+   */
+  touchRipple?: boolean;
 }
diff --git a/src/types/Link.d.ts b/src/types/Link.d.ts
@@ -56,4 +56,10 @@ interface Props {
    * Click handler
    */
   onClick?: (e: any) => void;
+  /**
+   * Enables touch ripple effect in Material theme
+   *
+   * @default true
+   */
+  touchRipple?: boolean;
 }
diff --git a/src/types/ListButton.d.ts b/src/types/ListButton.d.ts
@@ -62,4 +62,10 @@ interface Props {
    * Object with additional props (attributes) to pass to the Link/Button
    */
   linkProps?: any;
+  /**
+   * Enables touch ripple effect in Material theme
+   *
+   * @default true
+   */
+  touchRipple?: boolean;
 }
diff --git a/src/types/ListItem.d.ts b/src/types/ListItem.d.ts
@@ -159,4 +159,10 @@ interface Props {
    * List item link's `target` attribute
    */
   target?: string;
+  /**
+   * Enables touch ripple effect in Material theme
+   *
+   * @default true
+   */
+  touchRipple?: boolean;
 }
diff --git a/src/types/Stepper.d.ts b/src/types/Stepper.d.ts
@@ -121,6 +121,12 @@ interface Props {
    * @default false
    */
   outline?: boolean;
+  /**
+   * Enables touch ripple effect in Material theme
+   *
+   * @default true
+   */
+  touchRipple?: boolean;
 
   /**
    * Stepper input `change` handler