文档样式没问题了,

This commit is contained in:
rickcole 2020-07-24 17:20:08 +08:00
parent 03e8a88385
commit 2bcf987201
7 changed files with 868 additions and 1601 deletions

View File

@ -16,86 +16,12 @@ import {
Redirect, Redirect,
withRouter withRouter
} from 'react-router'; } from 'react-router';
import makeSchemaRenderer from './SchemaRender';
import SimplePageSchema from './Page/Simple';
import ErrorPageSchema from './Page/Error';
import FormPageSchema from './Page/Form';
import ModeFormSchema from './Form/Mode';
import FieldSetFormSchema from './Form/FieldSet';
import TabsFormSchema from './Form/Tabs';
import RemoteFormSchema from './Form/Remote';
import ReactionFormSchema from './Form/Reaction';
import ValidationFormSchema from './Form/Validation';
import FullFormSchema from './Form/Full';
import StaticFormSchema from './Form/Static';
import HintFormSchema from './Form/Hint';
import FieldSetInTabsFormSchema from './Form/FieldSetInTabs';
import ComboFormSchema from './Form/Combo';
import SubFormSchema from './Form/SubForm';
import RichTextSchema from './Form/RichText';
import EditorSchema from './Form/Editor';
import TestFormSchema from './Form/Test';
import TransferFormSchema from './Form/Transfer';
import TableFormSchema from './Form/Table';
import PickerFormSchema from './Form/Picker';
import FormulaFormSchema from './Form/Formula';
import CustomFormSchema from './Form/Custom';
import FormLayoutTestSchema from './Form/layoutTest';
import Definitions from './Form/Definitions';
import Docs from './Doc';
import TableCrudSchema from './CRUD/Table';
import ItemActionsSchema from './CRUD/ItemActions';
import GridCrudSchema from './CRUD/Grid';
import ListCrudSchema from './CRUD/List';
import LoadMoreSchema from './CRUD/LoadMore';
import TestCrudSchema from './CRUD/test';
import FixedCrudSchema from './CRUD/Fix';
import AsideCrudSchema from './CRUD/Aside';
import FieldsCrudSchema from './CRUD/Fields';
import JumpNextCrudSchema from './CRUD/JumpNext';
import KeyboardsCrudSchema from './CRUD/Keyboards';
import FootableCrudSchema from './CRUD/Footable';
import NestedCrudSchema from './CRUD/Nested';
import MergeCellSchema from './CRUD/MergeCell';
import HeaderGroupSchema from './CRUD/HeaderGroup';
import HeaderHideSchema from './CRUD/HeaderHide';
import LoadOnceTableCrudSchema from './CRUD/LoadOnce';
import SdkTest from './Sdk/Test';
import JSONSchemaForm from './Form/Schem';
import SimpleDialogSchema from './Dialog/Simple';
import DrwaerSchema from './Dialog/Drawer';
import PageLinkPageSchema from './Linkage/Page';
import FormLinkPageSchema from './Linkage/Form';
import Form2LinkPageSchema from './Linkage/Form2';
import CRUDLinkPageSchema from './Linkage/CRUD';
import OptionsPageSchema from './Linkage/Options';
import OptionsLocalPageSchema from './Linkage/OptionsLocal';
import WizardSchema from './Wizard';
import ChartSchema from './Chart';
import HorizontalSchema from './Horizontal';
import VideoSchema from './Video';
import AudioSchema from './Audio';
import CarouselSchema from './Carousel';
import TasksSchema from './Tasks';
import ServicesDataSchema from './Services/Data';
import ServicesSchemaSchema from './Services/Schema';
import ServicesFormSchema from './Services/Form';
import IFrameSchema from './IFrame';
import NormalTabSchema from './Tabs/Normal';
import FormTabSchema from './Tabs/Form';
import Tab1Schema from './Tabs/Tab1';
import Tab2Schema from './Tabs/Tab2';
import Tab3Schema from './Tabs/Tab3';
import TestComponent from './Test';
import Select from '../../src/components/Select'; import Select from '../../src/components/Select';
import Button from '../../src/components/Button';
import DocSearch from './DocSearch'; import DocSearch from './DocSearch';
import {groupBy} from 'lodash'; import {groupBy} from 'lodash';
import classnames from 'classnames'; import classnames from 'classnames';
import Doc, {docs} from './Doc';
import Example, {examples} from './Example';
let PathPrefix = '/examples'; let PathPrefix = '/examples';
let ContextPath = ''; let ContextPath = '';
@ -105,452 +31,6 @@ if (process.env.NODE_ENV === 'production') {
ContextPath = '/amis'; ContextPath = '/amis';
} }
const navigations = [
Docs,
{
prefix: ({classnames: cx}) => <li className={cx('AsideNav-divider')} />,
label: '示例',
children: [
{
label: '页面',
icon: 'glyphicon glyphicon-th',
badge: 3,
badgeClassName: 'bg-info',
children: [
{
label: '简单页面',
path: 'pages/simple',
component: makeSchemaRenderer(SimplePageSchema)
},
{
label: '初始化出错',
path: 'pages/error',
component: makeSchemaRenderer(ErrorPageSchema)
},
{
label: '表单页面',
path: 'pages/form',
component: makeSchemaRenderer(FormPageSchema)
}
]
},
{
label: '表单',
icon: 'fa fa-list-alt',
children: [
{
label: '表单展示模式',
path: 'form/mode',
component: makeSchemaRenderer(ModeFormSchema)
},
{
label: '所有类型汇总',
path: 'form/full',
component: makeSchemaRenderer(FullFormSchema)
},
{
label: '静态展示',
path: 'form/static',
component: makeSchemaRenderer(StaticFormSchema)
},
{
label: '输入提示',
path: 'form/hint',
component: makeSchemaRenderer(HintFormSchema)
},
{
label: 'FieldSet',
path: 'form/fieldset',
component: makeSchemaRenderer(FieldSetFormSchema)
},
{
label: 'Tabs',
path: 'form/tabs',
component: makeSchemaRenderer(TabsFormSchema)
},
{
label: 'FieldSet Tabs 组合',
path: 'form/fields-tabs',
component: makeSchemaRenderer(FieldSetInTabsFormSchema)
},
{
label: '动态数据',
path: 'form/remote',
component: makeSchemaRenderer(RemoteFormSchema)
},
{
label: '显隐状态联动',
path: 'form/reaction',
component: makeSchemaRenderer(ReactionFormSchema)
},
{
label: '表单验证',
path: 'form/validation',
component: makeSchemaRenderer(ValidationFormSchema)
},
{
label: '组合类型',
path: 'form/combo',
component: makeSchemaRenderer(ComboFormSchema)
},
{
label: '穿梭器',
path: 'form/transfer',
component: makeSchemaRenderer(TransferFormSchema)
},
{
label: '多功能选择器',
path: 'form/picker',
component: makeSchemaRenderer(PickerFormSchema)
},
{
label: '子表单',
path: 'form/sub-form',
component: makeSchemaRenderer(SubFormSchema)
},
{
label: 'JSon Schema表单',
path: 'form/json-schema',
component: JSONSchemaForm
},
{
label: '富文本',
path: 'form/rich-text',
component: makeSchemaRenderer(RichTextSchema)
},
{
label: '代码编辑器',
path: 'form/ide',
component: makeSchemaRenderer(EditorSchema)
},
{
label: '自定义组件',
path: 'form/custom',
component: makeSchemaRenderer(CustomFormSchema)
},
{
label: '表格编辑',
path: 'form/table',
component: makeSchemaRenderer(TableFormSchema)
},
{
label: '公式示例',
path: 'form/formula',
component: makeSchemaRenderer(FormulaFormSchema)
},
{
label: '引用',
path: 'form/definitions',
component: makeSchemaRenderer(Definitions)
}
// {
// label: '布局测试',
// path: 'form/layout-test',
// component: makeSchemaRenderer(FormLayoutTestSchema)
// },
// {
// label: '测试',
// path: 'form/test',
// component: makeSchemaRenderer(TestFormSchema)
// },
]
},
{
label: '增删改查',
icon: 'fa fa-table',
children: [
{
label: '表格模式',
path: 'crud/table',
component: makeSchemaRenderer(TableCrudSchema)
},
{
label: '卡片模式',
path: 'crud/grid',
component: makeSchemaRenderer(GridCrudSchema)
},
{
label: '列表模式',
path: 'crud/list',
component: makeSchemaRenderer(ListCrudSchema)
},
{
label: '加载更多模式',
path: 'crud/load-more',
component: makeSchemaRenderer(LoadMoreSchema)
},
{
label: '操作交互显示',
path: 'crud/item-actions',
component: makeSchemaRenderer(ItemActionsSchema)
},
{
label: '列类型汇总',
path: 'crud/columns',
component: makeSchemaRenderer(FieldsCrudSchema)
},
{
label: '可折叠',
path: 'crud/footable',
component: makeSchemaRenderer(FootableCrudSchema)
},
{
label: '嵌套',
path: 'crud/nested',
component: makeSchemaRenderer(NestedCrudSchema)
},
{
label: '合并单元格',
path: 'crud/merge-cell',
component: makeSchemaRenderer(MergeCellSchema)
},
{
label: '表头分组',
path: 'crud/header-group',
component: makeSchemaRenderer(HeaderGroupSchema)
},
{
label: '表头隐藏',
path: 'crud/header-hide',
component: makeSchemaRenderer(HeaderHideSchema)
},
{
label: '带边栏',
path: 'crud/aside',
component: makeSchemaRenderer(AsideCrudSchema)
},
{
label: '固定表头/列',
path: 'crud/fixed',
component: makeSchemaRenderer(FixedCrudSchema)
},
{
label: '键盘操作编辑',
path: 'crud/keyboards',
component: makeSchemaRenderer(KeyboardsCrudSchema)
},
{
label: '操作并下一个',
path: 'crud/jump-next',
component: makeSchemaRenderer(JumpNextCrudSchema)
},
{
label: '一次性加载',
path: 'crud/load-once',
component: makeSchemaRenderer(LoadOnceTableCrudSchema)
}
// {
// label: '测试',
// path: 'crud/test',
// component: makeSchemaRenderer(TestCrudSchema)
// }
]
},
{
label: '弹框',
icon: 'fa fa-bomb',
children: [
{
label: '对话框',
path: 'dialog/simple',
component: makeSchemaRenderer(SimpleDialogSchema)
},
{
label: '侧边弹出',
path: 'dialog/drawer',
component: makeSchemaRenderer(DrwaerSchema)
}
]
},
{
label: '选项卡',
icon: 'fa fa-clone',
children: [
{
label: '常规选项卡',
path: 'tabs/normal',
component: makeSchemaRenderer(NormalTabSchema)
},
{
label: '表单中选项卡分组',
path: 'tabs/form',
component: makeSchemaRenderer(FormTabSchema)
},
{
label: '选项卡页面1',
path: 'tabs/tab1',
component: makeSchemaRenderer(Tab1Schema)
},
{
label: '选项卡页面2',
path: 'tabs/tab2',
component: makeSchemaRenderer(Tab2Schema)
},
{
label: '选项卡页面3',
path: 'tabs/tab3',
component: makeSchemaRenderer(Tab3Schema)
}
]
},
{
label: '联动',
icon: 'fa fa-bolt',
children: [
{
label: '地址栏变化自动更新',
path: 'linkpage/page',
component: makeSchemaRenderer(PageLinkPageSchema)
},
{
label: '选项联动',
path: 'linkpage/options-local',
component: makeSchemaRenderer(OptionsLocalPageSchema)
},
{
label: '选项远程联动',
path: 'linkpage/options',
component: makeSchemaRenderer(OptionsPageSchema)
},
{
label: '表单和表单联动',
path: 'linkpage/form',
component: makeSchemaRenderer(FormLinkPageSchema)
},
{
label: '表单自动更新',
path: 'linkpage/form2',
component: makeSchemaRenderer(Form2LinkPageSchema)
},
{
label: '表单和列表联动',
path: 'linkpage/crud',
component: makeSchemaRenderer(CRUDLinkPageSchema)
}
]
},
{
label: '动态加载',
icon: 'fa fa-magic',
children: [
{
label: '动态加载数据',
path: 'services/data',
component: makeSchemaRenderer(ServicesDataSchema)
},
{
label: '动态加载页面',
path: 'services/schema',
component: makeSchemaRenderer(ServicesSchemaSchema)
},
{
label: '动态加载部分表单',
path: 'services/form',
component: makeSchemaRenderer(ServicesFormSchema)
}
]
},
{
label: '向导',
icon: 'fa fa-desktop',
path: 'wizard',
component: makeSchemaRenderer(WizardSchema)
},
{
label: '排版',
icon: 'fa fa-columns',
path: 'horizontal',
component: makeSchemaRenderer(HorizontalSchema)
},
{
label: '图表',
icon: 'fa fa-bar-chart',
path: 'chart',
component: makeSchemaRenderer(ChartSchema)
},
{
label: '轮播图',
icon: 'fa fa-pause',
path: 'carousel',
component: makeSchemaRenderer(CarouselSchema)
},
{
label: '音频',
icon: 'fa fa-volume-up',
path: 'audio',
component: makeSchemaRenderer(AudioSchema)
},
{
label: '视频',
icon: 'fa fa-video-camera',
path: 'video',
component: makeSchemaRenderer(VideoSchema)
},
{
label: '异步任务',
icon: 'fa fa-tasks',
path: 'task',
component: makeSchemaRenderer(TasksSchema)
},
{
label: 'IFrame',
icon: 'fa fa-cloud',
path: 'iframe',
component: makeSchemaRenderer(IFrameSchema)
},
{
label: 'SDK',
icon: 'fa fa-rocket',
path: 'sdk',
component: SdkTest
},
{
label: 'Test',
icon: 'fa fa-code',
path: 'test',
component: TestComponent
}
]
}
];
function isActive(link, location) {
return !!(link && link === location.pathname);
}
const themes = [ const themes = [
{ {
label: '默认主题', label: '默认主题',
@ -592,7 +72,7 @@ export class App extends React.PureComponent {
themes: themes, themes: themes,
theme: themes[localStorage.getItem('themeIndex') || 0], theme: themes[localStorage.getItem('themeIndex') || 0],
locale: localStorage.getItem('locale') || '', locale: localStorage.getItem('locale') || '',
docs: Docs.children navigations: []
}; };
constructor(props) { constructor(props) {
@ -601,6 +81,7 @@ export class App extends React.PureComponent {
this.toggleAside = this.toggleAside.bind(this); this.toggleAside = this.toggleAside.bind(this);
this.setAsideFolded = this.setAsideFolded.bind(this); this.setAsideFolded = this.setAsideFolded.bind(this);
this.setHeaderVisible = this.setHeaderVisible.bind(this); this.setHeaderVisible = this.setHeaderVisible.bind(this);
this.setNavigations = this.setNavigations.bind(this);
} }
componentDidMount() { componentDidMount() {
@ -666,6 +147,33 @@ export class App extends React.PureComponent {
); );
} }
setNavigations(items) {
this.setState({
navigations: items
});
}
toggleOpen(e, item) {
e.stopPropagation();
e.preventDefault();
const navigations = mapTree(this.state.navigations, i => {
const defaultOpen =
i.isOpen ??
(Array.isArray(i.children) &&
i.children.length &&
!!~i.children.findIndex(item => item.path === location.pathname));
return {
...i,
isOpen: item.label === i.label ? !defaultOpen : defaultOpen
};
});
this.setState({
navigations
});
}
renderHeader() { renderHeader() {
const location = this.props.location; const location = this.props.location;
const theme = this.state.theme; const theme = this.state.theme;
@ -696,8 +204,12 @@ export class App extends React.PureComponent {
<div className={`${theme.ns}Layout-headerBar`}> <div className={`${theme.ns}Layout-headerBar`}>
<ul className={`${theme.ns}Layout-headerBar-links pull-left`}> <ul className={`${theme.ns}Layout-headerBar-links pull-left`}>
<Link to="/docs"></Link> <Link to="/docs" activeClassName="is-active">
<Link to="/examples"></Link>
</Link>
<Link to="/examples" activeClassName="is-active">
</Link>
</ul> </ul>
<div className="hidden-xs p-t pull-right m-l-sm"> <div className="hidden-xs p-t pull-right m-l-sm">
@ -735,50 +247,41 @@ export class App extends React.PureComponent {
); );
} }
toggleOpen(e, item) { renderNavigation(navs, parent?: any) {
e.stopPropagation(); const pathname = location.pathname;
e.preventDefault(); return navs.map(nav => {
const path = nav.path;
const docs = mapTree(this.state.docs, i => ({ const hasChildren = Array.isArray(nav.children) && nav.children.length;
...i, const isOpen =
isOpen: item.id === i.id ? !i.isOpen : i.isOpen nav.isOpen ||
})); (nav.isOpen !== false &&
hasChildren &&
this.setState({ !!~nav.children.findIndex(item => item.path === pathname));
docs
});
}
renderNavigation(children, parent) {
return children.map(child => {
const path = child.path;
const hasChildren =
Array.isArray(child.children) && child.children.length;
return ( return (
<div <div
key={child.id} key={nav.label}
className={classnames('Doc-navigation-item', { className={classnames('Doc-navigation-item', {
'is-active': path === location.pathname, 'is-active': path === location.pathname,
'is-top': !parent, 'is-top': !parent,
'is-open': child.isOpen 'is-open': isOpen
})} })}
> >
<Link to={path}> <Link to={`${path || (hasChildren && nav.children[0].path)}`}>
{child.label} {nav.label}
{hasChildren ? ( {hasChildren ? (
<i <i
className={`iconfont icon-down-arrow ${ className={`iconfont icon-down-arrow ${
child.isOpen ? '' : 'is-flipped' isOpen ? '' : 'is-flipped'
}`} }`}
onClick={e => this.toggleOpen(e, child)} onClick={e => this.toggleOpen(e, nav)}
></i> ></i>
) : null} ) : null}
</Link> </Link>
{hasChildren && child.isOpen {isOpen
? this.renderNavigation(child.children, { ? this.renderNavigation(nav.children || [], {
...child, ...nav,
path path
}) })
: null} : null}
@ -788,10 +291,8 @@ export class App extends React.PureComponent {
} }
render() { render() {
// const pathname = this.props.location.pathname;
const theme = this.state.theme; const theme = this.state.theme;
const groups = groupBy(this.state.docs, d => d.group); const navigations = this.state.navigations;
groups['组件'] = groups['undefined'][0].children;
return ( return (
<Layout <Layout
@ -808,12 +309,12 @@ export class App extends React.PureComponent {
<div className="Doc"> <div className="Doc">
<div className="Doc-nav"> <div className="Doc-nav">
<div className="Doc-navigation"> <div className="Doc-navigation">
{Object.keys(groups).map(groupName => ( {navigations.map(item => (
<div className="Doc-navigationGroup" key={groupName}> <div className="Doc-navigationGroup" key={item.label}>
<div className="Doc-navigationGroup-name"> <div className="Doc-navigationGroup-name">
{groupName || '其他'} {item.label || '其他'}
</div> </div>
{this.renderNavigation(groups[groupName])} {this.renderNavigation(item.children)}
</div> </div>
))} ))}
</div> </div>
@ -821,6 +322,7 @@ export class App extends React.PureComponent {
{React.cloneElement(this.props.children, { {React.cloneElement(this.props.children, {
...this.props.children.props, ...this.props.children.props,
setNavigations: this.setNavigations,
setAsideFolded: this.setAsideFolded, setAsideFolded: this.setAsideFolded,
setHeaderVisible: this.setHeaderVisible, setHeaderVisible: this.setHeaderVisible,
theme: theme.value, theme: theme.value,
@ -833,7 +335,7 @@ export class App extends React.PureComponent {
} }
} }
function navigations2route(pathPrefix = PathPrefix) { function navigations2route(pathPrefix = PathPrefix, navigations) {
let routes = []; let routes = [];
navigations.forEach(root => { navigations.forEach(root => {
@ -872,20 +374,21 @@ function navigations2route(pathPrefix = PathPrefix) {
export default function entry({pathPrefix}) { export default function entry({pathPrefix}) {
PathPrefix = pathPrefix || PathPrefix; PathPrefix = pathPrefix || PathPrefix;
let history = browserHistory;
// if (process.env.NODE_ENV === 'production') {
// history = hashHistory;
// }
return ( return (
<Router history={history}> <Router history={browserHistory}>
<Route component={App}> <Route component={App}>
<Redirect from={`${ContextPath}/`} to={`${ContextPath}/docs/intro`} /> <Redirect from={`${ContextPath}/`} to={`${ContextPath}/docs/intro`} />
<Redirect from={`${PathPrefix}/`} to={`/docs/intro`} /> <Redirect from={`/examples`} to={`/examples/pages/simple`} />
{navigations2route(PathPrefix)} <Redirect from={`/docs`} to={`/docs/intro`} />
<Route path="*" component={NotFound} /> <Route path="/docs" component={Doc}>
{navigations2route('/docs', docs)}
</Route> </Route>
<Route path="/examples" component={Example}>
{navigations2route('/examples', examples)}
</Route>
</Route>
<Route path="*" component={NotFound} />
</Router> </Router>
); );
} }

View File

@ -1,87 +0,0 @@
import React from 'react';
import makeMarkdownRenderer from './MdRenderer';
export default {
// prefix: ({classnames: cx}) => <li className={cx('AsideNav-divider')} />,
label: '文档',
children: [
{
label: 'AMIS 是什么?',
group: '开始',
icon: 'fa fa-home',
path: '/docs/intro',
getComponent: (location, cb) =>
require(['../../docs/intro.md'], doc => {
cb(null, makeMarkdownRenderer(doc));
})
},
{
label: '快速开始',
group: '开始',
icon: 'fa fa-flash',
path: '/docs/getting-started',
getComponent: (location, cb) =>
require(['../../docs/getting_started.md'], doc => {
cb(null, makeMarkdownRenderer(doc));
})
},
{
label: '基本用法',
group: '开始',
icon: 'fa fa-file',
path: '/docs/basic',
getComponent: (location, cb) =>
require(['../../docs/basic.md'], doc => {
cb(null, makeMarkdownRenderer(doc));
})
},
{
label: '高级用法',
group: '开始',
icon: 'fa fa-rocket',
path: '/docs/advanced',
getComponent: (location, cb) =>
require(['../../docs/advanced.md'], doc => {
cb(null, makeMarkdownRenderer(doc));
})
},
// {{renderer-docs}}
{
label: '动态数据',
group: '开始',
path: '/docs/api',
icon: 'fa fa-cloud',
getComponent: (location, cb) =>
require(['../../docs/api.md'], doc => {
cb(null, makeMarkdownRenderer(doc));
})
},
{
label: '定制功能',
group: '开始',
path: '/docs/custom',
icon: 'fa fa-cubes',
getComponent: (location, cb) =>
require(['../../docs/custom.md'], doc => {
cb(null, makeMarkdownRenderer(doc));
})
},
{
label: '定制样式',
group: '开始',
path: '/docs/style',
icon: 'fa fa-laptop',
getComponent: (location, cb) =>
require(['../../docs/style.md'], doc => {
cb(null, makeMarkdownRenderer(doc));
})
}
]
};

114
examples/components/Doc.tsx Normal file
View File

@ -0,0 +1,114 @@
import React from 'react';
import makeMarkdownRenderer from './MdRenderer';
export const docs = [
{
// prefix: ({classnames: cx}) => <li className={cx('AsideNav-divider')} />,
label: '开始',
children: [
{
label: 'AMIS 是什么?',
icon: 'fa fa-home',
path: '/docs/intro',
getComponent: (location, cb) =>
require(['../../docs/intro.md'], doc => {
cb(null, makeMarkdownRenderer(doc));
})
},
{
label: '快速开始',
icon: 'fa fa-flash',
path: '/docs/getting-started',
getComponent: (location, cb) =>
require(['../../docs/getting_started.md'], doc => {
cb(null, makeMarkdownRenderer(doc));
})
},
{
label: '基本用法',
icon: 'fa fa-file',
path: '/docs/basic',
getComponent: (location, cb) =>
require(['../../docs/basic.md'], doc => {
cb(null, makeMarkdownRenderer(doc));
})
},
{
label: '高级用法',
icon: 'fa fa-rocket',
path: '/docs/advanced',
getComponent: (location, cb) =>
require(['../../docs/advanced.md'], doc => {
cb(null, makeMarkdownRenderer(doc));
})
}
]
},
{
label: '概念',
children: [
{
label: '动态数据',
path: '/docs/api',
icon: 'fa fa-cloud',
getComponent: (location, cb) =>
require(['../../docs/api.md'], doc => {
cb(null, makeMarkdownRenderer(doc));
})
},
{
label: '定制功能',
path: '/docs/custom',
icon: 'fa fa-cubes',
getComponent: (location, cb) =>
require(['../../docs/custom.md'], doc => {
cb(null, makeMarkdownRenderer(doc));
})
},
{
label: '定制样式',
path: '/docs/style',
icon: 'fa fa-laptop',
getComponent: (location, cb) =>
require(['../../docs/style.md'], doc => {
cb(null, makeMarkdownRenderer(doc));
})
}
]
},
// {{renderer-docs}}
{
label: '其他',
children: []
}
];
export default class Doc extends React.PureComponent {
componentDidMount() {
this.props.setNavigations(docs);
}
componentDidUpdate() {
console.log('componentDidUpdate');
}
render() {
return (
<>
{React.cloneElement(this.props.children, {
...this.props.children!.props,
theme: this.props.theme,
classPrefix: this.props.classPrefix,
locale: this.props.locale
})}
</>
);
}
}

File diff suppressed because it is too large Load Diff

View File

@ -45,7 +45,7 @@ class CodePreview extends React.Component {
show show
> >
<PopOver <PopOver
offset={{x: 0, y: 50 - height}} offset={{x: 0, y: -height}}
style={{height}} style={{height}}
className=":MDPreview-shcema-preview-popover" className=":MDPreview-shcema-preview-popover"
> >
@ -64,8 +64,7 @@ function isActive(link, location) {
return !!(link.fullPath && link.fullPath === location.hash); return !!(link.fullPath && link.fullPath === location.hash);
} }
export default function (doc) { class Preview extends React.Component {
return class extends React.Component {
static displayName = 'MarkdownRenderer'; static displayName = 'MarkdownRenderer';
ref = null; ref = null;
doms = []; doms = [];
@ -111,7 +110,7 @@ export default function (doc) {
this.ref = ref; this.ref = ref;
if (ref) { if (ref) {
ref.innerHTML = doc.html; ref.innerHTML = this.props.doc.html;
} }
} }
@ -139,6 +138,7 @@ export default function (doc) {
this, this,
<LazyComponent <LazyComponent
{...this.props} {...this.props}
height={height}
container={() => ReactDOM.findDOMNode(this)} container={() => ReactDOM.findDOMNode(this)}
height={height} height={height}
component={CodePreview} component={CodePreview}
@ -152,6 +152,19 @@ export default function (doc) {
} }
} }
render() {
return (
<div className="MDPreview">
<div className="markdown-body" ref={this.divRef}>
Doc
</div>
</div>
);
}
}
export default function (doc) {
return class extends React.Component {
renderHeading(children) { renderHeading(children) {
return children.map((child, idx) => ( return children.map((child, idx) => (
<div <div
@ -170,8 +183,6 @@ export default function (doc) {
} }
render() { render() {
const {location} = this.props;
return ( return (
<> <>
<div className="Doc-content"> <div className="Doc-content">
@ -180,73 +191,9 @@ export default function (doc) {
<h1>{doc.title}</h1> <h1>{doc.title}</h1>
</div> </div>
) : null} ) : null}
<Preview {...this.props} doc={doc} />
<div className="markdown-body" ref={this.divRef}>
Doc
</div>
</div> </div>
{doc.toc && doc.toc.children && doc.toc.children.length > 1 ? ( {doc.toc && doc.toc.children && doc.toc.children.length > 1 ? (
// <Portal container={() => document.querySelector('#asideInner')}>
// <NestedLinks
// navigations={[doc.toc]}
// renderLink={({
// link,
// active,
// toggleExpand,
// depth,
// classnames: cx
// }) => {
// let children = [];
// if (link.children) {
// children.push(
// <span
// key="expand-toggle"
// className={cx(`AsideNav-itemArrow`)}
// />
// );
// }
// link.badge &&
// children.push(
// <b
// key="badge"
// className={cx(
// 'AsideNav-itemBadge',
// link.badgeClassName || 'bg-info'
// )}
// >
// {link.badge}
// </b>
// );
// depth === 1 &&
// children.push(
// <i
// key="icon"
// className={cx('AsideNav-itemIcon fa fa-flag')}
// />
// );
// children.push(
// <span key="label" className={cx('AsideNav-itemLabel')}>
// {link.label}
// </span>
// );
// return link.fragment ? (
// <a href={`#${link.fragment}`}>{children}</a>
// ) : (
// <a
// onClick={link.children ? () => toggleExpand(link) : null}
// >
// {children}
// </a>
// );
// }}
// isActive={link => isActive(link, location)}
// />
// </Portal>
<div className="Doc-toc"> <div className="Doc-toc">
<div className="Doc-headingList"> <div className="Doc-headingList">
{this.renderHeading(doc.toc.children)} {this.renderHeading(doc.toc.children)}

View File

@ -95,6 +95,10 @@ body {
} }
.app-wrapper { .app-wrapper {
// .#{$ns}Layout {
// background: #000;
// }
.a-Layout { .a-Layout {
&-headerBar { &-headerBar {
height: 64px; height: 64px;
@ -120,9 +124,28 @@ body {
height: 64px; height: 64px;
line-height: 64px; line-height: 64px;
font-size: 14px; font-size: 14px;
padding-left: 10px;
> a { > a {
display: inline-block;
color: #333; color: #333;
padding-right: 30px; padding: 0px 22px;
text-decoration: none;
font-weight: 500;
&.is-active {
color: #108cee;
position: relative;
&::before {
content: '';
border-bottom: 2px solid #108cee;
position: absolute;
width: 100%;
left: 0;
bottom: 0;
}
}
} }
} }
} }
@ -258,6 +281,7 @@ body {
padding-left: 0; padding-left: 0;
border-left: 0; border-left: 0;
display: block; display: block;
cursor: pointer;
> a { > a {
color: #333; color: #333;

View File

@ -691,7 +691,7 @@ if (fis.project.currentMedia() === 'publish') {
} }
function docsGennerator(contents, file) { function docsGennerator(contents, file) {
if (file.subpath !== '/examples/components/Doc.jsx') { if (file.subpath !== '/examples/components/Doc.tsx') {
return contents; return contents;
} }