<commit_before>import React, { useEffect, useLayoutEffect, useState } from 'react'
import { List, NavBar, Popover } from 'antd-mobile'
// @ts-ignore
import ComponentConfig from '@@/dumi/config'
// @ts-ignore
import DemosConfig from '@@/dumi/demos'
import styles from './gallery.less'
import classNames from 'classnames'

const components = ComponentConfig['menus']['zh']['/zh/components'] as [
  {
    title: string
    children: {
      title: string
      path: string
    }[]
  }
]

const demos = Object.keys(DemosConfig)

const componentToDemoPaths: Record<string, string[]> = {}

components.forEach(group => {
  group.children.forEach(item => {
    const keyArrs = item.path.split('/')
    const key = keyArrs[keyArrs.length - 1]
    componentToDemoPaths[item.title] = demos.filter(val =>
      val.startsWith(`${key}-demo`)
    )
  })
})

export default ({}) => {
  const [currentDemoIndex, setCurrentDemoIndex] = useState<number | null>(null)
  const [currentComponent, setCurrentComponent] = useState('')

  useEffect(() => {
    document.body.style.overflow = 'hidden'
    return () => {
      document.body.style.overflow = ''
    }
  })

  useLayoutEffect(() => {
    if (!currentComponent) {
      setCurrentDemoIndex(null)
    } else {
      setCurrentDemoIndex(0)
    }
  }, [currentComponent])

  const demoSwitcher = currentComponent && currentDemoIndex !== null && (
    <Popover.Menu
      trigger='click'
      placement='bottomRight'
      actions={componentToDemoPaths[currentComponent].map((_, index) => ({
        text: `Demo${index + 1}`,
        onClick: () => {
          setCurrentDemoIndex(index)
        },
      }))}
    >
      <a className={styles.demoSwitcher}>
        {currentDemoIndex + 1} / {componentToDemoPaths[currentComponent].length}
      </a>
    </Popover.Menu>
  )

  return (
    <div style={{ height: window.innerHeight }} className={styles.gallery}>
      <div className={styles.header}>
        <NavBar
          backArrow={currentDemoIndex !== null}
          onBack={() => {
            setCurrentComponent('')
          }}
          right={demoSwitcher}
        >
          {currentComponent || 'Ant Design Mobile'}
        </NavBar>
      </div>
      {currentComponent && currentDemoIndex !== null && (
        <div className={classNames(styles.body, styles.demoBody)}>
          <iframe
            src={
              '/~demos/' +
              componentToDemoPaths[currentComponent][currentDemoIndex]
            }
            style={{
              width: window.innerWidth,
              height: '100%',
              border: 'none',
            }}
          />
        </div>
      )}
      <div className={styles.body} hidden={currentDemoIndex !== null}>
        <div className={styles.guide}>
          <img
            src='https://gw.alipayobjects.com/zos/bmw-prod/b4eaf7fb-c494-497a-81a7-4b588555948c.svg'
            alt='logo'
            className={styles.logo}
          />
          <p>下面是一些 Ant Design Mobile 的组件 demo，可以点进去试一试</p>
          <p>
            如果你想查阅完整的组件文档，请在桌面浏览器中访问：
            <a href={window.location.origin} target='_blank'>
              {window.location.origin}
            </a>
          </p>
        </div>
        {components.map(group => {
          return (
            <List key={group.title} header={group.title}>
              {group.children.map(item => {
                const demoPaths = componentToDemoPaths[item.title]
                if (demoPaths && demoPaths.length === 0) return null
                return (
                  <List.Item
                    key={item.title}
                    onClick={() => {
                      setCurrentComponent(item.title)
                    }}
                  >
                    {item.title}
                  </List.Item>
                )
              })}
            </List>
          )
        })}
      </div>
    </div>
  )
}<commit_msg>doc: update gallery<commit_after>import React, { useEffect, useLayoutEffect, useState } from 'react'
import { List, NavBar, Popover, SafeArea } from 'antd-mobile'
// @ts-ignore
import ComponentConfig from '@@/dumi/config'
// @ts-ignore
import DemosConfig from '@@/dumi/demos'
import styles from './gallery.less'
import classNames from 'classnames'

const components = ComponentConfig['menus']['zh']['/zh/components'] as [
  {
    title: string
    children: {
      title: string
      path: string
    }[]
  }
]

const demos = Object.keys(DemosConfig)

const componentToDemoPaths: Record<string, string[]> = {}

components.forEach(group => {
  group.children.forEach(item => {
    const keyArrs = item.path.split('/')
    const key = keyArrs[keyArrs.length - 1]
    componentToDemoPaths[item.title] = demos.filter(val =>
      val.startsWith(`${key}-demo`)
    )
  })
})

export default ({}) => {
  const [currentDemoIndex, setCurrentDemoIndex] = useState<number | null>(null)
  const [currentComponent, setCurrentComponent] = useState('')

  useEffect(() => {
    document.body.style.overflow = 'hidden'
    return () => {
      document.body.style.overflow = ''
    }
  })

  useLayoutEffect(() => {
    if (!currentComponent) {
      setCurrentDemoIndex(null)
    } else {
      setCurrentDemoIndex(0)
    }
  }, [currentComponent])

  const demoSwitcher = currentComponent && currentDemoIndex !== null && (
    <Popover.Menu
      trigger='click'
      placement='bottomRight'
      actions={componentToDemoPaths[currentComponent].map((_, index) => ({
        text: `Demo${index + 1}`,
        onClick: () => {
          setCurrentDemoIndex(index)
        },
      }))}
    >
      <a className={styles.demoSwitcher}>
        {currentDemoIndex + 1} / {componentToDemoPaths[currentComponent].length}
      </a>
    </Popover.Menu>
  )

  return (
    <div style={{ height: window.innerHeight }} className={styles.gallery}>
      <div className={styles.header}>
        <NavBar
          backArrow={currentDemoIndex !== null}
          onBack={() => {
            setCurrentComponent('')
          }}
          right={demoSwitcher}
        >
          {currentComponent || 'Ant Design Mobile'}
        </NavBar>
      </div>
      {currentComponent && currentDemoIndex !== null && (
        <div className={classNames(styles.body, styles.demoBody)}>
          <iframe
            src={
              '/~demos/' +
              componentToDemoPaths[currentComponent][currentDemoIndex]
            }
            style={{
              width: window.innerWidth,
              height: '100%',
              border: 'none',
            }}
          />
        </div>
      )}
      <div className={styles.body} hidden={currentDemoIndex !== null}>
        <div className={styles.guide}>
          <img
            src='https://gw.alipayobjects.com/zos/bmw-prod/b4eaf7fb-c494-497a-81a7-4b588555948c.svg'
            alt='logo'
            className={styles.logo}
          />
          <p>下面是一些 Ant Design Mobile 的组件 demo，可以点进去试一试</p>
          <p>
            如果你想查阅完整的组件文档，请在桌面浏览器中访问：
            <a href={window.location.origin} target='_blank'>
              {window.location.origin}
            </a>
          </p>
        </div>
        {components.map(group => {
          return (
            <List key={group.title} header={group.title}>
              {group.children.map(item => {
                const demoPaths = componentToDemoPaths[item.title]
                if (demoPaths && demoPaths.length === 0) return null
                return (
                  <List.Item
                    key={item.title}
                    onClick={() => {
                      setCurrentComponent(item.title)
                    }}
                  >
                    {item.title}
                  </List.Item>
                )
              })}
            </List>
          )
        })}
        <SafeArea position='bottom' />
      </div>
    </div>
  )
}
{'fraction_non_alphanumeric': 0.14113159567705022, 'fraction_numerical': 0.007374443738080102, 'mean_word_length': 1.8876651982378854, 'pattern_counts': {'":': 0, '<': 64, '<?xml version=': 0, '>': 90, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6696487', 'n_tokens_mistral': 2381, 'n_tokens_neox': 2295, 'n_words': 393}