@quec/panel-component-customer-attrs
v1.1.16
Published
自定义物模型组件库
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 | | | 1.0.8 | 调整 ColorConfig 变量为组件内样式 | 2024-01-17 | lucy.li | | | 1.0.9 | 开关颜色的 | 2024-06-16 | ives.li | | | 1.1.0 | | 2024-06-16 | ives.li | | | 1.1.1 | 开关-关的颜色 扩展枚举和数值型的选择样式 渐变色的背景样式扩展 | 2024-11-13 | newlyn.ma | | | 1.1.2 | enum 类型选中 icon 的颜色为 primaryColor | 2024-11-30 | newlyn.ma | | | 1.1.6 | 增加 Boolean 选择弹窗 | 2025-2-25 | lucy.li | | | 1.1.7 | 重构 EnumAttrSimpleDialog | 2025-2-25 | lucy.li | | | 1.1.8 | dialog 组件适配暗黑模式 | 2025-2-25 | lucy.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 或者不定义该参数,则会按默认的界面渲染; | | enumAttrDialogSimple | 枚举型是否使用更为简单的样式 | boolean | | | | numberUseSliderCode | 数值型使用滑块的物模型的 Code 数组 | string[] | | |
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 | ColorValue | '#f5f5f5' | 默认的结构体、数组类型界面(例如 BaseEditStructAttrPage)背景色 | | wrapperColor | ColorValue | '#ffffff' | 页面块题色 | | primaryColor | ColorValue | '#3965FF' | 主题色 | | btnFontColor | ColorValue | '#FFFFFF' | 主题色对应的按钮字体颜色 | | dgBackground | ColorValue | '#FFFFFF' | 弹窗背景色 | | dgInputBackground | ColorValue | '#EFF4F8' | 弹窗输入框背景色 | | dgInputHintColor | ColorValue | '#A7B2BB' | 弹窗输入框提示颜色 | | textColor | ColorValue | '#333333' | 文字颜色 | | subTextColor | ColorValue | '#666666' | 次级文字颜色 | | hintTextColor | ColorValue | '#999999' | 提示文本颜色 | | dividerColor | ColorValue | '#f5f5f5' | 分割线颜色 | | errorColor | ColorValue | '#FF4242' | 错误提示颜色 | | switchActiveColor | ColorValue | '#5BE860' | 开关开颜色 | | switchNormalColor | ColorValue | '#CCCCCC' | 开关关颜色 | | LinearTopColor | ColorValue | dgBackground | 渐变顶色 | | LinearBottomColor | ColorValue | dgBackground | 渐变底部颜色 | | LinearTopSubColor | ColorValue | dgInputBackground | 渐变顶色 Sub | | LinearBottomSubColor | ColorValue | dgInputBackground | 渐变底部颜色 Sub |
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 | | 数组物模型 添加图片 | | addIcon | any | | 滑块增加步长的图标 | | subIcon | any | | 滑块减少步长的图标 | | thumbImg | any | | 滑块中心 thumb 的图片 |
组件依赖
"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",
}