@feb-team/props-spec NPM

组件入参规范

入参设计规范

BaseProps 必须是跨端的，框架无关的属性
使用 见名知意 的单词命名参数
- type - 通用的组件类型，通常对应视觉的几种状态
- size - UI 层面每个组件的尺寸大小
- icon - 组件图标
- style/xxStyle - 组件元素上面的行内样式
- htmlXX - 组件的原生 HTML 属性
状态参数区分动/名词形式
- disabled - 禁用状态
- loading - 加载中状态
常用的 class 名 不区分 动/名词形式
- disable - 表示不可用状态的 class 类名
- active - 表示激活状态的 class 类名
避免使用 CSS 规则中的属性简写（基础入参可能会用到）
- color - 颜色
- margin - 边距
默认值要添加 default 前缀，必须是属性而不是状态，用于组件内部重置操作
- defaultValue
- defaultActive
- defaultActiveDate
对于影响组件正确性的入参，应该尽量的校验，比如，Image 和 Avatar 的 src 属性
- 必须不为空
- 必须为绝对地址 URL
使用到 icon 图标参数的地方，参数统一叫：icon，类型为：false | string | React.ReactNode。实现上：关闭按钮多包一层div，父级div上绑定好默认的关闭方法，子元素整个可以是 ReactNode。注意要添加上事件钩子 onBeforeClose，如有必要还要实现 CloseAction，类似的组件有：Tag, Alert
- false 表示无图标
- string 表示legao icon的名字
- ReactNode 完全交由用户自定义
数据类入参默认命名：data
事件命名必须添加 on 前缀，钩子函数要添加 Before/After 前缀
- onChange
- onBeforeChange
表单相关组件，如：Input, Select, Checkbox, Radio 等。必须实现 onChange: (value: T) 的入参数

入参类型设计规范

优先使用入参规范中的通用类型：
- UISize - 通用的组件尺寸
- UIType - 通用的组件类型
- LegaoClassName - 原子类类名类型
优先使用原生、框架内部的类型
- style: CSSProperties - React 组件的 style 属性包装类型
- htmlTag: keyof HTMLElementTagNameMap - 使用 HTML 原生类型
如果类型是可以 枚举尽 的字符串，请使用 TS 的字符串字面量类型
- xxxType: 'type1' | 'type2' | 'type3'

生成默认组件

执行下面的脚本默认生成标准组件目录

# Alert 为组件名
_NAME_=Alert ./bin/generate.sh

组件属性对照表

入参设计是可同时参照，现有 Legao react, Legao vue 与 Antd 的相关设计：

组件属性对照表.xsl

UI 组件端实现示例（React）

安装依赖

npm install @feb-team/data-logic @feb-team/props-spec --save --registry=http://registry.m.jd.com/

分页器 Pagination

详细实现，请参考 Pagination

import React, {Component} from 'react'

import {ReactPaginationProps} from '@feb-team/props-spec'

export interface PaginationProps extends ReactPaginationProps {}
export interface PaginationState {}
export class Pagination extends Component<PaginationProps, PaginationState> implements PaginationComponent {}

入参的结构层次

参数对应关系

参数对应关系.png

参数实例对应关系

参数实例对应关系.png

入参示例

type UISize = 'sm' | 'md' | 'lg'
type SimpleValue = string | number
type UIType = 'info' | 'warn' | 'error' | 'ok'

// 生成器生成类型
type LegaoColor = 'gray-100' | 'gray-200' | 'gray-300'
type LegaoMargin = 2 | 4 | 6 | 8 | 10

// 基础属性
export interface BaseProps {
    className: string       // 任何时候用户都可以为外层元素添加自定义 class
    style: CSSProperties    // 任何时候用户都可以为外层元素添加行内样式
}
// 规范属性示例
export interface StandardComponentPropNames extends BaseProps {
    /* UI 属性 */
    type: GeneralType                   // 通用的组件类型，通常对应视觉的几种状态
    size: GeneralSize                   // UI 层面每个组件的三种尺寸大小
    icon: string | React.ReactNode      // icon 名称
    xxStyle: CSSProperties              // 某 UI 独立部分的样式

    /* 原生 HTML 属性*/
    htmlTag: keyof HTMLElementTagNameMap

    /* UI 状态 */
    disabled: boolean                   // 组件禁用状态
    loading: boolean                    // 组件加载状态
    current: number                     // 有明显的**数字**标识
    
    /* 底层的样式配置属性 */
    bg: LegaoColor                      // LegaoUI 背景颜色
    color: LegaoColor                   // LegaoUI 前景颜色
    margin: [LegaoMargin, LegaoMargin]  // LegaoUI 外边距
    
    /* 数据属性 */
    data: object[]                      // 数据属性
    
    /* 默认值 */
    defaultValue: SimpleValue           // 表单/属性的默认只读属性
    defaultActive: SimpleValue          // 组件属性的默认当前状态值
    defaultActiveData: Date             // 当前默认日期
    defaultActiveXXX: SimpleValue       // 当前默认 XX
    
    /* 通用事件方法 */
    onChange: (value: SimpleValue) => boolean     // 表单组件统一变化事件
    
    // 切换事件钩子，返回值为false则不触发onSwitch
    onBeforeSwitch: (key: string | number) => boolean
    // UI 切换事件
    onSwitch: (key: string | number) => void      
    
    /* 高级渲染函数 */
    xxRender: () => React.ReactNode     // Render props 属性，默认 Render 后缀
}