@quec/panel-component-customer-attrs
v1.0.7
Published
自定义物模型组件库
Downloads
1
Maintainers
Readme
版本记录
| 版本号 | 功能 | 时间 | 作者 | 备注 | | ------ | ----------------------- | ---------- | ------- | ---- | | 1.0.0 | 首次创建 | 2022-09-05 | ives.li | 无 | | 1.0.4 | 样式修改 | 2022-10-17 | ives.li | | | 1.0.6 | 支持自定义itemview | 2024-01-05 | ives.li | | | 1.0.7 | 去除quec-app-basic-ui库 | 2024-01-12 | ives.li | |
组件列表
CustomerAttrsView
物模型列表展示
| 属性 | 释义 | 类型 | 默认值 | 备注 | | ---------------------- | -------------------------------------------------- | -------------------------------------------------------------- | ------ | ------------------------------------------------------------------------------ | | attrList | 物模型列表 | any[] | | | | onBoolAttrChange | bool型值变化回调 | Function | | | | onEnumAttrChange | enum型点击回调 | Function | | | | onNumberAttrChange | number型点击回调 | Function | | | | onTextAttrChange | text型点击回调 | Function | | | | onStructAttrClick | struct型点击回调 | Function | | | | onArrayAttrClick | array型点击回调 | Function | | | | containerStyle | 自定义界面物模型容器样式,如不设置,则采用默认样式 | ViewStyle | | | | itemTitleStyle | item标题样式,如不设置,则采用默认样式 | ViewStyle | | | | itemValueStyle | item value样式,如不设置,则采用默认样式 | ViewStyle | | | | itemMoreImg | item右侧按钮图片,如不设置,则采用默认样式 | any | | | | itemMoreImgStyle | item 右侧更多图标样式,如不设置,则采用默认样式 | ViewStyle | | | | enableDivider | 是否需要显示分割线 | boolean | true | | | dividerStyle | item分割线样式 | ViewStyle | | | | renderCustomerItemView | 自定义item样式 | (attr: any, showDivider: boolean) => React.ReactElement| null | | 自定义attr对应的item界面,如果返回null或者不定义该参数,则会按默认的界面渲染; |
BaseReadStructAttrPage
只读结构体物模型界面
| 参数 | 释义 | 类型 | | ---- | -------------------- | ------ | | attr | 对应结构体物模型数据 | Object |
| 方法 | 返回值 | 释义 | | --------------------- | ---------------------- | ----------------------------------- | | getContainerStyle | ViewStyle or undefined | 整个物模型的容器 | | getItemContainerStyle | ViewStyle or undefined | 结构体物模型单一item容器样式 | | getItemTitleStyle | ViewStyle or undefined | 结构体物模型单独一个item的标题样式 | | getItemValueStyle | ViewStyle or undefined | 结构体物模型单独一个item的value样式 | | enableDivider | boolean | 是否显示分割线 | | getDividerStyle | ViewStyle or undefined | 分割线样式 |
BaseEditStructAttrPage
读写结构体物模型界面
| 参数 | 释义 | 类型 | | ---- | -------------------- | ------ | | attr | 对应结构体物模型数据 | Object |
| 方法 | 返回值 | 释义 | | ------------------------------------ | ----------------------- | ------------------------------------------- | | getContainerStyle | ViewStyle or undefined | 整个物模型的容器 | | getItemGroupStyle | ViewStyle or undefined | 单个item组样式 | | getItemGroupIconStyle | ImageStyle or undefined | 单个item组里图片样式 | | getItemContainerStyle | ViewStyle or undefined | 结构体物模型单一item容器样式 | | getItemTitleStyle | ViewStyle or undefined | 结构体物模型单独一个item的标题样式 | | getItemValueStyle | ViewStyle or undefined | 结构体物模型单独一个item的value样式 | | getItemMoreImg | any | 结构体物模型单独一个item的更多图片 | | getItemMoreImgStyle | ImageStyle or undefined | 结构体物模型单独一个item的更多图片样式 | | enableDivider | boolean | 是否显示分割线 | | getDividerStyle | ViewStyle or undefined | 分割线样式 | | sendCMD(attr: any, sendSpecs: any[]) | | 指令下发实现方法,sendSpecs选中下发的物模型 |
BaseReadArrayAttrPage
只读数组物模型界面
| 参数 | 释义 | 类型 | | ---- | ------------------ | ------ | | attr | 对应数组物模型数据 | Object |
| 方法 | 返回值 | 释义 | | --------------------- | ---------------------- | ----------------------------------- | | getContainerStyle | ViewStyle or undefined | 整个物模型的容器 | | getItemContainerStyle | ViewStyle or undefined | 结构体物模型单一item容器样式 | | getItemTitleStyle | ViewStyle or undefined | 结构体物模型单独一个item的标题样式 | | getItemValueStyle | ViewStyle or undefined | 结构体物模型单独一个item的value样式 | | enableDivider | boolean | 是否显示分割线 | | getDividerStyle | ViewStyle or undefined | 分割线样式 |
BaseEditArrayAttrPage
只读数组物模型界面
| 参数 | 释义 | 类型 | | ---- | ------------------ | ------ | | attr | 对应数组物模型数据 | Object |
| 方法 | 返回值 | 释义 | | -------------------------------- | ----------------------- | ------------------------------------------- | | getContainerStyle | ViewStyle or undefined | 整个物模型的容器 | | getItemGroupStyle | ViewStyle or undefined | 单个item组样式 | | getItemGroupIconStyle | ImageStyle or undefined | 单个item组里图片样式 | | getItemContainerStyle | ViewStyle or undefined | 结构体物模型单一item容器样式 | | getItemTitleStyle | ViewStyle or undefined | 结构体物模型单独一个item的标题样式 | | getItemValueStyle | ViewStyle or undefined | 结构体物模型单独一个item的value样式 | | getItemMoreImg | any | 结构体物模型单独一个item的更多图片 | | getItemMoreImgStyle | ImageStyle or undefined | 结构体物模型单独一个item的更多图片样式 | | enableDivider | boolean | 是否显示分割线 | | getDividerStyle | ViewStyle or undefined | 分割线样式 | | getStructItemGroupContainerStyle | ViewStyle or undefined | 单个struct item里 容器样式 | | getStructItemContainerStyle | ViewStyle or undefined | 单个struct item里 struct单个属性容器样式 | | getStructItemDividerStyle | ViewStyle or undefined | 单个struct item里 struct单个分割线样式 | | sendCMD(attr: any, data: any[]) | | 指令下发实现方法,sendSpecs选中下发的物模型 |
全局定义
全局定义文件
ColorConfig
全局颜色定义
| 方法 | 释义 | 备注 | | ------------------------------------ | -------------------- | ----------------------------- | | getInstance() | 获取全局颜色配置对象 | 设置和获取全局颜色配置对象 | | setColor(key: string, value: string) | 设置全局颜色 | key的标识 参照ImageConfigData | | setColors(obj: ImageConfigData) | 设置全局颜色 | 参照ImageConfigData | | getColors() | 获取默认颜色 | |
ImageConfigData
| 参数 | 类型 | 默认值 | 释义 | | ----------------- | ------ | --------- | -------------------------------------------------------------- | | basePageBgColor | string | '#f5f5f5' | 默认的结构体、数组类型界面(例如BaseEditStructAttrPage)背景色 | | wrapperColor | string | '#ffffff' | 页面块题色 | | primaryColor | string | '#3965FF' | 主题色 | | btnFontColor | string | '#FFFFFF' | 主题色对应的按钮字体颜色 | | dgBackground | string | '#FFFFFF' | 弹窗背景色 | | dgInputBackground | string | '#EFF4F8' | 弹窗输入框背景色 | | dgInputHintColor | string | '#A7B2BB' | 弹窗输入框提示颜色 | | textColor | string | '#333333' | 文字颜色 | | subTextColor | string | '#666666' | 次级文字颜色 | | hintTextColor | string | '#999999' | 提示文本颜色 | | dividerColor | string | '#f5f5f5' | 分割线颜色 | | errorColor | string | '#FF4242' | 错误提示颜色 |
LanguageConfig
全局语言定义
| 方法 | 释义 | 备注 | | ---------------------------------------- | -------------------- | -------------------------------- | | getInstance() | 获取全局语言配置对象 | 设置和获取全局语言配置对象 | | setLanguage(key: string, value: string) | 设置全局语言 | key的标识 参照LanguageConfigData | | setLanguages(object:LanguageConfigData ) | 设置全局语言 | 参照LanguageConfigData | | getLanguage() | 获取默认语言 | |
LanguageConfigData
| 参数 | 类型 | 默认值 | 释义 | | --------------------------------- | ------ | -------------------------------- | ------------------------------------------ | | cancel | string | '取消' | | | confirm | string | '确定' | | | plsEnterNumberGreaterThanMinValue | string | '请输入大于或等于%{min}的参数值' | 数值弹窗校验:输入大于等于最小值 | | plsEnterNumberLessThanMaxValue | string | '请输入小于或等于%{max}的参数值' | 数值弹窗校验:输入小于等于最大值 | | plsEnterParamInfo | string | '请输入参数信息' | text弹窗:请输入参数信息 | | allSelect | string | '全选' | 读写结构体界面全选按钮 | | cancelAllSelect | string | '取消全选' | 读写结构体界面取消全选按钮 | | sendCommand | string | '指令下发' | 读写结构体界面、读写物模型界面指令下发按钮 | | selectDateYear | string | '年' | 时间选择器单位 年 | | selectDateMonth | string | '月' | 时间选择器单位 月 | | selectDateDay | string | '日' | 时间选择器单位 日 | | selectDateHour | string | '时' | 时间选择器单位 时 | | selectDateMinute | string | '分' | 时间选择器单位 分 | | noDataPlsAdd | string | '暂无数据,快去添加吧~' | 数组结构体 空界面提示 | | plsToAdd | string | '去添加' | 数组结构体 添加数组 | | canNotMoreThanIt | string | '不能超过数量限制' | 数组结构体,添加数量不能超出错误提示 |
ImageConfigData
全局图片定义
| 方法 | 释义 | 备注 | | ------------------------------------ | -------------------- | ----------------------------- | | getInstance() | 获取全局图片配置对象 | 设置和获取全局图片配置对象 | | setImage(key: string, value: string) | 设置全局图片 | key的标识 参照ImageConfigData | | setImages(object: ImageConfigData) | 设置全局图片 | 参照ImageConfigData | | getImages() | 获取默认图片 | |
ImageConfigData
| 参数 | 类型 | 默认值 | 释义 | | ---------------- | ---- | ------ | -------------------------- | | enumItemNormal | any | | 枚举弹窗未选中item对应图标 | | enumItemSelected | any | | 枚举弹窗选中item对应图标 | | itemNormal | any | | 结构体数组item选项 | | itemSelected | any | | 结构体数组选中选项 | | moreImg | any | | 可点击物模型item 右箭头 | | emptyIcon | any | | 数组物模型界面空图片 | | deleteImg | any | | 数组物模型 删除图片 | | addImg | any | | 数组物模型 添加图片 |
组件依赖
"dependencies": {
"moment": "^2.29.4",
"react-native-localize": "^2.2.2",
"react-fast-compare": "^3.2.0",
"react-native-permissions": "^3.6.1",
"react-native-elements": "^3.4.3",
"@quec/panel-base-ui": "^2.0.9",
"lodash": "^4.17.21",
"react-native-localize": "^2.2.3",
}