@fc-components/menu - npm Package Compare versions

Comparing version 1.2.7 to 1.2.8

package.json

 {
   "name": "@fc-components/menu",
-  "version": "1.2.7",
+  "version": "1.2.8",
   "description": "The Menu component used for flashcat.",
@@ -5,0 +5,0 @@ "main": "src/index.tsx",

src/Float/index.less

@@ -8,3 +8,3 @@ .fc-menu-icon {
   font-size: 16px;
-  color: rgba(255, 255, 255, 0.48);
+  color: var(--icon-color);
   .iconpark-icon {
@@ -26,3 +26,3 @@ width: 16px;
     border-radius: 0 0 19px 0;
-    background: @primary-color;
+    background: var(--background-color);
   }
@@ -49,3 +49,3 @@ position: absolute;
     border-radius: 0 19px 0 0;
-    background: @primary-color;
+    background: var(--background-color);
   }
@@ -73,3 +73,3 @@ position: absolute;
     left: 0px;
-    background-color: @primary-color;
+    background-color: var(--background-color);
     z-index: 1;
@@ -83,3 +83,3 @@ }
     left: 8px;
-    background-color: @primary-color;
+    background-color: var(--background-color);
     &::before {
@@ -101,3 +101,3 @@ display: block;
     z-index: 1;
-    background-color: @primary-color;
+    background-color: var(--background-color);
     &::before {
@@ -122,8 +122,8 @@ display: block;
   width: 152px;
-  background-color: @primary-color;
-  color: #e6e6e8;
+  background-color: var(--background-color);
+  color: var(--text-color);;
   cursor: pointer;
   border-radius: 0 0 8px 8px;
   &-divider {
-    border-bottom: 1px solid rgba(148, 112, 255, 0.4);
+    border-bottom: 1px solid var(--divider-color);
     margin: 8px 16px;
@@ -150,3 +150,3 @@ }
       .float-fc-menu-sub-title-icon {
-        color: #fff;
+        color: var(--icon-selected-color);
       }
@@ -170,3 +170,3 @@ svg.selected {
       .float-fc-menu-sub-title:hover {
-        color: #fff;
+        color: var(--text-selected-color);
       }
@@ -177,3 +177,3 @@ }
       .float-fc-menu-sub-title {
-        color: @primary-color;
+        color: var(--text-hover-color);
       }
@@ -185,3 +185,3 @@ height: auto;
       .float-fc-menu-sub-title-icon {
-        color: @primary-color;
+        color: var(--text-hover-color);
       }
@@ -191,3 +191,3 @@ }
       &:hover {
-        color: @primary-color;
+        color: var(--text-hover-color);
       }
@@ -219,3 +219,3 @@ font-size: 14px;
     &:hover {
-      background: fade(@primary-color, 80%);
+      background: rgba(108,83,177,0.8);
     }
@@ -228,3 +228,3 @@ width: 24px;
     color: #fff;
-    background: fade(@primary-color, 30%);
+    background: rgba(108,83,177,0.3);
     display: flex;
@@ -258,3 +258,3 @@ align-items: center;
     border-radius: 8px 8px 0 0;
-    background: @primary-color;
+    background: var(--background-color);
     padding-top: 5px;
@@ -365,7 +365,7 @@ }
         &-active {
-          color: @primary-color;
+          color: var(--text-selected-color);
         }
         &-selected {
-          color: #fff;
-          background-color: @primary-color;
+          color: var(--text-selected-color);
+          background-color: var(--background-color);
         }
@@ -394,3 +394,3 @@ }
   padding: 16px 24px;
-  background: @primary-color;
+  background: var(--background-color);
   display: flex;
@@ -464,6 +464,6 @@ justify-content: space-between;
       &.active {
-        background: @primary-color;
-        color: #fff;
+        background: var(--background-color);
+        color: var(--text-selected-color);
         .quick-menu-icon {
-          color: #fff;
+          color: var(--icon-selected-color)
         }
@@ -491,3 +491,4 @@ }
       }
-      color: fade(@primary-color, 48);
+      color: var(--text-color);
+      // todo color: fade(var(--primary-color), 48);
 
@@ -494,0 +495,0 @@ margin-right: 8px;

src/Float/index.tsx

@@ -27,2 +27,11 @@ import React, { useState, useEffect, createContext } from 'react';
   customCommonMenu?: React.ReactElement;
+  theme?: {
+    backgroundColor?: string;
+    textColor?: string;
+    textHoverColor?: string;
+    textSelectedColor?: string;
+    iconSelectedColor?: string;
+    dividerColor?: string;
+    iconColor?: string;
+  };
 }
@@ -51,2 +60,3 @@
     customCommonMenu,
+    theme,
   } = props;
@@ -114,3 +124,13 @@ const [, setMenuActive] = useMenuActive();
       })}
-      style={{ width: collapsed === '0' ? fullModeWidth : undefined }}
+      style={{
+        width: collapsed === '0' ? fullModeWidth : undefined,
+        // @ts-ignore
+        '--background-color': theme?.backgroundColor || '#6C53B1',
+        '--text-color': theme?.textColor || '#e6e6e8',
+        '--text-hover-color': theme?.textHoverColor || '#6C53B1',
+        '--text-selected-color': theme?.textSelectedColor || '#fff',
+        '--icon-selected-color': theme?.iconSelectedColor || '#fff',
+        '--icon-color': theme?.iconColor || 'rgba(255,255,255,.48)',
+        '--divider-color': theme?.dividerColor || 'rgba(148, 112, 255, 0.4)',
+      }}
       onMouseLeave={() => {
@@ -117,0 +137,0 @@ setMenuActive([]);

src/Float/quickstart.tsx

@@ -208,2 +208,3 @@ import React, { useState, useEffect, useRef } from 'react';
       onCancel={() => onVisibleChange()}
+      getContainer={false}
     >
@@ -210,0 +211,0 @@ <Input

src/Float/subMenu.tsx

@@ -1,2 +0,2 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, useRef } from 'react';
 import { Tooltip, Menu } from 'antd';
@@ -18,2 +18,3 @@ import { SubMenuProps } from './types';
   const { item, collapsed, isQuickStart, onItemClick } = props;
+  const ref = useRef<HTMLDivElement>(null);
   const [menuSelect] = useMenuSelect();
@@ -56,2 +57,3 @@ const [menuActive, setMenuActive] = useMenuActive();
     <div
+      ref={ref}
       className={classNames({
@@ -84,2 +86,3 @@ 'float-fc-menu-sub': true,
           placement='right'
+          getPopupContainer={() => ref.current || document.body}
           overlayClassName={`float-fc-menu-sub-tooltip ${
@@ -86,0 +89,0 @@ children.length === 1 ? 'float-fc-menu-sub-tooltip-single-child' : ''

No alert changes

Improved metrics

Total package byte prevSize

52649

2.27%

Lines of code

1023

2.4%

No dependency changes