antd#Layout TypeScript Examples

BasicLayout: React.FC<Iprops> = (props) => {
  const [collapsed, setCollapsed] = useState(false);
  const onLogout = () => {
    confirm({
      title: "你确定要退出登录吗?",
      icon: <ExclamationCircleOutlined />,
      onOk() {
        localStorage.removeItem("userinfo");
        console.log(props.history.replace("/"));
      },
      onCancel() {},
    });
  };

  return (
    <Layout hasSider className="page-basic">
      <MenuDefault collapsed={collapsed} />
      <Layout className="site-layout">
        <Header
          onLogout={onLogout}
          setColl={(coll) => setCollapsed(coll)}
          collapsed={collapsed}
        />
        <Bread />
        <Content
          className="site-layout-background"
          style={{
            margin: "24px 16px",
            padding: 24,
            minHeight: 280,
          }}
        >
          <Routers location={props.location} />
        </Content>
        <Footer />
      </Layout>
    </Layout>
  );
}

BasicLayout: React.FC<{ route: IRouteConfig }> = ({ route }) => {
  const history = createBrowserHistory();

  if (!localStorage.getItem('vite-react-ts-antd-token')) {
    history.push('/user/login');
  }

  return (
    <Layout>
      <MyMenu />
      <Layout>
        <MyHeader />
        <Content style={{ height: 'calc(100vh - 60px)' }}>
          {renderRoutes(route.routes)}
        </Content>
      </Layout>
    </Layout>
  );
}

NomalLayout: FC<PropTypes> = ({ children }) => {
  const { Header, Footer, Content } = Layout;

  return (
    <Layout style={LayoutStyle}>
      <Header style={HeaderStyle}>
        <MainHeader />
      </Header>
      <Content style={ContentStyle}>{children}</Content>
      <Footer style={FooterStyle}>
        <MainFooter />
      </Footer>
    </Layout>
  );
}

export function Navigation({ children }: { children: any }): JSX.Element {
    const { sceneConfig } = useValues(sceneLogic)

    return (
        <Layout style={{ minHeight: '100vh' }}>
            <TopBar />
            <SideBar>
                <Layout.Content className={!sceneConfig?.plain ? 'main-app-content' : undefined}>
                    {!sceneConfig?.plain && (
                        <>
                            {!sceneConfig?.hideDemoWarnings && <DemoWarnings />}
                            <BillingAlerts />
                            <Breadcrumbs />
                        </>
                    )}
                    {children}
                </Layout.Content>
            </SideBar>
        </Layout>
    )
}

OTLayout = styled(Layout)`
  font-family: roboto, sans-serif;

  .logo {
    margin-top: 4px;
    margin-left: 4px;
    margin-bottom: 15px;
    width: 150px;
    cursor: pointer;
  }

  .ant-menu-dark.ant-menu-dark:not(.ant-menu-horant-layout-headerizontal) {
    .ant-menu-item-selected {
      background-color: #6c5ea1;
    }
  }

  .ant-layout-header {
    background-color: white;
  }
  .sub-menu {
    padding-left: 40px !important;
  }
`

PageContent: FunctionComponent<PageContentProps> = (props) => (
  <Layout.Content
    style={{
      paddingLeft: 60,
      paddingRight: 60,
      paddingTop: 55,
      margin: 0,
      minHeight: 280,
      minWidth: 350,
      height: '100vh',
      overflowY: props.forceShowScroll ? 'scroll' : 'auto',
    }}
  >
    <PageHeader
      title={props.title}
      style={{paddingLeft: 0, paddingRight: 0, paddingTop: 0}}
      extra={props?.titleExtra}
    />
    {props.message ? (
      <Alert
        message={props.message.title}
        description={props.message.description}
        type={props.message.type}
        showIcon
        closable
      />
    ) : undefined}
    <div className="site-layout-background" style={{minHeight: 360}}>
      <Spin spinning={props.spin ?? false}>{props.children}</Spin>
    </div>
  </Layout.Content>
)

export function BasicLayout(props: React.PropsWithChildren<any>) {
  return (
    <Layout>
      <br />
      <br />
      <Layout id="main-content-wrap" className="main-content-wrap">
        <Row gutter={16}>
          <Col className="gutter-row" span={2}/>
          <Col className="gutter-row" span={20}>
            <Layout.Content
              id="main-content"
              className="main-content"
              role="main"
            >
              {props.children}
            </Layout.Content>
          </Col>
          <Col className="gutter-row" span={2}/>
        </Row>
      </Layout>
    </Layout>
  );
}

export function AppLayout({ children }: any) {
  return (
    <Layout>
      <Header />
      <Content
        style={{
          padding: "0 50px",
          marginTop: 64,
        }}
      >
        {children}
        <Affix style={{ position: "fixed", bottom: 13, right: 50 }}>
          <Row>
            <Space>
              <Text code>Leek v{env.LEEK_VERSION}</Text>
              <span>-</span>
              <a
                href="https://tryleek.com"
                target="_blank"
                rel="noopener noreferrer"
              >
                Docs
              </a>
            </Space>
          </Row>
        </Affix>
      </Content>
    </Layout>
  );
}

function App() {
  return (
    <PagesProvider>
      <Layout style={{ height: 'calc(100vh - 40px)' }}>
        <Layout>
          <Sider />
          <Content />
          <Drawer />
        </Layout>
      </Layout>
      <Header></Header>
    </PagesProvider>
  );
}

AppLayout = React.memo(function AppLayoutImpl(props: any) {
  return (
    <>
      <Layout id={'main-layout'}>
        <span id={'main-bg'}></span>
        <span id={'bg-gradient'}></span>
        <span id={'static-header-gradient'}></span>
        <span id={'static-end-gradient'}></span>
        <Header className="App-Bar">
          <AppBar />
        </Header>
        <Layout id={'width-layout'}>
          <Content
            style={{
              overflow: 'scroll',
              padding: '30px 48px ',
            }}
          >
            {props.children}
          </Content>
        </Layout>
        {/*<Footer />*/}
      </Layout>
    </>
  );
})

AuthLayout: React.FC<Props> = (props) => {
  return (
    <Spin spinning={props.loading || false}>
      <Layout
        style={{
          height: '100vh',
          background: publicRuntimeConfig.mainBackground,
        }}
      >
        {props.children}
      </Layout>
    </Spin>
  )
}

BaseLayout: React.FC<IBaseLayoutProps> = (props) => {
    const {
        style,
        children,
        className,
        menuData,
        headerAction,
        onLogoClick = () => Router.push('/'),
        TopMenuItems,
    } = props

    return (
        <Layout className={className} style={style} css={LAYOUT_CSS}>
            <SideNav menuData={menuData} onLogoClick={onLogoClick}/>
            <Layout css={SUB_LAYOUT_CSS}>
                <Header headerAction={headerAction} TopMenuItems={TopMenuItems} />
                {children}
            </Layout>
        </Layout>
    )
}

function Graphiql() {
  const GRAPHQL_ENDPOINT = process.env.REACT_APP_GRAPHQL_ENDPOINT;
  const {id} = useParams();
  const {getIdTokenClaims} = useAuth0();
  const graphQLFetcher = async (graphQLParams: any) => {
    const token = await getIdTokenClaims();
    return await fetch(GRAPHQL_ENDPOINT!, {
      method: 'post',
      headers: {
        'Content-Type': 'application/json',
        'X-Auth-Token': token.__raw,
      },
      body: JSON.stringify(graphQLParams),
    }).then(response => response.json());
  };

  return (
    <PageHeader ghost title="Query">
      <Layout style={{height: '80vh'}}>
        <Row style={{height: '100%'}}>
          <GraphiQL fetcher={graphQLFetcher} query={makeDefaultQuery(id)} />
        </Row>
      </Layout>
    </PageHeader>
  );
}

public renderLayout() {
    if (this.isReadyToRender()) {
      return <RenderLayout></RenderLayout>;
    } else {
      return (
        <Layout>
          <Skeleton active />
        </Layout>
      );
    }
  }

FreeEditor: React.FC = () => {
  const dispatch = useDispatch();
  const clearSelectedWidgets = e => {
    e.stopPropagation();
    dispatch(editWidgetInfoActions.clearSelectedWidgets());
    dispatch(editDashBoardInfoActions.changeShowBlockMask(true));
  };

  return (
    <Layout onClick={clearSelectedWidgets}>
      <Wrapper>
        <BoardToolBar />
        <Editor>
          <LayerList />
          <FreeBoardEditor />
          <SlideSetting />
        </Editor>
      </Wrapper>
    </Layout>
  );
}

Header = () => {
	const { setAccessToken } = useActions(appLogic);
	const logout = () => {
		sessionStorage.removeItem(accessTokenString);
		sessionStorage.removeItem(apiString);
		setAccessToken('');
	};

	/** Header Renderer */
	return (
		<Layout.Header className='header'>
			<WildDuckIcon />
			<Tooltip title='Logout'>
				<Button shape='circle' onClick={logout} icon={<LogoutOutlined />}></Button>
			</Tooltip>
		</Layout.Header>
	);
}

MainPage = () => {
  return <Layout className="nebulaStudioLayout">
    <Header menus={MENU_LIST} />
    <Switch>
      {RoutesList.map(route => <Route path={route.path} render={() => <>
        <Suspense fallback={<Spin />}>
          <Content>
            <Route component={route.component} />
          </Content>
        </Suspense>
      </>} key={route.path} exact={route.exact} />)}
      <Redirect from="/" to="/console" />
    </Switch>
  </Layout>;
}

{ Header } = Layout

{ Header, Footer, Sider, Content } = Layout

render() {
        let totalPath: string = this.props.location.pathname;
        let prefixArr: RegExpMatchArray = totalPath.match(/^\/[^/]*/) || [];

        return (
            <Spin spinning={false} style={{ maxHeight: window.innerHeight }}>
                <Layout style={{ minHeight: '100vh' }}>

                    <Sider collapsible>
                        <div className="logo">金融</div>
                        <Menu theme="dark"
                              defaultSelectedKeys={[ '/' ]}
                              defaultOpenKeys={[ '/Asset', '/Funder' ]}
                              mode="inline"
                              selectedKeys={[ prefixArr[0] ]}
                        >
                            <Menu.Item key={'/'}>
                                <Icon type="book"/>
                                <span>首页</span>
                                <Link to="/"></Link>
                            </Menu.Item>

                            <SubMenu key="/page" title={<span><Icon type="book"/>测试</span>}>
                                <Item key="/Details">
                                    <span>详情信息</span>
                                    <Link to="/Details"></Link>
                                </Item>
                            </SubMenu>
                        </Menu>
                    </Sider>

                    <Layout>
                        <Header style={{ background: '#fff', textAlign: 'center' }}>
                            <h1>金融</h1>
                        </Header>
                        <Content style={{ margin: '0 16px' }}>
                            <Switch>
                                {/* 首页 */}
                                <Route exact path="/" component={Home}/>

                                {/* 对账管理 */}
                                <Route path="/Details" component={Details}/>

                            </Switch>
                        </Content>
                    </Layout>

                </Layout>
            </Spin>
        )
    }

App = observer(() => {
  const mainStore = useMainStore();
  const { initialized, locale, loginRequired } = mainStore;

  useDefaultTabHotkeys();

  if (!initialized || !locale) {
    return <CenteredLoader />;
  }

  if (loginRequired) {
    return (
      <Centered>
        <Login />
      </Centered>
    );
  }

  return (
    <Layout className={styles.mainLayout}>
      <Layout.Header>
        <AppHeader />
      </Layout.Header>
      <Layout className={styles.layoutContainer}>
        <Layout.Sider
          width={200}
          breakpoint="sm"
          collapsedWidth={0}
          className={styles.layoutSider}
        >
          <AppMenu />
        </Layout.Sider>

        <Layout className={styles.layoutContent}>
          <Layout.Content>
            <Router global routes={routes} />
          </Layout.Content>
        </Layout>
      </Layout>
    </Layout>
  );
})

{ Header } = Layout

function App() {
  return (
    <Layout>
      <Router>
        <TopAppBar>
          <TopAppBarRow>
            <TopAppBarSection>
              <TopAppBarTitle>
                <Link to="/" className="root">
                  #ppeforfree
                </Link>
              </TopAppBarTitle>
            </TopAppBarSection>
            <TopAppBarSection alignEnd>
              <nav>
                <Link to="/">about</Link>
                <Link to="/contributors">contributors</Link>
                <a
                  href="https://discord.gg/pWF2zBf"
                  target="_blank"
                  rel="noreferrer noopener"
                >
                  join us
                </a>
                <a
                  href="http://github.com/PPEForFree"
                  target="_blank"
                  rel="noreferrer noopener"
                  className="icon icon-github"
                >
                  <img src="/github-icon.png" alt="github" />
                </a>
              </nav>
            </TopAppBarSection>
          </TopAppBarRow>
        </TopAppBar>
        <TopAppBarFixedAdjust />

        <Alert
          message="Join us!"
          description={
            <div>
              We're building a distributed team and are looking for volunteers. If you are
              interested in leveraging your skills and experience to make a significant
              contribution to a worthwhile cause during the ongoing epidemic then please
              register your interest by joining us on{" "}
              <a
                href="https://discord.gg/pWF2zBf"
                target="_blank"
                rel="noreferrer noopener"
              >
                Discord
              </a>
              .
            </div>
          }
          type="info"
          showIcon
          closable
        />

        <Content>
          <Switch>
            <Route path="/ideas" component={Ideas} />
            <Route path="/initiatives/submit" component={InitiativeSubmission} />
            <Route path="/directory" component={InitiativeDirectory} />
            <Route path="/contributors" component={Contributors} />
            <Route path="/" component={About} />
          </Switch>
        </Content>
      </Router>
    </Layout>
  );
}

{ Sider, Content, Header } = Layout

{ Content } = Layout

{ Sider, Content } = Layout

{Sider} = Layout

{ Content } = Layout

{ Header, Sider, Content } = Layout