先提交一下
This commit is contained in:
rickcole
parent
6d8f6de746
commit
048789fd7c
|
|
@ -20,4 +20,6 @@ node_modules
|
|||
/toolkit/amis-renderer
|
||||
/toolkit/output
|
||||
/coverage
|
||||
/package-lock.json
|
||||
/package-lock.json
|
||||
_examples
|
||||
docs-new
|
||||
|
|
@ -1,6 +1,5 @@
|
|||
import React from 'react';
|
||||
import NotFound from '../../src/components/404';
|
||||
import NotFound from '../../src/components/404';
|
||||
import Layout from '../../src/components/Layout';
|
||||
import AsideNav from '../../src/components/AsideNav';
|
||||
import {AlertComponent, ToastComponent} from '../../src/components/index';
|
||||
|
|
@ -95,6 +94,8 @@ import TestComponent from './Test';
|
|||
import Select from '../../src/components/Select';
|
||||
import Button from '../../src/components/Button';
|
||||
import DocSearch from './DocSearch';
|
||||
import {groupBy} from 'lodash';
|
||||
import classnames from 'classnames';
|
||||
|
||||
let PathPrefix = '/examples';
|
||||
let ContextPath = '';
|
||||
|
|
@ -571,7 +572,7 @@ const themes = [
|
|||
|
||||
const locales = [
|
||||
{
|
||||
label: '默认',
|
||||
label: '中文',
|
||||
value: 'zh-cn'
|
||||
},
|
||||
|
||||
|
|
@ -590,7 +591,8 @@ export class App extends React.PureComponent {
|
|||
themeIndex: 0,
|
||||
themes: themes,
|
||||
theme: themes[localStorage.getItem('themeIndex') || 0],
|
||||
locale: localStorage.getItem('locale') || ''
|
||||
locale: localStorage.getItem('locale') || '',
|
||||
docs: Docs.children
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
|
|
@ -655,81 +657,11 @@ export class App extends React.PureComponent {
|
|||
}
|
||||
|
||||
renderAside() {
|
||||
const location = this.props.location;
|
||||
|
||||
if (location.pathname === '/edit') {
|
||||
return null;
|
||||
}
|
||||
|
||||
const theme = this.state.theme;
|
||||
|
||||
return (
|
||||
<AsideNav
|
||||
theme={theme.value}
|
||||
navigations={navigations}
|
||||
renderLink={({link, active, toggleExpand, classnames: cx}) => {
|
||||
let children = [];
|
||||
|
||||
if (link.children) {
|
||||
children.push(
|
||||
<span
|
||||
key="expand-toggle"
|
||||
className={cx('AsideNav-itemArrow')}
|
||||
onClick={e => toggleExpand(link, e)}
|
||||
>
|
||||
<Icon icon="right-arrow-bold" className="icon" />
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
link.badge &&
|
||||
children.push(
|
||||
<b
|
||||
key="badge"
|
||||
className={cx(
|
||||
`AsideNav-itemBadge`,
|
||||
link.badgeClassName || 'bg-info'
|
||||
)}
|
||||
>
|
||||
{link.badge}
|
||||
</b>
|
||||
);
|
||||
|
||||
link.icon &&
|
||||
children.push(
|
||||
<i key="icon" className={cx(`AsideNav-itemIcon`, link.icon)} />
|
||||
);
|
||||
|
||||
children.push(
|
||||
<span className={cx(`AsideNav-itemLabel`)} key="label">
|
||||
{link.label}
|
||||
</span>
|
||||
);
|
||||
|
||||
return link.path ? (
|
||||
<Link
|
||||
to={
|
||||
link.path[0] === '/'
|
||||
? ContextPath + link.path
|
||||
: `${ContextPath}${PathPrefix}/${link.path}`
|
||||
}
|
||||
>
|
||||
{children}
|
||||
</Link>
|
||||
) : (
|
||||
<a onClick={link.children ? () => toggleExpand(link) : null}>
|
||||
{children}
|
||||
</a>
|
||||
);
|
||||
renderLink={() => {
|
||||
return null;
|
||||
}}
|
||||
isActive={link =>
|
||||
isActive(
|
||||
link.path && link.path[0] === '/'
|
||||
? ContextPath + link.path
|
||||
: `${ContextPath}${PathPrefix}/${link.path}`,
|
||||
location
|
||||
)
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
@ -747,7 +679,7 @@ export class App extends React.PureComponent {
|
|||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<>
|
||||
<div className={`${theme.ns}Layout-brandBar`}>
|
||||
<button
|
||||
onClick={() => this.setState({offScreen: !this.state.offScreen})}
|
||||
|
|
@ -755,106 +687,147 @@ export class App extends React.PureComponent {
|
|||
>
|
||||
<i className="glyphicon glyphicon-align-justify" />
|
||||
</button>
|
||||
|
||||
<div className={`${theme.ns}Layout-brand`}>
|
||||
<i className="fa fa-paw" />
|
||||
<span className="hidden-folded m-l-sm">AMis Renderer</span>
|
||||
<span className="hidden-folded m-l-sm">AMIS</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={`${theme.ns}Layout-headerBar`}>
|
||||
<div className="nav navbar-nav hidden-xs">
|
||||
<div id="headerLeftBtns" className="m-t-sm">
|
||||
<Button
|
||||
theme={this.state.theme.value}
|
||||
level="link"
|
||||
className="no-shadow navbar-btn"
|
||||
onClick={this.toggleAside}
|
||||
tooltip="展开或收起侧边栏"
|
||||
placement="bottom"
|
||||
iconOnly
|
||||
>
|
||||
<i
|
||||
className={
|
||||
this.state.asideFolded ? 'fa fa-indent' : 'fa fa-dedent'
|
||||
}
|
||||
/>
|
||||
</Button>
|
||||
<ul className={`${theme.ns}Layout-headerBar-links pull-left`}>
|
||||
<Link to="/docs">文档</Link>
|
||||
<Link to="/examples">示例</Link>
|
||||
</ul>
|
||||
|
||||
<Button
|
||||
theme={this.state.theme.value}
|
||||
level="link"
|
||||
className="no-shadow navbar-btn"
|
||||
href="https://github.com/baidu/amis"
|
||||
tooltip="前往 Github 仓库地址"
|
||||
placement="bottom"
|
||||
iconOnly
|
||||
>
|
||||
<i className={'fa fa-github'} />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="hidden-xs p-t pull-right m-l-sm">
|
||||
<Select
|
||||
clearable={false}
|
||||
theme={this.state.theme.value}
|
||||
value={this.state.locale || 'zh-cn'}
|
||||
options={locales}
|
||||
onChange={locale => {
|
||||
this.setState({locale: locale.value});
|
||||
localStorage.setItem('locale', locale.value);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="hidden-xs p-t-sm pull-right m-l-sm">
|
||||
语言：
|
||||
{
|
||||
<Select
|
||||
clearable={false}
|
||||
theme={this.state.theme.value}
|
||||
value={this.state.locale || 'zh-cn'}
|
||||
options={locales}
|
||||
onChange={locale => {
|
||||
this.setState({locale: locale.value});
|
||||
localStorage.setItem('locale', locale.value);
|
||||
}}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div className="hidden-xs p-t-sm pull-right">
|
||||
主题：
|
||||
{
|
||||
<Select
|
||||
clearable={false}
|
||||
theme={this.state.theme.value}
|
||||
value={this.state.theme}
|
||||
options={this.state.themes}
|
||||
onChange={theme => {
|
||||
this.setState({theme});
|
||||
localStorage.setItem(
|
||||
'themeIndex',
|
||||
this.state.themes.indexOf(theme)
|
||||
);
|
||||
}}
|
||||
/>
|
||||
}
|
||||
<div className="hidden-xs p-t pull-right">
|
||||
<Select
|
||||
clearable={false}
|
||||
theme={this.state.theme.value}
|
||||
value={this.state.theme}
|
||||
options={this.state.themes}
|
||||
onChange={theme => {
|
||||
this.setState({theme});
|
||||
localStorage.setItem(
|
||||
'themeIndex',
|
||||
this.state.themes.indexOf(theme)
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<DocSearch theme={this.state.theme.value} />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
toggleOpen(e, item) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
const docs = mapTree(this.state.docs, i => ({
|
||||
...i,
|
||||
isOpen: item.id === i.id ? !i.isOpen : i.isOpen
|
||||
}));
|
||||
|
||||
this.setState({
|
||||
docs
|
||||
});
|
||||
}
|
||||
|
||||
renderNavigation(children, parent) {
|
||||
return children.map(child => {
|
||||
const path = child.path;
|
||||
const hasChildren =
|
||||
Array.isArray(child.children) && child.children.length;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={child.id}
|
||||
className={classnames('Doc-navigation-item', {
|
||||
'is-active': path === location.pathname,
|
||||
'is-top': !parent,
|
||||
'is-open': child.isOpen
|
||||
})}
|
||||
>
|
||||
<Link to={path}>
|
||||
{child.label}
|
||||
{hasChildren ? (
|
||||
<i
|
||||
className={`iconfont icon-down-arrow ${
|
||||
child.isOpen ? '' : 'is-flipped'
|
||||
}`}
|
||||
onClick={e => this.toggleOpen(e, child)}
|
||||
></i>
|
||||
) : null}
|
||||
</Link>
|
||||
|
||||
{hasChildren && child.isOpen
|
||||
? this.renderNavigation(child.children, {
|
||||
...child,
|
||||
path
|
||||
})
|
||||
: null}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
// const pathname = this.props.location.pathname;
|
||||
const theme = this.state.theme;
|
||||
const groups = groupBy(this.state.docs, d => d.group);
|
||||
groups['组件'] = groups['undefined'][0].children;
|
||||
|
||||
return (
|
||||
<Layout
|
||||
theme={theme.value}
|
||||
boxed={true}
|
||||
offScreen={this.state.offScreen}
|
||||
header={this.state.headerVisible ? this.renderHeader() : null}
|
||||
folded={this.state.asideFolded}
|
||||
aside={this.renderAside()}
|
||||
// folded={this.state.asideFolded}
|
||||
// aside={this.renderAside()}
|
||||
>
|
||||
<ToastComponent theme={theme.value} locale={this.state.locale} />
|
||||
<AlertComponent theme={theme.value} locale={this.state.locale} />
|
||||
{React.cloneElement(this.props.children, {
|
||||
...this.props.children.props,
|
||||
setAsideFolded: this.setAsideFolded,
|
||||
setHeaderVisible: this.setHeaderVisible,
|
||||
theme: theme.value,
|
||||
classPrefix: theme.ns,
|
||||
locale: this.state.locale
|
||||
})}
|
||||
|
||||
<div className="Doc">
|
||||
<div className="Doc-nav">
|
||||
<div className="Doc-navigation">
|
||||
{Object.keys(groups).map(groupName => (
|
||||
<div className="Doc-navigationGroup" key={groupName}>
|
||||
<div className="Doc-navigationGroup-name">
|
||||
{groupName || '其他'}
|
||||
</div>
|
||||
{this.renderNavigation(groups[groupName])}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{React.cloneElement(this.props.children, {
|
||||
...this.props.children.props,
|
||||
setAsideFolded: this.setAsideFolded,
|
||||
setHeaderVisible: this.setHeaderVisible,
|
||||
theme: theme.value,
|
||||
classPrefix: theme.ns,
|
||||
locale: this.state.locale
|
||||
})}
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
|
@ -7,6 +7,7 @@ export default {
|
|||
children: [
|
||||
{
|
||||
label: 'AMIS 是什么？',
|
||||
group: '开始',
|
||||
icon: 'fa fa-home',
|
||||
path: '/docs/intro',
|
||||
getComponent: (location, cb) =>
|
||||
|
|
@ -17,6 +18,7 @@ export default {
|
|||
|
||||
{
|
||||
label: '快速开始',
|
||||
group: '开始',
|
||||
icon: 'fa fa-flash',
|
||||
path: '/docs/getting-started',
|
||||
getComponent: (location, cb) =>
|
||||
|
|
@ -27,6 +29,7 @@ export default {
|
|||
|
||||
{
|
||||
label: '基本用法',
|
||||
group: '开始',
|
||||
icon: 'fa fa-file',
|
||||
path: '/docs/basic',
|
||||
getComponent: (location, cb) =>
|
||||
|
|
@ -37,6 +40,7 @@ export default {
|
|||
|
||||
{
|
||||
label: '高级用法',
|
||||
group: '开始',
|
||||
icon: 'fa fa-rocket',
|
||||
path: '/docs/advanced',
|
||||
getComponent: (location, cb) =>
|
||||
|
|
@ -49,6 +53,7 @@ export default {
|
|||
|
||||
{
|
||||
label: '动态数据',
|
||||
group: '开始',
|
||||
path: '/docs/api',
|
||||
icon: 'fa fa-cloud',
|
||||
getComponent: (location, cb) =>
|
||||
|
|
@ -59,6 +64,7 @@ export default {
|
|||
|
||||
{
|
||||
label: '定制功能',
|
||||
group: '开始',
|
||||
path: '/docs/custom',
|
||||
icon: 'fa fa-cubes',
|
||||
getComponent: (location, cb) =>
|
||||
|
|
@ -69,6 +75,7 @@ export default {
|
|||
|
||||
{
|
||||
label: '定制样式',
|
||||
group: '开始',
|
||||
path: '/docs/style',
|
||||
icon: 'fa fa-laptop',
|
||||
getComponent: (location, cb) =>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ const FormComponent = makeSchemaRenderer({
|
|||
type: 'form',
|
||||
mode: 'inline',
|
||||
wrapWithPanel: false,
|
||||
className: 'pull-right m-t-sm m-r',
|
||||
className: 'Doc-search',
|
||||
controls: [
|
||||
{
|
||||
type: 'input-group',
|
||||
|
|
@ -13,15 +13,15 @@ const FormComponent = makeSchemaRenderer({
|
|||
controls: [
|
||||
{
|
||||
type: 'icon',
|
||||
addOnclassName: 'no-bg',
|
||||
addOnclassName: 'no-bg no-border p-r-none p-l',
|
||||
className: 'text-sm',
|
||||
icon: 'search',
|
||||
vendor: 'iconfont'
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
placeholder: '搜索文档',
|
||||
inputClassName: 'b-l-none p-l-none',
|
||||
placeholder: '搜索...',
|
||||
inputClassName: 'no-border',
|
||||
name: 'docsearch'
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -0,0 +1,787 @@
|
|||
// import React from 'react';
|
||||
// import NotFound from '../../src/components/404';
|
||||
// import Layout from '../../src/components/Layout';
|
||||
// import AsideNav from '../../src/components/AsideNav';
|
||||
// import {AlertComponent, ToastComponent} from '../../src/components/index';
|
||||
// import {mapTree} from '../../src/utils/helper';
|
||||
// import {Icon} from '../../src/components/icons';
|
||||
// import '../../src/locale/en';
|
||||
// import {
|
||||
// Router,
|
||||
// Route,
|
||||
// IndexRoute,
|
||||
// browserHistory,
|
||||
// hashHistory,
|
||||
// Link,
|
||||
// Redirect,
|
||||
// withRouter
|
||||
// } 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 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 Button from '../../src/components/Button';
|
||||
// import DocSearch from './DocSearch';
|
||||
|
||||
// export const examples = [
|
||||
// {
|
||||
// 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
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
// ];
|
||||
|
||||
// @withRouter
|
||||
// export default class Example extends React.PureComponent {
|
||||
// state = {
|
||||
// asideFolded: localStorage.getItem('asideFolded') === 'true',
|
||||
// offScreen: false,
|
||||
// headerVisible: true,
|
||||
// themeIndex: 0,
|
||||
// themes: themes,
|
||||
// theme: themes[localStorage.getItem('themeIndex') || 0],
|
||||
// locale: localStorage.getItem('locale') || '',
|
||||
// docs: Docs.children
|
||||
// };
|
||||
|
||||
// constructor(props) {
|
||||
// super(props);
|
||||
|
||||
// this.toggleAside = this.toggleAside.bind(this);
|
||||
// this.setAsideFolded = this.setAsideFolded.bind(this);
|
||||
// this.setHeaderVisible = this.setHeaderVisible.bind(this);
|
||||
// }
|
||||
|
||||
// componentDidMount() {
|
||||
// if (this.state.theme.value !== 'default') {
|
||||
// document.querySelectorAll('link[title]').forEach(item => {
|
||||
// item.disabled = true;
|
||||
// });
|
||||
// document.querySelector(
|
||||
// `link[title=${this.state.theme.value}]`
|
||||
// ).disabled = false;
|
||||
// }
|
||||
// }
|
||||
|
||||
// componentDidUpdate(preProps, preState) {
|
||||
// const props = this.props;
|
||||
|
||||
// if (preState.theme.value !== this.state.theme.value) {
|
||||
// document.querySelector(
|
||||
// `link[title=${preState.theme.value}]`
|
||||
// ).disabled = true;
|
||||
// document.querySelector(
|
||||
// `link[title=${this.state.theme.value}]`
|
||||
// ).disabled = false;
|
||||
// }
|
||||
|
||||
// if (props.location.pathname !== preProps.location.pathname) {
|
||||
// this.setState(
|
||||
// {
|
||||
// offScreen: false
|
||||
// },
|
||||
// () => window.scrollTo(0, 0)
|
||||
// );
|
||||
|
||||
// const pageURL = props.location.pathname;
|
||||
// _hmt && _hmt.push(['_trackPageview', pageURL]);
|
||||
// }
|
||||
// }
|
||||
|
||||
// toggleAside() {
|
||||
// this.setAsideFolded(!this.state.asideFolded);
|
||||
// }
|
||||
|
||||
// setAsideFolded(folded = false) {
|
||||
// localStorage.setItem('asideFolded', JSON.stringify(folded));
|
||||
// this.setState({
|
||||
// asideFolded: folded
|
||||
// });
|
||||
// }
|
||||
|
||||
// setHeaderVisible(visible = false) {
|
||||
// this.setState({
|
||||
// headerVisible: visible
|
||||
// });
|
||||
// }
|
||||
|
||||
// renderAside() {
|
||||
// return (
|
||||
// <AsideNav
|
||||
// renderLink={() => {
|
||||
// return null;
|
||||
// }}
|
||||
// />
|
||||
// );
|
||||
// }
|
||||
|
||||
// renderHeader() {
|
||||
// const location = this.props.location;
|
||||
// const theme = this.state.theme;
|
||||
|
||||
// if (location.pathname === '/edit') {
|
||||
// return (
|
||||
// <div id="headerBar" className="box-shadow bg-dark">
|
||||
// <div className={`${theme.ns}Layout-brand`}>AMis 可视化编辑器</div>
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
|
||||
// return (
|
||||
// <>
|
||||
// <div className={`${theme.ns}Layout-brandBar`}>
|
||||
// <button
|
||||
// onClick={() => this.setState({offScreen: !this.state.offScreen})}
|
||||
// className="pull-right visible-xs"
|
||||
// >
|
||||
// <i className="glyphicon glyphicon-align-justify" />
|
||||
// </button>
|
||||
|
||||
// <div className={`${theme.ns}Layout-brand`}>
|
||||
// <i className="fa fa-paw" />
|
||||
// <span className="hidden-folded m-l-sm">AMIS</span>
|
||||
// </div>
|
||||
// </div>
|
||||
|
||||
// <div className={`${theme.ns}Layout-headerBar`}>
|
||||
// <ul className={`${theme.ns}Layout-headerBar-links pull-left`}>
|
||||
// <Link to="/docs">文档</Link>
|
||||
// <Link to="/examples">示例</Link>
|
||||
// </ul>
|
||||
|
||||
// <div className="hidden-xs p-t pull-right m-l-sm">
|
||||
// <Select
|
||||
// clearable={false}
|
||||
// theme={this.state.theme.value}
|
||||
// value={this.state.locale || 'zh-cn'}
|
||||
// options={locales}
|
||||
// onChange={locale => {
|
||||
// this.setState({locale: locale.value});
|
||||
// localStorage.setItem('locale', locale.value);
|
||||
// }}
|
||||
// />
|
||||
// </div>
|
||||
|
||||
// <div className="hidden-xs p-t pull-right">
|
||||
// <Select
|
||||
// clearable={false}
|
||||
// theme={this.state.theme.value}
|
||||
// value={this.state.theme}
|
||||
// options={this.state.themes}
|
||||
// onChange={theme => {
|
||||
// this.setState({theme});
|
||||
// localStorage.setItem(
|
||||
// 'themeIndex',
|
||||
// this.state.themes.indexOf(theme)
|
||||
// );
|
||||
// }}
|
||||
// />
|
||||
// </div>
|
||||
|
||||
// <DocSearch theme={this.state.theme.value} />
|
||||
// </div>
|
||||
// </>
|
||||
// );
|
||||
// }
|
||||
|
||||
// toggleOpen(e, item) {
|
||||
// e.stopPropagation();
|
||||
// e.preventDefault();
|
||||
|
||||
// const docs = mapTree(this.state.docs, i => ({
|
||||
// ...i,
|
||||
// isOpen: item.id === i.id ? !i.isOpen : i.isOpen
|
||||
// }));
|
||||
|
||||
// this.setState({
|
||||
// docs
|
||||
// });
|
||||
// }
|
||||
|
||||
// renderNavigation(children, parent) {
|
||||
// return children.map(child => {
|
||||
// const path = child.path;
|
||||
// const hasChildren =
|
||||
// Array.isArray(child.children) && child.children.length;
|
||||
|
||||
// return (
|
||||
// <div
|
||||
// key={child.id}
|
||||
// className={classnames('Doc-navigation-item', {
|
||||
// 'is-active': path === location.pathname,
|
||||
// 'is-top': !parent,
|
||||
// 'is-open': child.isOpen
|
||||
// })}
|
||||
// >
|
||||
// <Link to={path}>
|
||||
// {child.label}
|
||||
// {hasChildren ? (
|
||||
// <i
|
||||
// className={`iconfont icon-down-arrow ${
|
||||
// child.isOpen ? '' : 'is-flipped'
|
||||
// }`}
|
||||
// onClick={e => this.toggleOpen(e, child)}
|
||||
// ></i>
|
||||
// ) : null}
|
||||
// </Link>
|
||||
|
||||
// {hasChildren && child.isOpen
|
||||
// ? this.renderNavigation(child.children, {
|
||||
// ...child,
|
||||
// path
|
||||
// })
|
||||
// : null}
|
||||
// </div>
|
||||
// );
|
||||
// });
|
||||
// }
|
||||
|
||||
// render() {
|
||||
// // const pathname = this.props.location.pathname;
|
||||
// const theme = this.state.theme;
|
||||
// const groups = groupBy(this.state.docs, d => d.group);
|
||||
// groups['组件'] = groups['undefined'][0].children;
|
||||
|
||||
// return (
|
||||
// <Layout
|
||||
// theme={theme.value}
|
||||
// boxed={true}
|
||||
// offScreen={this.state.offScreen}
|
||||
// header={this.state.headerVisible ? this.renderHeader() : null}
|
||||
// // folded={this.state.asideFolded}
|
||||
// // aside={this.renderAside()}
|
||||
// >
|
||||
// <ToastComponent theme={theme.value} locale={this.state.locale} />
|
||||
// <AlertComponent theme={theme.value} locale={this.state.locale} />
|
||||
|
||||
// <div className="Doc">
|
||||
// <div className="Doc-nav">
|
||||
// <div className="Doc-navigation">
|
||||
// {Object.keys(groups).map(groupName => (
|
||||
// <div className="Doc-navigationGroup" key={groupName}>
|
||||
// <div className="Doc-navigationGroup-name">
|
||||
// {groupName || '其他'}
|
||||
// </div>
|
||||
// {this.renderNavigation(groups[groupName])}
|
||||
// </div>
|
||||
// ))}
|
||||
// </div>
|
||||
// </div>
|
||||
|
||||
// {React.cloneElement(this.props.children, {
|
||||
// ...this.props.children.props,
|
||||
// setAsideFolded: this.setAsideFolded,
|
||||
// setHeaderVisible: this.setHeaderVisible,
|
||||
// theme: theme.value,
|
||||
// classPrefix: theme.ns,
|
||||
// locale: this.state.locale
|
||||
// })}
|
||||
// </div>
|
||||
// </Layout>
|
||||
// );
|
||||
// }
|
||||
// }
|
||||
|
|
@ -9,6 +9,7 @@ import Overlay from '../../src/components/Overlay';
|
|||
import PopOver from '../../src/components/PopOver';
|
||||
import NestedLinks from '../../src/components/AsideNav';
|
||||
import {Portal} from 'react-overlays';
|
||||
import classnames from 'classnames';
|
||||
|
||||
class CodePreview extends React.Component {
|
||||
state = {
|
||||
|
|
@ -44,11 +45,11 @@ class CodePreview extends React.Component {
|
|||
show
|
||||
>
|
||||
<PopOver
|
||||
offset={{x: 0, y: -height}}
|
||||
offset={{x: 0, y: 50 - height}}
|
||||
style={{height}}
|
||||
className="doc-shcema-preview-popover"
|
||||
className=":MDPreview-shcema-preview-popover"
|
||||
>
|
||||
<div className="doc-schema-preview">
|
||||
<div className="MDPreview-schema-preview">
|
||||
<PlayGround {...rest} vertical />
|
||||
</div>
|
||||
</PopOver>
|
||||
|
|
@ -63,7 +64,7 @@ function isActive(link, location) {
|
|||
return !!(link.fullPath && link.fullPath === location.hash);
|
||||
}
|
||||
|
||||
export default function(doc) {
|
||||
export default function (doc) {
|
||||
return class extends React.Component {
|
||||
static displayName = 'MarkdownRenderer';
|
||||
ref = null;
|
||||
|
|
@ -151,79 +152,108 @@ export default function(doc) {
|
|||
}
|
||||
}
|
||||
|
||||
renderHeading(children) {
|
||||
return children.map((child, idx) => (
|
||||
<div
|
||||
key={`${child.fullPath}-${idx}`}
|
||||
className={classnames('Doc-headingList-item', {
|
||||
'is-active': this.props.location.hash === child.fullPath
|
||||
})}
|
||||
>
|
||||
<a href={`#${child.fragment}`}>{child.label}</a>
|
||||
|
||||
{child.children && child.children.length
|
||||
? this.renderHeading(child.children)
|
||||
: null}
|
||||
</div>
|
||||
));
|
||||
}
|
||||
|
||||
render() {
|
||||
const {location} = this.props;
|
||||
|
||||
return (
|
||||
<div className="pos-rlt text-left">
|
||||
{doc.title ? <TitleBar title={doc.title} /> : null}
|
||||
<div className="markdown-body" ref={this.divRef}>
|
||||
Doc
|
||||
<>
|
||||
<div className="Doc-content">
|
||||
{doc.title ? (
|
||||
<div className="Doc-title">
|
||||
<h1>{doc.title}</h1>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="markdown-body" ref={this.divRef}>
|
||||
Doc
|
||||
</div>
|
||||
</div>
|
||||
{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 = [];
|
||||
// <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`)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
// 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>
|
||||
);
|
||||
// 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')}
|
||||
/>
|
||||
);
|
||||
// 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>
|
||||
);
|
||||
// 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>
|
||||
// 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-headingList">
|
||||
{this.renderHeading(doc.toc.children)}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -262,7 +262,7 @@ export default class PlayGround extends React.Component {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row-row" style={{height: 200}}>
|
||||
<div className="row-row b-t" style={{height: 200}}>
|
||||
<div className="cell">{this.renderEditor()}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
105
examples/doc.css
105
examples/doc.css
|
|
@ -14,7 +14,7 @@
|
|||
word-wrap: break-word;
|
||||
box-sizing: border-box;
|
||||
min-width: 200px;
|
||||
max-width: 980px;
|
||||
/* max-width: 980px; */
|
||||
/* margin: 0 auto; */
|
||||
padding: 25px 45px 25px;
|
||||
}
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
font-weight: bolder;
|
||||
}
|
||||
|
||||
.markdown-body > h1 {
|
||||
.markdown-body>h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
|
@ -138,38 +138,38 @@
|
|||
content: "";
|
||||
}
|
||||
|
||||
.markdown-body > h1,
|
||||
.markdown-body > h2,
|
||||
.markdown-body > h3,
|
||||
.markdown-body > h4,
|
||||
.markdown-body > h5,
|
||||
.markdown-body > h6 {
|
||||
.markdown-body>h1,
|
||||
.markdown-body>h2,
|
||||
.markdown-body>h3,
|
||||
.markdown-body>h4,
|
||||
.markdown-body>h5,
|
||||
.markdown-body>h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.markdown-body > h1 {
|
||||
.markdown-body>h1 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.markdown-body > h2 {
|
||||
.markdown-body>h2 {
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
.markdown-body > h3 {
|
||||
.markdown-body>h3 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.markdown-body > h4 {
|
||||
.markdown-body>h4 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.markdown-body > h5 {
|
||||
.markdown-body>h5 {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.markdown-body > h6 {
|
||||
.markdown-body>h6 {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
|
|
@ -282,95 +282,95 @@
|
|||
outline: none;
|
||||
}
|
||||
|
||||
.markdown-body > h1,
|
||||
.markdown-body > h2,
|
||||
.markdown-body > h3,
|
||||
.markdown-body > h4,
|
||||
.markdown-body > h5,
|
||||
.markdown-body > h6 {
|
||||
.markdown-body>h1,
|
||||
.markdown-body>h2,
|
||||
.markdown-body>h3,
|
||||
.markdown-body>h4,
|
||||
.markdown-body>h5,
|
||||
.markdown-body>h6 {
|
||||
margin-top: 1em;
|
||||
margin-bottom: 16px;
|
||||
font-weight: bold;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.markdown-body > h1 .octicon-link,
|
||||
.markdown-body > h2 .octicon-link,
|
||||
.markdown-body > h3 .octicon-link,
|
||||
.markdown-body > h4 .octicon-link,
|
||||
.markdown-body > h5 .octicon-link,
|
||||
.markdown-body > h6 .octicon-link {
|
||||
.markdown-body>h1 .octicon-link,
|
||||
.markdown-body>h2 .octicon-link,
|
||||
.markdown-body>h3 .octicon-link,
|
||||
.markdown-body>h4 .octicon-link,
|
||||
.markdown-body>h5 .octicon-link,
|
||||
.markdown-body>h6 .octicon-link {
|
||||
color: #000;
|
||||
vertical-align: middle;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.markdown-body > h1:hover .anchor,
|
||||
.markdown-body > h2:hover .anchor,
|
||||
.markdown-body > h3:hover .anchor,
|
||||
.markdown-body > h4:hover .anchor,
|
||||
.markdown-body > h5:hover .anchor,
|
||||
.markdown-body > h6:hover .anchor {
|
||||
.markdown-body>h1:hover .anchor,
|
||||
.markdown-body>h2:hover .anchor,
|
||||
.markdown-body>h3:hover .anchor,
|
||||
.markdown-body>h4:hover .anchor,
|
||||
.markdown-body>h5:hover .anchor,
|
||||
.markdown-body>h6:hover .anchor {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.markdown-body > h1:hover .anchor .octicon-link,
|
||||
.markdown-body > h2:hover .anchor .octicon-link,
|
||||
.markdown-body > h3:hover .anchor .octicon-link,
|
||||
.markdown-body > h4:hover .anchor .octicon-link,
|
||||
.markdown-body > h5:hover .anchor .octicon-link,
|
||||
.markdown-body > h6:hover .anchor .octicon-link {
|
||||
.markdown-body>h1:hover .anchor .octicon-link,
|
||||
.markdown-body>h2:hover .anchor .octicon-link,
|
||||
.markdown-body>h3:hover .anchor .octicon-link,
|
||||
.markdown-body>h4:hover .anchor .octicon-link,
|
||||
.markdown-body>h5:hover .anchor .octicon-link,
|
||||
.markdown-body>h6:hover .anchor .octicon-link {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.markdown-body > h1 {
|
||||
.markdown-body>h1 {
|
||||
padding-bottom: 0.3em;
|
||||
font-size: 2.25em;
|
||||
line-height: 1.2;
|
||||
border-bottom: 1px solid #dee5e7;
|
||||
}
|
||||
|
||||
.markdown-body > h1 .anchor {
|
||||
.markdown-body>h1 .anchor {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.markdown-body > h2 {
|
||||
.markdown-body>h2 {
|
||||
padding-bottom: 0.3em;
|
||||
font-size: 1.75em;
|
||||
line-height: 1.225;
|
||||
border-bottom: 1px solid #dee5e7;
|
||||
}
|
||||
|
||||
.markdown-body > h2 .anchor {
|
||||
.markdown-body>h2 .anchor {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.markdown-body > h3 {
|
||||
.markdown-body>h3 {
|
||||
font-size: 1.5em;
|
||||
line-height: 1.43;
|
||||
}
|
||||
|
||||
.markdown-body > h3 .anchor {
|
||||
.markdown-body>h3 .anchor {
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.markdown-body > h4 {
|
||||
.markdown-body>h4 {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
.markdown-body > h4 .anchor {
|
||||
.markdown-body>h4 .anchor {
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.markdown-body > h5 {
|
||||
.markdown-body>h5 {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.markdown-body > h5 .anchor {
|
||||
.markdown-body>h5 .anchor {
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.markdown-body > h6 {
|
||||
.markdown-body>h6 {
|
||||
font-size: 1em;
|
||||
color: #777;
|
||||
}
|
||||
|
|
@ -486,6 +486,7 @@
|
|||
border: 1px solid #ddd;
|
||||
box-shadow: 0 8px 18px 0 rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.markdown-body img {
|
||||
max-width: 800px;
|
||||
|
|
@ -498,7 +499,7 @@
|
|||
padding-bottom: 0.2em;
|
||||
margin: 0;
|
||||
font-size: 85%;
|
||||
background-color: rgba(0,0,0,0.04);
|
||||
background-color: rgba(0, 0, 0, 0.04);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
|
|
@ -750,10 +751,10 @@
|
|||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
.markdown-body > .amis-preview {
|
||||
.markdown-body>.amis-preview {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.amis-doc pre {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,11 @@
|
|||
// // @import "../node_modules/@fex/aui/scss/variables";
|
||||
@import '../scss/mixins';
|
||||
@import '../scss/functions';
|
||||
@import '../scss/variables';
|
||||
|
||||
body {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.page-play,
|
||||
.page-edit {
|
||||
&:before {
|
||||
|
|
@ -45,20 +49,27 @@
|
|||
}
|
||||
}
|
||||
|
||||
.doc-shcema-preview-popover {
|
||||
box-shadow: none !important;
|
||||
margin-top: -1px !important;
|
||||
padding: 0 45px !important;
|
||||
left: 0 !important;
|
||||
width: 100% !important;
|
||||
max-width: 980px !important;
|
||||
z-index: 1 !important;
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
.MDPreview {
|
||||
flex: 1 auto;
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
.doc-schema-preview {
|
||||
&-shcema-preview-popover {
|
||||
box-shadow: none !important;
|
||||
margin-top: -1px !important;
|
||||
padding: 0 45px !important;
|
||||
left: 1px !important;
|
||||
width: 100% !important;
|
||||
// max-width: 980px !important;
|
||||
z-index: 1 !important;
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
&-schema-preview {
|
||||
border: 1px solid #ddd;
|
||||
background: rgb(240, 243, 244);
|
||||
// background: rgb(240, 243, 244);
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
|
@ -82,3 +93,372 @@
|
|||
> .tab-content {
|
||||
bottom: 50px;
|
||||
}
|
||||
|
||||
.app-wrapper {
|
||||
.a-Layout {
|
||||
&-headerBar {
|
||||
height: 64px;
|
||||
padding-right: 20px;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
top: 50%;
|
||||
right: 0;
|
||||
height: 32px;
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
transform: translateY(-50%);
|
||||
border-left: 1px solid #e8ebee;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
left: -19px;
|
||||
}
|
||||
|
||||
&-links {
|
||||
height: 64px;
|
||||
line-height: 64px;
|
||||
font-size: 14px;
|
||||
> a {
|
||||
color: #333;
|
||||
padding-right: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-brandBar {
|
||||
background-color: transparent;
|
||||
position: absolute;
|
||||
left: -220px;
|
||||
|
||||
.a-Layout-brand {
|
||||
color: #333;
|
||||
height: 64px;
|
||||
line-height: 64px;
|
||||
font-size: 24px;
|
||||
padding: 0;
|
||||
font-weight: 400;
|
||||
|
||||
i {
|
||||
color: #108cee;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
&-header {
|
||||
height: 64px;
|
||||
box-shadow: none;
|
||||
|
||||
&::before {
|
||||
position: fixed;
|
||||
height: 64px;
|
||||
content: '';
|
||||
z-index: -1;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.a-Doc-search {
|
||||
position: absolute;
|
||||
right: -160px;
|
||||
padding-top: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.Doc {
|
||||
.anchor {
|
||||
padding-top: 110px;
|
||||
margin-top: -110px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&-nav,
|
||||
&-toc {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
&-nav,
|
||||
&-toc {
|
||||
a {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
> div {
|
||||
scrollbar-width: none;
|
||||
/* Firefox */
|
||||
-ms-overflow-style: none;
|
||||
/* IE 10+ */
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
box-shadow: none !important;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 3px !important;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-nav {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
&-toc {
|
||||
margin: 30px 0;
|
||||
width: 220px;
|
||||
}
|
||||
|
||||
&-navigation {
|
||||
&-item {
|
||||
padding-left: 20px;
|
||||
border-left: 1px solid #e8ebee;
|
||||
position: relative;
|
||||
|
||||
> a {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #666;
|
||||
padding-left: 0;
|
||||
padding-right: 20px;
|
||||
|
||||
&:hover {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 12px;
|
||||
padding: 5px;
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&.is-top {
|
||||
padding-left: 0;
|
||||
border-left: 0;
|
||||
display: block;
|
||||
|
||||
> a {
|
||||
color: #333;
|
||||
|
||||
&:hover {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
> a {
|
||||
color: #108cee;
|
||||
|
||||
&:hover {
|
||||
color: #108cee;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.Doc-navigationGroup {
|
||||
margin-bottom: 30px;
|
||||
|
||||
&-name {
|
||||
color: #999;
|
||||
font-weight: 700;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-headingList {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
|
||||
&-item {
|
||||
padding-left: 15px;
|
||||
|
||||
a {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
&::before {
|
||||
content: ' ';
|
||||
border-left: 2px solid #108cee;
|
||||
}
|
||||
> a {
|
||||
color: #108cee;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-content {
|
||||
.Doc-title {
|
||||
margin-top: 50px;
|
||||
padding-left: 45px;
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.markdown-body {
|
||||
margin-top: 20px;
|
||||
|
||||
> *:first-child {
|
||||
margin-top: 36px !important;
|
||||
}
|
||||
|
||||
> h1,
|
||||
> h2 {
|
||||
border-top: 1px solid #e0e7ec;
|
||||
border-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
padding-top: 35px;
|
||||
margin: 55px 0 35px;
|
||||
}
|
||||
|
||||
> p,
|
||||
> blockquote,
|
||||
> ul,
|
||||
> ol,
|
||||
> dl,
|
||||
> table,
|
||||
> pre {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-footer {
|
||||
margin: 60px 0 80px;
|
||||
padding-bottom: 25px;
|
||||
border-bottom: 2px solid #e0e8ef;
|
||||
|
||||
.Doc-navLinks {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
&--prev,
|
||||
&--next {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 330px;
|
||||
height: 80px;
|
||||
border: 1px solid #e8ebee;
|
||||
border-radius: 3px;
|
||||
padding: 20px;
|
||||
transition: border-color ease-out 0.3s, color ease-out 0.3s;
|
||||
box-shadow: #e8ebee 0px 3px 8px 0px;
|
||||
color: #666;
|
||||
|
||||
&:hover {
|
||||
border-color: #108cee;
|
||||
color: #108cee;
|
||||
|
||||
.Doc-navLinks-title {
|
||||
color: #108cee;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child:nth-last-child(1) {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&-icon {
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
&-body {
|
||||
.Doc-navLinks-subtitle {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.Doc-navLinks-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
transition: color ease-out 0.3s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.is-flipped {
|
||||
transform: rotateX(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
.Doc {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
&-content {
|
||||
flex: 1 auto;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
&-toc {
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
&-toc > div {
|
||||
position: fixed;
|
||||
width: 220px;
|
||||
border-left: 1px solid #e8ebee;
|
||||
top: 100px;
|
||||
// bottom: 30px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
&-nav > div {
|
||||
position: fixed;
|
||||
width: 200px;
|
||||
top: 100px;
|
||||
bottom: 0;
|
||||
overflow-y: auto;
|
||||
border-right: 1px solid #e8ebee;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1640px) {
|
||||
.Doc {
|
||||
&-toc {
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
&-nav {
|
||||
width: 1px;
|
||||
|
||||
> div {
|
||||
margin-left: -219px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue