diff --git a/.editorconfig b/.editorconfig index 21853f78..dfecd8b8 100644 --- a/.editorconfig +++ b/.editorconfig @@ -8,7 +8,7 @@ insert_final_newline = true [**.{js,ts,tsx,scss}] indent_style = space -indent_size = 4 +indent_size = 2 [*.md] -trim_trailing_whitespace = false \ No newline at end of file +trim_trailing_whitespace = false diff --git a/.prettierrc b/.prettierrc index 3dc94777..2ada450f 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,11 +1,12 @@ { - "printWidth": 120, - "tabWidth": 4, - "useTabs": false, - "singleQuote": true, - "semi": true, - "trailingComma": "none", - "bracketSpacing": false, - "arrowParens": "avoid", - "jsxBracketSameLine": false + "printWidth": 80, + "tabWidth": 2, + "useTabs": false, + "singleQuote": true, + "semi": true, + "trailingComma": "none", + "bracketSpacing": false, + "quoteProps": "consistent", + "arrowParens": "avoid", + "jsxBracketSameLine": false } diff --git a/examples/components/App.jsx b/examples/components/App.jsx index 3cbc3ad6..ffa414f8 100644 --- a/examples/components/App.jsx +++ b/examples/components/App.jsx @@ -4,7 +4,16 @@ 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 {Router, Route, IndexRoute, browserHistory, hashHistory, Link, Redirect, withRouter} from 'react-router'; +import { + Router, + Route, + IndexRoute, + browserHistory, + hashHistory, + Link, + Redirect, + withRouter +} from 'react-router'; import makeSchemaRenderer from './SchemaRender'; import SimplePageSchema from './Page/Simple'; @@ -86,749 +95,776 @@ let PathPrefix = '/examples'; let ContextPath = ''; if (process.env.NODE_ENV === 'production') { - PathPrefix = ''; - ContextPath = '/amis'; + PathPrefix = ''; + ContextPath = '/amis'; } const navigations = [ - { - label: '示例', + { + label: '示例', + children: [ + { + label: '页面', + icon: 'glyphicon glyphicon-th', + badge: 3, + badgeClassName: 'bg-info', 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/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/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 - } + { + label: '简单页面', + path: 'pages/simple', + component: makeSchemaRenderer(SimplePageSchema) + }, + { + label: '初始化出错', + path: 'pages/error', + component: makeSchemaRenderer(ErrorPageSchema) + }, + { + label: '表单页面', + path: 'pages/form', + component: makeSchemaRenderer(FormPageSchema) + } ] - }, + }, - Docs + { + 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/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/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 + } + ] + }, + + Docs ]; function isActive(link, location) { - return !!(link && link === location.pathname); + return !!(link && link === location.pathname); } const themes = [ - { - label: '默认主题', - ns: 'a-', - value: 'default' - }, + { + label: '默认主题', + ns: 'a-', + value: 'default' + }, - { - label: '百度云舍', - ns: 'cxd-', - value: 'cxd' - }, - { - label: 'Dark', - ns: 'dark-', - value: 'dark' - } + { + label: '百度云舍', + ns: 'cxd-', + value: 'cxd' + }, + { + label: 'Dark', + ns: 'dark-', + value: 'dark' + } ]; @withRouter export class App extends React.PureComponent { - state = { - asideFolded: localStorage.getItem('asideFolded') === 'true', - offScreen: false, - headerVisible: true, - themeIndex: 0, - themes: themes, - theme: themes[localStorage.getItem('themeIndex') || 0] - }; + state = { + asideFolded: localStorage.getItem('asideFolded') === 'true', + offScreen: false, + headerVisible: true, + themeIndex: 0, + themes: themes, + theme: themes[localStorage.getItem('themeIndex') || 0] + }; - constructor(props) { - super(props); + constructor(props) { + super(props); - this.toggleAside = this.toggleAside.bind(this); - this.setAsideFolded = this.setAsideFolded.bind(this); - this.setHeaderVisible = this.setHeaderVisible.bind(this); + 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; } - 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; - } + 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() { + const location = this.props.location; + + if (location.pathname === '/edit') { + return null; } - componentDidUpdate(preProps, preState) { - const props = this.props; + const theme = this.state.theme; - 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; - } + return ( + { + let children = []; - if (props.location.pathname !== preProps.location.pathname) { - this.setState( - { - offScreen: false - }, - () => window.scrollTo(0, 0) + if (link.children) { + children.push( + toggleExpand(link, e)} + /> + ); + } + + link.badge && + children.push( + + {link.badge} + ); - 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() { - 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} - ); - }} - isActive={link => - isActive( - link.path && link.path[0] === '/' - ? ContextPath + link.path - : `${ContextPath}${PathPrefix}/${link.path}`, - location - ) - } - /> - ); - } - - renderHeader() { - const location = this.props.location; - const theme = this.state.theme; - - if (location.pathname === '/edit') { - return ( -
-
AMis 可视化编辑器
-
+ link.icon && + children.push( + ); - } - return ( -
-
- -
- - AMis Renderer -
-
-
-
- + children.push( + + {link.label} + + ); - -
- -
- 主题： - { - { + this.setState({theme}); + localStorage.setItem( + 'themeIndex', + this.state.themes.indexOf(theme) + ); + }} + /> + } +
+ + +
+
+ ); + } + + render() { + // const pathname = this.props.location.pathname; + const theme = this.state.theme; + return ( + + + + {React.cloneElement(this.props.children, { + ...this.props.children.props, + setAsideFolded: this.setAsideFolded, + setHeaderVisible: this.setHeaderVisible, + theme: theme.value, + classPrefix: theme.ns + })} + + ); + } } function navigations2route(pathPrefix = PathPrefix) { - let routes = []; + let routes = []; - navigations.forEach(root => { - root.children && - mapTree(root.children, item => { - if (item.path && item.component) { - routes.push( - - ); - } else if (item.path && item.getComponent) { - routes.push( - - ); - } - }); - }); + navigations.forEach(root => { + root.children && + mapTree(root.children, item => { + if (item.path && item.component) { + routes.push( + + ); + } else if (item.path && item.getComponent) { + routes.push( + + ); + } + }); + }); - return routes; + return routes; } export default function entry({pathPrefix}) { - PathPrefix = pathPrefix || PathPrefix; - let history = browserHistory; + PathPrefix = pathPrefix || PathPrefix; + let history = browserHistory; - // if (process.env.NODE_ENV === 'production') { - // history = hashHistory; - // } + // if (process.env.NODE_ENV === 'production') { + // history = hashHistory; + // } - return ( - - - - - {navigations2route(PathPrefix)} - - - - ); + return ( + + + + + {navigations2route(PathPrefix)} + + + + ); } diff --git a/examples/components/Audio.jsx b/examples/components/Audio.jsx index 8afe35d2..450bcbca 100644 --- a/examples/components/Audio.jsx +++ b/examples/components/Audio.jsx @@ -1,37 +1,40 @@ export default { - "$schema": "https://houtai.baidu.com/v2/schemas/page.json#", - "title": "音频播放器", - "body": [ + $schema: 'https://houtai.baidu.com/v2/schemas/page.json#', + title: '音频播放器', + body: [ + { + type: 'audio', + autoPlay: false, + rates: [1.0, 1.5, 2.0], + src: + 'https://amis.bj.bcebos.com/amis/2019-7/1562137295708/chicane-poppiholla-original-radio-edit%20(1).mp3' + }, + { + type: 'form', + title: '', + actions: [], + className: 'b v-middle inline w-lg h-xs', + controls: [ { - "type": "audio", - "autoPlay": false, - "rates": [1.0, 1.5, 2.0], - "src": "https://amis.bj.bcebos.com/amis/2019-7/1562137295708/chicane-poppiholla-original-radio-edit%20(1).mp3", + type: 'card', + className: 'v-middle w inline no-border', + header: { + title: '歌曲名称', + subTitle: '专辑名称', + description: 'description', + avatarClassName: 'pull-left thumb-md avatar m-r no-border', + avatar: + 'http://hiphotos.baidu.com/fex/%70%69%63/item/c9fcc3cec3fdfc03ccabb38edd3f8794a4c22630.jpg' + } }, { - "type": 'form', - "title": '', - "actions": [], - "className": 'b v-middle inline w-lg h-xs', - "controls": [ - { - "type": "card", - "className": 'v-middle w inline no-border', - "header": { - "title": "歌曲名称", - "subTitle": "专辑名称", - "description": "description", - "avatarClassName": "pull-left thumb-md avatar m-r no-border", - "avatar": "http://hiphotos.baidu.com/fex/%70%69%63/item/c9fcc3cec3fdfc03ccabb38edd3f8794a4c22630.jpg" - } - }, - { - "type": "audio", - "className": 'v-middle no-border', - "src": "https://amis.bj.bcebos.com/amis/2019-7/1562137295708/chicane-poppiholla-original-radio-edit%20(1).mp3", - "controls": ['play'] - } - ] + type: 'audio', + className: 'v-middle no-border', + src: + 'https://amis.bj.bcebos.com/amis/2019-7/1562137295708/chicane-poppiholla-original-radio-edit%20(1).mp3', + controls: ['play'] } - ] -} \ No newline at end of file + ] + } + ] +}; diff --git a/examples/components/CRUD/Aside.jsx b/examples/components/CRUD/Aside.jsx index 4631ccff..197cc446 100644 --- a/examples/components/CRUD/Aside.jsx +++ b/examples/components/CRUD/Aside.jsx @@ -1,332 +1,332 @@ export default { - $schema: "https://houtai.baidu.com/v2/schemas/page.json#", - title: "带边栏联动", - aside: { - type: 'form', - wrapWithPanel: false, - target: 'window', // 直接修改location，当然也可以直接指向某个组件。 - controls: [ - { - type: 'tree', - name: 'cat', - inputClassName: 'no-border', - submitOnChange: true, - options: [ - { - label: '分类1', - value: 'cat1' - }, + $schema: 'https://houtai.baidu.com/v2/schemas/page.json#', + title: '带边栏联动', + aside: { + type: 'form', + wrapWithPanel: false, + target: 'window', // 直接修改location，当然也可以直接指向某个组件。 + controls: [ + { + type: 'tree', + name: 'cat', + inputClassName: 'no-border', + submitOnChange: true, + options: [ + { + label: '分类1', + value: 'cat1' + }, - { - label: '分类2', - value: 'cat2' - }, + { + label: '分类2', + value: 'cat2' + }, - { - label: '分类3', - value: 'cat3' - }, + { + label: '分类3', + value: 'cat3' + }, - { - label: '分类4', - value: 'cat4' - } - ] - } + { + label: '分类4', + value: 'cat4' + } ] - }, - toolbar: [ - { - type: "button", - actionType: "dialog", - label: "新增", - primary: true, - dialog: { - title: "新增", - body: { - type: "form", - name: "sample-edit-form", - api: "post:/api/sample", - controls: [ - { - type: "text", - name: "engine", - label: "Engine", - required: true - }, - { - type: "divider" - }, - { - type: "text", - name: "browser", - label: "Browser", - required: true - }, - { - type: "divider" - }, - { - type: "text", - name: "platform", - label: "Platform(s)", - required: true - }, - { - type: "divider" - }, - { - type: "text", - name: "version", - label: "Engine version" - }, - { - type: "divider" - }, - { - type: "text", - name: "grade", - label: "CSS grade" - } - ] - } + } + ] + }, + toolbar: [ + { + type: 'button', + actionType: 'dialog', + label: '新增', + primary: true, + dialog: { + title: '新增', + body: { + type: 'form', + name: 'sample-edit-form', + api: 'post:/api/sample', + controls: [ + { + type: 'text', + name: 'engine', + label: 'Engine', + required: true + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'browser', + label: 'Browser', + required: true + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'platform', + label: 'Platform(s)', + required: true + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'version', + label: 'Engine version' + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'grade', + label: 'CSS grade' } + ] } - ], - body: { - type: "crud", - draggable: true, - api: "/api/sample", - filter: { - title: "条件搜索", - submitText: "", - controls: [ - { - type: "text", - name: "keywords", - placeholder: "通过关键字搜索", - addOn: { - label: "搜索", - type: "submit" - } - }, - { - type: "plain", - text: "这里的表单项可以配置多个" - } - ] - }, - bulkActions: [ - { - label: "批量删除", - actionType: "ajax", - api: "delete:/api/sample/$ids", - confirmText: "确定要批量删除?" - }, - { - label: "批量修改", - actionType: "dialog", - dialog: { - title: "批量编辑", - name: "sample-bulk-edit", - body: { - type: "form", - api: "/api/sample/bulkUpdate2", - controls: [ - { - type: 'hidden', - name: 'ids' - }, - { - type: "text", - name: "engine", - label: "Engine" - } - ] - } - } - } - ], - quickSaveApi: "/api/sample/bulkUpdate", - quickSaveItemApi: "/api/sample/$id", - columns: [ - { - name: "id", - label: "ID", - width: 20, - sortable: true, - type: "text", - toggled: true - }, - { - name: "engine", - label: "Rendering engine", - sortable: true, - searchable: true, - type: "text", - toggled: true - }, - { - name: "browser", - label: "Browser", - sortable: true, - type: "text", - toggled: true - }, - { - name: "platform", - label: "Platform(s)", - sortable: true, - type: "text", - toggled: true - }, - { - name: "version", - label: "Engine version", - quickEdit: true, - type: "text", - toggled: true - }, - { - name: "grade", - label: "CSS grade", - quickEdit: { - mode: "inline", - type: "select", - options: ["A", "B", "C", "D", "X"], - saveImmediately: true - }, - type: "text", - toggled: true - }, - { - type: "operation", - label: "操作", - width: 130, - buttons: [ - { - type: "button", - icon: "fa fa-eye", - actionType: "dialog", - dialog: { - title: "查看", - body: { - type: "form", - controls: [ - { - type: "static", - name: "engine", - label: "Engine" - }, - { - type: "divider" - }, - { - type: "static", - name: "browser", - label: "Browser" - }, - { - type: "divider" - }, - { - type: "static", - name: "platform", - label: "Platform(s)" - }, - { - type: "divider" - }, - { - type: "static", - name: "version", - label: "Engine version" - }, - { - type: "divider" - }, - { - type: "static", - name: "grade", - label: "CSS grade" - }, - { - type: "divider" - }, - { - type: "html", - html: - "

添加其他 Html 片段 需要支持变量替换（todo）.

" - } - ] - } - } - }, - { - type: "button", - icon: "fa fa-pencil", - actionType: "dialog", - dialog: { - title: "编辑", - body: { - type: "form", - name: "sample-edit-form", - api: "/api/sample/$id", - controls: [ - { - type: "text", - name: "engine", - label: "Engine", - required: true - }, - { - type: "divider" - }, - { - type: "text", - name: "browser", - label: "Browser", - required: true - }, - { - type: "divider" - }, - { - type: "text", - name: "platform", - label: "Platform(s)", - required: true - }, - { - type: "divider" - }, - { - type: "text", - name: "version", - label: "Engine version" - }, - { - type: "divider" - }, - { - type: "text", - name: "grade", - label: "CSS grade" - } - ] - } - } - }, - { - type: "button", - icon: "fa fa-times text-danger", - actionType: "ajax", - confirmText: "您确认要删除?", - api: "delete:/api/sample/$id" - } - ], - toggled: true - } - ] + } } + ], + body: { + type: 'crud', + draggable: true, + api: '/api/sample', + filter: { + title: '条件搜索', + submitText: '', + controls: [ + { + type: 'text', + name: 'keywords', + placeholder: '通过关键字搜索', + addOn: { + label: '搜索', + type: 'submit' + } + }, + { + type: 'plain', + text: '这里的表单项可以配置多个' + } + ] + }, + bulkActions: [ + { + label: '批量删除', + actionType: 'ajax', + api: 'delete:/api/sample/$ids', + confirmText: '确定要批量删除?' + }, + { + label: '批量修改', + actionType: 'dialog', + dialog: { + title: '批量编辑', + name: 'sample-bulk-edit', + body: { + type: 'form', + api: '/api/sample/bulkUpdate2', + controls: [ + { + type: 'hidden', + name: 'ids' + }, + { + type: 'text', + name: 'engine', + label: 'Engine' + } + ] + } + } + } + ], + quickSaveApi: '/api/sample/bulkUpdate', + quickSaveItemApi: '/api/sample/$id', + columns: [ + { + name: 'id', + label: 'ID', + width: 20, + sortable: true, + type: 'text', + toggled: true + }, + { + name: 'engine', + label: 'Rendering engine', + sortable: true, + searchable: true, + type: 'text', + toggled: true + }, + { + name: 'browser', + label: 'Browser', + sortable: true, + type: 'text', + toggled: true + }, + { + name: 'platform', + label: 'Platform(s)', + sortable: true, + type: 'text', + toggled: true + }, + { + name: 'version', + label: 'Engine version', + quickEdit: true, + type: 'text', + toggled: true + }, + { + name: 'grade', + label: 'CSS grade', + quickEdit: { + mode: 'inline', + type: 'select', + options: ['A', 'B', 'C', 'D', 'X'], + saveImmediately: true + }, + type: 'text', + toggled: true + }, + { + type: 'operation', + label: '操作', + width: 130, + buttons: [ + { + type: 'button', + icon: 'fa fa-eye', + actionType: 'dialog', + dialog: { + title: '查看', + body: { + type: 'form', + controls: [ + { + type: 'static', + name: 'engine', + label: 'Engine' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'browser', + label: 'Browser' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'platform', + label: 'Platform(s)' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'version', + label: 'Engine version' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'grade', + label: 'CSS grade' + }, + { + type: 'divider' + }, + { + type: 'html', + html: + '

添加其他 Html 片段 需要支持变量替换（todo）.

' + } + ] + } + } + }, + { + type: 'button', + icon: 'fa fa-pencil', + actionType: 'dialog', + dialog: { + title: '编辑', + body: { + type: 'form', + name: 'sample-edit-form', + api: '/api/sample/$id', + controls: [ + { + type: 'text', + name: 'engine', + label: 'Engine', + required: true + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'browser', + label: 'Browser', + required: true + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'platform', + label: 'Platform(s)', + required: true + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'version', + label: 'Engine version' + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'grade', + label: 'CSS grade' + } + ] + } + } + }, + { + type: 'button', + icon: 'fa fa-times text-danger', + actionType: 'ajax', + confirmText: '您确认要删除?', + api: 'delete:/api/sample/$id' + } + ], + toggled: true + } + ] + } }; diff --git a/examples/components/CRUD/Fields.jsx b/examples/components/CRUD/Fields.jsx index 8c1d5d1a..89ca40a3 100644 --- a/examples/components/CRUD/Fields.jsx +++ b/examples/components/CRUD/Fields.jsx @@ -1,91 +1,91 @@ export default { - $schema: "https://houtai.baidu.com/v2/schemas/page.json#", - title: "增删改查列类型汇总", - body: { - type: "crud", - api: "/api/mock2/crud/list", - columns: [ - { - name: "id", - label: "ID", - type: "text" - }, - { - name: "audio", - label: "音频", - type: "audio" - }, - { - name: "carousel", - label: "轮播图", - type: "carousel", - width: "300" - }, - { - name: "text", - label: "文本", - type: "text" - }, - { - type: 'image', - label: '图片', - name: 'image', - popOver: { - title: '查看大图', - body: '
' - } - }, - { - name: 'date', - type: 'date', - label: '日期' - }, - { - name: "progress", - label: "进度", - type: "progress" - }, - { - name: "boolean", - label: "状态", - type: "status" - }, - { - name: "boolean", - label: "开关", - type: "switch", - // readOnly: false // 可以开启修改模式 - }, - { - name: "type", - label: "映射", - type: "mapping", - map: { - "*": "其他：${type}", - "1": "漂亮", - "2": "开心", - "3": "惊吓", - "4": "紧张" - } - }, + $schema: 'https://houtai.baidu.com/v2/schemas/page.json#', + title: '增删改查列类型汇总', + body: { + type: 'crud', + api: '/api/mock2/crud/list', + columns: [ + { + name: 'id', + label: 'ID', + type: 'text' + }, + { + name: 'audio', + label: '音频', + type: 'audio' + }, + { + name: 'carousel', + label: '轮播图', + type: 'carousel', + width: '300' + }, + { + name: 'text', + label: '文本', + type: 'text' + }, + { + type: 'image', + label: '图片', + name: 'image', + popOver: { + title: '查看大图', + body: '
' + } + }, + { + name: 'date', + type: 'date', + label: '日期' + }, + { + name: 'progress', + label: '进度', + type: 'progress' + }, + { + name: 'boolean', + label: '状态', + type: 'status' + }, + { + name: 'boolean', + label: '开关', + type: 'switch' + // readOnly: false // 可以开启修改模式 + }, + { + name: 'type', + label: '映射', + type: 'mapping', + map: { + '*': '其他：${type}', + '1': "漂亮", + '2': "开心", + '3': "惊吓", + '4': "紧张" + } + }, - { - name: 'list', - type: 'list', - label: 'List', - placeholder: '-', - size: "sm", - listItem: { - title: '${title}', - subTitle: '${description}' - } - }, + { + name: 'list', + type: 'list', + label: 'List', + placeholder: '-', + size: 'sm', + listItem: { + title: '${title}', + subTitle: '${description}' + } + }, - { - name: 'json', - type: 'json', - label: 'Json' - } - ] - } + { + name: 'json', + type: 'json', + label: 'Json' + } + ] + } }; diff --git a/examples/components/CRUD/Fix.jsx b/examples/components/CRUD/Fix.jsx index 3ec114b5..9ac448e8 100644 --- a/examples/components/CRUD/Fix.jsx +++ b/examples/components/CRUD/Fix.jsx @@ -1,301 +1,301 @@ const table = { - type: "table", - data: [ - { - engine: "Other browsers", - browser: "All others", - platform: "-", - version: "-", - grade: "U", - progress: 50, - status: true, - image: - "http://hiphotos.baidu.com/fex/%70%69%63/item/0d338744ebf81a4cff2f4cd6de2a6059252da694.jpg", - weight: 56, - others: null, - createdAt: "2017-11-17T08:47:50.000Z", - updatedAt: "2017-11-17T08:47:50.000Z" - }, - { - engine: "Misc", - browser: "PSP browser", - platform: "PSP", - version: "-", - grade: "C", - progress: 50, - status: true, - image: - "http://hiphotos.baidu.com/fex/%70%69%63/item/0d338744ebf81a4cff2f4cd6de2a6059252da694.jpg", - weight: 55, - others: null, - createdAt: "2017-11-17T08:47:50.000Z", - updatedAt: "2017-11-17T08:47:50.000Z" - }, - { - engine: "Misc", - browser: "PSP browser", - platform: "PSP", - version: "-", - grade: "C", - progress: 50, - status: true, - image: - "http://hiphotos.baidu.com/fex/%70%69%63/item/0d338744ebf81a4cff2f4cd6de2a6059252da694.jpg", - weight: 55, - others: null, - createdAt: "2017-11-17T08:47:50.000Z", - updatedAt: "2017-11-17T08:47:50.000Z" - }, - { - engine: "Other browsers", - browser: "All others", - platform: "-", - version: "-", - grade: "U", - progress: 50, - status: true, - image: - "http://hiphotos.baidu.com/fex/%70%69%63/item/0d338744ebf81a4cff2f4cd6de2a6059252da694.jpg", - weight: 56, - others: null, - createdAt: "2017-11-17T08:47:50.000Z", - updatedAt: "2017-11-17T08:47:50.000Z" - }, - { - engine: "Misc", - browser: "PSP browser", - platform: "PSP", - version: "-", - grade: "C", - progress: 50, - status: true, - image: - "http://hiphotos.baidu.com/fex/%70%69%63/item/0d338744ebf81a4cff2f4cd6de2a6059252da694.jpg", - weight: 55, - others: null, - createdAt: "2017-11-17T08:47:50.000Z", - updatedAt: "2017-11-17T08:47:50.000Z" - }, - { - engine: "Misc", - browser: "PSP browser", - platform: "PSP", - version: "-", - grade: "C", - progress: 50, - status: true, - image: - "http://hiphotos.baidu.com/fex/%70%69%63/item/0d338744ebf81a4cff2f4cd6de2a6059252da694.jpg", - weight: 55, - others: null, - createdAt: "2017-11-17T08:47:50.000Z", - updatedAt: "2017-11-17T08:47:50.000Z" - }, - { - engine: "Other browsers", - browser: "All others", - platform: "-", - version: "-", - grade: "U", - progress: 50, - status: true, - image: - "http://hiphotos.baidu.com/fex/%70%69%63/item/0d338744ebf81a4cff2f4cd6de2a6059252da694.jpg", - weight: 56, - others: null, - createdAt: "2017-11-17T08:47:50.000Z", - updatedAt: "2017-11-17T08:47:50.000Z" - }, - { - engine: "Misc", - browser: "PSP browser", - platform: "PSP", - version: "-", - grade: "C", - progress: 50, - status: true, - image: - "http://hiphotos.baidu.com/fex/%70%69%63/item/0d338744ebf81a4cff2f4cd6de2a6059252da694.jpg", - weight: 55, - others: null, - createdAt: "2017-11-17T08:47:50.000Z", - updatedAt: "2017-11-17T08:47:50.000Z" - }, - { - engine: "Misc", - browser: "PSP browser", - platform: "PSP", - version: "-", - grade: "C", - progress: 50, - status: true, - image: - "http://hiphotos.baidu.com/fex/%70%69%63/item/0d338744ebf81a4cff2f4cd6de2a6059252da694.jpg", - weight: 55, - others: null, - createdAt: "2017-11-17T08:47:50.000Z", - updatedAt: "2017-11-17T08:47:50.000Z" - }, - { - engine: "Other browsers", - browser: "All others", - platform: "-", - version: "-", - grade: "U", - progress: 50, - status: true, - image: - "http://hiphotos.baidu.com/fex/%70%69%63/item/0d338744ebf81a4cff2f4cd6de2a6059252da694.jpg", - weight: 56, - others: null, - createdAt: "2017-11-17T08:47:50.000Z", - updatedAt: "2017-11-17T08:47:50.000Z" - } - ].map((item, key) => ({ - ...item, - id: key + 1 - })), - columns: [ - { - name: "id", - label: "ID", - width: 20, - sortable: true, - type: "text", - toggled: true, - fixed: 'left' - }, - { - name: "engine", - label: "Rendering engine", - sortable: true, - searchable: true, - type: "text", - toggled: true, - fixed: 'left' - }, - { - name: "browser", - label: "Browser", - sortable: true, - type: "text", - toggled: true - }, - { - name: "platform", - label: "Platform(s)", - sortable: true, - type: "text", - toggled: true - }, - { - name: "version", - label: "Engine version", - quickEdit: true, - type: "text", - toggled: true - }, - { - name: "grade", - label: "CSS grade", - quickEdit: { - mode: "inline", - type: "select", - options: ["A", "B", "C", "D", "X"], - saveImmediately: true - }, - type: "text", - toggled: true - }, - { - name: "browser", - label: "Browser", - sortable: true, - type: "text", - toggled: true - }, - { - name: "platform", - label: "Platform(s)", - sortable: true, - type: "text", - toggled: true - }, - { - name: "version", - label: "Engine version", - quickEdit: true, - type: "text", - toggled: true - }, - { - name: "browser", - label: "Browser", - sortable: true, - type: "text", - toggled: true - }, - { - name: "platform", - label: "Platform(s)", - sortable: true, - type: "text", - toggled: true - }, - { - name: "version", - label: "Engine version", - quickEdit: true, - type: "text", - toggled: true - }, - { - name: "browser", - label: "Browser", - sortable: true, - type: "text", - toggled: true - }, - { - name: "platform", - label: "Platform(s)", - sortable: true, - type: "text", - toggled: true, - fixed: 'right' - }, - { - name: "version", - label: "Engine version", - quickEdit: true, - type: "text", - toggled: true, - fixed: 'right' - }, - ] + type: 'table', + data: [ + { + engine: 'Other browsers', + browser: 'All others', + platform: '-', + version: '-', + grade: 'U', + progress: 50, + status: true, + image: + 'http://hiphotos.baidu.com/fex/%70%69%63/item/0d338744ebf81a4cff2f4cd6de2a6059252da694.jpg', + weight: 56, + others: null, + createdAt: '2017-11-17T08:47:50.000Z', + updatedAt: '2017-11-17T08:47:50.000Z' + }, + { + engine: 'Misc', + browser: 'PSP browser', + platform: 'PSP', + version: '-', + grade: 'C', + progress: 50, + status: true, + image: + 'http://hiphotos.baidu.com/fex/%70%69%63/item/0d338744ebf81a4cff2f4cd6de2a6059252da694.jpg', + weight: 55, + others: null, + createdAt: '2017-11-17T08:47:50.000Z', + updatedAt: '2017-11-17T08:47:50.000Z' + }, + { + engine: 'Misc', + browser: 'PSP browser', + platform: 'PSP', + version: '-', + grade: 'C', + progress: 50, + status: true, + image: + 'http://hiphotos.baidu.com/fex/%70%69%63/item/0d338744ebf81a4cff2f4cd6de2a6059252da694.jpg', + weight: 55, + others: null, + createdAt: '2017-11-17T08:47:50.000Z', + updatedAt: '2017-11-17T08:47:50.000Z' + }, + { + engine: 'Other browsers', + browser: 'All others', + platform: '-', + version: '-', + grade: 'U', + progress: 50, + status: true, + image: + 'http://hiphotos.baidu.com/fex/%70%69%63/item/0d338744ebf81a4cff2f4cd6de2a6059252da694.jpg', + weight: 56, + others: null, + createdAt: '2017-11-17T08:47:50.000Z', + updatedAt: '2017-11-17T08:47:50.000Z' + }, + { + engine: 'Misc', + browser: 'PSP browser', + platform: 'PSP', + version: '-', + grade: 'C', + progress: 50, + status: true, + image: + 'http://hiphotos.baidu.com/fex/%70%69%63/item/0d338744ebf81a4cff2f4cd6de2a6059252da694.jpg', + weight: 55, + others: null, + createdAt: '2017-11-17T08:47:50.000Z', + updatedAt: '2017-11-17T08:47:50.000Z' + }, + { + engine: 'Misc', + browser: 'PSP browser', + platform: 'PSP', + version: '-', + grade: 'C', + progress: 50, + status: true, + image: + 'http://hiphotos.baidu.com/fex/%70%69%63/item/0d338744ebf81a4cff2f4cd6de2a6059252da694.jpg', + weight: 55, + others: null, + createdAt: '2017-11-17T08:47:50.000Z', + updatedAt: '2017-11-17T08:47:50.000Z' + }, + { + engine: 'Other browsers', + browser: 'All others', + platform: '-', + version: '-', + grade: 'U', + progress: 50, + status: true, + image: + 'http://hiphotos.baidu.com/fex/%70%69%63/item/0d338744ebf81a4cff2f4cd6de2a6059252da694.jpg', + weight: 56, + others: null, + createdAt: '2017-11-17T08:47:50.000Z', + updatedAt: '2017-11-17T08:47:50.000Z' + }, + { + engine: 'Misc', + browser: 'PSP browser', + platform: 'PSP', + version: '-', + grade: 'C', + progress: 50, + status: true, + image: + 'http://hiphotos.baidu.com/fex/%70%69%63/item/0d338744ebf81a4cff2f4cd6de2a6059252da694.jpg', + weight: 55, + others: null, + createdAt: '2017-11-17T08:47:50.000Z', + updatedAt: '2017-11-17T08:47:50.000Z' + }, + { + engine: 'Misc', + browser: 'PSP browser', + platform: 'PSP', + version: '-', + grade: 'C', + progress: 50, + status: true, + image: + 'http://hiphotos.baidu.com/fex/%70%69%63/item/0d338744ebf81a4cff2f4cd6de2a6059252da694.jpg', + weight: 55, + others: null, + createdAt: '2017-11-17T08:47:50.000Z', + updatedAt: '2017-11-17T08:47:50.000Z' + }, + { + engine: 'Other browsers', + browser: 'All others', + platform: '-', + version: '-', + grade: 'U', + progress: 50, + status: true, + image: + 'http://hiphotos.baidu.com/fex/%70%69%63/item/0d338744ebf81a4cff2f4cd6de2a6059252da694.jpg', + weight: 56, + others: null, + createdAt: '2017-11-17T08:47:50.000Z', + updatedAt: '2017-11-17T08:47:50.000Z' + } + ].map((item, key) => ({ + ...item, + id: key + 1 + })), + columns: [ + { + name: 'id', + label: 'ID', + width: 20, + sortable: true, + type: 'text', + toggled: true, + fixed: 'left' + }, + { + name: 'engine', + label: 'Rendering engine', + sortable: true, + searchable: true, + type: 'text', + toggled: true, + fixed: 'left' + }, + { + name: 'browser', + label: 'Browser', + sortable: true, + type: 'text', + toggled: true + }, + { + name: 'platform', + label: 'Platform(s)', + sortable: true, + type: 'text', + toggled: true + }, + { + name: 'version', + label: 'Engine version', + quickEdit: true, + type: 'text', + toggled: true + }, + { + name: 'grade', + label: 'CSS grade', + quickEdit: { + mode: 'inline', + type: 'select', + options: ['A', 'B', 'C', 'D', 'X'], + saveImmediately: true + }, + type: 'text', + toggled: true + }, + { + name: 'browser', + label: 'Browser', + sortable: true, + type: 'text', + toggled: true + }, + { + name: 'platform', + label: 'Platform(s)', + sortable: true, + type: 'text', + toggled: true + }, + { + name: 'version', + label: 'Engine version', + quickEdit: true, + type: 'text', + toggled: true + }, + { + name: 'browser', + label: 'Browser', + sortable: true, + type: 'text', + toggled: true + }, + { + name: 'platform', + label: 'Platform(s)', + sortable: true, + type: 'text', + toggled: true + }, + { + name: 'version', + label: 'Engine version', + quickEdit: true, + type: 'text', + toggled: true + }, + { + name: 'browser', + label: 'Browser', + sortable: true, + type: 'text', + toggled: true + }, + { + name: 'platform', + label: 'Platform(s)', + sortable: true, + type: 'text', + toggled: true, + fixed: 'right' + }, + { + name: 'version', + label: 'Engine version', + quickEdit: true, + type: 'text', + toggled: true, + fixed: 'right' + } + ] }; export default { - $schema: "https://houtai.baidu.com/v2/schemas/page.json#", - title: "固顶和列固定示例", - remark: "bla bla bla", - body: [ - table, - '
分割
', - '
分割
', - '
分割
', - '
分割
', - '
分割
', - '
分割
', - '
分割
', - '
分割
', - '
分割
', - '
分割
', - '
分割
', - '
分割
', - '
分割
', - '
分割
', - '
分割
', - table - ] + $schema: 'https://houtai.baidu.com/v2/schemas/page.json#', + title: '固顶和列固定示例', + remark: 'bla bla bla', + body: [ + table, + '
分割
', + '
分割
', + '
分割
', + '
分割
', + '
分割
', + '
分割
', + '
分割
', + '
分割
', + '
分割
', + '
分割
', + '
分割
', + '
分割
', + '
分割
', + '
分割
', + '
分割
', + table + ] }; diff --git a/examples/components/CRUD/Footable.jsx b/examples/components/CRUD/Footable.jsx index fab06f3a..f09a162e 100644 --- a/examples/components/CRUD/Footable.jsx +++ b/examples/components/CRUD/Footable.jsx @@ -1,198 +1,198 @@ export default { - $schema: "https://houtai.baidu.com/v2/schemas/page.json#", - title: "开启单条底部展示功能", - body: { - type: "crud", - draggable: true, - api: "/api/sample", - footable: { - expand: 'first', - accordion: true + $schema: 'https://houtai.baidu.com/v2/schemas/page.json#', + title: '开启单条底部展示功能', + body: { + type: 'crud', + draggable: true, + api: '/api/sample', + footable: { + expand: 'first', + accordion: true + }, + columns: [ + { + name: 'id', + label: 'ID', + width: 20, + sortable: true, + type: 'text', + toggled: true + }, + { + name: 'engine', + label: 'Rendering engine', + sortable: true, + searchable: true, + type: 'text', + toggled: true + }, + { + name: 'browser', + label: 'Browser', + sortable: true, + type: 'text', + toggled: true + }, + { + name: 'platform', + label: 'Platform(s)', + sortable: true, + type: 'text', + toggled: true + }, + { + name: 'version', + label: 'Engine version', + quickEdit: true, + type: 'text', + toggled: true + }, + { + name: 'grade', + label: 'CSS grade', + breakpoint: '*', + quickEdit: { + mode: 'inline', + type: 'select', + options: ['A', 'B', 'C', 'D', 'X'], + inputClassName: 'w-xs', + saveImmediately: true }, - columns: [ - { - name: "id", - label: "ID", - width: 20, - sortable: true, - type: "text", - toggled: true - }, - { - name: "engine", - label: "Rendering engine", - sortable: true, - searchable: true, - type: "text", - toggled: true - }, - { - name: "browser", - label: "Browser", - sortable: true, - type: "text", - toggled: true - }, - { - name: "platform", - label: "Platform(s)", - sortable: true, - type: "text", - toggled: true - }, - { - name: "version", - label: "Engine version", - quickEdit: true, - type: "text", - toggled: true - }, - { - name: "grade", - label: "CSS grade", - breakpoint: '*', - quickEdit: { - mode: "inline", - type: "select", - options: ["A", "B", "C", "D", "X"], - inputClassName: 'w-xs', - saveImmediately: true - }, - type: "text", - toggled: true - }, - { - type: "operation", - label: "操作", - width: 100, - breakpoint: '*', - buttons: [ - { - type: "button", - icon: "fa fa-eye", - actionType: "dialog", - dialog: { - title: "查看", - body: { - type: "form", - controls: [ - { - type: "static", - name: "engine", - label: "Engine" - }, - { - type: "divider" - }, - { - type: "static", - name: "browser", - label: "Browser" - }, - { - type: "divider" - }, - { - type: "static", - name: "platform", - label: "Platform(s)" - }, - { - type: "divider" - }, - { - type: "static", - name: "version", - label: "Engine version" - }, - { - type: "divider" - }, - { - type: "static", - name: "grade", - label: "CSS grade" - }, - { - type: "divider" - }, - { - type: "html", - html: - "

添加其他 Html 片段 需要支持变量替换（todo）.

" - } - ] - } - } - }, - { - type: "button", - icon: "fa fa-pencil", - actionType: "drawer", - drawer: { - position: 'left', - size: 'lg', - title: "编辑", - body: { - type: "form", - name: "sample-edit-form", - api: "/api/sample/$id", - controls: [ - { - type: "text", - name: "engine", - label: "Engine", - required: true - }, - { - type: "divider" - }, - { - type: "text", - name: "browser", - label: "Browser", - required: true - }, - { - type: "divider" - }, - { - type: "text", - name: "platform", - label: "Platform(s)", - required: true - }, - { - type: "divider" - }, - { - type: "text", - name: "version", - label: "Engine version" - }, - { - type: "divider" - }, - { - type: "select", - name: "grade", - label: "CSS grade", - options: ["A", "B", "C", "D", "X"], - } - ] - } - } - }, - { - type: "button", - icon: "fa fa-times text-danger", - actionType: "ajax", - confirmText: "您确认要删除?", - api: "delete:/api/sample/$id" - } - ], - toggled: true + type: 'text', + toggled: true + }, + { + type: 'operation', + label: '操作', + width: 100, + breakpoint: '*', + buttons: [ + { + type: 'button', + icon: 'fa fa-eye', + actionType: 'dialog', + dialog: { + title: '查看', + body: { + type: 'form', + controls: [ + { + type: 'static', + name: 'engine', + label: 'Engine' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'browser', + label: 'Browser' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'platform', + label: 'Platform(s)' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'version', + label: 'Engine version' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'grade', + label: 'CSS grade' + }, + { + type: 'divider' + }, + { + type: 'html', + html: + '

添加其他 Html 片段 需要支持变量替换（todo）.

' + } + ] + } } - ] - } + }, + { + type: 'button', + icon: 'fa fa-pencil', + actionType: 'drawer', + drawer: { + position: 'left', + size: 'lg', + title: '编辑', + body: { + type: 'form', + name: 'sample-edit-form', + api: '/api/sample/$id', + controls: [ + { + type: 'text', + name: 'engine', + label: 'Engine', + required: true + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'browser', + label: 'Browser', + required: true + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'platform', + label: 'Platform(s)', + required: true + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'version', + label: 'Engine version' + }, + { + type: 'divider' + }, + { + type: 'select', + name: 'grade', + label: 'CSS grade', + options: ['A', 'B', 'C', 'D', 'X'] + } + ] + } + } + }, + { + type: 'button', + icon: 'fa fa-times text-danger', + actionType: 'ajax', + confirmText: '您确认要删除?', + api: 'delete:/api/sample/$id' + } + ], + toggled: true + } + ] + } }; diff --git a/examples/components/CRUD/Grid.jsx b/examples/components/CRUD/Grid.jsx index 06e72a45..9804da0c 100644 --- a/examples/components/CRUD/Grid.jsx +++ b/examples/components/CRUD/Grid.jsx @@ -1,221 +1,221 @@ export default { - $schema: "https://houtai.baidu.com/v2/schemas/page.json#", - title: "增删改查示例", - remark: "bla bla bla", - body: { - type: "crud", - api: "/api/sample", - // api: "/api/mock2/crud/table?waitSeconds=100000", - mode: "cards", - defaultParams: { - perPage: 12, + $schema: 'https://houtai.baidu.com/v2/schemas/page.json#', + title: '增删改查示例', + remark: 'bla bla bla', + body: { + type: 'crud', + api: '/api/sample', + // api: "/api/mock2/crud/table?waitSeconds=100000", + mode: 'cards', + defaultParams: { + perPage: 12 + }, + // fixAlignment: true, + // masonryLayout: true, + filter: { + title: '条件搜索', + submitText: '', + controls: [ + { + type: 'text', + name: 'keywords', + placeholder: '通过关键字搜索', + addOn: { + label: '搜索', + type: 'submit' + } }, - // fixAlignment: true, - // masonryLayout: true, - filter: { - title: "条件搜索", - submitText: "", - controls: [ - { - type: "text", - name: "keywords", - placeholder: "通过关键字搜索", - addOn: { - label: "搜索", - type: "submit" - } - }, - { - type: "plain", - text: "这只是个示例, 目前搜索对查询结果无效." - } - ] - }, - bulkActions: [ - { - label: "批量删除", - actionType: "ajax", - api: "delete:/api/sample/${ids|raw}", - confirmText: "确定要批量删除?" - }, - { - label: "批量修改", - actionType: "dialog", - dialog: { - title: "批量编辑", - name: "sample-bulk-edit", - body: { - type: "form", - api: "/api/sample/bulkUpdate2", - controls: [ - { - type: "hidden", - name: "ids" - }, - { - type: "text", - name: "engine", - label: "Engine" - } - ] - } - } - } - ], - quickSaveApi: "/api/sample/bulkUpdate", - quickSaveItemApi: "/api/sample/$id", - draggable: true, - card: { - header: { - title: "$engine", - subTitle: "$platform", - subTitlePlaceholder: "暂无说明", - avatar: - '<%= data.avatar || "http://bos.nj.bpc.baidu.com/showx/146bc2ce1b30f3824838f4208ad2663c" %>', - avatarClassName: "pull-left thumb b-3x m-r" - }, - actions: [ - { - type: "button", - label: "查看", - actionType: "dialog", - dialog: { - title: "查看", - body: { - type: "form", - controls: [ - { - type: "static", - name: "engine", - label: "Engine" - }, - { - type: "divider" - }, - { - type: "static", - name: "browser", - label: "Browser" - }, - { - type: "divider" - }, - { - type: "static", - name: "platform", - label: "Platform(s)" - }, - { - type: "divider" - }, - { - type: "static", - name: "version", - label: "Engine version" - }, - { - type: "divider" - }, - { - type: "static", - name: "grade", - label: "CSS grade" - }, - { - type: "divider" - }, - { - type: "html", - html: - "

添加其他 Html 片段 需要支持变量替换（todo）.

" - } - ] - } - } - }, - { - type: "button", - label: "编辑", - actionType: "dialog", - dialog: { - title: "编辑", - body: { - type: "form", - name: "sample-edit-form", - api: "/api/sample/$id", - controls: [ - { - type: "text", - name: "engine", - label: "Engine", - required: true - }, - { - type: "divider" - }, - { - type: "text", - name: "browser", - label: "Browser", - required: true - }, - { - type: "divider" - }, - { - type: "text", - name: "platform", - label: "Platform(s)", - required: true - }, - { - type: "divider" - }, - { - type: "text", - name: "version", - label: "Engine version" - }, - { - type: "divider" - }, - { - type: "text", - name: "grade", - label: "CSS grade" - } - ] - } - } - }, - { - type: "button", - label: "删除", - actionType: "ajax", - confirmText: "您确认要删除?", - api: "delete:/api/sample/$id" - } - ], - body: [ - { - name: "engine", - label: "engine", - sortable: true, - quickEdit: true - }, - { - name: "browser", - label: "Browser" - }, - { - name: "platform", - label: "Platform" - }, - { - name: "version", - label: "version" - } - ] + { + type: 'plain', + text: '这只是个示例, 目前搜索对查询结果无效.' } + ] + }, + bulkActions: [ + { + label: '批量删除', + actionType: 'ajax', + api: 'delete:/api/sample/${ids|raw}', + confirmText: '确定要批量删除?' + }, + { + label: '批量修改', + actionType: 'dialog', + dialog: { + title: '批量编辑', + name: 'sample-bulk-edit', + body: { + type: 'form', + api: '/api/sample/bulkUpdate2', + controls: [ + { + type: 'hidden', + name: 'ids' + }, + { + type: 'text', + name: 'engine', + label: 'Engine' + } + ] + } + } + } + ], + quickSaveApi: '/api/sample/bulkUpdate', + quickSaveItemApi: '/api/sample/$id', + draggable: true, + card: { + header: { + title: '$engine', + subTitle: '$platform', + subTitlePlaceholder: '暂无说明', + avatar: + '<%= data.avatar || "http://bos.nj.bpc.baidu.com/showx/146bc2ce1b30f3824838f4208ad2663c" %>', + avatarClassName: 'pull-left thumb b-3x m-r' + }, + actions: [ + { + type: 'button', + label: '查看', + actionType: 'dialog', + dialog: { + title: '查看', + body: { + type: 'form', + controls: [ + { + type: 'static', + name: 'engine', + label: 'Engine' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'browser', + label: 'Browser' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'platform', + label: 'Platform(s)' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'version', + label: 'Engine version' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'grade', + label: 'CSS grade' + }, + { + type: 'divider' + }, + { + type: 'html', + html: + '

添加其他 Html 片段 需要支持变量替换（todo）.

' + } + ] + } + } + }, + { + type: 'button', + label: '编辑', + actionType: 'dialog', + dialog: { + title: '编辑', + body: { + type: 'form', + name: 'sample-edit-form', + api: '/api/sample/$id', + controls: [ + { + type: 'text', + name: 'engine', + label: 'Engine', + required: true + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'browser', + label: 'Browser', + required: true + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'platform', + label: 'Platform(s)', + required: true + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'version', + label: 'Engine version' + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'grade', + label: 'CSS grade' + } + ] + } + } + }, + { + type: 'button', + label: '删除', + actionType: 'ajax', + confirmText: '您确认要删除?', + api: 'delete:/api/sample/$id' + } + ], + body: [ + { + name: 'engine', + label: 'engine', + sortable: true, + quickEdit: true + }, + { + name: 'browser', + label: 'Browser' + }, + { + name: 'platform', + label: 'Platform' + }, + { + name: 'version', + label: 'version' + } + ] } + } }; diff --git a/examples/components/CRUD/HeaderGroup.jsx b/examples/components/CRUD/HeaderGroup.jsx index 45ed677d..3d283a42 100644 --- a/examples/components/CRUD/HeaderGroup.jsx +++ b/examples/components/CRUD/HeaderGroup.jsx @@ -1,107 +1,107 @@ export default { - $schema: "https://houtai.baidu.com/v2/schemas/page.json#", - title: "支持表头分组，通过在 cloumn 上设置 groupName 实现。", - body: { - type: "table", - data: { - items: [ - { - "engine": "Trident", - "browser": "Internet Explorer 4.2", - "platform": "Win 95+", - "version": "4", - "grade": "A" - }, - { - "engine": "Trident", - "browser": "Internet Explorer 4.2", - "platform": "Win 95+", - "version": "4", - "grade": "B" - }, - { - "engine": "Trident", - "browser": "AOL browser (AOL desktop)", - "platform": "Win 95+", - "version": "4", - "grade": "C" - }, - { - "engine": "Trident", - "browser": "AOL browser (AOL desktop)", - "platform": "Win 98", - "version": "3", - "grade": "A" - }, - { - "engine": "Trident", - "browser": "AOL browser (AOL desktop)", - "platform": "Win 98", - "version": "4", - "grade": "A" - }, - { - "engine": "Gecko", - "browser": "Firefox 1.0", - "platform": "Win 98+ / OSX.2+", - "version": "4", - "grade": "A" - }, - { - "engine": "Gecko", - "browser": "Firefox 1.0", - "platform": "Win 98+ / OSX.2+", - "version": "5", - "grade": "A" - }, - { - "engine": "Gecko", - "browser": "Firefox 2.0", - "platform": "Win 98+ / OSX.2+", - "version": "5", - "grade": "B" - }, - { - "engine": "Gecko", - "browser": "Firefox 2.0", - "platform": "Win 98+ / OSX.2+", - "version": "5", - "grade": "C" - }, - { - "engine": "Gecko", - "browser": "Firefox 2.0", - "platform": "Win 98+ / OSX.2+", - "version": "5", - "grade": "D" - } - ] + $schema: 'https://houtai.baidu.com/v2/schemas/page.json#', + title: '支持表头分组，通过在 cloumn 上设置 groupName 实现。', + body: { + type: 'table', + data: { + items: [ + { + engine: 'Trident', + browser: 'Internet Explorer 4.2', + platform: 'Win 95+', + version: '4', + grade: 'A' }, - columns: [ - { - name: "engine", - label: "Rendering engine", - groupName: "A" - }, - { - name: "browser", - label: "Browser", - groupName: "A" - }, - { - name: "platform", - label: "Platform(s)", - groupName: "B" - }, - { - name: "version", - label: "Engine version", - groupName: "B" - }, - { - name: "grade", - label: "CSS grade", - } - ] - } + { + engine: 'Trident', + browser: 'Internet Explorer 4.2', + platform: 'Win 95+', + version: '4', + grade: 'B' + }, + { + engine: 'Trident', + browser: 'AOL browser (AOL desktop)', + platform: 'Win 95+', + version: '4', + grade: 'C' + }, + { + engine: 'Trident', + browser: 'AOL browser (AOL desktop)', + platform: 'Win 98', + version: '3', + grade: 'A' + }, + { + engine: 'Trident', + browser: 'AOL browser (AOL desktop)', + platform: 'Win 98', + version: '4', + grade: 'A' + }, + { + engine: 'Gecko', + browser: 'Firefox 1.0', + platform: 'Win 98+ / OSX.2+', + version: '4', + grade: 'A' + }, + { + engine: 'Gecko', + browser: 'Firefox 1.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'A' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'B' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'C' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'D' + } + ] + }, + columns: [ + { + name: 'engine', + label: 'Rendering engine', + groupName: 'A' + }, + { + name: 'browser', + label: 'Browser', + groupName: 'A' + }, + { + name: 'platform', + label: 'Platform(s)', + groupName: 'B' + }, + { + name: 'version', + label: 'Engine version', + groupName: 'B' + }, + { + name: 'grade', + label: 'CSS grade' + } + ] + } }; diff --git a/examples/components/CRUD/ItemActions.jsx b/examples/components/CRUD/ItemActions.jsx index 2952995d..80c44e0c 100644 --- a/examples/components/CRUD/ItemActions.jsx +++ b/examples/components/CRUD/ItemActions.jsx @@ -1,223 +1,228 @@ export default { - $schema: "https://houtai.baidu.com/v2/schemas/page.json#", - title: "增删改查示例", - remark: "bla bla bla", - body: { - type: "crud", - api: "/api/sample", - headerToolbar: ['bulkActions', { - type: 'columns-toggler', - className: 'pull-right', - align: 'right' - }, { - type: 'drag-toggler', - className: 'pull-right' - }, { - type: 'pagination', - className: 'pull-right' - }], - itemActions: [ - { - type: "button", - label: "查看", - actionType: "dialog", - dialog: { - title: "查看", - body: { - type: "form", - controls: [ - { - type: "static", - name: "engine", - label: "Engine" - }, - { - type: "divider" - }, - { - type: "static", - name: "browser", - label: "Browser" - }, - { - type: "divider" - }, - { - type: "static", - name: "platform", - label: "Platform(s)" - }, - { - type: "divider" - }, - { - type: "static", - name: "version", - label: "Engine version" - }, - { - type: "divider" - }, - { - type: "static", - name: "grade", - label: "CSS grade" - }, - { - type: "divider" - }, - { - type: "html", - html: - "

添加其他 Html 片段 需要支持变量替换（todo）.

" - } - ] - } - } - }, - { - type: "button", - label: "编辑", - actionType: "drawer", - drawer: { - position: 'left', - size: 'lg', - title: "编辑", - body: { - type: "form", - name: "sample-edit-form", - api: "/api/sample/$id", - controls: [ - { - type: "text", - name: "engine", - label: "Engine", - required: true - }, - { - type: "divider" - }, - { - type: "text", - name: "browser", - label: "Browser", - required: true - }, - { - type: "divider" - }, - { - type: "text", - name: "platform", - label: "Platform(s)", - required: true - }, - { - type: "divider" - }, - { - type: "text", - name: "version", - label: "Engine version" - }, - { - type: "divider" - }, - { - type: "select", - name: "grade", - label: "CSS grade", - options: ["A", "B", "C", "D", "X"], - } - ] - } - } - }, - { - type: "button", - label: "删除", - actionType: "ajax", - confirmText: "您确认要删除?", - api: "delete:/api/sample/$id" - } - ], - bulkActions: [ - { - label: "批量删除", - actionType: "ajax", - api: "delete:/api/sample/${ids|raw}", - confirmText: "确定要批量删除?", - type: "button" - }, - { - label: "批量修改", - actionType: "dialog", - dialog: { - title: "批量编辑", - name: "sample-bulk-edit", - body: { - type: "form", - api: "/api/sample/bulkUpdate2", - controls: [ - { - type: 'hidden', - name: 'ids' - }, - { - type: "text", - name: "engine", - label: "Engine" - } - ] - } - }, - type: "button" - } - ], - columns: [ - { - name: "id", - label: "ID", - width: 20, - sortable: true, - type: "text", - toggled: true, - remark: 'Bla bla Bla' - }, - { - name: "engine", - label: "Rendering engine", - sortable: true, - searchable: true, - type: "text", - toggled: true - }, - { - name: "browser", - label: "Browser", - sortable: true, - type: "text", - toggled: false - }, - { - name: "platform", - label: "Platform(s)", - sortable: true, - type: "text", - toggled: true - }, - { - name: "version", - label: "Engine version", - type: "text", - toggled: true - }, - { - name: "grade", - label: "CSS grade", - type: "text", - toggled: true - } - ] - } + $schema: 'https://houtai.baidu.com/v2/schemas/page.json#', + title: '增删改查示例', + remark: 'bla bla bla', + body: { + type: 'crud', + api: '/api/sample', + headerToolbar: [ + 'bulkActions', + { + type: 'columns-toggler', + className: 'pull-right', + align: 'right' + }, + { + type: 'drag-toggler', + className: 'pull-right' + }, + { + type: 'pagination', + className: 'pull-right' + } + ], + itemActions: [ + { + type: 'button', + label: '查看', + actionType: 'dialog', + dialog: { + title: '查看', + body: { + type: 'form', + controls: [ + { + type: 'static', + name: 'engine', + label: 'Engine' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'browser', + label: 'Browser' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'platform', + label: 'Platform(s)' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'version', + label: 'Engine version' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'grade', + label: 'CSS grade' + }, + { + type: 'divider' + }, + { + type: 'html', + html: + '

添加其他 Html 片段 需要支持变量替换（todo）.

' + } + ] + } + } + }, + { + type: 'button', + label: '编辑', + actionType: 'drawer', + drawer: { + position: 'left', + size: 'lg', + title: '编辑', + body: { + type: 'form', + name: 'sample-edit-form', + api: '/api/sample/$id', + controls: [ + { + type: 'text', + name: 'engine', + label: 'Engine', + required: true + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'browser', + label: 'Browser', + required: true + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'platform', + label: 'Platform(s)', + required: true + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'version', + label: 'Engine version' + }, + { + type: 'divider' + }, + { + type: 'select', + name: 'grade', + label: 'CSS grade', + options: ['A', 'B', 'C', 'D', 'X'] + } + ] + } + } + }, + { + type: 'button', + label: '删除', + actionType: 'ajax', + confirmText: '您确认要删除?', + api: 'delete:/api/sample/$id' + } + ], + bulkActions: [ + { + label: '批量删除', + actionType: 'ajax', + api: 'delete:/api/sample/${ids|raw}', + confirmText: '确定要批量删除?', + type: 'button' + }, + { + label: '批量修改', + actionType: 'dialog', + dialog: { + title: '批量编辑', + name: 'sample-bulk-edit', + body: { + type: 'form', + api: '/api/sample/bulkUpdate2', + controls: [ + { + type: 'hidden', + name: 'ids' + }, + { + type: 'text', + name: 'engine', + label: 'Engine' + } + ] + } + }, + type: 'button' + } + ], + columns: [ + { + name: 'id', + label: 'ID', + width: 20, + sortable: true, + type: 'text', + toggled: true, + remark: 'Bla bla Bla' + }, + { + name: 'engine', + label: 'Rendering engine', + sortable: true, + searchable: true, + type: 'text', + toggled: true + }, + { + name: 'browser', + label: 'Browser', + sortable: true, + type: 'text', + toggled: false + }, + { + name: 'platform', + label: 'Platform(s)', + sortable: true, + type: 'text', + toggled: true + }, + { + name: 'version', + label: 'Engine version', + type: 'text', + toggled: true + }, + { + name: 'grade', + label: 'CSS grade', + type: 'text', + toggled: true + } + ] + } }; diff --git a/examples/components/CRUD/JumpNext.jsx b/examples/components/CRUD/JumpNext.jsx index 228ecbca..52c8dcc5 100644 --- a/examples/components/CRUD/JumpNext.jsx +++ b/examples/components/CRUD/JumpNext.jsx @@ -1,131 +1,131 @@ export default { - "$schema": "https://houtai.baidu.com/v2/schemas/page.json#", - "title": "操作并下一个", - "remark": "当存在下一条时，支持直接打开下一条操作。", - "body": { - "type": "crud", - "title": "", - "api": "/api/sample/list", - "columnsTogglable": false, - "columns": [ - { - "name": "id", - "label": "ID", - "width": 20, - "type": "text", - "toggled": true - }, - { - "name": "engine", - "label": "Rendering engine", - "type": "text", - "toggled": true - }, - { - "name": "browser", - "label": "Browser", - "type": "text", - "toggled": true - }, - { - "type": "operation", - "label": "操作", - "width": 130, - "buttons": [ - { - "type": "button", - "icon": "fa fa-pencil", - "actionType": "dialog", - "nextCondition": "true", - "_nextCondition": "可以设置条件比如： data.grade == \"B\"", - "dialog": { - "title": "编辑", - "actions": [ - { - "type": "button", - "actionType": "prev", - "level": "info", - "visibleOn": "data.hasPrev", - "label": "上一个" - }, - { - "type": "button", - "actionType": "cancel", - "label": "关闭" - }, - { - "type": "submit", - "actionType": "next", - "visibleOn": "data.hasNext", - "label": "保存并下一个", - "level": "primary" - }, - { - "type": "submit", - "visibleOn": "!data.hasNext", - "label": "保存", - "level": "primary" - }, - { - "type": "button", - "actionType": "next", - "level": "info", - "visibleOn": "data.hasNext", - "label": "下一个" - } - ], - "body": { - "type": "form", - "name": "sample-edit-form", - "api": "/api/sample/$id", - "controls": [ - { - "type": "text", - "name": "engine", - "label": "Engine", - "required": true - }, - { - "type": "divider" - }, - { - "type": "text", - "name": "browser", - "label": "Browser", - "required": true - }, - { - "type": "divider" - }, - { - "type": "text", - "name": "platform", - "label": "Platform(s)", - "required": true - }, - { - "type": "divider" - }, - { - "type": "text", - "name": "version", - "label": "Engine version" - }, - { - "type": "divider" - }, - { - "type": "text", - "name": "grade", - "label": "CSS grade" - } - ] - } - } - } - ], - "toggled": true + $schema: 'https://houtai.baidu.com/v2/schemas/page.json#', + title: '操作并下一个', + remark: '当存在下一条时，支持直接打开下一条操作。', + body: { + type: 'crud', + title: '', + api: '/api/sample/list', + columnsTogglable: false, + columns: [ + { + name: 'id', + label: 'ID', + width: 20, + type: 'text', + toggled: true + }, + { + name: 'engine', + label: 'Rendering engine', + type: 'text', + toggled: true + }, + { + name: 'browser', + label: 'Browser', + type: 'text', + toggled: true + }, + { + type: 'operation', + label: '操作', + width: 130, + buttons: [ + { + type: 'button', + icon: 'fa fa-pencil', + actionType: 'dialog', + nextCondition: 'true', + _nextCondition: '可以设置条件比如： data.grade == "B"', + dialog: { + title: '编辑', + actions: [ + { + type: 'button', + actionType: 'prev', + level: 'info', + visibleOn: 'data.hasPrev', + label: '上一个' + }, + { + type: 'button', + actionType: 'cancel', + label: '关闭' + }, + { + type: 'submit', + actionType: 'next', + visibleOn: 'data.hasNext', + label: '保存并下一个', + level: 'primary' + }, + { + type: 'submit', + visibleOn: '!data.hasNext', + label: '保存', + level: 'primary' + }, + { + type: 'button', + actionType: 'next', + level: 'info', + visibleOn: 'data.hasNext', + label: '下一个' + } + ], + body: { + type: 'form', + name: 'sample-edit-form', + api: '/api/sample/$id', + controls: [ + { + type: 'text', + name: 'engine', + label: 'Engine', + required: true + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'browser', + label: 'Browser', + required: true + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'platform', + label: 'Platform(s)', + required: true + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'version', + label: 'Engine version' + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'grade', + label: 'CSS grade' + } + ] + } } - ] - } -} \ No newline at end of file + } + ], + toggled: true + } + ] + } +}; diff --git a/examples/components/CRUD/Keyboards.jsx b/examples/components/CRUD/Keyboards.jsx index 40dea09e..49ba4654 100644 --- a/examples/components/CRUD/Keyboards.jsx +++ b/examples/components/CRUD/Keyboards.jsx @@ -1,83 +1,78 @@ export default { - "$schema": "https://houtai.baidu.com/v2/schemas/page.json#", - "title": "Table 全键盘操作示例", - "remark": "bla bla bla", - "body": [ + $schema: 'https://houtai.baidu.com/v2/schemas/page.json#', + title: 'Table 全键盘操作示例', + remark: 'bla bla bla', + body: [ + { + type: 'plain', + className: 'text-danger', + text: + '请通过上下左右键切换单元格，按 `Space` 键进入编辑模式，按 `Enter` 提交编辑，并最后点左上角的全部保存完成操作。' + }, + { + type: 'crud', + className: 'm-t', + api: '/api/sample', + quickSaveApi: '/api/sample/bulkUpdate', + quickSaveItemApi: '/api/sample/$id', + columns: [ { - "type": "plain", - "className": "text-danger", - "text": "请通过上下左右键切换单元格，按 `Space` 键进入编辑模式，按 `Enter` 提交编辑，并最后点左上角的全部保存完成操作。" + name: 'id', + label: 'ID', + width: 20, + sortable: true, + type: 'text', + toggled: true }, { - "type": "crud", - "className": "m-t", - "api": "/api/sample", - "quickSaveApi": "/api/sample/bulkUpdate", - "quickSaveItemApi": "/api/sample/$id", - "columns": [ - { - "name": "id", - "label": "ID", - "width": 20, - "sortable": true, - "type": "text", - "toggled": true - }, - { - "name": "engine", - "label": "Rendering engine", - "sortable": true, - "quickEdit": { - type: "text", - required: true, - mode: 'inline' - }, - "type": "text", - "toggled": true - }, - { - "name": "browser", - "label": "Browser", - "sortable": true, - "quickEdit": { - type: "text", - required: true - }, - "type": "text", - "toggled": true - }, - { - "name": "platform", - "label": "Platform(s)", - "sortable": true, - "quickEdit": true, - "type": "text", - "toggled": true - }, - { - "name": "version", - "label": "Engine version", - "quickEdit": true, - "type": "text", - "toggled": true - }, - { - "name": "grade", - "label": "CSS grade", - "quickEdit": { - "type": "select", - "options": [ - "A", - "B", - "C", - "D", - "X" - ] - }, - "type": "text", - "toggled": true - } - ] + name: 'engine', + label: 'Rendering engine', + sortable: true, + quickEdit: { + type: 'text', + required: true, + mode: 'inline' + }, + type: 'text', + toggled: true + }, + { + name: 'browser', + label: 'Browser', + sortable: true, + quickEdit: { + type: 'text', + required: true + }, + type: 'text', + toggled: true + }, + { + name: 'platform', + label: 'Platform(s)', + sortable: true, + quickEdit: true, + type: 'text', + toggled: true + }, + { + name: 'version', + label: 'Engine version', + quickEdit: true, + type: 'text', + toggled: true + }, + { + name: 'grade', + label: 'CSS grade', + quickEdit: { + type: 'select', + options: ['A', 'B', 'C', 'D', 'X'] + }, + type: 'text', + toggled: true } - ] -} \ No newline at end of file + ] + } + ] +}; diff --git a/examples/components/CRUD/List.jsx b/examples/components/CRUD/List.jsx index 5a74bdc6..88621302 100644 --- a/examples/components/CRUD/List.jsx +++ b/examples/components/CRUD/List.jsx @@ -1,214 +1,213 @@ export default { - $schema: "https://houtai.baidu.com/v2/schemas/page.json#", - title: "增删改查示例", - remark: "bla bla bla", - body: { - type: "crud", - api: "/api/sample", - mode: "list", - draggable: true, - saveOrderApi: { - url: "/api/sample/saveOrder" + $schema: 'https://houtai.baidu.com/v2/schemas/page.json#', + title: '增删改查示例', + remark: 'bla bla bla', + body: { + type: 'crud', + api: '/api/sample', + mode: 'list', + draggable: true, + saveOrderApi: { + url: '/api/sample/saveOrder' + }, + orderField: 'weight', + filter: { + title: '条件搜索', + submitText: '', + controls: [ + { + type: 'text', + name: 'keywords', + placeholder: '通过关键字搜索', + addOn: { + label: '搜索', + type: 'submit' + } }, - orderField: "weight", - filter: { - title: "条件搜索", - submitText: "", - controls: [ - { - type: "text", - name: "keywords", - placeholder: "通过关键字搜索", - addOn: { - label: "搜索", - type: "submit" - } - }, - { - type: "plain", - text: "这只是个示例, 目前搜索对查询结果无效." - } - ] - }, - bulkActions: [ - { - label: "批量删除", - actionType: "ajax", - api: "delete:/api/sample/${ids|raw}", - confirmText: "确定要批量删除?", - type: "button", - level: "danger" - }, - { - label: "批量修改", - actionType: "dialog", - level: "info", - type: "button", - dialog: { - title: "批量编辑", - body: { - type: 'form', - api: "/api/sample/bulkUpdate2", - controls: [ - {type: 'hidden', name: 'ids'}, - { - type: "text", - name: "engine", - label: "Engine" - } - ] - } - } - } - ], - quickSaveApi: "/api/sample/bulkUpdate", - quickSaveItemApi: "/api/sample/$id", - listItem: { - actions: [ - { - type: "button", - icon: "fa fa-eye", - actionType: "dialog", - dialog: { - title: "查看", - body: { - type: "form", - controls: [ - { - type: "static", - name: "engine", - label: "Engine" - }, - { - type: "divider" - }, - { - type: "static", - name: "browser", - label: "Browser" - }, - { - type: "divider" - }, - { - type: "static", - name: "platform", - label: "Platform(s)" - }, - { - type: "divider" - }, - { - type: "static", - name: "version", - label: "Engine version" - }, - { - type: "divider" - }, - { - type: "static", - name: "grade", - label: "CSS grade" - }, - { - type: "divider" - }, - { - type: "html", - html: - "

添加其他 Html 片段 需要支持变量替换（todo）.

" - } - ] - } - } - }, - { - type: "button", - icon: "fa fa-pencil", - actionType: "dialog", - dialog: { - title: "编辑", - body: { - type: "form", - name: "sample-edit-form", - api: "/api/sample/$id", - controls: [ - { - type: "text", - name: "engine", - label: "Engine", - required: true - }, - { - type: "divider" - }, - { - type: "text", - name: "browser", - label: "Browser", - required: true - }, - { - type: "divider" - }, - { - type: "text", - name: "platform", - label: "Platform(s)", - required: true - }, - { - type: "divider" - }, - { - type: "text", - name: "version", - label: "Engine version" - }, - { - type: "divider" - }, - { - type: "text", - name: "grade", - label: "CSS grade" - } - ] - } - } - }, - { - type: "button", - icon: "fa fa-times text-danger", - actionType: "ajax", - confirmText: "您确认要删除?", - api: "delete:/api/sample/$id" - } - ], - body: [ - { - name: "engine", - label: "Rendering engine", - sortable: true, - quickEdit: true - }, - [ - { - name: "browser", - label: "Browser" - - }, - { - name: "platform", - label: "Platform(s)" - } - ], - { - name: "version", - label: "Engine version" - } - ] + { + type: 'plain', + text: '这只是个示例, 目前搜索对查询结果无效.' } + ] + }, + bulkActions: [ + { + label: '批量删除', + actionType: 'ajax', + api: 'delete:/api/sample/${ids|raw}', + confirmText: '确定要批量删除?', + type: 'button', + level: 'danger' + }, + { + label: '批量修改', + actionType: 'dialog', + level: 'info', + type: 'button', + dialog: { + title: '批量编辑', + body: { + type: 'form', + api: '/api/sample/bulkUpdate2', + controls: [ + {type: 'hidden', name: 'ids'}, + { + type: 'text', + name: 'engine', + label: 'Engine' + } + ] + } + } + } + ], + quickSaveApi: '/api/sample/bulkUpdate', + quickSaveItemApi: '/api/sample/$id', + listItem: { + actions: [ + { + type: 'button', + icon: 'fa fa-eye', + actionType: 'dialog', + dialog: { + title: '查看', + body: { + type: 'form', + controls: [ + { + type: 'static', + name: 'engine', + label: 'Engine' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'browser', + label: 'Browser' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'platform', + label: 'Platform(s)' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'version', + label: 'Engine version' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'grade', + label: 'CSS grade' + }, + { + type: 'divider' + }, + { + type: 'html', + html: + '

添加其他 Html 片段 需要支持变量替换（todo）.

' + } + ] + } + } + }, + { + type: 'button', + icon: 'fa fa-pencil', + actionType: 'dialog', + dialog: { + title: '编辑', + body: { + type: 'form', + name: 'sample-edit-form', + api: '/api/sample/$id', + controls: [ + { + type: 'text', + name: 'engine', + label: 'Engine', + required: true + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'browser', + label: 'Browser', + required: true + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'platform', + label: 'Platform(s)', + required: true + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'version', + label: 'Engine version' + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'grade', + label: 'CSS grade' + } + ] + } + } + }, + { + type: 'button', + icon: 'fa fa-times text-danger', + actionType: 'ajax', + confirmText: '您确认要删除?', + api: 'delete:/api/sample/$id' + } + ], + body: [ + { + name: 'engine', + label: 'Rendering engine', + sortable: true, + quickEdit: true + }, + [ + { + name: 'browser', + label: 'Browser' + }, + { + name: 'platform', + label: 'Platform(s)' + } + ], + { + name: 'version', + label: 'Engine version' + } + ] } + } }; diff --git a/examples/components/CRUD/LoadMore.jsx b/examples/components/CRUD/LoadMore.jsx index 1d1a6a35..28ae8dc1 100644 --- a/examples/components/CRUD/LoadMore.jsx +++ b/examples/components/CRUD/LoadMore.jsx @@ -1,223 +1,219 @@ export default { - $schema: "https://houtai.baidu.com/v2/schemas/page.json#", - title: "增删改查示例", - remark: "bla bla bla", - body: { - type: "crud", - api: "/api/sample", - mode: "list", - draggable: true, - saveOrderApi: { - url: "/api/sample/saveOrder" + $schema: 'https://houtai.baidu.com/v2/schemas/page.json#', + title: '增删改查示例', + remark: 'bla bla bla', + body: { + type: 'crud', + api: '/api/sample', + mode: 'list', + draggable: true, + saveOrderApi: { + url: '/api/sample/saveOrder' + }, + orderField: 'weight', + filter: { + title: '条件搜索', + submitText: '', + controls: [ + { + type: 'text', + name: 'keywords', + placeholder: '通过关键字搜索', + addOn: { + label: '搜索', + type: 'submit' + } }, - orderField: "weight", - filter: { - title: "条件搜索", - submitText: "", - controls: [ - { - type: "text", - name: "keywords", - placeholder: "通过关键字搜索", - addOn: { - label: "搜索", - type: "submit" - } - }, - { - type: "plain", - text: "这只是个示例, 目前搜索对查询结果无效." - } - ] - }, - bulkActions: [ - { - label: "批量删除", - actionType: "ajax", - api: "delete:/api/sample/${ids|raw}", - confirmText: "确定要批量删除?", - type: "button", - level: "danger" - }, - { - label: "批量修改", - actionType: "dialog", - level: "info", - type: "button", - dialog: { - title: "批量编辑", - body: { - type: 'form', - api: "/api/sample/bulkUpdate2", - controls: [ - {type: 'hidden', name: 'ids'}, - { - type: "text", - name: "engine", - label: "Engine" - } - ] - } - } - } - ], - quickSaveApi: "/api/sample/bulkUpdate", - quickSaveItemApi: "/api/sample/$id", - headerToolbar: [ - "bulkActions" - ], - footerToolbar: [ - "load-more" - ], - listItem: { - actions: [ - { - type: "button", - icon: "fa fa-eye", - actionType: "dialog", - dialog: { - title: "查看", - body: { - type: "form", - controls: [ - { - type: "static", - name: "engine", - label: "Engine" - }, - { - type: "divider" - }, - { - type: "static", - name: "browser", - label: "Browser" - }, - { - type: "divider" - }, - { - type: "static", - name: "platform", - label: "Platform(s)" - }, - { - type: "divider" - }, - { - type: "static", - name: "version", - label: "Engine version" - }, - { - type: "divider" - }, - { - type: "static", - name: "grade", - label: "CSS grade" - }, - { - type: "divider" - }, - { - type: "html", - html: - "

添加其他 Html 片段 需要支持变量替换（todo）.

" - } - ] - } - } - }, - { - type: "button", - icon: "fa fa-pencil", - actionType: "dialog", - dialog: { - title: "编辑", - body: { - type: "form", - name: "sample-edit-form", - api: "/api/sample/$id", - controls: [ - { - type: "text", - name: "engine", - label: "Engine", - required: true - }, - { - type: "divider" - }, - { - type: "text", - name: "browser", - label: "Browser", - required: true - }, - { - type: "divider" - }, - { - type: "text", - name: "platform", - label: "Platform(s)", - required: true - }, - { - type: "divider" - }, - { - type: "text", - name: "version", - label: "Engine version" - }, - { - type: "divider" - }, - { - type: "text", - name: "grade", - label: "CSS grade" - } - ] - } - } - }, - { - type: "button", - icon: "fa fa-times text-danger", - actionType: "ajax", - confirmText: "您确认要删除?", - api: "delete:/api/sample/$id" - } - ], - body: [ - { - name: "engine", - label: "Rendering engine", - sortable: true, - quickEdit: true, - labelClassName: "w-sm pull-left text-muted" - }, - [ - { - name: "browser", - label: "Browser", - labelClassName: "w-sm pull-left text-muted" - }, - { - name: "platform", - label: "Platform(s)", - labelClassName: "w-sm pull-left text-muted" - } - ], - { - name: "version", - label: "Engine version", - labelClassName: "w-sm pull-left text-muted" - } - ] + { + type: 'plain', + text: '这只是个示例, 目前搜索对查询结果无效.' } + ] + }, + bulkActions: [ + { + label: '批量删除', + actionType: 'ajax', + api: 'delete:/api/sample/${ids|raw}', + confirmText: '确定要批量删除?', + type: 'button', + level: 'danger' + }, + { + label: '批量修改', + actionType: 'dialog', + level: 'info', + type: 'button', + dialog: { + title: '批量编辑', + body: { + type: 'form', + api: '/api/sample/bulkUpdate2', + controls: [ + {type: 'hidden', name: 'ids'}, + { + type: 'text', + name: 'engine', + label: 'Engine' + } + ] + } + } + } + ], + quickSaveApi: '/api/sample/bulkUpdate', + quickSaveItemApi: '/api/sample/$id', + headerToolbar: ['bulkActions'], + footerToolbar: ['load-more'], + listItem: { + actions: [ + { + type: 'button', + icon: 'fa fa-eye', + actionType: 'dialog', + dialog: { + title: '查看', + body: { + type: 'form', + controls: [ + { + type: 'static', + name: 'engine', + label: 'Engine' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'browser', + label: 'Browser' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'platform', + label: 'Platform(s)' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'version', + label: 'Engine version' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'grade', + label: 'CSS grade' + }, + { + type: 'divider' + }, + { + type: 'html', + html: + '

添加其他 Html 片段 需要支持变量替换（todo）.

' + } + ] + } + } + }, + { + type: 'button', + icon: 'fa fa-pencil', + actionType: 'dialog', + dialog: { + title: '编辑', + body: { + type: 'form', + name: 'sample-edit-form', + api: '/api/sample/$id', + controls: [ + { + type: 'text', + name: 'engine', + label: 'Engine', + required: true + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'browser', + label: 'Browser', + required: true + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'platform', + label: 'Platform(s)', + required: true + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'version', + label: 'Engine version' + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'grade', + label: 'CSS grade' + } + ] + } + } + }, + { + type: 'button', + icon: 'fa fa-times text-danger', + actionType: 'ajax', + confirmText: '您确认要删除?', + api: 'delete:/api/sample/$id' + } + ], + body: [ + { + name: 'engine', + label: 'Rendering engine', + sortable: true, + quickEdit: true, + labelClassName: 'w-sm pull-left text-muted' + }, + [ + { + name: 'browser', + label: 'Browser', + labelClassName: 'w-sm pull-left text-muted' + }, + { + name: 'platform', + label: 'Platform(s)', + labelClassName: 'w-sm pull-left text-muted' + } + ], + { + name: 'version', + label: 'Engine version', + labelClassName: 'w-sm pull-left text-muted' + } + ] } + } }; diff --git a/examples/components/CRUD/LoadOnce.jsx b/examples/components/CRUD/LoadOnce.jsx index 5e84bdf7..d1b2eb5a 100644 --- a/examples/components/CRUD/LoadOnce.jsx +++ b/examples/components/CRUD/LoadOnce.jsx @@ -1,202 +1,202 @@ export default { - $schema: "https://houtai.baidu.com/v2/schemas/page.json#", - title: "一次性加载，前端分页，前端排序", - body: { - type: "crud", - loadDataOnce: true, - api: "/api/sample?waitSeconds=1", - filter: { - title: "条件搜索", - submitText: "", - controls: [ - { - type: "text", - name: "keywords", - placeholder: "通过关键字搜索", - addOn: { - label: "搜索", - type: "submit" - } - } - ] - }, - columns: [ - { - name: "id", - label: "ID", - width: 20, - sortable: true, - type: "text", - toggled: true, - remark: 'Bla bla Bla' - }, - { - name: "engine", - label: "Rendering engine", - sortable: true, - type: "text", - toggled: true - }, - { - name: "browser", - label: "Browser", - sortable: true, - type: "text", - toggled: false - }, - { - name: "platform", - label: "Platform(s)", - sortable: true, - type: "text", - toggled: true - }, - { - name: "version", - label: "Engine version", - type: "text", - toggled: true - }, - { - name: "grade", - label: "CSS grade", - type: "text", - toggled: true - }, - { - type: "operation", - label: "操作", - width: 100, - buttons: [ - { - type: "button", - icon: "fa fa-eye", - actionType: "dialog", - tooltip: "查看", - dialog: { - title: "查看", - body: { - type: "form", - controls: [ - { - type: "static", - name: "engine", - label: "Engine" - }, - { - type: "divider" - }, - { - type: "static", - name: "browser", - label: "Browser" - }, - { - type: "divider" - }, - { - type: "static", - name: "platform", - label: "Platform(s)" - }, - { - type: "divider" - }, - { - type: "static", - name: "version", - label: "Engine version" - }, - { - type: "divider" - }, - { - type: "static", - name: "grade", - label: "CSS grade" - }, - { - type: "divider" - }, - { - type: "html", - html: - "

添加其他 Html 片段 需要支持变量替换（todo）.

" - } - ] - } - } - }, - { - type: "button", - icon: "fa fa-pencil", - tooltip: "编辑", - actionType: "drawer", - drawer: { - position: 'left', - size: 'lg', - title: "编辑", - body: { - type: "form", - name: "sample-edit-form", - api: "/api/sample/$id", - controls: [ - { - type: "text", - name: "engine", - label: "Engine", - required: true - }, - { - type: "divider" - }, - { - type: "text", - name: "browser", - label: "Browser", - required: true - }, - { - type: "divider" - }, - { - type: "text", - name: "platform", - label: "Platform(s)", - required: true - }, - { - type: "divider" - }, - { - type: "text", - name: "version", - label: "Engine version" - }, - { - type: "divider" - }, - { - type: "select", - name: "grade", - label: "CSS grade", - options: ["A", "B", "C", "D", "X"], - } - ] - } - } - }, - { - type: "button", - icon: "fa fa-times text-danger", - actionType: "ajax", - tooltip: "删除", - confirmText: "您确认要删除?", - api: "delete:/api/sample/$id" - } - ], - toggled: true + $schema: 'https://houtai.baidu.com/v2/schemas/page.json#', + title: '一次性加载，前端分页，前端排序', + body: { + type: 'crud', + loadDataOnce: true, + api: '/api/sample?waitSeconds=1', + filter: { + title: '条件搜索', + submitText: '', + controls: [ + { + type: 'text', + name: 'keywords', + placeholder: '通过关键字搜索', + addOn: { + label: '搜索', + type: 'submit' + } + } + ] + }, + columns: [ + { + name: 'id', + label: 'ID', + width: 20, + sortable: true, + type: 'text', + toggled: true, + remark: 'Bla bla Bla' + }, + { + name: 'engine', + label: 'Rendering engine', + sortable: true, + type: 'text', + toggled: true + }, + { + name: 'browser', + label: 'Browser', + sortable: true, + type: 'text', + toggled: false + }, + { + name: 'platform', + label: 'Platform(s)', + sortable: true, + type: 'text', + toggled: true + }, + { + name: 'version', + label: 'Engine version', + type: 'text', + toggled: true + }, + { + name: 'grade', + label: 'CSS grade', + type: 'text', + toggled: true + }, + { + type: 'operation', + label: '操作', + width: 100, + buttons: [ + { + type: 'button', + icon: 'fa fa-eye', + actionType: 'dialog', + tooltip: '查看', + dialog: { + title: '查看', + body: { + type: 'form', + controls: [ + { + type: 'static', + name: 'engine', + label: 'Engine' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'browser', + label: 'Browser' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'platform', + label: 'Platform(s)' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'version', + label: 'Engine version' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'grade', + label: 'CSS grade' + }, + { + type: 'divider' + }, + { + type: 'html', + html: + '

添加其他 Html 片段 需要支持变量替换（todo）.

' + } + ] + } } - ] - } + }, + { + type: 'button', + icon: 'fa fa-pencil', + tooltip: '编辑', + actionType: 'drawer', + drawer: { + position: 'left', + size: 'lg', + title: '编辑', + body: { + type: 'form', + name: 'sample-edit-form', + api: '/api/sample/$id', + controls: [ + { + type: 'text', + name: 'engine', + label: 'Engine', + required: true + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'browser', + label: 'Browser', + required: true + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'platform', + label: 'Platform(s)', + required: true + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'version', + label: 'Engine version' + }, + { + type: 'divider' + }, + { + type: 'select', + name: 'grade', + label: 'CSS grade', + options: ['A', 'B', 'C', 'D', 'X'] + } + ] + } + } + }, + { + type: 'button', + icon: 'fa fa-times text-danger', + actionType: 'ajax', + tooltip: '删除', + confirmText: '您确认要删除?', + api: 'delete:/api/sample/$id' + } + ], + toggled: true + } + ] + } }; diff --git a/examples/components/CRUD/MergeCell.jsx b/examples/components/CRUD/MergeCell.jsx index 0a8a8651..47a7f2e6 100644 --- a/examples/components/CRUD/MergeCell.jsx +++ b/examples/components/CRUD/MergeCell.jsx @@ -1,104 +1,105 @@ export default { - $schema: "https://houtai.baidu.com/v2/schemas/page.json#", - title: "支持自动合并单元格，从左到右，可配置从左侧起多少列内启动自动合并单元格，当前配置 3", - body: { - type: "table", - data: { - items: [ - { - "engine": "Trident", - "browser": "Internet Explorer 4.2", - "platform": "Win 95+", - "version": "4", - "grade": "A" - }, - { - "engine": "Trident", - "browser": "Internet Explorer 4.2", - "platform": "Win 95+", - "version": "4", - "grade": "B" - }, - { - "engine": "Trident", - "browser": "AOL browser (AOL desktop)", - "platform": "Win 95+", - "version": "4", - "grade": "C" - }, - { - "engine": "Trident", - "browser": "AOL browser (AOL desktop)", - "platform": "Win 98", - "version": "3", - "grade": "A" - }, - { - "engine": "Trident", - "browser": "AOL browser (AOL desktop)", - "platform": "Win 98", - "version": "4", - "grade": "A" - }, - { - "engine": "Gecko", - "browser": "Firefox 1.0", - "platform": "Win 98+ / OSX.2+", - "version": "4", - "grade": "A" - }, - { - "engine": "Gecko", - "browser": "Firefox 1.0", - "platform": "Win 98+ / OSX.2+", - "version": "5", - "grade": "A" - }, - { - "engine": "Gecko", - "browser": "Firefox 2.0", - "platform": "Win 98+ / OSX.2+", - "version": "5", - "grade": "B" - }, - { - "engine": "Gecko", - "browser": "Firefox 2.0", - "platform": "Win 98+ / OSX.2+", - "version": "5", - "grade": "C" - }, - { - "engine": "Gecko", - "browser": "Firefox 2.0", - "platform": "Win 98+ / OSX.2+", - "version": "5", - "grade": "D" - } - ] + $schema: 'https://houtai.baidu.com/v2/schemas/page.json#', + title: + '支持自动合并单元格，从左到右，可配置从左侧起多少列内启动自动合并单元格，当前配置 3', + body: { + type: 'table', + data: { + items: [ + { + engine: 'Trident', + browser: 'Internet Explorer 4.2', + platform: 'Win 95+', + version: '4', + grade: 'A' }, - combineNum: 3, // 配置自动合并单元格的列数。 - columns: [ - { - name: "engine", - label: "Rendering engine" - }, - { - name: "browser", - label: "Browser" - }, - { - name: "platform", - label: "Platform(s)" - }, - { - name: "version", - label: "Engine version" - }, - { - name: "grade", - label: "CSS grade", - } - ] - } + { + engine: 'Trident', + browser: 'Internet Explorer 4.2', + platform: 'Win 95+', + version: '4', + grade: 'B' + }, + { + engine: 'Trident', + browser: 'AOL browser (AOL desktop)', + platform: 'Win 95+', + version: '4', + grade: 'C' + }, + { + engine: 'Trident', + browser: 'AOL browser (AOL desktop)', + platform: 'Win 98', + version: '3', + grade: 'A' + }, + { + engine: 'Trident', + browser: 'AOL browser (AOL desktop)', + platform: 'Win 98', + version: '4', + grade: 'A' + }, + { + engine: 'Gecko', + browser: 'Firefox 1.0', + platform: 'Win 98+ / OSX.2+', + version: '4', + grade: 'A' + }, + { + engine: 'Gecko', + browser: 'Firefox 1.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'A' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'B' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'C' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '5', + grade: 'D' + } + ] + }, + combineNum: 3, // 配置自动合并单元格的列数。 + columns: [ + { + name: 'engine', + label: 'Rendering engine' + }, + { + name: 'browser', + label: 'Browser' + }, + { + name: 'platform', + label: 'Platform(s)' + }, + { + name: 'version', + label: 'Engine version' + }, + { + name: 'grade', + label: 'CSS grade' + } + ] + } }; diff --git a/examples/components/CRUD/Nested.jsx b/examples/components/CRUD/Nested.jsx index ead65a61..cc6d7420 100644 --- a/examples/components/CRUD/Nested.jsx +++ b/examples/components/CRUD/Nested.jsx @@ -1,197 +1,197 @@ export default { - $schema: "https://houtai.baidu.com/v2/schemas/page.json#", - title: "支持多层嵌套，列数据中有 children 字段即可。（建议不超过10层）", - body: { - type: "crud", - api: "/api/mock2/crud/table2", - saveOrderApi: '/api/mock2/form/saveData', - expandConfig: { - expand: 'first', - accordion: true + $schema: 'https://houtai.baidu.com/v2/schemas/page.json#', + title: '支持多层嵌套，列数据中有 children 字段即可。（建议不超过10层）', + body: { + type: 'crud', + api: '/api/mock2/crud/table2', + saveOrderApi: '/api/mock2/form/saveData', + expandConfig: { + expand: 'first', + accordion: true + }, + draggable: true, + columns: [ + { + name: 'id', + label: 'ID', + sortable: true, + type: 'text', + toggled: true, + width: 100 + }, + { + name: 'engine', + label: 'Rendering engine', + sortable: true, + searchable: true, + type: 'text', + toggled: true + }, + { + name: 'browser', + label: 'Browser', + sortable: true, + type: 'text', + toggled: true + }, + { + name: 'platform', + label: 'Platform(s)', + sortable: true, + type: 'text', + toggled: true + }, + { + name: 'version', + label: 'Engine version', + quickEdit: true, + type: 'text', + toggled: true + }, + { + name: 'grade', + label: 'CSS grade', + quickEdit: { + mode: 'inline', + type: 'select', + options: ['A', 'B', 'C', 'D', 'X'], + inputClassName: 'w-xs', + saveImmediately: true }, - draggable: true, - columns: [ - { - name: "id", - label: "ID", - sortable: true, - type: "text", - toggled: true, - width: 100 - }, - { - name: "engine", - label: "Rendering engine", - sortable: true, - searchable: true, - type: "text", - toggled: true - }, - { - name: "browser", - label: "Browser", - sortable: true, - type: "text", - toggled: true - }, - { - name: "platform", - label: "Platform(s)", - sortable: true, - type: "text", - toggled: true - }, - { - name: "version", - label: "Engine version", - quickEdit: true, - type: "text", - toggled: true - }, - { - name: "grade", - label: "CSS grade", - quickEdit: { - mode: "inline", - type: "select", - options: ["A", "B", "C", "D", "X"], - inputClassName: 'w-xs', - saveImmediately: true - }, - type: "text", - toggled: true - }, - { - type: "operation", - label: "操作", - width: 100, - buttons: [ - { - type: "button", - icon: "fa fa-eye", - actionType: "dialog", - dialog: { - title: "查看", - body: { - type: "form", - controls: [ - { - type: "static", - name: "engine", - label: "Engine" - }, - { - type: "divider" - }, - { - type: "static", - name: "browser", - label: "Browser" - }, - { - type: "divider" - }, - { - type: "static", - name: "platform", - label: "Platform(s)" - }, - { - type: "divider" - }, - { - type: "static", - name: "version", - label: "Engine version" - }, - { - type: "divider" - }, - { - type: "static", - name: "grade", - label: "CSS grade" - }, - { - type: "divider" - }, - { - type: "html", - html: - "

添加其他 Html 片段 需要支持变量替换（todo）.

" - } - ] - } - } - }, - { - type: "button", - icon: "fa fa-pencil", - actionType: "drawer", - drawer: { - position: 'left', - size: 'lg', - title: "编辑", - body: { - type: "form", - name: "sample-edit-form", - api: "/api/sample/$id", - controls: [ - { - type: "text", - name: "engine", - label: "Engine", - required: true - }, - { - type: "divider" - }, - { - type: "text", - name: "browser", - label: "Browser", - required: true - }, - { - type: "divider" - }, - { - type: "text", - name: "platform", - label: "Platform(s)", - required: true - }, - { - type: "divider" - }, - { - type: "text", - name: "version", - label: "Engine version" - }, - { - type: "divider" - }, - { - type: "select", - name: "grade", - label: "CSS grade", - options: ["A", "B", "C", "D", "X"], - } - ] - } - } - }, - { - type: "button", - icon: "fa fa-times text-danger", - actionType: "ajax", - confirmText: "您确认要删除?", - api: "delete:/api/sample/$id" - } - ], - toggled: true + type: 'text', + toggled: true + }, + { + type: 'operation', + label: '操作', + width: 100, + buttons: [ + { + type: 'button', + icon: 'fa fa-eye', + actionType: 'dialog', + dialog: { + title: '查看', + body: { + type: 'form', + controls: [ + { + type: 'static', + name: 'engine', + label: 'Engine' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'browser', + label: 'Browser' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'platform', + label: 'Platform(s)' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'version', + label: 'Engine version' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'grade', + label: 'CSS grade' + }, + { + type: 'divider' + }, + { + type: 'html', + html: + '

添加其他 Html 片段 需要支持变量替换（todo）.

' + } + ] + } } - ] - } + }, + { + type: 'button', + icon: 'fa fa-pencil', + actionType: 'drawer', + drawer: { + position: 'left', + size: 'lg', + title: '编辑', + body: { + type: 'form', + name: 'sample-edit-form', + api: '/api/sample/$id', + controls: [ + { + type: 'text', + name: 'engine', + label: 'Engine', + required: true + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'browser', + label: 'Browser', + required: true + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'platform', + label: 'Platform(s)', + required: true + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'version', + label: 'Engine version' + }, + { + type: 'divider' + }, + { + type: 'select', + name: 'grade', + label: 'CSS grade', + options: ['A', 'B', 'C', 'D', 'X'] + } + ] + } + } + }, + { + type: 'button', + icon: 'fa fa-times text-danger', + actionType: 'ajax', + confirmText: '您确认要删除?', + api: 'delete:/api/sample/$id' + } + ], + toggled: true + } + ] + } }; diff --git a/examples/components/CRUD/Table.jsx b/examples/components/CRUD/Table.jsx index 79d00da0..fe66b5e7 100644 --- a/examples/components/CRUD/Table.jsx +++ b/examples/components/CRUD/Table.jsx @@ -1,357 +1,365 @@ export default { - $schema: "http://amis.baidu.com/v2/schemas/page.json#", - title: "增删改查示例", - remark: "bla bla bla", - toolbar: [ - { - type: "button", - actionType: "dialog", - label: "新增", - icon: 'fa fa-plus pull-left', - primary: true, - dialog: { - title: "新增", - body: { - type: "form", - name: "sample-edit-form", - api: "post:/api/sample", - controls: [ - { - type: "text", - name: "engine", - label: "Engine", - required: true - }, - { - type: "divider" - }, - { - type: "text", - name: "browser", - label: "Browser", - required: true - }, - { - type: "divider" - }, - { - type: "text", - name: "platform", - label: "Platform(s)", - required: true - }, - { - type: "divider" - }, - { - type: "text", - name: "version", - label: "Engine version" - }, - { - type: "divider" - }, - { - type: "text", - name: "grade", - label: "CSS grade" - } - ] - } + $schema: 'http://amis.baidu.com/v2/schemas/page.json#', + title: '增删改查示例', + remark: 'bla bla bla', + toolbar: [ + { + type: 'button', + actionType: 'dialog', + label: '新增', + icon: 'fa fa-plus pull-left', + primary: true, + dialog: { + title: '新增', + body: { + type: 'form', + name: 'sample-edit-form', + api: 'post:/api/sample', + controls: [ + { + type: 'text', + name: 'engine', + label: 'Engine', + required: true + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'browser', + label: 'Browser', + required: true + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'platform', + label: 'Platform(s)', + required: true + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'version', + label: 'Engine version' + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'grade', + label: 'CSS grade' } + ] } - ], - body: { - type: "crud", - draggable: true, - api: "/api/sample?waitSeconds=1", - keepItemSelectionOnPageChange: true, - labelTpl: '${id} ${engine}', - filter: { - title: "条件搜索", - submitText: "", - controls: [ - { - type: "text", - name: "keywords", - placeholder: "通过关键字搜索", - addOn: { - label: "搜索", - type: "submit" - } - }, - { - type: "plain", - text: "这里的表单项可以配置多个" - } - ] - }, - bulkActions: [ - { - label: "批量删除", - actionType: "ajax", - api: "delete:/api/sample/${ids|raw}", - confirmText: "确定要批量删除?" - }, - { - label: "批量修改", - actionType: "dialog", - dialog: { - title: "批量编辑", - name: "sample-bulk-edit", - body: { - type: "form", - api: "/api/sample/bulkUpdate2", - controls: [ - { - type: 'hidden', - name: 'ids' - }, - { - type: "text", - name: "engine", - label: "Engine" - } - ] - } - } - } - ], - quickSaveApi: "/api/sample/bulkUpdate", - quickSaveItemApi: "/api/sample/$id", - filterTogglable: true, - headerToolbar: ['filter-toggler', 'bulkActions', { - type: 'tpl', - tpl: '定制内容示例：当前有 ${count} 条数据。', - className: 'v-middle' - }, { - type: 'link', - href: 'https://www.baidu.com', - body: '百度一下', - htmlTarget: '_parent', - className: 'v-middle' - }, { - type: 'columns-toggler', - align: 'right' - }, { - type: 'drag-toggler', - align: 'right' - }, { - type: 'pagination', - align: 'right' - }], - footerToolbar: ['statistics', 'switch-per-page', 'pagination'], - columns: [ - { - name: "id", - label: "ID", - width: 20, - sortable: true, - type: "text", - toggled: true, - remark: 'Bla bla Bla' - }, - { - name: "engine", - label: "Rendering engine", - sortable: true, - searchable: true, - type: "text", - toggled: true - }, - { - name: "browser", - label: "Browser", - sortable: true, - type: "text", - toggled: false - }, - { - name: "platform", - label: "Platform(s)", - popOver: { - body: { - type: "tpl", - tpl: "偏了一点的popover" - }, - offset: { - y: 100 - } - }, - sortable: true, - type: "text", - toggled: true - }, - { - name: "version", - label: "Engine version", - quickEdit: true, - type: "text", - toggled: true, - filterable:{ - options:[ - { - label:'4', - value:'4' - }, - { - label:'5', - value:'5' - }, - { - label:'6', - value:'6' - }, - ] - } - }, - { - name: "grade", - label: "CSS grade", - quickEdit: { - mode: "inline", - type: "select", - inputClassName: 'w-xs', - options: ["A", "B", "C", "D", "X"], - saveImmediately: true - }, - type: "text", - toggled: true - }, - { - type: "operation", - label: "操作", - width: 100, - buttons: [ - { - type: "button", - icon: "fa fa-eye", - actionType: "dialog", - tooltip: "查看", - dialog: { - title: "查看", - body: { - type: "form", - controls: [ - { - type: "static", - name: "engine", - label: "Engine" - }, - { - type: "divider" - }, - { - type: "static", - name: "browser", - label: "Browser" - }, - { - type: "divider" - }, - { - type: "static", - name: "platform", - label: "Platform(s)" - }, - { - type: "divider" - }, - { - type: "static", - name: "version", - label: "Engine version" - }, - { - type: "divider" - }, - { - type: "static", - name: "grade", - label: "CSS grade" - }, - { - type: "divider" - }, - { - type: "html", - html: - "

添加其他 Html 片段 需要支持变量替换（todo）.

" - } - ] - } - } - }, - { - type: "button", - icon: "fa fa-pencil", - tooltip: "编辑", - actionType: "drawer", - drawer: { - position: 'left', - size: 'lg', - title: "编辑", - body: { - type: "form", - name: "sample-edit-form", - api: "/api/sample/$id", - controls: [ - { - type: "text", - name: "engine", - label: "Engine", - required: true - }, - { - type: "divider" - }, - { - type: "text", - name: "browser", - label: "Browser", - required: true - }, - { - type: "divider" - }, - { - type: "text", - name: "platform", - label: "Platform(s)", - required: true - }, - { - type: "divider" - }, - { - type: "text", - name: "version", - label: "Engine version" - }, - { - type: "divider" - }, - { - type: "select", - name: "grade", - label: "CSS grade", - options: ["A", "B", "C", "D", "X"], - } - ] - } - } - }, - { - type: "button", - icon: "fa fa-times text-danger", - actionType: "ajax", - tooltip: "删除", - confirmText: "您确认要删除?", - api: "delete:/api/sample/$id" - } - ], - toggled: true - } - ] + } } + ], + body: { + type: 'crud', + draggable: true, + api: '/api/sample?waitSeconds=1', + keepItemSelectionOnPageChange: true, + labelTpl: '${id} ${engine}', + filter: { + title: '条件搜索', + submitText: '', + controls: [ + { + type: 'text', + name: 'keywords', + placeholder: '通过关键字搜索', + addOn: { + label: '搜索', + type: 'submit' + } + }, + { + type: 'plain', + text: '这里的表单项可以配置多个' + } + ] + }, + bulkActions: [ + { + label: '批量删除', + actionType: 'ajax', + api: 'delete:/api/sample/${ids|raw}', + confirmText: '确定要批量删除?' + }, + { + label: '批量修改', + actionType: 'dialog', + dialog: { + title: '批量编辑', + name: 'sample-bulk-edit', + body: { + type: 'form', + api: '/api/sample/bulkUpdate2', + controls: [ + { + type: 'hidden', + name: 'ids' + }, + { + type: 'text', + name: 'engine', + label: 'Engine' + } + ] + } + } + } + ], + quickSaveApi: '/api/sample/bulkUpdate', + quickSaveItemApi: '/api/sample/$id', + filterTogglable: true, + headerToolbar: [ + 'filter-toggler', + 'bulkActions', + { + type: 'tpl', + tpl: '定制内容示例：当前有 ${count} 条数据。', + className: 'v-middle' + }, + { + type: 'link', + href: 'https://www.baidu.com', + body: '百度一下', + htmlTarget: '_parent', + className: 'v-middle' + }, + { + type: 'columns-toggler', + align: 'right' + }, + { + type: 'drag-toggler', + align: 'right' + }, + { + type: 'pagination', + align: 'right' + } + ], + footerToolbar: ['statistics', 'switch-per-page', 'pagination'], + columns: [ + { + name: 'id', + label: 'ID', + width: 20, + sortable: true, + type: 'text', + toggled: true, + remark: 'Bla bla Bla' + }, + { + name: 'engine', + label: 'Rendering engine', + sortable: true, + searchable: true, + type: 'text', + toggled: true + }, + { + name: 'browser', + label: 'Browser', + sortable: true, + type: 'text', + toggled: false + }, + { + name: 'platform', + label: 'Platform(s)', + popOver: { + body: { + type: 'tpl', + tpl: '偏了一点的popover' + }, + offset: { + y: 100 + } + }, + sortable: true, + type: 'text', + toggled: true + }, + { + name: 'version', + label: 'Engine version', + quickEdit: true, + type: 'text', + toggled: true, + filterable: { + options: [ + { + label: '4', + value: '4' + }, + { + label: '5', + value: '5' + }, + { + label: '6', + value: '6' + } + ] + } + }, + { + name: 'grade', + label: 'CSS grade', + quickEdit: { + mode: 'inline', + type: 'select', + inputClassName: 'w-xs', + options: ['A', 'B', 'C', 'D', 'X'], + saveImmediately: true + }, + type: 'text', + toggled: true + }, + { + type: 'operation', + label: '操作', + width: 100, + buttons: [ + { + type: 'button', + icon: 'fa fa-eye', + actionType: 'dialog', + tooltip: '查看', + dialog: { + title: '查看', + body: { + type: 'form', + controls: [ + { + type: 'static', + name: 'engine', + label: 'Engine' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'browser', + label: 'Browser' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'platform', + label: 'Platform(s)' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'version', + label: 'Engine version' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'grade', + label: 'CSS grade' + }, + { + type: 'divider' + }, + { + type: 'html', + html: + '

添加其他 Html 片段 需要支持变量替换（todo）.

' + } + ] + } + } + }, + { + type: 'button', + icon: 'fa fa-pencil', + tooltip: '编辑', + actionType: 'drawer', + drawer: { + position: 'left', + size: 'lg', + title: '编辑', + body: { + type: 'form', + name: 'sample-edit-form', + api: '/api/sample/$id', + controls: [ + { + type: 'text', + name: 'engine', + label: 'Engine', + required: true + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'browser', + label: 'Browser', + required: true + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'platform', + label: 'Platform(s)', + required: true + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'version', + label: 'Engine version' + }, + { + type: 'divider' + }, + { + type: 'select', + name: 'grade', + label: 'CSS grade', + options: ['A', 'B', 'C', 'D', 'X'] + } + ] + } + } + }, + { + type: 'button', + icon: 'fa fa-times text-danger', + actionType: 'ajax', + tooltip: '删除', + confirmText: '您确认要删除?', + api: 'delete:/api/sample/$id' + } + ], + toggled: true + } + ] + } }; diff --git a/examples/components/CRUD/test.jsx b/examples/components/CRUD/test.jsx index e94a7e17..5a8dc24e 100644 --- a/examples/components/CRUD/test.jsx +++ b/examples/components/CRUD/test.jsx @@ -1,92 +1,92 @@ export default { - $schema: "https://houtai.baidu.com/v2/schemas/page.json#", - title: "Test 信息：${page}", - body: { - "type": "crud", - "api": "/api/sample", - "syncLocation": false, - "title": null, - "columns": [ - { - "name": "id", - "label": "ID", - "width": 20 - }, - { - "name": "engine", - "label": "Rendering engine", - "sortable": true - }, - { - "name": "grade", - "type": "map", - "label": "Rendering engine", - "map": { - "A": "A", - "B": "B", - "C": "C", - "X": "X", - "*": "Unkown" + $schema: 'https://houtai.baidu.com/v2/schemas/page.json#', + title: 'Test 信息：${page}', + body: { + type: 'crud', + api: '/api/sample', + syncLocation: false, + title: null, + columns: [ + { + name: 'id', + label: 'ID', + width: 20 + }, + { + name: 'engine', + label: 'Rendering engine', + sortable: true + }, + { + name: 'grade', + type: 'map', + label: 'Rendering engine', + map: { + A: "A", + B: "B", + C: "C", + X: "X", + '*': 'Unkown' + } + }, + { + type: 'operation', + label: '操作', + width: 200, + buttons: [ + { + type: 'button-group', + buttons: [ + { + type: 'button', + label: '查看', + actionType: 'dialog', + dialog: { + disabled: true, + body: { + type: 'form', + controls: [ + { + name: 'engine', + label: 'Rendering engine', + type: 'static' + } + ] + } } - }, - { - "type": "operation", - "label": "操作", - "width": 200, - "buttons": [ - { - "type": "button-group", - "buttons": [ - { - "type": "button", - "label": "查看", - "actionType": "dialog", - "dialog": { - "disabled": true, - "body": { - "type": "form", - "controls": [ - { - "name": "engine", - "label": "Rendering engine", - "type": "static" - } - ] - } - } - }, + }, - { - "type": "button", - "label": "编辑", - "actionType": "dialog", - "dialog": { - "body": { - "api": "/api/sample/$id", - "type": "form", - "controls": [ - { - "name": "engine", - "label": "Rendering engine", - "type": "text" - } - ] - } - } - }, + { + type: 'button', + label: '编辑', + actionType: 'dialog', + dialog: { + body: { + api: '/api/sample/$id', + type: 'form', + controls: [ + { + name: 'engine', + label: 'Rendering engine', + type: 'text' + } + ] + } + } + }, - { - "type": "button", - "label": "删除", - "level": "danger", - "actionType": "ajax", - "confirmText": "确定？", - "api": "delete:/api/sample/$id" - } - ] - } - ] - } + { + type: 'button', + label: '删除', + level: 'danger', + actionType: 'ajax', + confirmText: '确定？', + api: 'delete:/api/sample/$id' + } + ] + } ] - } + } + ] + } }; diff --git a/examples/components/Carousel.jsx b/examples/components/Carousel.jsx index 47b7f3f0..574ff075 100644 --- a/examples/components/Carousel.jsx +++ b/examples/components/Carousel.jsx @@ -1,83 +1,89 @@ export default { - type: 'page', - title: '轮播图', - data: { - carousel0: [ - 'https://hiphotos.baidu.com/fex/%70%69%63/item/bd3eb13533fa828b13b24500f31f4134960a5a44.jpg', - 'https://video-react.js.org/assets/poster.png', - 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg' - ], - carousel1: [ - { - html: '
carousel data in form
' - }, - { - image: 'https://hiphotos.baidu.com/fex/%70%69%63/item/bd3eb13533fa828b13b24500f31f4134960a5a44.jpg' - }, - { - image: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg' - } - ] - }, - body: [ + type: 'page', + title: '轮播图', + data: { + carousel0: [ + 'https://hiphotos.baidu.com/fex/%70%69%63/item/bd3eb13533fa828b13b24500f31f4134960a5a44.jpg', + 'https://video-react.js.org/assets/poster.png', + 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg' + ], + carousel1: [ + { + html: + '
carousel data in form
' + }, + { + image: + 'https://hiphotos.baidu.com/fex/%70%69%63/item/bd3eb13533fa828b13b24500f31f4134960a5a44.jpg' + }, + { + image: + 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg' + } + ] + }, + body: [ + { + type: 'grid', + columns: [ { - type: 'grid', - columns: [ - { - type: 'panel', - title: '直接页面配置', - body: { - type: 'carousel', - controlsTheme: 'light', - height: '300', - options: [ - { - image: 'https://video-react.js.org/assets/poster.png' - }, - { - html: '
carousel data
' - }, - { - image: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg' - } - ] - } - }, - { - type: 'panel', - title: '使用itemSchema配置', - body: { - type: 'carousel', - name: 'carousel0', - controlsTheme: 'dark', - height: '300', - itemSchema: { - type: 'tpl', - tpl: '
' - } - } - } + type: 'panel', + title: '直接页面配置', + body: { + type: 'carousel', + controlsTheme: 'light', + height: '300', + options: [ + { + image: 'https://video-react.js.org/assets/poster.png' + }, + { + html: + '
carousel data
' + }, + { + image: + 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg' + } ] + } }, { - type: 'grid', - columns: [ - { - type: 'form', - title: '表单内展示', - sm: 6, - controls: [ - { - type: 'carousel', - controlsTheme: 'dark', - name: 'carousel1', - label: 'carousel', - animation: 'slide', - height: '300' - } - ] - } - ] + type: 'panel', + title: '使用itemSchema配置', + body: { + type: 'carousel', + name: 'carousel0', + controlsTheme: 'dark', + height: '300', + itemSchema: { + type: 'tpl', + tpl: + '
' + } + } } - ] -} + ] + }, + { + type: 'grid', + columns: [ + { + type: 'form', + title: '表单内展示', + sm: 6, + controls: [ + { + type: 'carousel', + controlsTheme: 'dark', + name: 'carousel1', + label: 'carousel', + animation: 'slide', + height: '300' + } + ] + } + ] + } + ] +}; diff --git a/examples/components/Chart.jsx b/examples/components/Chart.jsx index 75c7b1db..a9756233 100644 --- a/examples/components/Chart.jsx +++ b/examples/components/Chart.jsx @@ -1,197 +1,160 @@ export default { - "$schema": "https://houtai.baidu.com/v2/schemas/page.json#", - "title": "图表示例", - "body": [ + $schema: 'https://houtai.baidu.com/v2/schemas/page.json#', + title: '图表示例', + body: [ + { + type: 'grid', + columns: [ { - "type": "grid", - "columns": [ - { - "type": "panel", - "title": "本地配置示例 支持交互", - "name": "chart-local", - "body": [ - { - "type": "chart", - "config": { - "title": { - "text": "极坐标双数值轴" - }, - "legend": { - "data": [ - "line" - ] - }, - "polar": { - "center": [ - "50%", - "54%" - ] - }, - "tooltip": { - "trigger": "axis", - "axisPointer": { - "type": "cross" - } - }, - "angleAxis": { - "type": "value", - "startAngle": 0 - }, - "radiusAxis": { - "min": 0 - }, - "series": [ - { - "coordinateSystem": "polar", - "name": "line", - "type": "line", - "showSymbol": false, - "data": [ - [ - 0, - 0 - ], - [ - 0.03487823687206265, - 1 - ], - [ - 0.06958655048003272, - 2 - ], - [ - 0.10395584540887964, - 3 - ], - [ - 0.13781867790849958, - 4 - ], - [ - 0.17101007166283433, - 5 - ], - [ - 0.2033683215379001, - 6 - ], - [ - 0.2347357813929454, - 7 - ], - [ - 0.26495963211660245, - 8 - ], - [ - 0.2938926261462365, - 9 - ], - [ - 0.3213938048432697, - 10 - ] - ] - } - ], - "animationDuration": 2000 - }, - clickAction: { - actionType: 'dialog', - dialog: { - title: '详情', - body: [ - { - type: 'tpl', - tpl: '当前选中值 ${value|json}' - }, - - { - "type": "chart", - "api": "/api/mock2/chart/chart1" - } - ] - } - } - } - ] + type: 'panel', + title: '本地配置示例 支持交互', + name: 'chart-local', + body: [ + { + type: 'chart', + config: { + title: { + text: '极坐标双数值轴' }, - { - "type": "panel", - "title": "远程图表示例(返回值带function)", - "name": "chart-remote", - "body": [ - { - "type": "chart", - "api": "/api/mock2/chart/chart1" - } - ] - } - ] - }, - { - "type": "panel", - "title": "Form+chart组合", - "body": [ - { - "type": "form", - "title": "过滤条件", - "target": "chart1,chart2", - "submitOnInit":true, - "className": "m-b", - "wrapWithPanel": false, - "mode": "inline", - "controls": [ - { - "type": "date", - "label": "开始日期", - "name": "starttime", - "value": "-8days", - "maxDate": "${endtime}" - }, - - { - "type": "date", - "label": "结束日期", - "name": "endtime", - "value": "-1days", - "minDate": "${starttime}" - }, + legend: { + data: ['line'] + }, + polar: { + center: ['50%', '54%'] + }, + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'cross' + } + }, + angleAxis: { + type: 'value', + startAngle: 0 + }, + radiusAxis: { + min: 0 + }, + series: [ { - "type": "text", - "label": "条件", - "name": "name", - "addOn": { - "type": "submit", - "label": "搜索", - "level": "primary" - } + coordinateSystem: 'polar', + name: 'line', + type: 'line', + showSymbol: false, + data: [ + [0, 0], + [0.03487823687206265, 1], + [0.06958655048003272, 2], + [0.10395584540887964, 3], + [0.13781867790849958, 4], + [0.17101007166283433, 5], + [0.2033683215379001, 6], + [0.2347357813929454, 7], + [0.26495963211660245, 8], + [0.2938926261462365, 9], + [0.3213938048432697, 10] + ] } ], - "actions": [] + animationDuration: 2000 }, - { - type: 'divider' - }, - { - "type": "grid", - "className": "m-t-lg", - "columns": [ - { - "type": "chart", - "name": "chart1", - "initFetch": false, - "api": "/api/mock2/chart/chart?name=$name&starttime=${starttime}&endtime=${endtime}" - }, - { - "type": "chart", - "name": "chart2", - "initFetch": false, - "api": "/api/mock2/chart/chart2?name=$name" - } - ] + clickAction: { + actionType: 'dialog', + dialog: { + title: '详情', + body: [ + { + type: 'tpl', + tpl: '当前选中值 ${value|json}' + }, + + { + type: 'chart', + api: '/api/mock2/chart/chart1' + } + ] + } } - ] - } - ] -} \ No newline at end of file + } + ] + }, + { + type: 'panel', + title: '远程图表示例(返回值带function)', + name: 'chart-remote', + body: [ + { + type: 'chart', + api: '/api/mock2/chart/chart1' + } + ] + } + ] + }, + { + type: 'panel', + title: 'Form+chart组合', + body: [ + { + type: 'form', + title: '过滤条件', + target: 'chart1,chart2', + submitOnInit: true, + className: 'm-b', + wrapWithPanel: false, + mode: 'inline', + controls: [ + { + type: 'date', + label: '开始日期', + name: 'starttime', + value: '-8days', + maxDate: '${endtime}' + }, + + { + type: 'date', + label: '结束日期', + name: 'endtime', + value: '-1days', + minDate: '${starttime}' + }, + { + type: 'text', + label: '条件', + name: 'name', + addOn: { + type: 'submit', + label: '搜索', + level: 'primary' + } + } + ], + actions: [] + }, + { + type: 'divider' + }, + { + type: 'grid', + className: 'm-t-lg', + columns: [ + { + type: 'chart', + name: 'chart1', + initFetch: false, + api: + '/api/mock2/chart/chart?name=$name&starttime=${starttime}&endtime=${endtime}' + }, + { + type: 'chart', + name: 'chart2', + initFetch: false, + api: '/api/mock2/chart/chart2?name=$name' + } + ] + } + ] + } + ] +}; diff --git a/examples/components/Dialog/Drawer.jsx b/examples/components/Dialog/Drawer.jsx index 632429cf..784131f1 100644 --- a/examples/components/Dialog/Drawer.jsx +++ b/examples/components/Dialog/Drawer.jsx @@ -1,413 +1,413 @@ export default { - type: 'page', - title: 'Drawer', - body: [ + type: 'page', + title: 'Drawer', + body: [ + { + type: 'button-toolbar', + className: 'block', + buttons: [ { - type: 'button-toolbar', - className: "block", - buttons: [ - { - type: 'button', - label: '左侧弹出-极小框', - actionType: 'drawer', - drawer: { - position: 'left', - size: 'xs', - title: '提示', - body: '这是个简单的弹框' - } - }, - - { - type: 'button', - label: '左侧弹出-小框', - actionType: 'drawer', - drawer: { - position: 'left', - size: 'sm', - title: '提示', - body: '这是个简单的弹框' - } - }, - - { - type: 'button', - label: '左侧弹出-中框', - actionType: 'drawer', - drawer: { - position: 'left', - size: 'md', - title: '提示', - body: '这是个简单的弹框' - } - }, - - { - type: 'button', - label: '左侧弹出-大框', - actionType: 'drawer', - drawer: { - position: 'left', - size: 'lg', - title: '提示', - body: '这是个简单的弹框' - } - }, - - { - type: 'button', - label: '左侧弹出-超大', - actionType: 'drawer', - level: 'danger', - drawer: { - position: 'left', - size: 'xl', - title: '提示', - body: '这是个简单的弹框' - } - }, - ] + type: 'button', + label: '左侧弹出-极小框', + actionType: 'drawer', + drawer: { + position: 'left', + size: 'xs', + title: '提示', + body: '这是个简单的弹框' + } }, { - type: 'button-toolbar', - className: 'block m-t', - buttons: [ - { - type: 'button', - label: '右侧弹出-极小框', - level: 'success', - actionType: 'drawer', - drawer: { - position: 'right', - size: 'xs', - title: '提示', - body: '这是个简单的弹框' - } - }, - - { - type: 'button', - label: '右侧弹出-小框', - level: 'success', - actionType: 'drawer', - drawer: { - position: 'right', - size: 'sm', - title: '提示', - body: '这是个简单的弹框' - } - }, - - { - type: 'button', - label: '右侧弹出-中框', - level: 'success', - actionType: 'drawer', - drawer: { - position: 'right', - size: 'md', - title: '提示', - body: '这是个简单的弹框' - } - }, - - { - type: 'button', - label: '右侧弹出-大框', - level: 'success', - actionType: 'drawer', - drawer: { - position: 'right', - size: 'lg', - title: '提示', - body: '这是个简单的弹框' - } - }, - - { - type: 'button', - label: '右侧弹出-超大', - level: 'danger', - actionType: 'drawer', - drawer: { - size: 'xl', - position: 'right', - title: '提示', - body: '这是个简单的弹框' - } - } - ] + type: 'button', + label: '左侧弹出-小框', + actionType: 'drawer', + drawer: { + position: 'left', + size: 'sm', + title: '提示', + body: '这是个简单的弹框' + } }, { - type: 'button-toolbar', - className: 'block m-t', - buttons: [ - { - type: 'button', - label: '顶部弹出-极小框', - actionType: 'drawer', - level: 'info', - drawer: { - position: 'top', - size: 'xs', - title: '提示', - body: '这是个简单的弹框' - } - }, - - { - type: 'button', - label: '顶部弹出-小框', - level: 'info', - actionType: 'drawer', - drawer: { - position: 'top', - size: 'sm', - title: '提示', - body: '这是个简单的弹框' - } - }, - - { - type: 'button', - label: '顶部弹出-中框', - actionType: 'drawer', - level: 'info', - drawer: { - position: 'top', - size: 'md', - title: '提示', - body: '这是个简单的弹框' - } - }, - - { - type: 'button', - label: '顶部弹出-大框', - actionType: 'drawer', - level: 'info', - drawer: { - position: 'top', - size: 'lg', - title: '提示', - body: '这是个简单的弹框' - } - }, - - { - type: 'button', - label: '顶部弹出 - 超大', - level: 'danger', - actionType: 'drawer', - drawer: { - position: 'top', - size: 'xl', - title: '提示', - body: '这是个简单的弹框' - } - } - ] + type: 'button', + label: '左侧弹出-中框', + actionType: 'drawer', + drawer: { + position: 'left', + size: 'md', + title: '提示', + body: '这是个简单的弹框' + } }, { - type: 'button-toolbar', - className: 'block m-t', - buttons: [ - { - type: 'button', - label: '底部弹出-极小框', - actionType: 'drawer', - level: 'primary', - drawer: { - position: 'bottom', - size: 'xs', - title: '提示', - body: '这是个简单的弹框' - } - }, - - { - type: 'button', - label: '底部弹出-小框', - level: 'primary', - actionType: 'drawer', - drawer: { - position: 'bottom', - size: 'sm', - title: '提示', - body: '这是个简单的弹框' - } - }, - - { - type: 'button', - label: '底部弹出-中框', - actionType: 'drawer', - level: 'primary', - drawer: { - position: 'bottom', - size: 'md', - title: '提示', - body: '这是个简单的弹框' - } - }, - - { - type: 'button', - label: '底部弹出-大框', - actionType: 'drawer', - level: 'primary', - drawer: { - position: 'bottom', - size: 'lg', - title: '提示', - body: '这是个简单的弹框' - } - }, - - { - type: 'button', - label: '底部弹出-超大', - level: 'danger', - actionType: 'drawer', - drawer: { - position: 'bottom', - size: 'xl', - title: '提示', - body: '这是个简单的弹框' - } - } - ] + type: 'button', + label: '左侧弹出-大框', + actionType: 'drawer', + drawer: { + position: 'left', + size: 'lg', + title: '提示', + body: '这是个简单的弹框' + } }, { - type: 'button-toolbar', - className: 'block m-t', - buttons: [ - { - type: 'button', - label: '多级弹框', - actionType: 'drawer', - level: 'danger', - drawer: { - title: '提示', - body: '这是个简单的弹框', - closeOnEsc: true, - actions: [ - { - type: 'button', - actionType: 'confirm', - label: '确认', - primary: true - }, - - { - type: 'button', - actionType: 'drawer', - label: '再弹一个', - drawer: { - position: 'left', - title: '弹框中的弹框', - closeOnEsc: true, - body: '如果你想，可以无限弹下去', - actions: [ - { - type: 'button', - actionType: 'drawer', - label: '来吧', - level: 'info', - drawer: { - position: 'right', - title: '弹框中的弹框', - closeOnEsc: true, - body: '如果你想，可以无限弹下去', - actions: [ - { - type: 'button', - actionType: 'confirm', - label: '可以了', - primary: true - } - ] - } - } - ] - } - } - ] - } - }, - - { - type: 'button', - label: '交叉测试', - actionType: 'drawer', - className: 'm-l-xs', - level: 'danger', - drawer: { - title: '提示', - closeOnEsc: true, - body: '这是个简单的弹框', - actions: [ - { - type: 'button', - actionType: 'confirm', - label: '确认', - primary: true - }, - - { - type: 'button', - actionType: 'dialog', - closeOnEsc: true, - label: '再弹一个', - dialog: { - position: 'left', - title: '弹框中的弹框', - closeOnEsc: true, - body: '如果你想，可以无限弹下去', - actions: [ - { - type: 'button', - actionType: 'drawer', - label: '来吧', - level: 'info', - drawer: { - position: 'right', - title: '弹框中的弹框', - body: '如果你想，可以无限弹下去', - closeOnEsc: true, - actions: [ - { - type: 'button', - actionType: 'confirm', - label: '可以了', - primary: true - } - ] - } - } - ] - } - } - ] - } - }, - { - type: 'button', - label: '可拉拽调整大小', - actionType: 'drawer', - level: 'danger', - drawer: { - title: '提示', - closeOnEsc: true, - resizable: true, - body: '这是个简单的弹框', - } - }, - ] + type: 'button', + label: '左侧弹出-超大', + actionType: 'drawer', + level: 'danger', + drawer: { + position: 'left', + size: 'xl', + title: '提示', + body: '这是个简单的弹框' + } } - ], -} + ] + }, + + { + type: 'button-toolbar', + className: 'block m-t', + buttons: [ + { + type: 'button', + label: '右侧弹出-极小框', + level: 'success', + actionType: 'drawer', + drawer: { + position: 'right', + size: 'xs', + title: '提示', + body: '这是个简单的弹框' + } + }, + + { + type: 'button', + label: '右侧弹出-小框', + level: 'success', + actionType: 'drawer', + drawer: { + position: 'right', + size: 'sm', + title: '提示', + body: '这是个简单的弹框' + } + }, + + { + type: 'button', + label: '右侧弹出-中框', + level: 'success', + actionType: 'drawer', + drawer: { + position: 'right', + size: 'md', + title: '提示', + body: '这是个简单的弹框' + } + }, + + { + type: 'button', + label: '右侧弹出-大框', + level: 'success', + actionType: 'drawer', + drawer: { + position: 'right', + size: 'lg', + title: '提示', + body: '这是个简单的弹框' + } + }, + + { + type: 'button', + label: '右侧弹出-超大', + level: 'danger', + actionType: 'drawer', + drawer: { + size: 'xl', + position: 'right', + title: '提示', + body: '这是个简单的弹框' + } + } + ] + }, + + { + type: 'button-toolbar', + className: 'block m-t', + buttons: [ + { + type: 'button', + label: '顶部弹出-极小框', + actionType: 'drawer', + level: 'info', + drawer: { + position: 'top', + size: 'xs', + title: '提示', + body: '这是个简单的弹框' + } + }, + + { + type: 'button', + label: '顶部弹出-小框', + level: 'info', + actionType: 'drawer', + drawer: { + position: 'top', + size: 'sm', + title: '提示', + body: '这是个简单的弹框' + } + }, + + { + type: 'button', + label: '顶部弹出-中框', + actionType: 'drawer', + level: 'info', + drawer: { + position: 'top', + size: 'md', + title: '提示', + body: '这是个简单的弹框' + } + }, + + { + type: 'button', + label: '顶部弹出-大框', + actionType: 'drawer', + level: 'info', + drawer: { + position: 'top', + size: 'lg', + title: '提示', + body: '这是个简单的弹框' + } + }, + + { + type: 'button', + label: '顶部弹出 - 超大', + level: 'danger', + actionType: 'drawer', + drawer: { + position: 'top', + size: 'xl', + title: '提示', + body: '这是个简单的弹框' + } + } + ] + }, + + { + type: 'button-toolbar', + className: 'block m-t', + buttons: [ + { + type: 'button', + label: '底部弹出-极小框', + actionType: 'drawer', + level: 'primary', + drawer: { + position: 'bottom', + size: 'xs', + title: '提示', + body: '这是个简单的弹框' + } + }, + + { + type: 'button', + label: '底部弹出-小框', + level: 'primary', + actionType: 'drawer', + drawer: { + position: 'bottom', + size: 'sm', + title: '提示', + body: '这是个简单的弹框' + } + }, + + { + type: 'button', + label: '底部弹出-中框', + actionType: 'drawer', + level: 'primary', + drawer: { + position: 'bottom', + size: 'md', + title: '提示', + body: '这是个简单的弹框' + } + }, + + { + type: 'button', + label: '底部弹出-大框', + actionType: 'drawer', + level: 'primary', + drawer: { + position: 'bottom', + size: 'lg', + title: '提示', + body: '这是个简单的弹框' + } + }, + + { + type: 'button', + label: '底部弹出-超大', + level: 'danger', + actionType: 'drawer', + drawer: { + position: 'bottom', + size: 'xl', + title: '提示', + body: '这是个简单的弹框' + } + } + ] + }, + + { + type: 'button-toolbar', + className: 'block m-t', + buttons: [ + { + type: 'button', + label: '多级弹框', + actionType: 'drawer', + level: 'danger', + drawer: { + title: '提示', + body: '这是个简单的弹框', + closeOnEsc: true, + actions: [ + { + type: 'button', + actionType: 'confirm', + label: '确认', + primary: true + }, + + { + type: 'button', + actionType: 'drawer', + label: '再弹一个', + drawer: { + position: 'left', + title: '弹框中的弹框', + closeOnEsc: true, + body: '如果你想，可以无限弹下去', + actions: [ + { + type: 'button', + actionType: 'drawer', + label: '来吧', + level: 'info', + drawer: { + position: 'right', + title: '弹框中的弹框', + closeOnEsc: true, + body: '如果你想，可以无限弹下去', + actions: [ + { + type: 'button', + actionType: 'confirm', + label: '可以了', + primary: true + } + ] + } + } + ] + } + } + ] + } + }, + + { + type: 'button', + label: '交叉测试', + actionType: 'drawer', + className: 'm-l-xs', + level: 'danger', + drawer: { + title: '提示', + closeOnEsc: true, + body: '这是个简单的弹框', + actions: [ + { + type: 'button', + actionType: 'confirm', + label: '确认', + primary: true + }, + + { + type: 'button', + actionType: 'dialog', + closeOnEsc: true, + label: '再弹一个', + dialog: { + position: 'left', + title: '弹框中的弹框', + closeOnEsc: true, + body: '如果你想，可以无限弹下去', + actions: [ + { + type: 'button', + actionType: 'drawer', + label: '来吧', + level: 'info', + drawer: { + position: 'right', + title: '弹框中的弹框', + body: '如果你想，可以无限弹下去', + closeOnEsc: true, + actions: [ + { + type: 'button', + actionType: 'confirm', + label: '可以了', + primary: true + } + ] + } + } + ] + } + } + ] + } + }, + { + type: 'button', + label: '可拉拽调整大小', + actionType: 'drawer', + level: 'danger', + drawer: { + title: '提示', + closeOnEsc: true, + resizable: true, + body: '这是个简单的弹框' + } + } + ] + } + ] +}; diff --git a/examples/components/Dialog/Simple.jsx b/examples/components/Dialog/Simple.jsx index 5d714656..a85d1149 100644 --- a/examples/components/Dialog/Simple.jsx +++ b/examples/components/Dialog/Simple.jsx @@ -1,266 +1,266 @@ export default { - type: 'page', - title: 'Dialog', - body: [ + type: 'page', + title: 'Dialog', + body: [ + { + type: 'button-toolbar', + className: 'm-b', + buttons: [ { - type: 'button-toolbar', - className: 'm-b', - buttons: [ - { - type: 'button', - label: '打开弹框', - actionType: 'dialog', - dialog: { - title: '提示', - closeOnEsc: true, - body: '这是个简单的弹框' - } - }, - - { - type: 'button', - label: '多级弹框', - actionType: 'dialog', - dialog: { - title: '提示', - closeOnEsc: true, - body: '这是个简单的弹框', - actions: [ - { - type: 'button', - actionType: 'confirm', - label: '确认', - primary: true - }, - - { - type: 'button', - actionType: 'dialog', - label: '再弹一个', - dialog: { - title: '弹框中的弹框', - closeOnEsc: true, - body: '如果你想，可以无限弹下去', - actions: [ - { - type: 'button', - actionType: 'dialog', - label: '来吧', - level: 'info', - dialog: { - title: '弹框中的弹框', - closeOnEsc: true, - body: '如果你想，可以无限弹下去', - actions: [ - { - type: 'button', - actionType: 'confirm', - label: '不弹了', - primary: true - } - ] - } - } - ] - } - } - ] - } - }, - - { - type: 'button', - label: '弹个表单', - actionType: 'dialog', - dialog: { - title: '在弹框中的表单', - closeOnEsc: true, - actions: [ - { - label: '取消', - actionType: 'close', - type: 'button' - }, - - { - label: '确认', - actionType: 'confirm', - type: 'button', - level: 'primary' - }, - - { - label: '提交不关闭', - actionType: 'submit', - close: false, - type: 'button', - api: '/api/mock2/form/saveForm?waitSeconds=2', - level: 'primary' - }, - - { - label: '保存不关闭', - actionType: 'ajax', - type: 'button', - api: '/api/mock2/form/saveForm?waitSeconds=4', - level: 'info' - }, - - { - type: 'button', - label: 'Feedback', - close: true, - actionType: 'ajax', - api: '/api/mock2/form/initData?waitSeconds=2', - tooltip: '点击我后会发送一个请求，请求回来后，弹出一个框。', - feedback: { - title: '操作成功', - body: 'xxx 已操作成功' - } - } - ], - body: { - type: "form", - api: "/api/mock2/form/saveForm?waitSeconds=2", - title: "常规模式", - mode: "normal", - controls: [ - { - type: "email", - name: "email", - required: true, - placeholder: "请输入邮箱", - label: "邮箱" - }, - { - type: "password", - name: "password", - label: "密码", - required: true, - placeholder: "请输入密码" - }, - { - type: "checkbox", - name: "rememberMe", - label: "记住登录" - } - ] - } - } - }, - - { - type: 'button', - label: '再弹个表单', - actionType: 'dialog', - dialog: { - title: '在弹框中的表单', - actions: [ - { - label: '取消', - actionType: 'close', - type: 'button' - }, - - { - label: '确认', - actionType: 'confirm', - type: 'button', - level: 'primary', - disabledOn: '!data.rememberMe' - } - ], - body: { - type: "form", - api: "/api/mock2/form/saveForm?waitSeconds=2", - title: "常规模式", - mode: "normal", - controls: [ - { - type: "checkbox", - name: "rememberMe", - label: "勾上我才可以确认" - } - ] - } - } - }, - - { - type: 'button', - label: 'Feedback', - actionType: 'ajax', - api: '/api/mock2/form/initData?waitSeconds=2', - tooltip: '点击我后会发送一个请求，请求回来后，弹出一个框。', - feedback: { - title: '操作成功', - closeOnEsc: true, - body: 'xxx 已操作成功' - } - }, - - { - type: 'button', - label: 'Feedback2', - actionType: 'ajax', - api: '/api/mock2/form/initData?waitSeconds=2', - tooltip: '可以根据条件弹出，比如这个栗子，看当前时间戳是否可以整除3', - feedback: { - visibleOn: '!(this.date % 3)', - title: '操作成功', - body: '当前时间戳: ${date}' - } - }, - ] + type: 'button', + label: '打开弹框', + actionType: 'dialog', + dialog: { + title: '提示', + closeOnEsc: true, + body: '这是个简单的弹框' + } }, { - type: "button-toolbar", - className: 'm-l-none', - buttons: [ - { - type: 'button', - label: 'sm 弹框', - actionType: 'dialog', - dialog: { - size: "sm", - title: '提示', - body: '这是个简单的弹框' - } - }, + type: 'button', + label: '多级弹框', + actionType: 'dialog', + dialog: { + title: '提示', + closeOnEsc: true, + body: '这是个简单的弹框', + actions: [ + { + type: 'button', + actionType: 'confirm', + label: '确认', + primary: true + }, - { - type: 'button', - label: '标准 弹框', - actionType: 'dialog', - dialog: { - title: '提示', - body: '这是个简单的弹框' - } - }, - - { - type: 'button', - label: 'lg 弹框', - actionType: 'dialog', - dialog: { - size: "lg", - title: '提示', - body: '这是个简单的弹框' - } - }, - - { - type: 'button', - label: 'xl 弹框', - actionType: 'dialog', - dialog: { - size: "xl", - title: '提示', - body: '这是个简单的弹框' + { + type: 'button', + actionType: 'dialog', + label: '再弹一个', + dialog: { + title: '弹框中的弹框', + closeOnEsc: true, + body: '如果你想，可以无限弹下去', + actions: [ + { + type: 'button', + actionType: 'dialog', + label: '来吧', + level: 'info', + dialog: { + title: '弹框中的弹框', + closeOnEsc: true, + body: '如果你想，可以无限弹下去', + actions: [ + { + type: 'button', + actionType: 'confirm', + label: '不弹了', + primary: true + } + ] + } } + ] } + } ] + } + }, + + { + type: 'button', + label: '弹个表单', + actionType: 'dialog', + dialog: { + title: '在弹框中的表单', + closeOnEsc: true, + actions: [ + { + label: '取消', + actionType: 'close', + type: 'button' + }, + + { + label: '确认', + actionType: 'confirm', + type: 'button', + level: 'primary' + }, + + { + label: '提交不关闭', + actionType: 'submit', + close: false, + type: 'button', + api: '/api/mock2/form/saveForm?waitSeconds=2', + level: 'primary' + }, + + { + label: '保存不关闭', + actionType: 'ajax', + type: 'button', + api: '/api/mock2/form/saveForm?waitSeconds=4', + level: 'info' + }, + + { + type: 'button', + label: 'Feedback', + close: true, + actionType: 'ajax', + api: '/api/mock2/form/initData?waitSeconds=2', + tooltip: '点击我后会发送一个请求，请求回来后，弹出一个框。', + feedback: { + title: '操作成功', + body: 'xxx 已操作成功' + } + } + ], + body: { + type: 'form', + api: '/api/mock2/form/saveForm?waitSeconds=2', + title: '常规模式', + mode: 'normal', + controls: [ + { + type: 'email', + name: 'email', + required: true, + placeholder: '请输入邮箱', + label: '邮箱' + }, + { + type: 'password', + name: 'password', + label: '密码', + required: true, + placeholder: '请输入密码' + }, + { + type: 'checkbox', + name: 'rememberMe', + label: '记住登录' + } + ] + } + } + }, + + { + type: 'button', + label: '再弹个表单', + actionType: 'dialog', + dialog: { + title: '在弹框中的表单', + actions: [ + { + label: '取消', + actionType: 'close', + type: 'button' + }, + + { + label: '确认', + actionType: 'confirm', + type: 'button', + level: 'primary', + disabledOn: '!data.rememberMe' + } + ], + body: { + type: 'form', + api: '/api/mock2/form/saveForm?waitSeconds=2', + title: '常规模式', + mode: 'normal', + controls: [ + { + type: 'checkbox', + name: 'rememberMe', + label: '勾上我才可以确认' + } + ] + } + } + }, + + { + type: 'button', + label: 'Feedback', + actionType: 'ajax', + api: '/api/mock2/form/initData?waitSeconds=2', + tooltip: '点击我后会发送一个请求，请求回来后，弹出一个框。', + feedback: { + title: '操作成功', + closeOnEsc: true, + body: 'xxx 已操作成功' + } + }, + + { + type: 'button', + label: 'Feedback2', + actionType: 'ajax', + api: '/api/mock2/form/initData?waitSeconds=2', + tooltip: '可以根据条件弹出，比如这个栗子，看当前时间戳是否可以整除3', + feedback: { + visibleOn: '!(this.date % 3)', + title: '操作成功', + body: '当前时间戳: ${date}' + } } - ], -} + ] + }, + + { + type: 'button-toolbar', + className: 'm-l-none', + buttons: [ + { + type: 'button', + label: 'sm 弹框', + actionType: 'dialog', + dialog: { + size: 'sm', + title: '提示', + body: '这是个简单的弹框' + } + }, + + { + type: 'button', + label: '标准 弹框', + actionType: 'dialog', + dialog: { + title: '提示', + body: '这是个简单的弹框' + } + }, + + { + type: 'button', + label: 'lg 弹框', + actionType: 'dialog', + dialog: { + size: 'lg', + title: '提示', + body: '这是个简单的弹框' + } + }, + + { + type: 'button', + label: 'xl 弹框', + actionType: 'dialog', + dialog: { + size: 'xl', + title: '提示', + body: '这是个简单的弹框' + } + } + ] + } + ] +}; diff --git a/examples/components/Doc.jsx b/examples/components/Doc.jsx index 345927bc..c8338e4e 100644 --- a/examples/components/Doc.jsx +++ b/examples/components/Doc.jsx @@ -2,743 +2,847 @@ import React from 'react'; import makeMarkdownRenderer from './MdRenderer'; export default { - prefix: ({classnames: cx}) => (
  • ), - label: '文档', - children: [ + prefix: ({classnames: cx}) =>
  • , + label: '文档', + children: [ + { + 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: '渲染器手册', + icon: 'fa fa-diamond', + path: '/docs/renderers', + getComponent: (location, cb) => + require(['../../docs/renderers.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }), + children: [ { - label: '快速开始', - icon: 'fa fa-flash', - path: '/docs/getting-started', - getComponent: (location, cb) => require(['../../docs/getting_started.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); + label: 'Page', + path: '/docs/renderers/Page', + getComponent: (location, cb) => + require(['../../docs/renderers/Page.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: 'Definitions', + path: '/docs/renderers/Definitions', + getComponent: (location, cb) => + require(['../../docs/renderers/Definitions.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: '渲染器手册', - icon: 'fa fa-diamond', - path: '/docs/renderers', - getComponent: (location, cb) => require(['../../docs/renderers.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); + label: 'Form', + path: '/docs/renderers/Form/Form', + getComponent: (location, cb) => + require(['../../docs/renderers/Form/Form.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); }), - children: [ - { - label: 'Page', - path: '/docs/renderers/Page', - getComponent: (location, cb) => require(['../../docs/renderers/Page.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, + children: [ + { + label: 'FormItem', + path: '/docs/renderers/Form/FormItem', + getComponent: (location, cb) => + require(['../../docs/renderers/Form/FormItem.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, - { - label: 'Definitions', - path: '/docs/renderers/Definitions', - getComponent: (location, cb) => require(['../../docs/renderers/Definitions.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, + { + label: 'List', + path: '/docs/renderers/Form/List', + getComponent: (location, cb) => + require(['../../docs/renderers/Form/List.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, - { - label: 'Form', - path: '/docs/renderers/Form/Form', - getComponent: (location, cb) => require(['../../docs/renderers/Form/Form.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - children: [ - { - label: 'FormItem', - path: '/docs/renderers/Form/FormItem', - getComponent: (location, cb) => require(['../../docs/renderers/Form/FormItem.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, + { + label: 'Button-Group', + path: '/docs/renderers/Form/Button-Group', + getComponent: (location, cb) => + require(['../../docs/renderers/Form/Button-Group.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, - { - label: 'List', - path: '/docs/renderers/Form/List', - getComponent: (location, cb) => require(['../../docs/renderers/Form/List.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, + { + label: 'Service', + path: '/docs/renderers/Form/Service', + getComponent: (location, cb) => + require(['../../docs/renderers/Form/Service.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, - { - label: 'Button-Group', - path: '/docs/renderers/Form/Button-Group', - getComponent: (location, cb) => require(['../../docs/renderers/Form/Button-Group.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, + { + label: 'Tabs', + path: '/docs/renderers/Form/Tabs', + getComponent: (location, cb) => + require(['../../docs/renderers/Form/Tabs.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, - { - label: 'Service', - path: '/docs/renderers/Form/Service', - getComponent: (location, cb) => require(['../../docs/renderers/Form/Service.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, + { + label: 'Table', + path: '/docs/renderers/Form/Table', + getComponent: (location, cb) => + require(['../../docs/renderers/Form/Table.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, - { - label: 'Tabs', - path: '/docs/renderers/Form/Tabs', - getComponent: (location, cb) => require(['../../docs/renderers/Form/Tabs.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, + { + label: 'HBox', + path: '/docs/renderers/Form/HBox', + getComponent: (location, cb) => + require(['../../docs/renderers/Form/HBox.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, - { - label: 'Table', - path: '/docs/renderers/Form/Table', - getComponent: (location, cb) => require(['../../docs/renderers/Form/Table.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - - { - label: 'HBox', - path: '/docs/renderers/Form/HBox', - getComponent: (location, cb) => require(['../../docs/renderers/Form/HBox.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - - { - label: 'Grid', - path: '/docs/renderers/Form/Grid', - getComponent: (location, cb) => require(['../../docs/renderers/Form/Grid.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'Panel', - path: '/docs/renderers/Form/Panel', - getComponent: (location, cb) => require(['../../docs/renderers/Form/Panel.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'Hidden', - path: '/docs/renderers/Form/Hidden', - getComponent: (location, cb) => require(['../../docs/renderers/Form/Hidden.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'Text', - path: '/docs/renderers/Form/Text', - getComponent: (location, cb) => require(['../../docs/renderers/Form/Text.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'Input-Group', - path: '/docs/renderers/Form/Input-Group', - getComponent: (location, cb) => require(['../../docs/renderers/Form/Input-Group.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'Textarea', - path: '/docs/renderers/Form/Textarea', - getComponent: (location, cb) => require(['../../docs/renderers/Form/Textarea.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'Url', - path: '/docs/renderers/Form/Url', - getComponent: (location, cb) => require(['../../docs/renderers/Form/Url.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'Email', - path: '/docs/renderers/Form/Email', - getComponent: (location, cb) => require(['../../docs/renderers/Form/Email.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'Password', - path: '/docs/renderers/Form/Password', - getComponent: (location, cb) => require(['../../docs/renderers/Form/Password.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'Number', - path: '/docs/renderers/Form/Number', - getComponent: (location, cb) => require(['../../docs/renderers/Form/Number.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'Tag', - path: '/docs/renderers/Form/Tag', - getComponent: (location, cb) => require(['../../docs/renderers/Form/Tag.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'Select', - path: '/docs/renderers/Form/Select', - getComponent: (location, cb) => require(['../../docs/renderers/Form/Select.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'Chained-Select', - path: '/docs/renderers/Form/Chained-Select', - getComponent: (location, cb) => require(['../../docs/renderers/Form/Chained-Select.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'Checkbox', - path: '/docs/renderers/Form/Checkbox', - getComponent: (location, cb) => require(['../../docs/renderers/Form/Checkbox.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'Checkboxes', - path: '/docs/renderers/Form/Checkboxes', - getComponent: (location, cb) => require(['../../docs/renderers/Form/Checkboxes.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'City', - path: '/docs/renderers/Form/City', - getComponent: (location, cb) => require(['../../docs/renderers/Form/City.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'Radios', - path: '/docs/renderers/Form/Radios', - getComponent: (location, cb) => require(['../../docs/renderers/Form/Radios.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'Switch', - path: '/docs/renderers/Form/Switch', - getComponent: (location, cb) => require(['../../docs/renderers/Form/Switch.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'Rating', - path: '/docs/renderers/Form/Rating', - getComponent: (location, cb) => require(['../../docs/renderers/Form/Rating.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'Date', - path: '/docs/renderers/Form/Date', - getComponent: (location, cb) => require(['../../docs/renderers/Form/Date.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'Datetime', - path: '/docs/renderers/Form/Datetime', - getComponent: (location, cb) => require(['../../docs/renderers/Form/Datetime.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'Time', - path: '/docs/renderers/Form/Time', - getComponent: (location, cb) => require(['../../docs/renderers/Form/Time.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'Date-Range', - path: '/docs/renderers/Form/Date-Range', - getComponent: (location, cb) => require(['../../docs/renderers/Form/Date-Range.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'Color', - path: '/docs/renderers/Form/Color', - getComponent: (location, cb) => require(['../../docs/renderers/Form/Color.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'Range', - path: '/docs/renderers/Form/Range', - getComponent: (location, cb) => require(['../../docs/renderers/Form/Range.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'Image', - path: '/docs/renderers/Form/Image', - getComponent: (location, cb) => require(['../../docs/renderers/Form/Image.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'File', - path: '/docs/renderers/Form/File', - getComponent: (location, cb) => require(['../../docs/renderers/Form/File.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'Matrix', - path: '/docs/renderers/Form/Matrix', - getComponent: (location, cb) => require(['../../docs/renderers/Form/Matrix.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'Tree', - path: '/docs/renderers/Form/Tree', - getComponent: (location, cb) => require(['../../docs/renderers/Form/Tree.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'TreeSelect', - path: '/docs/renderers/Form/TreeSelect', - getComponent: (location, cb) => require(['../../docs/renderers/Form/TreeSelect.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'NestedSelect', - path: '/docs/renderers/Form/NestedSelect', - getComponent: (location, cb) => require(['../../docs/renderers/Form/NestedSelect.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'Button', - path: '/docs/renderers/Form/Button', - getComponent: (location, cb) => require(['../../docs/renderers/Form/Button.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'Button-Toolbar', - path: '/docs/renderers/Form/Button-Toolbar', - getComponent: (location, cb) => require(['../../docs/renderers/Form/Button-Toolbar.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'Combo', - path: '/docs/renderers/Form/Combo', - getComponent: (location, cb) => require(['../../docs/renderers/Form/Combo.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'Array', - path: '/docs/renderers/Form/Array', - getComponent: (location, cb) => require(['../../docs/renderers/Form/Array.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'SubForm', - path: '/docs/renderers/Form/SubForm', - getComponent: (location, cb) => require(['../../docs/renderers/Form/SubForm.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'Picker', - path: '/docs/renderers/Form/Picker', - getComponent: (location, cb) => require(['../../docs/renderers/Form/Picker.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'Formula', - path: '/docs/renderers/Form/Formula', - getComponent: (location, cb) => require(['../../docs/renderers/Form/Formula.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'Group', - path: '/docs/renderers/Form/Group', - getComponent: (location, cb) => require(['../../docs/renderers/Form/Group.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'FieldSet', - path: '/docs/renderers/Form/FieldSet', - getComponent: (location, cb) => require(['../../docs/renderers/Form/FieldSet.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'Repeat', - path: '/docs/renderers/Form/Repeat', - getComponent: (location, cb) => require(['../../docs/renderers/Form/Repeat.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'Rich-Text', - path: '/docs/renderers/Form/Rich-Text', - getComponent: (location, cb) => require(['../../docs/renderers/Form/Rich-Text.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'Editor', - path: '/docs/renderers/Form/Editor', - getComponent: (location, cb) => require(['../../docs/renderers/Form/Editor.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'Static', - path: '/docs/renderers/Static', - getComponent: (location, cb) => require(['../../docs/renderers/Static.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - ] - }, - { - label: 'Divider', - path: '/docs/renderers/Divider', - getComponent: (location, cb) => require(['../../docs/renderers/Divider.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'Wizard', - path: '/docs/renderers/Wizard', - getComponent: (location, cb) => require(['../../docs/renderers/Wizard.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'Each', - path: '/docs/renderers/Each', - getComponent: (location, cb) => require(['../../docs/renderers/Each.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'Tpl', - path: '/docs/renderers/Tpl', - getComponent: (location, cb) => require(['../../docs/renderers/Tpl.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'Plain', - path: '/docs/renderers/Plain', - getComponent: (location, cb) => require(['../../docs/renderers/Plain.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'Html', - path: '/docs/renderers/Html', - getComponent: (location, cb) => require(['../../docs/renderers/Html.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'Alert', - path: '/docs/renderers/Alert', - getComponent: (location, cb) => require(['../../docs/renderers/Alert.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'Action', - path: '/docs/renderers/Action', - getComponent: (location, cb) => require(['../../docs/renderers/Action.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'Dialog', - path: '/docs/renderers/Dialog', - getComponent: (location, cb) => require(['../../docs/renderers/Dialog.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'Drawer', - path: '/docs/renderers/Drawer', - getComponent: (location, cb) => require(['../../docs/renderers/Drawer.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'CRUD', - path: '/docs/renderers/CRUD', - getComponent: (location, cb) => require(['../../docs/renderers/CRUD.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - children: [ - { - label: 'CRUD-Table', - path: '/docs/renderers/CRUD-Table', - getComponent: (location, cb) => require(['../../docs/renderers/CRUD-Table.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - - { - label: 'CRUD-Cards', - path: '/docs/renderers/CRUD-Cards', - getComponent: (location, cb) => require(['../../docs/renderers/CRUD-Cards.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - - { - label: 'CRUD-List', - path: '/docs/renderers/CRUD-List', - getComponent: (location, cb) => require(['../../docs/renderers/CRUD-List.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - } - ] - }, - { - label: 'Panel', - path: '/docs/renderers/Panel', - getComponent: (location, cb) => require(['../../docs/renderers/Panel.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'Wrapper', - path: '/docs/renderers/Wrapper', - getComponent: (location, cb) => require(['../../docs/renderers/Wrapper.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'Service', - path: '/docs/renderers/Service', - getComponent: (location, cb) => require(['../../docs/renderers/Service.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'Chart', - path: '/docs/renderers/Chart', - getComponent: (location, cb) => require(['../../docs/renderers/Chart.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'Collapse', - path: '/docs/renderers/Collapse', - getComponent: (location, cb) => require(['../../docs/renderers/Collapse.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'Carousel', - path: '/docs/renderers/Carousel', - getComponent: (location, cb) => require(['../../docs/renderers/Carousel.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'Audio', - path: '/docs/renderers/Audio', - getComponent: (location, cb) => require(['../../docs/renderers/Audio.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'Video', - path: '/docs/renderers/Video', - getComponent: (location, cb) => require(['../../docs/renderers/Video.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'Table', - path: '/docs/renderers/Table', - getComponent: (location, cb) => require(['../../docs/renderers/Table.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - children: [ - { - label: 'Column', - path: '/docs/renderers/Column', - getComponent: (location, cb) => require(['../../docs/renderers/Column.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'Operation', - path: '/docs/renderers/Operation', - getComponent: (location, cb) => require(['../../docs/renderers/Operation.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }) - }, - ] - }, - { - label: 'List', - path: '/docs/renderers/List', - getComponent: (location, cb) => require(['../../docs/renderers/List.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'Card', - path: '/docs/renderers/Card', - getComponent: (location, cb) => require(['../../docs/renderers/Card.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'Cards', - path: '/docs/renderers/Cards', - getComponent: (location, cb) => require(['../../docs/renderers/Cards.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'Field', - path: '/docs/renderers/Field', - getComponent: (location, cb) => require(['../../docs/renderers/Field.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'Tabs', - path: '/docs/renderers/Tabs', - getComponent: (location, cb) => require(['../../docs/renderers/Tabs.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'Grid', - path: '/docs/renderers/Grid', - getComponent: (location, cb) => require(['../../docs/renderers/Grid.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - - { - label: 'HBox', - path: '/docs/renderers/HBox', - getComponent: (location, cb) => require(['../../docs/renderers/HBox.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'ButtonGroup', - path: '/docs/renderers/ButtonGroup', - getComponent: (location, cb) => require(['../../docs/renderers/ButtonGroup.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'iFrame', - path: '/docs/renderers/iFrame', - getComponent: (location, cb) => require(['../../docs/renderers/iFrame.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'Nav', - path: '/docs/renderers/Nav', - getComponent: (location, cb) => require(['../../docs/renderers/Nav.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'Tasks', - path: '/docs/renderers/Tasks', - getComponent: (location, cb) => require(['../../docs/renderers/Tasks.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: 'QRCode', - path: '/docs/renderers/QRCode', - getComponent: (location, cb) => require(['../../docs/renderers/QRCode.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - { - label: '类型说明', - path: '/docs/renderers/Types', - getComponent: (location, cb) => require(['../../docs/renderers/Types.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); - }), - }, - ] + { + label: 'Grid', + path: '/docs/renderers/Form/Grid', + getComponent: (location, cb) => + require(['../../docs/renderers/Form/Grid.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Panel', + path: '/docs/renderers/Form/Panel', + getComponent: (location, cb) => + require(['../../docs/renderers/Form/Panel.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Hidden', + path: '/docs/renderers/Form/Hidden', + getComponent: (location, cb) => + require(['../../docs/renderers/Form/Hidden.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Text', + path: '/docs/renderers/Form/Text', + getComponent: (location, cb) => + require(['../../docs/renderers/Form/Text.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Input-Group', + path: '/docs/renderers/Form/Input-Group', + getComponent: (location, cb) => + require(['../../docs/renderers/Form/Input-Group.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Textarea', + path: '/docs/renderers/Form/Textarea', + getComponent: (location, cb) => + require(['../../docs/renderers/Form/Textarea.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Url', + path: '/docs/renderers/Form/Url', + getComponent: (location, cb) => + require(['../../docs/renderers/Form/Url.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Email', + path: '/docs/renderers/Form/Email', + getComponent: (location, cb) => + require(['../../docs/renderers/Form/Email.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Password', + path: '/docs/renderers/Form/Password', + getComponent: (location, cb) => + require(['../../docs/renderers/Form/Password.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Number', + path: '/docs/renderers/Form/Number', + getComponent: (location, cb) => + require(['../../docs/renderers/Form/Number.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Tag', + path: '/docs/renderers/Form/Tag', + getComponent: (location, cb) => + require(['../../docs/renderers/Form/Tag.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Select', + path: '/docs/renderers/Form/Select', + getComponent: (location, cb) => + require(['../../docs/renderers/Form/Select.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Chained-Select', + path: '/docs/renderers/Form/Chained-Select', + getComponent: (location, cb) => + require([ + '../../docs/renderers/Form/Chained-Select.md' + ], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Checkbox', + path: '/docs/renderers/Form/Checkbox', + getComponent: (location, cb) => + require(['../../docs/renderers/Form/Checkbox.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Checkboxes', + path: '/docs/renderers/Form/Checkboxes', + getComponent: (location, cb) => + require(['../../docs/renderers/Form/Checkboxes.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'City', + path: '/docs/renderers/Form/City', + getComponent: (location, cb) => + require(['../../docs/renderers/Form/City.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Radios', + path: '/docs/renderers/Form/Radios', + getComponent: (location, cb) => + require(['../../docs/renderers/Form/Radios.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Switch', + path: '/docs/renderers/Form/Switch', + getComponent: (location, cb) => + require(['../../docs/renderers/Form/Switch.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Rating', + path: '/docs/renderers/Form/Rating', + getComponent: (location, cb) => + require(['../../docs/renderers/Form/Rating.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Date', + path: '/docs/renderers/Form/Date', + getComponent: (location, cb) => + require(['../../docs/renderers/Form/Date.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Datetime', + path: '/docs/renderers/Form/Datetime', + getComponent: (location, cb) => + require(['../../docs/renderers/Form/Datetime.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Time', + path: '/docs/renderers/Form/Time', + getComponent: (location, cb) => + require(['../../docs/renderers/Form/Time.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Date-Range', + path: '/docs/renderers/Form/Date-Range', + getComponent: (location, cb) => + require(['../../docs/renderers/Form/Date-Range.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Color', + path: '/docs/renderers/Form/Color', + getComponent: (location, cb) => + require(['../../docs/renderers/Form/Color.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Range', + path: '/docs/renderers/Form/Range', + getComponent: (location, cb) => + require(['../../docs/renderers/Form/Range.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Image', + path: '/docs/renderers/Form/Image', + getComponent: (location, cb) => + require(['../../docs/renderers/Form/Image.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'File', + path: '/docs/renderers/Form/File', + getComponent: (location, cb) => + require(['../../docs/renderers/Form/File.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Matrix', + path: '/docs/renderers/Form/Matrix', + getComponent: (location, cb) => + require(['../../docs/renderers/Form/Matrix.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Tree', + path: '/docs/renderers/Form/Tree', + getComponent: (location, cb) => + require(['../../docs/renderers/Form/Tree.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'TreeSelect', + path: '/docs/renderers/Form/TreeSelect', + getComponent: (location, cb) => + require(['../../docs/renderers/Form/TreeSelect.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'NestedSelect', + path: '/docs/renderers/Form/NestedSelect', + getComponent: (location, cb) => + require(['../../docs/renderers/Form/NestedSelect.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Button', + path: '/docs/renderers/Form/Button', + getComponent: (location, cb) => + require(['../../docs/renderers/Form/Button.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Button-Toolbar', + path: '/docs/renderers/Form/Button-Toolbar', + getComponent: (location, cb) => + require([ + '../../docs/renderers/Form/Button-Toolbar.md' + ], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Combo', + path: '/docs/renderers/Form/Combo', + getComponent: (location, cb) => + require(['../../docs/renderers/Form/Combo.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Array', + path: '/docs/renderers/Form/Array', + getComponent: (location, cb) => + require(['../../docs/renderers/Form/Array.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'SubForm', + path: '/docs/renderers/Form/SubForm', + getComponent: (location, cb) => + require(['../../docs/renderers/Form/SubForm.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Picker', + path: '/docs/renderers/Form/Picker', + getComponent: (location, cb) => + require(['../../docs/renderers/Form/Picker.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Formula', + path: '/docs/renderers/Form/Formula', + getComponent: (location, cb) => + require(['../../docs/renderers/Form/Formula.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Group', + path: '/docs/renderers/Form/Group', + getComponent: (location, cb) => + require(['../../docs/renderers/Form/Group.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'FieldSet', + path: '/docs/renderers/Form/FieldSet', + getComponent: (location, cb) => + require(['../../docs/renderers/Form/FieldSet.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Repeat', + path: '/docs/renderers/Form/Repeat', + getComponent: (location, cb) => + require(['../../docs/renderers/Form/Repeat.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Rich-Text', + path: '/docs/renderers/Form/Rich-Text', + getComponent: (location, cb) => + require(['../../docs/renderers/Form/Rich-Text.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Editor', + path: '/docs/renderers/Form/Editor', + getComponent: (location, cb) => + require(['../../docs/renderers/Form/Editor.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Static', + path: '/docs/renderers/Static', + getComponent: (location, cb) => + require(['../../docs/renderers/Static.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + } + ] }, - { - label: 'API 说明', - path: '/docs/api', - icon: 'fa fa-cloud', - getComponent: (location, cb) => require(['../../docs/api.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); + label: 'Divider', + path: '/docs/renderers/Divider', + getComponent: (location, cb) => + require(['../../docs/renderers/Divider.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Wizard', + path: '/docs/renderers/Wizard', + getComponent: (location, cb) => + require(['../../docs/renderers/Wizard.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Each', + path: '/docs/renderers/Each', + getComponent: (location, cb) => + require(['../../docs/renderers/Each.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Tpl', + path: '/docs/renderers/Tpl', + getComponent: (location, cb) => + require(['../../docs/renderers/Tpl.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Plain', + path: '/docs/renderers/Plain', + getComponent: (location, cb) => + require(['../../docs/renderers/Plain.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Html', + path: '/docs/renderers/Html', + getComponent: (location, cb) => + require(['../../docs/renderers/Html.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Alert', + path: '/docs/renderers/Alert', + getComponent: (location, cb) => + require(['../../docs/renderers/Alert.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Action', + path: '/docs/renderers/Action', + getComponent: (location, cb) => + require(['../../docs/renderers/Action.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Dialog', + path: '/docs/renderers/Dialog', + getComponent: (location, cb) => + require(['../../docs/renderers/Dialog.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Drawer', + path: '/docs/renderers/Drawer', + getComponent: (location, cb) => + require(['../../docs/renderers/Drawer.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'CRUD', + path: '/docs/renderers/CRUD', + getComponent: (location, cb) => + require(['../../docs/renderers/CRUD.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }), + children: [ + { + label: 'CRUD-Table', + path: '/docs/renderers/CRUD-Table', + getComponent: (location, cb) => + require(['../../docs/renderers/CRUD-Table.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + + { + label: 'CRUD-Cards', + path: '/docs/renderers/CRUD-Cards', + getComponent: (location, cb) => + require(['../../docs/renderers/CRUD-Cards.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + + { + label: 'CRUD-List', + path: '/docs/renderers/CRUD-List', + getComponent: (location, cb) => + require(['../../docs/renderers/CRUD-List.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + } + ] + }, + { + label: 'Panel', + path: '/docs/renderers/Panel', + getComponent: (location, cb) => + require(['../../docs/renderers/Panel.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Wrapper', + path: '/docs/renderers/Wrapper', + getComponent: (location, cb) => + require(['../../docs/renderers/Wrapper.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Service', + path: '/docs/renderers/Service', + getComponent: (location, cb) => + require(['../../docs/renderers/Service.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Chart', + path: '/docs/renderers/Chart', + getComponent: (location, cb) => + require(['../../docs/renderers/Chart.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Collapse', + path: '/docs/renderers/Collapse', + getComponent: (location, cb) => + require(['../../docs/renderers/Collapse.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Carousel', + path: '/docs/renderers/Carousel', + getComponent: (location, cb) => + require(['../../docs/renderers/Carousel.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Audio', + path: '/docs/renderers/Audio', + getComponent: (location, cb) => + require(['../../docs/renderers/Audio.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Video', + path: '/docs/renderers/Video', + getComponent: (location, cb) => + require(['../../docs/renderers/Video.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Table', + path: '/docs/renderers/Table', + getComponent: (location, cb) => + require(['../../docs/renderers/Table.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }), + children: [ + { + label: 'Column', + path: '/docs/renderers/Column', + getComponent: (location, cb) => + require(['../../docs/renderers/Column.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Operation', + path: '/docs/renderers/Operation', + getComponent: (location, cb) => + require(['../../docs/renderers/Operation.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + } + ] + }, + { + label: 'List', + path: '/docs/renderers/List', + getComponent: (location, cb) => + require(['../../docs/renderers/List.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Card', + path: '/docs/renderers/Card', + getComponent: (location, cb) => + require(['../../docs/renderers/Card.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Cards', + path: '/docs/renderers/Cards', + getComponent: (location, cb) => + require(['../../docs/renderers/Cards.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Field', + path: '/docs/renderers/Field', + getComponent: (location, cb) => + require(['../../docs/renderers/Field.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Tabs', + path: '/docs/renderers/Tabs', + getComponent: (location, cb) => + require(['../../docs/renderers/Tabs.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Grid', + path: '/docs/renderers/Grid', + getComponent: (location, cb) => + require(['../../docs/renderers/Grid.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); }) }, { - label: '如何定制', - path: '/docs/sdk', - icon: 'fa fa-cubes', - getComponent: (location, cb) => require(['../../docs/sdk.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); + label: 'HBox', + path: '/docs/renderers/HBox', + getComponent: (location, cb) => + require(['../../docs/renderers/HBox.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); }) }, - { - label: '自定义组件', - path: '/docs/dev', - icon: 'fa fa-code', - getComponent: (location, cb) => require(['../../docs/dev.md'], (doc) => { - cb(null, makeMarkdownRenderer(doc)); + label: 'ButtonGroup', + path: '/docs/renderers/ButtonGroup', + getComponent: (location, cb) => + require(['../../docs/renderers/ButtonGroup.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)); + label: 'iFrame', + path: '/docs/renderers/iFrame', + getComponent: (location, cb) => + require(['../../docs/renderers/iFrame.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Nav', + path: '/docs/renderers/Nav', + getComponent: (location, cb) => + require(['../../docs/renderers/Nav.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Tasks', + path: '/docs/renderers/Tasks', + getComponent: (location, cb) => + require(['../../docs/renderers/Tasks.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'QRCode', + path: '/docs/renderers/QRCode', + getComponent: (location, cb) => + require(['../../docs/renderers/QRCode.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: '类型说明', + path: '/docs/renderers/Types', + getComponent: (location, cb) => + require(['../../docs/renderers/Types.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); }) } - ] -} \ No newline at end of file + ] + }, + + { + label: 'API 说明', + path: '/docs/api', + icon: 'fa fa-cloud', + getComponent: (location, cb) => + require(['../../docs/api.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + + { + label: '如何定制', + path: '/docs/sdk', + icon: 'fa fa-cubes', + getComponent: (location, cb) => + require(['../../docs/sdk.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + + { + label: '自定义组件', + path: '/docs/dev', + icon: 'fa fa-code', + getComponent: (location, cb) => + require(['../../docs/dev.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)); + }) + } + ] +}; diff --git a/examples/components/DocSearch.jsx b/examples/components/DocSearch.jsx index a4032869..cd98a502 100644 --- a/examples/components/DocSearch.jsx +++ b/examples/components/DocSearch.jsx @@ -2,46 +2,46 @@ import React from 'react'; import makeSchemaRenderer from './SchemaRender'; const FormComponent = makeSchemaRenderer({ - type: 'form', - mode: 'inline', - wrapWithPanel: false, - className: 'pull-right m-t-sm m-r', - controls: [{ - "type": "input-group", - "size": "sm", - "controls": [ - { - "type": "icon", - "addOnclassName": "no-bg", - "className": "text-sm", - "icon": "search", - "vendor": "iconfont" - }, - { - "type": "text", - "placeholder": "搜索文档", - "inputClassName": "b-l-none p-l-none", - "name": "docsearch" - } - ] - }] -}) + type: 'form', + mode: 'inline', + wrapWithPanel: false, + className: 'pull-right m-t-sm m-r', + controls: [ + { + type: 'input-group', + size: 'sm', + controls: [ + { + type: 'icon', + addOnclassName: 'no-bg', + className: 'text-sm', + icon: 'search', + vendor: 'iconfont' + }, + { + type: 'text', + placeholder: '搜索文档', + inputClassName: 'b-l-none p-l-none', + name: 'docsearch' + } + ] + } + ] +}); export default class DocSearch extends React.Component { - componentDidMount() { - const inputSelector = 'input[name="docsearch"]'; - docsearch({ - appId: '3W0NHYOWPE', - apiKey: '469f5cf3d54f9b86127970f913dc0725', - indexName: 'gh_pages', - inputSelector, - debug: false, - }); - } + componentDidMount() { + const inputSelector = 'input[name="docsearch"]'; + docsearch({ + appId: '3W0NHYOWPE', + apiKey: '469f5cf3d54f9b86127970f913dc0725', + indexName: 'gh_pages', + inputSelector, + debug: false + }); + } - render() { - return ( - - ); - } -} \ No newline at end of file + render() { + return ; + } +} diff --git a/examples/components/Editor.jsx b/examples/components/Editor.jsx index f2abe0f5..8b27a353 100644 --- a/examples/components/Editor.jsx +++ b/examples/components/Editor.jsx @@ -3,49 +3,62 @@ import Editor from '../../src/editor/Editor'; import Switch from '../../src/components/Switch'; import Button from '../../src/components/Button'; import schema from './Form/Test'; -import { Portal } from 'react-overlays'; +import {Portal} from 'react-overlays'; export default class AMisSchemaEditor extends React.Component { + state = { + preview: localStorage.getItem('editting_preview') ? true : false, + schema: localStorage.getItem('editting_schema') + ? JSON.parse(localStorage.getItem('editting_schema')) + : schema + }; - state = { - preview: localStorage.getItem('editting_preview') ? true : false, - schema: localStorage.getItem('editting_schema') ? JSON.parse(localStorage.getItem('editting_schema')) : schema - }; + handleChange = value => { + localStorage.setItem('editting_schema', JSON.stringify(value)); - handleChange = (value) => { - localStorage.setItem('editting_schema', JSON.stringify(value)); + this.setState({ + schema: value + }); + }; + handlePreviewChange = preview => { + localStorage.setItem('editting_preview', preview ? 'true' : ''); - this.setState({ - schema: value - }); - } - handlePreviewChange = (preview) => { - localStorage.setItem('editting_preview', preview ? 'true' : ''); + this.setState({ + preview: !!preview + }); + }; + clearCache = () => { + localStorage.removeItem('editting_schema'); + this.setState({ + schema: schema + }); + }; - this.setState({ - preview: !!preview - }); - } - clearCache = () => { - localStorage.removeItem('editting_schema'); - this.setState({ - schema: schema - }); - } + render() { + return ( +
    + document.querySelector('#headerBar')}> +
    + 预览{' '} + + +
    +     - render() { - return ( -
    - document.querySelector('#headerBar')}> -
    - 预览 - -
    -     - - - -
    - ); - } -} \ No newline at end of file + +
    + ); + } +} diff --git a/examples/components/Form/Combo.jsx b/examples/components/Form/Combo.jsx index 193733c0..566a1c64 100644 --- a/examples/components/Form/Combo.jsx +++ b/examples/components/Form/Combo.jsx @@ -1,676 +1,670 @@ export default { - $schema: "https://houtai.baidu.com/v2/schemas/page.json#", - title: "Combo 示例", - body: [ + $schema: 'https://houtai.baidu.com/v2/schemas/page.json#', + title: 'Combo 示例', + body: [ + { + type: 'tabs', + tabs: [ { - type: "tabs", - tabs: [ + title: '基本用法', + hash: 'basic', + body: [ + { + type: 'form', + api: '/api/mock2/saveForm?waitSeconds=2', + title: '', + mode: 'horizontal', + wrapWithPanel: false, + className: 'm-t', + // debug: true, + controls: [ { - title: "基本用法", - hash: 'basic', - body: [ - { - type: "form", - api: "/api/mock2/saveForm?waitSeconds=2", - title: "", - mode: "horizontal", - wrapWithPanel: false, - className: "m-t", - // debug: true, - controls: [ - { - type: 'text', - label: '文本', - name: 'a' - }, - { - type: 'divider' - }, - { - type: "combo", - name: "combo1", - label: "组合多条多行", - multiple: true, - multiLine: true, - value: [{}], - controls: [ - { - name: "a", - label: "文本", - type: "text", - placeholder: "文本", - value: '', - size: 'full' - }, - { - name: "b", - label: "选项", - type: "select", - options: ["a", "b", "c"], - size: 'full' - } - ] - }, - - { - type: "button", - label: "独立排序", - level: "dark", - className: "m-t-n-xs", - size: "sm", - actionType: "dialog", - visibleOn: "data.combo1.length > 1", - dialog: { - title: "对 Combo 进行 拖拽排序", - body: { - type: "form", - controls: [ - { - type: "combo", - name: "combo1", - label: false, - multiple: true, - draggable: true, - addable: false, - removable: false, - value: [{}], - controls: [ - { - name: "a", - type: "static", - tpl: "${a} - ${b}" - } - ] - } - ] - }, - actions: [ - { - type: "submit", - mergeData: true, - label: "确认", - level: "primary" - }, - - { - type: "button", - actionType: "close", - label: "取消" - } - ] - } - }, - - { - type: "combo", - name: "combo2", - label: "组合多条单行", - multiple: true, - value: [{}], - controls: [ - { - name: "a", - type: "text", - placeholder: "文本", - value: '' - }, - { - name: "b", - type: "select", - options: ["a", "b", "c"] - } - ] - }, - { - type: 'divider' - }, - { - type: "combo", - name: "combo3", - label: "组合单条多行", - multiLine: true, - controls: [ - { - name: "a", - label: "文本", - type: "text", - placeholder: "文本", - value: '', - size: 'full' - }, - { - name: "b", - label: "选项", - type: "select", - options: ["a", "b", "c"] - } - ] - }, - - { - type: "combo", - name: "combo4", - label: "组合单条单行", - controls: [ - { - name: "a", - type: "text", - placeholder: "文本", - value: '', - size: 'full' - }, - { - name: "b", - type: "select", - options: ["a", "b", "c"] - } - ] - } - ] - } - ] + type: 'text', + label: '文本', + name: 'a' + }, + { + type: 'divider' + }, + { + type: 'combo', + name: 'combo1', + label: '组合多条多行', + multiple: true, + multiLine: true, + value: [{}], + controls: [ + { + name: 'a', + label: '文本', + type: 'text', + placeholder: '文本', + value: '', + size: 'full' + }, + { + name: 'b', + label: '选项', + type: 'select', + options: ['a', 'b', 'c'], + size: 'full' + } + ] }, { - title: "内联样式", - hash: 'inline', - body: [ + type: 'button', + label: '独立排序', + level: 'dark', + className: 'm-t-n-xs', + size: 'sm', + actionType: 'dialog', + visibleOn: 'data.combo1.length > 1', + dialog: { + title: '对 Combo 进行 拖拽排序', + body: { + type: 'form', + controls: [ { - type: "form", - api: "/api/mock2/saveForm?waitSeconds=2", - title: "", - mode: "horizontal", - wrapWithPanel: false, - className: "m-t", - controls: [ - { - type: "combo", - name: "combo11", - label: "组合多条多行内联", - multiple: true, - multiLine: true, - inline: true, - value: [{}], - controls: [ - { - name: "a", - label: "文本", - type: "text", - placeholder: "文本", - value: '' - }, - { - name: "b", - label: "选项", - type: "select", - options: ["a", "b", "c"] - } - ] - }, - - { - type: "combo", - name: "combo22", - label: "组合多条单行内联", - multiple: true, - inline: true, - value: [{}], - controls: [ - { - name: "a", - type: "text", - placeholder: "文本", - value: '' - }, - { - name: "b", - type: "select", - options: ["a", "b", "c"] - } - ] - }, - { - type: 'divider' - }, - { - type: "combo", - name: "combo33", - label: "组合单条多行内联", - multiLine: true, - inline: true, - controls: [ - { - name: "a", - label: "文本", - type: "text", - placeholder: "文本", - value: '' - }, - { - name: "b", - label: "选项", - type: "select", - options: ["a", "b", "c"] - } - ] - }, - - { - type: "combo", - name: "combo44", - label: "组合单条单行内联", - inline: true, - controls: [ - { - name: "a", - type: "text", - placeholder: "文本", - value: '' - }, - { - name: "b", - type: "select", - options: ["a", "b", "c"] - } - ] - } - ] + type: 'combo', + name: 'combo1', + label: false, + multiple: true, + draggable: true, + addable: false, + removable: false, + value: [{}], + controls: [ + { + name: 'a', + type: 'static', + tpl: '${a} - ${b}' + } + ] } + ] + }, + actions: [ + { + type: 'submit', + mergeData: true, + label: '确认', + level: 'primary' + }, + + { + type: 'button', + actionType: 'close', + label: '取消' + } ] + } }, { - title: "唯一验证", - hash: 'unique', - body: [ - { - type: "form", - api: "/api/mock2/saveForm?waitSeconds=2", - title: "", - mode: "horizontal", - wrapWithPanel: false, - className: "m-t", - // debug: true, - controls: [ - { - type: "combo", - name: "combo666", - label: "组合多条唯一", - multiple: true, - value: [{}], - controls: [ - { - name: "a", - type: "text", - placeholder: "文本", - value: '', - unique: true - }, - { - name: "b", - type: "select", - options: ["a", "b", "c"], - unique: true - } - ] - } - ] - } - ] + type: 'combo', + name: 'combo2', + label: '组合多条单行', + multiple: true, + value: [{}], + controls: [ + { + name: 'a', + type: 'text', + placeholder: '文本', + value: '' + }, + { + name: 'b', + type: 'select', + options: ['a', 'b', 'c'] + } + ] + }, + { + type: 'divider' + }, + { + type: 'combo', + name: 'combo3', + label: '组合单条多行', + multiLine: true, + controls: [ + { + name: 'a', + label: '文本', + type: 'text', + placeholder: '文本', + value: '', + size: 'full' + }, + { + name: 'b', + label: '选项', + type: 'select', + options: ['a', 'b', 'c'] + } + ] }, { - title: "可拖拽排序", - hash: 'sortable', - body: [ - { - type: "form", - api: "/api/mock2/saveForm?waitSeconds=2", - title: "", - mode: "horizontal", - wrapWithPanel: false, - className: "m-t", - // debug: true, - controls: [ - - - { - type: "combo", - name: "combo777", - label: "可拖拽排序", - multiple: true, - value: [{a: '1', b: "a"}, {a: '2', b: "b"}], - draggable: true, - controls: [ - { - name: "a", - type: "text", - placeholder: "文本", - unique: true - }, - { - name: "b", - type: "select", - options: ["a", "b", "c"], - unique: true - } - ] - } - ] - } - ] - }, - - { - title: "值打平", - hash: 'flat', - body: [ - { - type: "form", - api: "/api/mock2/saveForm?waitSeconds=2", - title: "", - mode: "horizontal", - wrapWithPanel: false, - className: "m-t", - // debug: true, - controls: [ - - - { - type: "combo", - name: "combo888", - label: "可打平只存储值", - multiple: true, - flat: true, - value: ["red", "pink"], - draggable: true, - controls: [ - { - name: "a", - type: "color", - placeholder: "选取颜色" - } - ] - }, - { - type: "static", - name: "combo888", - label: "当前值", - tpl: "
    ${combo888|json}
    " - } - ] - } - ] - }, - - { - title: "条件", - hash: 'conditions', - body: [ - { - type: "form", - api: "/api/mock2/saveForm?waitSeconds=2", - title: "", - mode: "horizontal", - wrapWithPanel: false, - className: "m-t", - // debug: true, - controls: [ - '

    添加时可选择类型，比如这个栗子，可以选择是文本类型还是数字类型

    ', - { - type: 'combo', - name: 'combo-conditions1', - label: '单选', - value: { - type: "number" - }, - multiLine: true, - conditions: [ - { - label: '文本', - test: 'this.type === "text"', - scaffold: { - type: "text", - label: "文本", - name: "" - }, - controls: [ - { - label: "名称", - name: "label", - type: "text" - }, - { - label: "字段名", - name: "name", - type: "text" - }, - ] - }, - - { - label: '数字', - test: 'this.type === "number"', - scaffold: { - type: "number", - label: "数字", - name: "" - }, - controls: [ - { - label: "名称", - name: "label", - type: "text" - }, - { - label: "字段名", - name: "name", - type: "text" - }, - { - label: "最小值", - name: "min", - type: "number" - }, - { - label: "最大值", - name: "max", - type: "number" - }, - { - label: "步长", - name: "step", - type: "number" - } - ] - } - ], - }, - - { - type: 'combo', - name: 'combo-conditions2', - label: '多选', - value: [ - { - type: "text" - } - ], - multiLine: true, - multiple: true, - typeSwitchable: false, - conditions: [ - { - label: '文本', - test: 'this.type === "text"', - scaffold: { - type: "text", - label: "文本", - name: "" - }, - controls: [ - { - label: "名称", - name: "label", - type: "text" - }, - { - label: "字段名", - name: "name", - type: "text" - }, - ] - }, - - { - label: '数字', - test: 'this.type === "number"', - scaffold: { - type: "number", - label: "数字", - name: "" - }, - controls: [ - { - label: "名称", - name: "label", - type: "text" - }, - { - label: "字段名", - name: "name", - type: "text" - }, - { - label: "最小值", - name: "min", - type: "number" - }, - { - label: "最大值", - name: "max", - type: "number" - }, - { - label: "步长", - name: "step", - type: "number" - } - ] - } - ], - } - ] - } - ] - }, - - { - title: "Tabs", - hash: "tabs", - body: [ - { - type: "form", - api: "/api/mock2/saveForm?waitSeconds=2", - title: "", - mode: "horizontal", - wrapWithPanel: false, - className: "m-t", - // debug: true, - controls: [ - { - type: "combo", - name: "combo101", - label: "组合多条多行", - multiple: true, - multiLine: true, - value: [{}], - tabsMode: true, - tabsStyle: 'card', - maxLength: 3, - controls: [ - { - name: "a", - label: "文本", - type: "text", - placeholder: "文本", - value: '', - size: 'full' - }, - { - name: "b", - label: "选项", - type: "select", - options: ["a", "b", "c"], - size: 'full' - } - ] - }, - ] - } - ] - }, - - { - title: "其他", - hash: 'others', - body: [ - { - type: "form", - api: "/api/mock2/saveForm?waitSeconds=2", - title: "", - mode: "horizontal", - wrapWithPanel: false, - className: "m-t", - // debug: true, - controls: [ - - - { - type: "text", - disabled: true, - label: "父级值", - name: "a_super", - value: "123" - }, - - { - type: "combo", - name: "combo999", - label: "可获取父级数据", - multiple: true, - canAccessSuperData: true, - controls: [ - { - name: "a_super", - type: "text" - } - ] - }, - - { - type: "combo", - name: "combo9999", - label: "显示序号", - multiple: true, - controls: [ - { - type: "tpl", - tpl: "<%= data.index + 1%>", - className: "p-t-xs", - mode: "inline" - }, - { - name: "a", - type: "text" - } - ] - } - ] - } - ] + type: 'combo', + name: 'combo4', + label: '组合单条单行', + controls: [ + { + name: 'a', + type: 'text', + placeholder: '文本', + value: '', + size: 'full' + }, + { + name: 'b', + type: 'select', + options: ['a', 'b', 'c'] + } + ] } - ] + ] + } + ] + }, + + { + title: '内联样式', + hash: 'inline', + body: [ + { + type: 'form', + api: '/api/mock2/saveForm?waitSeconds=2', + title: '', + mode: 'horizontal', + wrapWithPanel: false, + className: 'm-t', + controls: [ + { + type: 'combo', + name: 'combo11', + label: '组合多条多行内联', + multiple: true, + multiLine: true, + inline: true, + value: [{}], + controls: [ + { + name: 'a', + label: '文本', + type: 'text', + placeholder: '文本', + value: '' + }, + { + name: 'b', + label: '选项', + type: 'select', + options: ['a', 'b', 'c'] + } + ] + }, + + { + type: 'combo', + name: 'combo22', + label: '组合多条单行内联', + multiple: true, + inline: true, + value: [{}], + controls: [ + { + name: 'a', + type: 'text', + placeholder: '文本', + value: '' + }, + { + name: 'b', + type: 'select', + options: ['a', 'b', 'c'] + } + ] + }, + { + type: 'divider' + }, + { + type: 'combo', + name: 'combo33', + label: '组合单条多行内联', + multiLine: true, + inline: true, + controls: [ + { + name: 'a', + label: '文本', + type: 'text', + placeholder: '文本', + value: '' + }, + { + name: 'b', + label: '选项', + type: 'select', + options: ['a', 'b', 'c'] + } + ] + }, + + { + type: 'combo', + name: 'combo44', + label: '组合单条单行内联', + inline: true, + controls: [ + { + name: 'a', + type: 'text', + placeholder: '文本', + value: '' + }, + { + name: 'b', + type: 'select', + options: ['a', 'b', 'c'] + } + ] + } + ] + } + ] + }, + + { + title: '唯一验证', + hash: 'unique', + body: [ + { + type: 'form', + api: '/api/mock2/saveForm?waitSeconds=2', + title: '', + mode: 'horizontal', + wrapWithPanel: false, + className: 'm-t', + // debug: true, + controls: [ + { + type: 'combo', + name: 'combo666', + label: '组合多条唯一', + multiple: true, + value: [{}], + controls: [ + { + name: 'a', + type: 'text', + placeholder: '文本', + value: '', + unique: true + }, + { + name: 'b', + type: 'select', + options: ['a', 'b', 'c'], + unique: true + } + ] + } + ] + } + ] + }, + + { + title: '可拖拽排序', + hash: 'sortable', + body: [ + { + type: 'form', + api: '/api/mock2/saveForm?waitSeconds=2', + title: '', + mode: 'horizontal', + wrapWithPanel: false, + className: 'm-t', + // debug: true, + controls: [ + { + type: 'combo', + name: 'combo777', + label: '可拖拽排序', + multiple: true, + value: [{a: '1', b: 'a'}, {a: '2', b: 'b'}], + draggable: true, + controls: [ + { + name: 'a', + type: 'text', + placeholder: '文本', + unique: true + }, + { + name: 'b', + type: 'select', + options: ['a', 'b', 'c'], + unique: true + } + ] + } + ] + } + ] + }, + + { + title: '值打平', + hash: 'flat', + body: [ + { + type: 'form', + api: '/api/mock2/saveForm?waitSeconds=2', + title: '', + mode: 'horizontal', + wrapWithPanel: false, + className: 'm-t', + // debug: true, + controls: [ + { + type: 'combo', + name: 'combo888', + label: '可打平只存储值', + multiple: true, + flat: true, + value: ['red', 'pink'], + draggable: true, + controls: [ + { + name: 'a', + type: 'color', + placeholder: '选取颜色' + } + ] + }, + { + type: 'static', + name: 'combo888', + label: '当前值', + tpl: '
    ${combo888|json}
    ' + } + ] + } + ] + }, + + { + title: '条件', + hash: 'conditions', + body: [ + { + type: 'form', + api: '/api/mock2/saveForm?waitSeconds=2', + title: '', + mode: 'horizontal', + wrapWithPanel: false, + className: 'm-t', + // debug: true, + controls: [ + '

    添加时可选择类型，比如这个栗子，可以选择是文本类型还是数字类型

    ', + { + type: 'combo', + name: 'combo-conditions1', + label: '单选', + value: { + type: 'number' + }, + multiLine: true, + conditions: [ + { + label: '文本', + test: 'this.type === "text"', + scaffold: { + type: 'text', + label: '文本', + name: '' + }, + controls: [ + { + label: '名称', + name: 'label', + type: 'text' + }, + { + label: '字段名', + name: 'name', + type: 'text' + } + ] + }, + + { + label: '数字', + test: 'this.type === "number"', + scaffold: { + type: 'number', + label: '数字', + name: '' + }, + controls: [ + { + label: '名称', + name: 'label', + type: 'text' + }, + { + label: '字段名', + name: 'name', + type: 'text' + }, + { + label: '最小值', + name: 'min', + type: 'number' + }, + { + label: '最大值', + name: 'max', + type: 'number' + }, + { + label: '步长', + name: 'step', + type: 'number' + } + ] + } + ] + }, + + { + type: 'combo', + name: 'combo-conditions2', + label: '多选', + value: [ + { + type: 'text' + } + ], + multiLine: true, + multiple: true, + typeSwitchable: false, + conditions: [ + { + label: '文本', + test: 'this.type === "text"', + scaffold: { + type: 'text', + label: '文本', + name: '' + }, + controls: [ + { + label: '名称', + name: 'label', + type: 'text' + }, + { + label: '字段名', + name: 'name', + type: 'text' + } + ] + }, + + { + label: '数字', + test: 'this.type === "number"', + scaffold: { + type: 'number', + label: '数字', + name: '' + }, + controls: [ + { + label: '名称', + name: 'label', + type: 'text' + }, + { + label: '字段名', + name: 'name', + type: 'text' + }, + { + label: '最小值', + name: 'min', + type: 'number' + }, + { + label: '最大值', + name: 'max', + type: 'number' + }, + { + label: '步长', + name: 'step', + type: 'number' + } + ] + } + ] + } + ] + } + ] + }, + + { + title: 'Tabs', + hash: 'tabs', + body: [ + { + type: 'form', + api: '/api/mock2/saveForm?waitSeconds=2', + title: '', + mode: 'horizontal', + wrapWithPanel: false, + className: 'm-t', + // debug: true, + controls: [ + { + type: 'combo', + name: 'combo101', + label: '组合多条多行', + multiple: true, + multiLine: true, + value: [{}], + tabsMode: true, + tabsStyle: 'card', + maxLength: 3, + controls: [ + { + name: 'a', + label: '文本', + type: 'text', + placeholder: '文本', + value: '', + size: 'full' + }, + { + name: 'b', + label: '选项', + type: 'select', + options: ['a', 'b', 'c'], + size: 'full' + } + ] + } + ] + } + ] + }, + + { + title: '其他', + hash: 'others', + body: [ + { + type: 'form', + api: '/api/mock2/saveForm?waitSeconds=2', + title: '', + mode: 'horizontal', + wrapWithPanel: false, + className: 'm-t', + // debug: true, + controls: [ + { + type: 'text', + disabled: true, + label: '父级值', + name: 'a_super', + value: '123' + }, + + { + type: 'combo', + name: 'combo999', + label: '可获取父级数据', + multiple: true, + canAccessSuperData: true, + controls: [ + { + name: 'a_super', + type: 'text' + } + ] + }, + + { + type: 'combo', + name: 'combo9999', + label: '显示序号', + multiple: true, + controls: [ + { + type: 'tpl', + tpl: '<%= data.index + 1%>', + className: 'p-t-xs', + mode: 'inline' + }, + { + name: 'a', + type: 'text' + } + ] + } + ] + } + ] } - ] + ] + } + ] }; diff --git a/examples/components/Form/Custom.jsx b/examples/components/Form/Custom.jsx index b3a6b5c8..5d9910b5 100644 --- a/examples/components/Form/Custom.jsx +++ b/examples/components/Form/Custom.jsx @@ -1,95 +1,99 @@ import React from 'react'; -import { - FormItem, - Renderer -} from '../../../src/index'; +import {FormItem, Renderer} from '../../../src/index'; @FormItem({ - type: 'custom' + type: 'custom' }) class MyFormItem extends React.Component { - render() { - const { - value, - onChange - } = this.props; + render() { + const {value, onChange} = this.props; - return ( -
    -

    这个是个自定义组件。通过注册渲染器的方式实现。

    + return ( +
    +

    这个是个自定义组件。通过注册渲染器的方式实现。

    -

    当前值：{value}

    +

    当前值：{value}

    - onChange(Math.round(Math.random() * 10000))}>随机修改 -
    - ); - } + onChange(Math.round(Math.random() * 10000))} + > + 随机修改 + +
    + ); + } } @Renderer({ - test: /(^|\/)my\-renderer$/, + test: /(^|\/)my\-renderer$/ }) class CustomRenderer extends React.Component { - render() { - const {tip} = this.props; - return ( -
    {tip || '非 FormItem 类型的渲染器注册， 这种不能修改 form'}
    - ); - } + render() { + const {tip} = this.props; + return ( +
    {tip || '非 FormItem 类型的渲染器注册， 这种不能修改 form'}
    + ); + } } export default { - $schema: "https://houtai.baidu.com/v2/schemas/page.json#", - title: "自定义组件示例", - body: [ + $schema: 'https://houtai.baidu.com/v2/schemas/page.json#', + title: '自定义组件示例', + body: [ + { + type: 'form', + mode: 'horizontal', + api: '/api/mock2/form/saveForm?waitSeconds=2', + actions: [ { - type: "form", - mode: "horizontal", - api: "/api/mock2/form/saveForm?waitSeconds=2", - actions: [ - { - type: "submit", - label: "提交", - primary: true - } - ], - controls: [ - { - name: 'a', - children: ({value, onChange}) => ( -
    -

    这个是个自定义组件。最简单直接的方式，不用注册直接使用。

    - -

    当前值：{value}

    - - onChange(Math.round(Math.random() * 10000))}>随机修改 -
    - ) - }, - - { - type: 'divider' - }, - - { - name: 'b', - type: 'custom', - label: '自定义FormItem' - }, - - { - type: 'divider' - }, - - { - type: 'my-renderer' - } - ] + type: 'submit', + label: '提交', + primary: true + } + ], + controls: [ + { + name: 'a', + children: ({value, onChange}) => ( +
    +

    这个是个自定义组件。最简单直接的方式，不用注册直接使用。

    + +

    当前值：{value}

    + + onChange(Math.round(Math.random() * 10000))} + > + 随机修改 + +
    + ) }, { - type: 'my-renderer', - tip: '他能放 controls 里面，也能放外面。' + type: 'divider' + }, + + { + name: 'b', + type: 'custom', + label: '自定义FormItem' + }, + + { + type: 'divider' + }, + + { + type: 'my-renderer' } - ] + ] + }, + + { + type: 'my-renderer', + tip: '他能放 controls 里面，也能放外面。' + } + ] }; diff --git a/examples/components/Form/Definitions.jsx b/examples/components/Form/Definitions.jsx index 475e26b6..b0892cbd 100644 --- a/examples/components/Form/Definitions.jsx +++ b/examples/components/Form/Definitions.jsx @@ -1,273 +1,276 @@ export default { - $schema: "https://houtai.baidu.com/v2/schemas/page.json#", - definitions: { - options: { - type: 'combo', - multiple: true, - multiLine: true, - controls: [ - { - type: 'group', - controls: [ - { - label: "名称", - name: "label", - type: "text", - required: true - }, - - { - label: "值", - name: "value", - type: "text", - required: true - }, - ] - }, + $schema: 'https://houtai.baidu.com/v2/schemas/page.json#', + definitions: { + options: { + type: 'combo', + multiple: true, + multiLine: true, + controls: [ + { + type: 'group', + controls: [ + { + label: '名称', + name: 'label', + type: 'text', + required: true + }, - { - $ref: 'options', - label: "子选项", - name: "children", - addButtonText: '新增子选项' - } - ] + { + label: '值', + name: 'value', + type: 'text', + required: true + } + ] }, - queryItem: { - type: 'combo', - multiple: true, - multiLine: true, - typeSwitchable: false, - conditions: [ - { - label: "条件", - test: "!data.hasOwnProperty('connect')", - scaffold: {}, - controls: [ - { - type: 'group', - className: 'm-b-none', - controls: [ - { - name: 'key', - type: 'text', - placeholder: '字段名', - required: true - }, - - { - name: 'type', - type: 'select', - value: 0, - options: [ - { - label: 'int64', - value: 0 - }, - { - label: 'double64', - value: 1 - }, - { - label: 'string', - value: 2 - }, - { - label: 'version', - value: 3 - } - ] - }, - - { - type: 'formula', - name: 'opt', - formula: '""', - condition: '${type}' - }, - - { - name: 'opt', - type: 'select', - placeholder: '请选择', - required: true, - options: [ - { - label: '>', - value: '>', - visibleOn: '~[0,1,3].indexOf(this.type)' - }, - { - label: '<', - value: '<', - visibleOn: '~[0,1,3].indexOf(this.type)' - }, - { - label: '==', - value: '==' - }, - { - label: '>=', - value: '>=', - visibleOn: '~[0,1,3].indexOf(this.type)' - }, - { - label: '<=', - value: '<=', - visibleOn: '~[0,1,3].indexOf(this.type)' - }, - { - label: 'in', - value: 'in', - }, - { - label: 'not in', - value: 'not in', - }, - { - label: '!=', - value: '!=' - }, - ] - }, - - { - name: 'val', - type: 'text', - placeholder: '值', - required: true, - visibleOn: '~[">", "<", ">=", "<=", "==", "!="].indexOf(this.opt)' - }, - - { - name: 'val', - type: 'array', - required: true, - minLength: 1, - items: { - type: 'text', - placeholder: '值', - required: true, - }, - visibleOn: '~["in", "not in"].indexOf(this.opt)' - } - ] - } - ] - }, - - { - label: "组合", - test: "data.hasOwnProperty('connect')", - scaffold: { - connect: "&", - exprs: [{}] - }, - controls: [ - { - type: "button-group", - name: 'connect', - value: '&', - clearable: false, - size: 'xs', - options: [ - { - label: 'AND', - value: '&' - }, - - { - label: 'OR', - value: '|' - } - ] - }, - { - $ref: 'queryItem', - name: 'exprs', - minLength: 1, - value: [{}] - } - ] - } - ] - }, - - queryGroup: { - type: 'combo', - multiple: false, - multiLine: true, - controls: [ - { - type: "button-group", - name: 'connect', - value: '&', - // label: "连接方式", - // mode: 'inline', - clearable: false, - size: 'sm', - options: [ - { - label: 'AND', - value: '&' - }, - - { - label: 'OR', - value: '|' - } - ] - }, - { - $ref: 'queryItem', - name: 'exprs', - minLength: 1, - value: [{}] - } - ] + { + $ref: 'options', + label: '子选项', + name: 'children', + addButtonText: '新增子选项' } + ] }, - type: 'page', - title: '引用', - body: [ - '

    引用可以用来减少重复的结构定义，最主要的是可以用来实现结构的递归定义。

    ', - + + queryItem: { + type: 'combo', + multiple: true, + multiLine: true, + typeSwitchable: false, + conditions: [ { - type: 'form', - api: '/api/mock/saveForm', - mode: 'horizontal', - controls: [ + label: '条件', + test: "!data.hasOwnProperty('connect')", + scaffold: {}, + controls: [ + { + type: 'group', + className: 'm-b-none', + controls: [ { - $ref: 'options', - name: 'options', - value: [{ - label: '选项1', - value: '1' - }], - minLength: 1, - label: '选项配置' - } - ] - }, - - { - type: 'form', - api: '/api/mock/saveForm', - controls: [ - { - $ref: 'queryGroup', - name: 'q', - value: {}, - label: 'Query' + name: 'key', + type: 'text', + placeholder: '字段名', + required: true }, + { - type: "static", - name: "q", - label: "当前值", - tpl: "
    ${q|json}
    " + name: 'type', + type: 'select', + value: 0, + options: [ + { + label: 'int64', + value: 0 + }, + { + label: 'double64', + value: 1 + }, + { + label: 'string', + value: 2 + }, + { + label: 'version', + value: 3 + } + ] + }, + + { + type: 'formula', + name: 'opt', + formula: '""', + condition: '${type}' + }, + + { + name: 'opt', + type: 'select', + placeholder: '请选择', + required: true, + options: [ + { + label: '>', + value: '>', + visibleOn: '~[0,1,3].indexOf(this.type)' + }, + { + label: '<', + value: '<', + visibleOn: '~[0,1,3].indexOf(this.type)' + }, + { + label: '==', + value: '==' + }, + { + label: '>=', + value: '>=', + visibleOn: '~[0,1,3].indexOf(this.type)' + }, + { + label: '<=', + value: '<=', + visibleOn: '~[0,1,3].indexOf(this.type)' + }, + { + label: 'in', + value: 'in' + }, + { + label: 'not in', + value: 'not in' + }, + { + label: '!=', + value: '!=' + } + ] + }, + + { + name: 'val', + type: 'text', + placeholder: '值', + required: true, + visibleOn: + '~[">", "<", ">=", "<=", "==", "!="].indexOf(this.opt)' + }, + + { + name: 'val', + type: 'array', + required: true, + minLength: 1, + items: { + type: 'text', + placeholder: '值', + required: true + }, + visibleOn: '~["in", "not in"].indexOf(this.opt)' } - ] + ] + } + ] }, - ] + + { + label: '组合', + test: "data.hasOwnProperty('connect')", + scaffold: { + connect: '&', + exprs: [{}] + }, + controls: [ + { + type: 'button-group', + name: 'connect', + value: '&', + clearable: false, + size: 'xs', + options: [ + { + label: 'AND', + value: '&' + }, + + { + label: 'OR', + value: '|' + } + ] + }, + { + $ref: 'queryItem', + name: 'exprs', + minLength: 1, + value: [{}] + } + ] + } + ] + }, + + queryGroup: { + type: 'combo', + multiple: false, + multiLine: true, + controls: [ + { + type: 'button-group', + name: 'connect', + value: '&', + // label: "连接方式", + // mode: 'inline', + clearable: false, + size: 'sm', + options: [ + { + label: 'AND', + value: '&' + }, + + { + label: 'OR', + value: '|' + } + ] + }, + { + $ref: 'queryItem', + name: 'exprs', + minLength: 1, + value: [{}] + } + ] + } + }, + type: 'page', + title: '引用', + body: [ + '

    引用可以用来减少重复的结构定义，最主要的是可以用来实现结构的递归定义。

    ', + + { + type: 'form', + api: '/api/mock/saveForm', + mode: 'horizontal', + controls: [ + { + $ref: 'options', + name: 'options', + value: [ + { + label: '选项1', + value: '1' + } + ], + minLength: 1, + label: '选项配置' + } + ] + }, + + { + type: 'form', + api: '/api/mock/saveForm', + controls: [ + { + $ref: 'queryGroup', + name: 'q', + value: {}, + label: 'Query' + }, + { + type: 'static', + name: 'q', + label: '当前值', + tpl: '
    ${q|json}
    ' + } + ] + } + ] }; diff --git a/examples/components/Form/Editor.jsx b/examples/components/Form/Editor.jsx index 76e2ae6c..e0754245 100644 --- a/examples/components/Form/Editor.jsx +++ b/examples/components/Form/Editor.jsx @@ -1,46 +1,47 @@ import React from 'react'; export default { - $schema: "https://houtai.baidu.com/v2/schemas/page.json#", - title: "Editor", - body: [ + $schema: 'https://houtai.baidu.com/v2/schemas/page.json#', + title: 'Editor', + body: [ + { + type: 'form', + api: '/api/mock2/saveForm?waitSeconds=2', + title: '', + controls: [ { - type: "form", - api: "/api/mock2/saveForm?waitSeconds=2", - title: "", - controls: [ - { - name: "javascript", - type: "editor", - label: "Javascript", - language: 'javascript', - value: "console.log(1, 2, 3);" - }, + name: 'javascript', + type: 'editor', + label: 'Javascript', + language: 'javascript', + value: 'console.log(1, 2, 3);' + }, - { - name: "html", - type: "editor", - language: 'html', - label: "Html", - value: "Hello

    world

    " - }, + { + name: 'html', + type: 'editor', + language: 'html', + label: 'Html', + value: + 'Hello

    world

    ' + }, - { - name: "css", - type: "editor", - language: 'css', - label: "CSS", - value: "body {color: red;}" - }, + { + name: 'css', + type: 'editor', + language: 'css', + label: 'CSS', + value: 'body {color: red;}' + }, - { - name: "json", - type: "editor", - language: 'json', - label: "JSON", - value: `{"a": 1, "b": 2}` - } - ] + { + name: 'json', + type: 'editor', + language: 'json', + label: 'JSON', + value: `{"a": 1, "b": 2}` } - ] + ] + } + ] }; diff --git a/examples/components/Form/FieldSet.jsx b/examples/components/Form/FieldSet.jsx index b9990dd5..f772e8e2 100644 --- a/examples/components/Form/FieldSet.jsx +++ b/examples/components/Form/FieldSet.jsx @@ -1,148 +1,148 @@ export default { - $schema: "https://houtai.baidu.com/v2/schemas/page.json#", - title: "FieldSet 示例", - body: [ + $schema: 'https://houtai.baidu.com/v2/schemas/page.json#', + title: 'FieldSet 示例', + body: [ + { + type: 'form', + mode: 'horizontal', + api: '/api/mock2/saveForm?waitSeconds=2', + actions: [ { - type: "form", - mode: "horizontal", - api: "/api/mock2/saveForm?waitSeconds=2", - actions: [ + type: 'submit', + label: '提交', + primary: true + } + ], + collapsable: true, + title: 'fieldSet 可以对表单元素做个分组', + controls: [ + { + type: 'fieldSet', + title: '基本信息', + collapsable: true, + controls: [ + { + type: 'group', + controls: [ { - type: "submit", - label: "提交", - primary: true - } - ], - collapsable: true, - title: 'fieldSet 可以对表单元素做个分组', - controls: [ - { - type: 'fieldSet', - title: '基本信息', - collapsable: true, - controls: [ - { - type: 'group', - controls: [ - { - type: "email", - name: "email", - placeholder: "请输入邮箱地址", - label: "邮箱" - }, - { - type: "password", - name: "password", - label: false, - placeholder: "Password" - } - ] - }, - { - type: "divider" - }, - { - type: 'group', - controls: [ - { - type: "email", - name: "email", - placeholder: "请输入邮箱地址", - label: "邮箱" - }, - { - type: "checkbox", - name: "rememberMe", - label: false, - option: "Remember me" - } - ] - } - ] + type: 'email', + name: 'email', + placeholder: '请输入邮箱地址', + label: '邮箱' }, - { - title: '其他信息', - type: 'fieldSet', - controls: [ - { - type: "email", - name: "email", - placeholder: "请输入邮箱地址", - label: "邮箱" - }, - { - type: "divider" - }, - { - type: "checkbox", - name: "rememberMe", - option: "记住我" - } - ] + type: 'password', + name: 'password', + label: false, + placeholder: 'Password' } - ] + ] + }, + { + type: 'divider' + }, + { + type: 'group', + controls: [ + { + type: 'email', + name: 'email', + placeholder: '请输入邮箱地址', + label: '邮箱' + }, + { + type: 'checkbox', + name: 'rememberMe', + label: false, + option: 'Remember me' + } + ] + } + ] + }, + + { + title: '其他信息', + type: 'fieldSet', + controls: [ + { + type: 'email', + name: 'email', + placeholder: '请输入邮箱地址', + label: '邮箱' + }, + { + type: 'divider' + }, + { + type: 'checkbox', + name: 'rememberMe', + option: '记住我' + } + ] + } + ] + }, + { + title: 'FieldSet 样式集', + type: 'form', + controls: [ + { + title: '超级小', + type: 'fieldSet', + className: 'fieldset-xs', + controls: [ + { + type: 'plain', + text: '文本 ...' + } + ] }, { - title: "FieldSet 样式集", - type: "form", - controls: [ - { - title: "超级小", - type: 'fieldSet', - className: "fieldset-xs", - controls: [ - { - type: "plain", - text: "文本 ..." - } - ] - }, - { - title: "小尺寸", - type: 'fieldSet', - className: "fieldset-sm", - controls: [ - { - type: "plain", - text: "文本 ..." - } - ] - }, - { - title: "正常尺寸", - type: 'fieldSet', - className: "fieldset", - controls: [ - { - type: "plain", - text: "文本 ..." - } - ] - }, - { - title: "中大尺寸", - type: 'fieldSet', - className: "fieldset-md", - controls: [ - { - type: "plain", - text: "文本 ..." - } - ] - }, - { - title: "超大尺寸", - type: 'fieldSet', - className: "fieldset-lg", - controls: [ - { - type: "plain", - text: "文本 ..." - } - ] - } - ] + title: '小尺寸', + type: 'fieldSet', + className: 'fieldset-sm', + controls: [ + { + type: 'plain', + text: '文本 ...' + } + ] + }, + { + title: '正常尺寸', + type: 'fieldSet', + className: 'fieldset', + controls: [ + { + type: 'plain', + text: '文本 ...' + } + ] + }, + { + title: '中大尺寸', + type: 'fieldSet', + className: 'fieldset-md', + controls: [ + { + type: 'plain', + text: '文本 ...' + } + ] + }, + { + title: '超大尺寸', + type: 'fieldSet', + className: 'fieldset-lg', + controls: [ + { + type: 'plain', + text: '文本 ...' + } + ] } - ] + ] + } + ] }; diff --git a/examples/components/Form/FieldSetInTabs.jsx b/examples/components/Form/FieldSetInTabs.jsx index a291357f..f7ffd4c6 100644 --- a/examples/components/Form/FieldSetInTabs.jsx +++ b/examples/components/Form/FieldSetInTabs.jsx @@ -1,101 +1,101 @@ export default { - $schema: "https://houtai.baidu.com/v2/schemas/page.json#", - title: "FieldSet In Tabs", - remark: "", - body: { - type: "form", - collapsable: true, - tabs: [ - { - title: "Tab A", - fieldSet: [ - { - title: "Group A", - tabs: [ - { - title: "SubTab A", - controls: [ - { - name: "a", - type: "text", - label: "Text" - }, - { - name: "a", - type: "text", - label: "Text" - } - ] - }, - { - title: "SubTab B", - controls: [ - { - name: "a", - type: "text", - label: "Text" - }, - { - name: "a", - type: "text", - label: "Text" - } - ] - } - ] - }, - { - title: "Group B", - controls: [ - { - name: "a", - type: "text", - label: "Text" - }, - { - name: "a", - type: "text", - label: "Text" - } - ] - } + $schema: 'https://houtai.baidu.com/v2/schemas/page.json#', + title: 'FieldSet In Tabs', + remark: '', + body: { + type: 'form', + collapsable: true, + tabs: [ + { + title: 'Tab A', + fieldSet: [ + { + title: 'Group A', + tabs: [ + { + title: 'SubTab A', + controls: [ + { + name: 'a', + type: 'text', + label: 'Text' + }, + { + name: 'a', + type: 'text', + label: 'Text' + } ] - }, - { - title: "Tab B", - fieldSet: [ - { - title: "Group A", - controls: [ - { - name: "a", - type: "text", - label: "Text" - }, - { - name: "a", - type: "text", - label: "Text" - } - ] - }, - { - title: "Group B", - controls: [ - { - name: "a", - type: "text", - label: "Text" - }, - { - name: "a", - type: "text", - label: "Text" - } - ] - } + }, + { + title: 'SubTab B', + controls: [ + { + name: 'a', + type: 'text', + label: 'Text' + }, + { + name: 'a', + type: 'text', + label: 'Text' + } ] - } + } + ] + }, + { + title: 'Group B', + controls: [ + { + name: 'a', + type: 'text', + label: 'Text' + }, + { + name: 'a', + type: 'text', + label: 'Text' + } + ] + } ] - } + }, + { + title: 'Tab B', + fieldSet: [ + { + title: 'Group A', + controls: [ + { + name: 'a', + type: 'text', + label: 'Text' + }, + { + name: 'a', + type: 'text', + label: 'Text' + } + ] + }, + { + title: 'Group B', + controls: [ + { + name: 'a', + type: 'text', + label: 'Text' + }, + { + name: 'a', + type: 'text', + label: 'Text' + } + ] + } + ] + } + ] + } }; diff --git a/examples/components/Form/Formula.jsx b/examples/components/Form/Formula.jsx index 109559a2..ab2606dd 100644 --- a/examples/components/Form/Formula.jsx +++ b/examples/components/Form/Formula.jsx @@ -1,127 +1,127 @@ export default { - "$schema": "https://houtai.baidu.com/v2/schemas/page.json#", - "title": "公式示例", - "body": [ - "

    通过公式，可以动态的设置目标值。

    ", + $schema: 'https://houtai.baidu.com/v2/schemas/page.json#', + title: '公式示例', + body: [ + '

    通过公式，可以动态的设置目标值。

    ', + { + type: 'form', + title: '自动应用', + api: '/api/mock2/form/saveForm', + controls: [ { - "type": "form", - title: "自动应用", - "api": "/api/mock2/form/saveForm", - "controls": [ - { - "type": "number", - "name": "a", - "label": "A" - }, - - { - "type": "number", - "name": "b", - "label": "B" - }, - - { - "type": "number", - "name": "sum", - "label": "和", - "disabled": true, - description: '自动计算 A + B' - }, - - { - "type": "formula", - "name": "sum", - "value": 0, - "formula": "a + b" - } - ] + type: 'number', + name: 'a', + label: 'A' }, { - "type": "form", - title: "手动应用", - "api": "/api/mock2/form/saveForm", - "controls": [ - { - "type": "number", - "name": "a", - "label": "A" - }, + type: 'number', + name: 'b', + label: 'B' + }, - { - "type": "number", - "name": "b", - "label": "B" - }, + { + type: 'number', + name: 'sum', + label: '和', + disabled: true, + description: '自动计算 A + B' + }, - { - type: "group", - controls: [ - { - "type": "number", - "name": "sum", - "label": "和", - "disabled": true, - "columnClassName": "col-sm-11", - }, + { + type: 'formula', + name: 'sum', + value: 0, + formula: 'a + b' + } + ] + }, - { - "type": "button", - "label": "计算", - "columnClassName": "col-sm-1 v-bottom", - "target": "theFormula" - } - ] - }, + { + type: 'form', + title: '手动应用', + api: '/api/mock2/form/saveForm', + controls: [ + { + type: 'number', + name: 'a', + label: 'A' + }, - { - "type": "formula", - "name": "sum", - "id": "theFormula", - "value": 0, - "formula": "a + b", - "initSet": false, - "autoSet": false - } - ] + { + type: 'number', + name: 'b', + label: 'B' + }, + + { + type: 'group', + controls: [ + { + type: 'number', + name: 'sum', + label: '和', + disabled: true, + columnClassName: 'col-sm-11' + }, + + { + type: 'button', + label: '计算', + columnClassName: 'col-sm-1 v-bottom', + target: 'theFormula' + } + ] + }, + + { + type: 'formula', + name: 'sum', + id: 'theFormula', + value: 0, + formula: 'a + b', + initSet: false, + autoSet: false + } + ] + }, + { + type: 'form', + title: '条件应用', + api: '/api/mock2/form/saveForm', + controls: [ + { + type: 'radios', + name: 'radios', + inline: true, + label: 'radios', + options: [ + { + label: 'a', + value: 'a' + }, + { + label: 'b', + value: 'b' + } + ], + description: 'radios 变化会自动清空 B' }, { - "type": "form", - title: "条件应用", - "api": "/api/mock2/form/saveForm", - "controls": [ - { - "type": "radios", - "name": "radios", - "inline": true, - "label": "radios", - "options": [ - { - "label": 'a', - "value": 'a' - }, - { - "label": 'b', - "value": 'b' - }, - ], - "description": 'radios 变化会自动清空 B' - }, - { - "type": "text", - "name": "b", - "label": "B" - }, - - { - "type": "formula", - "name": "b", - "value": 'some string', - "formula": "''", - "condition": '${radios}', - "initSet": false, - } - ] + type: 'text', + name: 'b', + label: 'B' }, - ] -} + + { + type: 'formula', + name: 'b', + value: 'some string', + formula: "''", + condition: '${radios}', + initSet: false + } + ] + } + ] +}; diff --git a/examples/components/Form/Full.jsx b/examples/components/Form/Full.jsx index 95cde50c..ca22c3f2 100644 --- a/examples/components/Form/Full.jsx +++ b/examples/components/Form/Full.jsx @@ -1,782 +1,758 @@ export default { - $schema: "https://houtai.baidu.com/v2/schemas/page.json#", - title: "所有 Form 元素列举", - data: { - id: 1, - }, - body: [ + $schema: 'https://houtai.baidu.com/v2/schemas/page.json#', + title: '所有 Form 元素列举', + data: { + id: 1 + }, + body: [ + { + type: 'form', + api: '/api/mock2/saveForm?waitSeconds=2', + title: '表单项', + mode: 'horizontal', + // debug: true, + autoFocus: true, + controls: [ { - type: "form", - api: "/api/mock2/saveForm?waitSeconds=2", - title: "表单项", - mode: "horizontal", - // debug: true, - autoFocus: true, - controls: [ - { - type: "html", - html: "

    html 片段, 可以用来添加说明性文字

    " - }, - { - type: "divider" - }, - { - type: "text", - name: "var1", - label: "文本" - }, - { - type: "divider" - }, - { - type: "text", - name: "withHelp", - label: "带提示信息", - desc: - "这是一段描述文字" - }, - { - type: "divider" - }, - { - type: "password", - name: "password", - label: "密码", - inline: true - }, - { - type: "divider" - }, - { - type: "number", - name: "number", - label: "数字", - placeholder: '', - inline: true, - value: 5, - min: 1, - max: 10 - }, - { - type: "divider" - }, - { - type: "tag", - name: "tag", - label: "标签", - placeholder: '', - clearable: true, - options: ["lixiaolong", "zhouxingxing", "yipingpei", "liyuanfang"] - }, - { - type: "divider" - }, - { - type: "text", - name: "placeholder", - label: "Placeholder", - placeholder: "Placeholder" - }, - { - type: "divider" - }, - { - type: "text", - disabled: true, - name: "disabled", - label: "禁用状态", - placeholder: "这里禁止输入内容" - }, - { - type: "divider" - }, - { - type: "text", - name: "text-sug", - label: "文本提示", - options: ["lixiaolong", "zhouxingxing", "yipingpei", "liyuanfang"], - addOn: { - type: "text", - label: "$" - }, - }, - { - type: "divider" - }, + type: 'html', + html: '

    html 片段, 可以用来添加说明性文字

    ' + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'var1', + label: '文本' + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'withHelp', + label: '带提示信息', + desc: '这是一段描述文字' + }, + { + type: 'divider' + }, + { + type: 'password', + name: 'password', + label: '密码', + inline: true + }, + { + type: 'divider' + }, + { + type: 'number', + name: 'number', + label: '数字', + placeholder: '', + inline: true, + value: 5, + min: 1, + max: 10 + }, + { + type: 'divider' + }, + { + type: 'tag', + name: 'tag', + label: '标签', + placeholder: '', + clearable: true, + options: ['lixiaolong', 'zhouxingxing', 'yipingpei', 'liyuanfang'] + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'placeholder', + label: 'Placeholder', + placeholder: 'Placeholder' + }, + { + type: 'divider' + }, + { + type: 'text', + disabled: true, + name: 'disabled', + label: '禁用状态', + placeholder: '这里禁止输入内容' + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'text-sug', + label: '文本提示', + options: ['lixiaolong', 'zhouxingxing', 'yipingpei', 'liyuanfang'], + addOn: { + type: 'text', + label: '$' + } + }, + { + type: 'divider' + }, - { - type: "text", - name: "text-sug-multiple", - label: "文本提示多选", - multiple: true, - options: ["lixiaolong", "zhouxingxing", "yipingpei", "liyuanfang"] - }, - { - type: "divider" - }, - { - type: "static", - name: "static", - labelClassName: 'text-muted', - label: "静态展示", - value: "这是静态展示的值" - }, - { - type: "divider" - }, - { - type: "static", - name: "static2", - label: "静态展示", - value: "这是静态展示的值", - copyable: { - content: 'blabla' - } - }, - { - type: "divider" - }, - { - type: "checkboxes", - name: "checkboxes", - label: "多选框", - options: [ - { - label: - "选项1", - value: 1 - }, - { - label: - "选项2", - value: 2 - }, - { - label: - "选项3", - disabled: true, - value: 3 - } - ] - }, - { - type: "divider" - }, - { - type: "checkboxes", - name: "checkboxesInline", - label: "多选内联", - inline: true, - options: [ - { - label: "选项 A", - value: 1 - }, - { - label: "选项 B", - value: 2 - }, - { - label: "选项 C", - value: 3 - } - ] - }, - { - type: "divider" - }, - { - type: "radios", - name: "radios", - label: "单选", - options: [ - { - label: - "选项1", - value: 1 - }, - { - label: - "选项2", - value: 2 - }, - { - label: - "选项3", - disabled: true, - value: 3 - } - ] - }, - { - type: "divider" - }, - { - type: "radios", - name: "radiosInline", - label: "单选内联", - inline: true, - options: [ - { - label: - "选项1", - value: 1 - }, - { - label: - "选项2", - value: 2 - }, - { - label: - "选项3", - value: 3 - } - ] - }, - { - type: "divider" - }, - { - type: "button-group", - name: "btn-group", - label: "按钮组", - description: '类似于单选效果', - options: [ - { - label: - "选项 A", - value: 1 - }, - { - label: - "选项 B", - value: 2 - }, - { - label: - "选项 C", - value: 3 - } - ] - }, - { - type: "divider" - }, - { - type: "button-group", - name: "btn-group2", - label: "按钮组", - clearable: true, - description: '可清除', - options: [ - { - label: - "选项 A", - value: 1 - }, - { - label: - "选项 B", - value: 2 - }, - { - label: - "选项 C", - value: 3 - } - ] - }, - { - type: "divider" - }, - { - type: "button-group", - name: "btn-group3", - label: "按钮组", - multiple: true, - options: [ - { - label: - "选项 A", - value: 1 - }, - { - label: - "选项 B", - value: 2 - }, - { - label: - "选项 C", - value: 3 - } - ], - desc: '可多选' - }, - { - type: "divider" - }, - { - type: "list", - name: "List", - label: "List", - desc: '也差不多，只是展示方式不一样', - options: [ - { - label: - "选项 A", - value: 1 - }, - { - label: - "选项 B", - value: 2 - }, - { - label: - "选项 C", - value: 3 - } - ] - }, - { - type: "divider" - }, - { - type: "list", - name: "list2", - label: "List", - desc: '可多选', - multiple: true, - options: [ - { - label: "选项 A", - value: 1 - }, - { - label: "选项 B", - value: 2 - }, - { - label: "选项 C", - value: 3 - } - ] - }, - // { - // type: "divider" - // }, - // { - // type: "list", - // name: "list3", - // label: "List", - // desc: "支持顶部显示提示信息", - // options: [ - // { - // label: "选项 A", - // value: 1, - // tip: '提示 A' - // }, - // { - // label: "选项 B", - // value: 2, - // tip: '提示 B' - // }, - // { - // label: "选项 C", - // value: 3, - // tip: '提示 C' - // } - // ] - // }, - { - type: "divider" - }, - { - type: "list", - name: "list4", - label: "List", - imageClassName: "thumb-lg", - desc: '支持放张图片', - options: [ - { - image: - "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg", - value: 1, - label: "图片1" - }, - { - image: - "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg", - value: 2, - label: "图片2" - }, - { - image: - "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg", - value: 3, - label: "图片3" - } - ] - }, - { - type: "divider" - }, - { - type: "list", - name: "list5", - label: "List", - desc: "支持文字排版", - options: [ - { - value: 1, - body: `
    + { + type: 'text', + name: 'text-sug-multiple', + label: '文本提示多选', + multiple: true, + options: ['lixiaolong', 'zhouxingxing', 'yipingpei', 'liyuanfang'] + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'static', + labelClassName: 'text-muted', + label: '静态展示', + value: '这是静态展示的值' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'static2', + label: '静态展示', + value: '这是静态展示的值', + copyable: { + content: 'blabla' + } + }, + { + type: 'divider' + }, + { + type: 'checkboxes', + name: 'checkboxes', + label: '多选框', + options: [ + { + label: '选项1', + value: 1 + }, + { + label: '选项2', + value: 2 + }, + { + label: '选项3', + disabled: true, + value: 3 + } + ] + }, + { + type: 'divider' + }, + { + type: 'checkboxes', + name: 'checkboxesInline', + label: '多选内联', + inline: true, + options: [ + { + label: '选项 A', + value: 1 + }, + { + label: '选项 B', + value: 2 + }, + { + label: '选项 C', + value: 3 + } + ] + }, + { + type: 'divider' + }, + { + type: 'radios', + name: 'radios', + label: '单选', + options: [ + { + label: '选项1', + value: 1 + }, + { + label: '选项2', + value: 2 + }, + { + label: '选项3', + disabled: true, + value: 3 + } + ] + }, + { + type: 'divider' + }, + { + type: 'radios', + name: 'radiosInline', + label: '单选内联', + inline: true, + options: [ + { + label: '选项1', + value: 1 + }, + { + label: '选项2', + value: 2 + }, + { + label: '选项3', + value: 3 + } + ] + }, + { + type: 'divider' + }, + { + type: 'button-group', + name: 'btn-group', + label: '按钮组', + description: '类似于单选效果', + options: [ + { + label: '选项 A', + value: 1 + }, + { + label: '选项 B', + value: 2 + }, + { + label: '选项 C', + value: 3 + } + ] + }, + { + type: 'divider' + }, + { + type: 'button-group', + name: 'btn-group2', + label: '按钮组', + clearable: true, + description: '可清除', + options: [ + { + label: '选项 A', + value: 1 + }, + { + label: '选项 B', + value: 2 + }, + { + label: '选项 C', + value: 3 + } + ] + }, + { + type: 'divider' + }, + { + type: 'button-group', + name: 'btn-group3', + label: '按钮组', + multiple: true, + options: [ + { + label: '选项 A', + value: 1 + }, + { + label: '选项 B', + value: 2 + }, + { + label: '选项 C', + value: 3 + } + ], + desc: '可多选' + }, + { + type: 'divider' + }, + { + type: 'list', + name: 'List', + label: 'List', + desc: '也差不多，只是展示方式不一样', + options: [ + { + label: '选项 A', + value: 1 + }, + { + label: '选项 B', + value: 2 + }, + { + label: '选项 C', + value: 3 + } + ] + }, + { + type: 'divider' + }, + { + type: 'list', + name: 'list2', + label: 'List', + desc: '可多选', + multiple: true, + options: [ + { + label: '选项 A', + value: 1 + }, + { + label: '选项 B', + value: 2 + }, + { + label: '选项 C', + value: 3 + } + ] + }, + // { + // type: "divider" + // }, + // { + // type: "list", + // name: "list3", + // label: "List", + // desc: "支持顶部显示提示信息", + // options: [ + // { + // label: "选项 A", + // value: 1, + // tip: '提示 A' + // }, + // { + // label: "选项 B", + // value: 2, + // tip: '提示 B' + // }, + // { + // label: "选项 C", + // value: 3, + // tip: '提示 C' + // } + // ] + // }, + { + type: 'divider' + }, + { + type: 'list', + name: 'list4', + label: 'List', + imageClassName: 'thumb-lg', + desc: '支持放张图片', + options: [ + { + image: + 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg', + value: 1, + label: '图片1' + }, + { + image: + 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg', + value: 2, + label: '图片2' + }, + { + image: + 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg', + value: 3, + label: '图片3' + } + ] + }, + { + type: 'divider' + }, + { + type: 'list', + name: 'list5', + label: 'List', + desc: '支持文字排版', + options: [ + { + value: 1, + body: `
    套餐：C01
    CPU：22核
    内存：10GB
    SSD盘：1024GB
    ` - }, - { - value: 2, - body: `
    + }, + { + value: 2, + body: `
    套餐：C02
    CPU：23核
    内存：11GB
    SSD盘：1025GB
    ` - }, - { - value: 3, - disabled: true, - body: `
    + }, + { + value: 3, + disabled: true, + body: `
    套餐：C03
    CPU：24核
    内存：12GB
    SSD盘：1026GB
    ` - } - ] + } + ] + }, + { + type: 'divider' + }, + { + type: 'rating', + count: 5, + value: 3, + label: '评分', + name: 'rating', + readOnly: false, + half: false + }, + { + type: 'divider' + }, + { + type: 'switch', + name: 'switch', + label: '开关' + }, + { + type: 'divider' + }, + { + type: 'checkbox', + name: 'checkbox', + label: '勾选框', + option: '' + }, + { + type: 'divider' + }, + { + type: 'select', + name: 'type', + label: '单选', + inline: true, + options: [ + { + label: '选项1', + value: 1 + }, + { + label: '选项2', + value: 2 + } + ] + }, + { + type: 'divider' + }, + { + type: 'select', + name: 'type2', + label: '多选', + multiple: true, + inline: true, + options: [ + { + label: '选项1', + value: 1 + }, + { + label: '选项2', + value: 2 + } + ] + }, + { + type: 'divider' + }, + { + type: 'color', + name: 'color', + inline: true, + label: 'Color' + }, + { + type: 'divider' + }, + { + type: 'date', + name: 'date', + inline: true, + label: '日期' + }, + { + type: 'divider' + }, + { + type: 'datetime', + name: 'datetime', + inline: true, + label: '日期+时间' + }, + { + type: 'divider' + }, + { + type: 'time', + name: 'time', + inline: true, + label: '时间' + }, + { + type: 'divider' + }, + { + type: 'date-range', + name: 'daterangee', + inline: true, + label: '时间范围' + }, + { + type: 'divider' + }, + [ + { + type: 'datetime', + name: 'starttime', + label: '开始时间', + maxDate: '${endtime}' + }, + { + type: 'datetime', + name: 'endtime', + label: '结束时间', + minDate: '${starttime}' + } + ], + { + type: 'divider' + }, + { + type: 'group', + label: '时间范围', + required: '', + gap: 'xs', + description: '选择自定义后，可以选择日期范围', + controls: [ + { + type: 'button-group', + name: 'range1', + value: 'today', + // btnActiveClassName: "btn-primary active", + btnActiveLevel: 'primary', + mode: 'inline', + options: [ + { + label: '今天', + value: 'today' }, { - type: "divider" + label: '昨天', + value: 'yesterday' }, { - "type": "rating", - "count": 5, - "value": 3, - "label": "评分", - "name": "rating", - "readOnly": false, - "half": false + label: '近三天', + value: '3days' }, { - type: "divider" + label: '近一周', + value: 'week' }, { - type: "switch", - name: "switch", - label: "开关" - }, - { - type: "divider" - }, - { - type: "checkbox", - name: "checkbox", - label: "勾选框", - option: '' - }, - { - type: "divider" - }, - { - type: "select", - name: "type", - label: "单选", - inline: true, - options: [ - { - label: "选项1", - value: 1 - }, - { - label: "选项2", - value: 2 - } - ] - }, - { - type: "divider" - }, - { - type: "select", - name: "type2", - label: "多选", - multiple: true, - inline: true, - options: [ - { - label: "选项1", - value: 1 - }, - { - label: "选项2", - value: 2 - } - ] - }, - { - type: "divider" - }, - { - type: "color", - name: "color", - inline: true, - label: "Color" - }, - { - type: "divider" - }, - { - type: "date", - name: "date", - inline: true, - label: "日期" - }, - { - type: "divider" - }, - { - type: "datetime", - name: "datetime", - inline: true, - label: "日期+时间" - }, - { - type: "divider" - }, - { - type: "time", - name: "time", - inline: true, - label: "时间" - }, - { - type: "divider" - }, - { - type: "date-range", - name: "daterangee", - inline: true, - label: "时间范围" - }, - { - type: "divider" - }, - [ - { - type: "datetime", - name: "starttime", - label: "开始时间", - maxDate: "${endtime}" - }, - { - type: "datetime", - name: "endtime", - label: "结束时间", - minDate: "${starttime}" - } - ], - { - type: "divider" - }, - { - type: "group", - label: "时间范围", - required: "", - gap: 'xs', - description: '选择自定义后，可以选择日期范围', - controls: [ - { - type: "button-group", - name: "range1", - value: "today", - // btnActiveClassName: "btn-primary active", - btnActiveLevel: 'primary', - mode: 'inline', - options: [ - { - label: "今天", - value: "today" - }, - { - label: "昨天", - value: "yesterday" - }, - { - label: "近三天", - value: "3days" - }, - { - label: "近一周", - value: "week" - }, - { - label: "自定义", - value: "custom" - } - ] - }, - { - type: "date", - name: "starttime1", - maxDate: "${endtime1}", - visibleOn: "data.range1 == 'custom'", - mode: "inline" - }, - { - type: "date", - name: "endtime1", - minDate: "${starttime1}", - visibleOn: "data.range1 == 'custom'", - mode: "inline" - } - ] - }, + label: '自定义', + value: 'custom' + } + ] + }, + { + type: 'date', + name: 'starttime1', + maxDate: '${endtime1}', + visibleOn: "data.range1 == 'custom'", + mode: 'inline' + }, + { + type: 'date', + name: 'endtime1', + minDate: '${starttime1}', + visibleOn: "data.range1 == 'custom'", + mode: 'inline' + } + ] + }, - { - type: "divider" - }, + { + type: 'divider' + }, - { - "type": "input-group", - "size": "sm", - inline: true, - "label": "Icon 组合", - "controls": [ - { - "type": "icon", - "addOnclassName": "no-bg", - className: "text-sm", - "icon": "search", - // "vendor": "iconfont" - }, - { - "type": "text", - "placeholder": "搜索作业ID/名称", - "inputClassName": "b-l-none p-l-none", - "name": "jobName" - } - ] - }, + { + type: 'input-group', + size: 'sm', + inline: true, + label: 'Icon 组合', + controls: [ + { + type: 'icon', + addOnclassName: 'no-bg', + className: 'text-sm', + icon: 'search' + // "vendor": "iconfont" + }, + { + type: 'text', + placeholder: '搜索作业ID/名称', + inputClassName: 'b-l-none p-l-none', + name: 'jobName' + } + ] + }, - { - type: "divider" - }, + { + type: 'divider' + }, + { + type: 'input-group', + label: '各种组合', + inline: true, + controls: [ + { + type: 'select', + name: 'memoryUnits', + options: [ { - "type": "input-group", - "label": "各种组合", - inline: true, - "controls": [ - { - "type": "select", - "name": "memoryUnits", - "options": [ - { - "label": "Gi", - "value": "Gi" - }, - { - "label": "Mi", - "value": "Mi" - }, - { - "label": "Ki", - "value": "Ki" - } - ], - "value": "Gi" - }, - { - "type": "text", - "name": "memory" - }, - { - "type": "select", - "name": "memoryUnits2", - "options": [ - { - "label": "Gi", - "value": "Gi" - }, - { - "label": "Mi", - "value": "Mi" - }, - { - "label": "Ki", - "value": "Ki" - } - ], - "value": "Gi" - }, - { - type: "button", - label: "Go" - } - - ] + label: 'Gi', + value: 'Gi' }, { - type: "divider" + label: 'Mi', + value: 'Mi' }, { - type: "image", - name: "image", - label: "图片" + label: 'Ki', + value: 'Ki' + } + ], + value: 'Gi' + }, + { + type: 'text', + name: 'memory' + }, + { + type: 'select', + name: 'memoryUnits2', + options: [ + { + label: 'Gi', + value: 'Gi' }, { - type: "divider" + label: 'Mi', + value: 'Mi' }, { - type: "image", - name: "imageCrop", - label: "图片带裁剪", - crop: { - aspectRatio: 1.7777777777777777 - } - }, - { - type: "divider" - }, - { - type: "image", - name: "imageLimit", - label: "图片带限制", - limit: { - width: 200, - height: 200 - } - }, - { - type: "divider" - }, - { - type: "textarea", - name: "textarea", - label: "多行文本" - }, - { - type: "divider" - }, - { - type: "json-editor", - name: "json", - value: - `{ + label: 'Ki', + value: 'Ki' + } + ], + value: 'Gi' + }, + { + type: 'button', + label: 'Go' + } + ] + }, + { + type: 'divider' + }, + { + type: 'image', + name: 'image', + label: '图片' + }, + { + type: 'divider' + }, + { + type: 'image', + name: 'imageCrop', + label: '图片带裁剪', + crop: { + aspectRatio: 1.7777777777777777 + } + }, + { + type: 'divider' + }, + { + type: 'image', + name: 'imageLimit', + label: '图片带限制', + limit: { + width: 200, + height: 200 + } + }, + { + type: 'divider' + }, + { + type: 'textarea', + name: 'textarea', + label: '多行文本' + }, + { + type: 'divider' + }, + { + type: 'json-editor', + name: 'json', + value: `{ "a": 1, "b": [ 1, @@ -784,405 +760,405 @@ export default { 3 ] }`, - label: "Json Editor" + label: 'Json Editor' + }, + { + type: 'divider' + }, + { + type: 'rich-text', + name: 'html', + label: 'Rich Text', + value: `

    Just do IT!

    ` + }, + { + type: 'divider' + }, + { + type: 'repeat', + name: 'repeat', + label: '时间频率' + }, + { + type: 'divider' + }, + { + type: 'tree', + name: 'tree', + label: '树', + options: [ + { + label: 'Folder A', + value: 1, + children: [ + { + label: 'file A', + value: 2 }, { - type: "divider" - }, - { - type: "rich-text", - name: "html", - label: "Rich Text", - value: `

    Just do IT!

    ` - }, - { - type: "divider" - }, - { - type: "repeat", - name: "repeat", - label: "时间频率" - }, - { - type: "divider" - }, - { - type: "tree", - name: "tree", - label: "树", - options: [ - { - label: "Folder A", - value: 1, - children: [ - { - label: "file A", - value: 2 - }, - { - label: "file B", - value: 3 - } - ] - }, - { - label: "file C", - value: 4 - }, - { - label: "file D", - value: 5 - } - ] - }, - { - type: "divider" - }, - { - type: "tree", - name: "trees", - label: "树多选", - multiple: true, - options: [ - { - label: "Folder A", - value: 1, - children: [ - { - label: "file A", - value: 2 - }, - { - label: "file B", - value: 3 - } - ] - }, - { - label: "file C", - value: 4 - }, - { - label: "file D", - value: 5 - } - ] - }, - { - type: "divider" - }, - { - type: "tree-select", - name: "selecttree", - label: "树选择器", - options: [ - { - label: "Folder A", - value: 1, - children: [ - { - label: "file A", - value: 2 - }, - { - label: "file B", - value: 3 - } - ] - }, - { - label: "file C", - value: 4 - }, - { - label: "file D", - value: 5 - } - ] - }, - { - type: "divider" - }, - { - type: "tree-select", - name: "selecttrees", - label: "树多选选择器", - multiple: true, - options: [ - { - label: "Folder A", - value: 1, - children: [ - { - label: "file A", - value: 2 - }, - { - label: "file B", - value: 3 - } - ] - }, - { - label: "file C", - value: 4 - }, - { - label: "file D", - value: 5 - } - ] - }, - { - type: 'nested-select', - name: 'nestedSelect', - label: '级联选择器', - size: 'sm', - options: [ - { - label: 'A', - value: 'a' - }, - { - label: 'B', - value: 'b', - children: [ - { - label: 'B-1', - value: 'b-1' - }, - { - label: 'B-2', - value: 'b-2' - }, - { - label: 'B-3', - value: 'b-3' - }, - ] - }, - { - label: 'C', - value: 'c' - }, - ] - }, - { - type: 'nested-select', - name: 'nestedSelectMul', - label: '级联选择器多选', - size: 'sm', - multiple: true, - options: [ - { - label: 'A', - value: 'a' - }, - { - label: 'B', - value: 'b', - children: [ - { - label: 'B-1', - value: 'b-1' - }, - { - label: 'B-2', - value: 'b-2' - }, - { - label: 'B-3', - value: 'b-3' - }, - ] - }, - { - label: 'C', - value: 'c' - }, - ] - }, - { - type: "divider" - }, - { - type: "city", - name: "city", - label: "城市选择器" - }, - { - type: "divider" - }, - { - type: "matrix", - name: "matrix", - label: "矩阵开关", - rowLabel: "行标题说明", - columns: [ - { - label: "列1" - }, - { - label: "列2" - } - ], - rows: [ - { - label: "行1" - }, - { - label: "行2" - } - ] - }, - { - type: "divider" - }, - { - type: "combo", - name: "combo", - label: "组合单条", - controls: [ - { - name: "a", - type: "text", - placeholder: "A" - }, - { - name: "b", - type: "select", - options: ["a", "b", "c"] - } - ] - }, - { - type: "divider" - }, - { - type: "combo", - name: "combo2", - label: "组合多条", - multiple: true, - value: [{}], - controls: [ - { - name: "a", - type: "text", - placeholder: "A" - }, - { - name: "b", - type: "select", - options: ["a", "b", "c"] - } - ] - }, - { - type: "divider" - }, - { - type: "form", - label: "子表单", - name: "subForm", - btnLabel: "点击设置", - form: { - title: "子表单", - controls: [ - { - name: "a", - type: "text", - label: "Foo" - }, - { - name: "b", - type: "switch", - label: "Boo" - } - ] - } - }, - { - type: "divider" - }, - { - type: "form", - label: "子表单多条", - name: "subForm2", - btnLabel: "点击设置", - labelField: 'a', - multiple: true, - form: { - title: "子表单", - controls: [ - { - name: "a", - type: "text", - label: "Foo" - }, - { - name: "b", - type: "switch", - label: "Boo" - } - ] - } - }, - { - type: "divider" - }, - { - type: "file", - name: "file", - label: "文件上传", - joinValues: false - }, - { - type: "divider" - }, - { - type: "range", - name: "range", - label: "范围" - }, - { - type: "divider" - }, - { - type: "button-toolbar", - buttons: [ - { - type: "submit", - label: "登录" - }, - { - type: "reset", - label: "重置" - }, - { - type: "button", - label: "导出", - href: "http://www.baidu.com", - level: "success" - } - ] + label: 'file B', + value: 3 } - ], - actions: [ + ] + }, + { + label: 'file C', + value: 4 + }, + { + label: 'file D', + value: 5 + } + ] + }, + { + type: 'divider' + }, + { + type: 'tree', + name: 'trees', + label: '树多选', + multiple: true, + options: [ + { + label: 'Folder A', + value: 1, + children: [ { - type: "submit", - label: "登录" + label: 'file A', + value: 2 }, { - type: "reset", - label: "重置" - }, - { - type: "button", - label: "导出", - href: "http://www.baidu.com", - level: "success" + label: 'file B', + value: 3 } + ] + }, + { + label: 'file C', + value: 4 + }, + { + label: 'file D', + value: 5 + } + ] + }, + { + type: 'divider' + }, + { + type: 'tree-select', + name: 'selecttree', + label: '树选择器', + options: [ + { + label: 'Folder A', + value: 1, + children: [ + { + label: 'file A', + value: 2 + }, + { + label: 'file B', + value: 3 + } + ] + }, + { + label: 'file C', + value: 4 + }, + { + label: 'file D', + value: 5 + } + ] + }, + { + type: 'divider' + }, + { + type: 'tree-select', + name: 'selecttrees', + label: '树多选选择器', + multiple: true, + options: [ + { + label: 'Folder A', + value: 1, + children: [ + { + label: 'file A', + value: 2 + }, + { + label: 'file B', + value: 3 + } + ] + }, + { + label: 'file C', + value: 4 + }, + { + label: 'file D', + value: 5 + } + ] + }, + { + type: 'nested-select', + name: 'nestedSelect', + label: '级联选择器', + size: 'sm', + options: [ + { + label: 'A', + value: 'a' + }, + { + label: 'B', + value: 'b', + children: [ + { + label: 'B-1', + value: 'b-1' + }, + { + label: 'B-2', + value: 'b-2' + }, + { + label: 'B-3', + value: 'b-3' + } + ] + }, + { + label: 'C', + value: 'c' + } + ] + }, + { + type: 'nested-select', + name: 'nestedSelectMul', + label: '级联选择器多选', + size: 'sm', + multiple: true, + options: [ + { + label: 'A', + value: 'a' + }, + { + label: 'B', + value: 'b', + children: [ + { + label: 'B-1', + value: 'b-1' + }, + { + label: 'B-2', + value: 'b-2' + }, + { + label: 'B-3', + value: 'b-3' + } + ] + }, + { + label: 'C', + value: 'c' + } + ] + }, + { + type: 'divider' + }, + { + type: 'city', + name: 'city', + label: '城市选择器' + }, + { + type: 'divider' + }, + { + type: 'matrix', + name: 'matrix', + label: '矩阵开关', + rowLabel: '行标题说明', + columns: [ + { + label: '列1' + }, + { + label: '列2' + } + ], + rows: [ + { + label: '行1' + }, + { + label: '行2' + } + ] + }, + { + type: 'divider' + }, + { + type: 'combo', + name: 'combo', + label: '组合单条', + controls: [ + { + name: 'a', + type: 'text', + placeholder: 'A' + }, + { + name: 'b', + type: 'select', + options: ['a', 'b', 'c'] + } + ] + }, + { + type: 'divider' + }, + { + type: 'combo', + name: 'combo2', + label: '组合多条', + multiple: true, + value: [{}], + controls: [ + { + name: 'a', + type: 'text', + placeholder: 'A' + }, + { + name: 'b', + type: 'select', + options: ['a', 'b', 'c'] + } + ] + }, + { + type: 'divider' + }, + { + type: 'form', + label: '子表单', + name: 'subForm', + btnLabel: '点击设置', + form: { + title: '子表单', + controls: [ + { + name: 'a', + type: 'text', + label: 'Foo' + }, + { + name: 'b', + type: 'switch', + label: 'Boo' + } ] + } + }, + { + type: 'divider' + }, + { + type: 'form', + label: '子表单多条', + name: 'subForm2', + btnLabel: '点击设置', + labelField: 'a', + multiple: true, + form: { + title: '子表单', + controls: [ + { + name: 'a', + type: 'text', + label: 'Foo' + }, + { + name: 'b', + type: 'switch', + label: 'Boo' + } + ] + } + }, + { + type: 'divider' + }, + { + type: 'file', + name: 'file', + label: '文件上传', + joinValues: false + }, + { + type: 'divider' + }, + { + type: 'range', + name: 'range', + label: '范围' + }, + { + type: 'divider' + }, + { + type: 'button-toolbar', + buttons: [ + { + type: 'submit', + label: '登录' + }, + { + type: 'reset', + label: '重置' + }, + { + type: 'button', + label: '导出', + href: 'http://www.baidu.com', + level: 'success' + } + ] } - ] + ], + actions: [ + { + type: 'submit', + label: '登录' + }, + { + type: 'reset', + label: '重置' + }, + { + type: 'button', + label: '导出', + href: 'http://www.baidu.com', + level: 'success' + } + ] + } + ] }; diff --git a/examples/components/Form/Hint.jsx b/examples/components/Form/Hint.jsx index 384030d1..56778718 100644 --- a/examples/components/Form/Hint.jsx +++ b/examples/components/Form/Hint.jsx @@ -1,96 +1,92 @@ export default { - $schema: "https://houtai.baidu.com/v2/schemas/page.json#", - title: "其他类型演示", - body: [ + $schema: 'https://houtai.baidu.com/v2/schemas/page.json#', + title: '其他类型演示', + body: [ + { + type: 'form', + api: '/api/mock2/saveForm?waitSeconds=2', + title: 'Hint demo', + mode: 'horizontal', + horizontal: { + leftFixed: true + }, + controls: [ { - type: "form", - api: "/api/mock2/saveForm?waitSeconds=2", - title: "Hint demo", - mode: "horizontal", - horizontal: { - leftFixed: true + name: 'button', + type: 'button', + label: 'ID', + value: '', + size: 'xs', + hint: '比如输入 a-xxxx-xxx' + }, + + { + type: 'input-group', + size: 'md', + label: 'Icon 组合', + controls: [ + { + type: 'icon', + addOnclassName: 'no-bg', + className: 'text-sm', + icon: 'search', + vendor: 'iconfont' }, - controls: [ - { - name: "button", - type: "button", - label: "ID", - value: "", - size: 'xs', - hint: '比如输入 a-xxxx-xxx' - }, + { + type: 'text', + placeholder: '搜索作业ID/名称', + inputClassName: 'b-l-none p-l-none', + name: 'jobName' + } + ] + }, - { - "type": "input-group", - "size": "md", - "label": "Icon 组合", - "controls": [ - { - "type": "icon", - "addOnclassName": "no-bg", - className: "text-sm", - "icon": "search", - "vendor": "iconfont" - }, - { - "type": "text", - "placeholder": "搜索作业ID/名称", - "inputClassName": "b-l-none p-l-none", - "name": "jobName" - } - ] - }, + { + name: 'a', + type: 'text', + label: 'ID', + value: '', + size: 'xs', + hint: '比如输入 a-xxxx-xxx' + }, - { - name: "a", - type: "text", - label: "ID", - value: "", - size: 'xs', - hint: '比如输入 a-xxxx-xxx' - }, + { + name: 'b', + type: 'text', + label: 'ID', + value: '', + size: 'sm', + hint: '比如输入 a-xxxx-xxx' + }, - { - name: "b", - type: "text", - label: "ID", - value: "", - size: 'sm', - hint: '比如输入 a-xxxx-xxx' - }, + { + name: 'c', + type: 'text', + label: 'ID', + value: '', + size: 'md', + hint: '比如输入 a-xxxx-xxx' + }, - { - name: "c", - type: "text", - label: "ID", - value: "", - size: 'md', - hint: '比如输入 a-xxxx-xxx' - }, + { + name: 'd', + type: 'text', + label: 'ID', + value: '', + size: 'lg', + hint: '比如输入 a-xxxx-xxx' + }, - { - name: "d", - type: "text", - label: "ID", - value: "", - size: 'lg', - hint: '比如输入 a-xxxx-xxx' - }, - - - { - name: "tag", - type: "tag", - label: "Tag", - size: 'md', - clearable: true, - placeholder: "多个标签以逗号分隔", - options: [ - "周小度", - "杜小度" - ] - } - ] + { + name: 'tag', + type: 'tag', + label: 'Tag', + size: 'md', + clearable: true, + placeholder: '多个标签以逗号分隔', + options: ['周小度', '杜小度'] } - ] + ] + } + ] }; diff --git a/examples/components/Form/Mode.jsx b/examples/components/Form/Mode.jsx index aae28a44..fab73311 100644 --- a/examples/components/Form/Mode.jsx +++ b/examples/components/Form/Mode.jsx @@ -1,561 +1,559 @@ export default { - $schema: "https://houtai.baidu.com/v2/schemas/page.json#", - title: "表单各种展示模式汇总", - remark: "展示各种模式的 Form", - body: [ + $schema: 'https://houtai.baidu.com/v2/schemas/page.json#', + title: '表单各种展示模式汇总', + remark: '展示各种模式的 Form', + body: [ + { + type: 'grid', + columns: [ { - type: "grid", - columns: [ - { - type: "form", - api: "/api/mock2/form/saveForm?waitSeconds=2", - title: "常规模式", - mode: "normal", - controls: [ - { - type: "email", - name: "email", - required: true, - placeholder: "请输入邮箱", - label: "邮箱", - size: 'full' - }, - { - type: "password", - name: "password", - label: "密码", - required: true, - placeholder: "请输入密码", - size: 'full' - }, - { - type: "checkbox", - name: "rememberMe", - label: "记住登录" - }, - { - type: "submit", - btnClassName: "btn-default", - label: "登录" - } - ] - }, - { - type: "form", - api: "/api/mock2/form/saveForm?waitSeconds=2", - title: "常规模式 input md 尺寸", - mode: "normal", - controls: [ - { - type: "email", - name: "email", - required: true, - placeholder: "请输入邮箱", - label: "邮箱", - size: 'md', - remark: 'xxxx', - hint: 'bla bla bla' - }, - { - type: "password", - name: "password", - label: "密码", - required: true, - placeholder: "请输入密码", - size: 'md' - }, - { - type: "checkbox", - name: "rememberMe", - label: "记住登录" - }, - { - type: "submit", - btnClassName: "btn-default", - label: "登录" - } - ] - } - ] - }, - - { - type: "grid", - columns: [ - { - type: "form", - api: "/api/mock2/form/saveForm?waitSeconds=2", - title: "水平模式，左右摆放 左右比率分配 ", - mode: "horizontal", - autoFocus: false, - horizontal: { - left: 'col-sm-2', - right: 'col-sm-10', - offset: 'col-sm-offset-2' - }, - controls: [ - { - type: "email", - name: "email", - placeholder: "请输入邮箱地址", - label: "邮箱", - required: true, - desc: "表单描述文字", - - }, - { - type: "password", - name: "password", - label: "密码", - placeholder: "输入密码", - - }, - { - type: "checkbox", - name: "rememberMe", - label: "记住登录" - } - ] - }, - { - type: "form", - api: "/api/mock2/form/saveForm?waitSeconds=2", - title: "水平模式，左右摆放 左侧固定宽度 input md 尺寸", - mode: "horizontal", - autoFocus: false, - horizontal: { - leftFixed: 'xs' - }, - controls: [ - { - type: "email", - name: "email", - placeholder: "请输入邮箱地址", - label: "邮箱", - required: true, - desc: "表单描述文字", - size: 'md', - remark: 'xxxx', - hint: 'bla bla bla' - }, - { - type: "password", - name: "password", - label: "密码", - placeholder: "输入密码", - size: 'md' - }, - { - type: "checkbox", - name: "rememberMe", - label: "记住登录" - } - ] - } - ] + type: 'form', + api: '/api/mock2/form/saveForm?waitSeconds=2', + title: '常规模式', + mode: 'normal', + controls: [ + { + type: 'email', + name: 'email', + required: true, + placeholder: '请输入邮箱', + label: '邮箱', + size: 'full' + }, + { + type: 'password', + name: 'password', + label: '密码', + required: true, + placeholder: '请输入密码', + size: 'full' + }, + { + type: 'checkbox', + name: 'rememberMe', + label: '记住登录' + }, + { + type: 'submit', + btnClassName: 'btn-default', + label: '登录' + } + ] }, { - type: "form", - api: "/api/mock2/form/saveForm?waitSeconds=2", - title: "内联模式", - mode: "inline", - autoFocus: false, - controls: [ - { - type: "email", - name: "email", - placeholder: "Enter Email", - label: "邮箱", - size: 'auto' - }, - { - type: "password", - name: "password", - placeholder: "密码", - size: 'auto', - remark: 'Bla bla bla' - }, - { - type: "checkbox", - name: "rememberMe", - label: "记住登录", - size: 'auto' - }, - { - type: "submit", - label: "登录" - }, - { - type: "button", - label: "导出", - url: "http://www.baidu.com/", - level: "success" - } - ] - }, - { - type: "form", - api: "/api/mock2/form/saveForm?waitSeconds=2", - title: "常规模式下用数组包起来还能控制一行显示多个", - mode: "normal", - autoFocus: false, - controls: [ - { - type: "text", - name: "name", - placeholder: "请输入...", - label: "名字", - size: 'full' - }, - { - type: "divider" - }, - { - type: 'group', - controls: [ - { - type: "email", - name: "email", - placeholder: "输入邮箱", - label: "邮箱", - size: 'full' - }, - { - type: "password", - name: "password", - label: "密码", - placeholder: "请输入密码", - size: 'full' - } - ] - }, - { - type: "divider" - }, - { - type: 'group', - controls: [ - { - type: "email", - name: "email2", - mode: 'inline', - placeholder: "请输入邮箱地址", - label: "邮箱", - size: 'full' - }, - { - type: "password", - name: "password2", - label: "密码", - mode: 'inline', - placeholder: "请输入密码", - size: 'full' - } - ] - }, - { - type: "divider" - }, - { - type: 'group', - controls: [ - { - type: "email", - name: "email3", - mode: 'inline', - placeholder: "请输入邮箱地址", - label: "邮箱", - size: 'full' - }, - { - type: "password", - name: "password3", - label: "密码", - placeholder: "请输入密码", - size: 'full' - } - ] - }, - { - type: "divider" - }, - { - type: 'group', - controls: [ - { - type: "email", - name: "email4", - placeholder: "请输入邮箱地址", - label: "邮箱", - size: 'full' - }, - { - type: "password", - name: "password4", - label: "密码", - placeholder: "请输入密码", - mode: 'inline', - size: 'full' - } - ] - }, - { - type: "divider" - }, - { - type: "checkbox", - name: "rememberMe", - label: "记住我" - }, - { - type: "submit", - btnClassName: "btn-default", - label: "提交" - } - ] - }, - { - type: "form", - api: "/api/mock2/form/saveForm?waitSeconds=2", - title: "水平模式用数组包起来也能控制一行显示多个", - mode: "horizontal", - autoFocus: false, - controls: [ - { - type: "email", - name: "email", - placeholder: "请输入邮箱地址", - label: "邮箱", - size: 'full' - }, - { - type: "divider" - }, - { - type: 'group', - controls: [ - { - type: "email", - name: "email2", - placeholder: "请输入邮箱地址", - label: "邮箱", - size: 'full' - }, - { - type: "password", - name: "password2", - label: "密码", - placeholder: "请输入密码", - size: 'full' - } - ] - }, - - { - type: "divider" - }, - { - type: 'group', - controls: [ - { - type: "email", - name: "email3", - placeholder: "请输入邮箱地址", - label: "邮箱", - size: 'full' - }, - { - type: "password", - name: "password3", - label: "密码", - placeholder: "请输入密码", - size: 'full' - }, - { - type: "password", - name: "password3", - label: "密码", - placeholder: "请输入密码", - size: 'full' - } - ] - }, - { - type: "divider" - }, - { - type: 'group', - controls: [ - { - type: "email", - name: "email4", - placeholder: "请输入邮箱地址", - label: "邮箱", - size: 'full', - columnClassName: 'col-sm-6', - horizontal: { - left: 'col-sm-4', - right: 'col-sm-8' - } - }, - { - type: "password", - name: "password4", - label: "密码", - placeholder: "请输入密码", - mode: 'inline', - size: 'full' - } - ] - }, - { - type: "divider" - }, - { - type: 'group', - label: "邮箱", - gap: 'xs', - controls: [ - { - label: false, - type: "email", - name: "email5", - placeholder: "请输入邮箱地址", - size: 'full' - }, - { - type: "password", - name: "password5", - label: "密码", - placeholder: "请输入密码", - mode: 'inline', - size: 'full' - } - ] - }, - { - type: "divider" - }, - { - type: 'group', - label: "邮箱", - description: 'bla bla', - gap: 'xs', - controls: [ - { - type: "email", - name: "email6", - placeholder: "请输入邮箱地址", - mode: 'inline' - }, - { - type: "password", - name: "password6", - // label: "密码", - placeholder: "请输入密码", - labelClassName: "w-auto p-r-none", - mode: 'inline' - } - ] - }, - { - type: "divider" - }, - { - type: 'group', - label: "邮箱", - description: 'bla bla', - direction: "vertical", - controls: [ - { - type: "email", - name: "email9", - mode: 'normal', - placeholder: "请输入邮箱地址", - inline: true, - description: 'Bla blamfejkf fdjk', - }, - { - type: "password", - name: "password9", - mode: 'normal', - placeholder: "请输入密码", - labelClassName: "w-auto p-r-none", - } - ] - }, - { - type: "divider" - }, - { - type: "checkbox", - name: "rememberMe", - label: "记住我" - }, - { - type: "submit", - btnClassName: "btn-default", - label: "Submit" - } - ] - }, - { - type: "form", - api: "/api/mock2/form/saveForm?waitSeconds=2", - title: "Inline form 用数组包起来还能控制一行显示多个", - mode: "inline", - submitText: null, - autoFocus: false, - controls: [ - [ - { - type: "email", - name: "email", - placeholder: "Enter Email", - label: "邮箱", - size: 'full' - }, - { - type: "password", - name: "password", - placeholder: "Password", - size: 'full' - } - ], - { - type: "divider" - }, - [ - { - type: "email", - name: "email", - placeholder: "Enter Email", - label: "邮箱", - size: 'full' - }, - { - type: "checkbox", - name: "rememberMe", - label: "记住我", - size: 'full' - }, - { - type: 'button-toolbar', - buttons: [ - { - type: "submit", - label: "登录" - }, - { - type: "button", - label: "导出", - url: "http://www.baidu.com/", - level: "success" - } - ] - } - ] - ] + type: 'form', + api: '/api/mock2/form/saveForm?waitSeconds=2', + title: '常规模式 input md 尺寸', + mode: 'normal', + controls: [ + { + type: 'email', + name: 'email', + required: true, + placeholder: '请输入邮箱', + label: '邮箱', + size: 'md', + remark: 'xxxx', + hint: 'bla bla bla' + }, + { + type: 'password', + name: 'password', + label: '密码', + required: true, + placeholder: '请输入密码', + size: 'md' + }, + { + type: 'checkbox', + name: 'rememberMe', + label: '记住登录' + }, + { + type: 'submit', + btnClassName: 'btn-default', + label: '登录' + } + ] } - ] + ] + }, + + { + type: 'grid', + columns: [ + { + type: 'form', + api: '/api/mock2/form/saveForm?waitSeconds=2', + title: '水平模式，左右摆放 左右比率分配 ', + mode: 'horizontal', + autoFocus: false, + horizontal: { + left: 'col-sm-2', + right: 'col-sm-10', + offset: 'col-sm-offset-2' + }, + controls: [ + { + type: 'email', + name: 'email', + placeholder: '请输入邮箱地址', + label: '邮箱', + required: true, + desc: '表单描述文字' + }, + { + type: 'password', + name: 'password', + label: '密码', + placeholder: '输入密码' + }, + { + type: 'checkbox', + name: 'rememberMe', + label: '记住登录' + } + ] + }, + { + type: 'form', + api: '/api/mock2/form/saveForm?waitSeconds=2', + title: '水平模式，左右摆放 左侧固定宽度 input md 尺寸', + mode: 'horizontal', + autoFocus: false, + horizontal: { + leftFixed: 'xs' + }, + controls: [ + { + type: 'email', + name: 'email', + placeholder: '请输入邮箱地址', + label: '邮箱', + required: true, + desc: '表单描述文字', + size: 'md', + remark: 'xxxx', + hint: 'bla bla bla' + }, + { + type: 'password', + name: 'password', + label: '密码', + placeholder: '输入密码', + size: 'md' + }, + { + type: 'checkbox', + name: 'rememberMe', + label: '记住登录' + } + ] + } + ] + }, + { + type: 'form', + api: '/api/mock2/form/saveForm?waitSeconds=2', + title: '内联模式', + mode: 'inline', + autoFocus: false, + controls: [ + { + type: 'email', + name: 'email', + placeholder: 'Enter Email', + label: '邮箱', + size: 'auto' + }, + { + type: 'password', + name: 'password', + placeholder: '密码', + size: 'auto', + remark: 'Bla bla bla' + }, + { + type: 'checkbox', + name: 'rememberMe', + label: '记住登录', + size: 'auto' + }, + { + type: 'submit', + label: '登录' + }, + { + type: 'button', + label: '导出', + url: 'http://www.baidu.com/', + level: 'success' + } + ] + }, + { + type: 'form', + api: '/api/mock2/form/saveForm?waitSeconds=2', + title: '常规模式下用数组包起来还能控制一行显示多个', + mode: 'normal', + autoFocus: false, + controls: [ + { + type: 'text', + name: 'name', + placeholder: '请输入...', + label: '名字', + size: 'full' + }, + { + type: 'divider' + }, + { + type: 'group', + controls: [ + { + type: 'email', + name: 'email', + placeholder: '输入邮箱', + label: '邮箱', + size: 'full' + }, + { + type: 'password', + name: 'password', + label: '密码', + placeholder: '请输入密码', + size: 'full' + } + ] + }, + { + type: 'divider' + }, + { + type: 'group', + controls: [ + { + type: 'email', + name: 'email2', + mode: 'inline', + placeholder: '请输入邮箱地址', + label: '邮箱', + size: 'full' + }, + { + type: 'password', + name: 'password2', + label: '密码', + mode: 'inline', + placeholder: '请输入密码', + size: 'full' + } + ] + }, + { + type: 'divider' + }, + { + type: 'group', + controls: [ + { + type: 'email', + name: 'email3', + mode: 'inline', + placeholder: '请输入邮箱地址', + label: '邮箱', + size: 'full' + }, + { + type: 'password', + name: 'password3', + label: '密码', + placeholder: '请输入密码', + size: 'full' + } + ] + }, + { + type: 'divider' + }, + { + type: 'group', + controls: [ + { + type: 'email', + name: 'email4', + placeholder: '请输入邮箱地址', + label: '邮箱', + size: 'full' + }, + { + type: 'password', + name: 'password4', + label: '密码', + placeholder: '请输入密码', + mode: 'inline', + size: 'full' + } + ] + }, + { + type: 'divider' + }, + { + type: 'checkbox', + name: 'rememberMe', + label: '记住我' + }, + { + type: 'submit', + btnClassName: 'btn-default', + label: '提交' + } + ] + }, + { + type: 'form', + api: '/api/mock2/form/saveForm?waitSeconds=2', + title: '水平模式用数组包起来也能控制一行显示多个', + mode: 'horizontal', + autoFocus: false, + controls: [ + { + type: 'email', + name: 'email', + placeholder: '请输入邮箱地址', + label: '邮箱', + size: 'full' + }, + { + type: 'divider' + }, + { + type: 'group', + controls: [ + { + type: 'email', + name: 'email2', + placeholder: '请输入邮箱地址', + label: '邮箱', + size: 'full' + }, + { + type: 'password', + name: 'password2', + label: '密码', + placeholder: '请输入密码', + size: 'full' + } + ] + }, + + { + type: 'divider' + }, + { + type: 'group', + controls: [ + { + type: 'email', + name: 'email3', + placeholder: '请输入邮箱地址', + label: '邮箱', + size: 'full' + }, + { + type: 'password', + name: 'password3', + label: '密码', + placeholder: '请输入密码', + size: 'full' + }, + { + type: 'password', + name: 'password3', + label: '密码', + placeholder: '请输入密码', + size: 'full' + } + ] + }, + { + type: 'divider' + }, + { + type: 'group', + controls: [ + { + type: 'email', + name: 'email4', + placeholder: '请输入邮箱地址', + label: '邮箱', + size: 'full', + columnClassName: 'col-sm-6', + horizontal: { + left: 'col-sm-4', + right: 'col-sm-8' + } + }, + { + type: 'password', + name: 'password4', + label: '密码', + placeholder: '请输入密码', + mode: 'inline', + size: 'full' + } + ] + }, + { + type: 'divider' + }, + { + type: 'group', + label: '邮箱', + gap: 'xs', + controls: [ + { + label: false, + type: 'email', + name: 'email5', + placeholder: '请输入邮箱地址', + size: 'full' + }, + { + type: 'password', + name: 'password5', + label: '密码', + placeholder: '请输入密码', + mode: 'inline', + size: 'full' + } + ] + }, + { + type: 'divider' + }, + { + type: 'group', + label: '邮箱', + description: 'bla bla', + gap: 'xs', + controls: [ + { + type: 'email', + name: 'email6', + placeholder: '请输入邮箱地址', + mode: 'inline' + }, + { + type: 'password', + name: 'password6', + // label: "密码", + placeholder: '请输入密码', + labelClassName: 'w-auto p-r-none', + mode: 'inline' + } + ] + }, + { + type: 'divider' + }, + { + type: 'group', + label: '邮箱', + description: 'bla bla', + direction: 'vertical', + controls: [ + { + type: 'email', + name: 'email9', + mode: 'normal', + placeholder: '请输入邮箱地址', + inline: true, + description: 'Bla blamfejkf fdjk' + }, + { + type: 'password', + name: 'password9', + mode: 'normal', + placeholder: '请输入密码', + labelClassName: 'w-auto p-r-none' + } + ] + }, + { + type: 'divider' + }, + { + type: 'checkbox', + name: 'rememberMe', + label: '记住我' + }, + { + type: 'submit', + btnClassName: 'btn-default', + label: 'Submit' + } + ] + }, + { + type: 'form', + api: '/api/mock2/form/saveForm?waitSeconds=2', + title: 'Inline form 用数组包起来还能控制一行显示多个', + mode: 'inline', + submitText: null, + autoFocus: false, + controls: [ + [ + { + type: 'email', + name: 'email', + placeholder: 'Enter Email', + label: '邮箱', + size: 'full' + }, + { + type: 'password', + name: 'password', + placeholder: 'Password', + size: 'full' + } + ], + { + type: 'divider' + }, + [ + { + type: 'email', + name: 'email', + placeholder: 'Enter Email', + label: '邮箱', + size: 'full' + }, + { + type: 'checkbox', + name: 'rememberMe', + label: '记住我', + size: 'full' + }, + { + type: 'button-toolbar', + buttons: [ + { + type: 'submit', + label: '登录' + }, + { + type: 'button', + label: '导出', + url: 'http://www.baidu.com/', + level: 'success' + } + ] + } + ] + ] + } + ] }; diff --git a/examples/components/Form/Picker.jsx b/examples/components/Form/Picker.jsx index ab57573c..38d03f93 100644 --- a/examples/components/Form/Picker.jsx +++ b/examples/components/Form/Picker.jsx @@ -1,1302 +1,1281 @@ export default { - $schema: "https://houtai.baidu.com/v2/schemas/page.json#", - title: "表格编辑", - body: { - type: "form", - mode: "horizontal", - api: "/api/mock2/form/saveForm?waitSeconds=2", - actions: [ - { - type: "submit", - label: "提交", - primary: true - } - ], - controls: [ - '

    常规模式

    ', - { - type: 'divider' - }, - { - type: "picker", - name: "type", - label: "单选", - value: 1, - inline: true, - options: [ - { - label: "选项1", - value: 1 - }, - { - label: "选项2", - value: 2 - }, - { - label: "选项3", - value: 3 - }, - { - label: "选项4", - value: 4 - } - ] - }, - - { - type: "picker", - name: "type2", - label: "多选", - multiple: true, - options: [ - { - label: "选项1", - value: 1 - }, - { - label: "选项2", - value: 2 - }, - { - label: "选项3", - value: 3 - }, - { - label: "选项4", - value: 4 - } - ] - }, - - { - type: 'divider' - }, - - '

    Table 渲染类型

    ', - { - type: 'divider' - }, - - { - type: "picker", - name: "type3", - joinValues: true, - valueField: 'id', - labelField: 'engine', - label: "单选", - source: '/api/sample', - size: 'lg', - value: '4', - pickerSchema: { - mode: 'table', - name: 'thelist', - quickSaveApi: "/api/sample/bulkUpdate", - quickSaveItemApi: "/api/sample/$id", - draggable: true, - headerToolbar: { - wrapWithPanel: false, - type: 'form', - className: 'text-right', - target: 'thelist', - mode: 'inline', - controls: [ - { - type: 'text', - name: 'keywords', - addOn: { - type: 'submit', - label: '搜索', - level: 'primary', - icon: 'fa fa-search pull-left' - } - } - ] - }, - columns: [ - { - "name": "engine", - "label": "Rendering engine", - "sortable": true, - "searchable": true, - "type": "text", - "toggled": true - }, - { - "name": "browser", - "label": "Browser", - "sortable": true, - "type": "text", - "toggled": true - }, { - "name": "platform", - "label": "Platform(s)", - "sortable": true, - "type": "text", - "toggled": true - }, - { - "name": "version", - "label": "Engine version", - "quickEdit": true, - "type": "text", - "toggled": true - }, - { - "name": "grade", - "label": "CSS grade", - "quickEdit": { - "mode": "inline", - "type": "select", - "options": [ - "A", - "B", - "C", - "D", - "X" - ], - "saveImmediately": true - }, - "type": "text", - "toggled": true - }, - { - "type": "operation", - "label": "操作", - "width": 100, - "buttons": [ - { - "type": "button", - "icon": "fa fa-eye", - "actionType": "dialog", - "dialog": { - "title": "查看", - "body": { - "type": "form", - "controls": [ - { - "type": "static", - "name": "engine", - "label": "Engine" - }, - { - "type": "divider" - }, - { - "type": "static", - "name": "browser", - "label": "Browser" - }, - { - "type": "divider" - }, - { - "type": "static", - "name": "platform", - "label": "Platform(s)" - }, - { - "type": "divider" - }, - { - "type": "static", - "name": "version", - "label": "Engine version" - }, - { - "type": "divider" - }, - { - "type": "static", - "name": "grade", - "label": "CSS grade" - }, - { - "type": "divider" - }, - { - "type": "html", - "html": "

    添加其他 Html 片段 需要支持变量替换（todo）.

    " - } - ] - } - } - }, - { - "type": "button", - "icon": "fa fa-pencil", - "actionType": "dialog", - "dialog": { - "position": "left", - "size": "lg", - "title": "编辑", - "body": { - "type": "form", - "name": "sample-edit-form", - "api": "/api/sample/$id", - "controls": [ - { - "type": "text", - "name": "engine", - "label": "Engine", - "required": true - }, - { - "type": "divider" - }, - { - "type": "text", - "name": "browser", - "label": "Browser", - "required": true - }, - { - "type": "divider" - }, - { - "type": "text", - "name": "platform", - "label": "Platform(s)", - "required": true - }, - { - "type": "divider" - }, - { - "type": "text", - "name": "version", - "label": "Engine version" - }, - { - "type": "divider" - }, - { - "type": "select", - "name": "grade", - "label": "CSS grade", - "options": [ - "A", - "B", - "C", - "D", - "X" - ] - } - ] - } - } - }, - { - "type": "button", - "icon": "fa fa-times text-danger", - "actionType": "ajax", - "confirmText": "您确认要删除?", - "api": "delete:/api/sample/$id" - } - ], - "toggled": true - } - ] - } - }, - - { - type: "picker", - name: "type4", - joinValues: true, - valueField: 'id', - labelField: 'engine', - label: "多选", - source: '/api/sample', - size: 'lg', - value: '4,5', - multiple: true, - pickerSchema: { - mode: 'table', - name: 'thelist', - quickSaveApi: "/api/sample/bulkUpdate", - quickSaveItemApi: "/api/sample/$id", - draggable: true, - headerToolbar: { - wrapWithPanel: false, - type: 'form', - className: 'text-right', - target: 'thelist', - mode: 'inline', - controls: [ - { - type: 'text', - name: 'keywords', - addOn: { - type: 'submit', - label: '搜索', - level: 'primary', - icon: 'fa fa-search pull-left' - } - } - ] - }, - columns: [ - { - "name": "engine", - "label": "Rendering engine", - "sortable": true, - "searchable": true, - "type": "text", - "toggled": true - }, - { - "name": "browser", - "label": "Browser", - "sortable": true, - "type": "text", - "toggled": true - }, { - "name": "platform", - "label": "Platform(s)", - "sortable": true, - "type": "text", - "toggled": true - }, - { - "name": "version", - "label": "Engine version", - "quickEdit": true, - "type": "text", - "toggled": true - }, - { - "name": "grade", - "label": "CSS grade", - "quickEdit": { - "mode": "inline", - "type": "select", - "options": [ - "A", - "B", - "C", - "D", - "X" - ], - "saveImmediately": true - }, - "type": "text", - "toggled": true - }, - { - "type": "operation", - "label": "操作", - "width": 100, - "buttons": [ - { - "type": "button", - "icon": "fa fa-eye", - "actionType": "dialog", - "dialog": { - "title": "查看", - "body": { - "type": "form", - "controls": [ - { - "type": "static", - "name": "engine", - "label": "Engine" - }, - { - "type": "divider" - }, - { - "type": "static", - "name": "browser", - "label": "Browser" - }, - { - "type": "divider" - }, - { - "type": "static", - "name": "platform", - "label": "Platform(s)" - }, - { - "type": "divider" - }, - { - "type": "static", - "name": "version", - "label": "Engine version" - }, - { - "type": "divider" - }, - { - "type": "static", - "name": "grade", - "label": "CSS grade" - }, - { - "type": "divider" - }, - { - "type": "html", - "html": "

    添加其他 Html 片段 需要支持变量替换（todo）.

    " - } - ] - } - } - }, - { - "type": "button", - "icon": "fa fa-pencil", - "actionType": "dialog", - "dialog": { - "position": "left", - "size": "lg", - "title": "编辑", - "body": { - "type": "form", - "name": "sample-edit-form", - "api": "/api/sample/$id", - "controls": [ - { - "type": "text", - "name": "engine", - "label": "Engine", - "required": true - }, - { - "type": "divider" - }, - { - "type": "text", - "name": "browser", - "label": "Browser", - "required": true - }, - { - "type": "divider" - }, - { - "type": "text", - "name": "platform", - "label": "Platform(s)", - "required": true - }, - { - "type": "divider" - }, - { - "type": "text", - "name": "version", - "label": "Engine version" - }, - { - "type": "divider" - }, - { - "type": "select", - "name": "grade", - "label": "CSS grade", - "options": [ - "A", - "B", - "C", - "D", - "X" - ] - } - ] - } - } - }, - { - "type": "button", - "icon": "fa fa-times text-danger", - "actionType": "ajax", - "confirmText": "您确认要删除?", - "api": "delete:/api/sample/$id" - } - ], - "toggled": true - } - ] - } - }, - - { - type: 'divider' - }, - - '

    List 渲染类型

    ', - { - type: 'divider' - }, - - { - type: "picker", - name: "type5", - joinValues: true, - valueField: 'id', - labelField: 'engine', - label: "单选", - source: '/api/sample', - size: 'lg', - value: '4', - pickerSchema: { - mode: 'list', - name: 'thelist', - quickSaveApi: "/api/sample/bulkUpdate", - quickSaveItemApi: "/api/sample/$id", - draggable: true, - headerToolbar: { - wrapWithPanel: false, - type: 'form', - className: 'text-right', - target: 'thelist', - mode: 'inline', - controls: [ - { - type: 'text', - name: 'keywords', - addOn: { - type: 'submit', - label: '搜索', - level: 'primary', - icon: 'fa fa-search pull-left' - } - } - ] - }, - listItem: { - actions: [ - { - type: "button", - icon: "fa fa-eye", - actionType: "dialog", - dialog: { - title: "查看", - body: { - type: "form", - controls: [ - { - type: "static", - name: "engine", - label: "Engine" - }, - { - type: "divider" - }, - { - type: "static", - name: "browser", - label: "Browser" - }, - { - type: "divider" - }, - { - type: "static", - name: "platform", - label: "Platform(s)" - }, - { - type: "divider" - }, - { - type: "static", - name: "version", - label: "Engine version" - }, - { - type: "divider" - }, - { - type: "static", - name: "grade", - label: "CSS grade" - }, - { - type: "divider" - }, - { - type: "html", - html: - "

    添加其他 Html 片段 需要支持变量替换（todo）.

    " - } - ] - } - } - }, - { - type: "button", - icon: "fa fa-pencil", - actionType: "dialog", - dialog: { - title: "编辑", - body: { - type: "form", - name: "sample-edit-form", - api: "/api/sample/$id", - controls: [ - { - type: "text", - name: "engine", - label: "Engine", - required: true - }, - { - type: "divider" - }, - { - type: "text", - name: "browser", - label: "Browser", - required: true - }, - { - type: "divider" - }, - { - type: "text", - name: "platform", - label: "Platform(s)", - required: true - }, - { - type: "divider" - }, - { - type: "text", - name: "version", - label: "Engine version" - }, - { - type: "divider" - }, - { - type: "text", - name: "grade", - label: "CSS grade" - } - ] - } - } - }, - { - type: "button", - icon: "fa fa-times text-danger", - actionType: "ajax", - confirmText: "您确认要删除?", - api: "delete:/api/sample/$id" - } - ], - body: [ - { - name: "engine", - label: "Rendering engine", - sortable: true, - quickEdit: true, - labelClassName: "w-sm" - }, - [ - { - name: "browser", - label: "Browser", - labelClassName: "w-sm" - }, - { - name: "platform", - label: "Platform(s)", - labelClassName: "w-sm" - } - ], - { - name: "version", - label: "Engine version", - labelClassName: "w-sm" - } - ] - } - } - }, - { - type: "picker", - name: "type6", - joinValues: true, - valueField: 'id', - labelField: 'engine', - label: "多选", - source: '/api/sample', - size: 'lg', - value: '4,5', - multiple: true, - pickerSchema: { - mode: 'list', - name: 'thelist', - quickSaveApi: "/api/sample/bulkUpdate", - quickSaveItemApi: "/api/sample/$id", - draggable: true, - headerToolbar: { - wrapWithPanel: false, - type: 'form', - className: 'text-right', - target: 'thelist', - mode: 'inline', - controls: [ - { - type: 'text', - name: 'keywords', - addOn: { - type: 'submit', - label: '搜索', - level: 'primary', - icon: 'fa fa-search pull-left' - } - } - ] - }, - listItem: { - actions: [ - { - type: "button", - icon: "fa fa-eye", - actionType: "dialog", - dialog: { - title: "查看", - body: { - type: "form", - controls: [ - { - type: "static", - name: "engine", - label: "Engine" - }, - { - type: "divider" - }, - { - type: "static", - name: "browser", - label: "Browser" - }, - { - type: "divider" - }, - { - type: "static", - name: "platform", - label: "Platform(s)" - }, - { - type: "divider" - }, - { - type: "static", - name: "version", - label: "Engine version" - }, - { - type: "divider" - }, - { - type: "static", - name: "grade", - label: "CSS grade" - }, - { - type: "divider" - }, - { - type: "html", - html: - "

    添加其他 Html 片段 需要支持变量替换（todo）.

    " - } - ] - } - } - }, - { - type: "button", - icon: "fa fa-pencil", - actionType: "dialog", - dialog: { - title: "编辑", - body: { - type: "form", - name: "sample-edit-form", - api: "/api/sample/$id", - controls: [ - { - type: "text", - name: "engine", - label: "Engine", - required: true - }, - { - type: "divider" - }, - { - type: "text", - name: "browser", - label: "Browser", - required: true - }, - { - type: "divider" - }, - { - type: "text", - name: "platform", - label: "Platform(s)", - required: true - }, - { - type: "divider" - }, - { - type: "text", - name: "version", - label: "Engine version" - }, - { - type: "divider" - }, - { - type: "text", - name: "grade", - label: "CSS grade" - } - ] - } - } - }, - { - type: "button", - icon: "fa fa-times text-danger", - actionType: "ajax", - confirmText: "您确认要删除?", - api: "delete:/api/sample/$id" - } - ], - body: [ - { - name: "engine", - label: "Rendering engine", - sortable: true, - quickEdit: true, - labelClassName: "w-sm" - }, - [ - { - name: "browser", - label: "Browser", - labelClassName: "w-sm" - }, - { - name: "platform", - label: "Platform(s)", - labelClassName: "w-sm" - } - ], - { - name: "version", - label: "Engine version", - labelClassName: "w-sm" - } - ] - } - } - }, - - { - type: 'divider' - }, - - - '

    Cards 渲染类型

    ', - { - type: 'divider' - }, - - { - type: "picker", - name: "type7", - joinValues: true, - valueField: 'id', - labelField: 'engine', - label: "单选", - source: '/api/sample', - size: 'lg', - value: '4', - pickerSchema: { - mode: 'cards', - name: 'thelist', - quickSaveApi: "/api/sample/bulkUpdate", - quickSaveItemApi: "/api/sample/$id", - draggable: true, - headerToolbar: { - wrapWithPanel: false, - type: 'form', - className: 'text-right', - target: 'thelist', - mode: 'inline', - controls: [ - { - type: 'text', - name: 'keywords', - addOn: { - type: 'submit', - label: '搜索', - level: 'primary', - icon: 'fa fa-search pull-left' - } - } - ] - }, - card: { - header: { - title: "$engine", - subTitle: "$platform", - subTitlePlaceholder: "暂无说明", - avatar: - '<%= data.avatar || "http://bos.nj.bpc.baidu.com/showx/146bc2ce1b30f3824838f4208ad2663c" %>', - avatarClassName: "pull-left thumb b-3x m-r" - }, - actions: [ - { - type: "button", - label: "查看", - actionType: "dialog", - dialog: { - title: "查看", - body: { - type: "form", - controls: [ - { - type: "static", - name: "engine", - label: "Engine" - }, - { - type: "divider" - }, - { - type: "static", - name: "browser", - label: "Browser" - }, - { - type: "divider" - }, - { - type: "static", - name: "platform", - label: "Platform(s)" - }, - { - type: "divider" - }, - { - type: "static", - name: "version", - label: "Engine version" - }, - { - type: "divider" - }, - { - type: "static", - name: "grade", - label: "CSS grade" - }, - { - type: "divider" - }, - { - type: "html", - html: - "

    添加其他 Html 片段 需要支持变量替换（todo）.

    " - } - ] - } - } - }, - { - type: "button", - label: "编辑", - actionType: "dialog", - dialog: { - title: "编辑", - body: { - type: "form", - name: "sample-edit-form", - api: "/api/sample/$id", - controls: [ - { - type: "text", - name: "engine", - label: "Engine", - required: true - }, - { - type: "divider" - }, - { - type: "text", - name: "browser", - label: "Browser", - required: true - }, - { - type: "divider" - }, - { - type: "text", - name: "platform", - label: "Platform(s)", - required: true - }, - { - type: "divider" - }, - { - type: "text", - name: "version", - label: "Engine version" - }, - { - type: "divider" - }, - { - type: "text", - name: "grade", - label: "CSS grade" - } - ] - } - } - }, - { - type: "button", - label: "删除", - actionType: "ajax", - confirmText: "您确认要删除?", - api: "delete:/api/sample/$id" - } - ], - body: [ - { - name: "engine", - label: "engine", - sortable: true, - quickEdit: true - }, - { - name: "browser", - label: "Browser" - }, - { - name: "platform", - label: "Platform" - }, - { - name: "version", - label: "version" - } - ] - } - } - }, - - { - type: "picker", - name: "type8", - joinValues: true, - valueField: 'id', - labelField: 'engine', - label: "多选", - source: '/api/sample', - size: 'lg', - value: '4,5', - multiple: true, - pickerSchema: { - mode: 'cards', - name: 'thelist', - quickSaveApi: "/api/sample/bulkUpdate", - quickSaveItemApi: "/api/sample/$id", - draggable: true, - headerToolbar: { - wrapWithPanel: false, - type: 'form', - className: 'text-right', - target: 'thelist', - mode: 'inline', - controls: [ - { - type: 'text', - name: 'keywords', - addOn: { - type: 'submit', - label: '搜索', - level: 'primary', - icon: 'fa fa-search pull-left' - } - } - ] - }, - card: { - header: { - title: "$engine", - subTitle: "$platform", - subTitlePlaceholder: "暂无说明", - avatar: - '<%= data.avatar || "http://bos.nj.bpc.baidu.com/showx/146bc2ce1b30f3824838f4208ad2663c" %>', - avatarClassName: "pull-left thumb b-3x m-r" - }, - actions: [ - { - type: "button", - label: "查看", - actionType: "dialog", - dialog: { - title: "查看", - body: { - type: "form", - controls: [ - { - type: "static", - name: "engine", - label: "Engine" - }, - { - type: "divider" - }, - { - type: "static", - name: "browser", - label: "Browser" - }, - { - type: "divider" - }, - { - type: "static", - name: "platform", - label: "Platform(s)" - }, - { - type: "divider" - }, - { - type: "static", - name: "version", - label: "Engine version" - }, - { - type: "divider" - }, - { - type: "static", - name: "grade", - label: "CSS grade" - }, - { - type: "divider" - }, - { - type: "html", - html: - "

    添加其他 Html 片段 需要支持变量替换（todo）.

    " - } - ] - } - } - }, - { - type: "button", - label: "编辑", - actionType: "dialog", - dialog: { - title: "编辑", - body: { - type: "form", - name: "sample-edit-form", - api: "/api/sample/$id", - controls: [ - { - type: "text", - name: "engine", - label: "Engine", - required: true - }, - { - type: "divider" - }, - { - type: "text", - name: "browser", - label: "Browser", - required: true - }, - { - type: "divider" - }, - { - type: "text", - name: "platform", - label: "Platform(s)", - required: true - }, - { - type: "divider" - }, - { - type: "text", - name: "version", - label: "Engine version" - }, - { - type: "divider" - }, - { - type: "text", - name: "grade", - label: "CSS grade" - } - ] - } - } - }, - { - type: "button", - label: "删除", - actionType: "ajax", - confirmText: "您确认要删除?", - api: "delete:/api/sample/$id" - } - ], - body: [ - { - name: "engine", - label: "engine", - sortable: true, - quickEdit: true - }, - { - name: "browser", - label: "Browser" - }, - { - name: "platform", - label: "Platform" - }, - { - name: "version", - label: "version" - } - ] - } - } - }, + $schema: 'https://houtai.baidu.com/v2/schemas/page.json#', + title: '表格编辑', + body: { + type: 'form', + mode: 'horizontal', + api: '/api/mock2/form/saveForm?waitSeconds=2', + actions: [ + { + type: 'submit', + label: '提交', + primary: true + } + ], + controls: [ + '

    常规模式

    ', + { + type: 'divider' + }, + { + type: 'picker', + name: 'type', + label: '单选', + value: 1, + inline: true, + options: [ + { + label: '选项1', + value: 1 + }, + { + label: '选项2', + value: 2 + }, + { + label: '选项3', + value: 3 + }, + { + label: '选项4', + value: 4 + } ] - } + }, + + { + type: 'picker', + name: 'type2', + label: '多选', + multiple: true, + options: [ + { + label: '选项1', + value: 1 + }, + { + label: '选项2', + value: 2 + }, + { + label: '选项3', + value: 3 + }, + { + label: '选项4', + value: 4 + } + ] + }, + + { + type: 'divider' + }, + + '

    Table 渲染类型

    ', + { + type: 'divider' + }, + + { + type: 'picker', + name: 'type3', + joinValues: true, + valueField: 'id', + labelField: 'engine', + label: '单选', + source: '/api/sample', + size: 'lg', + value: '4', + pickerSchema: { + mode: 'table', + name: 'thelist', + quickSaveApi: '/api/sample/bulkUpdate', + quickSaveItemApi: '/api/sample/$id', + draggable: true, + headerToolbar: { + wrapWithPanel: false, + type: 'form', + className: 'text-right', + target: 'thelist', + mode: 'inline', + controls: [ + { + type: 'text', + name: 'keywords', + addOn: { + type: 'submit', + label: '搜索', + level: 'primary', + icon: 'fa fa-search pull-left' + } + } + ] + }, + columns: [ + { + name: 'engine', + label: 'Rendering engine', + sortable: true, + searchable: true, + type: 'text', + toggled: true + }, + { + name: 'browser', + label: 'Browser', + sortable: true, + type: 'text', + toggled: true + }, + { + name: 'platform', + label: 'Platform(s)', + sortable: true, + type: 'text', + toggled: true + }, + { + name: 'version', + label: 'Engine version', + quickEdit: true, + type: 'text', + toggled: true + }, + { + name: 'grade', + label: 'CSS grade', + quickEdit: { + mode: 'inline', + type: 'select', + options: ['A', 'B', 'C', 'D', 'X'], + saveImmediately: true + }, + type: 'text', + toggled: true + }, + { + type: 'operation', + label: '操作', + width: 100, + buttons: [ + { + type: 'button', + icon: 'fa fa-eye', + actionType: 'dialog', + dialog: { + title: '查看', + body: { + type: 'form', + controls: [ + { + type: 'static', + name: 'engine', + label: 'Engine' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'browser', + label: 'Browser' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'platform', + label: 'Platform(s)' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'version', + label: 'Engine version' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'grade', + label: 'CSS grade' + }, + { + type: 'divider' + }, + { + type: 'html', + html: + '

    添加其他 Html 片段 需要支持变量替换（todo）.

    ' + } + ] + } + } + }, + { + type: 'button', + icon: 'fa fa-pencil', + actionType: 'dialog', + dialog: { + position: 'left', + size: 'lg', + title: '编辑', + body: { + type: 'form', + name: 'sample-edit-form', + api: '/api/sample/$id', + controls: [ + { + type: 'text', + name: 'engine', + label: 'Engine', + required: true + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'browser', + label: 'Browser', + required: true + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'platform', + label: 'Platform(s)', + required: true + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'version', + label: 'Engine version' + }, + { + type: 'divider' + }, + { + type: 'select', + name: 'grade', + label: 'CSS grade', + options: ['A', 'B', 'C', 'D', 'X'] + } + ] + } + } + }, + { + type: 'button', + icon: 'fa fa-times text-danger', + actionType: 'ajax', + confirmText: '您确认要删除?', + api: 'delete:/api/sample/$id' + } + ], + toggled: true + } + ] + } + }, + + { + type: 'picker', + name: 'type4', + joinValues: true, + valueField: 'id', + labelField: 'engine', + label: '多选', + source: '/api/sample', + size: 'lg', + value: '4,5', + multiple: true, + pickerSchema: { + mode: 'table', + name: 'thelist', + quickSaveApi: '/api/sample/bulkUpdate', + quickSaveItemApi: '/api/sample/$id', + draggable: true, + headerToolbar: { + wrapWithPanel: false, + type: 'form', + className: 'text-right', + target: 'thelist', + mode: 'inline', + controls: [ + { + type: 'text', + name: 'keywords', + addOn: { + type: 'submit', + label: '搜索', + level: 'primary', + icon: 'fa fa-search pull-left' + } + } + ] + }, + columns: [ + { + name: 'engine', + label: 'Rendering engine', + sortable: true, + searchable: true, + type: 'text', + toggled: true + }, + { + name: 'browser', + label: 'Browser', + sortable: true, + type: 'text', + toggled: true + }, + { + name: 'platform', + label: 'Platform(s)', + sortable: true, + type: 'text', + toggled: true + }, + { + name: 'version', + label: 'Engine version', + quickEdit: true, + type: 'text', + toggled: true + }, + { + name: 'grade', + label: 'CSS grade', + quickEdit: { + mode: 'inline', + type: 'select', + options: ['A', 'B', 'C', 'D', 'X'], + saveImmediately: true + }, + type: 'text', + toggled: true + }, + { + type: 'operation', + label: '操作', + width: 100, + buttons: [ + { + type: 'button', + icon: 'fa fa-eye', + actionType: 'dialog', + dialog: { + title: '查看', + body: { + type: 'form', + controls: [ + { + type: 'static', + name: 'engine', + label: 'Engine' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'browser', + label: 'Browser' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'platform', + label: 'Platform(s)' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'version', + label: 'Engine version' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'grade', + label: 'CSS grade' + }, + { + type: 'divider' + }, + { + type: 'html', + html: + '

    添加其他 Html 片段 需要支持变量替换（todo）.

    ' + } + ] + } + } + }, + { + type: 'button', + icon: 'fa fa-pencil', + actionType: 'dialog', + dialog: { + position: 'left', + size: 'lg', + title: '编辑', + body: { + type: 'form', + name: 'sample-edit-form', + api: '/api/sample/$id', + controls: [ + { + type: 'text', + name: 'engine', + label: 'Engine', + required: true + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'browser', + label: 'Browser', + required: true + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'platform', + label: 'Platform(s)', + required: true + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'version', + label: 'Engine version' + }, + { + type: 'divider' + }, + { + type: 'select', + name: 'grade', + label: 'CSS grade', + options: ['A', 'B', 'C', 'D', 'X'] + } + ] + } + } + }, + { + type: 'button', + icon: 'fa fa-times text-danger', + actionType: 'ajax', + confirmText: '您确认要删除?', + api: 'delete:/api/sample/$id' + } + ], + toggled: true + } + ] + } + }, + + { + type: 'divider' + }, + + '

    List 渲染类型

    ', + { + type: 'divider' + }, + + { + type: 'picker', + name: 'type5', + joinValues: true, + valueField: 'id', + labelField: 'engine', + label: '单选', + source: '/api/sample', + size: 'lg', + value: '4', + pickerSchema: { + mode: 'list', + name: 'thelist', + quickSaveApi: '/api/sample/bulkUpdate', + quickSaveItemApi: '/api/sample/$id', + draggable: true, + headerToolbar: { + wrapWithPanel: false, + type: 'form', + className: 'text-right', + target: 'thelist', + mode: 'inline', + controls: [ + { + type: 'text', + name: 'keywords', + addOn: { + type: 'submit', + label: '搜索', + level: 'primary', + icon: 'fa fa-search pull-left' + } + } + ] + }, + listItem: { + actions: [ + { + type: 'button', + icon: 'fa fa-eye', + actionType: 'dialog', + dialog: { + title: '查看', + body: { + type: 'form', + controls: [ + { + type: 'static', + name: 'engine', + label: 'Engine' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'browser', + label: 'Browser' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'platform', + label: 'Platform(s)' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'version', + label: 'Engine version' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'grade', + label: 'CSS grade' + }, + { + type: 'divider' + }, + { + type: 'html', + html: + '

    添加其他 Html 片段 需要支持变量替换（todo）.

    ' + } + ] + } + } + }, + { + type: 'button', + icon: 'fa fa-pencil', + actionType: 'dialog', + dialog: { + title: '编辑', + body: { + type: 'form', + name: 'sample-edit-form', + api: '/api/sample/$id', + controls: [ + { + type: 'text', + name: 'engine', + label: 'Engine', + required: true + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'browser', + label: 'Browser', + required: true + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'platform', + label: 'Platform(s)', + required: true + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'version', + label: 'Engine version' + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'grade', + label: 'CSS grade' + } + ] + } + } + }, + { + type: 'button', + icon: 'fa fa-times text-danger', + actionType: 'ajax', + confirmText: '您确认要删除?', + api: 'delete:/api/sample/$id' + } + ], + body: [ + { + name: 'engine', + label: 'Rendering engine', + sortable: true, + quickEdit: true, + labelClassName: 'w-sm' + }, + [ + { + name: 'browser', + label: 'Browser', + labelClassName: 'w-sm' + }, + { + name: 'platform', + label: 'Platform(s)', + labelClassName: 'w-sm' + } + ], + { + name: 'version', + label: 'Engine version', + labelClassName: 'w-sm' + } + ] + } + } + }, + { + type: 'picker', + name: 'type6', + joinValues: true, + valueField: 'id', + labelField: 'engine', + label: '多选', + source: '/api/sample', + size: 'lg', + value: '4,5', + multiple: true, + pickerSchema: { + mode: 'list', + name: 'thelist', + quickSaveApi: '/api/sample/bulkUpdate', + quickSaveItemApi: '/api/sample/$id', + draggable: true, + headerToolbar: { + wrapWithPanel: false, + type: 'form', + className: 'text-right', + target: 'thelist', + mode: 'inline', + controls: [ + { + type: 'text', + name: 'keywords', + addOn: { + type: 'submit', + label: '搜索', + level: 'primary', + icon: 'fa fa-search pull-left' + } + } + ] + }, + listItem: { + actions: [ + { + type: 'button', + icon: 'fa fa-eye', + actionType: 'dialog', + dialog: { + title: '查看', + body: { + type: 'form', + controls: [ + { + type: 'static', + name: 'engine', + label: 'Engine' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'browser', + label: 'Browser' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'platform', + label: 'Platform(s)' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'version', + label: 'Engine version' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'grade', + label: 'CSS grade' + }, + { + type: 'divider' + }, + { + type: 'html', + html: + '

    添加其他 Html 片段 需要支持变量替换（todo）.

    ' + } + ] + } + } + }, + { + type: 'button', + icon: 'fa fa-pencil', + actionType: 'dialog', + dialog: { + title: '编辑', + body: { + type: 'form', + name: 'sample-edit-form', + api: '/api/sample/$id', + controls: [ + { + type: 'text', + name: 'engine', + label: 'Engine', + required: true + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'browser', + label: 'Browser', + required: true + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'platform', + label: 'Platform(s)', + required: true + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'version', + label: 'Engine version' + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'grade', + label: 'CSS grade' + } + ] + } + } + }, + { + type: 'button', + icon: 'fa fa-times text-danger', + actionType: 'ajax', + confirmText: '您确认要删除?', + api: 'delete:/api/sample/$id' + } + ], + body: [ + { + name: 'engine', + label: 'Rendering engine', + sortable: true, + quickEdit: true, + labelClassName: 'w-sm' + }, + [ + { + name: 'browser', + label: 'Browser', + labelClassName: 'w-sm' + }, + { + name: 'platform', + label: 'Platform(s)', + labelClassName: 'w-sm' + } + ], + { + name: 'version', + label: 'Engine version', + labelClassName: 'w-sm' + } + ] + } + } + }, + + { + type: 'divider' + }, + + '

    Cards 渲染类型

    ', + { + type: 'divider' + }, + + { + type: 'picker', + name: 'type7', + joinValues: true, + valueField: 'id', + labelField: 'engine', + label: '单选', + source: '/api/sample', + size: 'lg', + value: '4', + pickerSchema: { + mode: 'cards', + name: 'thelist', + quickSaveApi: '/api/sample/bulkUpdate', + quickSaveItemApi: '/api/sample/$id', + draggable: true, + headerToolbar: { + wrapWithPanel: false, + type: 'form', + className: 'text-right', + target: 'thelist', + mode: 'inline', + controls: [ + { + type: 'text', + name: 'keywords', + addOn: { + type: 'submit', + label: '搜索', + level: 'primary', + icon: 'fa fa-search pull-left' + } + } + ] + }, + card: { + header: { + title: '$engine', + subTitle: '$platform', + subTitlePlaceholder: '暂无说明', + avatar: + '<%= data.avatar || "http://bos.nj.bpc.baidu.com/showx/146bc2ce1b30f3824838f4208ad2663c" %>', + avatarClassName: 'pull-left thumb b-3x m-r' + }, + actions: [ + { + type: 'button', + label: '查看', + actionType: 'dialog', + dialog: { + title: '查看', + body: { + type: 'form', + controls: [ + { + type: 'static', + name: 'engine', + label: 'Engine' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'browser', + label: 'Browser' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'platform', + label: 'Platform(s)' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'version', + label: 'Engine version' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'grade', + label: 'CSS grade' + }, + { + type: 'divider' + }, + { + type: 'html', + html: + '

    添加其他 Html 片段 需要支持变量替换（todo）.

    ' + } + ] + } + } + }, + { + type: 'button', + label: '编辑', + actionType: 'dialog', + dialog: { + title: '编辑', + body: { + type: 'form', + name: 'sample-edit-form', + api: '/api/sample/$id', + controls: [ + { + type: 'text', + name: 'engine', + label: 'Engine', + required: true + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'browser', + label: 'Browser', + required: true + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'platform', + label: 'Platform(s)', + required: true + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'version', + label: 'Engine version' + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'grade', + label: 'CSS grade' + } + ] + } + } + }, + { + type: 'button', + label: '删除', + actionType: 'ajax', + confirmText: '您确认要删除?', + api: 'delete:/api/sample/$id' + } + ], + body: [ + { + name: 'engine', + label: 'engine', + sortable: true, + quickEdit: true + }, + { + name: 'browser', + label: 'Browser' + }, + { + name: 'platform', + label: 'Platform' + }, + { + name: 'version', + label: 'version' + } + ] + } + } + }, + + { + type: 'picker', + name: 'type8', + joinValues: true, + valueField: 'id', + labelField: 'engine', + label: '多选', + source: '/api/sample', + size: 'lg', + value: '4,5', + multiple: true, + pickerSchema: { + mode: 'cards', + name: 'thelist', + quickSaveApi: '/api/sample/bulkUpdate', + quickSaveItemApi: '/api/sample/$id', + draggable: true, + headerToolbar: { + wrapWithPanel: false, + type: 'form', + className: 'text-right', + target: 'thelist', + mode: 'inline', + controls: [ + { + type: 'text', + name: 'keywords', + addOn: { + type: 'submit', + label: '搜索', + level: 'primary', + icon: 'fa fa-search pull-left' + } + } + ] + }, + card: { + header: { + title: '$engine', + subTitle: '$platform', + subTitlePlaceholder: '暂无说明', + avatar: + '<%= data.avatar || "http://bos.nj.bpc.baidu.com/showx/146bc2ce1b30f3824838f4208ad2663c" %>', + avatarClassName: 'pull-left thumb b-3x m-r' + }, + actions: [ + { + type: 'button', + label: '查看', + actionType: 'dialog', + dialog: { + title: '查看', + body: { + type: 'form', + controls: [ + { + type: 'static', + name: 'engine', + label: 'Engine' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'browser', + label: 'Browser' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'platform', + label: 'Platform(s)' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'version', + label: 'Engine version' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'grade', + label: 'CSS grade' + }, + { + type: 'divider' + }, + { + type: 'html', + html: + '

    添加其他 Html 片段 需要支持变量替换（todo）.

    ' + } + ] + } + } + }, + { + type: 'button', + label: '编辑', + actionType: 'dialog', + dialog: { + title: '编辑', + body: { + type: 'form', + name: 'sample-edit-form', + api: '/api/sample/$id', + controls: [ + { + type: 'text', + name: 'engine', + label: 'Engine', + required: true + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'browser', + label: 'Browser', + required: true + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'platform', + label: 'Platform(s)', + required: true + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'version', + label: 'Engine version' + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'grade', + label: 'CSS grade' + } + ] + } + } + }, + { + type: 'button', + label: '删除', + actionType: 'ajax', + confirmText: '您确认要删除?', + api: 'delete:/api/sample/$id' + } + ], + body: [ + { + name: 'engine', + label: 'engine', + sortable: true, + quickEdit: true + }, + { + name: 'browser', + label: 'Browser' + }, + { + name: 'platform', + label: 'Platform' + }, + { + name: 'version', + label: 'version' + } + ] + } + } + } + ] + } }; diff --git a/examples/components/Form/Reaction.jsx b/examples/components/Form/Reaction.jsx index 390daf1a..3bf4ee11 100644 --- a/examples/components/Form/Reaction.jsx +++ b/examples/components/Form/Reaction.jsx @@ -1,93 +1,93 @@ export default { - $schema: "https://houtai.baidu.com/v2/schemas/page.json#", - title: "显隐切换示例", - body: [ + $schema: 'https://houtai.baidu.com/v2/schemas/page.json#', + title: '显隐切换示例', + body: [ + { + name: 'hiddenOn', + type: 'form', + mode: 'horizontal', + api: '/api/mock2/saveForm?waitSeconds=2', + title: 'Hide On 和 disabledOn 示例', + controls: [ { - name: "hiddenOn", - type: "form", - mode: "horizontal", - api: "/api/mock2/saveForm?waitSeconds=2", - title: "Hide On 和 disabledOn 示例", - controls: [ - { - type: "radios", - name: "type", - label: "类型选择", - inline: true, - value: "1", - options: [ - { - label: "类型 1", - value: "1" - }, - { - label: "类型 2", - value: "2" - }, - { - label: "类型 3", - value: "3" - } - ], - description: '请切换类型来看效果' - }, - { - type: "text", - label: "所有可见", - name: "text1" - }, - { - type: "text", - label: "类型2 可见", - hiddenOn: "data.type != 2", - name: "text2" - }, - { - type: "text", - label: "类型3 不可点", - disabledOn: "data.type == 3", - name: "text3" - }, - { - type: "text", - required: true, - label: "必填字段", - name: "test4" - }, - { - type: "button-toolbar", - buttons: [ - { - type: "submit", - disabledOn: "data.type == 1", - label: "类型1不可点" - }, - { - type: "reset", - label: "类型3出现且不可点", - visibleOn: "data.type == 3", - disabledOn: "data.type == 3", - }, - { - type: "button", - label: "Baidu", - href: "http://www.baidu.com?a=1&b=$test4" - }, - { - type: "button", - actionType: "ajax", - label: "No Submit", - action: "/api/mock2/saveForm?waitSeconds=5" - }, - { - type: "submit", - actionType: "ajax", - label: "Submit", - action: "/api/mock2/saveForm?waitSeconds=5" - } - ] - } - ] + type: 'radios', + name: 'type', + label: '类型选择', + inline: true, + value: '1', + options: [ + { + label: '类型 1', + value: '1' + }, + { + label: '类型 2', + value: '2' + }, + { + label: '类型 3', + value: '3' + } + ], + description: '请切换类型来看效果' + }, + { + type: 'text', + label: '所有可见', + name: 'text1' + }, + { + type: 'text', + label: '类型2 可见', + hiddenOn: 'data.type != 2', + name: 'text2' + }, + { + type: 'text', + label: '类型3 不可点', + disabledOn: 'data.type == 3', + name: 'text3' + }, + { + type: 'text', + required: true, + label: '必填字段', + name: 'test4' + }, + { + type: 'button-toolbar', + buttons: [ + { + type: 'submit', + disabledOn: 'data.type == 1', + label: '类型1不可点' + }, + { + type: 'reset', + label: '类型3出现且不可点', + visibleOn: 'data.type == 3', + disabledOn: 'data.type == 3' + }, + { + type: 'button', + label: 'Baidu', + href: 'http://www.baidu.com?a=1&b=$test4' + }, + { + type: 'button', + actionType: 'ajax', + label: 'No Submit', + action: '/api/mock2/saveForm?waitSeconds=5' + }, + { + type: 'submit', + actionType: 'ajax', + label: 'Submit', + action: '/api/mock2/saveForm?waitSeconds=5' + } + ] } - ] + ] + } + ] }; diff --git a/examples/components/Form/Remote.jsx b/examples/components/Form/Remote.jsx index ac9181fc..af9643b4 100644 --- a/examples/components/Form/Remote.jsx +++ b/examples/components/Form/Remote.jsx @@ -1,90 +1,91 @@ export default { - $schema: "https://houtai.baidu.com/v2/schemas/page.json#", - title: "动态拉取选项", - name: "page-form-remote", - body: [ + $schema: 'https://houtai.baidu.com/v2/schemas/page.json#', + title: '动态拉取选项', + name: 'page-form-remote', + body: [ + { + type: 'form', + title: '动态表单元素示例', + name: 'demo-form', + api: '/api/mock2/form/saveForm?waitSeconds=2', + mode: 'horizontal', + actions: [ { - type: "form", - title: "动态表单元素示例", - name: "demo-form", - api: "/api/mock2/form/saveForm?waitSeconds=2", - mode: "horizontal", - actions: [ - { - type: "submit", - label: "提交" - } - ], - controls: [ - { - name: "select", - type: "select", - label: "动态选项", - source: "/api/mock2/form/getOptions?waitSeconds=1", - description: '通过接口一口气拉取选项', - clearable: true, - searchable: true - }, - { - type: "divider" - }, - { - name: "select2", - type: "select", - label: "选项自动补全", - autoComplete: "/api/mock2/options/autoComplete?term=$term", - placeholder: "请输入", - description: '通过接口自动补全' - }, - { - type: "divider" - }, - { - type: "text", - name: "text", - label: "文本提示", - source: "/api/mock2/form/getOptions?waitSeconds=1", - placeholder: '请选择' - }, - { - type: "divider" - }, - { - name: "text2", - type: "text", - label: "文本自动补全", - clearable: true, - autoComplete: "/api/mock2/options/autoComplete2?term=$term", - description: '通过接口自动补全' - }, - { - name: "chained", - type: "chained-select", - label: "级联选项", - source: - "/api/mock2/options/chainedOptions?waitSeconds=1&parentId=$parentId&level=$level&maxLevel=4&waiSeconds=1", - desc: "无限级别, 只要 api 返回数据就能继续往下选择. 当没有下级时请返回 null.", - value: "a,b" - }, - { - type: "divider" - }, - { - name: "tree", - type: "tree", - label: "动态树", - source: "/api/mock2/options/tree?waitSeconds=1" - }, - { - type: "divider" - }, - { - name: "matrix", - type: "matrix", - label: "动态矩阵开关", - source: "/api/mock2/options/matrix?waitSeconds=1" - } - ] + type: 'submit', + label: '提交' } - ] + ], + controls: [ + { + name: 'select', + type: 'select', + label: '动态选项', + source: '/api/mock2/form/getOptions?waitSeconds=1', + description: '通过接口一口气拉取选项', + clearable: true, + searchable: true + }, + { + type: 'divider' + }, + { + name: 'select2', + type: 'select', + label: '选项自动补全', + autoComplete: '/api/mock2/options/autoComplete?term=$term', + placeholder: '请输入', + description: '通过接口自动补全' + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'text', + label: '文本提示', + source: '/api/mock2/form/getOptions?waitSeconds=1', + placeholder: '请选择' + }, + { + type: 'divider' + }, + { + name: 'text2', + type: 'text', + label: '文本自动补全', + clearable: true, + autoComplete: '/api/mock2/options/autoComplete2?term=$term', + description: '通过接口自动补全' + }, + { + name: 'chained', + type: 'chained-select', + label: '级联选项', + source: + '/api/mock2/options/chainedOptions?waitSeconds=1&parentId=$parentId&level=$level&maxLevel=4&waiSeconds=1', + desc: + '无限级别, 只要 api 返回数据就能继续往下选择. 当没有下级时请返回 null.', + value: 'a,b' + }, + { + type: 'divider' + }, + { + name: 'tree', + type: 'tree', + label: '动态树', + source: '/api/mock2/options/tree?waitSeconds=1' + }, + { + type: 'divider' + }, + { + name: 'matrix', + type: 'matrix', + label: '动态矩阵开关', + source: '/api/mock2/options/matrix?waitSeconds=1' + } + ] + } + ] }; diff --git a/examples/components/Form/RichText.jsx b/examples/components/Form/RichText.jsx index fde89c00..e87c5106 100644 --- a/examples/components/Form/RichText.jsx +++ b/examples/components/Form/RichText.jsx @@ -1,21 +1,21 @@ import React from 'react'; export default { - $schema: "https://houtai.baidu.com/v2/schemas/page.json#", - title: "富文本编辑器", - body: [ + $schema: 'https://houtai.baidu.com/v2/schemas/page.json#', + title: '富文本编辑器', + body: [ + { + type: 'form', + api: '/api/mock2/saveForm?waitSeconds=2', + title: 'Form elements', + controls: [ { - type: "form", - api: "/api/mock2/saveForm?waitSeconds=2", - title: "Form elements", - controls: [ - { - name: "html", - type: "rich-text", - label: "富文本", - value: "

    Just do IT

    " - } - ] + name: 'html', + type: 'rich-text', + label: '富文本', + value: '

    Just do IT

    ' } - ] + ] + } + ] }; diff --git a/examples/components/Form/Schem.jsx b/examples/components/Form/Schem.jsx index 990f1ba0..5dff8f0e 100644 --- a/examples/components/Form/Schem.jsx +++ b/examples/components/Form/Schem.jsx @@ -3,154 +3,157 @@ import TitleBar from '../../../src/components/TitleBar'; import {render} from '../../../src/index'; const Schema = { - "title": "Person", - "type": "object", - "properties": { - "firstName": { - "title": "First Name", - "type": "string" - }, - "lastName": { - "type": "string" - }, - "age": { - "description": "Age in years", - "type": "integer", - "minimum": 0 - }, - "tag": { - "type": "array", - "description": "Tags", - "default": ["IT"], - "items": { - "type": "text" - } - }, - - "clients": { - "type": "array", - "description": "Tags", - "items": { - "type": "object", - "properties": { - "firstName": { - "title": "First Name", - "type": "string" - }, - "lastName": { - "type": "string" - } - } - } - } + title: 'Person', + type: 'object', + properties: { + firstName: { + title: 'First Name', + type: 'string' }, - "required": ["firstName", "lastName"] + lastName: { + type: 'string' + }, + age: { + description: 'Age in years', + type: 'integer', + minimum: 0 + }, + tag: { + type: 'array', + description: 'Tags', + default: ['IT'], + items: { + type: 'text' + } + }, + + clients: { + type: 'array', + description: 'Tags', + items: { + type: 'object', + properties: { + firstName: { + title: 'First Name', + type: 'string' + }, + lastName: { + type: 'string' + } + } + } + } + }, + required: ['firstName', 'lastName'] }; function property2control(property, key, schema) { - const requiredList= schema.required || []; - const rest = {}; - const validations = {}; - let type = 'text'; + const requiredList = schema.required || []; + const rest = {}; + const validations = {}; + let type = 'text'; + if (property.type === 'integer') { + type = 'number'; + typeof property.minimum === 'number' && (rest.min = property.minimum); + // property.max + } else if (property.type === 'array') { + type = 'combo'; + const items = property.items; - if (property.type === 'integer') { - type = 'number'; - - typeof property.minimum === 'number' && (rest.min = property.minimum); - // property.max - } else if (property.type === 'array') { - type = 'combo'; - const items = property.items; - - if (items.type === 'object') { - rest.controls = makeControls(items.properties, items); - rest.multiLine = true; - } else { - type = 'array'; - rest.inline = true; - rest.items = property2control(items, 'item', property); - } + if (items.type === 'object') { + rest.controls = makeControls(items.properties, items); + rest.multiLine = true; + } else { + type = 'array'; + rest.inline = true; + rest.items = property2control(items, 'item', property); } + } - if (typeof property.minimum === 'number') { - validations.minimum = property.minimum; - } + if (typeof property.minimum === 'number') { + validations.minimum = property.minimum; + } - return { - name: key, - type, - required: !!~requiredList.indexOf(key), - label: property.title || property.description, - desc: property.title && property.description, - value: property.default, - validations, - ...rest - }; + return { + name: key, + type, + required: !!~requiredList.indexOf(key), + label: property.title || property.description, + desc: property.title && property.description, + value: property.default, + validations, + ...rest + }; } function makeControls(properties, schema) { - const keys = Object.keys(properties); - return keys.map(key => property2control(properties[key], key, schema)); + const keys = Object.keys(properties); + return keys.map(key => property2control(properties[key], key, schema)); } function JSONSchme2AMisSchema(schema) { - if (schema.type !== 'object') { - throw new Error('JSONSchme2AMisSchema 只支持 object 转换'); - } + if (schema.type !== 'object') { + throw new Error('JSONSchme2AMisSchema 只支持 object 转换'); + } - return { - title: schema.title, - type: 'form', - mode: "horizontal", - controls: makeControls(schema.properties, schema) - } + return { + title: schema.title, + type: 'form', + mode: 'horizontal', + controls: makeControls(schema.properties, schema) + }; } const amisFormSchema = JSONSchme2AMisSchema(Schema); export default class JSONSchemaForm extends React.Component { - state = { - data: {} - }; + state = { + data: {} + }; - renderForm() { - return render({ - type: 'page', - title: '', - body: { - ...amisFormSchema, - onChange: values => this.setState({ - data: { - ...values - } - }) + renderForm() { + return render({ + type: 'page', + title: '', + body: { + ...amisFormSchema, + onChange: values => + this.setState({ + data: { + ...values } - }); - } + }) + } + }); + } - render() { - return ( -
    - -
    -
    -

    Schema

    - 
    {JSON.stringify(Schema, null, 2)}
    -
    + render() { + return ( +
    + +
    +
    +

    Schema

    + 
    +              {JSON.stringify(Schema, null, 2)}
+
    +
    -
    -

    Form

    - {this.renderForm()} -
    +
    +

    Form

    + {this.renderForm()} +
    -
    -

    Data

    - 
    {JSON.stringify(this.state.data, null, 2)}
    -
    -
    -
    - ); - } +
    +

    Data

    + 
    +              {JSON.stringify(this.state.data, null, 2)}
+
    +
    +
    +
    + ); + } } diff --git a/examples/components/Form/Static.jsx b/examples/components/Form/Static.jsx index d494000f..bd26378b 100644 --- a/examples/components/Form/Static.jsx +++ b/examples/components/Form/Static.jsx @@ -1,130 +1,132 @@ export default { - $schema: "https://houtai.baidu.com/v2/schemas/page.json#", - title: "所有 Form 元素列举", - data: { - id: 1, - image: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg" - }, - body: [ + $schema: 'https://houtai.baidu.com/v2/schemas/page.json#', + title: '所有 Form 元素列举', + data: { + id: 1, + image: + 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg' + }, + body: [ + { + type: 'form', + api: '/api/mock2/saveForm?waitSeconds=2', + title: '表单项静态展示', + mode: 'horizontal', + controls: [ { - type: "form", - api: "/api/mock2/saveForm?waitSeconds=2", - title: "表单项静态展示", - mode: "horizontal", - controls: [ - { - type: "static", - label: "文本", - value: "文本" - }, + type: 'static', + label: '文本', + value: '文本' + }, - { - type: 'divider' - }, + { + type: 'divider' + }, - { - type: "static-tpl", - label: "模板", - tpl: "自己拼接 HTML 取变量 \\${id}: ${id}" - }, + { + type: 'static-tpl', + label: '模板', + tpl: '自己拼接 HTML 取变量 \\${id}: ${id}' + }, - { - type: 'divider' - }, + { + type: 'divider' + }, - { - type: "static-date", - label: "日期", - value: Math.round(Date.now()/1000) - }, + { + type: 'static-date', + label: '日期', + value: Math.round(Date.now() / 1000) + }, - { - type: 'divider' - }, + { + type: 'divider' + }, - { - type: "static-datetime", - label: "日期时间", - value: Math.round(Date.now()/1000) - }, + { + type: 'static-datetime', + label: '日期时间', + value: Math.round(Date.now() / 1000) + }, - { - type: 'divider' - }, + { + type: 'divider' + }, - { - type: "static-mapping", - label: "映射", - value: Math.floor(Math.random() * 5), - map: { - '*': "-", - '0': "一", - '1': "二", - '2': "三", - '3': "四", - '4': "五", - } - }, + { + type: 'static-mapping', + label: '映射', + value: Math.floor(Math.random() * 5), + map: { + '*': "-", + '0': "一", + '1': "二", + '2': "三", + '3': "四", + '4': "五" + } + }, - { - type: 'divider' - }, + { + type: 'divider' + }, - { - type: "static-progress", - label: "进度", - value: 66.66 - }, + { + type: 'static-progress', + label: '进度', + value: 66.66 + }, - { - type: 'divider' - }, + { + type: 'divider' + }, - { - type: "static-image", - label: "图片", - name: "image", - popOver: { - title: "查看大图", - body: '
    ' - } - }, + { + type: 'static-image', + label: '图片', + name: 'image', + popOver: { + title: '查看大图', + body: + '
    ' + } + }, - { - type: 'divider' - }, + { + type: 'divider' + }, - { - type: 'static-json', - label: 'JSON', - value: {a: 1, b: 2, c: {d: 3}} - }, + { + type: 'static-json', + label: 'JSON', + value: {a: 1, b: 2, c: {d: 3}} + }, - { - type: 'divider' - }, + { + type: 'divider' + }, - { - type: "static", - label: "可复制", - value: "文本", - copyable: { - content: "内容，支持变量 ${id}" - } - }, + { + type: 'static', + label: '可复制', + value: '文本', + copyable: { + content: '内容，支持变量 ${id}' + } + }, - { - type: 'divider' - }, + { + type: 'divider' + }, - { - type: "static", - name: "text", - label: "可快速编辑", - value: "文本", - quickEdit: true - }, - ] + { + type: 'static', + name: 'text', + label: '可快速编辑', + value: '文本', + quickEdit: true } - ] + ] + } + ] }; diff --git a/examples/components/Form/SubForm.jsx b/examples/components/Form/SubForm.jsx index 113adbc5..b57186dd 100644 --- a/examples/components/Form/SubForm.jsx +++ b/examples/components/Form/SubForm.jsx @@ -1,60 +1,60 @@ export default { - $schema: "https://houtai.baidu.com/v2/schemas/page.json#", - title: "SubForm 示例", - body: [ + $schema: 'https://houtai.baidu.com/v2/schemas/page.json#', + title: 'SubForm 示例', + body: [ + { + type: 'form', + api: '/api/mock2/saveForm?waitSeconds=2', + title: 'Form elements', + mode: 'horizontal', + // debug: true, + controls: [ { - type: "form", - api: "/api/mock2/saveForm?waitSeconds=2", - title: "Form elements", - mode: "horizontal", - // debug: true, + type: 'form', + label: '子表单单条', + name: 'subForm1', + btnLabel: '点击设置', + form: { + title: '子表单', controls: [ - { - type: "form", - label: "子表单单条", - name: "subForm1", - btnLabel: "点击设置", - form: { - title: "子表单", - controls: [ - { - name: "a", - type: "text", - label: "Foo" - }, - { - name: "b", - type: "switch", - label: "Boo" - } - ] - } - }, - - { - type: "form", - label: "子表单多条", - name: "subForm2", - labelField: 'a', - btnLabel: "点击设置", - multiple: true, - form: { - title: "子表单", - controls: [ - { - name: "a", - type: "text", - label: "Foo" - }, - { - name: "b", - type: "switch", - label: "Boo" - } - ] - } - }, + { + name: 'a', + type: 'text', + label: 'Foo' + }, + { + name: 'b', + type: 'switch', + label: 'Boo' + } ] + } + }, + + { + type: 'form', + label: '子表单多条', + name: 'subForm2', + labelField: 'a', + btnLabel: '点击设置', + multiple: true, + form: { + title: '子表单', + controls: [ + { + name: 'a', + type: 'text', + label: 'Foo' + }, + { + name: 'b', + type: 'switch', + label: 'Boo' + } + ] + } } - ] + ] + } + ] }; diff --git a/examples/components/Form/Table.jsx b/examples/components/Form/Table.jsx index 7fbe9315..aaa08107 100644 --- a/examples/components/Form/Table.jsx +++ b/examples/components/Form/Table.jsx @@ -1,146 +1,146 @@ export default { - $schema: "https://houtai.baidu.com/v2/schemas/page.json#", - title: "表格编辑", - body: { - type: "form", - mode: "horizontal", - api: "/api/mock2/form/saveForm?waitSeconds=2", - actions: [ - { - type: "submit", - label: "提交", - primary: true - } + $schema: 'https://houtai.baidu.com/v2/schemas/page.json#', + title: '表格编辑', + body: { + type: 'form', + mode: 'horizontal', + api: '/api/mock2/form/saveForm?waitSeconds=2', + actions: [ + { + type: 'submit', + label: '提交', + primary: true + } + ], + controls: [ + { + type: 'combo', + name: 'colors', + label: 'Combo', + multiple: true, + draggable: true, + multiLine: true, + value: [ + { + color: 'green', + name: '颜色' + } ], controls: [ - { - type: 'combo', - name: 'colors', - label: 'Combo', - multiple: true, - draggable: true, - multiLine: true, - value: [ - { - color: 'green', - name: '颜色' - } - ], - controls: [ - { - type: 'color', - name: 'color' - }, - { - type: 'text', - name: 'name', - placeholder: '说明文字' - } - ] - }, - { - type: "static", - label: "当前值", - tpl: "
    ${colors|json}
    " - }, - { - type: 'table', - name: 'colors', - label: 'Table', - draggable: true, - columns: [ - { - label: 'Color', - name: 'color', - quickEdit: { - type: 'color', - saveImmediately: true - } - }, - { - label: '说明文字', - name: 'name', - quickEdit: { - type: 'text', - mode: 'inline', - saveImmediately: true - } - } - ] - }, - { - type: 'button', - label: 'Table2新增一行', - target: 'table2', - actionType: 'add' - }, - { - "type": "table", - "name": "table2", - "label": "Table2", - "editable": true, - "addable": true, - "removable": true, - "draggable": true, - "columns": [ - { - "name": "a", - "label": "A" - }, - { - "name": "b", - "label": "B", - "quickEdit": { - "type": "select", - "options": [ - { - "label": "A", - "value": "a" - }, - { - "label": "B", - "value": "b" - } - ] - } - } - ] - }, - - { - "type": "table", - "name": "table3", - "label": "Table3(指定第2列只有update时能编辑)", - "editable": true, - "addable": true, - "removable": true, - "draggable": true, - "columns": [ - { - "name": "a", - "label": "A", - "quickEdit": true - }, - { - "name": "b", - "label": "B", - "quickEdit": false, - "quickEditOnUpdate": { - "type": "select", - "options": [ - { - "label": "A", - "value": "a" - }, - { - "label": "B", - "value": "b" - } - ] - }, - } - ] - } + { + type: 'color', + name: 'color' + }, + { + type: 'text', + name: 'name', + placeholder: '说明文字' + } ] - } + }, + { + type: 'static', + label: '当前值', + tpl: '
    ${colors|json}
    ' + }, + { + type: 'table', + name: 'colors', + label: 'Table', + draggable: true, + columns: [ + { + label: 'Color', + name: 'color', + quickEdit: { + type: 'color', + saveImmediately: true + } + }, + { + label: '说明文字', + name: 'name', + quickEdit: { + type: 'text', + mode: 'inline', + saveImmediately: true + } + } + ] + }, + { + type: 'button', + label: 'Table2新增一行', + target: 'table2', + actionType: 'add' + }, + { + type: 'table', + name: 'table2', + label: 'Table2', + editable: true, + addable: true, + removable: true, + draggable: true, + columns: [ + { + name: 'a', + label: 'A' + }, + { + name: 'b', + label: 'B', + quickEdit: { + type: 'select', + options: [ + { + label: 'A', + value: 'a' + }, + { + label: 'B', + value: 'b' + } + ] + } + } + ] + }, + + { + type: 'table', + name: 'table3', + label: 'Table3(指定第2列只有update时能编辑)', + editable: true, + addable: true, + removable: true, + draggable: true, + columns: [ + { + name: 'a', + label: 'A', + quickEdit: true + }, + { + name: 'b', + label: 'B', + quickEdit: false, + quickEditOnUpdate: { + type: 'select', + options: [ + { + label: 'A', + value: 'a' + }, + { + label: 'B', + value: 'b' + } + ] + } + } + ] + } + ] + } }; diff --git a/examples/components/Form/Tabs.jsx b/examples/components/Form/Tabs.jsx index f1d78d55..7cba7ff9 100644 --- a/examples/components/Form/Tabs.jsx +++ b/examples/components/Form/Tabs.jsx @@ -1,169 +1,171 @@ export default { - $schema: "https://houtai.baidu.com/v2/schemas/page.json#", - title: "Tabs 示例", - body: [ + $schema: 'https://houtai.baidu.com/v2/schemas/page.json#', + title: 'Tabs 示例', + body: [ + { + type: 'form', + mode: 'horizontal', + api: '/api/mock2/form/saveForm?waitSeconds=2', + title: '', + actions: [ { - type: "form", - mode: "horizontal", - api: "/api/mock2/form/saveForm?waitSeconds=2", - title: "", - actions: [ + type: 'button', + actionType: 'dialog', + label: '弹框中的 Tabs', + level: 'info', + dialog: { + title: '', + // size: "md", + body: { + type: 'form', + mode: 'horizontal', + horizontal: { + leftFixed: 'xs' + }, + api: '/api/mock2/form/saveForm?waitSeconds=2', + actions: [ { - type: "button", - actionType: "dialog", - label: "弹框中的 Tabs", - level: "info", - dialog: { - title: "", - // size: "md", - body: { - type: "form", - mode: "horizontal", - horizontal: { - leftFixed: 'xs' - }, - api: "/api/mock2/form/saveForm?waitSeconds=2", - actions: [ - { - type: "submit", - label: "提交", - primary: true - } - ], - controls: [{ - type: 'tabs', - tabs: [ - { - title: "基本信息", - controls: [ - [ - { - type: "email", - name: "email1", - placeholder: "请输入邮箱地址", - label: "邮箱" - }, - { - type: "password", - name: "password", - placeholder: "密码", - label: false - } - ], - { - type: "divider" - }, - [ - { - type: "email", - name: "email2", - placeholder: "请输入邮箱地址", - label: "邮箱" - }, - { - type: "checkbox", - name: "rememberMe", - label: false, - option: "记住我" - } - ] - ] - }, - { - title: "其他信息", - controls: [ - { - type: "email", - name: "email3", - placeholder: "请输入邮箱地址", - label: "邮箱" - }, - { - type: "divider" - }, - { - type: "checkbox", - name: "rememberMe2", - option: "记住我" - } - ] - } - ] - }] - } - } - }, - { - type: "submit", - label: "提交", - primary: true + type: 'submit', + label: '提交', + primary: true } - ], - controls: [ + ], + controls: [ { - type: 'tabs', - - tabs: [ + type: 'tabs', + tabs: [ + { + title: '基本信息', + controls: [ + [ + { + type: 'email', + name: 'email1', + placeholder: '请输入邮箱地址', + label: '邮箱' + }, + { + type: 'password', + name: 'password', + placeholder: '密码', + label: false + } + ], { - title: "基本信息", - hash: 'tab1', - controls: [ - [ - { - type: "email", - name: "email", - placeholder: "请输入邮箱地址", - label: "邮箱" - }, - { - type: "password", - name: "password", - placeholder: "密码", - label: false - } - ], - { - type: "divider" - }, - [ - { - type: "email", - name: "email2", - placeholder: "请输入邮箱地址", - label: "邮箱" - }, - { - type: "checkbox", - name: "rememberMe", - label: false, - option: "记住我" - } - ] - ] + type: 'divider' + }, + [ + { + type: 'email', + name: 'email2', + placeholder: '请输入邮箱地址', + label: '邮箱' + }, + { + type: 'checkbox', + name: 'rememberMe', + label: false, + option: '记住我' + } + ] + ] + }, + { + title: '其他信息', + controls: [ + { + type: 'email', + name: 'email3', + placeholder: '请输入邮箱地址', + label: '邮箱' }, { - title: "其他信息", - hash: 'tab2', - controls: [ - { - type: "email", - name: "email3", - placeholder: "请输入邮箱地址", - label: "邮箱" - }, - { - type: "divider" - }, - { - type: "checkbox", - name: "rememberMe4", - label: "记住我" - } - ] + type: 'divider' + }, + { + type: 'checkbox', + name: 'rememberMe2', + option: '记住我' } - ] + ] + } + ] } - ] + ] + } + } + }, + { + type: 'submit', + label: '提交', + primary: true } - ] + ], + controls: [ + { + type: 'tabs', + + tabs: [ + { + title: '基本信息', + hash: 'tab1', + controls: [ + [ + { + type: 'email', + name: 'email', + placeholder: '请输入邮箱地址', + label: '邮箱' + }, + { + type: 'password', + name: 'password', + placeholder: '密码', + label: false + } + ], + { + type: 'divider' + }, + [ + { + type: 'email', + name: 'email2', + placeholder: '请输入邮箱地址', + label: '邮箱' + }, + { + type: 'checkbox', + name: 'rememberMe', + label: false, + option: '记住我' + } + ] + ] + }, + { + title: '其他信息', + hash: 'tab2', + controls: [ + { + type: 'email', + name: 'email3', + placeholder: '请输入邮箱地址', + label: '邮箱' + }, + { + type: 'divider' + }, + { + type: 'checkbox', + name: 'rememberMe4', + label: '记住我' + } + ] + } + ] + } + ] + } + ] }; diff --git a/examples/components/Form/Test.jsx b/examples/components/Form/Test.jsx index 370a943f..6cbf1fbd 100644 --- a/examples/components/Form/Test.jsx +++ b/examples/components/Form/Test.jsx @@ -1,126 +1,132 @@ export default { - "type": "page", - "body": { - "type": "form", - "title": "详情", - "name": "scene_detail", - "mode": "horizontal", - "submitText": "", - "submitOnChange": false, - "actions": [{ - "type": "button", - "label": "修改", - "actionType": "drawer", - "drawer": { - "type": "form", - "position": "left", - "title": "修改内容", - "controls": [{ - "type": "text", - "label": "标题", - "name": "name", - "required": true - }, { - "label": "描述", - "type": "text", - "name": "typeDesc", - "required": true - }, { - "label": "内容", - "type": "textarea", - "name": "contents", - "required": true - }] + type: 'page', + body: { + type: 'form', + title: '详情', + name: 'scene_detail', + mode: 'horizontal', + submitText: '', + submitOnChange: false, + actions: [ + { + type: 'button', + label: '修改', + actionType: 'drawer', + drawer: { + type: 'form', + position: 'left', + title: '修改内容', + controls: [ + { + type: 'text', + label: '标题', + name: 'name', + required: true + }, + { + label: '描述', + type: 'text', + name: 'typeDesc', + required: true + }, + { + label: '内容', + type: 'textarea', + name: 'contents', + required: true } - }], - "controls": [ - { - type: "tree", - name: "tree", - label: "树", - options: [ - { - label: "Folder A", - value: 1, - children: [ - { - label: "file A", - value: 2 - }, - { - label: "file B", - value: 3 - } - ] - }, - { - label: "file C", - value: 4 - }, - { - label: "file D", - value: 5 - } - ] - }, - { - type: "divider" - }, - { - type: "tree", - name: "trees", - label: "树多选", - multiple: true, - options: [ - { - label: "Folder A", - value: 1, - children: [ - { - label: "file A", - value: 2 - }, - { - label: "file B", - value: 3 - } - ] - }, - { - label: "file C", - value: 4 - }, - { - label: "file D", - value: 5 - } - ] - }, - { - type: "divider" - }, - - { - name: "select", - type: "tree-select", - label: "动态选项", - source: "/api/mock2/form/getTreeOptions?waitSeconds=1", - description: '通过接口一口气拉取选项', - clearable: true, - searchable: true - }, - { - type: "divider" - }, - { - name: "select2", - type: "tree-select", - label: "选项自动补全", - autoComplete: "/api/mock2/tree/autoComplete?term=$term", - placeholder: "请输入", - description: '通过接口自动补全', - multiple: true - }, + ] + } + } + ], + controls: [ + { + type: 'tree', + name: 'tree', + label: '树', + options: [ + { + label: 'Folder A', + value: 1, + children: [ + { + label: 'file A', + value: 2 + }, + { + label: 'file B', + value: 3 + } + ] + }, + { + label: 'file C', + value: 4 + }, + { + label: 'file D', + value: 5 + } ] - } -} + }, + { + type: 'divider' + }, + { + type: 'tree', + name: 'trees', + label: '树多选', + multiple: true, + options: [ + { + label: 'Folder A', + value: 1, + children: [ + { + label: 'file A', + value: 2 + }, + { + label: 'file B', + value: 3 + } + ] + }, + { + label: 'file C', + value: 4 + }, + { + label: 'file D', + value: 5 + } + ] + }, + { + type: 'divider' + }, + + { + name: 'select', + type: 'tree-select', + label: '动态选项', + source: '/api/mock2/form/getTreeOptions?waitSeconds=1', + description: '通过接口一口气拉取选项', + clearable: true, + searchable: true + }, + { + type: 'divider' + }, + { + name: 'select2', + type: 'tree-select', + label: '选项自动补全', + autoComplete: '/api/mock2/tree/autoComplete?term=$term', + placeholder: '请输入', + description: '通过接口自动补全', + multiple: true + } + ] + } +}; diff --git a/examples/components/Form/Validation.jsx b/examples/components/Form/Validation.jsx index 3b69614b..daa6a427 100644 --- a/examples/components/Form/Validation.jsx +++ b/examples/components/Form/Validation.jsx @@ -1,112 +1,112 @@ export default { - $schema: "https://houtai.baidu.com/v2/schemas/page.json#", - title: "表单验证示例", - toolbar: "文档", - body: [ + $schema: 'https://houtai.baidu.com/v2/schemas/page.json#', + title: '表单验证示例', + toolbar: "文档", + body: [ + { + type: 'form', + autoFocus: false, + messages: { + validateFailed: '请仔细检查表单规则，部分表单项没通过验证' + }, + title: '表单', + actions: [ { - type: "form", - autoFocus: false, - messages: { - 'validateFailed': '请仔细检查表单规则，部分表单项没通过验证' - }, - title: "表单", - actions: [ - { - type: "submit", - label: "提交" - } - ], - api: "/api/mock2/form/saveFormFailed?waitSeconds=2", - mode: "horizontal", - controls: [ - { - type: "text", - name: "test", - label: "必填", - required: true - }, - { - type: "divider" - }, - { - name: "test1", - type: "email", - label: "Email" - }, - { - type: "divider" - }, - { - name: "url", - type: "url", - label: "Url" - }, - { - type: "divider" - }, - { - name: "num", - type: "text", - label: "数字", - validations: "isNumeric" - }, - { - type: "divider" - }, - { - name: "alpha", - type: "text", - label: "字母或数字", - validations: "isAlphanumeric" - }, - { - type: "divider" - }, - { - name: "int", - type: "text", - label: "整形", - validations: "isInt" - }, - { - type: "divider" - }, - { - name: "minLength", - type: "text", - label: "长度限制", - validations: "minLength:2,maxLength:10" - }, - { - type: "divider" - }, - { - name: "min", - type: "text", - label: "数值限制", - validations: "maximum:10,minimum:2" - }, - { - type: "divider" - }, - { - name: "reg", - type: "text", - label: "正则", - validations: "matchRegexp:/^abc/", - validationErrors: { - matchRegexp: "请输入abc开头的好么?" - } - }, - { - type: "divider" - }, - { - name: "test2", - type: "text", - label: "服务端验证" - } - ] + type: 'submit', + label: '提交' } - ] + ], + api: '/api/mock2/form/saveFormFailed?waitSeconds=2', + mode: 'horizontal', + controls: [ + { + type: 'text', + name: 'test', + label: '必填', + required: true + }, + { + type: 'divider' + }, + { + name: 'test1', + type: 'email', + label: 'Email' + }, + { + type: 'divider' + }, + { + name: 'url', + type: 'url', + label: 'Url' + }, + { + type: 'divider' + }, + { + name: 'num', + type: 'text', + label: '数字', + validations: 'isNumeric' + }, + { + type: 'divider' + }, + { + name: 'alpha', + type: 'text', + label: '字母或数字', + validations: 'isAlphanumeric' + }, + { + type: 'divider' + }, + { + name: 'int', + type: 'text', + label: '整形', + validations: 'isInt' + }, + { + type: 'divider' + }, + { + name: 'minLength', + type: 'text', + label: '长度限制', + validations: 'minLength:2,maxLength:10' + }, + { + type: 'divider' + }, + { + name: 'min', + type: 'text', + label: '数值限制', + validations: 'maximum:10,minimum:2' + }, + { + type: 'divider' + }, + { + name: 'reg', + type: 'text', + label: '正则', + validations: 'matchRegexp:/^abc/', + validationErrors: { + matchRegexp: '请输入abc开头的好么?' + } + }, + { + type: 'divider' + }, + { + name: 'test2', + type: 'text', + label: '服务端验证' + } + ] + } + ] }; diff --git a/examples/components/Form/layoutTest.jsx b/examples/components/Form/layoutTest.jsx index 54cff67c..36b2a3d8 100644 --- a/examples/components/Form/layoutTest.jsx +++ b/examples/components/Form/layoutTest.jsx @@ -1,2141 +1,2118 @@ import React from 'react'; function buildTest(type, scaffold) { - return { - type: 'wrapper', - className: 'b-l b-b b-r bg-white', - body: [ - `

    类型：${type}

    `, - - { - type: 'tabs', - tabs: [ + return { + type: 'wrapper', + className: 'b-l b-b b-r bg-white', + body: [ + `

    类型：${type}

    `, + + { + type: 'tabs', + tabs: [ + { + title: '正常模式', + hash: 'normal', + body: { + type: 'form', + title: '', + controls: [ + { + label: '正常', + ...scaffold, + type, + name: 'a1' + }, + + { + type: 'divider' + }, + + { + label: '内联模式', + ...scaffold, + type, + name: 'a2', + mode: 'inline' + }, + + { + type: 'divider' + }, + + { + label: '表单项内联', + ...scaffold, + type, + name: 'a22', + inline: true + }, + + { + type: 'divider' + }, + + { + type: 'tpl', + className: 'text-info', + tpl: 'Group 默认模式' + }, + + { + type: 'divider' + }, + + { + type: 'group', + controls: [ { - title: '正常模式', - hash: 'normal', - body: { - type: 'form', - title: '', - controls: [ - { - label: '正常', - ...scaffold, - type, - name: 'a1' - }, - - { - type: 'divider' - }, - - { - label: '内联模式', - ...scaffold, - type, - name: 'a2', - mode: 'inline' - }, - - { - type: 'divider' - }, - - { - label: '表单项内联', - ...scaffold, - type, - name: 'a22', - inline: true, - }, - - { - type: 'divider' - }, - - { - type: 'tpl', - className: 'text-info', - tpl: 'Group 默认模式', - }, - - { - type: 'divider' - }, - - { - type: 'group', - controls: [ - { - label: '正常', - ...scaffold, - type, - name: 'a3' - }, - - { - label: '正常', - ...scaffold, - type, - name: 'a4' - } - ] - }, - - { - type: 'divider' - }, - - { - type: 'group', - controls: [ - { - label: '内联模式', - ...scaffold, - mode: 'inline', - type, - name: 'a5' - }, - - { - label: '正常', - ...scaffold, - type, - name: 'a6' - } - ] - }, - - { - type: 'divider' - }, - - { - type: 'group', - controls: [ - { - label: '正常', - ...scaffold, - type, - name: 'a7' - }, - - { - label: '内联模式', - ...scaffold, - mode: 'inline', - type, - name: 'a8' - } - ] - }, - - { - type: 'divider' - }, - - { - type: 'group', - controls: [ - { - label: '内联模式', - ...scaffold, - mode: 'inline', - type, - name: 'a9' - }, - - { - label: '内联模式', - ...scaffold, - mode: 'inline', - type, - name: 'a10' - } - ] - }, - - { - type: 'divider' - }, - - { - type: 'tpl', - className: 'text-info', - tpl: 'Group 局部 Inline 模式' - }, - - { - type: 'divider' - }, - - { - type: 'group', - mode: 'inline', - controls: [ - { - label: '正常', - ...scaffold, - type, - name: 'a11' - }, - - { - label: '正常', - ...scaffold, - type, - name: 'a12' - } - ] - }, - - { - type: 'divider' - }, - - { - type: 'group', - mode: 'inline', - controls: [ - { - label: '内联模式', - ...scaffold, - mode: 'inline', - type, - name: 'a13' - }, - - { - label: '正常', - ...scaffold, - type, - name: 'a14' - } - ] - }, - - { - type: 'divider' - }, - - { - type: 'group', - mode: 'inline', - controls: [ - { - label: '正常', - ...scaffold, - type, - name: 'a15' - }, - - { - label: '内联模式', - ...scaffold, - mode: 'inline', - type, - name: 'a16' - } - ] - }, - - { - type: 'divider' - }, - - { - type: 'group', - mode: 'inline', - controls: [ - { - label: '内联模式', - ...scaffold, - mode: 'inline', - type, - name: 'a17' - }, - - { - label: '内联模式', - ...scaffold, - mode: 'inline', - type, - name: 'a18' - } - ] - }, - - { - type: 'divider' - }, - - { - type: 'tpl', - className: 'text-info', - tpl: 'Group 局部水平模式' - }, - - { - type: 'divider' - }, - - { - type: 'group', - mode: 'horizontal', - controls: [ - { - label: '正常', - ...scaffold, - type, - name: 'a21' - }, - - { - label: '正常', - ...scaffold, - type, - name: 'a22' - } - ] - }, - - { - type: 'divider' - }, - - { - type: 'group', - mode: 'horizontal', - controls: [ - { - label: '内联模式', - ...scaffold, - mode: 'inline', - type, - name: 'a23' - }, - - { - label: '正常', - ...scaffold, - type, - name: 'a24' - } - ] - }, - - { - type: 'divider' - }, - - { - type: 'group', - mode: 'horizontal', - controls: [ - { - label: '内联模式+宽度', - labelClassName: 'col-sm-2', - ...scaffold, - mode: 'inline', - type, - name: 'a25' - }, - - { - label: '正常', - ...scaffold, - type, - name: 'a26' - } - ] - }, - - { - type: 'divider' - }, - - { - type: 'group', - mode: 'horizontal', - controls: [ - { - label: '正常', - ...scaffold, - type, - name: 'a27' - }, - - { - label: '内联模式', - ...scaffold, - mode: 'inline', - type, - name: 'a28' - } - ] - }, - - { - type: 'divider' - }, - - { - type: 'group', - mode: 'horizontal', - controls: [ - { - label: '内联模式', - ...scaffold, - mode: 'inline', - type, - name: 'a29' - }, - - { - label: '内联模式', - ...scaffold, - mode: 'inline', - type, - name: 'a291' - } - ] - }, - - { - type: 'divider' - }, - - { - type: 'group', - mode: 'horizontal', - controls: [ - { - label: '内联模式+宽度', - labelClassName: 'col-sm-2', - ...scaffold, - mode: 'inline', - type, - name: 'a292' - }, - - { - label: '内联模式', - ...scaffold, - mode: 'inline', - type, - name: 'a293' - } - ] - }, - - { - type: 'divider' - }, - - { - type: 'tpl', - className: 'text-info', - tpl: 'Combo 单行模式' - }, - - { - type: 'divider' - }, - - { - type: 'combo', - name: 'combo1', - label: '组合类型', - controls: [ - { - label: '正常', - ...scaffold, - type, - name: 'a1' - }, - - { - placeholder: '正常', - ...scaffold, - type, - name: 'a2' - } - ] - - }, - - { - type: 'divider' - }, - - { - type: 'combo', - name: 'combo2', - label: '组合类型多选', - multiple: true, - value: [{}, {}], - controls: [ - { - label: '正常', - ...scaffold, - type, - name: 'a1' - }, - - { - placeholder: '正常', - ...scaffold, - type, - name: 'a2' - } - ] - - }, - - { - type: 'divider' - }, - - { - type: 'combo', - name: 'combo3', - label: '组合类型多行', - multiLine: true, - controls: [ - { - label: '正常', - ...scaffold, - type, - name: 'a1' - }, - - { - placeholder: '正常', - ...scaffold, - type, - name: 'a2' - } - ] - - }, - - { - type: 'divider' - }, - - { - type: 'combo', - name: 'combo4', - label: '组合类型多行多选', - multiLine: true, - multiple: true, - value: [{}, {}], - controls: [ - { - label: '正常', - ...scaffold, - type, - name: 'a1' - }, - - { - placeholder: '正常', - ...scaffold, - type, - name: 'a2' - } - ] - - }, - - { - type: 'divider' - }, - - { - type: 'combo', - name: 'combo5', - label: '组合类型内联', - inline: true, - controls: [ - { - label: '正常', - ...scaffold, - type, - name: 'a1' - }, - - { - placeholder: '正常', - ...scaffold, - type, - name: 'a2' - } - ] - - }, - - { - type: 'divider' - }, - - { - type: 'combo', - name: 'combo6', - label: '组合类型多选内联', - multiple: true, - inline: true, - value: [{}, {}], - controls: [ - { - label: '正常', - ...scaffold, - type, - name: 'a1' - }, - - { - placeholder: '正常', - ...scaffold, - type, - name: 'a2' - } - ] - - }, - - { - type: 'divider' - }, - - { - type: 'combo', - name: 'combo7', - label: '组合类型多行内联', - multiLine: true, - inline: true, - controls: [ - { - label: '正常', - ...scaffold, - type, - name: 'a1' - }, - - { - placeholder: '正常', - ...scaffold, - type, - name: 'a2' - } - ] - - }, - - { - type: 'divider' - }, - - { - type: 'combo', - name: 'combo8', - label: '组合类型多行多选内联', - inline: true, - multiLine: true, - multiple: true, - value: [{}, {}], - controls: [ - { - label: '正常', - ...scaffold, - type, - name: 'a1' - }, - - { - placeholder: '正常', - ...scaffold, - type, - name: 'a2' - } - ] - - } - ] - } - }, - - - { - title: '水平模式', - hash: 'horizontal', - body: { - type: 'form', - title: '', - mode: 'horizontal', - controls: [ - { - label: '正常', - ...scaffold, - type, - name: 'a1' - }, - - { - type: 'divider' - }, - - { - label: '内联模式', - ...scaffold, - type, - name: 'a2', - mode: 'inline' - }, - - { - type: 'divider' - }, - - { - type: 'tpl', - className: 'text-info', - tpl: 'Group 局部正常模式', - }, - - { - type: 'divider' - }, - - { - type: 'group', - mode: 'normal', - controls: [ - { - label: '正常', - ...scaffold, - type, - name: 'a3' - }, - - { - label: '正常', - ...scaffold, - type, - name: 'a4' - } - ] - }, - - { - type: 'divider' - }, - - { - type: 'group', - mode: 'normal', - controls: [ - { - label: '内联模式', - ...scaffold, - mode: 'inline', - type, - name: 'a5' - }, - - { - label: '正常', - ...scaffold, - type, - name: 'a6' - } - ] - }, - - { - type: 'divider' - }, - - { - type: 'group', - mode: 'normal', - controls: [ - { - label: '正常', - ...scaffold, - type, - name: 'a7' - }, - - { - label: '内联模式', - ...scaffold, - mode: 'inline', - type, - name: 'a8' - } - ] - }, - - { - type: 'divider' - }, - - { - type: 'group', - mode: 'normal', - controls: [ - { - label: '内联模式', - ...scaffold, - mode: 'inline', - type, - name: 'a9' - }, - - { - label: '内联模式', - ...scaffold, - mode: 'inline', - type, - name: 'a10' - } - ] - }, - - { - type: 'divider' - }, - - { - type: 'tpl', - className: 'text-info', - tpl: 'Group 局部 Inline 模式' - }, - - { - type: 'divider' - }, - - { - type: 'group', - mode: 'inline', - controls: [ - { - label: '正常', - ...scaffold, - type, - name: 'a11' - }, - - { - label: '正常', - ...scaffold, - type, - name: 'a12' - } - ] - }, - - { - type: 'divider' - }, - - { - type: 'group', - mode: 'inline', - controls: [ - { - label: '内联模式', - ...scaffold, - mode: 'inline', - type, - name: 'a13' - }, - - { - label: '正常', - ...scaffold, - type, - name: 'a14' - } - ] - }, - - { - type: 'divider' - }, - - { - type: 'group', - mode: 'inline', - controls: [ - { - label: '正常', - ...scaffold, - type, - name: 'a15' - }, - - { - label: '内联模式', - ...scaffold, - mode: 'inline', - type, - name: 'a16' - } - ] - }, - - { - type: 'divider' - }, - - { - type: 'group', - mode: 'inline', - controls: [ - { - label: '内联模式', - ...scaffold, - mode: 'inline', - type, - name: 'a17' - }, - - { - label: '内联模式', - ...scaffold, - mode: 'inline', - type, - name: 'a18' - } - ] - }, - - { - type: 'divider' - }, - - { - type: 'tpl', - className: 'text-info', - tpl: 'Group 局部水平模式' - }, - - { - type: 'divider' - }, - - { - type: 'group', - mode: 'horizontal', - controls: [ - { - label: '正常', - ...scaffold, - type, - name: 'a21' - }, - - { - label: '正常', - ...scaffold, - type, - name: 'a22' - } - ] - }, - - { - type: 'divider' - }, - - { - type: 'group', - mode: 'horizontal', - controls: [ - { - label: '内联模式', - ...scaffold, - mode: 'inline', - type, - name: 'a23' - }, - - { - label: '正常', - ...scaffold, - type, - name: 'a24' - } - ] - }, - - { - type: 'divider' - }, - - { - type: 'group', - mode: 'horizontal', - controls: [ - { - label: '内联模式+宽度', - labelClassName: 'col-sm-2', - ...scaffold, - mode: 'inline', - type, - name: 'a25' - }, - - { - label: '正常', - ...scaffold, - type, - name: 'a26' - } - ] - }, - - { - type: 'divider' - }, - - { - type: 'group', - mode: 'horizontal', - controls: [ - { - label: '正常', - ...scaffold, - type, - name: 'a27' - }, - - { - label: '内联模式', - ...scaffold, - mode: 'inline', - type, - name: 'a28' - } - ] - }, - - { - type: 'divider' - }, - - { - type: 'group', - mode: 'horizontal', - controls: [ - { - label: '内联模式', - ...scaffold, - mode: 'inline', - type, - name: 'a29' - }, - - { - label: '内联模式', - ...scaffold, - mode: 'inline', - type, - name: 'a291' - } - ] - }, - - { - type: 'divider' - }, - - { - type: 'group', - mode: 'horizontal', - controls: [ - { - label: '内联模式+宽度', - labelClassName: 'col-sm-2', - ...scaffold, - mode: 'inline', - type, - name: 'a292' - }, - - { - label: '内联模式', - ...scaffold, - mode: 'inline', - type, - name: 'a293' - } - ] - }, - - { - type: 'divider' - }, - - { - type: 'tpl', - className: 'text-info', - tpl: 'Combo 单行模式' - }, - - { - type: 'divider' - }, - - { - type: 'combo', - name: 'combo1', - label: '组合类型', - controls: [ - { - label: '正常', - ...scaffold, - type, - name: 'a1' - }, - - { - placeholder: '正常', - ...scaffold, - type, - name: 'a2' - } - ] - - }, - - { - type: 'divider' - }, - - { - type: 'combo', - name: 'combo2', - label: '组合类型多选', - multiple: true, - value: [{}, {}], - controls: [ - { - label: '正常', - ...scaffold, - type, - name: 'a1' - }, - - { - placeholder: '正常', - ...scaffold, - type, - name: 'a2' - } - ] - - }, - - { - type: 'divider' - }, - - { - type: 'combo', - name: 'combo3', - label: '组合类型多行', - multiLine: true, - controls: [ - { - label: '正常', - ...scaffold, - type, - name: 'a1' - }, - - { - placeholder: '正常', - ...scaffold, - type, - name: 'a2' - } - ] - - }, - - { - type: 'divider' - }, - - { - type: 'combo', - name: 'combo4', - label: '组合类型多行多选', - multiLine: true, - multiple: true, - value: [{}, {}], - controls: [ - { - label: '正常', - ...scaffold, - type, - name: 'a1' - }, - - { - placeholder: '正常', - ...scaffold, - type, - name: 'a2' - } - ] - - }, - - { - type: 'divider' - }, - - { - type: 'combo', - name: 'combo5', - label: '组合类型内联', - inline: true, - controls: [ - { - label: '正常', - ...scaffold, - type, - name: 'a1' - }, - - { - placeholder: '正常', - ...scaffold, - type, - name: 'a2' - } - ] - - }, - - { - type: 'divider' - }, - - { - type: 'combo', - name: 'combo6', - label: '组合类型多选内联', - multiple: true, - inline: true, - value: [{}, {}], - controls: [ - { - label: '正常', - ...scaffold, - type, - name: 'a1' - }, - - { - placeholder: '正常', - ...scaffold, - type, - name: 'a2' - } - ] - - }, - - { - type: 'divider' - }, - - { - type: 'combo', - name: 'combo7', - label: '组合类型多行内联', - multiLine: true, - inline: true, - controls: [ - { - label: '正常', - ...scaffold, - type, - name: 'a1' - }, - - { - placeholder: '正常', - ...scaffold, - type, - name: 'a2' - } - ] - - }, - - { - type: 'divider' - }, - - { - type: 'combo', - name: 'combo8', - label: '组合类型多行多选内联', - inline: true, - multiLine: true, - multiple: true, - value: [{}, {}], - controls: [ - { - label: '正常', - ...scaffold, - type, - name: 'a1' - }, - - { - placeholder: '正常', - ...scaffold, - type, - name: 'a2' - } - ] - - } - ] - }, + label: '正常', + ...scaffold, + type, + name: 'a3' }, { - title: '内联模式', - hash: 'inline', - body: { - type: 'form', - title: '', - mode: 'inline', - controls: [ - { - label: '正常', - ...scaffold, - type, - name: 'a1' - }, - - { - label: '正常', - ...scaffold, - type, - name: 'a11' - }, - - { - type: 'divider' - }, - - { - label: '内联模式', - ...scaffold, - type, - name: 'a2', - mode: 'inline' - }, - - { - label: '内联模式', - ...scaffold, - type, - name: 'a22', - mode: 'inline' - }, - - { - type: 'divider' - }, - - { - type: 'tpl', - className: 'text-info', - tpl: 'Group 局部正常模式', - }, - - { - type: 'divider' - }, - - { - type: 'group', - mode: 'normal', - controls: [ - { - label: '正常', - ...scaffold, - type, - name: 'a3' - }, - - { - label: '正常', - ...scaffold, - type, - name: 'a4' - } - ] - }, - - { - type: 'divider' - }, - - { - type: 'group', - mode: 'normal', - controls: [ - { - label: '内联模式', - ...scaffold, - mode: 'inline', - type, - name: 'a5' - }, - - { - label: '正常', - ...scaffold, - type, - name: 'a6' - } - ] - }, - - { - type: 'divider' - }, - - { - type: 'group', - mode: 'normal', - controls: [ - { - label: '正常', - ...scaffold, - type, - name: 'a7' - }, - - { - label: '内联模式', - ...scaffold, - mode: 'inline', - type, - name: 'a8' - } - ] - }, - - { - type: 'divider' - }, - - { - type: 'group', - mode: 'normal', - controls: [ - { - label: '内联模式', - ...scaffold, - mode: 'inline', - type, - name: 'a9' - }, - - { - label: '内联模式', - ...scaffold, - mode: 'inline', - type, - name: 'a10' - } - ] - }, - - { - type: 'divider' - }, - - { - type: 'tpl', - className: 'text-info', - tpl: 'Group 局部 Inline 模式' - }, - - { - type: 'divider' - }, - - { - type: 'group', - mode: 'inline', - controls: [ - { - label: '正常', - ...scaffold, - type, - name: 'a11' - }, - - { - label: '正常', - ...scaffold, - type, - name: 'a12' - } - ] - }, - - { - type: 'divider' - }, - - { - type: 'group', - mode: 'inline', - controls: [ - { - label: '内联模式', - ...scaffold, - mode: 'inline', - type, - name: 'a13' - }, - - { - label: '正常', - ...scaffold, - type, - name: 'a14' - } - ] - }, - - { - type: 'divider' - }, - - { - type: 'group', - mode: 'inline', - controls: [ - { - label: '正常', - ...scaffold, - type, - name: 'a15' - }, - - { - label: '内联模式', - ...scaffold, - mode: 'inline', - type, - name: 'a16' - } - ] - }, - - { - type: 'divider' - }, - - { - type: 'group', - mode: 'inline', - controls: [ - { - label: '内联模式', - ...scaffold, - mode: 'inline', - type, - name: 'a17' - }, - - { - label: '内联模式', - ...scaffold, - mode: 'inline', - type, - name: 'a18' - } - ] - }, - - { - type: 'divider' - }, - - { - type: 'tpl', - className: 'text-info', - tpl: 'Group 局部水平模式' - }, - - { - type: 'divider' - }, - - { - type: 'group', - mode: 'horizontal', - controls: [ - { - label: '正常', - ...scaffold, - type, - name: 'a21' - }, - - { - label: '正常', - ...scaffold, - type, - name: 'a22' - } - ] - }, - - { - type: 'divider' - }, - - { - type: 'group', - mode: 'horizontal', - controls: [ - { - label: '内联模式', - ...scaffold, - mode: 'inline', - type, - name: 'a23' - }, - - { - label: '正常', - ...scaffold, - type, - name: 'a24' - } - ] - }, - - { - type: 'divider' - }, - - { - type: 'group', - mode: 'horizontal', - controls: [ - { - label: '内联模式+宽度', - labelClassName: 'col-sm-2', - ...scaffold, - mode: 'inline', - type, - name: 'a25' - }, - - { - label: '正常', - ...scaffold, - type, - name: 'a26' - } - ] - }, - - { - type: 'divider' - }, - - { - type: 'group', - mode: 'horizontal', - controls: [ - { - label: '正常', - ...scaffold, - type, - name: 'a27' - }, - - { - label: '内联模式', - ...scaffold, - mode: 'inline', - type, - name: 'a28' - } - ] - }, - - { - type: 'divider' - }, - - { - type: 'group', - mode: 'horizontal', - controls: [ - { - label: '内联模式', - ...scaffold, - mode: 'inline', - type, - name: 'a29' - }, - - { - label: '内联模式', - ...scaffold, - mode: 'inline', - type, - name: 'a291' - } - ] - }, - - { - type: 'divider' - }, - - { - type: 'group', - mode: 'horizontal', - controls: [ - { - label: '内联模式+宽度', - labelClassName: 'col-sm-2', - ...scaffold, - mode: 'inline', - type, - name: 'a292' - }, - - { - label: '内联模式', - ...scaffold, - mode: 'inline', - type, - name: 'a293' - } - ] - }, - - { - type: 'divider' - }, - - { - type: 'tpl', - className: 'text-info', - tpl: 'Combo 单行模式' - }, - - { - type: 'divider' - }, - - { - type: 'combo', - name: 'combo1', - label: '组合类型', - controls: [ - { - label: '正常', - ...scaffold, - type, - name: 'a1' - }, - - { - placeholder: '正常', - ...scaffold, - type, - name: 'a2' - } - ] - - }, - - { - type: 'divider' - }, - - { - type: 'combo', - name: 'combo2', - label: '组合类型多选', - multiple: true, - value: [{}, {}], - controls: [ - { - label: '正常', - ...scaffold, - type, - name: 'a1' - }, - - { - placeholder: '正常', - ...scaffold, - type, - name: 'a2' - } - ] - - }, - - { - type: 'divider' - }, - - { - type: 'combo', - name: 'combo3', - label: '组合类型多行', - multiLine: true, - controls: [ - { - label: '正常', - ...scaffold, - type, - name: 'a1' - }, - - { - placeholder: '正常', - ...scaffold, - type, - name: 'a2' - } - ] - - }, - - { - type: 'divider' - }, - - { - type: 'combo', - name: 'combo4', - label: '组合类型多行多选', - multiLine: true, - multiple: true, - value: [{}, {}], - controls: [ - { - label: '正常', - ...scaffold, - type, - name: 'a1' - }, - - { - placeholder: '正常', - ...scaffold, - type, - name: 'a2' - } - ] - - }, - - { - type: 'divider' - }, - - { - type: 'combo', - name: 'combo5', - label: '组合类型内联', - inline: true, - controls: [ - { - label: '正常', - ...scaffold, - type, - name: 'a1' - }, - - { - placeholder: '正常', - ...scaffold, - type, - name: 'a2' - } - ] - - }, - - { - type: 'divider' - }, - - { - type: 'combo', - name: 'combo6', - label: '组合类型多选内联', - multiple: true, - inline: true, - value: [{}, {}], - controls: [ - { - label: '正常', - ...scaffold, - type, - name: 'a1' - }, - - { - placeholder: '正常', - ...scaffold, - type, - name: 'a2' - } - ] - - }, - - { - type: 'divider' - }, - - { - type: 'combo', - name: 'combo7', - label: '组合类型多行内联', - multiLine: true, - inline: true, - controls: [ - { - label: '正常', - ...scaffold, - type, - name: 'a1' - }, - - { - placeholder: '正常', - ...scaffold, - type, - name: 'a2' - } - ] - - }, - - { - type: 'divider' - }, - - { - type: 'combo', - name: 'combo8', - label: '组合类型多行多选内联', - inline: true, - multiLine: true, - multiple: true, - value: [{}, {}], - controls: [ - { - label: '正常', - ...scaffold, - type, - name: 'a1' - }, - - { - placeholder: '正常', - ...scaffold, - type, - name: 'a2' - } - ] - - } - ] - }, + label: '正常', + ...scaffold, + type, + name: 'a4' } + ] + }, - ] + { + type: 'divider' + }, + + { + type: 'group', + controls: [ + { + label: '内联模式', + ...scaffold, + mode: 'inline', + type, + name: 'a5' + }, + + { + label: '正常', + ...scaffold, + type, + name: 'a6' + } + ] + }, + + { + type: 'divider' + }, + + { + type: 'group', + controls: [ + { + label: '正常', + ...scaffold, + type, + name: 'a7' + }, + + { + label: '内联模式', + ...scaffold, + mode: 'inline', + type, + name: 'a8' + } + ] + }, + + { + type: 'divider' + }, + + { + type: 'group', + controls: [ + { + label: '内联模式', + ...scaffold, + mode: 'inline', + type, + name: 'a9' + }, + + { + label: '内联模式', + ...scaffold, + mode: 'inline', + type, + name: 'a10' + } + ] + }, + + { + type: 'divider' + }, + + { + type: 'tpl', + className: 'text-info', + tpl: 'Group 局部 Inline 模式' + }, + + { + type: 'divider' + }, + + { + type: 'group', + mode: 'inline', + controls: [ + { + label: '正常', + ...scaffold, + type, + name: 'a11' + }, + + { + label: '正常', + ...scaffold, + type, + name: 'a12' + } + ] + }, + + { + type: 'divider' + }, + + { + type: 'group', + mode: 'inline', + controls: [ + { + label: '内联模式', + ...scaffold, + mode: 'inline', + type, + name: 'a13' + }, + + { + label: '正常', + ...scaffold, + type, + name: 'a14' + } + ] + }, + + { + type: 'divider' + }, + + { + type: 'group', + mode: 'inline', + controls: [ + { + label: '正常', + ...scaffold, + type, + name: 'a15' + }, + + { + label: '内联模式', + ...scaffold, + mode: 'inline', + type, + name: 'a16' + } + ] + }, + + { + type: 'divider' + }, + + { + type: 'group', + mode: 'inline', + controls: [ + { + label: '内联模式', + ...scaffold, + mode: 'inline', + type, + name: 'a17' + }, + + { + label: '内联模式', + ...scaffold, + mode: 'inline', + type, + name: 'a18' + } + ] + }, + + { + type: 'divider' + }, + + { + type: 'tpl', + className: 'text-info', + tpl: 'Group 局部水平模式' + }, + + { + type: 'divider' + }, + + { + type: 'group', + mode: 'horizontal', + controls: [ + { + label: '正常', + ...scaffold, + type, + name: 'a21' + }, + + { + label: '正常', + ...scaffold, + type, + name: 'a22' + } + ] + }, + + { + type: 'divider' + }, + + { + type: 'group', + mode: 'horizontal', + controls: [ + { + label: '内联模式', + ...scaffold, + mode: 'inline', + type, + name: 'a23' + }, + + { + label: '正常', + ...scaffold, + type, + name: 'a24' + } + ] + }, + + { + type: 'divider' + }, + + { + type: 'group', + mode: 'horizontal', + controls: [ + { + label: '内联模式+宽度', + labelClassName: 'col-sm-2', + ...scaffold, + mode: 'inline', + type, + name: 'a25' + }, + + { + label: '正常', + ...scaffold, + type, + name: 'a26' + } + ] + }, + + { + type: 'divider' + }, + + { + type: 'group', + mode: 'horizontal', + controls: [ + { + label: '正常', + ...scaffold, + type, + name: 'a27' + }, + + { + label: '内联模式', + ...scaffold, + mode: 'inline', + type, + name: 'a28' + } + ] + }, + + { + type: 'divider' + }, + + { + type: 'group', + mode: 'horizontal', + controls: [ + { + label: '内联模式', + ...scaffold, + mode: 'inline', + type, + name: 'a29' + }, + + { + label: '内联模式', + ...scaffold, + mode: 'inline', + type, + name: 'a291' + } + ] + }, + + { + type: 'divider' + }, + + { + type: 'group', + mode: 'horizontal', + controls: [ + { + label: '内联模式+宽度', + labelClassName: 'col-sm-2', + ...scaffold, + mode: 'inline', + type, + name: 'a292' + }, + + { + label: '内联模式', + ...scaffold, + mode: 'inline', + type, + name: 'a293' + } + ] + }, + + { + type: 'divider' + }, + + { + type: 'tpl', + className: 'text-info', + tpl: 'Combo 单行模式' + }, + + { + type: 'divider' + }, + + { + type: 'combo', + name: 'combo1', + label: '组合类型', + controls: [ + { + label: '正常', + ...scaffold, + type, + name: 'a1' + }, + + { + placeholder: '正常', + ...scaffold, + type, + name: 'a2' + } + ] + }, + + { + type: 'divider' + }, + + { + type: 'combo', + name: 'combo2', + label: '组合类型多选', + multiple: true, + value: [{}, {}], + controls: [ + { + label: '正常', + ...scaffold, + type, + name: 'a1' + }, + + { + placeholder: '正常', + ...scaffold, + type, + name: 'a2' + } + ] + }, + + { + type: 'divider' + }, + + { + type: 'combo', + name: 'combo3', + label: '组合类型多行', + multiLine: true, + controls: [ + { + label: '正常', + ...scaffold, + type, + name: 'a1' + }, + + { + placeholder: '正常', + ...scaffold, + type, + name: 'a2' + } + ] + }, + + { + type: 'divider' + }, + + { + type: 'combo', + name: 'combo4', + label: '组合类型多行多选', + multiLine: true, + multiple: true, + value: [{}, {}], + controls: [ + { + label: '正常', + ...scaffold, + type, + name: 'a1' + }, + + { + placeholder: '正常', + ...scaffold, + type, + name: 'a2' + } + ] + }, + + { + type: 'divider' + }, + + { + type: 'combo', + name: 'combo5', + label: '组合类型内联', + inline: true, + controls: [ + { + label: '正常', + ...scaffold, + type, + name: 'a1' + }, + + { + placeholder: '正常', + ...scaffold, + type, + name: 'a2' + } + ] + }, + + { + type: 'divider' + }, + + { + type: 'combo', + name: 'combo6', + label: '组合类型多选内联', + multiple: true, + inline: true, + value: [{}, {}], + controls: [ + { + label: '正常', + ...scaffold, + type, + name: 'a1' + }, + + { + placeholder: '正常', + ...scaffold, + type, + name: 'a2' + } + ] + }, + + { + type: 'divider' + }, + + { + type: 'combo', + name: 'combo7', + label: '组合类型多行内联', + multiLine: true, + inline: true, + controls: [ + { + label: '正常', + ...scaffold, + type, + name: 'a1' + }, + + { + placeholder: '正常', + ...scaffold, + type, + name: 'a2' + } + ] + }, + + { + type: 'divider' + }, + + { + type: 'combo', + name: 'combo8', + label: '组合类型多行多选内联', + inline: true, + multiLine: true, + multiple: true, + value: [{}, {}], + controls: [ + { + label: '正常', + ...scaffold, + type, + name: 'a1' + }, + + { + placeholder: '正常', + ...scaffold, + type, + name: 'a2' + } + ] + } + ] } + }, + + { + title: '水平模式', + hash: 'horizontal', + body: { + type: 'form', + title: '', + mode: 'horizontal', + controls: [ + { + label: '正常', + ...scaffold, + type, + name: 'a1' + }, + + { + type: 'divider' + }, + + { + label: '内联模式', + ...scaffold, + type, + name: 'a2', + mode: 'inline' + }, + + { + type: 'divider' + }, + + { + type: 'tpl', + className: 'text-info', + tpl: 'Group 局部正常模式' + }, + + { + type: 'divider' + }, + + { + type: 'group', + mode: 'normal', + controls: [ + { + label: '正常', + ...scaffold, + type, + name: 'a3' + }, + + { + label: '正常', + ...scaffold, + type, + name: 'a4' + } + ] + }, + + { + type: 'divider' + }, + + { + type: 'group', + mode: 'normal', + controls: [ + { + label: '内联模式', + ...scaffold, + mode: 'inline', + type, + name: 'a5' + }, + + { + label: '正常', + ...scaffold, + type, + name: 'a6' + } + ] + }, + + { + type: 'divider' + }, + + { + type: 'group', + mode: 'normal', + controls: [ + { + label: '正常', + ...scaffold, + type, + name: 'a7' + }, + + { + label: '内联模式', + ...scaffold, + mode: 'inline', + type, + name: 'a8' + } + ] + }, + + { + type: 'divider' + }, + + { + type: 'group', + mode: 'normal', + controls: [ + { + label: '内联模式', + ...scaffold, + mode: 'inline', + type, + name: 'a9' + }, + + { + label: '内联模式', + ...scaffold, + mode: 'inline', + type, + name: 'a10' + } + ] + }, + + { + type: 'divider' + }, + + { + type: 'tpl', + className: 'text-info', + tpl: 'Group 局部 Inline 模式' + }, + + { + type: 'divider' + }, + + { + type: 'group', + mode: 'inline', + controls: [ + { + label: '正常', + ...scaffold, + type, + name: 'a11' + }, + + { + label: '正常', + ...scaffold, + type, + name: 'a12' + } + ] + }, + + { + type: 'divider' + }, + + { + type: 'group', + mode: 'inline', + controls: [ + { + label: '内联模式', + ...scaffold, + mode: 'inline', + type, + name: 'a13' + }, + + { + label: '正常', + ...scaffold, + type, + name: 'a14' + } + ] + }, + + { + type: 'divider' + }, + + { + type: 'group', + mode: 'inline', + controls: [ + { + label: '正常', + ...scaffold, + type, + name: 'a15' + }, + + { + label: '内联模式', + ...scaffold, + mode: 'inline', + type, + name: 'a16' + } + ] + }, + + { + type: 'divider' + }, + + { + type: 'group', + mode: 'inline', + controls: [ + { + label: '内联模式', + ...scaffold, + mode: 'inline', + type, + name: 'a17' + }, + + { + label: '内联模式', + ...scaffold, + mode: 'inline', + type, + name: 'a18' + } + ] + }, + + { + type: 'divider' + }, + + { + type: 'tpl', + className: 'text-info', + tpl: 'Group 局部水平模式' + }, + + { + type: 'divider' + }, + + { + type: 'group', + mode: 'horizontal', + controls: [ + { + label: '正常', + ...scaffold, + type, + name: 'a21' + }, + + { + label: '正常', + ...scaffold, + type, + name: 'a22' + } + ] + }, + + { + type: 'divider' + }, + + { + type: 'group', + mode: 'horizontal', + controls: [ + { + label: '内联模式', + ...scaffold, + mode: 'inline', + type, + name: 'a23' + }, + + { + label: '正常', + ...scaffold, + type, + name: 'a24' + } + ] + }, + + { + type: 'divider' + }, + + { + type: 'group', + mode: 'horizontal', + controls: [ + { + label: '内联模式+宽度', + labelClassName: 'col-sm-2', + ...scaffold, + mode: 'inline', + type, + name: 'a25' + }, + + { + label: '正常', + ...scaffold, + type, + name: 'a26' + } + ] + }, + + { + type: 'divider' + }, + + { + type: 'group', + mode: 'horizontal', + controls: [ + { + label: '正常', + ...scaffold, + type, + name: 'a27' + }, + + { + label: '内联模式', + ...scaffold, + mode: 'inline', + type, + name: 'a28' + } + ] + }, + + { + type: 'divider' + }, + + { + type: 'group', + mode: 'horizontal', + controls: [ + { + label: '内联模式', + ...scaffold, + mode: 'inline', + type, + name: 'a29' + }, + + { + label: '内联模式', + ...scaffold, + mode: 'inline', + type, + name: 'a291' + } + ] + }, + + { + type: 'divider' + }, + + { + type: 'group', + mode: 'horizontal', + controls: [ + { + label: '内联模式+宽度', + labelClassName: 'col-sm-2', + ...scaffold, + mode: 'inline', + type, + name: 'a292' + }, + + { + label: '内联模式', + ...scaffold, + mode: 'inline', + type, + name: 'a293' + } + ] + }, + + { + type: 'divider' + }, + + { + type: 'tpl', + className: 'text-info', + tpl: 'Combo 单行模式' + }, + + { + type: 'divider' + }, + + { + type: 'combo', + name: 'combo1', + label: '组合类型', + controls: [ + { + label: '正常', + ...scaffold, + type, + name: 'a1' + }, + + { + placeholder: '正常', + ...scaffold, + type, + name: 'a2' + } + ] + }, + + { + type: 'divider' + }, + + { + type: 'combo', + name: 'combo2', + label: '组合类型多选', + multiple: true, + value: [{}, {}], + controls: [ + { + label: '正常', + ...scaffold, + type, + name: 'a1' + }, + + { + placeholder: '正常', + ...scaffold, + type, + name: 'a2' + } + ] + }, + + { + type: 'divider' + }, + + { + type: 'combo', + name: 'combo3', + label: '组合类型多行', + multiLine: true, + controls: [ + { + label: '正常', + ...scaffold, + type, + name: 'a1' + }, + + { + placeholder: '正常', + ...scaffold, + type, + name: 'a2' + } + ] + }, + + { + type: 'divider' + }, + + { + type: 'combo', + name: 'combo4', + label: '组合类型多行多选', + multiLine: true, + multiple: true, + value: [{}, {}], + controls: [ + { + label: '正常', + ...scaffold, + type, + name: 'a1' + }, + + { + placeholder: '正常', + ...scaffold, + type, + name: 'a2' + } + ] + }, + + { + type: 'divider' + }, + + { + type: 'combo', + name: 'combo5', + label: '组合类型内联', + inline: true, + controls: [ + { + label: '正常', + ...scaffold, + type, + name: 'a1' + }, + + { + placeholder: '正常', + ...scaffold, + type, + name: 'a2' + } + ] + }, + + { + type: 'divider' + }, + + { + type: 'combo', + name: 'combo6', + label: '组合类型多选内联', + multiple: true, + inline: true, + value: [{}, {}], + controls: [ + { + label: '正常', + ...scaffold, + type, + name: 'a1' + }, + + { + placeholder: '正常', + ...scaffold, + type, + name: 'a2' + } + ] + }, + + { + type: 'divider' + }, + + { + type: 'combo', + name: 'combo7', + label: '组合类型多行内联', + multiLine: true, + inline: true, + controls: [ + { + label: '正常', + ...scaffold, + type, + name: 'a1' + }, + + { + placeholder: '正常', + ...scaffold, + type, + name: 'a2' + } + ] + }, + + { + type: 'divider' + }, + + { + type: 'combo', + name: 'combo8', + label: '组合类型多行多选内联', + inline: true, + multiLine: true, + multiple: true, + value: [{}, {}], + controls: [ + { + label: '正常', + ...scaffold, + type, + name: 'a1' + }, + + { + placeholder: '正常', + ...scaffold, + type, + name: 'a2' + } + ] + } + ] + } + }, + + { + title: '内联模式', + hash: 'inline', + body: { + type: 'form', + title: '', + mode: 'inline', + controls: [ + { + label: '正常', + ...scaffold, + type, + name: 'a1' + }, + + { + label: '正常', + ...scaffold, + type, + name: 'a11' + }, + + { + type: 'divider' + }, + + { + label: '内联模式', + ...scaffold, + type, + name: 'a2', + mode: 'inline' + }, + + { + label: '内联模式', + ...scaffold, + type, + name: 'a22', + mode: 'inline' + }, + + { + type: 'divider' + }, + + { + type: 'tpl', + className: 'text-info', + tpl: 'Group 局部正常模式' + }, + + { + type: 'divider' + }, + + { + type: 'group', + mode: 'normal', + controls: [ + { + label: '正常', + ...scaffold, + type, + name: 'a3' + }, + + { + label: '正常', + ...scaffold, + type, + name: 'a4' + } + ] + }, + + { + type: 'divider' + }, + + { + type: 'group', + mode: 'normal', + controls: [ + { + label: '内联模式', + ...scaffold, + mode: 'inline', + type, + name: 'a5' + }, + + { + label: '正常', + ...scaffold, + type, + name: 'a6' + } + ] + }, + + { + type: 'divider' + }, + + { + type: 'group', + mode: 'normal', + controls: [ + { + label: '正常', + ...scaffold, + type, + name: 'a7' + }, + + { + label: '内联模式', + ...scaffold, + mode: 'inline', + type, + name: 'a8' + } + ] + }, + + { + type: 'divider' + }, + + { + type: 'group', + mode: 'normal', + controls: [ + { + label: '内联模式', + ...scaffold, + mode: 'inline', + type, + name: 'a9' + }, + + { + label: '内联模式', + ...scaffold, + mode: 'inline', + type, + name: 'a10' + } + ] + }, + + { + type: 'divider' + }, + + { + type: 'tpl', + className: 'text-info', + tpl: 'Group 局部 Inline 模式' + }, + + { + type: 'divider' + }, + + { + type: 'group', + mode: 'inline', + controls: [ + { + label: '正常', + ...scaffold, + type, + name: 'a11' + }, + + { + label: '正常', + ...scaffold, + type, + name: 'a12' + } + ] + }, + + { + type: 'divider' + }, + + { + type: 'group', + mode: 'inline', + controls: [ + { + label: '内联模式', + ...scaffold, + mode: 'inline', + type, + name: 'a13' + }, + + { + label: '正常', + ...scaffold, + type, + name: 'a14' + } + ] + }, + + { + type: 'divider' + }, + + { + type: 'group', + mode: 'inline', + controls: [ + { + label: '正常', + ...scaffold, + type, + name: 'a15' + }, + + { + label: '内联模式', + ...scaffold, + mode: 'inline', + type, + name: 'a16' + } + ] + }, + + { + type: 'divider' + }, + + { + type: 'group', + mode: 'inline', + controls: [ + { + label: '内联模式', + ...scaffold, + mode: 'inline', + type, + name: 'a17' + }, + + { + label: '内联模式', + ...scaffold, + mode: 'inline', + type, + name: 'a18' + } + ] + }, + + { + type: 'divider' + }, + + { + type: 'tpl', + className: 'text-info', + tpl: 'Group 局部水平模式' + }, + + { + type: 'divider' + }, + + { + type: 'group', + mode: 'horizontal', + controls: [ + { + label: '正常', + ...scaffold, + type, + name: 'a21' + }, + + { + label: '正常', + ...scaffold, + type, + name: 'a22' + } + ] + }, + + { + type: 'divider' + }, + + { + type: 'group', + mode: 'horizontal', + controls: [ + { + label: '内联模式', + ...scaffold, + mode: 'inline', + type, + name: 'a23' + }, + + { + label: '正常', + ...scaffold, + type, + name: 'a24' + } + ] + }, + + { + type: 'divider' + }, + + { + type: 'group', + mode: 'horizontal', + controls: [ + { + label: '内联模式+宽度', + labelClassName: 'col-sm-2', + ...scaffold, + mode: 'inline', + type, + name: 'a25' + }, + + { + label: '正常', + ...scaffold, + type, + name: 'a26' + } + ] + }, + + { + type: 'divider' + }, + + { + type: 'group', + mode: 'horizontal', + controls: [ + { + label: '正常', + ...scaffold, + type, + name: 'a27' + }, + + { + label: '内联模式', + ...scaffold, + mode: 'inline', + type, + name: 'a28' + } + ] + }, + + { + type: 'divider' + }, + + { + type: 'group', + mode: 'horizontal', + controls: [ + { + label: '内联模式', + ...scaffold, + mode: 'inline', + type, + name: 'a29' + }, + + { + label: '内联模式', + ...scaffold, + mode: 'inline', + type, + name: 'a291' + } + ] + }, + + { + type: 'divider' + }, + + { + type: 'group', + mode: 'horizontal', + controls: [ + { + label: '内联模式+宽度', + labelClassName: 'col-sm-2', + ...scaffold, + mode: 'inline', + type, + name: 'a292' + }, + + { + label: '内联模式', + ...scaffold, + mode: 'inline', + type, + name: 'a293' + } + ] + }, + + { + type: 'divider' + }, + + { + type: 'tpl', + className: 'text-info', + tpl: 'Combo 单行模式' + }, + + { + type: 'divider' + }, + + { + type: 'combo', + name: 'combo1', + label: '组合类型', + controls: [ + { + label: '正常', + ...scaffold, + type, + name: 'a1' + }, + + { + placeholder: '正常', + ...scaffold, + type, + name: 'a2' + } + ] + }, + + { + type: 'divider' + }, + + { + type: 'combo', + name: 'combo2', + label: '组合类型多选', + multiple: true, + value: [{}, {}], + controls: [ + { + label: '正常', + ...scaffold, + type, + name: 'a1' + }, + + { + placeholder: '正常', + ...scaffold, + type, + name: 'a2' + } + ] + }, + + { + type: 'divider' + }, + + { + type: 'combo', + name: 'combo3', + label: '组合类型多行', + multiLine: true, + controls: [ + { + label: '正常', + ...scaffold, + type, + name: 'a1' + }, + + { + placeholder: '正常', + ...scaffold, + type, + name: 'a2' + } + ] + }, + + { + type: 'divider' + }, + + { + type: 'combo', + name: 'combo4', + label: '组合类型多行多选', + multiLine: true, + multiple: true, + value: [{}, {}], + controls: [ + { + label: '正常', + ...scaffold, + type, + name: 'a1' + }, + + { + placeholder: '正常', + ...scaffold, + type, + name: 'a2' + } + ] + }, + + { + type: 'divider' + }, + + { + type: 'combo', + name: 'combo5', + label: '组合类型内联', + inline: true, + controls: [ + { + label: '正常', + ...scaffold, + type, + name: 'a1' + }, + + { + placeholder: '正常', + ...scaffold, + type, + name: 'a2' + } + ] + }, + + { + type: 'divider' + }, + + { + type: 'combo', + name: 'combo6', + label: '组合类型多选内联', + multiple: true, + inline: true, + value: [{}, {}], + controls: [ + { + label: '正常', + ...scaffold, + type, + name: 'a1' + }, + + { + placeholder: '正常', + ...scaffold, + type, + name: 'a2' + } + ] + }, + + { + type: 'divider' + }, + + { + type: 'combo', + name: 'combo7', + label: '组合类型多行内联', + multiLine: true, + inline: true, + controls: [ + { + label: '正常', + ...scaffold, + type, + name: 'a1' + }, + + { + placeholder: '正常', + ...scaffold, + type, + name: 'a2' + } + ] + }, + + { + type: 'divider' + }, + + { + type: 'combo', + name: 'combo8', + label: '组合类型多行多选内联', + inline: true, + multiLine: true, + multiple: true, + value: [{}, {}], + controls: [ + { + label: '正常', + ...scaffold, + type, + name: 'a1' + }, + + { + placeholder: '正常', + ...scaffold, + type, + name: 'a2' + } + ] + } + ] + } + } ] - }; + } + ] + }; } const options = [ - { - label: '选项A', - value: 'a' - }, + { + label: '选项A', + value: 'a' + }, - { - label: '选项B', - value: 'b', - children: [ - { - label: '选项1', - value: '1' - }, + { + label: '选项B', + value: 'b', + children: [ + { + label: '选项1', + value: '1' + }, - { - label: '选项2', - value: '2' - }, + { + label: '选项2', + value: '2' + }, - { - label: '选项3', - value: '3' - } - ] - }, + { + label: '选项3', + value: '3' + } + ] + }, - { - label: '选项C', - value: 'c' - }, - - { - label: '选项D', - value: 'd' - } -], + { + label: '选项C', + value: 'c' + }, + { + label: '选项D', + value: 'd' + } +]; export default { - "$schema": "https://houtai.baidu.com/v2/schemas/page.json#", - "title": "各种表单项的不同模式样式测试，记得切到小屏幕测试", - "body": [ - + $schema: 'https://houtai.baidu.com/v2/schemas/page.json#', + title: '各种表单项的不同模式样式测试，记得切到小屏幕测试', + body: [ + { + type: 'nav', + links: [ { - type: 'nav', - links: [ - { - label: 'Text', - to: '?renderer=text', - activeOn: '!data.renderer || data.renderer == "text"' - }, - - { - label: 'Textarea', - to: '?renderer=textarea' - }, - - { - label: 'Number', - to: '?renderer=number' - }, - - { - label: 'Checkbox', - to: '?renderer=checkbox' - }, - - { - label: 'Checkboxes', - to: '?renderer=checkboxes' - }, - - { - label: 'Radios', - to: '?renderer=radios' - }, - - { - label: 'List', - to: '?renderer=list' - }, - - { - label: 'Date', - to: '?renderer=date' - }, - - { - label: 'Switch', - to: '?renderer=switch' - }, - - { - label: 'Select', - to: '?renderer=select' - }, - - { - label: 'Tree', - to: '?renderer=tree' - }, - - { - label: 'Image', - to: '?renderer=image' - }, - ], - stacked: false + label: 'Text', + to: '?renderer=text', + activeOn: '!data.renderer || data.renderer == "text"' }, - + { - children: ({data, render}) => { - const type = data.renderer || 'text'; - return ( -
    { - render('body', buildTest(type, ({ - text: { - placeholder: '请输入文本', - clearable: true, - description: '这是一段很长的描述文字。。。' - }, + label: 'Textarea', + to: '?renderer=textarea' + }, - number: { - placeholder: '请输入数字' - }, + { + label: 'Number', + to: '?renderer=number' + }, - select: { - placeholder: '请选择', - options - }, - - checkbox: { - option: '选项' - }, - - checkboxes: { - options - }, - - radios: { - options - }, - - tree: { - options - }, - - list: { - options - } + { + label: 'Checkbox', + to: '?renderer=checkbox' + }, - })[type])) - }
    - ); - } + { + label: 'Checkboxes', + to: '?renderer=checkboxes' + }, + + { + label: 'Radios', + to: '?renderer=radios' + }, + + { + label: 'List', + to: '?renderer=list' + }, + + { + label: 'Date', + to: '?renderer=date' + }, + + { + label: 'Switch', + to: '?renderer=switch' + }, + + { + label: 'Select', + to: '?renderer=select' + }, + + { + label: 'Tree', + to: '?renderer=tree' + }, + + { + label: 'Image', + to: '?renderer=image' } - ] -} + ], + stacked: false + }, + + { + children: ({data, render}) => { + const type = data.renderer || 'text'; + return ( +
    + {render( + 'body', + buildTest( + type, + { + text: { + placeholder: '请输入文本', + clearable: true, + description: '这是一段很长的描述文字。。。' + }, + + number: { + placeholder: '请输入数字' + }, + + select: { + placeholder: '请选择', + options + }, + + checkbox: { + option: '选项' + }, + + checkboxes: { + options + }, + + radios: { + options + }, + + tree: { + options + }, + + list: { + options + } + }[type] + ) + )} +
    + ); + } + } + ] +}; diff --git a/examples/components/Horizontal.jsx b/examples/components/Horizontal.jsx index a0f807de..843f39d3 100644 --- a/examples/components/Horizontal.jsx +++ b/examples/components/Horizontal.jsx @@ -1,137 +1,137 @@ export default { - "$schema": "https://houtai.baidu.com/v2/schemas/page.json#", - "title": "HBox & Grid", - "type": "page", - "body": [ + $schema: 'https://houtai.baidu.com/v2/schemas/page.json#', + title: 'HBox & Grid', + type: 'page', + body: [ + { + type: 'plain', + tpl: 'Grid 请参考 bootstrap 的 grid 布局', + inline: false, + className: 'h3 m-b-xs' + }, + { + type: 'grid', + columns: [ { - "type": "plain", - "tpl": "Grid 请参考 bootstrap 的 grid 布局", - "inline": false, - "className": "h3 m-b-xs" + type: 'tpl', + tpl: 'sm-2', + sm: 2, + className: 'bg-info', + inline: false }, { - "type": "grid", - "columns": [ - { - "type": "tpl", - "tpl": "sm-2", - "sm": 2, - "className": "bg-info", - "inline": false - }, - { - "type": "tpl", - "tpl": "sm-4", - "sm": 4, - "className": "bg-success", - "inline": false - }, - { - "type": "tpl", - "tpl": "sm-6", - "sm": 6, - "className": "bg-primary", - "inline": false - } - ] + type: 'tpl', + tpl: 'sm-4', + sm: 4, + className: 'bg-success', + inline: false }, { - "type": "plain", - "tpl": "Hbox", - "inline": false, - "className": "h3 m-t m-b-xs" + type: 'tpl', + tpl: 'sm-6', + sm: 6, + className: 'bg-primary', + inline: false + } + ] + }, + { + type: 'plain', + tpl: 'Hbox', + inline: false, + className: 'h3 m-t m-b-xs' + }, + { + type: 'hbox', + columns: [ + { + type: 'tpl', + tpl: '平均分配', + className: 'bg-info', + inline: false }, { - "type": "hbox", - "columns": [ - { - "type": "tpl", - "tpl": "平均分配", - "className": "bg-info", - "inline": false - }, - { - "type": "tpl", - "tpl": "平均分配", - "className": "bg-success", - "inline": false - }, - { - "type": "tpl", - "tpl": "平均分配", - "className": "bg-primary", - "inline": false - } - ] + type: 'tpl', + tpl: '平均分配', + className: 'bg-success', + inline: false }, { - "type": "plain", - "tpl": "Hbox 部分定宽", - "inline": false, - "className": "h3 m-t m-b-xs" + type: 'tpl', + tpl: '平均分配', + className: 'bg-primary', + inline: false + } + ] + }, + { + type: 'plain', + tpl: 'Hbox 部分定宽', + inline: false, + className: 'h3 m-t m-b-xs' + }, + { + type: 'hbox', + columns: [ + { + type: 'tpl', + tpl: 'w-xs', + className: 'bg-info', + inline: false, + columnClassName: 'w-xs' }, { - "type": "hbox", - "columns": [ - { - "type": "tpl", - "tpl": "w-xs", - "className": "bg-info", - "inline": false, - "columnClassName": "w-xs" - }, - { - "type": "tpl", - "tpl": "w-sm", - "className": "bg-info lter", - "inline": false, - "columnClassName": "w-sm" - }, - { - "type": "tpl", - "tpl": "w", - "className": "bg-info dk", - "inline": false, - "columnClassName": "w" - }, - { - "type": "tpl", - "tpl": "平均分配", - "className": "bg-success", - "inline": false - }, - { - "type": "tpl", - "tpl": "平均分配", - "className": "bg-primary", - "inline": false - } - ] + type: 'tpl', + tpl: 'w-sm', + className: 'bg-info lter', + inline: false, + columnClassName: 'w-sm' }, { - "type": "plain", - "tpl": "示例", - "inline": false, - "className": "h3 m-t m-b-xs" + type: 'tpl', + tpl: 'w', + className: 'bg-info dk', + inline: false, + columnClassName: 'w' }, { - "type": "grid", - "columns": [ - { - "type": "panel", - "title": "面板1", - "className": "Panel--danger", - "body": "内容", - "sm": 4 - }, - { - "type": "panel", - "title": "面板2", - "className": "Panel--primary", - "body": "内容", - "sm": 8 - } - ] + type: 'tpl', + tpl: '平均分配', + className: 'bg-success', + inline: false }, - ] -} \ No newline at end of file + { + type: 'tpl', + tpl: '平均分配', + className: 'bg-primary', + inline: false + } + ] + }, + { + type: 'plain', + tpl: '示例', + inline: false, + className: 'h3 m-t m-b-xs' + }, + { + type: 'grid', + columns: [ + { + type: 'panel', + title: '面板1', + className: 'Panel--danger', + body: '内容', + sm: 4 + }, + { + type: 'panel', + title: '面板2', + className: 'Panel--primary', + body: '内容', + sm: 8 + } + ] + } + ] +}; diff --git a/examples/components/IFrame.jsx b/examples/components/IFrame.jsx index bb444994..6d8ddf4b 100644 --- a/examples/components/IFrame.jsx +++ b/examples/components/IFrame.jsx @@ -1,31 +1,31 @@ export default { - "$schema": "https://houtai.baidu.com/v2/schemas/page.json#", - "title": "IFrame 可以用来嵌入其他网站", - "body": [ + $schema: 'https://houtai.baidu.com/v2/schemas/page.json#', + title: 'IFrame 可以用来嵌入其他网站', + body: [ + { + type: 'form', + mode: 'inline', + target: 'window', + title: '', + controls: [ { - type: 'form', - mode: 'inline', - target: 'window', - title: '', - controls: [ - { - type: 'text', - name: 'keywords', - addOn: { - type: 'submit', - label: '搜索', - level: 'info', - icon: 'fa fa-search pull-left' - } - } - ] - }, - - { - type: 'iframe', - className: 'b-a', - src: "https://www.baidu.com/s?wd=${keywords|url_encode}", - height: 500 + type: 'text', + name: 'keywords', + addOn: { + type: 'submit', + label: '搜索', + level: 'info', + icon: 'fa fa-search pull-left' + } } - ] -} \ No newline at end of file + ] + }, + + { + type: 'iframe', + className: 'b-a', + src: 'https://www.baidu.com/s?wd=${keywords|url_encode}', + height: 500 + } + ] +}; diff --git a/examples/components/Linkage/CRUD.jsx b/examples/components/Linkage/CRUD.jsx index 9bd9ef80..6e5977e6 100644 --- a/examples/components/Linkage/CRUD.jsx +++ b/examples/components/Linkage/CRUD.jsx @@ -1,174 +1,173 @@ export default { - $schema: "https://houtai.baidu.com/v2/schemas/page.json#", - title: "表单与列表之间的联动", - body: [ + $schema: 'https://houtai.baidu.com/v2/schemas/page.json#', + title: '表单与列表之间的联动', + body: [ + { + title: '', + type: 'form', + mode: 'inline', + target: 'list', + wrapWithPanel: false, + className: 'm-b', + controls: [ { - title: "", - type: 'form', - mode: 'inline', - target: 'list', - wrapWithPanel: false, - className: 'm-b', - controls: [ - { - type: "text", - name: "keywords", - placeholder: "通过关键字搜索", - clearable: true, - addOn: { - type: 'submit', - icon: 'fa fa-search', - level: 'primary' - } - }, - - ] - }, - { - type: "crud", - name: 'list', - api: "/api/sample", - mode: "list", - listItem: { - actions: [ - { - type: "button", - icon: "fa fa-eye", - actionType: "dialog", - dialog: { - title: "查看", - body: { - type: "form", - controls: [ - { - type: "static", - name: "engine", - label: "Engine" - }, - { - type: "divider" - }, - { - type: "static", - name: "browser", - label: "Browser" - }, - { - type: "divider" - }, - { - type: "static", - name: "platform", - label: "Platform(s)" - }, - { - type: "divider" - }, - { - type: "static", - name: "version", - label: "Engine version" - }, - { - type: "divider" - }, - { - type: "static", - name: "grade", - label: "CSS grade" - } - ] - } - } - }, - { - type: "button", - icon: "fa fa-pencil", - actionType: "dialog", - dialog: { - title: "编辑", - body: { - type: "form", - name: "sample-edit-form", - api: "/api/sample/$id", - controls: [ - { - type: "text", - name: "engine", - label: "Engine", - required: true - }, - { - type: "divider" - }, - { - type: "text", - name: "browser", - label: "Browser", - required: true - }, - { - type: "divider" - }, - { - type: "text", - name: "platform", - label: "Platform(s)", - required: true - }, - { - type: "divider" - }, - { - type: "text", - name: "version", - label: "Engine version" - }, - { - type: "divider" - }, - { - type: "text", - name: "grade", - label: "CSS grade" - } - ] - } - } - }, - { - type: "button", - icon: "fa fa-times text-danger", - actionType: "ajax", - confirmText: "您确认要删除?", - api: "delete:/api/sample/$id" - } - ], - body: [ - { - name: "engine", - label: "Rendering engine", - labelClassName: "w-sm" - }, - [ - { - name: "browser", - label: "Browser", - labelClassName: "w-sm" - }, - { - name: "platform", - label: "Platform(s)", - labelClassName: "w-sm" - } - ], - { - name: "version", - label: "Engine version", - labelClassName: "w-sm" - } + type: 'text', + name: 'keywords', + placeholder: '通过关键字搜索', + clearable: true, + addOn: { + type: 'submit', + icon: 'fa fa-search', + level: 'primary' + } + } + ] + }, + { + type: 'crud', + name: 'list', + api: '/api/sample', + mode: 'list', + listItem: { + actions: [ + { + type: 'button', + icon: 'fa fa-eye', + actionType: 'dialog', + dialog: { + title: '查看', + body: { + type: 'form', + controls: [ + { + type: 'static', + name: 'engine', + label: 'Engine' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'browser', + label: 'Browser' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'platform', + label: 'Platform(s)' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'version', + label: 'Engine version' + }, + { + type: 'divider' + }, + { + type: 'static', + name: 'grade', + label: 'CSS grade' + } ] + } } - }] - }; - \ No newline at end of file + }, + { + type: 'button', + icon: 'fa fa-pencil', + actionType: 'dialog', + dialog: { + title: '编辑', + body: { + type: 'form', + name: 'sample-edit-form', + api: '/api/sample/$id', + controls: [ + { + type: 'text', + name: 'engine', + label: 'Engine', + required: true + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'browser', + label: 'Browser', + required: true + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'platform', + label: 'Platform(s)', + required: true + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'version', + label: 'Engine version' + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'grade', + label: 'CSS grade' + } + ] + } + } + }, + { + type: 'button', + icon: 'fa fa-times text-danger', + actionType: 'ajax', + confirmText: '您确认要删除?', + api: 'delete:/api/sample/$id' + } + ], + body: [ + { + name: 'engine', + label: 'Rendering engine', + labelClassName: 'w-sm' + }, + [ + { + name: 'browser', + label: 'Browser', + labelClassName: 'w-sm' + }, + { + name: 'platform', + label: 'Platform(s)', + labelClassName: 'w-sm' + } + ], + { + name: 'version', + label: 'Engine version', + labelClassName: 'w-sm' + } + ] + } + } + ] +}; diff --git a/examples/components/Linkage/Form.jsx b/examples/components/Linkage/Form.jsx index 5cdb03be..6e994a21 100644 --- a/examples/components/Linkage/Form.jsx +++ b/examples/components/Linkage/Form.jsx @@ -1,67 +1,67 @@ export default { - type: 'page', - title: '表单与表单之间的联动', - aside: { - type: 'form', - target: 'detailForm', - className: 'wrapper-sm', // 来点间隔 - wrapWithPanel: false, // 不要用 panel 包裹了。 - controls: [ - { - type: 'text', - placeholder: '关键字', - name: 'keywords', - addOn: { - type: 'submit', - label: '搜索', - primary: true - } - }, + type: 'page', + title: '表单与表单之间的联动', + aside: { + type: 'form', + target: 'detailForm', + className: 'wrapper-sm', // 来点间隔 + wrapWithPanel: false, // 不要用 panel 包裹了。 + controls: [ + { + type: 'text', + placeholder: '关键字', + name: 'keywords', + addOn: { + type: 'submit', + label: '搜索', + primary: true + } + }, - '请在此输入内容后点击搜索' - ] - }, - body: { - name: 'detailForm', - type: 'form', - mode: 'horizontal', - title: '', - initApi: '/api/mock2/form/initData?keywords=${keywords}', - actions: [], - controls: [ - 'Form 模型除了用来提交数据外，还比较适合用来做详情数据的展示', - { - type: 'divider' - }, + '请在此输入内容后点击搜索' + ] + }, + body: { + name: 'detailForm', + type: 'form', + mode: 'horizontal', + title: '', + initApi: '/api/mock2/form/initData?keywords=${keywords}', + actions: [], + controls: [ + 'Form 模型除了用来提交数据外，还比较适合用来做详情数据的展示', + { + type: 'divider' + }, - { - label: '名称', - type: 'static', - labelClassName: 'text-muted', - name: 'name' - }, + { + label: '名称', + type: 'static', + labelClassName: 'text-muted', + name: 'name' + }, - { - label: '作者', - type: 'static', - labelClassName: 'text-muted', - name: 'author' - }, + { + label: '作者', + type: 'static', + labelClassName: 'text-muted', + name: 'author' + }, - { - label: '输入信息', - type: 'static', - labelClassName: 'text-muted', - name: 'info' - }, + { + label: '输入信息', + type: 'static', + labelClassName: 'text-muted', + name: 'info' + }, - { - label: '请求时间', - type: 'static-datetime', - labelClassName: 'text-muted', - format: 'YYYY-MM-DD HH:mm:ss', - name: 'date' - } - ] - } -} + { + label: '请求时间', + type: 'static-datetime', + labelClassName: 'text-muted', + format: 'YYYY-MM-DD HH:mm:ss', + name: 'date' + } + ] + } +}; diff --git a/examples/components/Linkage/Form2.jsx b/examples/components/Linkage/Form2.jsx index f2e17fa4..9f2ae8e0 100644 --- a/examples/components/Linkage/Form2.jsx +++ b/examples/components/Linkage/Form2.jsx @@ -1,306 +1,305 @@ export default { - type: 'page', - title: '表单初始数据自动重新拉取', - body: [ + type: 'page', + title: '表单初始数据自动重新拉取', + body: [ + { + type: 'form', + mode: 'horizontal', + title: '监听表单内部的修改', + initApi: '/api/mock2/form/initData?tpl=${tpl}', + actions: [], + controls: [ + '当 initApi 中有变量，且变量的值发生了变化了，则该表单就会重新初始数据。', { - type: 'form', - mode: 'horizontal', - title: '监听表单内部的修改', - initApi: '/api/mock2/form/initData?tpl=${tpl}', - actions: [], - controls: [ - '当 initApi 中有变量，且变量的值发生了变化了，则该表单就会重新初始数据。', - { - type: 'divider' - }, - - { - label: '数据模板', - type: 'select', - labelClassName: 'text-muted', - name: 'tpl', - value: 'tpl1', - inline: true, - options: [ - { - label: '模板1', - value: 'tpl1' - }, - - { - label: '模板2', - value: 'tpl2' - }, - - { - label: '模板3', - value: 'tpl3' - } - ], - description: '请修改这里看效果' - }, - - { - label: '名称', - type: 'static', - labelClassName: 'text-muted', - name: 'name' - }, - - { - label: '作者', - type: 'static', - labelClassName: 'text-muted', - name: 'author' - }, - - { - label: '请求时间', - type: 'static-datetime', - labelClassName: 'text-muted', - format: 'YYYY-MM-DD HH:mm:ss', - name: 'date' - } - ] - }, - - - { - type: 'grid', - columns: [ - { - type: 'form', - mode: 'horizontal', - title: '自动填充', - actions: [], - controls: [ - { - label: '数据模板', - type: 'select', - labelClassName: 'text-muted', - name: 'tpl', - value: 'tpl1', - inline: true, - options: [ - { - label: '模板1', - value: 'tpl1' - }, - - { - label: '模板2', - value: 'tpl2' - }, - - { - label: '模板3', - value: 'tpl3' - } - ], - description: '请修改这里看效果' - }, - - '
    如果 initApi 已经暂用，用 service一样可以拉取值填充，同样以下 api 值发生变化时会自动填充。
    ', - - { - type: 'service', - api: '/api/mock2/form/initData?tpl=${tpl}', - body: { - controls: [ - { - label: '名称', - type: 'text', - labelClassName: 'text-muted', - name: 'name' - }, - - { - label: '作者', - type: 'text', - labelClassName: 'text-muted', - name: 'author' - }, - - { - label: '请求时间', - type: 'datetime', - labelClassName: 'text-muted', - inputFormat: 'YYYY-MM-DD HH:mm:ss', - name: 'date' - } - ] - } - } - ] - }, - - { - type: 'form', - mode: 'horizontal', - title: '手动填充', - actions: [], - controls: [ - { - type: 'group', - label: '数据模板', - labelClassName: 'text-muted', - controls: [ - { - type: 'select', - name: 'tpl', - value: 'tpl1', - mode: 'inline', - options: [ - { - label: '模板1', - value: 'tpl1' - }, - - { - label: '模板2', - value: 'tpl2' - }, - - { - label: '模板3', - value: 'tpl3' - } - ] - }, - - { - mode: 'inline', - type: 'button', - label: '获取', - level: 'dark', - actionType: 'reload', - target: 'theService' - } - ] - }, - - '
    如果不想自动填充，自动填充，则把参数放在 data 里面，就不会监控变化自动拉取了，同时把 servcie 的初始拉取关掉，然后来个刷新目标组件的按钮。
    ', - - { - type: 'service', - name: 'theService', - api: { - method: 'get', - url: '/api/mock2/form/initData', - data: { - tpl: '${tpl}' - } - }, - body: { - controls: [ - { - label: '名称', - type: 'text', - labelClassName: 'text-muted', - name: 'name' - }, - - { - label: '作者', - type: 'text', - labelClassName: 'text-muted', - name: 'author' - }, - - { - label: '请求时间', - type: 'datetime', - labelClassName: 'text-muted', - inputFormat: 'YYYY-MM-DD HH:mm:ss', - name: 'date' - } - ] - } - } - ] - } - ] + type: 'divider' }, { - type: 'divider' + label: '数据模板', + type: 'select', + labelClassName: 'text-muted', + name: 'tpl', + value: 'tpl1', + inline: true, + options: [ + { + label: '模板1', + value: 'tpl1' + }, + + { + label: '模板2', + value: 'tpl2' + }, + + { + label: '模板3', + value: 'tpl3' + } + ], + description: '请修改这里看效果' }, { - type: 'form', - title: '条件表单', - target: 'detailForm', - submitOnInit: true, - mode: 'inline', - controls: [ - { - label: '数据模板', - type: 'select', - labelClassName: 'text-muted', - name: 'tpl', - value: 'tpl1', - options: [ - { - label: '模板1', - value: 'tpl1' - }, - - { - label: '模板2', - value: 'tpl2' - }, - - { - label: '模板3', - value: 'tpl3' - } - ] - }, - - { - type: 'submit', - label: '提交', - primary: true - } - ] + label: '名称', + type: 'static', + labelClassName: 'text-muted', + name: 'name' }, { - name: 'detailForm', - type: 'form', - mode: 'horizontal', - title: '响应表单', - initApi: '/api/mock2/form/initData?tpl=${tpl}', - initFetchOn: 'data.tpl', - actions: [], - controls: [ - '当 initApi 中有变量，且变量的值发生了变化了，则该表单就会重新初始数据。', - { - type: 'divider' - }, - - { - label: '名称', - type: 'static', - labelClassName: 'text-muted', - name: 'name' - }, - - { - label: '作者', - type: 'static', - labelClassName: 'text-muted', - name: 'author' - }, - - { - label: '请求时间', - type: 'static-datetime', - labelClassName: 'text-muted', - format: 'YYYY-MM-DD HH:mm:ss', - name: 'date' - } - ] + label: '作者', + type: 'static', + labelClassName: 'text-muted', + name: 'author' + }, + + { + label: '请求时间', + type: 'static-datetime', + labelClassName: 'text-muted', + format: 'YYYY-MM-DD HH:mm:ss', + name: 'date' } - ] -} + ] + }, + + { + type: 'grid', + columns: [ + { + type: 'form', + mode: 'horizontal', + title: '自动填充', + actions: [], + controls: [ + { + label: '数据模板', + type: 'select', + labelClassName: 'text-muted', + name: 'tpl', + value: 'tpl1', + inline: true, + options: [ + { + label: '模板1', + value: 'tpl1' + }, + + { + label: '模板2', + value: 'tpl2' + }, + + { + label: '模板3', + value: 'tpl3' + } + ], + description: '请修改这里看效果' + }, + + '
    如果 initApi 已经暂用，用 service一样可以拉取值填充，同样以下 api 值发生变化时会自动填充。
    ', + + { + type: 'service', + api: '/api/mock2/form/initData?tpl=${tpl}', + body: { + controls: [ + { + label: '名称', + type: 'text', + labelClassName: 'text-muted', + name: 'name' + }, + + { + label: '作者', + type: 'text', + labelClassName: 'text-muted', + name: 'author' + }, + + { + label: '请求时间', + type: 'datetime', + labelClassName: 'text-muted', + inputFormat: 'YYYY-MM-DD HH:mm:ss', + name: 'date' + } + ] + } + } + ] + }, + + { + type: 'form', + mode: 'horizontal', + title: '手动填充', + actions: [], + controls: [ + { + type: 'group', + label: '数据模板', + labelClassName: 'text-muted', + controls: [ + { + type: 'select', + name: 'tpl', + value: 'tpl1', + mode: 'inline', + options: [ + { + label: '模板1', + value: 'tpl1' + }, + + { + label: '模板2', + value: 'tpl2' + }, + + { + label: '模板3', + value: 'tpl3' + } + ] + }, + + { + mode: 'inline', + type: 'button', + label: '获取', + level: 'dark', + actionType: 'reload', + target: 'theService' + } + ] + }, + + '
    如果不想自动填充，自动填充，则把参数放在 data 里面，就不会监控变化自动拉取了，同时把 servcie 的初始拉取关掉，然后来个刷新目标组件的按钮。
    ', + + { + type: 'service', + name: 'theService', + api: { + method: 'get', + url: '/api/mock2/form/initData', + data: { + tpl: '${tpl}' + } + }, + body: { + controls: [ + { + label: '名称', + type: 'text', + labelClassName: 'text-muted', + name: 'name' + }, + + { + label: '作者', + type: 'text', + labelClassName: 'text-muted', + name: 'author' + }, + + { + label: '请求时间', + type: 'datetime', + labelClassName: 'text-muted', + inputFormat: 'YYYY-MM-DD HH:mm:ss', + name: 'date' + } + ] + } + } + ] + } + ] + }, + + { + type: 'divider' + }, + + { + type: 'form', + title: '条件表单', + target: 'detailForm', + submitOnInit: true, + mode: 'inline', + controls: [ + { + label: '数据模板', + type: 'select', + labelClassName: 'text-muted', + name: 'tpl', + value: 'tpl1', + options: [ + { + label: '模板1', + value: 'tpl1' + }, + + { + label: '模板2', + value: 'tpl2' + }, + + { + label: '模板3', + value: 'tpl3' + } + ] + }, + + { + type: 'submit', + label: '提交', + primary: true + } + ] + }, + + { + name: 'detailForm', + type: 'form', + mode: 'horizontal', + title: '响应表单', + initApi: '/api/mock2/form/initData?tpl=${tpl}', + initFetchOn: 'data.tpl', + actions: [], + controls: [ + '当 initApi 中有变量，且变量的值发生了变化了，则该表单就会重新初始数据。', + { + type: 'divider' + }, + + { + label: '名称', + type: 'static', + labelClassName: 'text-muted', + name: 'name' + }, + + { + label: '作者', + type: 'static', + labelClassName: 'text-muted', + name: 'author' + }, + + { + label: '请求时间', + type: 'static-datetime', + labelClassName: 'text-muted', + format: 'YYYY-MM-DD HH:mm:ss', + name: 'date' + } + ] + } + ] +}; diff --git a/examples/components/Linkage/Options.jsx b/examples/components/Linkage/Options.jsx index 0a46e036..59120baf 100644 --- a/examples/components/Linkage/Options.jsx +++ b/examples/components/Linkage/Options.jsx @@ -1,60 +1,60 @@ export default { - type: 'page', - title: '表单选线之间的远程联动', - body: { - type: 'form', - mode: 'horizontal', - title: '', - actions: [], - controls: [ - '

    表单选项可以设置 source 通过 API 远程拉取，同时如果 source 中有变量的话，变量值发生变化就会重新拉取，达到联动效果。

    ', - { - type: 'divider' - }, + type: 'page', + title: '表单选线之间的远程联动', + body: { + type: 'form', + mode: 'horizontal', + title: '', + actions: [], + controls: [ + '

    表单选项可以设置 source 通过 API 远程拉取，同时如果 source 中有变量的话，变量值发生变化就会重新拉取，达到联动效果。

    ', + { + type: 'divider' + }, - { - label: '选项1', - type: 'select', - labelClassName: 'text-muted', - name: 'a', - inline: true, - options: [ - { - label: '选项1', - value: 1 - }, + { + label: '选项1', + type: 'select', + labelClassName: 'text-muted', + name: 'a', + inline: true, + options: [ + { + label: '选项1', + value: 1 + }, - { - label: '选项2', - value: 2 - }, + { + label: '选项2', + value: 2 + }, - { - label: '选项3', - value: 3 - } - ] - }, - - { - label: '选项2', - type: 'select', - labelClassName: 'text-muted', - name: 'b', - inline: true, - source: '/api/mock2/options/level2?a=${a}', - initFetchOn: 'data.a' - }, - - { - label: '选项3', - type: 'select', - labelClassName: 'text-muted', - name: 'c', - inline: true, - visibleOn: 'data.b', - source: '/api/mock2/options/level3?b=${b}' - }, + { + label: '选项3', + value: 3 + } ] - } -} + }, + + { + label: '选项2', + type: 'select', + labelClassName: 'text-muted', + name: 'b', + inline: true, + source: '/api/mock2/options/level2?a=${a}', + initFetchOn: 'data.a' + }, + + { + label: '选项3', + type: 'select', + labelClassName: 'text-muted', + name: 'c', + inline: true, + visibleOn: 'data.b', + source: '/api/mock2/options/level3?b=${b}' + } + ] + } +}; diff --git a/examples/components/Linkage/OptionsLocal.jsx b/examples/components/Linkage/OptionsLocal.jsx index 6adbb60c..b51c3c4b 100644 --- a/examples/components/Linkage/OptionsLocal.jsx +++ b/examples/components/Linkage/OptionsLocal.jsx @@ -1,68 +1,68 @@ export default { - type: 'page', - title: '表单选线的联动', - body: { - type: 'form', - mode: 'horizontal', - title: '', - actions: [], - controls: [ - '

    表单选项内也能联动，通过配置 visibleOn、hiddenOn或者disabledOn

    ', - { - type: 'divider' - }, + type: 'page', + title: '表单选线的联动', + body: { + type: 'form', + mode: 'horizontal', + title: '', + actions: [], + controls: [ + '

    表单选项内也能联动，通过配置 visibleOn、hiddenOn或者disabledOn

    ', + { + type: 'divider' + }, - { - label: '选项1', - type: 'list', - multiple: false, - labelClassName: 'text-muted', - name: 'a', - inline: true, - options: [ - { - label: '选项1', - value: 1 - }, + { + label: '选项1', + type: 'list', + multiple: false, + labelClassName: 'text-muted', + name: 'a', + inline: true, + options: [ + { + label: '选项1', + value: 1 + }, - { - label: '选项2', - value: 2 - }, + { + label: '选项2', + value: 2 + }, - { - label: '选项3', - value: 3 - } - ] - }, - - { - label: '选项2', - type: 'radios', - labelClassName: 'text-muted', - name: 'b', - inline: true, - options: [ - { - label: '选项1', - value: 1, - disabledOn: 'data.a == 1' - }, - - { - label: '选项2', - value: 2, - hiddenOn: 'data.a == 2' - }, - - { - label: '选项3', - value: 3, - visibleOn: 'data.a == 3' - } - ] - } + { + label: '选项3', + value: 3 + } ] - } -} + }, + + { + label: '选项2', + type: 'radios', + labelClassName: 'text-muted', + name: 'b', + inline: true, + options: [ + { + label: '选项1', + value: 1, + disabledOn: 'data.a == 1' + }, + + { + label: '选项2', + value: 2, + hiddenOn: 'data.a == 2' + }, + + { + label: '选项3', + value: 3, + visibleOn: 'data.a == 3' + } + ] + } + ] + } +}; diff --git a/examples/components/Linkage/Page.jsx b/examples/components/Linkage/Page.jsx index ae94d559..706f26f9 100644 --- a/examples/components/Linkage/Page.jsx +++ b/examples/components/Linkage/Page.jsx @@ -1,49 +1,49 @@ export default { - $schema: "https://houtai.baidu.com/v2/schemas/page.json#", - type: 'page', - title: "地址栏变化自动更新", - initApi: '/api/mock2/form/initData?id=${id}', - aside: { - type: 'wrapper', - size: 'xs', - className: '', - body: { - type: 'nav', - stacked: true, - links: [ - { - label: '页面1', - to: '?id=1' - }, + $schema: 'https://houtai.baidu.com/v2/schemas/page.json#', + type: 'page', + title: '地址栏变化自动更新', + initApi: '/api/mock2/form/initData?id=${id}', + aside: { + type: 'wrapper', + size: 'xs', + className: '', + body: { + type: 'nav', + stacked: true, + links: [ + { + label: '页面1', + to: '?id=1' + }, - { - label: '页面2', - children: [ - { - label: '页面2-1', - to: '?id=2-1', - }, - { - label: '页面2-2', - to: '?id=2-2', - }, - { - label: '页面2-3（disabled）', - disabled: true, - to: '?id=2-3', - }, - ] - }, + { + label: '页面2', + children: [ + { + label: '页面2-1', + to: '?id=2-1' + }, + { + label: '页面2-2', + to: '?id=2-2' + }, + { + label: '页面2-3（disabled）', + disabled: true, + to: '?id=2-3' + } + ] + }, - { - label: '页面3', - to: '?id=3' - } - ] + { + label: '页面3', + to: '?id=3' } - }, - body: [ - '

    注意 page 渲染器的 `initApi` 中有变量跟地址栏中变量关联，只要值发生了变化，就会重新拉取一次 initApi。

    ', - "

    这些数据是通过 initApi 拉取到的数据。 `\\$infoId`: ${infoId|default:空}

    " - ] + ] + } + }, + body: [ + '

    注意 page 渲染器的 `initApi` 中有变量跟地址栏中变量关联，只要值发生了变化，就会重新拉取一次 initApi。

    ', + '

    这些数据是通过 initApi 拉取到的数据。 `\\$infoId`: ${infoId|default:空}

    ' + ] }; diff --git a/examples/components/MdRenderer.jsx b/examples/components/MdRenderer.jsx index c451b0c9..bf3a8377 100644 --- a/examples/components/MdRenderer.jsx +++ b/examples/components/MdRenderer.jsx @@ -11,180 +11,220 @@ import NestedLinks from '../../src/components/AsideNav'; import {Portal} from 'react-overlays'; class CodePreview extends React.Component { - state = { - PlayGround: null - }; - componentDidMount() { - require(['./Play'], (component) => this.setState({ - PlayGround: component.default - })) - } + state = { + PlayGround: null + }; + componentDidMount() { + require(['./Play'], component => + this.setState({ + PlayGround: component.default + })); + } - render() { - const { - container, - height, - setAsideFolded, - setHeaderVisible, - ...rest - } = this.props; + render() { + const { + container, + height, + setAsideFolded, + setHeaderVisible, + ...rest + } = this.props; - const PlayGround = this.state.PlayGround; - // 不要放在 .markdown-body 下面，因为样式会干扰，复写又麻烦，所以通过 Overlay 渲染到同级 + const PlayGround = this.state.PlayGround; + // 不要放在 .markdown-body 下面，因为样式会干扰，复写又麻烦，所以通过 Overlay 渲染到同级 - return ( -
    - - {PlayGround ? this.refs.span} - placement="bottom" - show - > - -
    - -
    -     -     : null } -
    - ); - } + return ( +
    + + {PlayGround ? ( + this.refs.span} + placement="bottom" + show + > + +
    + +
    +     +     + ) : null} +
    + ); + } } function isActive(link, location) { - return !!(link.fullPath && link.fullPath === location.hash); + return !!(link.fullPath && link.fullPath === location.hash); } export default function(doc) { - return class extends React.Component { - static displayName = 'MarkdownRenderer'; - ref = null; - doms = []; - constructor(props) { - super(props); - this.divRef = this.divRef.bind(this); - this.handleClick = this.handleClick.bind(this); - } - - componentDidMount() { - this.renderSchema(); - - if (location.hash && location.hash.length > 1) { - // 禁用自动跳转 - if (window.history && 'scrollRestoration' in window.history) { - window.history.scrollRestoration = 'manual'; - } - - const dom = document.querySelector(`[name="${location.hash.substring(1)}"]`); - dom && dom.scrollIntoView(); - } - } - - componentDidUpdate() { - this.renderSchema(); - } - - componentWillUnmount() { - this.doms.forEach(dom => ReactDOM.unmountComponentAtNode(dom)); - } - - handleClick(e) { - const href = e.target.getAttribute('href'); - if (href && href[0] !== '#' && !/^http/.test(href)) { - e.preventDefault(); - this.props.push(href); - } - } - - divRef(ref) { - this.ref = ref; - - if (ref) { - ref.innerHTML = doc.html; - } - } - - renderSchema() { - const scripts = document.querySelectorAll('script[type="text/schema"]'); - if (!scripts && !scripts.length) { - return; - } - - for (let i = 0, len = scripts.length; i < len; i++) { - let script = scripts[i]; - let props = {}; - [].slice.apply(script.attributes).forEach(item => { - props[item.name] = item.value - }); - - let dom = document.createElement('div'); - let height = props.height ? parseInt(props.height, 10) : 200; - dom.setAttribute("class", "doc-play-ground") - dom.setAttribute("style", `height: ${height}px;`); - script.parentNode.replaceChild(dom, script); - - this.doms.push(dom); - ReactDOM.unstable_renderSubtreeIntoContainer(this, ( - ReactDOM.findDOMNode(this)} - height={height} - component={CodePreview} - code={script.innerText} - scope={props.scope} - unMountOnHidden - placeholder="加载中，请稍后。。。" - /> - ), dom); - } - } - - render() { - const {location} = this.props; - - return ( -
    - {doc.title ? () : null} -
    Doc
    - {doc.toc && doc.toc.children && doc.toc.children.length > 1 ? ( - document.querySelector('#asideInner')} - > - { - let children = []; - - if (link.children) { - children.push( - - ); - } - - link.badge && children.push( - {link.badge} - ); - - depth === 1 && children.push( - - ); - - children.push( - {link.label} - ); - - return link.fragment ? ({children}) : ( toggleExpand(link) : null}>{children}); - }} - isActive={link => isActive(link, location)} - /> - - ) : null} -
    - ); - } + return class extends React.Component { + static displayName = 'MarkdownRenderer'; + ref = null; + doms = []; + constructor(props) { + super(props); + this.divRef = this.divRef.bind(this); + this.handleClick = this.handleClick.bind(this); } + + componentDidMount() { + this.renderSchema(); + + if (location.hash && location.hash.length > 1) { + // 禁用自动跳转 + if (window.history && 'scrollRestoration' in window.history) { + window.history.scrollRestoration = 'manual'; + } + + const dom = document.querySelector( + `[name="${location.hash.substring(1)}"]` + ); + dom && dom.scrollIntoView(); + } + } + + componentDidUpdate() { + this.renderSchema(); + } + + componentWillUnmount() { + this.doms.forEach(dom => ReactDOM.unmountComponentAtNode(dom)); + } + + handleClick(e) { + const href = e.target.getAttribute('href'); + if (href && href[0] !== '#' && !/^http/.test(href)) { + e.preventDefault(); + this.props.push(href); + } + } + + divRef(ref) { + this.ref = ref; + + if (ref) { + ref.innerHTML = doc.html; + } + } + + renderSchema() { + const scripts = document.querySelectorAll('script[type="text/schema"]'); + if (!scripts && !scripts.length) { + return; + } + + for (let i = 0, len = scripts.length; i < len; i++) { + let script = scripts[i]; + let props = {}; + [].slice.apply(script.attributes).forEach(item => { + props[item.name] = item.value; + }); + + let dom = document.createElement('div'); + let height = props.height ? parseInt(props.height, 10) : 200; + dom.setAttribute('class', 'doc-play-ground'); + dom.setAttribute('style', `height: ${height}px;`); + script.parentNode.replaceChild(dom, script); + + this.doms.push(dom); + ReactDOM.unstable_renderSubtreeIntoContainer( + this, + ReactDOM.findDOMNode(this)} + height={height} + component={CodePreview} + code={script.innerText} + scope={props.scope} + unMountOnHidden + placeholder="加载中，请稍后。。。" + />, + dom + ); + } + } + + render() { + const {location} = this.props; + + return ( +
    + {doc.title ? : null} +
    + Doc +
    + {doc.toc && doc.toc.children && doc.toc.children.length > 1 ? ( + document.querySelector('#asideInner')}> + { + let children = []; + + if (link.children) { + children.push( + + ); + } + + link.badge && + children.push( + + {link.badge} + + ); + + depth === 1 && + children.push( + + ); + + children.push( + + {link.label} + + ); + + return link.fragment ? ( + {children} + ) : ( + toggleExpand(link) : null} + > + {children} + + ); + }} + isActive={link => isActive(link, location)} + /> + + ) : null} +
    + ); + } + }; } diff --git a/examples/components/Page/Error.jsx b/examples/components/Page/Error.jsx index 29baca34..3b6ba064 100644 --- a/examples/components/Page/Error.jsx +++ b/examples/components/Page/Error.jsx @@ -1,27 +1,27 @@ export default { - type: 'page', - title: '标题', - remark: '提示 Tip', - body: [ - ` + type: 'page', + title: '标题', + remark: '提示 Tip', + body: [ + `

    \`initApi\` 拉取失败时，页面内容区会显示对应的错误信息。

    其他提示示例

    `, - { - type: 'alert', - level: 'success', - body: `温馨提示：对页面功能的提示说明，绿色为正向类的消息提示` - }, + { + type: 'alert', + level: 'success', + body: `温馨提示：对页面功能的提示说明，绿色为正向类的消息提示` + }, - { - type: 'alert', - level: 'warning', - body: `您的私有网络已达到配额，如需更多私有网络，可以通过工单申请` - } - ], - aside: '边栏', - toolbar: '工具栏', - initApi: '/api/mock2/page/initDataError' -} + { + type: 'alert', + level: 'warning', + body: `您的私有网络已达到配额，如需更多私有网络，可以通过工单申请` + } + ], + aside: '边栏', + toolbar: '工具栏', + initApi: '/api/mock2/page/initDataError' +}; diff --git a/examples/components/Page/Form.jsx b/examples/components/Page/Form.jsx index fd7620c2..ed3a757a 100644 --- a/examples/components/Page/Form.jsx +++ b/examples/components/Page/Form.jsx @@ -1,23 +1,23 @@ export default { - type: 'page', - title: '表单页面', - body: { - type: 'form', - mode: 'horizontal', - title: '', - api: '/api/mock2/form/saveForm', - controls: [ - { - label: 'Name', - type: 'text', - name: 'name' - }, + type: 'page', + title: '表单页面', + body: { + type: 'form', + mode: 'horizontal', + title: '', + api: '/api/mock2/form/saveForm', + controls: [ + { + label: 'Name', + type: 'text', + name: 'name' + }, - { - label: 'Email', - type: 'email', - name: 'email' - } - ] - } -} + { + label: 'Email', + type: 'email', + name: 'email' + } + ] + } +}; diff --git a/examples/components/Page/Simple.jsx b/examples/components/Page/Simple.jsx index 792f3e13..6f7a57d3 100644 --- a/examples/components/Page/Simple.jsx +++ b/examples/components/Page/Simple.jsx @@ -1,9 +1,9 @@ export default { - type: 'page', - title: '标题', - remark: '提示 Tip', - body: "内容部分. 可以使用 \\${var} 获取变量。如: `\\$date`: ${date}", - aside: '边栏部分', - toolbar: '工具栏', - initApi: '/api/mock2/page/initData' -} + type: 'page', + title: '标题', + remark: '提示 Tip', + body: '内容部分. 可以使用 \\${var} 获取变量。如: `\\$date`: ${date}', + aside: '边栏部分', + toolbar: '工具栏', + initApi: '/api/mock2/page/initData' +}; diff --git a/examples/components/Play.jsx b/examples/components/Play.jsx index eee6f0b3..d6bcf049 100644 --- a/examples/components/Play.jsx +++ b/examples/components/Play.jsx @@ -1,7 +1,5 @@ import React from 'react'; -import { - toast -} from '../../src/components/Toast'; +import {toast} from '../../src/components/Toast'; import {render} from '../../src/index'; import axios from 'axios'; import Frame from 'react-frame-component'; @@ -18,14 +16,14 @@ const DEFAULT_CONTENT = `{ }`; const scopes = { - 'none': ``, + none: ``, - 'body': `{ + body: `{ "type": "page", "body": SCHEMA_PLACEHOLDER }`, - 'form': `{ + form: `{ "type": "page", "body": { "title": "", @@ -39,7 +37,7 @@ const scopes = { } }`, - 'form-item': `{ + 'form-item': `{ "type": "page", "body": { "title": "", @@ -53,229 +51,247 @@ const scopes = { "actions": [] } }` - }; export default class PlayGround extends React.Component { + state = null; + startX = 0; + oldContents = ''; + frameTemplate; - state = null; - startX = 0; - oldContents = ''; - frameTemplate; + static defaultProps = { + useIFrame: false, + vertical: false + }; - static defaultProps = { - useIFrame: false, - vertical: false + constructor(props) { + super(props); + + const schema = this.buildSchema(props.code || DEFAULT_CONTENT, props); + this.state = { + asideWidth: props.asideWidth || Math.max(300, window.innerWidth * 0.3), + schema: schema, + schemaCode: JSON.stringify(schema, null, 2) }; - constructor(props) { - super(props); - - const schema = this.buildSchema(props.code || DEFAULT_CONTENT, props); - this.state = { - asideWidth: props.asideWidth || Math.max(300, window.innerWidth * 0.3), - schema: schema, - schemaCode: JSON.stringify(schema, null, 2) + this.handleMouseDown = this.handleMouseDown.bind(this); + this.handleMouseMove = this.handleMouseMove.bind(this); + this.handleMouseUp = this.handleMouseUp.bind(this); + this.removeWindowEvents = this.removeWindowEvents.bind(this); + this.handleChange = this.handleChange.bind(this); + this.schemaProps = { + style: { + height: '100%' + } + }; + this.env = { + updateLocation: () => {}, + fetcher: config => { + config = { + dataType: 'json', + ...config }; - this.handleMouseDown = this.handleMouseDown.bind(this); - this.handleMouseMove = this.handleMouseMove.bind(this); - this.handleMouseUp = this.handleMouseUp.bind(this); - this.removeWindowEvents = this.removeWindowEvents.bind(this); - this.handleChange = this.handleChange.bind(this); - this.schemaProps = { - style: { - height: '100%' - } - }; - this.env = { - updateLocation: () => { - }, - fetcher: config => { - config = { - dataType: 'json', - ...config - }; - - if (config.dataType === 'json' && config.data) { - config.data = JSON.stringify(config.data) - config.headers = config.headers || {}; - config.headers['Content-Type'] = 'application/json'; - } - - return axios[config.method](config.url, config.data, config); - }, - notify: (type, msg) => toast[type] ? toast[type](msg, type === 'error' ? '系统错误' : '系统消息') : console.warn('[Notify]', type, msg) + if (config.dataType === 'json' && config.data) { + config.data = JSON.stringify(config.data); + config.headers = config.headers || {}; + config.headers['Content-Type'] = 'application/json'; } - const links = [].slice.call(document.head.querySelectorAll('link,style')).map(item => item.outerHTML); - this.frameTemplate = `${links.join('')}
    `; + return axios[config.method](config.url, config.data, config); + }, + notify: (type, msg) => + toast[type] + ? toast[type](msg, type === 'error' ? '系统错误' : '系统消息') + : console.warn('[Notify]', type, msg) + }; + + const links = [].slice + .call(document.head.querySelectorAll('link,style')) + .map(item => item.outerHTML); + this.frameTemplate = `${links.join( + '' + )}
    `; + } + + componentWillReceiveProps(nextprops) { + const props = this.props; + + if (props.code !== nextprops.code) { + const schema = this.buildSchema( + nextprops.code || DEFAULT_CONTENT, + nextprops + ); + this.setState({ + schema: schema, + schemaCode: JSON.stringify(schema, null, 2) + }); } + } - componentWillReceiveProps(nextprops) { - const props = this.props; + componentDidMount() { + this.props.setAsideFolded && this.props.setAsideFolded(true); + } - if (props.code !== nextprops.code) { - const schema = this.buildSchema(nextprops.code || DEFAULT_CONTENT, nextprops); - this.setState({ - schema: schema, - schemaCode: JSON.stringify(schema, null, 2) - }); - } - } + componentWillUnmount() { + this.props.setAsideFolded && this.props.setAsideFolded(false); + } - componentDidMount() { - this.props.setAsideFolded && this.props.setAsideFolded(true); - } + buildSchema(schemaContent, props = this.props) { + const query = props.location.query; - componentWillUnmount() { - this.props.setAsideFolded && this.props.setAsideFolded(false); - } + try { + const scope = query.scope || props.scope; - buildSchema(schemaContent, props = this.props) { - const query = props.location.query; - - try { - const scope = query.scope || props.scope; - - if (scope && scopes[scope]) { - schemaContent = scopes[scope].replace('SCHEMA_PLACEHOLDER', schemaContent); - } - - schemaContent = stripJsonComments(schemaContent).replace(/('|")raw:/g, '$1'); // 去掉注释 - - return JSON.parse(schemaContent); - } catch (e) { - console.error(this.formatMessage(e.message, schemaContent)); - } - - return {}; - } - - formatMessage(message, input) { - if (/position\s?(\d+)$/.test(message)) { - const lines = input.substring(0, parseInt(RegExp.$1, 10)).split(/\n|\r\n|\r/); - message = `Json 语法错误，请检测。出错位置：${lines.length}，列：${lines[lines.length -1].length}。`; - } - - return message; - } - - renderPreview() { - const schema = this.state.schema; - - if (!this.props.useIFrame) { - return render(schema, this.schemaProps, this.env); - } - - return ( - - {render(schema, this.schemaProps, this.env)} - + if (scope && scopes[scope]) { + schemaContent = scopes[scope].replace( + 'SCHEMA_PLACEHOLDER', + schemaContent ); + } + + schemaContent = stripJsonComments(schemaContent).replace( + /('|")raw:/g, + '$1' + ); // 去掉注释 + + return JSON.parse(schemaContent); + } catch (e) { + console.error(this.formatMessage(e.message, schemaContent)); } - handleChange(value) { - this.setState({ - schemaCode: value - }); + return {}; + } - try { - const schema = JSON.parse(value); - - this.setState({ - schema - }); - } catch (e) { - //ignore - } + formatMessage(message, input) { + if (/position\s?(\d+)$/.test(message)) { + const lines = input + .substring(0, parseInt(RegExp.$1, 10)) + .split(/\n|\r\n|\r/); + message = `Json 语法错误，请检测。出错位置：${lines.length}，列：${ + lines[lines.length - 1].length + }。`; } - handleMouseDown(e) { - this.startX = e.clientX; - this.startWidth = this.state.asideWidth; + return message; + } - // this.startPosition.y = e.clientY; + renderPreview() { + const schema = this.state.schema; - window.addEventListener('mouseup', this.handleMouseUp); - window.addEventListener('mousemove', this.handleMouseMove); - return false; + if (!this.props.useIFrame) { + return render(schema, this.schemaProps, this.env); } - handleMouseMove(e) { - const diff = this.startX - e.clientX; - e.preventDefault(); + return ( + + {render(schema, this.schemaProps, this.env)} + + ); + } - this.setState({ - asideWidth: Math.min(800, Math.max(200, this.startWidth + diff)) - }); + handleChange(value) { + this.setState({ + schemaCode: value + }); + + try { + const schema = JSON.parse(value); + + this.setState({ + schema + }); + } catch (e) { + //ignore } + } - handleMouseUp() { - this.removeWindowEvents(); - } + handleMouseDown(e) { + this.startX = e.clientX; + this.startWidth = this.state.asideWidth; - removeWindowEvents() { - window.removeEventListener('mouseup', this.handleMouseUp); - window.removeEventListener('mousemove', this.handleMouseMove); - } + // this.startPosition.y = e.clientY; - renderEditor() { - return ( - - ); - } + window.addEventListener('mouseup', this.handleMouseUp); + window.addEventListener('mousemove', this.handleMouseMove); + return false; + } - render() { - const { - vertical - } = this.props; - if (vertical) { - return ( -
    -
    -
    -
    - {this.renderPreview()} -
    -
    -
    -
    -
    - {this.renderEditor()} -
    -
    -
    - ); - } + handleMouseMove(e) { + const diff = this.startX - e.clientX; + e.preventDefault(); - return ( -
    -
    -
    -
    - {this.renderPreview()} -
    -
    -
    -
    - {this.renderEditor()} -
    -
    + this.setState({ + asideWidth: Math.min(800, Math.max(200, this.startWidth + diff)) + }); + } + + handleMouseUp() { + this.removeWindowEvents(); + } + + removeWindowEvents() { + window.removeEventListener('mouseup', this.handleMouseUp); + window.removeEventListener('mousemove', this.handleMouseMove); + } + + renderEditor() { + return ( + + ); + } + + render() { + const {vertical} = this.props; + if (vertical) { + return ( +
    +
    +
    +
    + {this.renderPreview()} +
    - ); +
    +
    +
    {this.renderEditor()}
    +
    +
    + ); } + + return ( +
    +
    +
    +
    + {this.renderPreview()} +
    +
    +
    +
    + {this.renderEditor()} +
    +
    +
    + ); + } } diff --git a/examples/components/SchemaRender.jsx b/examples/components/SchemaRender.jsx index bd517d34..85d9a019 100644 --- a/examples/components/SchemaRender.jsx +++ b/examples/components/SchemaRender.jsx @@ -3,187 +3,207 @@ import {render} from '../../src/index'; import axios from 'axios'; import {toast} from '../../src/components/Toast'; import {alert, confirm} from '../../src/components/Alert'; -import Button from '../../src/components/Button' -import LazyComponent from '../../src/components/LazyComponent' -import {default as DrawerContainer} from '../../src/components/Drawer' -import { Portal } from 'react-overlays'; +import Button from '../../src/components/Button'; +import LazyComponent from '../../src/components/LazyComponent'; +import {default as DrawerContainer} from '../../src/components/Drawer'; +import {Portal} from 'react-overlays'; import {withRouter} from 'react-router'; function loadEditor() { - return new Promise((resolve) => require(['../../src/components/Editor'], (component) => resolve(component.default))); + return new Promise(resolve => + require(['../../src/components/Editor'], component => + resolve(component.default)) + ); } export default function(schema) { - if (!schema['$schema']) { - schema = { - '$schema': 'https://houtai.baidu.com/v2/schemas/page.json', - ...schema - }; - } + if (!schema['$schema']) { + schema = { + $schema: 'https://houtai.baidu.com/v2/schemas/page.json', + ...schema + }; + } - - return withRouter(class extends React.Component { - static displayName = 'SchemaRenderer'; - state = {open: false}; - toggleCode = () => this.setState({ - open: !this.state.open + return withRouter( + class extends React.Component { + static displayName = 'SchemaRenderer'; + state = {open: false}; + toggleCode = () => + this.setState({ + open: !this.state.open }); - close = () => this.setState({ - open: false + close = () => + this.setState({ + open: false }); - constructor(props) { - super(props); - const {router} = props; - const normalizeLink = (to) => { - to = to || ''; - const location = router.getCurrentLocation(); + constructor(props) { + super(props); + const {router} = props; + const normalizeLink = to => { + to = to || ''; + const location = router.getCurrentLocation(); - if (to && to[0] === '#') { - to = location.pathname + location.search + to; - } else if (to && to[0] === '?') { - to = location.pathname + to; - } + if (to && to[0] === '#') { + to = location.pathname + location.search + to; + } else if (to && to[0] === '?') { + to = location.pathname + to; + } - const idx = to.indexOf('?'); - const idx2 = to.indexOf('#'); - let pathname = ~idx ? to.substring(0, idx) : ~idx2 ? to.substring(0, idx2) : to; - let search = ~idx ? to.substring(idx, ~idx2 ? idx2 : undefined) : ''; - let hash = ~idx2 ? to.substring(idx2) : ''; - - if (!pathname) { - pathname = location.pathname; - } else if (pathname[0] != '/' && !/^https?:\/\//.test(pathname)) { - let relativeBase = location.pathname; - const paths = relativeBase.split('/'); - paths.pop(); - let m; - while ((m = /^\.\.?\//.exec(pathname))) { - if (m[0] === '../') { - paths.pop(); - } - pathname = pathname.substring(m[0].length); - } - pathname = paths.concat(pathname).join('/'); - } - - return pathname + search + hash; + const idx = to.indexOf('?'); + const idx2 = to.indexOf('#'); + let pathname = ~idx + ? to.substring(0, idx) + : ~idx2 + ? to.substring(0, idx2) + : to; + let search = ~idx ? to.substring(idx, ~idx2 ? idx2 : undefined) : ''; + let hash = ~idx2 ? to.substring(idx2) : ''; + + if (!pathname) { + pathname = location.pathname; + } else if (pathname[0] != '/' && !/^https?:\/\//.test(pathname)) { + let relativeBase = location.pathname; + const paths = relativeBase.split('/'); + paths.pop(); + let m; + while ((m = /^\.\.?\//.exec(pathname))) { + if (m[0] === '../') { + paths.pop(); + } + pathname = pathname.substring(m[0].length); } - this.env = { - updateLocation: (location, replace) => { - router[replace ? 'replace' : 'push'](normalizeLink(location)); - }, - isCurrentUrl: (to) => { - const link = normalizeLink(to); - return router.isActive(link); - }, - jumpTo: (to) => { - to = normalizeLink(to); - - if (/^https?:\/\//.test(to)) { - window.location.replace(to); - } else { - router.push(to); - } - }, - fetcher: ({ - url, - method, - data, - config - }) => { - if (data && data instanceof FormData) { - // config.headers = config.headers || {}; - // config.headers['Content-Type'] = 'multipart/form-data'; - } else if (data - && typeof data !== 'string' - && !(data instanceof Blob) - && !(data instanceof ArrayBuffer) - ) { - data = JSON.stringify(data); - config = config || {}; - config.headers = config.headers || {}; - config.headers['Content-Type'] = 'application/json'; - } + pathname = paths.concat(pathname).join('/'); + } - if (method !== 'post' && method !== 'put' && method !== 'patch') { - if (data) { - if (method === 'delete') { - config.data = data; - } else { - config.params = data; - } - } + return pathname + search + hash; + }; + this.env = { + updateLocation: (location, replace) => { + router[replace ? 'replace' : 'push'](normalizeLink(location)); + }, + isCurrentUrl: to => { + const link = normalizeLink(to); + return router.isActive(link); + }, + jumpTo: to => { + to = normalizeLink(to); - return axios[method](url, config); - } + if (/^https?:\/\//.test(to)) { + window.location.replace(to); + } else { + router.push(to); + } + }, + fetcher: ({url, method, data, config}) => { + if (data && data instanceof FormData) { + // config.headers = config.headers || {}; + // config.headers['Content-Type'] = 'multipart/form-data'; + } else if ( + data && + typeof data !== 'string' && + !(data instanceof Blob) && + !(data instanceof ArrayBuffer) + ) { + data = JSON.stringify(data); + config = config || {}; + config.headers = config.headers || {}; + config.headers['Content-Type'] = 'application/json'; + } - return axios[method](url, data, config); - }, - isCancel: value => axios.isCancel(value), - notify: (type, msg) => toast[type] ? toast[type](msg, type === 'error' ? '系统错误' : '系统消息') : console.warn('[Notify]', type, msg), - alert, - confirm, - copy: (content) => console.log('Copy', content) - }; + if (method !== 'post' && method !== 'put' && method !== 'patch') { + if (data) { + if (method === 'delete') { + config.data = data; + } else { + config.params = data; + } + } - this.handleEditorMount = this.handleEditorMount.bind(this); - } + return axios[method](url, config); + } - handleEditorMount(editor, monaco) { - monaco.languages.json.jsonDefaults.setDiagnosticsOptions({ - enableSchemaRequest: true, - validate: true - }); - } + return axios[method](url, data, config); + }, + isCancel: value => axios.isCancel(value), + notify: (type, msg) => + toast[type] + ? toast[type](msg, type === 'error' ? '系统错误' : '系统消息') + : console.warn('[Notify]', type, msg), + alert, + confirm, + copy: content => console.log('Copy', content) + }; - renderCode() { - return ( - - ); - } + this.handleEditorMount = this.handleEditorMount.bind(this); + } - renderSchema() { - const { - router, - location, - theme - } = this.props; + handleEditorMount(editor, monaco) { + monaco.languages.json.jsonDefaults.setDiagnosticsOptions({ + enableSchemaRequest: true, + validate: true + }); + } - return render(schema, { - location, - theme - }, this.env); - } + renderCode() { + return ( + + ); + } - render() { - const ns = this.props.classPrefix; - const showCode = this.props.showCode; - return ( -
    - {showCode !== false ? ( - - {this.state.open ? this.renderCode() : null} - - ) : null } - {this.renderSchema()} - {showCode !== false ? ( - document.querySelector('.navbar-nav')}> - - - ) : null} -
    - ); - } - }); + renderSchema() { + const {router, location, theme} = this.props; + + return render( + schema, + { + location, + theme + }, + this.env + ); + } + + render() { + const ns = this.props.classPrefix; + const showCode = this.props.showCode; + return ( +
    + {showCode !== false ? ( + + {this.state.open ? this.renderCode() : null} + + ) : null} + {this.renderSchema()} + {showCode !== false ? ( + document.querySelector('.navbar-nav')}> + + + ) : null} +
    + ); + } + } + ); } diff --git a/examples/components/Sdk/Test.jsx b/examples/components/Sdk/Test.jsx index 744c47ad..ad9f65a8 100644 --- a/examples/components/Sdk/Test.jsx +++ b/examples/components/Sdk/Test.jsx @@ -2,89 +2,93 @@ import React from 'react'; import TitleBar from '../../../src/components/TitleBar'; import {render} from '../../../src/index'; - export default class SdkTest extends React.Component { - state = { - data: { - name: 'Amis Renderer', - id: 1, - email: 'xxx@xxx.com' - } - }; - - renderForm() { - return render({ - title: '', - type: 'form', - controls: [ - { - type: 'text', - name: 'name', - label: 'Name' - }, - - { - type: 'text', - name: 'id', - label: 'Id' - }, - - { - type: 'email', - name: 'email', - label: 'Email' - }, - - { - type: 'static', - label: '最后更新时间', - name: 'lastModified' - } - ] - }, { - data: this.state.data, - onFailed: (reason, errors) => { - console.log('Submit Failed', errors, '\n', reason); - }, - onSubmit: (values) => { - console.log('Submit', values); - }, - onChange: (values, diff) => { - this.setState({ - data: { - ...values, - lastModified: new Date() - } - }); - - console.log('Diff', diff); - }, - }); + state = { + data: { + name: 'Amis Renderer', + id: 1, + email: 'xxx@xxx.com' } + }; - handleClick = () => { - this.setState({ + renderForm() { + return render( + { + title: '', + type: 'form', + controls: [ + { + type: 'text', + name: 'name', + label: 'Name' + }, + + { + type: 'text', + name: 'id', + label: 'Id' + }, + + { + type: 'email', + name: 'email', + label: 'Email' + }, + + { + type: 'static', + label: '最后更新时间', + name: 'lastModified' + } + ] + }, + { + data: this.state.data, + onFailed: (reason, errors) => { + console.log('Submit Failed', errors, '\n', reason); + }, + onSubmit: values => { + console.log('Submit', values); + }, + onChange: (values, diff) => { + this.setState({ data: { - name: 'Amis Renderer', - id: Math.round(Math.random() * 1000), - email: 'xxx@xxx.com' + ...values, + lastModified: new Date() } - }) - }; + }); - render() { - return ( -
    - -
    - {this.renderForm()} + console.log('Diff', diff); + } + } + ); + } - + handleClick = () => { + this.setState({ + data: { + name: 'Amis Renderer', + id: Math.round(Math.random() * 1000), + email: 'xxx@xxx.com' + } + }); + }; -

    当前值

    - 
    {JSON.stringify(this.state.data, null, 2)}
    -
    -
    - ); - } + render() { + return ( +
    + +
    + {this.renderForm()} + + + +

    当前值

    + 
    +            {JSON.stringify(this.state.data, null, 2)}
+
    +
    +
    + ); + } } diff --git a/examples/components/Services/Data.jsx b/examples/components/Services/Data.jsx index 01b42700..38a1db28 100644 --- a/examples/components/Services/Data.jsx +++ b/examples/components/Services/Data.jsx @@ -1,118 +1,118 @@ export default { - type: 'page', - title: '动态加载数据', - body: [ - '除了用 Page、CRUD、Form 或者 Wizard 能拉取数据外，还可以通过 Service 专门拉取数据，然后丢给其他类型的渲染器渲染。', + type: 'page', + title: '动态加载数据', + body: [ + '除了用 Page、CRUD、Form 或者 Wizard 能拉取数据外，还可以通过 Service 专门拉取数据，然后丢给其他类型的渲染器渲染。', + + { + type: 'form', + title: '条件输入', + className: 'm-t', + wrapWithPanel: false, + target: 'service1', + mode: 'inline', + controls: [ + { + type: 'text', + name: 'keywords', + placeholder: '关键字', + addOn: { + type: 'button', + icon: 'fa fa-search', + actionType: 'submit', + level: 'primary' + } + } + ] + }, + + { + name: 'service1', + type: 'service', + className: 'm-t', + api: '/api/mock2/service/data?keywords=${keywords}', + body: [ + '当前关键字是 ${keywords}，当前时间是： ${date|date:YYYY-MM-DD HH\\:mm}', { - type: 'form', - title: '条件输入', - className: 'm-t', - wrapWithPanel: false, - target: 'service1', - mode: 'inline', - controls: [ - { - type: 'text', - name: 'keywords', - placeholder: '关键字', - addOn: { - type: 'button', - icon: 'fa fa-search', - actionType: 'submit', - level: 'primary' - } - } - ] + type: 'table', + className: 'm-t', + source: '${table1}', + columns: [ + { + name: 'id', + label: 'ID', + type: 'text' + }, + { + name: 'text', + label: '文本', + type: 'text' + }, + { + type: 'image', + label: '图片', + name: 'image', + popOver: { + title: '查看大图', + body: + '
    ' + } + }, + { + name: 'date', + type: 'date', + label: '日期' + } + ] }, { - name: 'service1', - type: 'service', - className: 'm-t', - api: '/api/mock2/service/data?keywords=${keywords}', - body: [ - '当前关键字是 ${keywords}，当前时间是： ${date|date:YYYY-MM-DD HH\\:mm}', + type: 'table', + source: '${table2}', + columns: [ + { + name: 'progress', + label: '进度', + type: 'progress' + }, + { + name: 'boolean', + label: '状态', + type: 'status' + }, + { + name: 'boolean', + label: '开关', + type: 'switch' + // readOnly: false // 可以开启修改模式 + }, + { + name: 'type', + label: '映射', + type: 'mapping', + map: { + '*': '其他：${type}', + '1': "漂亮", + '2': "开心", + '3': "惊吓", + '4': "紧张" + } + }, - - { - type: 'table', - className: 'm-t', - source: '${table1}', - columns: [ - { - name: "id", - label: "ID", - type: "text" - }, - { - name: "text", - label: "文本", - type: "text" - }, - { - type: 'image', - label: '图片', - name: 'image', - popOver: { - title: '查看大图', - body: '
    ' - } - }, - { - name: 'date', - type: 'date', - label: '日期' - } - ] - }, - - { - type: 'table', - source: '${table2}', - columns: [ - { - name: "progress", - label: "进度", - type: "progress" - }, - { - name: "boolean", - label: "状态", - type: "status" - }, - { - name: "boolean", - label: "开关", - type: "switch", - // readOnly: false // 可以开启修改模式 - }, - { - name: "type", - label: "映射", - type: "mapping", - map: { - "*": "其他：${type}", - "1": "漂亮", - "2": "开心", - "3": "惊吓", - "4": "紧张" - } - }, - - { - name: 'list', - type: 'list', - label: 'List', - placeholder: '-', - listItem: { - title: '${title}', - subTitle: '${description}' - } - } - ] - } - ] + { + name: 'list', + type: 'list', + label: 'List', + placeholder: '-', + listItem: { + title: '${title}', + subTitle: '${description}' + } + } + ] } - ] -} + ] + } + ] +}; diff --git a/examples/components/Services/Form.jsx b/examples/components/Services/Form.jsx index 898eac2d..b51ef8fe 100644 --- a/examples/components/Services/Form.jsx +++ b/examples/components/Services/Form.jsx @@ -1,68 +1,68 @@ export default { - type: 'page', - title: '动态加载表单中的部分', - body: [ - '同样通过 service的schemaApi 来加载部分内容，当然也可以全部由它来加载', + type: 'page', + title: '动态加载表单中的部分', + body: [ + '同样通过 service的schemaApi 来加载部分内容，当然也可以全部由它来加载', + + { + type: 'form', + panelClassName: 'Panel--info m-t', + target: 'service1', + mode: 'horizontal', + api: '/api/mock2/form/saveForm?waitSeconds=1', + fieldSet: [ + { + title: '基本信息', + controls: [ + { + type: 'text', + label: '字段一', + name: 'filed1' + }, + + { + type: 'text', + label: '字段二', + name: 'filed2' + } + ] + }, { - type: 'form', - panelClassName: 'Panel--info m-t', - target: 'service1', - mode: 'horizontal', - api: '/api/mock2/form/saveForm?waitSeconds=1', - fieldSet: [ + title: '其他信息', + controls: [ + { + name: 'tpl', + type: 'select', + label: '模板', + inline: true, + required: true, + value: 'tpl1', + options: [ { - title: '基本信息', - controls: [ - { - type: 'text', - label: '字段一', - name: 'filed1', - }, - - { - type: 'text', - label: '字段二', - name: 'filed2' - } - ] + label: '模板1', + value: 'tpl1' }, - { - title: '其他信息', - controls: [ - { - name: 'tpl', - type: 'select', - label: '模板', - inline: true, - required: true, - value: 'tpl1', - options: [ - { - label: '模板1', - value: 'tpl1' - }, - { - label: '模板2', - value: 'tpl2' - }, - { - label: '模板3', - value: 'tpl3' - } - ] - }, - - { - type: 'service', - className: 'm-t', - initFetchSchemaOn: 'data.tpl', - schemaApi: '/api/mock2/service/form?tpl=$tpl', - } - ] + label: '模板2', + value: 'tpl2' + }, + { + label: '模板3', + value: 'tpl3' } - ] + ] + }, + + { + type: 'service', + className: 'm-t', + initFetchSchemaOn: 'data.tpl', + schemaApi: '/api/mock2/service/form?tpl=$tpl' + } + ] } - ] -} + ] + } + ] +}; diff --git a/examples/components/Services/Schema.jsx b/examples/components/Services/Schema.jsx index 0ea77d41..afa08b42 100644 --- a/examples/components/Services/Schema.jsx +++ b/examples/components/Services/Schema.jsx @@ -1,50 +1,50 @@ export default { - type: 'page', - title: '动态加载页面', - body: [ - '可以通过 service的schemaApi 动态控制内容。', + type: 'page', + title: '动态加载页面', + body: [ + '可以通过 service的schemaApi 动态控制内容。', + { + type: 'form', + title: '条件输入', + panelClassName: 'panel-info m-t', + target: 'service1', + mode: 'inline', + submitOnInit: true, + controls: [ { - type: 'form', - title: '条件输入', - panelClassName: 'panel-info m-t', - target: 'service1', - mode: 'inline', - submitOnInit: true, - controls: [ - { - label: '加载页面类型', - required: true, - type: 'button-group', - submitOnChange: true, - value: 'crud', - name: 'type', - options: [ - { - label: 'Crud', - value: 'crud' - }, + label: '加载页面类型', + required: true, + type: 'button-group', + submitOnChange: true, + value: 'crud', + name: 'type', + options: [ + { + label: 'Crud', + value: 'crud' + }, - { - label: 'Form', - value: 'form' - }, + { + label: 'Form', + value: 'form' + }, - { - label: 'Tabs', - value: 'tabs' - } - ] - } - ] - }, - - { - name: 'service1', - type: 'service', - className: 'm-t', - initFetchSchema: false, - schemaApi: '/api/mock2/service/schema?type=$type', + { + label: 'Tabs', + value: 'tabs' + } + ] } - ] -} + ] + }, + + { + name: 'service1', + type: 'service', + className: 'm-t', + initFetchSchema: false, + schemaApi: '/api/mock2/service/schema?type=$type' + } + ] +}; diff --git a/examples/components/Tabs/Form.jsx b/examples/components/Tabs/Form.jsx index a64cc5cd..38372bee 100644 --- a/examples/components/Tabs/Form.jsx +++ b/examples/components/Tabs/Form.jsx @@ -1,47 +1,48 @@ export default { - type: 'page', - title: '表单中选项卡分组', - subTitle: '', - body: [ - '

    多个 controls 可以通过 tabs 来分组展示，表单将作为一个整体提交。

    ', + type: 'page', + title: '表单中选项卡分组', + subTitle: '', + body: [ + '

    多个 controls 可以通过 tabs 来分组展示，表单将作为一个整体提交。

    ', + { + type: 'form', + title: '', + tabs: [ { - type: 'form', - title: '', - tabs: [ + title: '选项卡1', + hash: 'tab1', + controls: [ { - title: '选项卡1', - hash: 'tab1', - controls: [ - { - type: 'text', - label: '文本1', - name: 'a' - } - ] - }, - { - title: '选项卡2', - hash: 'tab2', - controls: [ - { - type: 'text', - label: '文本2', - name: 'b' - } - ] - }, - - { - title: '选项卡3', - hash: 'tab3', - controls: [ - { - type: 'text', - label: '文本3', - name: 'c' - } - ] + type: 'text', + label: '文本1', + name: 'a' } - ] - }] -} + ] + }, + { + title: '选项卡2', + hash: 'tab2', + controls: [ + { + type: 'text', + label: '文本2', + name: 'b' + } + ] + }, + + { + title: '选项卡3', + hash: 'tab3', + controls: [ + { + type: 'text', + label: '文本3', + name: 'c' + } + ] + } + ] + } + ] +}; diff --git a/examples/components/Tabs/Normal.jsx b/examples/components/Tabs/Normal.jsx index 6dcd5352..e43c73ab 100644 --- a/examples/components/Tabs/Normal.jsx +++ b/examples/components/Tabs/Normal.jsx @@ -1,165 +1,163 @@ export default { - type: 'page', - title: '选项卡示例', - subTitle: '所有选项卡都在当前页面中，包括默认、line、card以及radio模式', - body: [ + type: 'page', + title: '选项卡示例', + subTitle: '所有选项卡都在当前页面中，包括默认、line、card以及radio模式', + body: [ + { + type: 'tabs', + tabs: [ { - type: 'tabs', - tabs: [ - { - title: '选项卡1', - hash: 'tab1', - body: '选项卡内容1' - }, + title: '选项卡1', + hash: 'tab1', + body: '选项卡内容1' + }, - { - title: '选项卡2', - hash: 'tab2', - body: { - type: 'form', - panelClassName: 'panel-primary', - controls: [ - { - type: 'text', - name: 'a', - label: '文本' - } - ] - } - }, - - { - title: '选项卡3', - body: { - type: "crud", - api: "/api/sample", - filter: { - title: "条件搜索", - submitText: "", - controls: [ - { - type: "text", - name: "keywords", - placeholder: "通过关键字搜索", - clearable: true, - addOn: { - label: "搜索", - type: "submit" - } - }, - { - type: "plain", - text: "这里的表单项可以配置多个" - } - ] - }, - columns: [ - { - name: "id", - label: "ID", - width: 20 - }, - { - name: "engine", - label: "Rendering engine" - }, - { - name: "browser", - label: "Browser" - }, - { - name: "platform", - label: "Platform(s)" - }, - { - name: "version", - label: "Engine version" - }, - { - name: "grade", - label: "CSS grade" - }, - { - type: "operation", - label: "操作", - width: 100, - buttons: [ - ] - } - ] - } - } + { + title: '选项卡2', + hash: 'tab2', + body: { + type: 'form', + panelClassName: 'panel-primary', + controls: [ + { + type: 'text', + name: 'a', + label: '文本' + } ] + } }, - { - type: 'divider' - }, - { - type: 'tabs', - mode: 'line', - tabs: [ - { - title: '选项卡1', - body: '选项卡内容1' - }, + { + title: '选项卡3', + body: { + type: 'crud', + api: '/api/sample', + filter: { + title: '条件搜索', + submitText: '', + controls: [ { - title: '选项卡2', - body: '选项卡内容2' + type: 'text', + name: 'keywords', + placeholder: '通过关键字搜索', + clearable: true, + addOn: { + label: '搜索', + type: 'submit' + } }, - { - title: '选项卡3', - body: '选项卡内容3' + type: 'plain', + text: '这里的表单项可以配置多个' } + ] + }, + columns: [ + { + name: 'id', + label: 'ID', + width: 20 + }, + { + name: 'engine', + label: 'Rendering engine' + }, + { + name: 'browser', + label: 'Browser' + }, + { + name: 'platform', + label: 'Platform(s)' + }, + { + name: 'version', + label: 'Engine version' + }, + { + name: 'grade', + label: 'CSS grade' + }, + { + type: 'operation', + label: '操作', + width: 100, + buttons: [] + } ] - }, + } + } + ] + }, + { + type: 'divider' + }, + { + type: 'tabs', + mode: 'line', + tabs: [ { - type: 'divider' + title: '选项卡1', + body: '选项卡内容1' }, + { - type: 'tabs', - mode: 'card', - tabs: [ - { - title: '选项卡1', - body: '选项卡内容1' - }, - - { - title: '选项卡2', - body: '选项卡内容2' - }, - - { - title: '选项卡3', - body: '选项卡内容3' - } - ] + title: '选项卡2', + body: '选项卡内容2' }, + { - type: 'divider' - }, + title: '选项卡3', + body: '选项卡内容3' + } + ] + }, + { + type: 'divider' + }, + { + type: 'tabs', + mode: 'card', + tabs: [ { - type: 'tabs', - mode: 'radio', - tabs: [ - { - title: '选项卡1', - body: '选项卡内容1' - }, - - { - title: '选项卡2', - body: '选项卡内容2' - }, - - { - title: '选项卡3', - body: '选项卡内容3' - } - ] + title: '选项卡1', + body: '选项卡内容1' }, - ] -} + { + title: '选项卡2', + body: '选项卡内容2' + }, + + { + title: '选项卡3', + body: '选项卡内容3' + } + ] + }, + { + type: 'divider' + }, + { + type: 'tabs', + mode: 'radio', + tabs: [ + { + title: '选项卡1', + body: '选项卡内容1' + }, + + { + title: '选项卡2', + body: '选项卡内容2' + }, + + { + title: '选项卡3', + body: '选项卡内容3' + } + ] + } + ] +}; diff --git a/examples/components/Tabs/Tab1.jsx b/examples/components/Tabs/Tab1.jsx index f3993387..881bb9c4 100644 --- a/examples/components/Tabs/Tab1.jsx +++ b/examples/components/Tabs/Tab1.jsx @@ -1,35 +1,35 @@ export default { - type: 'page', - title: '选项卡1页面', - body: [ - '

    也可以多个页面，利用导航nav渲染期模拟 tabs 的效果。这样可以让 url 更加友好，而不是只能用 hash。

    ', + type: 'page', + title: '选项卡1页面', + body: [ + '

    也可以多个页面，利用导航nav渲染期模拟 tabs 的效果。这样可以让 url 更加友好，而不是只能用 hash。

    ', + { + type: 'nav', + links: [ { - type: 'nav', - links: [ - { - label: '选项卡1', - icon: 'fa fa-cloud', - to: './tab1' - }, - - { - label: '选项卡2', - to: './tab2' - }, - - { - label: '选项卡3', - icon: 'fa fa-youtube', - to: './tab3' - } - ] + label: '选项卡1', + icon: 'fa fa-cloud', + to: './tab1' }, { - type: 'wrapper', - className: 'wrapper bg-white b-l b-b b-r', - body: '选项卡1的内容' + label: '选项卡2', + to: './tab2' + }, + + { + label: '选项卡3', + icon: 'fa fa-youtube', + to: './tab3' } - ] -} + ] + }, + + { + type: 'wrapper', + className: 'wrapper bg-white b-l b-b b-r', + body: '选项卡1的内容' + } + ] +}; diff --git a/examples/components/Tabs/Tab2.jsx b/examples/components/Tabs/Tab2.jsx index 33edbdfc..d1ffafd0 100644 --- a/examples/components/Tabs/Tab2.jsx +++ b/examples/components/Tabs/Tab2.jsx @@ -1,35 +1,35 @@ export default { - type: 'page', - title: '选项卡2页面', - body: [ - '

    也可以多个页面，利用导航nav渲染期模拟 tabs 的效果。

    ', + type: 'page', + title: '选项卡2页面', + body: [ + '

    也可以多个页面，利用导航nav渲染期模拟 tabs 的效果。

    ', + { + type: 'nav', + links: [ { - type: 'nav', - links: [ - { - label: '选项卡1', - icon: 'fa fa-cloud', - to: './tab1' - }, - - { - label: '选项卡2', - to: './tab2' - }, - - { - label: '选项卡3', - icon: 'fa fa-youtube', - to: './tab3' - } - ] + label: '选项卡1', + icon: 'fa fa-cloud', + to: './tab1' }, { - type: 'wrapper', - className: 'wrapper bg-white b-l b-b b-r', - body: '选项卡2的内容' + label: '选项卡2', + to: './tab2' + }, + + { + label: '选项卡3', + icon: 'fa fa-youtube', + to: './tab3' } - ] -} + ] + }, + + { + type: 'wrapper', + className: 'wrapper bg-white b-l b-b b-r', + body: '选项卡2的内容' + } + ] +}; diff --git a/examples/components/Tabs/Tab3.jsx b/examples/components/Tabs/Tab3.jsx index 9c98a928..67f8ab8d 100644 --- a/examples/components/Tabs/Tab3.jsx +++ b/examples/components/Tabs/Tab3.jsx @@ -1,121 +1,83 @@ export default { - type: 'page', - title: '选项卡3页面', - body: [ - '

    也可以多个页面，利用导航nav渲染期模拟 tabs 的效果。

    ', + type: 'page', + title: '选项卡3页面', + body: [ + '

    也可以多个页面，利用导航nav渲染期模拟 tabs 的效果。

    ', + { + type: 'nav', + links: [ { - type: 'nav', - links: [ - { - label: '选项卡1', - icon: 'fa fa-cloud', - to: './tab1' - }, - - { - label: '选项卡2', - to: './tab2' - }, - - { - label: '选项卡3', - icon: 'fa fa-youtube', - to: './tab3' - } - ] + label: '选项卡1', + icon: 'fa fa-cloud', + to: './tab1' }, { - type: 'wrapper', - className: 'wrapper bg-white b-l b-b b-r', - body: { - "type": "chart", - "config": { - "title": { - "text": "极坐标双数值轴" - }, - "legend": { - "data": [ - "line" - ] - }, - "polar": { - "center": [ - "50%", - "54%" - ] - }, - "tooltip": { - "trigger": "axis", - "axisPointer": { - "type": "cross" - } - }, - "angleAxis": { - "type": "value", - "startAngle": 0 - }, - "radiusAxis": { - "min": 0 - }, - "series": [ - { - "coordinateSystem": "polar", - "name": "line", - "type": "line", - "showSymbol": false, - "data": [ - [ - 0, - 0 - ], - [ - 0.03487823687206265, - 1 - ], - [ - 0.06958655048003272, - 2 - ], - [ - 0.10395584540887964, - 3 - ], - [ - 0.13781867790849958, - 4 - ], - [ - 0.17101007166283433, - 5 - ], - [ - 0.2033683215379001, - 6 - ], - [ - 0.2347357813929454, - 7 - ], - [ - 0.26495963211660245, - 8 - ], - [ - 0.2938926261462365, - 9 - ], - [ - 0.3213938048432697, - 10 - ] - ] - } - ], - "animationDuration": 2000 - } - } + label: '选项卡2', + to: './tab2' + }, + + { + label: '选项卡3', + icon: 'fa fa-youtube', + to: './tab3' } - ] -} + ] + }, + + { + type: 'wrapper', + className: 'wrapper bg-white b-l b-b b-r', + body: { + type: 'chart', + config: { + title: { + text: '极坐标双数值轴' + }, + legend: { + data: ['line'] + }, + polar: { + center: ['50%', '54%'] + }, + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'cross' + } + }, + angleAxis: { + type: 'value', + startAngle: 0 + }, + radiusAxis: { + min: 0 + }, + series: [ + { + coordinateSystem: 'polar', + name: 'line', + type: 'line', + showSymbol: false, + data: [ + [0, 0], + [0.03487823687206265, 1], + [0.06958655048003272, 2], + [0.10395584540887964, 3], + [0.13781867790849958, 4], + [0.17101007166283433, 5], + [0.2033683215379001, 6], + [0.2347357813929454, 7], + [0.26495963211660245, 8], + [0.2938926261462365, 9], + [0.3213938048432697, 10] + ] + } + ], + animationDuration: 2000 + } + } + } + ] +}; diff --git a/examples/components/Tasks.jsx b/examples/components/Tasks.jsx index 430abfac..10217bbd 100644 --- a/examples/components/Tasks.jsx +++ b/examples/components/Tasks.jsx @@ -1,36 +1,37 @@ export default { - "$schema": "https://houtai.baidu.com/v2/schemas/page.json#", - "title": "异步任务", - "body": [ - '

    ', + $schema: 'https://houtai.baidu.com/v2/schemas/page.json#', + title: '异步任务', + body: [ + '

    ', + { + type: 'tasks', + name: 'tasks', + items: [ { - "type": "tasks", - "name": "tasks", - "items": [ - { - "label": "hive 任务", - "key": "hive", - "status": 4, - "remark": "查看详情日志。" - }, - { - "label": "小流量", - "key": "partial", - "status": 4 - }, - { - "label": "全量", - "key": "full", - "status": 4 - } - ] + label: 'hive 任务', + key: 'hive', + status: 4, + remark: + '查看详情日志。' }, - { - "type": "tasks", - "name": "tasks", - "className": "b-a bg-white table-responsive m-t", - "checkApi": "/api/mock2/task" + label: '小流量', + key: 'partial', + status: 4 + }, + { + label: '全量', + key: 'full', + status: 4 } - ] -} \ No newline at end of file + ] + }, + + { + type: 'tasks', + name: 'tasks', + className: 'b-a bg-white table-responsive m-t', + checkApi: '/api/mock2/task' + } + ] +}; diff --git a/examples/components/Test.jsx b/examples/components/Test.jsx index 0cd20ab9..30959c03 100644 --- a/examples/components/Test.jsx +++ b/examples/components/Test.jsx @@ -1,46 +1,77 @@ import React from 'react'; import Button from '../../src/components/Button'; - export default class TestComponent extends React.Component { - render() { - return ( -
    -
    - + render() { + return ( +
    +
    + - + - + - + - + - + - + - + - -
    + +
    -
    +
    + + + + +
    - - - - -
    - -
    - - - - -
    -
    - ) - } -} \ No newline at end of file +
    + + + +
    +
    + ); + } +} diff --git a/examples/components/Video.jsx b/examples/components/Video.jsx index 897e859f..0330d44a 100644 --- a/examples/components/Video.jsx +++ b/examples/components/Video.jsx @@ -1,14 +1,14 @@ export default { - "$schema": "https://houtai.baidu.com/v2/schemas/page.json#", - "title": "视频播放器", - "body": [ - '

    另外还支持直播流， flv 和 hls 格式

    ', - { - "type": "video", - "autoPlay": false, - "rates": [1.0, 1.5, 2.0], - "src": "https://media.w3.org/2010/05/sintel/trailer_hd.mp4", - "poster": "https://video-react.js.org/assets/poster.png" - } - ] -} \ No newline at end of file + $schema: 'https://houtai.baidu.com/v2/schemas/page.json#', + title: '视频播放器', + body: [ + '

    另外还支持直播流， flv 和 hls 格式

    ', + { + type: 'video', + autoPlay: false, + rates: [1.0, 1.5, 2.0], + src: 'https://media.w3.org/2010/05/sintel/trailer_hd.mp4', + poster: 'https://video-react.js.org/assets/poster.png' + } + ] +}; diff --git a/examples/components/Wizard.jsx b/examples/components/Wizard.jsx index 7e109e62..d8cef709 100644 --- a/examples/components/Wizard.jsx +++ b/examples/components/Wizard.jsx @@ -1,148 +1,142 @@ export default { - "$schema": "https://houtai.baidu.com/v2/schemas/page.json#", - "title": "表单向导", - "body": [ + $schema: 'https://houtai.baidu.com/v2/schemas/page.json#', + title: '表单向导', + body: [ + { + type: 'wizard', + api: '/api/mock2/form/saveForm?waitSeconds=2', + initApi: '/api/mock2/form/initData?waitSeconds=2', + steps: [ { - "type": "wizard", - "api": "/api/mock2/form/saveForm?waitSeconds=2", - "initApi": "/api/mock2/form/initData?waitSeconds=2", - "steps": [ - { - "title": "第一步", - "controls": [ - { - "name": "website", - "label": "网址", - "type": "url", - "required": true - }, - { - "name": "name", - "label": "名称", - "type": "text", - "required": true - } - ] - }, - { - "title": "Step 2", - "controls": [ - { - "name": "email2", - "label": "邮箱", - "type": "email", - "required": true - } - ] - }, - { - "title": "Step 3", - "controls": [ - "这是最后一步了" - ] - } - ] + title: '第一步', + controls: [ + { + name: 'website', + label: '网址', + type: 'url', + required: true + }, + { + name: 'name', + label: '名称', + type: 'text', + required: true + } + ] }, { - "type": "wizard", - "api": "/api/mock2/form/saveForm?waitSeconds=2", - "mode": "vertical", - "steps": [ - { - "title": "第一步", - "controls": [ - { - "name": "website", - "label": "网址", - "type": "url", - "required": true - }, - { - "name": "email", - "label": "邮箱", - "type": "email", - "required": true - } - ] - }, - { - "title": "Step 2", - "controls": [ - { - "name": "email2", - "label": "邮箱", - "type": "email", - "required": true - } - ] - }, - { - "title": "Step 3", - "controls": [ - "这是最后一步了" - ] - } - ] + title: 'Step 2', + controls: [ + { + name: 'email2', + label: '邮箱', + type: 'email', + required: true + } + ] }, { - "type": "wizard", - "steps": [ - { - "title": "第一步", - "controls": [ - { - "name": "website", - "label": "网址", - "type": "url", - "required": true - }, - { - "name": "email", - "label": "邮箱", - "type": "email", - "required": true - } - ], - "api": "/api/mock2/form/saveForm?waitSeconds=2" - }, - { - "title": "第二步", - "controls": [ - { - "name": "test1", - "type": "email", - "label": "Email", - "value": "test@test.com" - }, - { - "type": "divider" - }, - { - "type": "text", - "name": "test2", - "label": "必填示例", - "required": true - }, - { - "type": "divider" - }, - { - "type": "text", - "name": "test3", - "placeholder": "可选" - } - ], - "initApi": "/api/mock2/form/initForm", - "api": "/api/mock2/form/saveForm?waitSeconds=2" - }, - { - "title": "确定", - "controls": [ - "最后一步了，确认要提交吗？" - ], - "api": "/api/mock2/form/saveForm?waitSeconds=2" - } - ] + title: 'Step 3', + controls: ['这是最后一步了'] } - ] -} \ No newline at end of file + ] + }, + { + type: 'wizard', + api: '/api/mock2/form/saveForm?waitSeconds=2', + mode: 'vertical', + steps: [ + { + title: '第一步', + controls: [ + { + name: 'website', + label: '网址', + type: 'url', + required: true + }, + { + name: 'email', + label: '邮箱', + type: 'email', + required: true + } + ] + }, + { + title: 'Step 2', + controls: [ + { + name: 'email2', + label: '邮箱', + type: 'email', + required: true + } + ] + }, + { + title: 'Step 3', + controls: ['这是最后一步了'] + } + ] + }, + { + type: 'wizard', + steps: [ + { + title: '第一步', + controls: [ + { + name: 'website', + label: '网址', + type: 'url', + required: true + }, + { + name: 'email', + label: '邮箱', + type: 'email', + required: true + } + ], + api: '/api/mock2/form/saveForm?waitSeconds=2' + }, + { + title: '第二步', + controls: [ + { + name: 'test1', + type: 'email', + label: 'Email', + value: 'test@test.com' + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'test2', + label: '必填示例', + required: true + }, + { + type: 'divider' + }, + { + type: 'text', + name: 'test3', + placeholder: '可选' + } + ], + initApi: '/api/mock2/form/initForm', + api: '/api/mock2/form/saveForm?waitSeconds=2' + }, + { + title: '确定', + controls: ['最后一步了，确认要提交吗？'], + api: '/api/mock2/form/saveForm?waitSeconds=2' + } + ] + } + ] +}; diff --git a/examples/embed.tsx b/examples/embed.tsx index 91cbd694..9bdad433 100644 --- a/examples/embed.tsx +++ b/examples/embed.tsx @@ -1,208 +1,229 @@ import './polyfills/index'; import React from 'react'; -import { render as renderReact } from 'react-dom'; +import {render as renderReact} from 'react-dom'; import axios from 'axios'; import copy from 'copy-to-clipboard'; import qs from 'qs'; import { - toast, - alert, - confirm, - ToastComponent, - AlertComponent, - render as renderAmis + toast, + alert, + confirm, + ToastComponent, + AlertComponent, + render as renderAmis } from '../src/index'; -export function embed(container: string | HTMLElement, schema: any, data: any, env: any) { - if (typeof container === 'string') { - container = document.querySelector(container) as HTMLElement; - } - if (!container) { - console.error('选择器不对，页面上没有此元素'); - return; - } else if (container.tagName === 'BODY') { - let div = document.createElement('div'); - container.appendChild(div); - container = div; - } - container.classList.add('amis-scope'); - let scoped:any; - const normalizeLink = (to:string) => { - to = to || ''; - const location = window.location; +export function embed( + container: string | HTMLElement, + schema: any, + data: any, + env: any +) { + if (typeof container === 'string') { + container = document.querySelector(container) as HTMLElement; + } + if (!container) { + console.error('选择器不对，页面上没有此元素'); + return; + } else if (container.tagName === 'BODY') { + let div = document.createElement('div'); + container.appendChild(div); + container = div; + } + container.classList.add('amis-scope'); + let scoped: any; + const normalizeLink = (to: string) => { + to = to || ''; + const location = window.location; - if (to && to[0] === '#') { - to = location.pathname + location.search + to; - } else if (to && to[0] === '?') { - to = location.pathname + to; - } - - const idx = to.indexOf('?'); - const idx2 = to.indexOf('#'); - let pathname = ~idx ? to.substring(0, idx) : ~idx2 ? to.substring(0, idx2) : to; - let search = ~idx ? to.substring(idx, ~idx2 ? idx2 : undefined) : ''; - let hash = ~idx2 ? to.substring(idx2) : ''; - - if (!pathname) { - pathname = location.pathname; - } else if (pathname[0] != '/' && !/^https?\:\/\//.test(pathname)) { - let relativeBase = location.pathname; - const paths = relativeBase.split('/'); - paths.pop(); - let m; - while ((m = /^\.\.?\//.exec(pathname))) { - if (m[0] === '../') { - paths.pop(); - } - pathname = pathname.substring(m[0].length); - } - pathname = paths.concat(pathname).join('/'); - } - - return pathname + search + hash; + if (to && to[0] === '#') { + to = location.pathname + location.search + to; + } else if (to && to[0] === '?') { + to = location.pathname + to; } - const responseAdpater = (api:any) => (value:any) => { - let response = value.data; - if (env && env.responseAdpater) { - const url = api.url; - const idx = api.url.indexOf('?'); - const query = ~idx ? qs.parse(api.url.substring(idx)) : {}; - const request = { - ...api, - query: query, - body: api.data - }; - response = env.responseAdpater(api, response, query, request); - } else { - if (response.hasOwnProperty('errno')) { - response.status = response.errno; - response.msg = response.errmsg; - } else if (response.hasOwnProperty('no')) { - response.status = response.no; - response.msg = response.error; - } - } + const idx = to.indexOf('?'); + const idx2 = to.indexOf('#'); + let pathname = ~idx + ? to.substring(0, idx) + : ~idx2 + ? to.substring(0, idx2) + : to; + let search = ~idx ? to.substring(idx, ~idx2 ? idx2 : undefined) : ''; + let hash = ~idx2 ? to.substring(idx2) : ''; - const result = { - ...value, - data: response + if (!pathname) { + pathname = location.pathname; + } else if (pathname[0] != '/' && !/^https?\:\/\//.test(pathname)) { + let relativeBase = location.pathname; + const paths = relativeBase.split('/'); + paths.pop(); + let m; + while ((m = /^\.\.?\//.exec(pathname))) { + if (m[0] === '../') { + paths.pop(); } - return result; + pathname = pathname.substring(m[0].length); + } + pathname = paths.concat(pathname).join('/'); + } + + return pathname + search + hash; + }; + + const responseAdpater = (api: any) => (value: any) => { + let response = value.data; + if (env && env.responseAdpater) { + const url = api.url; + const idx = api.url.indexOf('?'); + const query = ~idx ? qs.parse(api.url.substring(idx)) : {}; + const request = { + ...api, + query: query, + body: api.data + }; + response = env.responseAdpater(api, response, query, request); + } else { + if (response.hasOwnProperty('errno')) { + response.status = response.errno; + response.msg = response.errmsg; + } else if (response.hasOwnProperty('no')) { + response.status = response.no; + response.msg = response.error; + } + } + + const result = { + ...value, + data: response }; + return result; + }; - renderReact(( -
    - - + renderReact( +
    + + - {renderAmis(schema, { - ...data, - scopeRef: (ref:any) => scoped = ref - }, { - getModalContainer: () => document.querySelector('.amis-scope'), - notify: (type: string, msg: string) => toast[type] ? toast[type](msg, type === 'error' ? '系统错误' : '系统消息') : console.warn('[Notify]', type, msg), - alert, - confirm, - updateLocation: (to:any, replace:boolean) => { - if (to === 'goBack') { - return window.history.back(); - } + {renderAmis( + schema, + { + ...data, + scopeRef: (ref: any) => (scoped = ref) + }, + { + getModalContainer: () => document.querySelector('.amis-scope'), + notify: (type: string, msg: string) => + toast[type] + ? toast[type](msg, type === 'error' ? '系统错误' : '系统消息') + : console.warn('[Notify]', type, msg), + alert, + confirm, + updateLocation: (to: any, replace: boolean) => { + if (to === 'goBack') { + return window.history.back(); + } - replace || (location.href = normalizeLink(to)); - }, - isCurrentUrl: (to:string) => { - const link = normalizeLink(to); - const location = window.location; - let pathname = link; - let search = ''; - const idx = link.indexOf('?'); - if (~idx) { - pathname = link.substring(0, idx); - search = link.substring(idx); - } + replace || (location.href = normalizeLink(to)); + }, + isCurrentUrl: (to: string) => { + const link = normalizeLink(to); + const location = window.location; + let pathname = link; + let search = ''; + const idx = link.indexOf('?'); + if (~idx) { + pathname = link.substring(0, idx); + search = link.substring(idx); + } - if (search) { - if (pathname !== location.pathname || !location.search) { - return false; - } + if (search) { + if (pathname !== location.pathname || !location.search) { + return false; + } - const query = qs.parse(search.substring(1)); - const currentQuery = qs.parse(location.search.substring(1)); + const query = qs.parse(search.substring(1)); + const currentQuery = qs.parse(location.search.substring(1)); - return Object.keys(query).every(key => query[key] === currentQuery[key]); - } else if (pathname === location.pathname) { - return true; - } + return Object.keys(query).every( + key => query[key] === currentQuery[key] + ); + } else if (pathname === location.pathname) { + return true; + } - return false; - }, - jumpTo: (to:string, action?:any) => { - if (to === 'goBack') { - return window.history.back(); - } + return false; + }, + jumpTo: (to: string, action?: any) => { + if (to === 'goBack') { + return window.history.back(); + } - to = normalizeLink(to); + to = normalizeLink(to); - if (action && action.actionType === 'url') { - action.blank === false ? (window.location.href = to) : window.open(to); - return; - } + if (action && action.actionType === 'url') { + action.blank === false + ? (window.location.href = to) + : window.open(to); + return; + } - if (/^https?:\/\//.test(to)) { - window.location.replace(to); - } else { - location.href = to; - } - }, - fetcher: (api: any) => { - let { - url, - method, - data, - responseType, - config, - headers - } = api; - config = config || {}; - config.withCredentials = true; - responseType && (config.responseType = responseType); - - if (config.cancelExecutor) { - config.cancelToken = new (axios as any).CancelToken(config.cancelExecutor); - } - - config.headers = headers || {}; - config.method = method; - - if (method === 'get' && data) { - config.params = data; - } else if (data && data instanceof FormData) { - // config.headers['Content-Type'] = 'multipart/form-data'; - } else if (data - && typeof data !== 'string' - && !(data instanceof Blob) - && !(data instanceof ArrayBuffer) - ) { - data = JSON.stringify(data); - config.headers['Content-Type'] = 'application/json'; - } - - data && (config.data = data); - return axios(url, config) - .then(responseAdpater(api)); - }, - isCancel: (value: any) => (axios as any).isCancel(value), - copy: (contents: string, options: any = {}) => { - const ret = copy(contents, options); - ret && options.shutup !== true && toast.info('内容已拷贝到剪切板'); - return ret; - }, - richTextToken: '', - ...env - })} -
    - ), container); - return scoped; + if (/^https?:\/\//.test(to)) { + window.location.replace(to); + } else { + location.href = to; + } + }, + fetcher: (api: any) => { + let {url, method, data, responseType, config, headers} = api; + config = config || {}; + config.withCredentials = true; + responseType && (config.responseType = responseType); + + if (config.cancelExecutor) { + config.cancelToken = new (axios as any).CancelToken( + config.cancelExecutor + ); + } + + config.headers = headers || {}; + config.method = method; + + if (method === 'get' && data) { + config.params = data; + } else if (data && data instanceof FormData) { + // config.headers['Content-Type'] = 'multipart/form-data'; + } else if ( + data && + typeof data !== 'string' && + !(data instanceof Blob) && + !(data instanceof ArrayBuffer) + ) { + data = JSON.stringify(data); + config.headers['Content-Type'] = 'application/json'; + } + + data && (config.data = data); + return axios(url, config).then(responseAdpater(api)); + }, + isCancel: (value: any) => (axios as any).isCancel(value), + copy: (contents: string, options: any = {}) => { + const ret = copy(contents, options); + ret && options.shutup !== true && toast.info('内容已拷贝到剪切板'); + return ret; + }, + richTextToken: '', + ...env + } + )} +
    , + container + ); + return scoped; } diff --git a/examples/index.jsx b/examples/index.jsx index 5128e808..85b04b50 100644 --- a/examples/index.jsx +++ b/examples/index.jsx @@ -3,12 +3,9 @@ * @author liaoxuezhi@cloud.com */ import React from 'react'; -import { render } from 'react-dom'; +import {render} from 'react-dom'; import App from './components/App'; export function bootstrap(mountTo, initalState) { - render( - , - mountTo - ); + render(, mountTo); } diff --git a/examples/loader.ts b/examples/loader.ts index f4585ba2..53b07339 100644 --- a/examples/loader.ts +++ b/examples/loader.ts @@ -1,37 +1,36 @@ - const __moduleId = (str: string) => ''; const mapping: { - [propName: string]: any; + [propName: string]: any; } = { - 'jquery': __moduleId('jquery'), - 'react': __moduleId('react'), - 'react-dom': __moduleId('react-dom'), - 'react-addons-update': __moduleId('react-addons-update'), - 'immutability-helper': __moduleId('react-addons-update'), - 'react-cropper': __moduleId('react-cropper'), - 'react-dropzone': __moduleId('react-dropzone'), - 'classnames': __moduleId('classnames'), - 'axios': __moduleId('axios'), - 'moment': __moduleId('moment'), - 'mobx': __moduleId('mobx'), - 'mobx-state-tree': __moduleId('mobx-state-tree'), - 'react-transition-group': __moduleId('react-transition-group'), - 'echarts': __moduleId('echarts'), - 'zrender': __moduleId('zrender'), - 'sortablejs': __moduleId('sortablejs'), - 'amis': __moduleId('../src'), - 'amis/embed': __moduleId('./embed.tsx'), - 'prop-types': __moduleId('prop-types'), - 'async': __moduleId('async'), - 'qs': __moduleId('qs') + jquery: __moduleId('jquery'), + react: __moduleId('react'), + 'react-dom': __moduleId('react-dom'), + 'react-addons-update': __moduleId('react-addons-update'), + 'immutability-helper': __moduleId('react-addons-update'), + 'react-cropper': __moduleId('react-cropper'), + 'react-dropzone': __moduleId('react-dropzone'), + classnames: __moduleId('classnames'), + axios: __moduleId('axios'), + moment: __moduleId('moment'), + mobx: __moduleId('mobx'), + 'mobx-state-tree': __moduleId('mobx-state-tree'), + 'react-transition-group': __moduleId('react-transition-group'), + echarts: __moduleId('echarts'), + zrender: __moduleId('zrender'), + sortablejs: __moduleId('sortablejs'), + amis: __moduleId('../src'), + 'amis/embed': __moduleId('./embed.tsx'), + 'prop-types': __moduleId('prop-types'), + async: __moduleId('async'), + qs: __moduleId('qs') }; function amisRequire(...args: Array) { - let id = args.shift(); - id = Array.isArray(id) ? id.map(id => mapping[id] || id) : mapping[id] || id; - args.unshift(id); - return require.apply(this, args); -}; + let id = args.shift(); + id = Array.isArray(id) ? id.map(id => mapping[id] || id) : mapping[id] || id; + args.unshift(id); + return require.apply(this, args); +} -(window as any).amisRequire = amisRequire; \ No newline at end of file +(window as any).amisRequire = amisRequire; diff --git a/examples/polyfills/Array.find.ts b/examples/polyfills/Array.find.ts index 1a53d873..c289597c 100644 --- a/examples/polyfills/Array.find.ts +++ b/examples/polyfills/Array.find.ts @@ -1,46 +1,46 @@ // https://tc39.github.io/ecma262/#sec-array.prototype.find if (!Array.prototype.find) { - Object.defineProperty(Array.prototype, 'find', { - value: function(predicate) { - // 1. Let O be ? ToObject(this value). - if (this == null) { - throw new TypeError('"this" is null or not defined'); + Object.defineProperty(Array.prototype, 'find', { + value: function(predicate) { + // 1. Let O be ? ToObject(this value). + if (this == null) { + throw new TypeError('"this" is null or not defined'); + } + + var o = Object(this); + + // 2. Let len be ? ToLength(? Get(O, "length")). + var len = o.length >>> 0; + + // 3. If IsCallable(predicate) is false, throw a TypeError exception. + if (typeof predicate !== 'function') { + throw new TypeError('predicate must be a function'); + } + + // 4. If thisArg was supplied, let T be thisArg; else let T be undefined. + var thisArg = arguments[1]; + + // 5. Let k be 0. + var k = 0; + + // 6. Repeat, while k < len + while (k < len) { + // a. Let Pk be ! ToString(k). + // b. Let kValue be ? Get(O, Pk). + // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)). + // d. If testResult is true, return kValue. + var kValue = o[k]; + if (predicate.call(thisArg, kValue, k, o)) { + return kValue; } - - var o = Object(this); - - // 2. Let len be ? ToLength(? Get(O, "length")). - var len = o.length >>> 0; - - // 3. If IsCallable(predicate) is false, throw a TypeError exception. - if (typeof predicate !== 'function') { - throw new TypeError('predicate must be a function'); - } - - // 4. If thisArg was supplied, let T be thisArg; else let T be undefined. - var thisArg = arguments[1]; - - // 5. Let k be 0. - var k = 0; - - // 6. Repeat, while k < len - while (k < len) { - // a. Let Pk be ! ToString(k). - // b. Let kValue be ? Get(O, Pk). - // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)). - // d. If testResult is true, return kValue. - var kValue = o[k]; - if (predicate.call(thisArg, kValue, k, o)) { - return kValue; - } - // e. Increase k by 1. - k++; - } - - // 7. Return undefined. - return undefined; - }, - configurable: true, - writable: true - }); - } \ No newline at end of file + // e. Increase k by 1. + k++; + } + + // 7. Return undefined. + return undefined; + }, + configurable: true, + writable: true + }); +} diff --git a/examples/polyfills/Array.from.ts b/examples/polyfills/Array.from.ts index 555d895d..2c4b3a63 100644 --- a/examples/polyfills/Array.from.ts +++ b/examples/polyfills/Array.from.ts @@ -1,77 +1,88 @@ if (!Array.from) { - Array.from = (function () { - var toStr = Object.prototype.toString; - var isCallable = function (fn) { - return typeof fn === 'function' || toStr.call(fn) === '[object Function]'; - }; - var toInteger = function (value) { - var number = Number(value); - if (isNaN(number)) { return 0; } - if (number === 0 || !isFinite(number)) { return number; } - return (number > 0 ? 1 : -1) * Math.floor(Math.abs(number)); - }; - var maxSafeInteger = Math.pow(2, 53) - 1; - var toLength = function (value) { - var len = toInteger(value); - return Math.min(Math.max(len, 0), maxSafeInteger); - }; - - // The length property of the from method is 1. - return function from(arrayLike/*, mapFn, thisArg */) { - // 1. Let C be the this value. - var C = this; - - // 2. Let items be ToObject(arrayLike). - var items = Object(arrayLike); - - // 3. ReturnIfAbrupt(items). - if (arrayLike == null) { - throw new TypeError("Array.from requires an array-like object - not null or undefined"); + Array.from = (function() { + var toStr = Object.prototype.toString; + var isCallable = function(fn) { + return typeof fn === 'function' || toStr.call(fn) === '[object Function]'; + }; + var toInteger = function(value) { + var number = Number(value); + if (isNaN(number)) { + return 0; + } + if (number === 0 || !isFinite(number)) { + return number; + } + return (number > 0 ? 1 : -1) * Math.floor(Math.abs(number)); + }; + var maxSafeInteger = Math.pow(2, 53) - 1; + var toLength = function(value) { + var len = toInteger(value); + return Math.min(Math.max(len, 0), maxSafeInteger); + }; + + // The length property of the from method is 1. + return function from(arrayLike /*, mapFn, thisArg */) { + // 1. Let C be the this value. + var C = this; + + // 2. Let items be ToObject(arrayLike). + var items = Object(arrayLike); + + // 3. ReturnIfAbrupt(items). + if (arrayLike == null) { + throw new TypeError( + 'Array.from requires an array-like object - not null or undefined' + ); + } + + // 4. If mapfn is undefined, then let mapping be false. + var mapFn = arguments.length > 1 ? arguments[1] : void undefined; + var T; + if (typeof mapFn !== 'undefined') { + // 5. else + // 5. a If IsCallable(mapfn) is false, throw a TypeError exception. + if (!isCallable(mapFn)) { + throw new TypeError( + 'Array.from: when provided, the second argument must be a function' + ); } - - // 4. If mapfn is undefined, then let mapping be false. - var mapFn = arguments.length > 1 ? arguments[1] : void undefined; - var T; - if (typeof mapFn !== 'undefined') { - // 5. else - // 5. a If IsCallable(mapfn) is false, throw a TypeError exception. - if (!isCallable(mapFn)) { - throw new TypeError('Array.from: when provided, the second argument must be a function'); - } - - // 5. b. If thisArg was supplied, let T be thisArg; else let T be undefined. - if (arguments.length > 2) { - T = arguments[2]; - } + + // 5. b. If thisArg was supplied, let T be thisArg; else let T be undefined. + if (arguments.length > 2) { + T = arguments[2]; } - - // 10. Let lenValue be Get(items, "length"). - // 11. Let len be ToLength(lenValue). - var len = toLength(items.length); - - // 13. If IsConstructor(C) is true, then - // 13. a. Let A be the result of calling the [[Construct]] internal method - // of C with an argument list containing the single item len. - // 14. a. Else, Let A be ArrayCreate(len). - var A = isCallable(C) ? Object(new C(len)) : new Array(len); - - // 16. Let k be 0. - var k = 0; - // 17. Repeat, while k < len… (also steps a - h) - var kValue; - while (k < len) { - kValue = items[k]; - if (mapFn) { - A[k] = typeof T === 'undefined' ? mapFn(kValue, k) : mapFn.call(T, kValue, k); - } else { - A[k] = kValue; - } - k += 1; + } + + // 10. Let lenValue be Get(items, "length"). + // 11. Let len be ToLength(lenValue). + var len = toLength(items.length); + + // 13. If IsConstructor(C) is true, then + // 13. a. Let A be the result of calling the [[Construct]] internal method + // of C with an argument list containing the single item len. + // 14. a. Else, Let A be ArrayCreate(len). + var A = isCallable(C) ? Object(new C(len)) : new Array(len); + + // 16. Let k be 0. + var k = 0; + // 17. Repeat, while k < len… (also steps a - h) + var kValue; + while (k < len) { + kValue = items[k]; + if (mapFn) { + A[k] = + typeof T === 'undefined' + ? mapFn(kValue, k) + : mapFn.call(T, kValue, k); + } else { + A[k] = kValue; } - // 18. Let putStatus be Put(A, "length", len, true). - A.length = len; - // 20. Return A. - return A; - }; - }()); - } \ No newline at end of file + k += 1; + } + // 18. Let putStatus be Put(A, "length", len, true). + A.length = len; + // 20. Return A. + return A; + }; + })(); +} diff --git a/examples/polyfills/Object.assign.ts b/examples/polyfills/Object.assign.ts index b6a59c15..97ddce6a 100644 --- a/examples/polyfills/Object.assign.ts +++ b/examples/polyfills/Object.assign.ts @@ -1,29 +1,32 @@ if (typeof Object.assign != 'function') { - // Must be writable: true, enumerable: false, configurable: true - Object.defineProperty(Object, "assign", { - value: function assign(target, varArgs) { // .length of function is 2 - 'use strict'; - if (target == null) { // TypeError if undefined or null - throw new TypeError('Cannot convert undefined or null to object'); + // Must be writable: true, enumerable: false, configurable: true + Object.defineProperty(Object, 'assign', { + value: function assign(target, varArgs) { + // .length of function is 2 + 'use strict'; + if (target == null) { + // TypeError if undefined or null + throw new TypeError('Cannot convert undefined or null to object'); + } + + var to = Object(target); + + for (var index = 1; index < arguments.length; index++) { + var nextSource = arguments[index]; + + if (nextSource != null) { + // Skip over if undefined or null + for (var nextKey in nextSource) { + // Avoid bugs when hasOwnProperty is shadowed + if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) { + to[nextKey] = nextSource[nextKey]; } - - var to = Object(target); - - for (var index = 1; index < arguments.length; index++) { - var nextSource = arguments[index]; - - if (nextSource != null) { // Skip over if undefined or null - for (var nextKey in nextSource) { - // Avoid bugs when hasOwnProperty is shadowed - if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) { - to[nextKey] = nextSource[nextKey]; - } - } - } - } - return to; - }, - writable: true, - configurable: true - }); -} \ No newline at end of file + } + } + } + return to; + }, + writable: true, + configurable: true + }); +} diff --git a/examples/polyfills/cloest.ts b/examples/polyfills/cloest.ts index ed3a5b67..c302864c 100644 --- a/examples/polyfills/cloest.ts +++ b/examples/polyfills/cloest.ts @@ -3,23 +3,24 @@ * @author mdn */ if (!Element.prototype.matches) { - Element.prototype.matches = Element.prototype.msMatchesSelector - || Element.prototype.webkitMatchesSelector; + Element.prototype.matches = + Element.prototype.msMatchesSelector || + Element.prototype.webkitMatchesSelector; } if (!Element.prototype.closest) { - Element.prototype.closest = function (s) { - var el = this; - if (!document.documentElement.contains(el)) { - return null; - } + Element.prototype.closest = function(s) { + var el = this; + if (!document.documentElement.contains(el)) { + return null; + } - do { - if (el.matches(s)) { - return el; - } - el = el.parentElement; - } while (el !== null); - return null; - }; + do { + if (el.matches(s)) { + return el; + } + el = el.parentElement; + } while (el !== null); + return null; + }; } diff --git a/examples/polyfills/index.ts b/examples/polyfills/index.ts index 3b032574..ee5b42b7 100644 --- a/examples/polyfills/index.ts +++ b/examples/polyfills/index.ts @@ -4,4 +4,4 @@ import './Array.find'; import './cloest'; import 'promise/polyfill'; -import 'es6-symbol/implement'; \ No newline at end of file +import 'es6-symbol/implement'; diff --git a/package.json b/package.json index 9da0333e..634b9b17 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "amis", - "version": "1.0.4", + "version": "1.0.4-beta.3", "description": "一种MIS页面生成工具", "main": "lib/index.js", "scripts": { @@ -10,7 +10,7 @@ "stop": "fis3 server stop", "dev": "fis3 release -cwd ./public", "publish2npm": "sh publish.sh && npm publish", - "prettier": "prettier --write 'src/**/*.{tsx,ts}'" + "prettier": "prettier --write '{src,examples}/**/*.{tsx,ts,jsx}'" }, "repository": { "type": "git", diff --git a/src/Scoped.tsx b/src/Scoped.tsx index 437b838f..3d458424 100644 --- a/src/Scoped.tsx +++ b/src/Scoped.tsx @@ -14,202 +14,218 @@ import {noop, autobind, qsstringify} from './utils/helper'; import {RendererData, Action} from './types'; export interface ScopedComponentType extends React.Component { - focus?: () =>void; - doAction?: (action: Action, data: RendererData, throwErrors?: boolean) => void; - receive?: (values: RendererData, subPath?: string) => void; - reload?: (subPath?: string, query?: RendererData | null, ctx?: RendererData) => void; + focus?: () => void; + doAction?: ( + action: Action, + data: RendererData, + throwErrors?: boolean + ) => void; + receive?: (values: RendererData, subPath?: string) => void; + reload?: ( + subPath?: string, + query?: RendererData | null, + ctx?: RendererData + ) => void; } export interface IScopedContext { - parent?: AlisIScopedContext; - registerComponent: (component: ScopedComponentType) => void; - unRegisterComponent: (component: ScopedComponentType) => void; - getComponentByName: (name: string) => ScopedComponentType | void; - getComponents: () => Array; - reload: (target: string, ctx: RendererData) => void; - send: (target: string, ctx: RendererData) => void; + parent?: AlisIScopedContext; + registerComponent: (component: ScopedComponentType) => void; + unRegisterComponent: (component: ScopedComponentType) => void; + getComponentByName: (name: string) => ScopedComponentType | void; + getComponents: () => Array; + reload: (target: string, ctx: RendererData) => void; + send: (target: string, ctx: RendererData) => void; } type AlisIScopedContext = IScopedContext; export const ScopedContext = React.createContext(createScopedTools('')); -function createScopedTools(path?: string, parent?: AlisIScopedContext, env?: RendererEnv): IScopedContext { - const components: Array = []; +function createScopedTools( + path?: string, + parent?: AlisIScopedContext, + env?: RendererEnv +): IScopedContext { + const components: Array = []; - return { - parent, - registerComponent(component: ScopedComponentType) { - // 不要把自己注册在自己的 Scoped 上，自己的 Scoped 是给孩子们注册的。 - if (component.props.$path === path && parent) { - return parent.registerComponent(component); - } + return { + parent, + registerComponent(component: ScopedComponentType) { + // 不要把自己注册在自己的 Scoped 上，自己的 Scoped 是给孩子们注册的。 + if (component.props.$path === path && parent) { + return parent.registerComponent(component); + } - if (!~components.indexOf(component)) { - components.push(component); - } - }, + if (!~components.indexOf(component)) { + components.push(component); + } + }, - unRegisterComponent(component: ScopedComponentType) { - // 自己本身实际上注册在父级 Scoped 上。 - if (component.props.$path === path && parent) { - return parent.unRegisterComponent(component); - } + unRegisterComponent(component: ScopedComponentType) { + // 自己本身实际上注册在父级 Scoped 上。 + if (component.props.$path === path && parent) { + return parent.unRegisterComponent(component); + } - const idx = components.indexOf(component); + const idx = components.indexOf(component); - if (~idx) { - components.splice(idx, 1); - } - }, + if (~idx) { + components.splice(idx, 1); + } + }, - getComponentByName(name: string) { - if (~name.indexOf('.')) { - const paths = name.split('.'); - const len = paths.length; + getComponentByName(name: string) { + if (~name.indexOf('.')) { + const paths = name.split('.'); + const len = paths.length; - return paths.reduce((scope, name, idx) => { - if (scope && scope.getComponentByName) { - const result = scope.getComponentByName(name); - return result && idx < len - 1 ? result.context : result; - } + return paths.reduce((scope, name, idx) => { + if (scope && scope.getComponentByName) { + const result = scope.getComponentByName(name); + return result && idx < len - 1 ? result.context : result; + } - return null; - }, this); - } + return null; + }, this); + } - const resolved = find( - components, - component => component.props.name === name || component.props.id === name - ); - return resolved || (parent && parent.getComponentByName(name)); - }, + const resolved = find( + components, + component => + component.props.name === name || component.props.id === name + ); + return resolved || (parent && parent.getComponentByName(name)); + }, - getComponents() { - return components.concat(); - }, + getComponents() { + return components.concat(); + }, - reload(target: string, ctx: any) { - const scoped = this; + reload(target: string, ctx: any) { + const scoped = this; - if (target === 'window') { - return location.reload(); - } + if (target === 'window') { + return location.reload(); + } - let targets = typeof target === 'string' ? target.split(/\s*,\s*/) : target; - targets.forEach(name => { - const idx2 = name.indexOf('?'); - let query = null; + let targets = + typeof target === 'string' ? target.split(/\s*,\s*/) : target; + targets.forEach(name => { + const idx2 = name.indexOf('?'); + let query = null; - if (~idx2) { - query = dataMapping(qs.parse(name.substring(idx2 + 1)), ctx); - name = name.substring(0, idx2); - } - - const idx = name.indexOf('.'); - let subPath = ''; - - if (~idx) { - subPath = name.substring(1 + idx); - name = name.substring(0, idx); - } - - const component = scoped.getComponentByName(name); - component && component.reload && component.reload(subPath, query, ctx); - }); - }, - - send(receive: string, values: object) { - const scoped = this; - let receives = typeof receive === 'string' ? receive.split(/\s*,\s*/) : receive; - - // todo 没找到做提示！ - receives.forEach(name => { - const idx = name.indexOf('.'); - let subPath = ''; - - if (~idx) { - subPath = name.substring(1 + idx); - name = name.substring(0, idx); - } - - const component = scoped.getComponentByName(name); - - if (component && component.receive) { - component.receive(values, subPath); - } else if (name === 'window' && env && env.updateLocation) { - const query = { - ...(location.search ? qs.parse(location.search.substring(1)) : {}), - ...values - }; - const link = location.pathname + '?' + qsstringify(query); - env.updateLocation(link); - } - }); + if (~idx2) { + query = dataMapping(qs.parse(name.substring(idx2 + 1)), ctx); + name = name.substring(0, idx2); } - }; + + const idx = name.indexOf('.'); + let subPath = ''; + + if (~idx) { + subPath = name.substring(1 + idx); + name = name.substring(0, idx); + } + + const component = scoped.getComponentByName(name); + component && component.reload && component.reload(subPath, query, ctx); + }); + }, + + send(receive: string, values: object) { + const scoped = this; + let receives = + typeof receive === 'string' ? receive.split(/\s*,\s*/) : receive; + + // todo 没找到做提示！ + receives.forEach(name => { + const idx = name.indexOf('.'); + let subPath = ''; + + if (~idx) { + subPath = name.substring(1 + idx); + name = name.substring(0, idx); + } + + const component = scoped.getComponentByName(name); + + if (component && component.receive) { + component.receive(values, subPath); + } else if (name === 'window' && env && env.updateLocation) { + const query = { + ...(location.search ? qs.parse(location.search.substring(1)) : {}), + ...values + }; + const link = location.pathname + '?' + qsstringify(query); + env.updateLocation(link); + } + }); + } + }; } export function HocScoped< - T extends { - $path?: string; - env: RendererEnv; - } + T extends { + $path?: string; + env: RendererEnv; + } >( - ComposedComponent: React.ComponentType + ComposedComponent: React.ComponentType ): React.ComponentType< - T & { - scopeRef?: (ref: any) => void; - } + T & { + scopeRef?: (ref: any) => void; + } > & { - ComposedComponent: React.ComponentType; + ComposedComponent: React.ComponentType; } { - class ScopedComponent extends React.Component< - T & { - scopeRef?: (ref: any) => void; - } - > { - static displayName = `Scoped(${ComposedComponent.displayName || ComposedComponent.name})`; - static contextType = ScopedContext; - static ComposedComponent = ComposedComponent; - ref: any; + class ScopedComponent extends React.Component< + T & { + scopeRef?: (ref: any) => void; + } + > { + static displayName = `Scoped(${ComposedComponent.displayName || + ComposedComponent.name})`; + static contextType = ScopedContext; + static ComposedComponent = ComposedComponent; + ref: any; - getWrappedInstance() { - return this.ref; - } - - @autobind - childRef(ref: any) { - while (ref && ref.getWrappedInstance) { - ref = ref.getWrappedInstance(); - } - - this.ref = ref; - } - - scoped = createScopedTools(this.props.$path, this.context, this.props.env); - - componentWillMount() { - const scopeRef = this.props.scopeRef; - scopeRef && scopeRef(this.scoped); - } - - componentWillUnmount() { - const scopeRef = this.props.scopeRef; - scopeRef && scopeRef(null); - } - - render() { - const {scopeRef, ...rest} = this.props; - - return ( - - - - ); - } + getWrappedInstance() { + return this.ref; } - hoistNonReactStatic(ScopedComponent, ComposedComponent); - return ScopedComponent; + @autobind + childRef(ref: any) { + while (ref && ref.getWrappedInstance) { + ref = ref.getWrappedInstance(); + } + + this.ref = ref; + } + + scoped = createScopedTools(this.props.$path, this.context, this.props.env); + + componentWillMount() { + const scopeRef = this.props.scopeRef; + scopeRef && scopeRef(this.scoped); + } + + componentWillUnmount() { + const scopeRef = this.props.scopeRef; + scopeRef && scopeRef(null); + } + + render() { + const {scopeRef, ...rest} = this.props; + + return ( + + + + ); + } + } + + hoistNonReactStatic(ScopedComponent, ComposedComponent); + return ScopedComponent; } export default HocScoped; diff --git a/src/compat.ts b/src/compat.ts index d7a8d67b..1a8e0895 100644 --- a/src/compat.ts +++ b/src/compat.ts @@ -16,289 +16,304 @@ import {ServiceRenderer} from './renderers/Form/Service'; // 兼容老的用法，老用法 label 用在 checkbox 的右侧内容，新用法用 option 来代替。 addSchemaFilter(function CheckboxPropsFilter(schema: Schema, renderer) { - if (renderer.component !== CheckboxControlRenderer) { - return schema; - } - - if (schema.label && typeof schema.option === 'undefined') { - schema = { - ...schema - }; - schema.option = schema.label; - delete schema.label; - } - + if (renderer.component !== CheckboxControlRenderer) { return schema; + } + + if (schema.label && typeof schema.option === 'undefined') { + schema = { + ...schema + }; + schema.option = schema.label; + delete schema.label; + } + + return schema; }); function convertFieldSetTabs2Controls(schema: any) { - const toUpdate: any = {}; - let flag = false; + const toUpdate: any = {}; + let flag = false; - toUpdate.controls = Array.isArray(schema.controls) ? schema.controls.concat() : []; - toUpdate.controls = toUpdate.controls.map((control: any) => { - if (Array.isArray(control)) { - let converted = convertFieldSetTabs2Controls({ - type: 'group', - controls: control - }); + toUpdate.controls = Array.isArray(schema.controls) + ? schema.controls.concat() + : []; + toUpdate.controls = toUpdate.controls.map((control: any) => { + if (Array.isArray(control)) { + let converted = convertFieldSetTabs2Controls({ + type: 'group', + controls: control + }); - if (converted !== control) { - flag = true; - } + if (converted !== control) { + flag = true; + } - return converted; - } - return control; + return converted; + } + return control; + }); + + schema.fieldSet && + (Array.isArray(schema.fieldSet) + ? schema.fieldSet + : [schema.fieldSet] + ).forEach((fieldSet: any) => { + flag = true; + toUpdate.controls.push({ + ...convertFieldSetTabs2Controls(fieldSet), + type: 'fieldSet', + collapsable: schema.collapsable + }); }); - schema.fieldSet && - (Array.isArray(schema.fieldSet) ? schema.fieldSet : [schema.fieldSet]).forEach((fieldSet: any) => { - flag = true; - toUpdate.controls.push({ - ...convertFieldSetTabs2Controls(fieldSet), - type: 'fieldSet', - collapsable: schema.collapsable - }); - }); + schema.tabs && + (flag = true) && + toUpdate.controls.push({ + type: 'tabs', + tabs: schema.tabs.map((tab: any) => convertFieldSetTabs2Controls(tab)) + }); - schema.tabs && - (flag = true) && - toUpdate.controls.push({ - type: 'tabs', - tabs: schema.tabs.map((tab: any) => convertFieldSetTabs2Controls(tab)) - }); - - if (flag) { - schema = { - ...schema, - ...toUpdate - }; - delete schema.fieldSet; - delete schema.tabs; - } - return schema; + if (flag) { + schema = { + ...schema, + ...toUpdate + }; + delete schema.fieldSet; + delete schema.tabs; + } + return schema; } // Form 中，把 fieldSet 和 tabs 转成 {type: 'fieldSet', controls: []} // 同时把数组用法转成 {type: 'group', controls: []} addSchemaFilter(function FormPropsFilter(schema: Schema, renderer) { - if (renderer.component !== FormRenderer) { - return schema; - } + if (renderer.component !== FormRenderer) { + return schema; + } - if (schema.fieldSet || schema.tabs) { - // console.warn('Form 下面直接用 fieldSet 或者 tabs 将不支持，请改成在 controls 数组中添加。'); - schema = convertFieldSetTabs2Controls(schema); - } else if (Array.isArray(schema.controls)) { - let flag = false; - let converted = schema.controls.map((control: any) => { - if (Array.isArray(control)) { - let converted = convertFieldSetTabs2Controls({ - type: 'group', - controls: control - }); - - if (converted !== control) { - flag = true; - } - return converted; - } - return control; + if (schema.fieldSet || schema.tabs) { + // console.warn('Form 下面直接用 fieldSet 或者 tabs 将不支持，请改成在 controls 数组中添加。'); + schema = convertFieldSetTabs2Controls(schema); + } else if (Array.isArray(schema.controls)) { + let flag = false; + let converted = schema.controls.map((control: any) => { + if (Array.isArray(control)) { + let converted = convertFieldSetTabs2Controls({ + type: 'group', + controls: control }); - if (flag) { - schema = { - ...schema, - controls: converted - }; + if (converted !== control) { + flag = true; } - } + return converted; + } + return control; + }); - return schema; + if (flag) { + schema = { + ...schema, + controls: converted + }; + } + } + + return schema; }); // FieldSet 中把 controls 里面的数组用法转成 {type: 'group', controls: []} addSchemaFilter(function FormPropsFilter(schema: Schema, renderer) { - if (renderer.component !== FieldSetRenderer) { - return schema; - } + if (renderer.component !== FieldSetRenderer) { + return schema; + } - if (Array.isArray(schema.controls)) { - let flag = false; - let converted = schema.controls.map((control: any) => { - if (Array.isArray(control)) { - let converted = convertFieldSetTabs2Controls({ - type: 'group', - controls: control - }); - - if (converted !== control) { - flag = true; - } - return converted; - } - return control; + if (Array.isArray(schema.controls)) { + let flag = false; + let converted = schema.controls.map((control: any) => { + if (Array.isArray(control)) { + let converted = convertFieldSetTabs2Controls({ + type: 'group', + controls: control }); - if (flag) { - schema = { - ...schema, - controls: converted - }; + if (converted !== control) { + flag = true; } - } + return converted; + } + return control; + }); - return schema; + if (flag) { + schema = { + ...schema, + controls: converted + }; + } + } + + return schema; }); // Form 里面的 Tabs 中把 controls 里面的数组用法转成 {type: 'group', controls: []} addSchemaFilter(function FormPropsFilter(schema: Schema, renderer) { - if (renderer.component !== TabsRenderer) { - return schema; - } - - if (Array.isArray(schema.tabs)) { - let flag = false; - let converted = schema.tabs.map((tab: any) => { - let flag2 = false; - let converted = (tab.controls || []).map((control: any) => { - if (Array.isArray(control)) { - let converted = convertFieldSetTabs2Controls({ - type: 'group', - controls: control - }); - - if (converted !== control) { - flag2 = true; - } - return converted; - } - return control; - }); - - if (flag2) { - flag = true; - tab = { - ...tab, - controls: converted - }; - } - - return tab; - }); - - if (flag) { - schema = { - ...schema, - tabs: converted - }; - } - } - + if (renderer.component !== TabsRenderer) { return schema; + } + + if (Array.isArray(schema.tabs)) { + let flag = false; + let converted = schema.tabs.map((tab: any) => { + let flag2 = false; + let converted = (tab.controls || []).map((control: any) => { + if (Array.isArray(control)) { + let converted = convertFieldSetTabs2Controls({ + type: 'group', + controls: control + }); + + if (converted !== control) { + flag2 = true; + } + return converted; + } + return control; + }); + + if (flag2) { + flag = true; + tab = { + ...tab, + controls: converted + }; + } + + return tab; + }); + + if (flag) { + schema = { + ...schema, + tabs: converted + }; + } + } + + return schema; }); function convertArray2Hbox(arr: Array): any { - let flag = false; - let converted = arr.map((item: any) => { - if (Array.isArray(item)) { - flag = true; - return convertArray2Hbox(item); - } - - return item; - }); - if (!flag) { - converted = arr; + let flag = false; + let converted = arr.map((item: any) => { + if (Array.isArray(item)) { + flag = true; + return convertArray2Hbox(item); } - return { - type: 'hbox', - columns: converted - }; + return item; + }); + if (!flag) { + converted = arr; + } + + return { + type: 'hbox', + columns: converted + }; } // CRUD/List 和 CRUD/Card 的 body 中的数组用法转成 hbox addSchemaFilter(function(schema: Schema, renderer) { - if (renderer.component !== CardRenderer && renderer.component !== ListItemRenderer) { - return schema; - } - - if (Array.isArray(schema.body)) { - let flag = false; - let converted = schema.body.map((item: any) => { - if (Array.isArray(item)) { - flag = true; - return convertArray2Hbox(item); - } - return item; - }); - - if (flag) { - schema = { - ...schema, - body: converted - }; - } - } - + if ( + renderer.component !== CardRenderer && + renderer.component !== ListItemRenderer + ) { return schema; + } + + if (Array.isArray(schema.body)) { + let flag = false; + let converted = schema.body.map((item: any) => { + if (Array.isArray(item)) { + flag = true; + return convertArray2Hbox(item); + } + return item; + }); + + if (flag) { + schema = { + ...schema, + body: converted + }; + } + } + + return schema; }); // button group 的 btnClassName 和 btnActiveClassName 改成 btnLevel 和 btnActiveLevel 了 addSchemaFilter(function(scheam: Schema, renderer) { - if (renderer.component !== ButtonGroupControlRenderer) { - return scheam; - } - - if (scheam.btnClassName || scheam.btnActiveClassName) { - scheam = { - ...scheam, - btnLevel: getLevelFromClassName(scheam.btnClassName), - btnActiveLevel: getLevelFromClassName(scheam.btnActiveClassName) - }; - - delete scheam.btnClassName; - delete scheam.btnActiveClassName; - } - + if (renderer.component !== ButtonGroupControlRenderer) { return scheam; + } + + if (scheam.btnClassName || scheam.btnActiveClassName) { + scheam = { + ...scheam, + btnLevel: getLevelFromClassName(scheam.btnClassName), + btnActiveLevel: getLevelFromClassName(scheam.btnActiveClassName) + }; + + delete scheam.btnClassName; + delete scheam.btnActiveClassName; + } + + return scheam; }); // FieldSet className 定制样式方式改成 size 来配置 addSchemaFilter(function(scheam: Schema, renderer) { - if (renderer.component !== FieldSetRenderer) { - return scheam; - } - - if (scheam.className && !scheam.size && /\bfieldset(?:\-(xs|sm|md|lg))?\b/.test(scheam.className)) { - scheam = { - ...scheam, - size: RegExp.$1 || 'base', - className: scheam.className.replace(/\bfieldset(?:\-(xs|sm|md|lg))?\b/, '') - }; - - delete scheam.btnClassName; - delete scheam.btnActiveClassName; - } - + if (renderer.component !== FieldSetRenderer) { return scheam; + } + + if ( + scheam.className && + !scheam.size && + /\bfieldset(?:\-(xs|sm|md|lg))?\b/.test(scheam.className) + ) { + scheam = { + ...scheam, + size: RegExp.$1 || 'base', + className: scheam.className.replace( + /\bfieldset(?:\-(xs|sm|md|lg))?\b/, + '' + ) + }; + + delete scheam.btnClassName; + delete scheam.btnActiveClassName; + } + + return scheam; }); // FieldSet className 定制样式方式改成 size 来配置 addSchemaFilter(function(scheam: Schema, renderer) { - if (renderer.component !== ServiceRenderer) { - return scheam; - } - - if (scheam.body && scheam.body.controls) { - scheam = { - ...scheam, - controls: scheam.body.controls - }; - delete scheam.body; - } - + if (renderer.component !== ServiceRenderer) { return scheam; + } + + if (scheam.body && scheam.body.controls) { + scheam = { + ...scheam, + controls: scheam.body.controls + }; + delete scheam.body; + } + + return scheam; }); diff --git a/src/components/404.tsx b/src/components/404.tsx index 07e2e1dc..3b09abae 100644 --- a/src/components/404.tsx +++ b/src/components/404.tsx @@ -7,39 +7,43 @@ import React from 'react'; import {themeable, ClassNamesFn} from '../theme'; interface NotFoundProps { - code?: string | number; - description?: string; - links?: React.ReactNode; - footerText?: React.ReactNode; - classPrefix: string; - classnames: ClassNamesFn; + code?: string | number; + description?: string; + links?: React.ReactNode; + footerText?: React.ReactNode; + classPrefix: string; + classnames: ClassNamesFn; } export class NotFound extends React.Component { - render() { - const {links, footerText, description, children, code} = this.props; + render() { + const {links, footerText, description, children, code} = this.props; - return ( -
    -
    -

    {code || '404'}

    - {description ?
    {description}
    : null} -
    + return ( +
    +
    +

    {code || '404'}

    + {description ? ( +
    {description}
    + ) : null} +
    - {children} + {children} - {links ?
    {links}
    : null} + {links ? ( +
    {links}
    + ) : null} - {footerText ? ( -
    -

    - {footerText} -

    -
    - ) : null} -
    - ); - } + {footerText ? ( +
    +

    + {footerText} +

    +
    + ) : null} +
    + ); + } } export default themeable(NotFound); diff --git a/src/components/Alert.tsx b/src/components/Alert.tsx index ff411bc0..7e061a5c 100644 --- a/src/components/Alert.tsx +++ b/src/components/Alert.tsx @@ -10,166 +10,180 @@ import Button from './Button'; import {ClassNamesFn, themeable} from '../theme'; export interface AlertProps { - container?: any; - confirmText?: string; - cancelText?: string; - title?: string; - confirmBtnLevel?: string; - alertBtnLevel?: string; - classPrefix: string; - classnames: ClassNamesFn; - theme?: string; + container?: any; + confirmText?: string; + cancelText?: string; + title?: string; + confirmBtnLevel?: string; + alertBtnLevel?: string; + classPrefix: string; + classnames: ClassNamesFn; + theme?: string; } export interface AlertState { - show: boolean; - title?: string; - content: string; - confirm: boolean; + show: boolean; + title?: string; + content: string; + confirm: boolean; } export class Alert extends React.Component { - static instance: any = null; - static getInstance() { - if (!Alert.instance) { - console.warn('Alert 组件应该没有被渲染，所以隐性的渲染到 body 了'); - const container = document.body; - const div = document.createElement('div'); - container.appendChild(div); - render(, div); - } - - return Alert.instance; + static instance: any = null; + static getInstance() { + if (!Alert.instance) { + console.warn('Alert 组件应该没有被渲染，所以隐性的渲染到 body 了'); + const container = document.body; + const div = document.createElement('div'); + container.appendChild(div); + render(, div); } - _resolve: (value: any) => void; - _modal: any; - _body: any; - state: AlertState = { - show: false, - title: '', - content: '', - confirm: false - }; - constructor(props: AlertProps) { - super(props); + return Alert.instance; + } - this.close = this.close.bind(this); - this.handleConfirm = this.handleConfirm.bind(this); - this.handleCancel = this.handleCancel.bind(this); - this.modalRef = this.modalRef.bind(this); - this.bodyRef = this.bodyRef.bind(this); + _resolve: (value: any) => void; + _modal: any; + _body: any; + state: AlertState = { + show: false, + title: '', + content: '', + confirm: false + }; + constructor(props: AlertProps) { + super(props); + + this.close = this.close.bind(this); + this.handleConfirm = this.handleConfirm.bind(this); + this.handleCancel = this.handleCancel.bind(this); + this.modalRef = this.modalRef.bind(this); + this.bodyRef = this.bodyRef.bind(this); + } + + static defaultProps = { + confirmText: '确认', + cancelText: '取消', + title: '系统消息', + alertBtnLevel: 'primary', + confirmBtnLevel: 'danger' + }; + + componentWillMount() { + Alert.instance = this; + } + + componentDidMount() { + this._body && (this._body.innerHTML = this.state.content); + } + + componentDidUpdate(prevProps: AlertProps, prevState: AlertState) { + if (prevState.content !== this.state.content) { + this._body && (this._body.innerHTML = this.state.content); } + } - static defaultProps = { - confirmText: '确认', - cancelText: '取消', - title: '系统消息', - alertBtnLevel: 'primary', - confirmBtnLevel: 'danger' - }; + componentWillUnmount() { + Alert.instance = null; + } - componentWillMount() { - Alert.instance = this; - } + handleConfirm() { + this.close(true); + } - componentDidMount() { - this._body && (this._body.innerHTML = this.state.content); - } + handleCancel() { + this.close(false); + } - componentDidUpdate(prevProps: AlertProps, prevState: AlertState) { - if (prevState.content !== this.state.content) { - this._body && (this._body.innerHTML = this.state.content); - } - } + close(confirmed: boolean) { + const isConfirm = this.state.confirm; - componentWillUnmount() { - Alert.instance = null; - } + this.setState( + { + show: false + }, + isConfirm ? () => this._resolve(confirmed) /*this._reject()*/ : undefined + ); + } - handleConfirm() { - this.close(true); - } + alert(content: string, title?: string) { + this.setState({ + title, + content, + show: true, + confirm: false + }); + } - handleCancel() { - this.close(false); - } + confirm(content: string, title?: string) { + this.setState({ + title, + content, + show: true, + confirm: true + }); - close(confirmed: boolean) { - const isConfirm = this.state.confirm; + return new Promise(resolve => { + this._resolve = resolve; + }); + } - this.setState( - { - show: false - }, - isConfirm ? () => this._resolve(confirmed) /*this._reject()*/ : undefined - ); - } + modalRef(ref: any) { + this._modal = ref; + } - alert(content: string, title?: string) { - this.setState({ - title, - content, - show: true, - confirm: false - }); - } + bodyRef(ref: any) { + this._body = ref; + this._body && (this._body.innerHTML = this.state.content); + } - confirm(content: string, title?: string) { - this.setState({ - title, - content, - show: true, - confirm: true - }); - - return new Promise(resolve => { - this._resolve = resolve; - }); - } - - modalRef(ref: any) { - this._modal = ref; - } - - bodyRef(ref: any) { - this._body = ref; - this._body && (this._body.innerHTML = this.state.content); - } - - render() { - const { - container, - cancelText, - confirmText, - title, - confirmBtnLevel, - alertBtnLevel, - classnames: cx, - classPrefix - } = this.props; - return ( - -
    -
    {this.state.title || title}
    -
    -
    -
    -
    -
    - {this.state.confirm ? : null} - -
    - - ); - } + render() { + const { + container, + cancelText, + confirmText, + title, + confirmBtnLevel, + alertBtnLevel, + classnames: cx, + classPrefix + } = this.props; + return ( + +
    +
    {this.state.title || title}
    +
    +
    +
    +
    +
    + {this.state.confirm ? ( + + ) : null} + +
    + + ); + } } -export const alert: (content: string, title?: string) => void = (content, title) => - Alert.getInstance().alert(content, title); -export const confirm: (content: string, title?: string) => Promise = (content, title) => - Alert.getInstance().confirm(content, title); +export const alert: (content: string, title?: string) => void = ( + content, + title +) => Alert.getInstance().alert(content, title); +export const confirm: (content: string, title?: string) => Promise = ( + content, + title +) => Alert.getInstance().confirm(content, title); export const ThemedAlert = themeable(Alert); export default ThemedAlert; diff --git a/src/components/Alert2.tsx b/src/components/Alert2.tsx index 97b20257..1b3025d6 100644 --- a/src/components/Alert2.tsx +++ b/src/components/Alert2.tsx @@ -7,58 +7,76 @@ import React from 'react'; import {ClassNamesFn, themeable} from '../theme'; export interface AlertProps { - level: 'danger' | 'info' | 'success' | 'warning'; - className: string; - showCloseButton: boolean; - onClose?: () => void; - classnames: ClassNamesFn; - classPrefix: string; + level: 'danger' | 'info' | 'success' | 'warning'; + className: string; + showCloseButton: boolean; + onClose?: () => void; + classnames: ClassNamesFn; + classPrefix: string; } export interface AlertState { - show: boolean; + show: boolean; } export class Alert extends React.Component { - static defaultProps: Pick = { - level: 'info', - className: '', - showCloseButton: false + static defaultProps: Pick< + AlertProps, + 'level' | 'className' | 'showCloseButton' + > = { + level: 'info', + className: '', + showCloseButton: false + }; + static propsList: Array = [ + 'level', + 'className', + 'showCloseButton', + 'onClose' + ]; + + constructor(props: AlertProps) { + super(props); + + this.handleClick = this.handleClick.bind(this); + this.state = { + show: true }; - static propsList: Array = ['level', 'className', 'showCloseButton', 'onClose']; + } - constructor(props: AlertProps) { - super(props); + handleClick() { + this.setState( + { + show: false + }, + this.props.onClose + ); + } - this.handleClick = this.handleClick.bind(this); - this.state = { - show: true - }; - } + render() { + const { + classnames: cx, + className, + level, + children, + showCloseButton + } = this.props; - handleClick() { - this.setState( - { - show: false - }, - this.props.onClose - ); - } - - render() { - const {classnames: cx, className, level, children, showCloseButton} = this.props; - - return this.state.show ? ( -
    - {showCloseButton ? ( - - ) : null} - {children} -
    - ) : null; - } + return this.state.show ? ( +
    + {showCloseButton ? ( + + ) : null} + {children} +
    + ) : null; + } } export default themeable(Alert); diff --git a/src/components/AsideNav.tsx b/src/components/AsideNav.tsx index f1e0548e..6c2951fe 100644 --- a/src/components/AsideNav.tsx +++ b/src/components/AsideNav.tsx @@ -11,218 +11,254 @@ import {ClassNamesFn, themeable} from '../theme'; export type LinkItem = LinkItemProps; interface LinkItemProps { - id?: number; - label: string; - hidden?: boolean; - open?: boolean; - active?: boolean; - className?: string; - children?: Array; - path?: string; - icon?: string; - component?: React.ReactType; + id?: number; + label: string; + hidden?: boolean; + open?: boolean; + active?: boolean; + className?: string; + children?: Array; + path?: string; + icon?: string; + component?: React.ReactType; } interface Navigation { - label: string; - children: Array; - prefix?: JSX.Element; - affix?: JSX.Element; - className?: string; - [propName: string]: any; + label: string; + children: Array; + prefix?: JSX.Element; + affix?: JSX.Element; + className?: string; + [propName: string]: any; } interface AsideNavProps { - id?: string; - className?: string; - classPrefix: string; - classnames: ClassNamesFn; - renderLink: Function; - isActive: Function; - isOpen: (link: LinkItemProps) => boolean; - navigations: Array; - renderSubLinks: (link: LinkItemProps, renderLink: Function, depth: number, props: AsideNavProps) => React.ReactNode; + id?: string; + className?: string; + classPrefix: string; + classnames: ClassNamesFn; + renderLink: Function; + isActive: Function; + isOpen: (link: LinkItemProps) => boolean; + navigations: Array; + renderSubLinks: ( + link: LinkItemProps, + renderLink: Function, + depth: number, + props: AsideNavProps + ) => React.ReactNode; } interface AsideNavState { - navigations: Array; + navigations: Array; } export class AsideNav extends React.Component { - static defaultProps = { - renderLink: (item: LinkItemProps) => {item.label}, - renderSubLinks: (link: LinkItemProps, renderLink: Function, depth: number, {classnames: cx}: AsideNavProps) => - link.children && link.children.length ? ( -
      - {link.label ? ( -
    • - {link.label} -
      • - ) : null} - {link.children.map((link, key) => renderLink(link, key, {}, depth + 1))} -
    - ) : link.label && depth === 1 ? ( -
    {link.label}
    - ) : null, - isActive: (link: LinkItem) => link.open, - isOpen: (item: LinkItemProps) => (item.children ? item.children.some(item => item.open) : false) + static defaultProps = { + renderLink: (item: LinkItemProps) => {item.label}, + renderSubLinks: ( + link: LinkItemProps, + renderLink: Function, + depth: number, + {classnames: cx}: AsideNavProps + ) => + link.children && link.children.length ? ( +
      + {link.label ? ( +
    • + {link.label} +
      • + ) : null} + {link.children.map((link, key) => + renderLink(link, key, {}, depth + 1) + )} +
    + ) : link.label && depth === 1 ? ( +
    {link.label}
    + ) : null, + isActive: (link: LinkItem) => link.open, + isOpen: (item: LinkItemProps) => + item.children ? item.children.some(item => item.open) : false + }; + + constructor(props: AsideNavProps) { + super(props); + + const isOpen = props.isOpen; + let id = 1; + this.state = { + navigations: mapTree( + props.navigations, + (item: Navigation) => { + const isActive = + typeof item.active === 'undefined' + ? (props.isActive as Function)(item) + : item.active; + + return { + ...item, + id: id++, + active: isActive, + open: isActive || isOpen(item as LinkItemProps) + }; + }, + 1, + true + ) }; - constructor(props: AsideNavProps) { - super(props); + this.renderLink = this.renderLink.bind(this); + this.toggleExpand = this.toggleExpand.bind(this); + } - const isOpen = props.isOpen; - let id = 1; - this.state = { - navigations: mapTree( - props.navigations, - (item: Navigation) => { - const isActive = - typeof item.active === 'undefined' ? (props.isActive as Function)(item) : item.active; + componentWillReceiveProps(nextProps: AsideNavProps) { + const props = this.props; + const isOpen = props.isOpen; - return { - ...item, - id: id++, - active: isActive, - open: isActive || isOpen(item as LinkItemProps) - }; - }, - 1, - true - ) - }; + if ( + props.navigations !== nextProps.navigations || + props.isActive !== nextProps.isActive + ) { + let id = 1; + this.setState({ + navigations: mapTree( + nextProps.navigations, + (item: Navigation) => { + const isActive = + typeof item.active === 'undefined' + ? (nextProps.isActive as Function)(item) + : item.active; - this.renderLink = this.renderLink.bind(this); - this.toggleExpand = this.toggleExpand.bind(this); + return { + ...item, + id: id++, + active: isActive, + open: isActive || isOpen(item as LinkItemProps) + }; + }, + 1, + true + ) + }); + } + } + + toggleExpand(link: LinkItemProps, e?: React.MouseEvent) { + if (e) { + e.stopPropagation(); + e.preventDefault(); } - componentWillReceiveProps(nextProps: AsideNavProps) { - const props = this.props; - const isOpen = props.isOpen; + this.setState({ + navigations: mapTree( + this.state.navigations, + (item: Navigation) => ({ + ...item, + open: link.id === item.id ? !item.open : item.open + }), + 1, + true + ) + }); + } - if (props.navigations !== nextProps.navigations || props.isActive !== nextProps.isActive) { - let id = 1; - this.setState({ - navigations: mapTree( - nextProps.navigations, - (item: Navigation) => { - const isActive = - typeof item.active === 'undefined' ? (nextProps.isActive as Function)(item) : item.active; + renderLink( + link: LinkItemProps, + key: any, + props: Partial = {}, + depth = 1 + ): React.ReactNode { + const { + renderLink, + isActive, + renderSubLinks, + classnames: cx, + ...others + } = this.props; - return { - ...item, - id: id++, - active: isActive, - open: isActive || isOpen(item as LinkItemProps) - }; - }, - 1, - true - ) - }); - } + const dom = (renderLink as Function)({ + link, + active: link.active, + open: link.open, + toggleExpand: this.toggleExpand, + depth, + classnames: cx, + ...others + }); + + if (!dom) { + return; } - toggleExpand(link: LinkItemProps, e?: React.MouseEvent) { - if (e) { - e.stopPropagation(); - e.preventDefault(); - } + return ( +
  • + {dom} + {renderSubLinks(link, this.renderLink, depth, this.props)} +
    • + ); + } - this.setState({ - navigations: mapTree( - this.state.navigations, - (item: Navigation) => ({ - ...item, - open: link.id === item.id ? !item.open : item.open - }), - 1, - true - ) - }); - } + render() { + const navigations = this.state.navigations; + let links: Array = []; + const {className, classnames: cx} = this.props; - renderLink(link: LinkItemProps, key: any, props: Partial = {}, depth = 1): React.ReactNode { - const {renderLink, isActive, renderSubLinks, classnames: cx, ...others} = this.props; - - const dom = (renderLink as Function)({ - link, - active: link.active, - open: link.open, - toggleExpand: this.toggleExpand, - depth, - classnames: cx, - ...others - }); - - if (!dom) { - return; - } - - return ( -
  • - {dom} - {renderSubLinks(link, this.renderLink, depth, this.props)} -
    • + navigations.forEach((navigation, index) => { + if (navigation.prefix) { + const prefix: JSX.Element = + typeof navigation.prefix === 'function' + ? (navigation.prefix as any)(this.props) + : navigation.prefix; + links.push( + React.cloneElement(prefix, { + ...prefix.props, + key: `${index}-prefix` + }) ); - } + } - render() { - const navigations = this.state.navigations; - let links: Array = []; - const {className, classnames: cx} = this.props; - - navigations.forEach((navigation, index) => { - if (navigation.prefix) { - const prefix: JSX.Element = - typeof navigation.prefix === 'function' - ? (navigation.prefix as any)(this.props) - : navigation.prefix; - links.push( - React.cloneElement(prefix, { - ...prefix.props, - key: `${index}-prefix` - }) - ); - } - - navigation.label && - links.push( -
  • - {navigation.label} -
    • - ); - - navigation.children.forEach((item, key) => { - const link = this.renderLink(item, `${index}-${key}`); - link && links.push(link); - }); - - if (navigation.affix) { - const affix: JSX.Element = - typeof navigation.affix === 'function' ? (navigation.affix as any)(this.props) : navigation.affix; - links.push( - React.cloneElement(affix, { - ...affix.props, - key: `${index}-affix` - }) - ); - } - }); - - return ( - + navigation.label && + links.push( +
  • + {navigation.label} +
    • ); - } + + navigation.children.forEach((item, key) => { + const link = this.renderLink(item, `${index}-${key}`); + link && links.push(link); + }); + + if (navigation.affix) { + const affix: JSX.Element = + typeof navigation.affix === 'function' + ? (navigation.affix as any)(this.props) + : navigation.affix; + links.push( + React.cloneElement(affix, { + ...affix.props, + key: `${index}-affix` + }) + ); + } + }); + + return ( + + ); + } } export default themeable(AsideNav); diff --git a/src/components/Button.tsx b/src/components/Button.tsx index b85bbc27..4335c784 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -9,116 +9,126 @@ import {pickEventsProps} from '../utils/helper'; import {ClassNamesFn, themeable} from '../theme'; interface ButtonProps - extends React.DetailedHTMLProps, HTMLButtonElement> { - id?: string; - className?: string; - href?: string; - size?: 'xs' | 'sm' | 'md' | 'lg'; - type: 'button' | 'reset' | 'submit'; - level: string; // 'link' | 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger' | 'light' | 'dark' | 'default'; - tooltip?: string | TooltipObject; - placement: 'top' | 'right' | 'bottom' | 'left'; - tooltipContainer?: any; - tooltipTrigger: Trigger | Array; - tooltipRootClose: boolean; - disabled?: boolean; - active?: boolean; - block?: boolean; - iconOnly?: boolean; - disabledTip?: string | TooltipObject; - classPrefix: string; - classnames: ClassNamesFn; - componentClass: React.ReactType; + extends React.DetailedHTMLProps< + React.ButtonHTMLAttributes, + HTMLButtonElement + > { + id?: string; + className?: string; + href?: string; + size?: 'xs' | 'sm' | 'md' | 'lg'; + type: 'button' | 'reset' | 'submit'; + level: string; // 'link' | 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger' | 'light' | 'dark' | 'default'; + tooltip?: string | TooltipObject; + placement: 'top' | 'right' | 'bottom' | 'left'; + tooltipContainer?: any; + tooltipTrigger: Trigger | Array; + tooltipRootClose: boolean; + disabled?: boolean; + active?: boolean; + block?: boolean; + iconOnly?: boolean; + disabledTip?: string | TooltipObject; + classPrefix: string; + classnames: ClassNamesFn; + componentClass: React.ReactType; } export class Button extends React.Component { - static defaultProps: Pick< - ButtonProps, - 'componentClass' | 'level' | 'type' | 'placement' | 'tooltipTrigger' | 'tooltipRootClose' - > = { - componentClass: 'button', - level: 'default', - type: 'button', - placement: 'top', - tooltipTrigger: ['hover', 'focus'], - tooltipRootClose: false - }; + static defaultProps: Pick< + ButtonProps, + | 'componentClass' + | 'level' + | 'type' + | 'placement' + | 'tooltipTrigger' + | 'tooltipRootClose' + > = { + componentClass: 'button', + level: 'default', + type: 'button', + placement: 'top', + tooltipTrigger: ['hover', 'focus'], + tooltipRootClose: false + }; - renderButton() { - let { - level, - size, - disabled, - className, - componentClass: Comp, - classnames: cx, - children, - disabledTip, - block, - type, - active, - iconOnly, - href, - ...rest - } = this.props; + renderButton() { + let { + level, + size, + disabled, + className, + componentClass: Comp, + classnames: cx, + children, + disabledTip, + block, + type, + active, + iconOnly, + href, + ...rest + } = this.props; - if (href) { - Comp = 'a'; - } - - return ( - - {children} - - ); + if (href) { + Comp = 'a'; } - render() { - const { - tooltip, - placement, - tooltipContainer, - tooltipTrigger, - tooltipRootClose, - disabled, - disabledTip, - classPrefix, - classnames: cx - } = this.props; + return ( + + {children} + + ); + } - return ( - - {disabled && disabledTip ? ( -
    {this.renderButton()}
    - ) : ( - this.renderButton() - )} -     - ); - } + render() { + const { + tooltip, + placement, + tooltipContainer, + tooltipTrigger, + tooltipRootClose, + disabled, + disabledTip, + classPrefix, + classnames: cx + } = this.props; + + return ( + + {disabled && disabledTip ? ( +
    + {this.renderButton()} +
    + ) : ( + this.renderButton() + )} +     + ); + } } export default themeable(Button); diff --git a/src/components/Checkbox.tsx b/src/components/Checkbox.tsx index bcda435c..e39f33e6 100644 --- a/src/components/Checkbox.tsx +++ b/src/components/Checkbox.tsx @@ -7,111 +7,115 @@ import React from 'react'; import cx from 'classnames'; import {ClassNamesFn, themeable} from '../theme'; import {autobind} from '../utils/helper'; -import { filter } from '../utils/tpl'; +import {filter} from '../utils/tpl'; const sizeMap = { - sm: 'i-checks-sm', - lg: 'i-checks-lg', - small: 'i-checks-sm', - large: 'i-checks-lg' + sm: 'i-checks-sm', + lg: 'i-checks-lg', + small: 'i-checks-sm', + large: 'i-checks-lg' }; interface CheckboxProps { - id?: string; - key?: string | number; - style?: React.CSSProperties; - type?: string; - size?: 'sm' | 'lg' | 'small' | 'large'; - label?: string; - labelClassName?: string; - className?: string; - onChange?: (value: any) => void; - value?: any; - containerClass?: string; - inline?: boolean; - trueValue?: boolean; - falseValue?: boolean; - disabled?: boolean; - readOnly?: boolean; - checked?: boolean; - name?: string; - description?: string; - classPrefix: string; - classnames: ClassNamesFn; - partial?: boolean; - data?: any; + id?: string; + key?: string | number; + style?: React.CSSProperties; + type?: string; + size?: 'sm' | 'lg' | 'small' | 'large'; + label?: string; + labelClassName?: string; + className?: string; + onChange?: (value: any) => void; + value?: any; + containerClass?: string; + inline?: boolean; + trueValue?: boolean; + falseValue?: boolean; + disabled?: boolean; + readOnly?: boolean; + checked?: boolean; + name?: string; + description?: string; + classPrefix: string; + classnames: ClassNamesFn; + partial?: boolean; + data?: any; } export class Checkbox extends React.Component { - static defaultProps = { - trueValue: true, - falseValue: false, - type: 'checkbox' - }; + static defaultProps = { + trueValue: true, + falseValue: false, + type: 'checkbox' + }; - @autobind - handleCheck(e: React.ChangeEvent) { - const {trueValue, falseValue, onChange} = this.props; + @autobind + handleCheck(e: React.ChangeEvent) { + const {trueValue, falseValue, onChange} = this.props; - if (!onChange) { - return; - } - - onChange(e.currentTarget.checked ? trueValue : falseValue); + if (!onChange) { + return; } - render() { - let { - size, - className, - classnames: cx, - value, - label, - partial, - trueValue, - children, - disabled, - description, - readOnly, - checked, - type, - name, - data, - labelClassName - } = this.props; + onChange(e.currentTarget.checked ? trueValue : falseValue); + } - className = (className ? className : '') + (size && sizeMap[size] ? ` ${sizeMap[size]}` : ''); + render() { + let { + size, + className, + classnames: cx, + value, + label, + partial, + trueValue, + children, + disabled, + description, + readOnly, + checked, + type, + name, + data, + labelClassName + } = this.props; - return ( - - ); - } + className = + (className ? className : '') + + (size && sizeMap[size] ? ` ${sizeMap[size]}` : ''); + + return ( + + ); + } } export default themeable(Checkbox); diff --git a/src/components/Checkboxes.tsx b/src/components/Checkboxes.tsx index cc4baa93..4ed2c503 100644 --- a/src/components/Checkboxes.tsx +++ b/src/components/Checkboxes.tsx @@ -15,77 +15,98 @@ import {ClassNamesFn, themeable} from '../theme'; // import isPlainObject = require('lodash/isPlainObject'); export interface Option { - label?: string; - value?: any; - disabled?: boolean; - children?: Options; - description?: string; - [propName: string]: any; + label?: string; + value?: any; + disabled?: boolean; + children?: Options; + description?: string; + [propName: string]: any; } export interface Options extends Array