🐛 fix: contextMenu prefix was wrong fixed

ant-design · Jan 2, 2024 · c8cb4a3 · c8cb4a3
1 parent e06c38a
commit c8cb4a3
Show file tree

Hide file tree

Showing 4 changed files with 122 additions and 120 deletions.
diff --git a/src/ContextMenu/MenuItem/style.ts b/src/ContextMenu/MenuItem/style.ts
@@ -1,72 +1,71 @@
-import { createStyles } from 'antd-style';
+import { createStyles } from '../../theme';
 
-export const useStyles = createStyles(
-  ({ css, cx, token }, prefixCls = 'studio-context-menu-item') => {
-    const selected = css`
-      font-weight: bold;
-      color: ${token.colorPrimaryText};
-      background: ${token.colorPrimaryBg};
-      &:hover {
-        color: ${token.colorPrimaryTextHover};
-        background: ${token.colorPrimaryBgHover};
-      }
-    `;
+export const useStyles = createStyles(({ css, cx, token, prefixCls: antCls }) => {
+  const prefixCls = `${antCls}-${token.editorPrefix}-context-menu-item`;
+  const selected = css`
+    font-weight: bold;
+    color: ${token.colorPrimaryText};
+    background: ${token.colorPrimaryBg};
+    &:hover {
+      color: ${token.colorPrimaryTextHover};
+      background: ${token.colorPrimaryBgHover};
+    }
+  `;
 
-    return {
-      item: cx(
-        `${prefixCls}-item`,
+  return {
+    item: cx(
+      `${prefixCls}-item`,
 
-        css`
-          all: unset;
+      css`
+        all: unset;
 
-          user-select: none;
-          scroll-margin: 50px;
+        user-select: none;
+        scroll-margin: 50px;
 
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
 
-          box-sizing: inherit;
-          width: 100%;
-          padding: 12px 10px;
+        box-sizing: inherit;
+        width: 100%;
+        padding: 12px 10px;
 
-          font-family: ${token.fontFamily};
-          font-weight: normal;
-          line-height: 1;
-          color: ${token.colorText};
+        font-family: ${token.fontFamily};
+        font-weight: normal;
+        line-height: 1;
+        color: ${token.colorText};
 
-          background: transparent;
-          border-radius: 5px;
-          &:hover {
-            background: ${token.colorFillTertiary};
-          }
-        `,
-      ),
-      selected: cx(`${prefixCls}-item-selected`, selected),
-      active: cx(
-        `${prefixCls}-item-active`,
-        css`
+        background: transparent;
+        border-radius: 5px;
+        &:hover {
           background: ${token.colorFillTertiary};
-        `,
-      ),
-      arrow: css`
-        color: ${token.colorTextTertiary};
+        }
+      `,
+    ),
+    selected: cx(`${prefixCls}-item-selected`, selected),
+    active: cx(
+      `${prefixCls}-item-active`,
+      css`
+        background: ${token.colorFillTertiary};
       `,
+    ),
+    arrow: css`
+      color: ${token.colorTextTertiary};
+    `,
 
-      kbd: css`
-        display: flex;
-        align-items: center;
-        justify-content: center;
+    kbd: css`
+      display: flex;
+      align-items: center;
+      justify-content: center;
 
-        width: 18px;
-        height: 20px;
+      width: 18px;
+      height: 20px;
 
-        font-family: ${token.fontFamily};
-        font-size: 14px;
-        color: ${token.colorTextQuaternary};
+      font-family: ${token.fontFamily};
+      font-size: 14px;
+      color: ${token.colorTextQuaternary};
 
-        border-radius: 2px;
-      `,
-    };
-  },
-);
+      border-radius: 2px;
+    `,
+  };
+});
diff --git a/src/ContextMenu/index.tsx b/src/ContextMenu/index.tsx
@@ -21,10 +21,11 @@ import {
   useRole,
   useTypeahead,
 } from '@floating-ui/react';
-import { ConfigProvider, Divider } from 'antd';
+import { Divider } from 'antd';
 import { forwardRef, HTMLProps, useCallback, useEffect, useRef, useState } from 'react';
 
 import { cx } from 'antd-style';
+import { ConfigProvider } from '..';
 import MenuItem from './MenuItem';
 import { useStyles } from './style';
 import { GeneralItemType, MenuItemType } from './types';

diff --git a/src/ContextMenu/style.ts b/src/ContextMenu/style.ts
@@ -1,62 +1,65 @@
 import { createStyles } from '../theme';
 
-export const useStyles = createStyles(({ css, cx, token }, prefixCls: string) => ({
-  container: cx(
-    prefixCls,
-    css`
-      all: unset;
-      user-select: none;
-      scrollbar-width: none;
-
-      overflow-y: auto;
-      overscroll-behavior: contain;
-
-      box-sizing: border-box;
-      width: 200px;
-      padding: 5px;
-
-      font-size: ${token.fontSize}px;
-
-      background: ${token.colorBgContainer};
-      border: 1px solid ${token.colorBorder};
-      border-radius: 8px;
-      outline: 0;
-      box-shadow: ${token.boxShadowSecondary};
-
-      &::-webkit-scrollbar {
-        display: none;
-      }
-    `,
-  ),
-  button: cx(
-    `${prefixCls}-button`,
-    css`
-      all: unset;
-
-      cursor: default;
-      user-select: none;
-
-      padding: 12px 10px;
-
-      font-size: ${token.fontSize}px;
-      line-height: 1;
-      color: ${token.colorText};
-
-      background: ${token.colorBgContainer};
-      border: 1px solid ${token.colorBorder};
-      border-radius: ${token.borderRadius}px;
-
-      -webkit-tap-highlight-color: transparent;
-
-      &:hover {
-        background: ${token.colorPrimaryBg};
-        border-color: transparent;
-      }
-
-      &:focus-visible {
-        border-color: ${token.colorPrimary};
-        box-shadow: 0 0 0 2px ${token.colorPrimaryBg};
-      }
-    `,
-  ),
-}));
+export const useStyles = createStyles(({ css, cx, token, prefixCls: antCls }) => {
+  const prefixCls = `${antCls}-${token.editorPrefix}-context-menu-item`;
+  return {
+    container: cx(
+      prefixCls,
+      css`
+        all: unset;
+        user-select: none;
+        scrollbar-width: none;
+
+        overflow-y: auto;
+        overscroll-behavior: contain;
+
+        box-sizing: border-box;
+        width: 200px;
+        padding: 5px;
+
+        font-size: ${token.fontSize}px;
+
+        background: ${token.colorBgContainer};
+        border: 1px solid ${token.colorBorder};
+        border-radius: 8px;
+        outline: 0;
+        box-shadow: ${token.boxShadowSecondary};
+
+        &::-webkit-scrollbar {
+          display: none;
+        }
+      `,
+    ),
+    button: cx(
+      `${prefixCls}-button`,
+      css`
+        all: unset;
+
+        cursor: default;
+        user-select: none;
+
+        padding: 12px 10px;
+
+        font-size: ${token.fontSize}px;
+        line-height: 1;
+        color: ${token.colorText};
+
+        background: ${token.colorBgContainer};
+        border: 1px solid ${token.colorBorder};
+        border-radius: ${token.borderRadius}px;
+
+        -webkit-tap-highlight-color: transparent;
+
+        &:hover {
+          background: ${token.colorPrimaryBg};
+          border-color: transparent;
+        }
+
+        &:focus-visible {
+          border-color: ${token.colorPrimary};
+          box-shadow: 0 0 0 2px ${token.colorPrimaryBg};
+        }
+      `,
+    ),
+  };
+});
diff --git a/src/InteractContainer/index.tsx b/src/InteractContainer/index.tsx
@@ -6,7 +6,6 @@ import type { ContextCanvasProps } from './type';
 
 const ContextCanvas: FC<ContextCanvasProps> = (props) => {
   useStyle();
-
   useContextCanvas(props);
   return <>{props.children}</>;
 };