react-is Fragment JavaScript Examples

Source File: hydration.js From ReactSourceCodeAnalyze with MIT License

6 votes

export function getDisplayNameForReactElement(
  element: React$Element<any>,
): string | null {
  const elementType = typeOf(element);
  switch (elementType) {
    case AsyncMode:
    case ConcurrentMode:
      return 'ConcurrentMode';
    case ContextConsumer:
      return 'ContextConsumer';
    case ContextProvider:
      return 'ContextProvider';
    case ForwardRef:
      return 'ForwardRef';
    case Fragment:
      return 'Fragment';
    case Lazy:
      return 'Lazy';
    case Memo:
      return 'Memo';
    case Portal:
      return 'Portal';
    case Profiler:
      return 'Profiler';
    case StrictMode:
      return 'StrictMode';
    case Suspense:
      return 'Suspense';
    default:
      const {type} = element;
      if (typeof type === 'string') {
        return type;
      } else if (type != null) {
        return getDisplayName(type, 'Anonymous');
      } else {
        return 'Element';
      }
  }
}

Source File: aside.js From wiki with GNU General Public License v3.0

6 votes

Aside = ({ frontmatter }) => {
  const { allMdx } = useStaticQuery(graphql`
    query {
      allMdx {
        nodes {
          frontmatter {
            title_cn
            title
          }
        }
      }
    }
  `);

  let title_cn_lookup = {};
  for (let data of allMdx.nodes) {
    title_cn_lookup[data.frontmatter.title] = data.frontmatter.title_cn;
  }

  return (
    <aside>
      <SidebarSection frontmatter={frontmatter} title={contents.index} title_cn={title_cn_lookup[contents.index]} />
      {
        contents.sections.map(
          ({ subindex, pages }) => <Fragment key={subindex}>
            <SidebarSection frontmatter={frontmatter} title={subindex} title_cn={title_cn_lookup[subindex]} />
            <SidebarItems frontmatter={frontmatter} item_list={
              pages.map(
                ({ title }) => [title, title_cn_lookup[title]]
              )
            }/>
          </Fragment>
        )
      }
    </aside>
  );
}

Source File: component.jsx From wiki with GNU General Public License v3.0

4 votes

Aside = memo(({ contents, frontmatter }) => {
  const classes = useStyles();

  // undefind contents is ok
  if (!contents) {
    contents = {
      sections: null,
      series: "",
    }
  }

  // console.log(contents.series)

  const SidebarSeriesSection = ({ title, title_cn }) =>
    <Link
      className={`${classes.sidebarBase} ${contents.series === title ? classes.sidebarSectionHighlight : classes.sidebarSectionNormal}`}
      to={`/${title}`}>
      <ListItem button key={title}>
        {title_cn}
      </ListItem>
    </Link>



  const SidebarSection = ({ frontmatter, title, title_cn, linkable }) => {
    if (linkable) {
      return <Link
        key={title}
        className={`${classes.sidebarBase} ${frontmatter.title === title ? classes.sidebarSectionHighlight : classes.sidebarSectionNormal}`}
        to={`/${contents.series}/${title === 'index' ? '' : title}`}>
        <ListItem button key={title}>
          {title_cn}
        </ListItem>
      </Link>
    }
    return <div className={`${classes.sidebarBase} ${classes.sidebarSectionNormal}`}>
      <ListItem key={title}> {title_cn} </ListItem>
    </div>
  }


  const SidebarItems = ({ frontmatter, item_list }) =>
    <List>
      {
        item_list.map(
          ([title, title_cn]) =>
            <Link
              key={title}
              className={`${classes.sidebarBase} ${frontmatter.title === title ? classes.sidebarItemHighlight : classes.sidebarItemNormal}`}
              to={`/${contents.series}/${title === 'index' ? '' : title}`}>
              <ListItem button key={title}>
                {title_cn}
              </ListItem>
            </Link>

        )
      }
    </List>;



  const { allMdx: allMdxContents } = useStaticQuery(graphql`
    query {
      allMdx {
        nodes {
          frontmatter {
            title_cn
            title
          }
          slug
        }
      }
    }
  `);
  // console.log(allMdxContents)
  const allMdxSeriesNodes = allMdxContents.nodes.filter((node) => {
    return node.slug !== "" && node.frontmatter.title === "index"
  })
  // console.log(allMdxSeriesNodes)

  //   const { allMdx } = useStaticQuery(graphql`
  //   query {
  //     allMdx(filter: {frontmatter: {title: {eq: "index"}}, slug: {ne: ""}}) {
  //       nodes {
  //         frontmatter {
  //           title_cn
  //         }
  //         slug
  //       }
  //     }
  //   }
  // `);
  // console.log(allMdxSeriesNodes)

  let title_cn_lookup = {};
  for (let data of allMdxContents.nodes) {
    if (data.slug.split('/')[0] === contents.series)
      title_cn_lookup[data.frontmatter.title] = data.frontmatter.title_cn;
  }

  return (
    <div>
      <Toolbar>
        <Typography variant="h5" noWrap color="primary">
          <Link className={classes.titleLink} to='/' variant="inherit">
            生如夏花
          </Link>
        </Typography>
      </Toolbar>

      <Divider />
      <Hidden smUp implementation="css">
        {
          allMdxSeriesNodes.map(({ frontmatter, slug }) =>
            <SidebarSeriesSection
              key={slug.split("/")[0]}
              title={slug.split("/")[0]}
              title_cn={frontmatter.title_cn}
            />
          )
        }
        <Divider />
      </Hidden>

      <Divider />
      {contents.sections ? 
        <List>
          <SidebarSection
            frontmatter={frontmatter}
            title={contents.index}
            title_cn={title_cn_lookup[contents.index]}
            linkable={true} />
          {
            contents.sections.map(
              ({ subindex, pages }) =>
                <Fragment key={subindex}>
                  <SidebarSection
                    frontmatter={frontmatter}
                    title={subindex}
                    title_cn={title_cn_lookup[subindex]}
                    linkable={true} />
                  <SidebarItems
                    frontmatter={frontmatter}
                    item_list={
                      pages.map(
                        ({ title }) => [title, title_cn_lookup[title]]
                      )
                    } />
                </Fragment>
            )
          }
        </List>
        :
        <div></div>
      }
    </div>
  );
})

react-is#Fragment JavaScript Examples