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 (
);
}
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 : (
)}
{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 (
);
}