uca/economy

Zero Ui 中的Web组件

1.组件使用

组使用的代码如下：

import { XXX } from 'web';

// .....
return (
     <XXX/>
)

economy组件层位于ux工具之上，可直接执行如下代码

import Ux from 'ux';

2.组件文档标记

  1. 属性props：直接从上层组件中继承过来的属性。
  2. 状态state：当前组件执行componentDidMount构造的状态。

3.组件列表

生命周期中的单个标记分别对应Hoc生命周期，Mount初始化，Update更新三个生命周期。

|组件名|生命周期|相关Ant组件|className|说明| |:---|:---|---|:---|:---|:---| |* Dialog|x o o|<Modal/>|ux_dialog
web-dynamic-dialog|动态弹出框专用组件，可配置不同弹出框。| |* DialogButton|x o x|<Button/>
-- <Modal/>
-- <Drawer/>
-- <Popover/>|ux_dialog-button-header|带子组件的按钮，可渲染按钮内组件。| |* DialogMenu|x o x|<Dropdown/>
--<Menu/>
--<Button/>||包含子组件专用的菜单执行。| |* PageCard|o o x|<Card/>|web-card|卡片组件容器。| |* Rectangle|x x x|<fieldset/>|web-rectangle|「Html」专用HTML矩形元素。| |ColumnUser|x o x|<Fragment/>||表格中的列渲染专用<Table/>执行。| |G6Editor|x o x|复杂元素|web-g6-editor|拓扑图编辑器| |G6Viewer|x o x|复杂元素|web-g6-viewer|拓扑图查看器| |Graphic2|x o o|<div/>||G2渲染图信息。| |LoadingAlert|x x x|<Alert/>|web-alert-iconlist
web-alert-list
web-alert-text|警告信息专用组件，支持多行文本、图标计算、多数据格式、直接配置模式。| |LoadingContent|o x x|<Spin/>|web-loading|加载效果专用组件，支持组件/页面/区域三种。| |Navigation|x x x|<Breadcrumb/>|web-navigation|面包屑导航组件。| |NavSwallow|x x x|<div/>|web-nav-swallow|燕尾导航专用组件。|

4.设计原则

  1. 属性传入过程中的所有内容（源 = props），都是通过编程方式传入，优先级最高，它通常会覆盖Zero Ui解析过后的默认行为。
  2. 只要存在状态数据，在render中都会调用Ux.xtReady方法执行加载完成后的第一个render，该操作可防止异步结果未完成导致的渲染错误。

4.1. 特殊说明

  1. Dialog中的web-dynamic-dialog是遗留系统使用的className，新系统都会使用ux_dialog来实现，暂时未重构。
  2. 组件中带*的表示当前组件支持children属性，即组件本身为容器组件。
  3. FormDesigner不提供文档说明，因为它主要存在于Ox中的配置模块，不属于标准操作，通常是直接使用。

4.2. 基础文件规范

4.2.1. 文件规范

文件 说明
UI.js 主入口源代码文件。
Op.js 事件专用源代码文件。
Web.jsx Jsx渲染专用函数。

4.2.2. 函数规范

特定函数 说明
componentCt 构造函数，constructor函数专用。
componentInit 初始化函数，componentDidMount函数专用。
componentUp 更新函数，componentDidUpdate函数专用。
renderXXX Jsx渲染专用函数。
yiXXX 初始化状态专用方法（子方法、主方法）。
yoXXX 渲染组件专用计算方法。

4.2.3. 属性状态规范

变量 源 说明
config props 组件配置数据。
data props 组件核心数据（一般是业务数据）。
rxInject props 「开发」注入专用，修改配置用。
$submitting props 防重复提交的专用属性，$submitting = true表示正在提交。
$ready state 加载完成专用属性。

Methods

(static) * PageCard()

「组件」PageCard

import { PageCard } from 'web';

1. 生命周期

Hoc高阶周期 Mount初始化 Update更新
Ok Ok x

2. 属性说明

属性名 二级属性 源 类型 说明
children props Jsx React中专用的children子元素信息。
reference props React 父引用，遵循Zero Ui的规范，该变量为固定变量，引用父组件。
className props String 外置传入className，计算最终的风格专用属性，默认web-card。
$key props String 读取外层绑定资源文件，调用Ux.fromXX作用于reference，默认读取_page节点。
$submitting props Boolean 是否处于提交状态，如果提交状态，则会计算按钮的loading属性。
$title props String 卡片标题文本数据，优先使用$title属性，
$leftVisible props Boolean 是否隐藏左边按钮。
$rightVisible props Boolean 是否隐藏右边按钮。
$backVisible props Boolean 是否隐藏返回按钮。
$disabled props Object 按钮禁用状态计算，根据不同的状态禁用对应按钮。
$extra props Jsx 是否执行extra属性的注入，计算extraContent部分。
rxInject props Function 「开发」注入配置专用函数。
$config left state Array 卡片组件左侧按钮。
$config right state Array 卡片组件右侧按钮。

3. 组件核心点

3.1. 工具栏

整个PageCard工具栏分为三部分

左 右 关闭
左侧按钮区间 右侧按钮区间 关闭按钮区间
$leftVisible $rightVisible $backVisible

如果传入了$extra变量，那么这个Jsx元素会替换掉$rightVisible和$backVisible两个区域的组件。

3.2. 防重复提交

左侧和右侧的按钮通常会使用Ux.connectId方法触发按钮点击动作，并且会根据$submitting的值来判断 当前按钮是否处于加载状态，即使是不在当前组件的子组件中，也可以直接使用该值来渲染按钮的加载。

3.3. 禁用状态

$config变量中存储了left和right中每一个按钮的key信息，而$disabled则存储了禁用启用状态（外置传入）。

假设$disabled包含了值：

{
    "key1": true,
    "key2": true
}

上述配置会禁用key1和key2的按钮信息。

(static) * Rectangle()

「组件」Rectangle

import { Rectangle } from 'web';

1. 生命周期

Hoc高阶周期 Mount初始化 Update更新
x x x

2. 属性说明

属性名 二级属性 源 类型 说明
children props Jsx React中专用的children子元素信息。
config props Object
config title props String <fieldset/>元素中的legend专用。

(static) G6Editor()

「组件」G6Editor

1. 生命周期

Hoc高阶周期 Mount初始化 Update更新
x Ok x

2. 属性说明

属性名 二级属性 源 类型 说明
$gEvent props GEvent 图综合对象。
$ready state Boolean 标识当前组件已经加载完成。

(static) G6Viewer()

「组件」G6Viewer

1. 生命周期

Hoc高阶周期 Mount初始化 Update更新
x Ok x

2. 属性说明

属性名 二级属性 源 类型 说明
$gEvent props GEvent 图综合对象。
$ready state Boolean 标识当前组件已经加载完成。

(static) Graphic2()

「组件」Graphic2

import { Graphic2 } from 'web';

1. 生命周期

Hoc高阶周期 Mount初始化 Update更新
x Ok Ok

2. 属性说明

属性名 二级属性 源 类型 说明
config props Object g2图形专用配置数据。
data props Array 渲染图形专用的数据。
$gid props String 当前g2图形的<div/>的id属性，g2的API专用。
$gFn props Function 构造配置的专用函数。
$g2 state Object 最终计算出来的配置信息。
$ready state Boolean 标识当前组件已经加载完成。

3. 组件核心点

3.1. $gFn函数

$gFn是一个必须传入的函数，用于构造graphic引用，这个引用可直接调用下边API执行图形渲染， 目前可绑定的函数如：

  • Ux.g2Bar：饼图构造函数。

(static) NavSwallow()

「组件」NavSwallow

import { NavSwallow } from 'web';

1. 生命周期

Hoc高阶周期 Mount初始化 Update更新
x x x

2. 属性说明

属性名 二级属性 源 类型 说明
$common props Boolean 是否普通模式。
$steps title props Array 当前步骤的标题信息。
$current props Number 激活的当前步骤，从0开始，配合索引计算。

3. 组件核心点

3.1. 特定className的值

$common属性 节点类型 className值
true 开始节点 step start-common
true 中间节点 step-middle
true 结束节点 step-middle
false 开始节点 step
false 中间节点 step-middle
false 结束节点 step-end
无关 激活节点 step-active

(static) Navigation()

「组件」Navigation

旧名称依然可用：PagerHeader

import { PagerHeader } from 'web';     // 旧版本
import { Navigation } from 'web';

1. 生命周期

Hoc高阶周期 Mount初始化 Update更新
x x x

2. 属性说明

属性名 二级属性 源 类型 说明
$router props DataRouter 特殊属性$router用于执行路由操作的专用对象。
$navs props Array 每个元素最终用于aiLink操作。

面包屑导航渲染，通常用于主界面的二级面包屑导航，链接会禁用<a/>的href导航而采用react-router中的路由导航功能。

(static) RowStar()

「组件」RowStar