@next-bricks/presentational-bricks 1.339.0 → 1.339.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/deploy/contract.yaml +110 -110
- package/dist/bricks.json +24 -24
- package/dist/{index.e0f6d174.js → index.09224616.js} +2 -2
- package/dist/index.09224616.js.map +1 -0
- package/dist/stories.json +27 -27
- package/docs/brick-result.md +197 -0
- package/docs/brick-result.react.md +177 -0
- package/docs/brick-user.md +135 -0
- package/docs/brick-user.react.md +139 -0
- package/docs/brick-value-mapping.md +240 -0
- package/docs/brick-value-mapping.react.md +181 -0
- package/docs/cost-time.md +58 -0
- package/docs/cost-time.react.md +60 -0
- package/docs/datetime-selector.md +146 -0
- package/docs/datetime-selector.react.md +150 -0
- package/docs/general-label.md +115 -0
- package/docs/general-label.react.md +131 -0
- package/package.json +5 -4
- package/dist/index.e0f6d174.js.map +0 -1
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
---
|
|
2
|
+
tagName: presentational-bricks.brick-user
|
|
3
|
+
displayName: WrappedPresentationalBricksBrickUser
|
|
4
|
+
description: 展示用户头像和用户名的构件，支持昵称显示、showKey 显示、自定义 Tooltip 及头像大小和形状配置
|
|
5
|
+
category: display-component
|
|
6
|
+
source: "@next-bricks/presentational-bricks"
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
# presentational-bricks.brick-user
|
|
10
|
+
|
|
11
|
+
> 展示用户头像和用户名的构件，支持昵称显示、showKey 显示、自定义 Tooltip 及头像大小和形状配置
|
|
12
|
+
|
|
13
|
+
## Props
|
|
14
|
+
|
|
15
|
+
| 属性 | 类型 | 必填 | 默认值 | 说明 |
|
|
16
|
+
| ---------------------- | --------------------------------- | ---- | ----------- | ------------------------------------------------------------------------------------------------------------- |
|
|
17
|
+
| username | `string` | 是 | - | [已废弃]用户名 (废弃属性，请使用 `userNameOrId`) |
|
|
18
|
+
| userNameOrId | `string` | 是 | - | 用户名或用户 instanceId |
|
|
19
|
+
| iconUrl | `string` | - | - | 用户头像 url |
|
|
20
|
+
| hideAvatar | `boolean` | - | - | 是否隐藏头像 |
|
|
21
|
+
| hideUsername | `boolean` | - | - | 是否隐藏用户名 |
|
|
22
|
+
| size | `"large" \| "small" \| "default"` | - | `"default"` | 设置头像的大小 |
|
|
23
|
+
| shape | `"circle" \| "square"` | - | - | 指定头像的形状 |
|
|
24
|
+
| showNickname | `boolean` | - | - | [已废弃,最新用法以 showNicknameOrUsername 为准]是否展示昵称,当用户不含昵称昵称时不展示 |
|
|
25
|
+
| showNicknameOrUsername | `boolean` | - | - | 当有昵称时显示昵称，无昵称时显示用户名 |
|
|
26
|
+
| displayShowKey | `boolean` | - | - | 是否显示 showKey，启用后当用户拥有 showKey 时显示为 `name(showKey)` 格式（如 `alan(hero)`），否则仅显示用户名 |
|
|
27
|
+
| iconMargin | `number \| string` | - | - | 头像与用户名之间的间距，支持数字（像素）或 CSS 字符串（如 `"0 8px"`） |
|
|
28
|
+
| customTooltip | `string` | - | - | 自定义 Tooltip 替换字符串，支持 `#{name}` 和 `#{showKey}` 占位符，例如 `"发起人：#{name}"` |
|
|
29
|
+
|
|
30
|
+
## Examples
|
|
31
|
+
|
|
32
|
+
### Basic 基础用法
|
|
33
|
+
|
|
34
|
+
#### 默认展示用户
|
|
35
|
+
|
|
36
|
+
通过 userNameOrId 传入用户名或 instanceId，展示用户头像和用户名。
|
|
37
|
+
|
|
38
|
+
```yaml preview
|
|
39
|
+
brick: presentational-bricks.brick-user
|
|
40
|
+
properties:
|
|
41
|
+
userNameOrId: easyops
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
#### 自定义头像图片
|
|
45
|
+
|
|
46
|
+
通过 iconUrl 属性指定自定义头像图片地址。
|
|
47
|
+
|
|
48
|
+
```yaml preview
|
|
49
|
+
brick: presentational-bricks.brick-user
|
|
50
|
+
properties:
|
|
51
|
+
userNameOrId: easyops
|
|
52
|
+
iconUrl: "assets/favicon.png"
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
#### 设置头像大小和形状
|
|
56
|
+
|
|
57
|
+
通过 size 和 shape 属性控制头像的大小和形状。
|
|
58
|
+
|
|
59
|
+
```yaml preview
|
|
60
|
+
brick: presentational-bricks.brick-user
|
|
61
|
+
properties:
|
|
62
|
+
userNameOrId: easyops
|
|
63
|
+
size: large
|
|
64
|
+
shape: square
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
### Display 显示控制
|
|
68
|
+
|
|
69
|
+
#### 隐藏头像
|
|
70
|
+
|
|
71
|
+
通过 hideAvatar 属性隐藏用户头像，仅显示用户名。
|
|
72
|
+
|
|
73
|
+
```yaml preview
|
|
74
|
+
brick: presentational-bricks.brick-user
|
|
75
|
+
properties:
|
|
76
|
+
userNameOrId: easyops
|
|
77
|
+
hideAvatar: true
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
#### 隐藏用户名
|
|
81
|
+
|
|
82
|
+
通过 hideUsername 属性隐藏用户名，仅显示头像。
|
|
83
|
+
|
|
84
|
+
```yaml preview
|
|
85
|
+
brick: presentational-bricks.brick-user
|
|
86
|
+
properties:
|
|
87
|
+
userNameOrId: easyops
|
|
88
|
+
hideUsername: true
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
### Advanced 高级用法
|
|
92
|
+
|
|
93
|
+
#### 显示昵称
|
|
94
|
+
|
|
95
|
+
通过 showNicknameOrUsername 属性，当用户有昵称时显示昵称，无昵称时显示用户名。
|
|
96
|
+
|
|
97
|
+
```yaml preview
|
|
98
|
+
brick: presentational-bricks.brick-user
|
|
99
|
+
properties:
|
|
100
|
+
userNameOrId: easyops
|
|
101
|
+
showNicknameOrUsername: true
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
#### 显示 showKey
|
|
105
|
+
|
|
106
|
+
通过 displayShowKey 属性，显示用户的 showKey 信息，格式为 `name(showKey)`。
|
|
107
|
+
|
|
108
|
+
```yaml preview
|
|
109
|
+
brick: presentational-bricks.brick-user
|
|
110
|
+
properties:
|
|
111
|
+
userNameOrId: easyops
|
|
112
|
+
displayShowKey: true
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
#### 自定义 Tooltip
|
|
116
|
+
|
|
117
|
+
通过 customTooltip 属性自定义鼠标悬浮提示文字，支持 `#{name}` 和 `#{showKey}` 占位符。
|
|
118
|
+
|
|
119
|
+
```yaml preview
|
|
120
|
+
brick: presentational-bricks.brick-user
|
|
121
|
+
properties:
|
|
122
|
+
userNameOrId: easyops
|
|
123
|
+
customTooltip: "发起人：#{name}"
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
#### 自定义头像间距
|
|
127
|
+
|
|
128
|
+
通过 iconMargin 属性设置头像与用户名之间的间距。
|
|
129
|
+
|
|
130
|
+
```yaml preview
|
|
131
|
+
brick: presentational-bricks.brick-user
|
|
132
|
+
properties:
|
|
133
|
+
userNameOrId: easyops
|
|
134
|
+
iconMargin: "0 8px 0 0"
|
|
135
|
+
```
|
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
---
|
|
2
|
+
tagName: presentational-bricks.brick-user
|
|
3
|
+
displayName: WrappedPresentationalBricksBrickUser
|
|
4
|
+
description: 展示用户头像和用户名的构件，支持昵称显示、showKey 显示、自定义 Tooltip 及头像大小和形状配置
|
|
5
|
+
category: display-component
|
|
6
|
+
source: "@next-bricks/presentational-bricks"
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
# WrappedPresentationalBricksBrickUser
|
|
10
|
+
|
|
11
|
+
> 展示用户头像和用户名的构件，支持昵称显示、showKey 显示、自定义 Tooltip 及头像大小和形状配置
|
|
12
|
+
|
|
13
|
+
## 导入
|
|
14
|
+
|
|
15
|
+
```tsx
|
|
16
|
+
import { WrappedPresentationalBricksBrickUser } from "@easyops/wrapped-components";
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Props
|
|
20
|
+
|
|
21
|
+
| 属性 | 类型 | 必填 | 默认值 | 说明 |
|
|
22
|
+
| ---------------------- | --------------------------------- | ---- | ----------- | ------------------------------------------------------------------------------------------------------------- |
|
|
23
|
+
| username | `string` | 是 | - | [已废弃]用户名 (废弃属性，请使用 `userNameOrId`) |
|
|
24
|
+
| userNameOrId | `string` | 是 | - | 用户名或用户 instanceId |
|
|
25
|
+
| iconUrl | `string` | - | - | 用户头像 url |
|
|
26
|
+
| hideAvatar | `boolean` | - | - | 是否隐藏头像 |
|
|
27
|
+
| hideUsername | `boolean` | - | - | 是否隐藏用户名 |
|
|
28
|
+
| size | `"large" \| "small" \| "default"` | - | `"default"` | 设置头像的大小 |
|
|
29
|
+
| shape | `"circle" \| "square"` | - | - | 指定头像的形状 |
|
|
30
|
+
| showNickname | `boolean` | - | - | [已废弃,最新用法以 showNicknameOrUsername 为准]是否展示昵称,当用户不含昵称昵称时不展示 |
|
|
31
|
+
| showNicknameOrUsername | `boolean` | - | - | 当有昵称时显示昵称，无昵称时显示用户名 |
|
|
32
|
+
| displayShowKey | `boolean` | - | - | 是否显示 showKey，启用后当用户拥有 showKey 时显示为 `name(showKey)` 格式（如 `alan(hero)`），否则仅显示用户名 |
|
|
33
|
+
| iconMargin | `number \| string` | - | - | 头像与用户名之间的间距，支持数字（像素）或 CSS 字符串（如 `"0 8px"`） |
|
|
34
|
+
| customTooltip | `string` | - | - | 自定义 Tooltip 替换字符串，支持 `#{name}` 和 `#{showKey}` 占位符，例如 `"发起人：#{name}"` |
|
|
35
|
+
|
|
36
|
+
## Examples
|
|
37
|
+
|
|
38
|
+
### Basic 基础用法
|
|
39
|
+
|
|
40
|
+
#### 默认展示用户
|
|
41
|
+
|
|
42
|
+
通过 userNameOrId 传入用户名或 instanceId，展示用户头像和用户名。
|
|
43
|
+
|
|
44
|
+
```tsx
|
|
45
|
+
<WrappedPresentationalBricksBrickUser userNameOrId="easyops" />
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
#### 自定义头像图片
|
|
49
|
+
|
|
50
|
+
通过 iconUrl 属性指定自定义头像图片地址。
|
|
51
|
+
|
|
52
|
+
```tsx
|
|
53
|
+
<WrappedPresentationalBricksBrickUser
|
|
54
|
+
userNameOrId="easyops"
|
|
55
|
+
iconUrl="assets/favicon.png"
|
|
56
|
+
/>
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
#### 设置头像大小和形状
|
|
60
|
+
|
|
61
|
+
通过 size 和 shape 属性控制头像的大小和形状。
|
|
62
|
+
|
|
63
|
+
```tsx
|
|
64
|
+
<WrappedPresentationalBricksBrickUser
|
|
65
|
+
userNameOrId="easyops"
|
|
66
|
+
size="large"
|
|
67
|
+
shape="square"
|
|
68
|
+
/>
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
### Display 显示控制
|
|
72
|
+
|
|
73
|
+
#### 隐藏头像
|
|
74
|
+
|
|
75
|
+
通过 hideAvatar 属性隐藏用户头像，仅显示用户名。
|
|
76
|
+
|
|
77
|
+
```tsx
|
|
78
|
+
<WrappedPresentationalBricksBrickUser
|
|
79
|
+
userNameOrId="easyops"
|
|
80
|
+
hideAvatar={true}
|
|
81
|
+
/>
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
#### 隐藏用户名
|
|
85
|
+
|
|
86
|
+
通过 hideUsername 属性隐藏用户名，仅显示头像。
|
|
87
|
+
|
|
88
|
+
```tsx
|
|
89
|
+
<WrappedPresentationalBricksBrickUser
|
|
90
|
+
userNameOrId="easyops"
|
|
91
|
+
hideUsername={true}
|
|
92
|
+
/>
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
### Advanced 高级用法
|
|
96
|
+
|
|
97
|
+
#### 显示昵称
|
|
98
|
+
|
|
99
|
+
通过 showNicknameOrUsername 属性，当用户有昵称时显示昵称，无昵称时显示用户名。
|
|
100
|
+
|
|
101
|
+
```tsx
|
|
102
|
+
<WrappedPresentationalBricksBrickUser
|
|
103
|
+
userNameOrId="easyops"
|
|
104
|
+
showNicknameOrUsername={true}
|
|
105
|
+
/>
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
#### 显示 showKey
|
|
109
|
+
|
|
110
|
+
通过 displayShowKey 属性，显示用户的 showKey 信息，格式为 `name(showKey)`。
|
|
111
|
+
|
|
112
|
+
```tsx
|
|
113
|
+
<WrappedPresentationalBricksBrickUser
|
|
114
|
+
userNameOrId="easyops"
|
|
115
|
+
displayShowKey={true}
|
|
116
|
+
/>
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
#### 自定义 Tooltip
|
|
120
|
+
|
|
121
|
+
通过 customTooltip 属性自定义鼠标悬浮提示文字，支持 `#{name}` 和 `#{showKey}` 占位符。
|
|
122
|
+
|
|
123
|
+
```tsx
|
|
124
|
+
<WrappedPresentationalBricksBrickUser
|
|
125
|
+
userNameOrId="easyops"
|
|
126
|
+
customTooltip="发起人：#{name}"
|
|
127
|
+
/>
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
#### 自定义头像间距
|
|
131
|
+
|
|
132
|
+
通过 iconMargin 属性设置头像与用户名之间的间距。
|
|
133
|
+
|
|
134
|
+
```tsx
|
|
135
|
+
<WrappedPresentationalBricksBrickUser
|
|
136
|
+
userNameOrId="easyops"
|
|
137
|
+
iconMargin="0 8px 0 0"
|
|
138
|
+
/>
|
|
139
|
+
```
|
|
@@ -0,0 +1,240 @@
|
|
|
1
|
+
---
|
|
2
|
+
tagName: presentational-bricks.brick-value-mapping
|
|
3
|
+
displayName: WrappedPresentationalBricksBrickValueMapping
|
|
4
|
+
description: 适用于将基本类型的数值转换成有意义的文本进行展示
|
|
5
|
+
category: data-transform
|
|
6
|
+
source: "@next-bricks/presentational-bricks"
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
# presentational-bricks.brick-value-mapping
|
|
10
|
+
|
|
11
|
+
> 适用于将基本类型的数值转换成有意义的文本进行展示
|
|
12
|
+
|
|
13
|
+
## Props
|
|
14
|
+
|
|
15
|
+
| 属性 | 类型 | 必填 | 默认值 | 说明 |
|
|
16
|
+
| ----------------- | ---------------------------------------------------- | ---- | ------- | ----------------------------------------------------------------- |
|
|
17
|
+
| value | `string \| number` | - | - | 原始值 |
|
|
18
|
+
| fields | `{ value: string; }` | - | - | [已废弃]字段映射, 跟 dataSource 一起使用来获得运行时 value |
|
|
19
|
+
| mapping | `Record< string \| number, MappingValue >` | 是 | - | 映射规则 |
|
|
20
|
+
| showTagCircle | `boolean` | - | - | 显示文字旁边的小圈圈，按照平台规范通常表示状态的标签可设置为 true |
|
|
21
|
+
| dataSource | `Record<string, any>` | - | - | 替代 `data` 属性，click 事件时传出的数据 |
|
|
22
|
+
| triggerClickEvent | `boolean` | - | `false` | 是否触发点击事件 |
|
|
23
|
+
| isTextEllipsis | `boolean` | - | `false` | 文案超出时是否隐藏溢出文本并在鼠标悬停时显示 Tooltip |
|
|
24
|
+
| link | `LinkProps` | - | - | 配置跳转链接，在 `triggerClickEvent` 为 false 生效 |
|
|
25
|
+
| data | `any` | - | - | [已废弃]可用于接收 useBrick 传递过来的数据 |
|
|
26
|
+
|
|
27
|
+
## Events
|
|
28
|
+
|
|
29
|
+
| 事件 | detail | 说明 |
|
|
30
|
+
| ------------------------- | ---------------------------------------- | ----------------------------------------------------- |
|
|
31
|
+
| brick-value-mapping.click | `{ data: any; value: string \| number }` | 点击事件，需设置 `triggerClickEvent` 为 true 才会触发 |
|
|
32
|
+
|
|
33
|
+
## Memo
|
|
34
|
+
|
|
35
|
+
### 注意
|
|
36
|
+
|
|
37
|
+
> 如果需要区间的条件规则映射，比如大于、小于等，请使用[条件展示](developers/brick-book/brick/presentational-bricks.brick-conditional-display)
|
|
38
|
+
|
|
39
|
+
### MappingValue
|
|
40
|
+
|
|
41
|
+
```typescript
|
|
42
|
+
interface MappingValue {
|
|
43
|
+
text?: string;
|
|
44
|
+
color?: Color;
|
|
45
|
+
icon?: MenuIcon;
|
|
46
|
+
iconSize?: number;
|
|
47
|
+
}
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
### LinkProps
|
|
51
|
+
|
|
52
|
+
```typescript
|
|
53
|
+
interface LinkProps {
|
|
54
|
+
to?: string;
|
|
55
|
+
href?: string;
|
|
56
|
+
innerRef?: string;
|
|
57
|
+
replace?: boolean;
|
|
58
|
+
target?: string;
|
|
59
|
+
}
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
### 映射规则说明
|
|
63
|
+
|
|
64
|
+
映射支持正则匹配，匹配规则如下：
|
|
65
|
+
|
|
66
|
+
1. 首先以 `value` 为 key 来获取映射，若成功匹配则使用该规则来展示；若不成功，则走下一步
|
|
67
|
+
2. 将 `映射规则` 中的 key 作为正则，来匹配 `value`, 使用成功匹配的第一个规则
|
|
68
|
+
|
|
69
|
+
例如
|
|
70
|
+
|
|
71
|
+
```typescript
|
|
72
|
+
// 以下将展示 `hi`
|
|
73
|
+
const mapping = { hello: { text: "hi" }, ".*": { text: "anything else" } };
|
|
74
|
+
const value = "hello";
|
|
75
|
+
|
|
76
|
+
// 以下将展示 `anything else`
|
|
77
|
+
const mapping = {
|
|
78
|
+
www: { text: "world wide web" },
|
|
79
|
+
".*": { text: "anything else" },
|
|
80
|
+
};
|
|
81
|
+
const value = "hello";
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
## Examples
|
|
85
|
+
|
|
86
|
+
### 基本用法 - 映射为多彩标签（带圆点）
|
|
87
|
+
|
|
88
|
+
使用 `showTagCircle` 显示状态圆点，通过 `mapping` 将不同值映射为对应的颜色标签。
|
|
89
|
+
|
|
90
|
+
```yaml
|
|
91
|
+
brick: presentational-bricks.brick-value-mapping
|
|
92
|
+
properties:
|
|
93
|
+
showTagCircle: true
|
|
94
|
+
value: success
|
|
95
|
+
mapping:
|
|
96
|
+
failed:
|
|
97
|
+
color: red
|
|
98
|
+
text: 失败
|
|
99
|
+
success:
|
|
100
|
+
color: green
|
|
101
|
+
text: 正常
|
|
102
|
+
warning:
|
|
103
|
+
color: orange
|
|
104
|
+
text: 异常
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
### 触发点击事件（填充色标签）
|
|
108
|
+
|
|
109
|
+
设置 `triggerClickEvent` 为 true 并监听 `brick-value-mapping.click` 事件，同时通过 `dataSource` 传递附加数据。
|
|
110
|
+
|
|
111
|
+
```yaml
|
|
112
|
+
brick: presentational-bricks.brick-value-mapping
|
|
113
|
+
properties:
|
|
114
|
+
triggerClickEvent: true
|
|
115
|
+
showTagCircle: false
|
|
116
|
+
value: warning
|
|
117
|
+
dataSource:
|
|
118
|
+
id: 1001
|
|
119
|
+
name: 示例数据
|
|
120
|
+
mapping:
|
|
121
|
+
warning:
|
|
122
|
+
color: red-inverse
|
|
123
|
+
text: 紧急
|
|
124
|
+
safe:
|
|
125
|
+
color: green-inverse
|
|
126
|
+
text: 正常
|
|
127
|
+
events:
|
|
128
|
+
brick-value-mapping.click:
|
|
129
|
+
- action: console.log
|
|
130
|
+
args:
|
|
131
|
+
- "<% EVENT.detail %>"
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
### 映射为 icon 加文字
|
|
135
|
+
|
|
136
|
+
映射结果可以包含图标和文字，通过 `icon` 和 `text` 字段配置。
|
|
137
|
+
|
|
138
|
+
```yaml
|
|
139
|
+
brick: presentational-bricks.brick-value-mapping
|
|
140
|
+
properties:
|
|
141
|
+
value: 1
|
|
142
|
+
mapping:
|
|
143
|
+
1:
|
|
144
|
+
text: mapping-text
|
|
145
|
+
color: green
|
|
146
|
+
icon:
|
|
147
|
+
lib: fa
|
|
148
|
+
icon: link
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
### 仅映射为 icon（自定义图标大小）
|
|
152
|
+
|
|
153
|
+
不设置 `text` 时仅展示图标，通过 `iconSize` 自定义图标大小。
|
|
154
|
+
|
|
155
|
+
```yaml
|
|
156
|
+
brick: presentational-bricks.brick-value-mapping
|
|
157
|
+
properties:
|
|
158
|
+
value: 2
|
|
159
|
+
mapping:
|
|
160
|
+
2:
|
|
161
|
+
iconSize: 36
|
|
162
|
+
color: red
|
|
163
|
+
icon:
|
|
164
|
+
lib: fa
|
|
165
|
+
icon: bell
|
|
166
|
+
```
|
|
167
|
+
|
|
168
|
+
### 正则匹配
|
|
169
|
+
|
|
170
|
+
当精确匹配不到时，会将 mapping 的 key 作为正则进行匹配，使用第一个匹配成功的规则。
|
|
171
|
+
|
|
172
|
+
```yaml
|
|
173
|
+
brick: presentational-bricks.brick-value-mapping
|
|
174
|
+
properties:
|
|
175
|
+
value: hello
|
|
176
|
+
mapping:
|
|
177
|
+
".*":
|
|
178
|
+
color: orange
|
|
179
|
+
text: remapping
|
|
180
|
+
icon:
|
|
181
|
+
lib: fa
|
|
182
|
+
icon: star
|
|
183
|
+
2:
|
|
184
|
+
iconSize: 36
|
|
185
|
+
color: red
|
|
186
|
+
icon:
|
|
187
|
+
lib: fa
|
|
188
|
+
icon: bell
|
|
189
|
+
```
|
|
190
|
+
|
|
191
|
+
### 配置跳转链接
|
|
192
|
+
|
|
193
|
+
通过 `link` 配置跳转链接，点击标签时会跳转到指定地址。注意 `link` 在 `triggerClickEvent` 为 false 时才生效。
|
|
194
|
+
|
|
195
|
+
```yaml
|
|
196
|
+
brick: presentational-bricks.brick-value-mapping
|
|
197
|
+
properties:
|
|
198
|
+
style:
|
|
199
|
+
display: inline-block
|
|
200
|
+
value: hello
|
|
201
|
+
link:
|
|
202
|
+
to: /developers/brick-book
|
|
203
|
+
mapping:
|
|
204
|
+
".*":
|
|
205
|
+
color: orange
|
|
206
|
+
text: remapping
|
|
207
|
+
icon:
|
|
208
|
+
lib: fa
|
|
209
|
+
icon: star
|
|
210
|
+
```
|
|
211
|
+
|
|
212
|
+
### 文案超出隐藏
|
|
213
|
+
|
|
214
|
+
设置 `isTextEllipsis` 为 true 时，文案超出容器会隐藏并在鼠标悬停时显示 Tooltip。
|
|
215
|
+
|
|
216
|
+
```yaml
|
|
217
|
+
brick: presentational-bricks.brick-value-mapping
|
|
218
|
+
properties:
|
|
219
|
+
style:
|
|
220
|
+
width: 80px
|
|
221
|
+
isTextEllipsis: true
|
|
222
|
+
value: longText
|
|
223
|
+
mapping:
|
|
224
|
+
longText:
|
|
225
|
+
color: blue
|
|
226
|
+
text: 这是一段非常非常长的文案用于演示超出隐藏效果
|
|
227
|
+
```
|
|
228
|
+
|
|
229
|
+
### 无匹配时显示原始值
|
|
230
|
+
|
|
231
|
+
当 value 无法匹配到任何映射规则时，直接显示原始值。
|
|
232
|
+
|
|
233
|
+
```yaml
|
|
234
|
+
brick: presentational-bricks.brick-value-mapping
|
|
235
|
+
properties:
|
|
236
|
+
value: 1
|
|
237
|
+
mapping:
|
|
238
|
+
0:
|
|
239
|
+
text: error
|
|
240
|
+
```
|
|
@@ -0,0 +1,181 @@
|
|
|
1
|
+
---
|
|
2
|
+
tagName: presentational-bricks.brick-value-mapping
|
|
3
|
+
displayName: WrappedPresentationalBricksBrickValueMapping
|
|
4
|
+
description: 适用于将基本类型的数值转换成有意义的文本进行展示
|
|
5
|
+
category: data-transform
|
|
6
|
+
source: "@next-bricks/presentational-bricks"
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
# WrappedPresentationalBricksBrickValueMapping
|
|
10
|
+
|
|
11
|
+
> 适用于将基本类型的数值转换成有意义的文本进行展示
|
|
12
|
+
|
|
13
|
+
## 导入
|
|
14
|
+
|
|
15
|
+
```tsx
|
|
16
|
+
import { WrappedPresentationalBricksBrickValueMapping } from "@easyops/wrapped-components";
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Props
|
|
20
|
+
|
|
21
|
+
| 属性 | 类型 | 必填 | 默认值 | 说明 |
|
|
22
|
+
| ----------------- | ---------------------------------------------------- | ---- | ------- | ----------------------------------------------------------------- |
|
|
23
|
+
| value | `string \| number` | - | - | 原始值 |
|
|
24
|
+
| fields | `{ value: string; }` | - | - | [已废弃]字段映射, 跟 dataSource 一起使用来获得运行时 value |
|
|
25
|
+
| mapping | `Record< string \| number, MappingValue >` | 是 | - | 映射规则 |
|
|
26
|
+
| showTagCircle | `boolean` | - | - | 显示文字旁边的小圈圈，按照平台规范通常表示状态的标签可设置为 true |
|
|
27
|
+
| dataSource | `Record<string, any>` | - | - | 替代 `data` 属性，click 事件时传出的数据 |
|
|
28
|
+
| triggerClickEvent | `boolean` | - | `false` | 是否触发点击事件 |
|
|
29
|
+
| isTextEllipsis | `boolean` | - | `false` | 文案超出时是否隐藏溢出文本并在鼠标悬停时显示 Tooltip |
|
|
30
|
+
| link | `LinkProps` | - | - | 配置跳转链接，在 `triggerClickEvent` 为 false 生效 |
|
|
31
|
+
| data | `any` | - | - | [已废弃]可用于接收 useBrick 传递过来的数据 |
|
|
32
|
+
|
|
33
|
+
## Events
|
|
34
|
+
|
|
35
|
+
| 事件 | detail | 说明 |
|
|
36
|
+
| -------------------------- | ---------------------------------------- | ----------------------------------------------------- |
|
|
37
|
+
| onBrick-value-mappingClick | `{ data: any; value: string \| number }` | 点击事件，需设置 `triggerClickEvent` 为 true 才会触发 |
|
|
38
|
+
|
|
39
|
+
## Examples
|
|
40
|
+
|
|
41
|
+
### 基本用法 - 映射为多彩标签（带圆点）
|
|
42
|
+
|
|
43
|
+
使用 `showTagCircle` 显示状态圆点，通过 `mapping` 将不同值映射为对应的颜色标签。
|
|
44
|
+
|
|
45
|
+
```tsx
|
|
46
|
+
<WrappedPresentationalBricksBrickValueMapping
|
|
47
|
+
showTagCircle={true}
|
|
48
|
+
value="success"
|
|
49
|
+
mapping={{
|
|
50
|
+
failed: { color: "red", text: "失败" },
|
|
51
|
+
success: { color: "green", text: "正常" },
|
|
52
|
+
warning: { color: "orange", text: "异常" },
|
|
53
|
+
}}
|
|
54
|
+
/>
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
### 触发点击事件（填充色标签）
|
|
58
|
+
|
|
59
|
+
设置 `triggerClickEvent` 为 true 并监听点击事件，同时通过 `dataSource` 传递附加数据。
|
|
60
|
+
|
|
61
|
+
```tsx
|
|
62
|
+
<WrappedPresentationalBricksBrickValueMapping
|
|
63
|
+
triggerClickEvent={true}
|
|
64
|
+
showTagCircle={false}
|
|
65
|
+
value="warning"
|
|
66
|
+
dataSource={{ id: 1001, name: "示例数据" }}
|
|
67
|
+
mapping={{
|
|
68
|
+
warning: { color: "red-inverse", text: "紧急" },
|
|
69
|
+
safe: { color: "green-inverse", text: "正常" },
|
|
70
|
+
}}
|
|
71
|
+
onBrick-value-mappingClick={(e) => {
|
|
72
|
+
console.log(e.detail);
|
|
73
|
+
}}
|
|
74
|
+
/>
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
### 映射为 icon 加文字
|
|
78
|
+
|
|
79
|
+
映射结果可以包含图标和文字，通过 `icon` 和 `text` 字段配置。
|
|
80
|
+
|
|
81
|
+
```tsx
|
|
82
|
+
<WrappedPresentationalBricksBrickValueMapping
|
|
83
|
+
value={1}
|
|
84
|
+
mapping={{
|
|
85
|
+
1: {
|
|
86
|
+
text: "mapping-text",
|
|
87
|
+
color: "green",
|
|
88
|
+
icon: { lib: "fa", icon: "link" },
|
|
89
|
+
},
|
|
90
|
+
}}
|
|
91
|
+
/>
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
### 仅映射为 icon（自定义图标大小）
|
|
95
|
+
|
|
96
|
+
不设置 `text` 时仅展示图标，通过 `iconSize` 自定义图标大小。
|
|
97
|
+
|
|
98
|
+
```tsx
|
|
99
|
+
<WrappedPresentationalBricksBrickValueMapping
|
|
100
|
+
value={2}
|
|
101
|
+
mapping={{
|
|
102
|
+
2: {
|
|
103
|
+
iconSize: 36,
|
|
104
|
+
color: "red",
|
|
105
|
+
icon: { lib: "fa", icon: "bell" },
|
|
106
|
+
},
|
|
107
|
+
}}
|
|
108
|
+
/>
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
### 正则匹配
|
|
112
|
+
|
|
113
|
+
当精确匹配不到时，会将 mapping 的 key 作为正则进行匹配，使用第一个匹配成功的规则。
|
|
114
|
+
|
|
115
|
+
```tsx
|
|
116
|
+
<WrappedPresentationalBricksBrickValueMapping
|
|
117
|
+
value="hello"
|
|
118
|
+
mapping={{
|
|
119
|
+
".*": {
|
|
120
|
+
color: "orange",
|
|
121
|
+
text: "remapping",
|
|
122
|
+
icon: { lib: "fa", icon: "star" },
|
|
123
|
+
},
|
|
124
|
+
2: {
|
|
125
|
+
iconSize: 36,
|
|
126
|
+
color: "red",
|
|
127
|
+
icon: { lib: "fa", icon: "bell" },
|
|
128
|
+
},
|
|
129
|
+
}}
|
|
130
|
+
/>
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
### 配置跳转链接
|
|
134
|
+
|
|
135
|
+
通过 `link` 配置跳转链接，点击标签时会跳转到指定地址。注意 `link` 在 `triggerClickEvent` 为 false 时才生效。
|
|
136
|
+
|
|
137
|
+
```tsx
|
|
138
|
+
<WrappedPresentationalBricksBrickValueMapping
|
|
139
|
+
style={{ display: "inline-block" }}
|
|
140
|
+
value="hello"
|
|
141
|
+
link={{ to: "/developers/brick-book" }}
|
|
142
|
+
mapping={{
|
|
143
|
+
".*": {
|
|
144
|
+
color: "orange",
|
|
145
|
+
text: "remapping",
|
|
146
|
+
icon: { lib: "fa", icon: "star" },
|
|
147
|
+
},
|
|
148
|
+
}}
|
|
149
|
+
/>
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
### 文案超出隐藏
|
|
153
|
+
|
|
154
|
+
设置 `isTextEllipsis` 为 true 时，文案超出容器会隐藏并在鼠标悬停时显示 Tooltip。
|
|
155
|
+
|
|
156
|
+
```tsx
|
|
157
|
+
<WrappedPresentationalBricksBrickValueMapping
|
|
158
|
+
style={{ width: 80 }}
|
|
159
|
+
isTextEllipsis={true}
|
|
160
|
+
value="longText"
|
|
161
|
+
mapping={{
|
|
162
|
+
longText: {
|
|
163
|
+
color: "blue",
|
|
164
|
+
text: "这是一段非常非常长的文案用于演示超出隐藏效果",
|
|
165
|
+
},
|
|
166
|
+
}}
|
|
167
|
+
/>
|
|
168
|
+
```
|
|
169
|
+
|
|
170
|
+
### 无匹配时显示原始值
|
|
171
|
+
|
|
172
|
+
当 value 无法匹配到任何映射规则时，直接显示原始值。
|
|
173
|
+
|
|
174
|
+
```tsx
|
|
175
|
+
<WrappedPresentationalBricksBrickValueMapping
|
|
176
|
+
value={1}
|
|
177
|
+
mapping={{
|
|
178
|
+
0: { text: "error" },
|
|
179
|
+
}}
|
|
180
|
+
/>
|
|
181
|
+
```
|