前端优化

km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/CustomCheckGroup.tsx

@@ -7,18 +7,18 @@ const CheckboxGroup = Checkbox.Group;
 
 interface IVersion {
   firstLine: string[];
-  leftVersion: string[];
+  leftVersions: string[];
 }
 
-const CustomCheckGroup = (props: { kafkaVersion: string[]; onChangeCheckGroup: any }) => {
-  const { kafkaVersion, onChangeCheckGroup } = props;
+const CustomCheckGroup = (props: { kafkaVersions: string[]; onChangeCheckGroup: any }) => {
+  const { kafkaVersions, onChangeCheckGroup } = props;
   const [checkedKafkaVersion, setCheckedKafkaVersion] = React.useState<IVersion>({
     firstLine: [],
-    leftVersion: [],
+    leftVersions: [],
   });
   const [allVersion, setAllVersion] = React.useState<IVersion>({
     firstLine: [],
-    leftVersion: [],
+    leftVersions: [],
   });
 
   const [indeterminate, setIndeterminate] = React.useState(false);
@@ -30,27 +30,27 @@ const CustomCheckGroup = (props: { kafkaVersion: string[]; onChangeCheckGroup: a
     document.addEventListener('click', handleDocumentClick);
     return () => {
       document.removeEventListener('click', handleDocumentClick);
-    }
+    };
   }, []);
 
   const handleDocumentClick = (e: Event) => {
     setShowMore(false);
-  }
+  };
 
   const setCheckAllStauts = (list: string[], otherList: string[]) => {
     onChangeCheckGroup([...list, ...otherList]);
-    setIndeterminate(!!list.length && list.length + otherList.length < kafkaVersion.length);
-    setCheckAll(list.length + otherList.length === kafkaVersion.length);
+    setIndeterminate(!!list.length && list.length + otherList.length < kafkaVersions.length);
+    setCheckAll(list.length + otherList.length === kafkaVersions.length);
   };
 
   const getTwoPanelVersion = () => {
     const width = (document.getElementsByClassName('custom-check-group')[0] as any)?.offsetWidth;
     const checkgroupWidth = width - 100 - 86;
     const num = (checkgroupWidth / 108) | 0;
-    const firstLine = Array.from(kafkaVersion).splice(0, num);
+    const firstLine = Array.from(kafkaVersions).splice(0, num);
     setMoreGroupWidth(num * 108 + 88 + 66);
-    const leftVersion = Array.from(kafkaVersion).splice(num);
-    return { firstLine, leftVersion };
+    const leftVersions = Array.from(kafkaVersions).splice(num);
+    return { firstLine, leftVersions };
   };
 
   const onFirstVersionChange = (list: []) => {
@@ -59,13 +59,13 @@ const CustomCheckGroup = (props: { kafkaVersion: string[]; onChangeCheckGroup: a
       firstLine: list,
     });
 
-    setCheckAllStauts(list, checkedKafkaVersion.leftVersion);
+    setCheckAllStauts(list, checkedKafkaVersion.leftVersions);
   };
 
   const onLeftVersionChange = (list: []) => {
     setCheckedKafkaVersion({
       ...checkedKafkaVersion,
-      leftVersion: list,
+      leftVersions: list,
     });
     setCheckAllStauts(list, checkedKafkaVersion.firstLine);
   };
@@ -77,11 +77,11 @@ const CustomCheckGroup = (props: { kafkaVersion: string[]; onChangeCheckGroup: a
       e.target.checked
         ? versions
         : {
-          firstLine: [],
-          leftVersion: [],
-        }
+            firstLine: [],
+            leftVersions: [],
+          }
     );
-    onChangeCheckGroup(e.target.checked ? [...versions.firstLine, ...versions.leftVersion] : []);
+    onChangeCheckGroup(e.target.checked ? [...versions.firstLine, ...versions.leftVersions] : []);
 
     setIndeterminate(false);
     setCheckAll(e.target.checked);
@@ -112,16 +112,20 @@ const CustomCheckGroup = (props: { kafkaVersion: string[]; onChangeCheckGroup: a
           <CheckboxGroup
             style={{ width: moreGroupWidth }}
             className="more-check-group"
-            options={allVersion.leftVersion}
-            value={checkedKafkaVersion.leftVersion}
+            options={allVersion.leftVersions}
+            value={checkedKafkaVersion.leftVersions}
             onChange={onLeftVersionChange}
           />
         ) : null}
-        <div className="more-btn" onClick={() => setShowMore(!showMore)}>
-          <a>
-            {!showMore ? '展开更多' : '收起更多'} <DoubleRightOutlined style={{ transform: `rotate(${showMore ? '270' : '90'}deg)` }} />
-          </a>
-        </div>
+        {allVersion.leftVersions.length ? (
+          <div className="more-btn" onClick={() => setShowMore(!showMore)}>
+            <a>
+              {!showMore ? '展开更多' : '收起更多'} <DoubleRightOutlined style={{ transform: `rotate(${showMore ? '270' : '90'}deg)` }} />
+            </a>
+          </div>
+        ) : (
+          <></>
+        )}
       </div>
     </>
   );