UI Components

Member

成员组件。根据成员类型，动态调用 React/Vue.Section.<MemberType> 命名空间下的组件，如组件存在则进行绘制，否则抛出异常。 React/Vue.Section.<MemberType> 命名空间下的组件可自定义 onAction 函数的触发时机，触发时须传入满足 MemberComponent*Action 数据结构的唯一参数。

// Member Props
// @prop {ReactiveInstance} reactive
// @prop {Object} member
// @prop {string} member.id - 成员唯一标识
// @prop {Function} [onAction] - 可传入 'React.Section.<MemberType>' 命名空间下组件的 onAction 函数

// @example

import React from 'react'
import { UI } from 'rcfm/react'
// @namespace UI.use('React.Section.Member')
const Member = UI.use('React.Section.Member')
export default function MyComponent(props = {}) {
  const {reactive, memberId} = props
  const actionHandler = (param) => console.log(param)
  return <Member
    reactive={reactive}
    member={{id: memberId}}
    onAction={actionHandler}
  />
}

// Member Props
// @prop {ReactiveInstance} reactive
// @prop {Object} member
// @prop {string} member.id - 成员唯一标识

// Member Emmits
// @emmit action - 可传入 'Vue.Section.<MemberType>' 命名空间下组件的 onAction 函数

// @example

<script setup>
  import { UI } from 'rcfm/vue'
  const props = defineProps(['reactive', 'memberId'])
  // @namespace UI.use('Vue.Section.Member')
  const Member = UI.use('Vue.Section.Member')
  const actionHandler = (param) => console.log(param)
</script>

<template>
  <Member
    :reactive="reactive"
    :member="{id: memberId}"
    @action="actionHandler"
  />
</template>

Member Editor

成员配置组件。根据成员类型，尝试调用 React/Vue.Section.<MemberType>.Editor 命名空间下的组件，如组件存在则进行绘制，否则调用默认成员配置组件并绘制。匹配的组件可自定义 onAction 函数的触发时机，触发时须传入满足 MemberComponent*Action 数据结构的唯一参数。

默认成员配置组件会调用 Member PropEditor，对成员 schema 定义范围内的各属性配置组件进行绘制。

// Member Editor Props
// @prop {ReactiveInstance} reactive
// @prop {Object} member
// @prop {string} member.id - 成员唯一标识
// @prop {Function} [onAction] - 可传入 onAction 函数

// @example

import React from 'react'
import { UI } from 'rcfm/react'
// @namespace UI.use('React.Section.Member.Editor')
const MemberEditor = UI.use('React.Section.Member.Editor')
export default function MyComponent(props = {}) {
  const {reactive, memberId} = props
  const actionHandler = (param) => console.log(param)
  return <MemberEditor
    reactive={reactive}
    member={{id: memberId}}
    onAction={actionHandler}
  />
}

// Member Editor Props
// @prop {ReactiveInstance} reactive
// @prop {Object} member
// @prop {string} member.id - 成员唯一标识

// Member Editor Emmits
// @emmit action - 可传入 onAction 函数

// @example

<script setup>
  import { UI } from 'rcfm/vue'
  const props = defineProps(['reactive', 'memberId'])
  // @namespace UI.use('Vue.Section.Member.Editor')
  const MemberEditor = UI.use('Vue.Section.Member.Editor')
  const actionHandler = (param) => console.log(param)
</script>

<template>
  <MemberEditor
    :reactive="reactive"
    :member="{id: memberId}"
    @action="actionHandler"
  />
</template>

Member Previewer

成员预览组件。根据成员类型，尝试调用 React/Vue.Section.<MemberType>.Previewer 命名空间下的组件，如组件存在则进行绘制，否则尝试调用 React/Vue.Section.<MemberType> 命名空间下的组件并绘制为只读状态，如未找到任何匹配的组件，则抛出异常。匹配的组件可自定义 onAction 函数的触发时机，触发时须传入满足 MemberComponent*Action 数据结构的唯一参数。

// Member Previewer Props
// @prop {ReactiveInstance} reactive
// @prop {Object} member
// @prop {string} member.id - 成员唯一标识
// @prop {Function} [onAction] - 可传入 onAction 函数

// @example

import React from 'react'
import { UI } from 'rcfm/react'
// @namespace UI.use('React.Section.Member.Previewer')
const MemberPreviewer = UI.use('React.Section.Member.Previewer')
export default function MyComponent(props = {}) {
  const {reactive, memberId} = props
  const actionHandler = (param) => console.log(param)
  return <MemberPreviewer
    reactive={reactive}
    member={{id: memberId}}
    onAction={actionHandler}
  />
}

// Member Previewer Props
// @prop {ReactiveInstance} reactive
// @prop {Object} member
// @prop {string} member.id - 成员唯一标识

// Member Previewer Emmits
// @emmit action - 可传入 onAction 函数

// @example

<script setup>
  import { UI } from 'rcfm/vue'
  const props = defineProps(['reactive', 'memberId'])
  // @namespace UI.use('Vue.Section.Member.Previewer')
  const MemberPreviewer = UI.use('Vue.Section.Member.Previewer')
  const actionHandler = (param) => console.log(param)
</script>

<template>
  <MemberPreviewer
    :reactive="reactive"
    :member="{id: memberId}"
    @action="actionHandler"
  />
</template>

Member PropEditor

成员属性配置组件。根据成员类型及属性名称，依次尝试调用以下命名空间中的组件：

React/Vue.Section.<MemberType>.PropEditor
React/Vue.Section.<MemberType>.PropEditor.<Property>
React/Vue.Section.Member.PropEditor.<Property>

如组件存在则进行绘制，否则调用默认成员属性配置组件并绘制。匹配的组件可自定义 onAction 函数的触发时机，触发时须传入满足 MemberComponent*Action 数据结构的唯一参数。

// Member PropEditor Props
// @prop {ReactiveInstance} reactive
// @prop {Object} member
// @prop {string} member.id - 成员唯一标识
// @prop {string} member.prop - 成员属性名称
// @prop {Function} [onAction] - 可传入 onAction 函数

// @example

import React from 'react'
import { UI } from 'rcfm/react'
// @namespace UI.use('React.Section.Member.PropEditor')
const MemberPropEditor = UI.use('React.Section.Member.PropEditor')
export default function MyComponent(props = {}) {
  const {reactive, memberId, property} = props
  const actionHandler = (param) => console.log(param)
  return <MemberPropEditor
    reactive={reactive}
    member={{id: memberId, prop: property}}
    onAction={actionHandler}
  />
}

// Member PropEditor Props
// @prop {ReactiveInstance} reactive
// @prop {Object} member
// @prop {string} member.id - 成员唯一标识
// @prop {string} member.prop - 成员属性名称

// Member PropEditor Emmits
// @emmit action - 可传入 onAction 函数

// @example

<script setup>
  import { UI } from 'rcfm/vue'
  const props = defineProps(['reactive', 'memberId', 'property'])
  // @namespace UI.use('Vue.Section.Member.PropEditor')
  const MemberPropEditor = UI.use('Vue.Section.Member.PropEditor')
  const actionHandler = (param) => console.log(param)
</script>

<template>
  <MemberPropEditor
    :reactive="reactive"
    :member="{id: memberId, prop: property}"
    @action="actionHandler"
  />
</template>

Form

表单组件。按照 Reactive 实例中各成员状态，绘制表单填写视图。

// Form Props
// @prop {ReactiveInstance} reactive

// @example

import React from 'react'
import { UI } from 'rcfm/react'
// @namespace UI.use('React.View.Form')
const Form = UI.use('React.View.Form')
export default function MyForm(props = {}) {
  const {reactive} = props
  return <Form reactive={reactive} />
}

// Form Props
// @prop {ReactiveInstance} reactive

// @example

<script setup>
  import { UI } from 'rcfm/vue'
  const props = defineProps(['reactive'])
  // @namespace UI.use('Vue.View.Form')
  const Form = UI.use('Vue.View.Form')
</script>

<template>
  <Form :reactive="reactive" />
</template>

Form Builder

表单配置组件。按照 Reactive 实例中各成员状态，绘制表单配置视图。

// Form Props
// @prop {ReactiveInstance} reactive

// @example

import React from 'react'
import { UI } from 'rcfm/react'
// @namespace UI.use('React.View.Form.Builder')
const FormBuilder = UI.use('React.View.Form.Builder')
export default function MyFormBuilder(props = {}) {
  const {reactive} = props
  return <FormBuilder reactive={reactive} />
}

// Form Props
// @prop {ReactiveInstance} reactive

// @example

<script setup>
  import { UI } from 'rcfm/vue'
  const props = defineProps(['reactive'])
  // @namespace UI.use('Vue.View.Form.Builder')
  const FormBuilder = UI.use('Vue.View.Form.Builder')
</script>

<template>
  <FormBuilder :reactive="reactive" />
</template>