import React from 'react'; import NotFound from '../../src/components/404'; import Layout from '../../src/components/Layout'; import AsideNav from '../../src/components/AsideNav'; import { AlertComponent, Button, Drawer, ToastComponent } from '../../src/components/index'; import {eachTree, mapTree} from '../../src/utils/helper'; import {Icon} from '../../src/components/icons'; import '../../src/locale/en-US'; import { Router, Route, IndexRoute, browserHistory, hashHistory, Link, Redirect, withRouter } from 'react-router'; import Select from '../../src/components/Select'; import InputBox from '../../src/components/InputBox'; import DocSearch from './DocSearch'; import Doc from './Doc'; import DocNavCN from './DocNavCN'; import Example, {examples} from './Example'; import CSSDocs, {cssDocs} from './CssDocs'; import Components, {components} from './Components'; declare const _hmt: any; let ContextPath = ''; if (process.env.NODE_ENV === 'production') { ContextPath = '/amis'; } export function getContextPath() { return ContextPath; } const themes = [ { label: '默认主题', ns: 'a-', value: 'default' }, { label: '百度云舍', ns: 'cxd-', value: 'cxd' }, { label: 'Dark', ns: 'dark-', value: 'dark' }, { label: '仿 AntD', ns: 'antd-', value: 'antd' } ]; const locales = [ { label: '中文', value: 'zh-CN' }, { label: 'English', value: 'en-US' } ]; const viewModes = [ { label: '桌面端', value: 'pc' }, { label: '移动端', value: 'mobile' } ]; const docVersions = [ { label: '1.2.x', value: '', url: '/zh-CN/docs/start/1-2-0' }, { label: '1.1.x 文档', value: '1.1.7', url: 'https://aisuda.github.io/amis-1.1.7/zh-CN/docs/index' } ]; function getPath(path) { return path ? path[0] === '/' ? ContextPath + path : `${ContextPath}/${path}` : ''; } class BackTop extends React.PureComponent { state = { show: false }; componentDidMount() { document.addEventListener('scroll', this.handleScroll); } componentWillUnmount() { document.removeEventListener('scroll', this.handleScroll); } handleScroll = (e: any) => { this.setState({ show: e.target.scrollingElement?.scrollTop > 350 }); }; render() { return (
scrollTo({top: 0})} >
); } } // @ts-ignore @withRouter // @ts-ignore export class App extends React.PureComponent<{ location: Location; }> { state = { viewMode: localStorage.getItem('viewMode') || 'pc', offScreen: false, folded: false, headerVisible: true, themeIndex: 0, themes: themes, theme: themes.find(item => item?.value === localStorage.getItem('theme')) || themes[0], locale: localStorage.getItem('locale') ? localStorage.getItem('locale').replace('zh-cn', 'zh-CN') : '', navigations: [], filter: '' // 导航过滤,方便找组件 }; constructor(props) { super(props); this.setNavigations = this.setNavigations.bind(this); this.setNavigationFilter = this.setNavigationFilter.bind(this); document.querySelector('body').classList.add(this.state.theme.value); } componentDidUpdate(preProps, preState) { const props = this.props; if (preState.theme.value !== this.state.theme.value) { [].slice .call(document.querySelectorAll('link[title]')) .forEach((item: HTMLLinkElement) => { const theme = item.getAttribute('title'); item.disabled = theme !== this.state.theme.value; }); const body = document.querySelector('body'); body.classList.remove(preState.theme.value); body.classList.add(this.state.theme.value); } if (props.location.pathname !== preProps.location.pathname) { this.setState( { offScreen: false }, () => window.scrollTo(0, 0) ); _hmt && _hmt.push(['_trackPageview', props.location.pathname]); } } setNavigations(items) { this.setState({ navigations: items, filter: '' }); } renderHeader(docPage = true) { const location = this.props.location; const theme = this.state.theme; if (location.pathname === '/edit') { return (
amis 可视化编辑器
); } return ( <>
this.setState({offScreen: !this.state.offScreen})} className={`${theme.ns}Layout-offScreen-btn ${ docPage ? 'DocLayout-offScreen-btn' : '' } pull-right visible-xs`} >
{docPage ? (
) : (
AMIS 示例
)}
{docPage ? null : ( )}
{ this.setState({theme}); localStorage.setItem('theme', `${theme.value}`); document .querySelector('body') .classList[theme.value === 'dark' ? 'add' : 'remove']('dark'); }} />
{ if (doc.url && /^https?\:\/\//.test(doc.url)) { window.open(doc.url); } else { window.location.href = doc.url; } }} />
{docPage ? ( <>
) : null} ); } setNavigationFilter(value: string) { this.setState({ filter: value }); } renderNavigation() { return (
{this.renderAsideNav()}
); } renderAsideNav() { const filterReg = new RegExp( this.state.filter.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&'), 'i' ); return ( ({ ...item, children: item.children ? item.children .filter(item => { if (item.label) { return filterReg.exec(item.label); } return true; }) .map(item => ({ ...item, className: 'is-top' })) : [] }))} renderLink={({ link, active, toggleExpand, classnames: cx, depth }: any) => { let children = []; if (link.children && link.children.length) { children.push( toggleExpand(link, e)} > ); } link.badge && children.push( {link.badge} ); if (link.icon) { children.push( ); } else if (this.state.folded && depth === 1) { children.push( ); } children.push( {link.label} ); return link.path ? ( /^https?\:/.test(link.path) ? ( {children} ) : ( {children} ) ) : ( toggleExpand(link) : undefined}> {children} ); }} isActive={(link: any) => isActive(link, location)} /> ); } renderExamples() { const theme = this.state.theme; return ( {React.cloneElement(this.props.children as any, { key: theme.value, ...(this.props.children as any).props, setNavigations: this.setNavigations, theme: theme.value, classPrefix: theme.ns, viewMode: this.state.viewMode, locale: this.state.locale, offScreen: this.state.offScreen, ContextPath })} ); } render() { const theme = this.state.theme; const location = this.props.location; if (/examples\/app/.test(location.pathname)) { return ( <> {React.cloneElement(this.props.children as any, { key: theme.value, ...(this.props.children as any).props, setNavigations: this.setNavigations, theme: theme.value, classPrefix: theme.ns, viewMode: this.state.viewMode, locale: this.state.locale, offScreen: this.state.offScreen, ContextPath, showCode: false })} ); } else if (/examples/.test(location.pathname)) { return this.renderExamples(); } return (
{this.renderNavigation()}
this.setState({offScreen: false})} show={this.state.offScreen} position="left" >
    文档 组件 样式
{this.renderNavigation()}
{React.cloneElement(this.props.children as any, { key: theme.value, ...(this.props.children as any).props, setNavigations: this.setNavigations, theme: theme.value, classPrefix: theme.ns, viewMode: this.state.viewMode, locale: this.state.locale, offScreen: this.state.offScreen, ContextPath })}
); } } function isActive(link: any, location: any) { return !!(link.path && getPath(link.path) === location.pathname); } function navigations2route(navigations) { let routes = []; navigations.forEach(root => { root.children && eachTree(root.children, (item: any) => { if (item.path && item.component) { routes.push( ); } else if (item.path && item.getComponent) { routes.push( ); } }); }); return routes; } export default function entry({pathPrefix}) { // PathPrefix = pathPrefix || DocPathPrefix; const locate = 'zh-CN'; // 暂时不支持切换,因为目前只有中文文档 return ( {/* docs */} {/* components */} {/* expamles */} {navigations2route(DocNavCN)} {navigations2route(components)} {navigations2route(examples)} {navigations2route(cssDocs)} ); }