UI

// @namespace UI
import { UI } from 'rcfm/helper'
// or
import { UI } from 'rcfm/react'
// or
import { UI } from 'rcfm/vue'

Custom Types

@typedef {Object} UIDefination
@description - UI 定义

@prop {string} name - UI 组件名称
@prop {Function|Object} component - UI 组件绘制函数或组件定义对象
@prop {boolean} [force = false] - 是否代替现存同名组件

@typedef {Object} MemberComponentAddAction
@description - UI 组件触发的添加成员动作

@prop {ReactiveInstance} reactive
@prop {string} action = "add" - 动作类型
@prop {string} parentId - 父级成员唯一标识
@prop {Object} props - 添加成员的属性设定值对象

@typedef {Object} MemberComponentDeleteAction
@description - UI 组件触发的删除成员动作

@prop {ReactiveInstance} reactive
@prop {string} action = "delete" - 动作类型
@prop {string} id - 成员唯一标识

@typedef {Object} MemberComponentUpdateAction
@description - UI 组件触发的更新成员动作

@prop {ReactiveInstance} reactive
@prop {string} action = "update" - 动作类型
@prop {string} id - 成员唯一标识
@prop {string} prop - 属性名称
@prop {*} value - 属性设定值

Exception Types

@type {ExceptionInstance}
@description - UI 组件名称冲突

@prop {string} type = "UI_INSTALLER_CONFLICTED_NAME"
@prop {string} [name = type]
@prop {Object} [data = {}]
@prop {string} [message]

@type {ExceptionInstance}
@description - UI 组件不存在

@prop {string} type = "UI_INSTALLER_TARGET_NOT_FOUND"
@prop {string} [name = type]
@prop {Object} [data = {}]
@prop {string} [message]

Instance Methods

#has()

判断是否存在某名称的 UI 组件。

// UI#has(name)
// @param {string} name - UI 组件名称
// @returns {boolean}

// @examples
UI.has('React.View.Form') // true
UI.has('uninstalled') // false

// UI#has(name)
// @param {string} name - UI 组件名称
// @returns {boolean}

// @examples
UI.has('Vue.View.Form') // true
UI.has('uninstalled') // false

#install()

注册一个 UI 组件。

// UI#install(defination)
// @param {UIDefination} defination
// @returns {undefined}

// ./my-component.jsx
export default function MyComponent(props = {}) {
  const klass = 'my-component'
  return <div className={klass}>{props.children}</div>
}

import MyComponent from './my-component.jsx'
// @example - 注册一个 UI 组件
UI.install({
  name: 'React.MyComponent',
  component: MyComponent
})
// @example - UI 组件名称重复
// Throws an "UI_INSTALLER_CONFLICTED_NAME" exception.
UI.install({
  name: 'React.MyComponent',
  component: MyComponent
})
// @example - 替换一个 UI 组件
UI.install({
  force: true,
  name: 'React.MyComponent',
  component: MyComponent

// UI#install(defination)
// @param {UIDefination} defination
// @returns {undefined}

// ./my-component.vue
<script setup>
  const klass = 'my-component'
</script>

<template>
  <section :class="klass"><slot></slot></section>
</template>

import MyComponent from './my-component.vue'
// @example - 注册一个 UI 组件
UI.install({
  name: 'Vue.MyComponent',
  component: MyComponent
})
// @example - UI 组件名称重复
// Throws an "UI_INSTALLER_CONFLICTED_NAME" exception.
UI.install({
  name: 'Vue.MyComponent',
  component: MyComponent
})
// @example - 替换一个 UI 组件
UI.install({
  force: true,
  name: 'Vue.MyComponent',
  component: MyComponent

#try()

按一组 UI 组件名称前后顺序匹配注册过的组件，并返回第一个匹配到的组件的绘制函数，若一个也没有注册过则抛出异常。

// UI#try(names)
// @param {string[]} names - UI 组件名称数组
// @returns {UIDefination} - 返回组件绘制函数或定义

// @example - returns React.MyComponent 绘制函数
UI.try(['uninstalled', 'React.MyComponent'])
// @example - throws an "UI_INSTALLER_TARGET_NOT_FOUND" exception
UI.try(['uninstalled', 'React.uninstalled'])

// UI#try(names)
// @param {string[]} names - UI 组件名称数组
// @returns {UIDefination} - 返回组件绘制函数或定义

// @example - returns Vue.MyComponent 组件定义
UI.try(['uninstalled', 'Vue.MyComponent'])
// @example - throws an "UI_INSTALLER_TARGET_NOT_FOUND" exception
UI.try(['uninstalled', 'Vue.uninstalled'])

#use()

按组件名称获取注册过的 UI 组件的绘制函数，若组件不存在则抛出异常。

// UI.use(name)
// @param {string} name - UI 组件名称
// @returns {UIDefination} - 返回组件绘制函数或定义

// @example - returns React.MyComponent 绘制函数
UI.use('React.MyComponent')
// @example - throws an "UI_INSTALLER_TARGET_NOT_FOUND" exception
UI.use('uninstalled')

// UI.use(name)
// @param {string} name - UI 组件名称
// @returns {UIDefination} - 返回组件绘制函数或定义

// @example - returns Vue.MyComponent 组件定义
UI.use('Vue.MyComponent')
// @example - throws an "UI_INSTALLER_TARGET_NOT_FOUND" exception
UI.use('uninstalled')