feat(CustomProvider): add support for disableRipple on `<CustomProvid…

…er>` (#3030) * feat(CustomProvider): add support for disableRipple on `<CustomProvider>` * test(CustomProvider): add tests for disableRipple
rsuite · Jan 19, 2023 · c6bb7ad · c6bb7ad · vercel · Jan 19, 2023
1 parent fc320ec
commit c6bb7ad
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 28 deletions.
diff --git a/docs/pages/components/custom-provider/en-US/index.md b/docs/pages/components/custom-provider/en-US/index.md
@@ -45,10 +45,11 @@ return (
 
 ### `<CustomProvider>`
 
-| Property   | Type`(Default)`                                    | Description                                                                          |
-| ---------- | -------------------------------------------------- | ------------------------------------------------------------------------------------ |
-| formatDate | (date: Date, format?: string) => string            | Return the formatted date string in the given format. The result may vary by locale. |
-| locale     | object`(rsuite/locales/default)`               | Configure Language Pack                                                              |
-| parseDate  | (dateString: string, formatString: string) => Date | Return the date parsed from string using the given format string.                    |
-| rtl        | boolean                                            | Text and other elements go from left to right.                                       |
-| theme      | 'light' &#124; 'dark' &#124; 'high-contrast'       | Supported themes                                                                     |
+| Property      | Type`(Default)`                                    | Description                                                                                             |
+| ------------- | -------------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
+| disableRipple | boolean                                            | If true, the ripple effect is disabled. Affected components include: `Button`, `Nav.Item`, `Pagination` |
+| formatDate    | (date: Date, format?: string) => string            | Return the formatted date string in the given format. The result may vary by locale.                    |
+| locale        | object`(rsuite/locales/default)`                   | Configure Language Pack                                                                                 |
+| parseDate     | (dateString: string, formatString: string) => Date | Return the date parsed from string using the given format string.                                       |
+| rtl           | boolean                                            | Text and other elements go from left to right.                                                          |
+| theme         | 'light' &#124; 'dark' &#124; 'high-contrast'       | Supported themes                                                                                        |
diff --git a/docs/pages/components/custom-provider/zh-CN/index.md b/docs/pages/components/custom-provider/zh-CN/index.md
@@ -45,10 +45,11 @@ return (
 
 ### `<CustomProvider>`
 
-| 属性名称   | 类型`(默认值)`                                     | 描述                                                 |
-| ---------- | -------------------------------------------------- | ---------------------------------------------------- |
-| formatDate | (date: Date, format?: string) => string            | 以给定格式返回格式化的日期字符串，结果可能因地区而异 |
-| locale     | object`(rsuite/locales/default)`               | 语言包配置                                           |
-| parseDate  | (dateString: string, formatString: string) => Date | 使用给定的格式字符串返回从字符串解析的日期           |
-| rtl        | boolean                                            | 可设置文本和其他元素的默认方向是从左到右             |
-| theme      | 'light' &#124; 'dark' &#124; 'high-contrast'       | 支持的主题                                           |
+| 属性名称      | 类型`(默认值)`                                     | 描述                                                                      |
+| ------------- | -------------------------------------------------- | ------------------------------------------------------------------------- |
+| disableRipple | boolean                                            | 禁用组件的涟漪效果，受影响的组件包括：`Button`、`Nav.Item`、 `Pagination` |
+| formatDate    | (date: Date, format?: string) => string            | 以给定格式返回格式化的日期字符串，结果可能因地区而异                      |
+| locale        | object`(rsuite/locales/default)`                   | 语言包配置                                                                |
+| parseDate     | (dateString: string, formatString: string) => Date | 使用给定的格式字符串返回从字符串解析的日期                                |
+| rtl           | boolean                                            | 可设置文本和其他元素的默认方向是从左到右                                  |
+| theme         | 'light' &#124; 'dark' &#124; 'high-contrast'       | 支持的主题                                                                |
diff --git a/src/CustomProvider/CustomProvider.tsx b/src/CustomProvider/CustomProvider.tsx
@@ -46,6 +46,9 @@ export interface CustomValue<T = Locale> {
    * A Map of toast containers
    */
   toasters?: React.MutableRefObject<Map<string, ToastContainerInstance>>;
+
+  /** If true, the ripple effect is disabled. Affected components include: Button, Nav.Item, Pagination. */
+  disableRipple?: boolean;
 }
 
 export interface CustomProviderProps<T = Locale> extends Partial<CustomValue<T>> {
@@ -71,14 +74,15 @@ const CustomProvider = (props: Omit<CustomProviderProps, 'toasters'>) => {
     classPrefix = getClassNamePrefix(),
     theme,
     toastContainer: container,
+    disableRipple,
     ...rest
   } = props;
   const toasters = React.useRef(new Map<string, ToastContainerInstance>());
   const { Portal } = usePortal({ container, waitMount: true });
 
   const value = React.useMemo(
-    () => ({ classPrefix, theme, toasters, ...rest }),
-    [classPrefix, theme, rest]
+    () => ({ classPrefix, theme, toasters, disableRipple, ...rest }),
+    [classPrefix, theme, disableRipple, rest]
   );
 
   useEffect(() => {

diff --git a/src/CustomProvider/test/CustomProviderSpec.tsx b/src/CustomProvider/test/CustomProviderSpec.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { render, screen } from '@testing-library/react';
 import CustomProvider from '../CustomProvider';
 import Pagination from '../../Pagination';
 import Calendar from '../../Calendar';
@@ -7,6 +8,7 @@ import zhCN from '../../locales/zh_CN';
 import ruRU from '../../locales/ru_RU';
 import TreePicker from '../../TreePicker';
 import CheckTreePicker from '../../CheckTreePicker';
+import Button from '../../Button';
 
 describe('CustomProvider', () => {
   it('Should render the correct local language', () => {
@@ -18,7 +20,7 @@ describe('CustomProvider', () => {
       </div>
     );
 
-    assert.equal((node.querySelectorAll('.rs-pagination-btn')[0] as HTMLElement).title, '第一页');
+    expect(node.querySelectorAll('.rs-pagination-btn')[0]).to.have.attribute('title', '第一页');
   });
 
   it('Should render correct placeholder', () => {
@@ -31,8 +33,8 @@ describe('CustomProvider', () => {
       </div>
     );
 
-    assert.equal(node.querySelectorAll('.rs-picker-toggle-placeholder')[0].textContent, '选择');
-    assert.equal(node.querySelectorAll('.rs-picker-toggle-placeholder')[1].textContent, '选择');
+    expect(node.querySelectorAll('.rs-picker-toggle-placeholder')[0]).to.have.text('选择');
+    expect(node.querySelectorAll('.rs-picker-toggle-placeholder')[1]).to.have.text('选择');
   });
 
   it('Should render formatted date', () => {
@@ -59,7 +61,22 @@ describe('CustomProvider', () => {
       </div>
     );
 
-    assert.include(document.body.classList.toString(), 'rs-theme-dark');
+    expect(document.body.classList.contains('rs-theme-dark')).to.be.true;
+
     document.body.classList.remove('rs-theme-dark');
   });
+
+  it('Should be to disable the ripple effect', () => {
+    render(
+      <>
+        <Button data-testid="btn-1">has ripple effect</Button>
+        <CustomProvider disableRipple>
+          <Button data-testid="btn-2">no ripple effect</Button>
+        </CustomProvider>
+      </>
+    );
+
+    expect(screen.getByTestId('btn-1').querySelector('.rs-ripple')).to.exist;
+    expect(screen.getByTestId('btn-2').querySelector('.rs-ripple')).to.not.exist;
+  });
 });
diff --git a/src/Picker/PickerToggleTrigger.tsx b/src/Picker/PickerToggleTrigger.tsx
@@ -1,13 +1,12 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import pick from 'lodash/pick';
 import OverlayTrigger, {
   OverlayTriggerHandle,
   OverlayTriggerProps,
   OverlayTriggerType
 } from '../Overlay/OverlayTrigger';
 import { PositionChildProps } from '../Overlay/Position';
-import { placementPolyfill } from '../utils';
-import { CustomContext } from '../CustomProvider';
+import { placementPolyfill, useCustom } from '../utils';
 import { TypeAttributes, AnimationEventProps } from '../@types/common';
 
 export type { OverlayTriggerHandle, PositionChildProps };
@@ -48,18 +47,18 @@ export const pickTriggerPropKeys = [
 const PickerToggleTrigger = React.forwardRef(
   (props: PickerToggleTriggerProps, ref: React.Ref<any>) => {
     const { pickerProps, speaker, placement, trigger = 'click', ...rest } = props;
-
     const pickerTriggerProps = pick(pickerProps, pickTriggerPropKeys);
 
-    const context = useContext(CustomContext);
+    const { rtl } = useCustom();
+
     return (
       <OverlayTrigger
         {...rest}
         {...pickerTriggerProps}
         disabled={pickerTriggerProps.disabled || pickerTriggerProps.loading}
         ref={ref}
         trigger={trigger}
-        placement={placementPolyfill(placement, context?.rtl)}
+        placement={placementPolyfill(placement, rtl)}
         speaker={speaker}
       />
     );

diff --git a/src/Ripple/Ripple.tsx b/src/Ripple/Ripple.tsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import getOffset from 'dom-lib/getOffset';
 import on from 'dom-lib/on';
 import Transition from '../Animation/Transition';
-import { mergeRefs, useClassNames } from '../utils';
+import { mergeRefs, useClassNames, useCustom } from '../utils';
 import { Offset, WithAsProps } from '../@types/common';
 
 export interface RippleProps extends WithAsProps {
@@ -28,6 +28,7 @@ const getPosition = (target: HTMLElement, event: React.MouseEvent) => {
 };
 
 const Ripple = React.forwardRef((props: RippleProps, ref: React.Ref<HTMLSpanElement>) => {
+  const { disableRipple } = useCustom();
   const { as: Component = 'span', className, classPrefix = 'ripple', onMouseDown, ...rest } = props;
   const { merge, prefix, withClassPrefix } = useClassNames(classPrefix);
   const classes = merge(className, prefix('pond'));
@@ -61,6 +62,10 @@ const Ripple = React.forwardRef((props: RippleProps, ref: React.Ref<HTMLSpanElem
     }
   }, [handleMouseDown]);
 
+  if (disableRipple) {
+    return null;
+  }
+
   return (
     <Component {...rest} className={classes} ref={mergeRefs(triggerRef, ref)}>
       <Transition in={rippling} enteringClassName={prefix('rippling')} onEntered={handleRippled}>

diff --git a/src/utils/useCustom.ts b/src/utils/useCustom.ts
@@ -22,7 +22,8 @@ function useCustom<T = any>(keys?: string | string[], overrideLocale?): CustomVa
     rtl = getDefaultRTL(),
     formatDate,
     parseDate,
-    toasters
+    toasters,
+    disableRipple
   } = useContext(CustomContext);
 
   let componentLocale: T = {
@@ -59,6 +60,7 @@ function useCustom<T = any>(keys?: string | string[], overrideLocale?): CustomVa
     locale: componentLocale,
     rtl,
     toasters,
+    disableRipple,
     formatDate: formatDate || defaultFormatDate,
     parseDate: parseDate || defaultParseDate
   };