@reach/router#Location TypeScript Examples

The following examples show how to use @reach/router#Location. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: BlogPostPreview.tsx    From web with Apache License 2.0 6 votes vote down vote up 
BlogPostPreview = ({ entry, widgetFor }: any) => {
  const tags = entry.getIn(['data', 'tags'])
  const author = entry.getIn(['data', 'author'])
  const title = entry.getIn(['data', 'title'])
  const overline = entry.getIn(['data', 'overline'])
  const subtitle = entry.getIn(['data', 'subtitle'])
  const publishedAt = entry.getIn(['data', 'publishedAt'])
  const description = entry.getIn(['data', 'description'])
  return (
    <Location>
      {() => (
        <PlainBlogTemplate
          frontmatter={{
            description,
            title,
            overline,
            subtitle,
            publishedAt,
            author,
            seo: { title, keywords: (tags || []).join(', ') }
          }}
        >
          {widgetFor('body')}
        </PlainBlogTemplate>
      )}
    </Location>
  )
}
Example #2
Source File: FooterPreview.tsx    From web with Apache License 2.0 6 votes vote down vote up 
FooterPreview = ({ entry }: any) => {
  const { data } = entry.toJSON()
  console.info('data', data)
  return (
    <Location>
      {() => (
        <div className={layoutStyles.layout}>
          <main>
            <Container fluid>
              <details>
                <summary>JSON</summary>
                <pre>{JSON.stringify(data, null, 2)}</pre>
              </details>
            </Container>
          </main>
          <Footer logo={oryLogoWhite} {...data} />
        </div>
      )}
    </Location>
  )
}
Example #3
Source File: HeaderPreview.tsx    From web with Apache License 2.0 6 votes vote down vote up 
HeaderPreview = ({ entry }: any) => {
  const { data } = entry.toJSON()
  console.info('data', data)
  return (
    <Location>
      {() => (
        <div className={layoutStyles.layout}>
          <Navigation
            sideNav={sideNav.sideNav}
            dropdownMenu={data.dropdownMenu}
            mobileMenu={data.mobileMenu}
            logo={oryLogoPrimary}
          />
          <main>
            <Container fluid>
              <details>
                <summary>JSON</summary>
                <pre>{JSON.stringify(data, null, 2)}</pre>
              </details>
            </Container>
          </main>
        </div>
      )}
    </Location>
  )
}
Example #4
Source File: PreviewLayout.tsx    From web with Apache License 2.0 5 votes vote down vote up 
PreviewLayout = ({ children }: { children: React.ReactNode }) => {
  return <Location>{() => <Layout>{children}</Layout>}</Location>
}
Example #5
Source File: Header.tsx    From leek with Apache License 2.0 4 votes vote down vote up 
Header = () => {
  const { logout } = useAuth();
  const {
    applications,
    selectApplication,
    selectEnv,
    currentApp,
    currentEnv,
    seenEnvs,
  } = useApplication();

  const { switcher, currentTheme, themes } = useThemeSwitcher();

  function handleAppSelect(e) {
    selectApplication(e.key);
  }

  function handleEnvSelect(e) {
    selectEnv(e.key);
  }

  const apps = (
    <Menu
      onClick={handleAppSelect}
      selectedKeys={currentApp ? [currentApp] : []}
      selectable
    >
      {applications.map((app, index) => (
        <Menu.Item key={app["app_name"]}>{app["app_name"]}</Menu.Item>
      ))}
    </Menu>
  );

  function getMenuItems(location) {
    return tabs.map((tab) => {
      return (
        <Menu.Item key={`/${tab.key}/`}>
          <Link to={`/${tab.key}/${location.search}`}>
            <Space size={4}>
              {tab.icon} <span>{tab.name}</span>
            </Space>
          </Link>
        </Menu.Item>
      );
    });
  }

  const envs = (
    <Menu
      onClick={handleEnvSelect}
      selectedKeys={currentEnv ? [currentEnv] : []}
      selectable
    >
      {seenEnvs.map((env, index) => (
        <Menu.Item key={env["key"]}>{env["key"]}</Menu.Item>
      ))}
    </Menu>
  );

  const toggleTheme = (isChecked) => {
    if (isChecked) localStorage.setItem("theme", "dark");
    else localStorage.setItem("theme", "light");
    switcher({ theme: isChecked ? themes.dark : themes.light });
  };

  return (
    <Location>
      {({ location }) => {
        return (
          <Layout.Header
            style={{
              position: "fixed",
              zIndex: 1,
              width: "100%",
              // borderBottom: "1px solid #f0f0f0"
            }}
          >
            <div
              style={{
                width: "40px",
                height: "40px",
                margin: "5px 20px 5px 0",
                float: "left",
              }}
            >
              <Link to={`/${location.search}`}>
                <Image
                  alt="Logo"
                  width={40}
                  height={40}
                  style={{ margin: 0 }}
                  src="/leek.png"
                  preview={false}
                />
              </Link>
            </div>
            <Row justify="space-between">
              <Col xxl={18} xl={18} lg={14} md={0} sm={0} xs={0}>
                <Menu
                  mode="horizontal"
                  selectedKeys={[location.pathname]}
                  style={{ lineHeight: "48px", borderBottom: "0" }}
                >
                  {getMenuItems(location)}
                </Menu>
              </Col>
              <Col xxl={0} xl={0} lg={0} md={6} sm={6} xs={6}>
                <Menu
                  mode="horizontal"
                  selectedKeys={[location.pathname]}
                  style={{ lineHeight: "48px", borderBottom: "0" }}
                >
                  <SubMenu key="sub2" icon={<MenuOutlined />}>
                    {getMenuItems(location)}
                  </SubMenu>
                </Menu>
              </Col>
              <Col>
                <Row style={{ float: "right" }} gutter={10}>
                  {seenEnvs.length > 0 && (
                    <Col>
                      <Dropdown.Button
                        size="small"
                        icon={<DownOutlined />}
                        overlay={envs}
                        placement="bottomLeft"
                      >
                        <span style={{ color: "#00BFA6" }}>env:&nbsp;</span>
                        {currentEnv ? currentEnv : "-"}
                      </Dropdown.Button>
                    </Col>
                  )}

                  <Col>
                    <Dropdown.Button
                      size="small"
                      icon={<DownOutlined />}
                      overlay={apps}
                      placement="bottomLeft"
                    >
                      <span style={{ color: "#00BFA6" }}>app:&nbsp;</span>
                      {currentApp ? currentApp : "-"}
                    </Dropdown.Button>
                  </Col>

                  <Col>
                    <Switch
                      checked={currentTheme === themes.dark}
                      onChange={toggleTheme}
                      checkedChildren={<span>?</span>}
                      unCheckedChildren={<span>☀</span>}
                      style={{ background: "#555" }}
                    />
                  </Col>

                  {env.LEEK_API_ENABLE_AUTH !== "false" && (
                    <Col key="/logout" style={{ float: "right" }}>
                      <Button
                        size="small"
                        danger
                        onClick={logout}
                        style={{ textAlign: "center" }}
                      >
                        <LogoutOutlined />
                      </Button>
                    </Col>
                  )}
                </Row>
              </Col>
            </Row>
          </Layout.Header>
        );
      }}
    </Location>
  );
}