fix visibility of cells

1 month ago · 9079b0b10c
parent a0f97757b6
commit 9079b0b10c
7 changed files with 55 additions and 45 deletions
--- a/apps/remix-ide/src/app/plugins/remixGuide.tsx
+++ b/apps/remix-ide/src/app/plugins/remixGuide.tsx
@ -112,13 +112,14 @@ export class RemixGuidePlugin extends ViewPlugin {
          title={Data.title}
          description={Data.description}
        >
-          { Data.sections.map(section => {
+          { Data.sections.map((section, index) => {
            return <RemixUIGridSection
              plugin={this}
              title={section.title}
              hScrollable={true}
+              key={index}
            >
-              { section.cells.map(cell => {
+              { section.cells.map((cell, index) => {
                return <RemixUIGridCell
                  plugin={this}
                  title={cell.title}
@ -128,7 +129,7 @@ export class RemixGuidePlugin extends ViewPlugin {
                  expandViewEl={
                    cell.expandViewElement
                  }
-                  key={cell.title}
+                  key={cell.title || index}
                  id={cell.title}
                  handleExpand={() => {
                    this.showVideo = true
--- a/apps/remix-ide/src/app/plugins/templates-selection/templates-selection-plugin.tsx
+++ b/apps/remix-ide/src/app/plugins/templates-selection/templates-selection-plugin.tsx
@ -161,11 +161,11 @@ export class TemplatesSelectionPlugin extends ViewPlugin {
              tooltipTitle={template.tooltip}
              hScrollable={false}
            >
-              {template.items.map(item => {
+              {template.items.map((item, index) => {
                return <RemixUIGridCell
                  plugin={this}
                  title={item.displayName}
-                  key={item.name}
+                  key={item.name || index}
                  id={item.name}
                  searchKeywords={[item.displayName, item.description, template.name]}
                  tagList={item.tagList}
--- a/libs/remix-ui/environment-explorer/src/lib/components/environment-explorer-ui.tsx
+++ b/libs/remix-ui/environment-explorer/src/lib/components/environment-explorer-ui.tsx
@ -61,6 +61,7 @@ export const EnvironmentExplorerUI = (props: environmentExplorerUIProps) => {
      const newSections = { ...prevSections }
      Object.keys(newSections).forEach((section) => {
        newSections[section].providers = Object.values(state.providersFlat).filter(newSections[section].filterFn)
+        newSections[section].id = section
      })
      return newSections
    })
--- a/libs/remix-ui/environment-explorer/src/lib/types/index.ts
+++ b/libs/remix-ui/environment-explorer/src/lib/types/index.ts
@ -18,6 +18,7 @@ export type environmentExplorerUIGridSection = {
  providers: Provider[]
  filterFn: (provider: Provider) => boolean
  descriptionFn?: (provider: Provider) => string | JSX.Element | null
+  id?: string
 }

 export type environmentExplorerUIGridSections = {
--- a/libs/remix-ui/grid-view/src/lib/remix-ui-grid-cell.tsx
+++ b/libs/remix-ui/grid-view/src/lib/remix-ui-grid-cell.tsx
@ -3,6 +3,7 @@ import React, {useState, useEffect, useContext, useRef, ReactNode, ReactHTMLElem
 import './remix-ui-grid-cell.css'
 import FiltersContext from "./filtersContext"
 import { CustomTooltip } from '@remix-ui/helper'
+import { ChildCallbackContext } from './remix-ui-grid-section'

 declare global {
  interface Window {
@ -28,11 +29,12 @@ interface RemixUIGridCellProps {
  expandViewEl?: any
  handleExpand?: any
  id: string
-  searchKeywords?: string[]
+  searchKeywords?: string[],
 }

 export const RemixUIGridCell = (props: RemixUIGridCellProps) => {
  const filterCon = useContext(FiltersContext)
+  const callbackContext = useContext(ChildCallbackContext)
  const [anyEnabled, setAnyEnabled] = useState(false)
  const [expand, setExpand] = useState(false)
  const [pinned, setPinned] = useState<boolean>(props.pinned)
@ -52,6 +54,7 @@ export const RemixUIGridCell = (props: RemixUIGridCellProps) => {
        props.searchKeywords?.map(keyword => keyword?.toLowerCase()).some(searchKeyword => searchKeyword?.toLowerCase().includes(filterCon.filter?.toLocaleLowerCase())))

    setAnyEnabled(enabled)
+    if(callbackContext.onChildCallback && (props.id || props.title)) callbackContext.onChildCallback((props.id || props.title), enabled)
  }, [filterCon, props.tagList])

  useEffect(() => {
@ -126,6 +129,7 @@ export const RemixUIGridCell = (props: RemixUIGridCellProps) => {
                  tooltipId="pluginManagerInactiveTitleLinkToDoc"
                  tooltipClasses="text-nowrap"
                  tooltipText={props.tagList[key]}
+                  key={props.tagList[key]}
                >
                  <span key={props.tagList[key]}
                    className={'remixui_grid_cell_tag bg-' + filterCon.keyValueMap[props.tagList[key]].color}
--- a/libs/remix-ui/grid-view/src/lib/remix-ui-grid-section.tsx
+++ b/libs/remix-ui/grid-view/src/lib/remix-ui-grid-section.tsx
@ -1,9 +1,5 @@
-import React, {useState, useEffect, useContext, useRef, ReactNode} from 'react' // eslint-disable-line
-import { CustomTooltip } from "@remix-ui/helper";
-
+import React, {createContext, ReactNode, useEffect, useState} from 'react' // eslint-disable-line
 import './remix-ui-grid-section.css'
-import FiltersContext from "./filtersContext"
-
 declare global {
  interface Window {
    _paq: any
@ -11,6 +7,19 @@ declare global {
 }
 const _paq = window._paq = window._paq || []

+// Define the type for the context value
+interface ChildCallbackContextType {
+  onChildCallback: (id: string, enabled: boolean) => void;
+}
+
+// Create the context with a default value of `null`
+export const ChildCallbackContext = createContext<ChildCallbackContextType | null>(null);
+
+interface ChildState {
+  id: string;
+  enabled: boolean;
+}
+
 interface RemixUIGridSectionProps {
  plugin: any
  title?: string
@ -18,55 +27,48 @@ interface RemixUIGridSectionProps {
  hScrollable: boolean
  classList?: string
  styleList?: any
-  children?: ReactNode
+  children?: ReactNode,
  expandedCell?: any
 }

-const hasChildCell = (children: ReactNode): boolean => {
-  return true
-  let found = false
-
-  const isElement = (child: ReactNode): child is React.ReactElement => {
-    return React.isValidElement(child)
-  }
+export const RemixUIGridSection = (props: RemixUIGridSectionProps) => {

-  const traverse = (child: ReactNode) => {
-    if (found) return
+  const [hide, setHide] = useState(false);
+  const [childrenStates, setChildrenStates] = useState<ChildState[]>([]);

-    if (isElement(child)) {
-      if (child.props.classList === 'remixui_grid_cell_container') {
-        found = true
-        return
-      }
+  // Callback to update the state of a child
+  const onChildCallback = (id: string, enabled: boolean) => {
+    setChildrenStates((prev) => {
+      const existingChild = prev.find((child) => child.id === id);

-      if (child.props.children) {
-        React.Children.forEach(child.props.children, traverse)
+      if (existingChild) {
+        // Update existing child
+        return prev.map((child) =>
+          child.id === id ? { ...child, enabled } : child
+        );
+      } else {
+        // Add new child
+        return [...prev, { id, enabled }];
      }
-    }
-  }
-
-  React.Children.forEach(children, traverse)
-  return found
-}
-
-export const RemixUIGridSection = (props: RemixUIGridSectionProps) => {
-  const [children, setChildren] = useState(props.children)
-  const filterCon = useContext(FiltersContext)
+    });
+  };

  useEffect(() => {
-    setChildren(props.children)
-  }, [props.children])
+    // Check if all children are disabled
+    const allDisabled = childrenStates.every((child) => !child.enabled);
+    setHide(allDisabled);
+  }, [childrenStates]);

  return (
+    <ChildCallbackContext.Provider value={{ onChildCallback }}>
    <div
-      className={`d-flex px-4 py-2 flex-column w-100 remixui_grid_section_container ${props.classList}`}
+      className={`${hide? 'd-none': `d-flex px-4 py-2 flex-column w-100 remixui_grid_section_container ${props.classList}`}`}
      data-id={"remixUIGS" + props.title}
      style={{ overflowX: 'auto' }}
    >
-      <div className="w-100 remixui_grid_section">
-        { props.title && <h6 className='mt-1 mb-0 align-items-left '>{ props.title }</h6> }
+      <div className={`w-100 remixui_grid_section`}>
+        { props.title && <h6 className={`mt-1 mb-0 align-items-left`}>{ props.title }</h6> }
        <div className={(props.hScrollable) ? `d-flex flex-row pb-2  overflow-auto` : `d-flex flex-wrap`}>
-          { !hasChildCell(children) && <span> No items found </span>}
          { props.children }
        </div>
        { props.expandedCell && <div>
@ -75,6 +77,7 @@ export const RemixUIGridSection = (props: RemixUIGridSectionProps) => {
        }
      </div>
    </div>
+    </ChildCallbackContext.Provider>
  )
 }

--- a/libs/remix-ui/grid-view/src/lib/remix-ui-grid-view.tsx
+++ b/libs/remix-ui/grid-view/src/lib/remix-ui-grid-view.tsx
@ -127,7 +127,7 @@ export const RemixUIGridView = (props: RemixUIGridViewProps) => {
                </div>
                <div className='d-flex flex-row'>
                  { Object.keys(keyValueMap).map((key) => (
-                    <CustomCheckbox label={key} />
+                    <CustomCheckbox key={key} label={key} />
                  )) }
                </div>
              </div>