diff --git a/.gitignore b/.gitignore index 994d30b1..84b71c2c 100644 --- a/.gitignore +++ b/.gitignore @@ -20,4 +20,6 @@ node_modules /toolkit/amis-renderer /toolkit/output /coverage -/package-lock.json \ No newline at end of file +/package-lock.json +_examples +docs-new \ No newline at end of file diff --git a/examples/components/App.jsx b/examples/components/App.tsx similarity index 81% rename from examples/components/App.jsx rename to examples/components/App.tsx index 72742cf4..4da00812 100644 --- a/examples/components/App.jsx +++ b/examples/components/App.tsx @@ -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 ( { - let children = []; - - if (link.children) { - children.push( - toggleExpand(link, e)} - > - - - ); - } - - link.badge && - children.push( - - {link.badge} - - ); - - link.icon && - children.push( - - ); - - children.push( - - {link.label} - - ); - - return link.path ? ( - - {children} - - ) : ( - toggleExpand(link) : null}> - {children} - - ); + 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 ( -
+ <>
+
- AMis Renderer + AMIS
+
-
-
- +
    + 文档 + 示例 +
- -
+
+ { - this.setState({locale: locale.value}); - localStorage.setItem('locale', locale.value); - }} - /> - } -
- -
- 主题： - { - { + this.setState({theme}); + localStorage.setItem( + 'themeIndex', + this.state.themes.indexOf(theme) + ); + }} + />
-
+ ); } + 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 ( +
+ + {child.label} + {hasChildren ? ( + this.toggleOpen(e, child)} + > + ) : null} + + + {hasChildren && child.isOpen + ? this.renderNavigation(child.children, { + ...child, + path + }) + : null} +
+ ); + }); + } + 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 ( - {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 - })} + +
+
+
+ {Object.keys(groups).map(groupName => ( +
+
+ {groupName || '其他'} +
+ {this.renderNavigation(groups[groupName])} +
+ ))} +
+
+ + {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 + })} +
); } diff --git a/examples/components/Doc.jsx b/examples/components/Doc.jsx index 72424879..802599b4 100644 --- a/examples/components/Doc.jsx +++ b/examples/components/Doc.jsx @@ -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) => diff --git a/examples/components/DocSearch.jsx b/examples/components/DocSearch.jsx index cd98a502..8352c289 100644 --- a/examples/components/DocSearch.jsx +++ b/examples/components/DocSearch.jsx @@ -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' } ] diff --git a/examples/components/Example.tsx b/examples/components/Example.tsx new file mode 100644 index 00000000..a1a6ea71 --- /dev/null +++ b/examples/components/Example.tsx @@ -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}) =>
  • , +// 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 ( +// { +// return null; +// }} +// /> +// ); +// } + +// renderHeader() { +// const location = this.props.location; +// const theme = this.state.theme; + +// if (location.pathname === '/edit') { +// return ( +//
    +//
    AMis 可视化编辑器
    +//
    +// ); +// } + +// return ( +// <> +//
    +// + +//
    +// +// AMIS +//
    +//
    + +//
    +//
      +// 文档 +// 示例 +//
    + +//
    +// { +// this.setState({theme}); +// localStorage.setItem( +// 'themeIndex', +// this.state.themes.indexOf(theme) +// ); +// }} +// /> +//
    + +// +//
    +// +// ); +// } + +// 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 ( +//
    +// +// {child.label} +// {hasChildren ? ( +// this.toggleOpen(e, child)} +// > +// ) : null} +// + +// {hasChildren && child.isOpen +// ? this.renderNavigation(child.children, { +// ...child, +// path +// }) +// : null} +//
    +// ); +// }); +// } + +// 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 ( +// +// +// + +//
    +//
    +//
    +// {Object.keys(groups).map(groupName => ( +//
    +//
    +// {groupName || '其他'} +//
    +// {this.renderNavigation(groups[groupName])} +//
    +// ))} +//
    +//
    + +// {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 +// })} +//
    +//     +// ); +// } +// } diff --git a/examples/components/MdRenderer.jsx b/examples/components/MdRenderer.jsx index bf3a8377..26673ffb 100644 --- a/examples/components/MdRenderer.jsx +++ b/examples/components/MdRenderer.jsx @@ -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 > -
    +
    @@ -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) => ( +
    + {child.label} + + {child.children && child.children.length + ? this.renderHeading(child.children) + : null} +
    + )); + } + render() { const {location} = this.props; return ( -
    - {doc.title ? : null} -
    - Doc + <> +
    + {doc.title ? ( +
    +

    {doc.title}

    +
    + ) : null} + +
    + Doc +
    {doc.toc && doc.toc.children && doc.toc.children.length > 1 ? ( - document.querySelector('#asideInner')}> - { - let children = []; + // document.querySelector('#asideInner')}> + // { + // let children = []; - if (link.children) { - children.push( - - ); - } + // if (link.children) { + // children.push( + // + // ); + // } - link.badge && - children.push( - - {link.badge} - - ); + // link.badge && + // children.push( + // + // {link.badge} + // + // ); - depth === 1 && - children.push( - - ); + // depth === 1 && + // children.push( + // + // ); - children.push( - - {link.label} - - ); + // children.push( + // + // {link.label} + // + // ); - return link.fragment ? ( - {children} - ) : ( - toggleExpand(link) : null} - > - {children} - - ); - }} - isActive={link => isActive(link, location)} - /> - + // return link.fragment ? ( + // {children} + // ) : ( + // toggleExpand(link) : null} + // > + // {children} + // + // ); + // }} + // isActive={link => isActive(link, location)} + // /> + // +
    +
    + {this.renderHeading(doc.toc.children)} +
    +
    ) : null} -
    + ); } }; diff --git a/examples/components/Play.jsx b/examples/components/Play.jsx index 03e66f19..cd29b1c8 100644 --- a/examples/components/Play.jsx +++ b/examples/components/Play.jsx @@ -262,7 +262,7 @@ export default class PlayGround extends React.Component {
    • -
    +
    {this.renderEditor()}
    diff --git a/examples/doc.css b/examples/doc.css index 40fbbe1a..3438f2e9 100644 --- a/examples/doc.css +++ b/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; -} +} \ No newline at end of file diff --git a/examples/style.scss b/examples/style.scss index d23b991c..5ae1e05c 100644 --- a/examples/style.scss +++ b/examples/style.scss @@ -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; + } + } + } +}