fix: client error render

nonzzz · Dec 17, 2024 · 1d771a0 · 1d771a0
1 parent 437e3d2
commit 1d771a0
Show file tree

Hide file tree

Showing 6 changed files with 348 additions and 334 deletions.
diff --git a/src/client/components/checkbox/checkbox.tsx b/src/client/components/checkbox/checkbox.tsx
@@ -103,7 +103,9 @@ function CheckboxComponent(props: CheckboxProps) {
       }
     }
   } else {
-    setSelfChecked(checked)
+    if (checked !== selfChecked) {
+      setSelfChecked(checked)
+    }
   }
 
   const handleChange = useCallback((e: React.ChangeEvent) => {

diff --git a/src/client/components/search-modules.tsx b/src/client/components/search-modules.tsx
@@ -104,7 +104,7 @@ export function SearchModules<F extends Module>(props: SearchModulesProps<F>) {
                 <ModuleItem name={module.parent.label} stylex={{ fontStyle: 'bold' }} />
                 {module.children.map((child) => (
                   <ModuleItem
-                    key={child.label}
+                    key={child.filename}
                     name={child.label}
                     size={child[extra]}
                     pointer={availableMap[child.label]}

diff --git a/src/client/components/side-bar/side-bar.tsx b/src/client/components/side-bar/side-bar.tsx
@@ -126,7 +126,6 @@ export function Sidebar({ onVisibleChange = noop }: SidebarProps) {
                 <div key={button} stylex={{ padding: '5px', boxSizing: 'border-box' }}>
                   <Button
                     onClick={() => handleToggleMode(button)}
-                    // onClick={() => toggleSize(button === 'Gzipped' ? 'gzipSize' : button === 'Stat' ? 'statSize' : 'parsedSize')}
                     auto
                     type={mode === button ? 'secondary' : 'default'}
                     scale={0.7}
@@ -137,41 +136,36 @@ export function Sidebar({ onVisibleChange = noop }: SidebarProps) {
               ))}
             </div>
           </div>
-          {IS_CUSTOM_SIDE_BAR
-            ? (
+          <div>
+            {IS_CUSTOM_SIDE_BAR && (
               <div id="customSideBar">
                 {createElement(ui.SideBar ? ui.SideBar : 'div', null)}
               </div>
-            )
-            : (
-              <>
-                <div>
-                  <Text p b h3>Filter by entrypoints:</Text>
-                  <Select
-                    ref={selectRef}
-                    multiple
-                    scale={0.75}
-                    placeholder="Select endpoints"
-                    width="95.5%"
-                    onChange={handleFilterByEntrypoints}
-                    options={entrypointChunks.map((chunk) => ({ value: chunk.label, label: chunk.label }))}
-                  />
-                </div>
-                <div>
-                  <Text p b h3>Search modules:</Text>
-                  <SearchModules extra={userMode} files={allChunks} />
-                </div>
-                <div>
-                  <Text p b h3>Show Chunks:</Text>
-                  <FileList
-                    files={allChunks}
-                    extra={userMode}
-                    scence={scence}
-                    onChange={(v) => updateScence(new Set(v))}
-                  />
-                </div>
-              </>
             )}
+            <Text p b h3>Filter by entrypoints:</Text>
+            <Select
+              ref={selectRef}
+              multiple
+              scale={0.75}
+              placeholder="Select endpoints"
+              width="95.5%"
+              onChange={handleFilterByEntrypoints}
+              options={entrypointChunks.map((chunk) => ({ value: chunk.label, label: chunk.label }))}
+            />
+          </div>
+          <div>
+            <Text p b h3>Search modules:</Text>
+            <SearchModules extra={userMode} files={allChunks} />
+          </div>
+          <div>
+            <Text p b h3>Show Chunks:</Text>
+            <FileList
+              files={allChunks}
+              extra={userMode}
+              scence={scence}
+              onChange={(v) => updateScence(new Set(v))}
+            />
+          </div>
         </Drawer.Content>
       </Drawer>
     </>