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, Spinner, ToastComponent } from '../../src/components/index'; import {eachTree, mapTree} from '../../src/utils/helper'; import {Icon} from '../../src/components/icons'; import '../../src/locale/en-US'; import {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'; import { BrowserRouter as Router, Route, Redirect, Switch, Link, NavLink } from 'react-router-dom'; declare const _hmt: any; let ContextPath = ''; if (process.env.NODE_ENV === 'production') { ContextPath = '/amis'; } export function getContextPath() { return ContextPath; } const themes = [ { label: '云舍', ns: 'cxd-', value: 'cxd' }, { label: '仿 AntD', ns: 'antd-', value: 'antd' }, { label: 'ang', ns: 'a-', value: 'ang' }, { label: 'Dark', ns: 'dark-', value: 'dark' } ]; const locales = [ { label: '中文', value: 'zh-CN' }, { label: 'English', value: 'en-US' } ]; const viewModes = [ { label: '桌面端', value: 'pc' }, { label: '移动端', value: 'mobile' } ]; const docVersions = [ { label: '主干版本', 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: string) { 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('amis-viewMode') || 'pc', offScreen: false, folded: false, headerVisible: true, themes: themes, theme: themes.find(item => item?.value === localStorage.getItem('amis-theme')) || themes[0], locale: localStorage.getItem('amis-locale') ? localStorage.getItem('amis-locale')?.replace('zh-cn', 'zh-CN') : '', navigations: [], filter: '' // 导航过滤,方便找组件 }; constructor(props: any) { 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: any, preState: any) { 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.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: any, resetFilter = true) { this.setState({ navigations: items, filter: resetFilter ? '' : this.state.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('amis-theme', `${(theme as any).value}`); document .querySelector('body') ?.classList[ (theme as any).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: any) => { if (item.label) { return filterReg.exec(item.label); } return true; }) .map((item: any) => ({ ...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 })} */} {this.renderContent()} ); } renderContent() { const locale = 'zh-CN'; // 暂时不支持切换,因为目前只有中文文档 const theme = this.state.theme; return ( } > {/* docs */} {/* components */} {/* expamles */} ( )} /> ( )} /> ( )} /> ( )} /> (
)} />
); } 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 })} */} {this.renderContent()} ); } 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 })} */} {this.renderContent()}
); } } function isActive(link: any, location: any) { return !!(link.path && getPath(link.path) === location.pathname); } export function navigations2route( navigations: any, additionalProperties?: any ) { let routes: any = []; navigations.forEach((root: any) => { root.children && eachTree(root.children, (item: any) => { if (item.path && item.component) { routes.push( additionalProperties ? ( ( )} /> ) : ( ) ); } }); }); return routes; } export default function entry() { // PathPrefix = pathPrefix || DocPathPrefix; return ( ); }