AccordionWindowItem() — react Function Reference

Architecture documentation for the AccordionWindowItem() function in AccordionWindow.tsx from the react codebase.

Function tsx PlaygroundApp Stores

Entity Profile

PlaygroundApp→ Stores→ AccordionWindowItem() — react Function Reference

Dependency Diagram

graph TD
  7c470b1c_efa6_591d_ad97_4453f68f0bc1["AccordionWindowItem()"]
  026af77a_8146_7891_6382_db3daa921f75["AccordionWindow.tsx"]
  7c470b1c_efa6_591d_ad97_4453f68f0bc1 -->|defined in| 026af77a_8146_7891_6382_db3daa921f75
  style 7c470b1c_efa6_591d_ad97_4453f68f0bc1 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

compiler/apps/playground/components/AccordionWindow.tsx lines 46–126

function AccordionWindowItem({
  name,
  tabs,
  tabsOpen,
  setTabsOpen,
  hasChanged,
}: {
  name: string;
  tabs: TabsRecord;
  tabsOpen: Set<string>;
  setTabsOpen: (newTab: Set<string>) => void;
  hasChanged: boolean;
  isFailure: boolean;
}): React.ReactElement {
  const id = useId();
  const isShow = tabsOpen.has(name);

  const transitionName = `accordion-window-item-${id}`;

  const toggleTabs = (): void => {
    startTransition(() => {
      addTransitionType(EXPAND_ACCORDION_TRANSITION);
      const nextState = new Set(tabsOpen);
      if (nextState.has(name)) {
        nextState.delete(name);
      } else {
        nextState.add(name);
      }
      setTabsOpen(nextState);
    });
  };

  // Replace spaces with non-breaking spaces
  const displayName = name.replace(/ /g, '\u00A0');

  return (
    <div key={name} className="flex flex-row">
      {isShow ? (
        <ViewTransition
          name={transitionName}
          update={{
            [EXPAND_ACCORDION_TRANSITION]: 'expand-accordion',
            default: 'none',
          }}>
          <Resizable className="border-r" minWidth={550} enable={{right: true}}>
            <h2
              title="Minimize tab"
              aria-label="Minimize tab"
              onClick={toggleTabs}
              className={`p-4 duration-150 ease-in border-b cursor-pointer border-grey-200 ${
                hasChanged ? 'font-bold' : 'font-light'
              } text-secondary hover:text-link`}>
              - {displayName}
            </h2>
            {tabs.get(name) ?? <div>No output for {name}</div>}
          </Resizable>
        </ViewTransition>
      ) : (
        <ViewTransition
          name={transitionName}
          update={{
            [EXPAND_ACCORDION_TRANSITION]: 'expand-accordion',
            default: 'none',
          }}>
          <div className="relative items-center h-full px-1 py-6 align-middle border-r border-grey-200">
            <button
              title={`Expand compiler tab: ${name}`}
              aria-label={`Expand compiler tab: ${name}`}
              style={{transform: 'rotate(90deg) translate(-50%)'}}
              onClick={toggleTabs}
              className={`flex-grow-0 w-5 transition-colors duration-150 ease-in ${
                hasChanged ? 'font-bold' : 'font-light'
              } text-secondary hover:text-link`}>
              {displayName}
            </button>
          </div>
        </ViewTransition>
      )}
    </div>
  );
}