chore: add UnstableContext (#290)

* chore: add UnstableContext * chore: clean up * docs: fix lint * docs: fix lint
react-component · Feb 28, 2025 · b255406 · b255406
1 parent e7c7bfa
commit b255406
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 68 deletions.
diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx
@@ -1,28 +1,29 @@
 import React from 'react';
-import Mentions from '@rc-component/mentions';
+import Mentions, { UnstableContext } from '@rc-component/mentions';
 import '../../assets/index.less';
 
 export default () => (
-  <Mentions
-    rows={3}
-    defaultValue="Hello @ World @"
-    onScroll={e => {
-      console.log(e);
-    }}
-    open
-    options={[
-      {
-        value: 'light',
-        label: 'Light',
-      },
-      {
-        value: 'bamboo',
-        label: 'Bamboo',
-      },
-      {
-        value: 'cat',
-        label: 'Cat',
-      },
-    ]}
-  />
+  <UnstableContext.Provider value={{ open: true }}>
+    <Mentions
+      rows={3}
+      defaultValue="Hello @ World @"
+      onScroll={e => {
+        console.log(e);
+      }}
+      options={[
+        {
+          value: 'light',
+          label: 'Light',
+        },
+        {
+          value: 'bamboo',
+          label: 'Bamboo',
+        },
+        {
+          value: 'cat',
+          label: 'Cat',
+        },
+      ]}
+    />
+  </UnstableContext.Provider>
 );
diff --git a/docs/examples/onScroll.tsx b/docs/examples/onScroll.tsx
@@ -1,18 +1,19 @@
 import React from 'react';
-import Mentions from '@rc-component/mentions';
+import Mentions, { UnstableContext } from '@rc-component/mentions';
 import '../../assets/index.less';
 import './onScroll.less';
 
 export default () => (
-  <Mentions
-    rows={3}
-    defaultValue="Hello @ World @"
-    onPopupScroll={console.log}
-    popupClassName="on-scroll"
-    open
-    options={Array.from({ length: 1000 }).map((_, index) => ({
-      value: `item-${index}`,
-      label: `item-${index}`,
-    }))}
-  />
+  <UnstableContext.Provider value={{ open: true }}>
+    <Mentions
+      rows={3}
+      defaultValue="Hello @ World @"
+      onPopupScroll={console.log}
+      popupClassName="on-scroll"
+      options={Array.from({ length: 1000 }).map((_, index) => ({
+        value: `item-${index}`,
+        label: `item-${index}`,
+      }))}
+    />
+  </UnstableContext.Provider>
 );
diff --git a/src/Mentions.tsx b/src/Mentions.tsx
@@ -7,9 +7,9 @@ import TextArea from '@rc-component/textarea';
 import toArray from '@rc-component/util/lib/Children/toArray';
 import useMergedState from '@rc-component/util/lib/hooks/useMergedState';
 import KeyCode from '@rc-component/util/lib/KeyCode';
-import warning from '@rc-component/util/lib/warning';
 import React, {
   forwardRef,
+  useContext,
   useEffect,
   useImperativeHandle,
   useMemo,
@@ -29,6 +29,7 @@ import {
   replaceWithMeasure,
   setInputSelection,
 } from './util';
+import { UnstableContext } from './context';
 
 type BaseTextareaAttrs = Omit<
   TextAreaProps,
@@ -65,8 +66,6 @@ export interface MentionsProps extends BaseTextareaAttrs {
   onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;
   getPopupContainer?: () => HTMLElement;
   popupClassName?: string;
-  /** @private Testing usage. Do not use in prod. It will not work as your expect. */
-  open?: boolean;
   children?: React.ReactNode;
   options?: DataDrivenOptionProps[];
   classNames?: CommonInputProps['classNames'] & {
@@ -109,7 +108,6 @@ const InternalMentions = forwardRef<MentionsRef, MentionsProps>(
       defaultValue,
       children,
       options,
-      open,
       allowClear,
       silent,
 
@@ -179,6 +177,8 @@ const InternalMentions = forwardRef<MentionsRef, MentionsProps>(
     });
 
     // =============================== Open ===============================
+    const { open } = useContext(UnstableContext);
+
     useEffect(() => {
       // Sync measure div top with textarea for rc-trigger usage
       if (measuring && measureRef.current) {
@@ -200,13 +200,6 @@ const InternalMentions = forwardRef<MentionsRef, MentionsProps>(
       ]
     >(() => {
       if (open) {
-        if (process.env.NODE_ENV !== 'production') {
-          warning(
-            false,
-            '`open` of Mentions is only used for debug usage. Do not use in you production.',
-          );
-        }
-
         for (let i = 0; i < mergedPrefix.length; i += 1) {
           const curPrefix = mergedPrefix[i];
           const index = mergedValue.lastIndexOf(curPrefix);

diff --git a/src/context.tsx b/src/context.tsx
@@ -0,0 +1,8 @@
+import * as React from 'react';
+
+export interface UnstableContextProps {
+  /** Only used for antd site v6 preview usage. */
+  open?: boolean;
+}
+
+export const UnstableContext = React.createContext<UnstableContextProps>({});
diff --git a/src/index.ts b/src/index.ts
@@ -3,4 +3,6 @@ import type { MentionsProps } from './Mentions';
 
 export type { MentionsProps };
 
+export { UnstableContext } from './context';
+
 export default Mentions;
diff --git a/tests/Open.spec.tsx b/tests/Open.spec.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import Mentions from '../src';
+import Mentions, { UnstableContext } from '../src';
 import { expectMeasuring } from './util';
 import { render } from '@testing-library/react';
 
@@ -8,31 +8,29 @@ describe('Mentions.Open', () => {
     const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
 
     const { container } = render(
-      <Mentions
-        open
-        defaultValue="@cat @"
-        options={[
-          {
-            value: 'light',
-            label: 'Light',
-          },
-          {
-            value: 'bamboo',
-            label: 'Bamboo',
-          },
-          {
-            value: 'cat',
-            label: 'Cat',
-          },
-        ]}
-      />,
+      <UnstableContext.Provider value={{ open: true }}>
+        <Mentions
+          defaultValue="@cat @"
+          options={[
+            {
+              value: 'light',
+              label: 'Light',
+            },
+            {
+              value: 'bamboo',
+              label: 'Bamboo',
+            },
+            {
+              value: 'cat',
+              label: 'Cat',
+            },
+          ]}
+        />
+      </UnstableContext.Provider>,
     );
 
     expectMeasuring(container);
 
-    expect(errorSpy).toHaveBeenCalledWith(
-      'Warning: `open` of Mentions is only used for debug usage. Do not use in you production.',
-    );
     errorSpy.mockRestore();
   });
 });
Original file line number	Diff line number	Diff line change
Expand Up		@@ -3,4 +3,6 @@ import type { MentionsProps } from './Mentions';

		export type { MentionsProps };

		export { UnstableContext } from './context';

		export default Mentions;