export default function DemoDefault()

in packages-rc/console-base-rc-micro-browser/stories/demo-default/index.tsx [71:142]
60 lines of code
1 McCabe index (conditional complexity)

export default function DemoDefault(): JSX.Element {
  const [stateTabs, setStateTabs] = useState<MicroBrowserTabsItemProps[]>(TAB_ITEMS);
  const [stateMode, setStateMode] = useState<MicroBrowserMode | undefined>(undefined);
  const [stateMinimizable, setStateMinimizable] = useState(false);
  const [stateVisible, setStateVisible] = useState(true);
  
  const handleTabClose = useCallback((_tab: TabProps, toTabs: TabProps[]) => setStateTabs(toTabs), [setStateTabs]);
  const handleAdd = useCallback(() => {
    const key = `ADD-${addIndex++}`;
    
    setStateTabs(update(stateTabs, {
      $push: [{
        key,
        title: key,
        content: <>{new Date().toString()}</>,
        closable: true
      }]
    }));
  }, [stateTabs, setStateTabs]);
  
  return <>
    <ThemeSwitcher />
    <PkgInfo />
    <MicroBrowser {...{
      mode: stateMode,
      tabs: {
        tabs: stateTabs,
        onTabClose: handleTabClose
      },
      // widthDefault: 400,
      // widthMin: 200,
      // widthMax: 600,
      // heightDefault: 200,
      // heightMin: 100,
      // heightMax: 320,
      // widthDefaultPinned: 560,
      // widthMinPinned: 200,
      // widthMaxPinned: 800,
      affix: '#the-minimize-to-node-for-demo',
      visible: stateVisible,
      minimizable: stateMinimizable,
      onModeChange: setStateMode,
      onClose: () => setStateVisible(false)
    }} />
    <TopNav />
    <SidePanel />
    <H1>props</H1>
    <RadioGroup<MicroBrowserMode> {...{
      label: 'props.mode',
      items: MODE_CHOICES,
      value: stateMode,
      onChange: setStateMode
    }} />
    <InputSwitch {...{
      label: 'props.visible',
      value: stateVisible,
      onChange: setStateVisible
    }} />
    <InputSwitch {...{
      label: 'props.minimizable',
      value: stateMinimizable,
      onChange: setStateMinimizable
    }} />
    <H2>添加 Tab</H2>
    <div>
      <Button onClick={handleAdd}>ADD</Button>
    </div>
    <H2>以下内容仅用来撑高</H2>
    <LongArticle />
    <ScMinimizedTray id="the-minimize-to-node-for-demo" />
  </>;
}