Function Tray

packages/editor/src/components/tray/tray.tsx:46–118

(props: TrayProps)

}

export function Tray(props: TrayProps) {
  const { rootNode, startDrag, moduleTrayLoader } = props
  const [listing, setListing] = useState(null)
  const [tabIndex, setTabIndex] = useState(0)

  const editorContext = useContext<EditorState>(EditorStateContext)

  useEffect(() => {
    setListing(getTrayListing(props.rootNode))
  }, [props.rootNode])

  const addModuleImport = useCallback(
    (module: PythonModuleInfo) => {
      if (module.isStandardLib) {
        ;(rootNode as PythonFile).addModuleImport(module.name)
      } else {
        editorContext.project.putDependency({
          name: module.name,
          version: '',
        })
      }
      setTabIndex(1)
    },
    [rootNode]
  )

  return (
    <div className="tray">
      <Tabs index={tabIndex} onChange={(index) => setTabIndex(index)} position="relative">
        <HStack justifyContent={'space-between'} borderBottomColor={'gray.800'} borderBottomWidth={'2px'}>
          <TabList borderBottom={'none'} color={'gray.400'}>
            <Tab py={3} px={3} _selected={{ color: 'gray.200' }}>
              <Text as={'h2'}>Python</Text>
            </Tab>
            <Tab py={3} _selected={{ color: 'gray.200' }}>
              <Text as={'h2'}>Imports</Text>
            </Tab>
          </TabList>
          <ButtonGroup px={2}>
            <IconButton
              size="sm"
              aria-label="New variable"
              icon={<AddIcon />}
              onClick={() => {
                setTabIndex(2)
              }}
            ></IconButton>
          </ButtonGroup>
        </HStack>
        <TabIndicator mt="-1.5px" height="2px" bg="gray.400" borderRadius="1px" />
        <TabPanels>
          <TabPanel px={2} py={2}>
            {rootNode ? <ScopeTray rootNode={rootNode as PythonNode} startDrag={startDrag} /> : null}
            {listing ? <Category category={listing} startDrag={startDrag} /> : null}
          </TabPanel>
          <TabPanel px={2} py={2}>
            <ImportsTray
              rootNode={rootNode as PythonNode}