diff --git a/packages/amis/__tests__/renderers/Mapping.test.tsx b/packages/amis/__tests__/renderers/Mapping.test.tsx
index 1df1ca15e..fa5e09984 100644
--- a/packages/amis/__tests__/renderers/Mapping.test.tsx
+++ b/packages/amis/__tests__/renderers/Mapping.test.tsx
@@ -1,137 +1,156 @@
import {render} from '@testing-library/react';
import '../../src';
import {render as amisRender} from '../../src';
-import {makeEnv} from '../helper';
+import {makeEnv, wait} from '../helper';
-const tag = (label: string) => render(
- amisRender(
- {type: 'tag', label},
- {},
- makeEnv({})
- )
-).container;
+const tag = (label: string) =>
+ render(amisRender({type: 'tag', label}, {}, makeEnv({}))).container;
test('Renderer:mapping width object map', async () => {
- const setup = (value?: any) => render(
- amisRender(
- {
- type: 'mapping',
- map: {
- 1: "漂亮",
- 2: "开心",
- 3: "惊吓",
- 4: "紧张",
- '*': '其他',
+ const setup = (value?: any) =>
+ render(
+ amisRender(
+ {
+ type: 'mapping',
+ map: {
+ 1: '漂亮',
+ 2: '开心',
+ 3: '惊吓',
+ 4: '紧张',
+ '*': '其他'
+ },
+ ...(value !== undefined ? {value} : {})
},
- ...(value !== undefined ? {value} : {})
- },
- {},
- makeEnv({})
- )
- ).container;
+ {},
+ makeEnv({})
+ )
+ ).container;
- const noValue = setup().querySelector('.cxd-MappingField .text-muted')! as HTMLElement;
+ const noValue = setup().querySelector(
+ '.cxd-MappingField .text-muted'
+ )! as HTMLElement;
expect(noValue.innerHTML).toBe('-');
- const value1 = setup(1).querySelector('.cxd-MappingField .cxd-TplField span')! as HTMLElement;
+ const value1 = setup(1).querySelector(
+ '.cxd-MappingField .cxd-TplField span'
+ )! as HTMLElement;
expect(value1.innerHTML).toBe('漂亮');
- const value5 = setup(5).querySelector('.cxd-MappingField .cxd-TplField span')! as HTMLElement;
+ const value5 = setup(5).querySelector(
+ '.cxd-MappingField .cxd-TplField span'
+ )! as HTMLElement;
expect(value5.innerHTML).toBe('其他');
});
test('Renderer:mapping width array map', async () => {
- const setup = (value?: any) => render(
- amisRender(
- {
- type: 'mapping',
- map: [
- {1: "漂亮"},
- {2: "开心"},
- {3: "惊吓"},
- {4: "紧张"},
- {'*': '其他'}
- ],
- ...(value !== undefined ? {value} : {})
- },
- {},
- makeEnv({})
- )
- ).container;
+ const setup = (value?: any) =>
+ render(
+ amisRender(
+ {
+ type: 'mapping',
+ map: [
+ {1: '漂亮'},
+ {2: '开心'},
+ {3: '惊吓'},
+ {4: '紧张'},
+ {'*': '其他'}
+ ],
+ ...(value !== undefined ? {value} : {})
+ },
+ {},
+ makeEnv({})
+ )
+ ).container;
- const noValue = setup().querySelector('.cxd-MappingField .text-muted')! as HTMLElement;
+ const noValue = setup().querySelector(
+ '.cxd-MappingField .text-muted'
+ )! as HTMLElement;
expect(noValue.innerHTML).toBe('-');
- const value1 = setup(1).querySelector('.cxd-MappingField .cxd-TplField span')! as HTMLElement;
+ const value1 = setup(1).querySelector(
+ '.cxd-MappingField .cxd-TplField span'
+ )! as HTMLElement;
expect(value1.innerHTML).toBe('漂亮');
- const value5 = setup(5).querySelector('.cxd-MappingField .cxd-TplField span')! as HTMLElement;
+ const value5 = setup(5).querySelector(
+ '.cxd-MappingField .cxd-TplField span'
+ )! as HTMLElement;
expect(value5.innerHTML).toBe('其他');
});
test('Renderer:mapping attr: valueField and labelField', async () => {
- const setup = (value?: any) => render(
- amisRender(
- {
- type: 'mapping',
- map: [
- {
- name: 1,
- text: '漂亮'
- },
- {
- name: 2,
- text: '开心'
- },
- {
- name: '*',
- text: '其他'
- }
- ],
- labelField: 'text',
- valueField: 'name',
- ...(value !== undefined ? {value} : {})
- },
- {},
- makeEnv({})
- )
- ).container;
+ const setup = (value?: any) =>
+ render(
+ amisRender(
+ {
+ type: 'mapping',
+ map: [
+ {
+ name: 1,
+ text: '漂亮'
+ },
+ {
+ name: 2,
+ text: '开心'
+ },
+ {
+ name: '*',
+ text: '其他'
+ }
+ ],
+ labelField: 'text',
+ valueField: 'name',
+ ...(value !== undefined ? {value} : {})
+ },
+ {},
+ makeEnv({})
+ )
+ ).container;
- const noValue = setup().querySelector('.cxd-MappingField .text-muted')! as HTMLElement;
+ const noValue = setup().querySelector(
+ '.cxd-MappingField .text-muted'
+ )! as HTMLElement;
expect(noValue.innerHTML).toBe('-');
- const value1 = setup(1).querySelector('.cxd-MappingField .cxd-TplField span')! as HTMLElement;
+ const value1 = setup(1).querySelector(
+ '.cxd-MappingField .cxd-TplField span'
+ )! as HTMLElement;
expect(value1.innerHTML).toBe('漂亮');
- const value5 = setup(5).querySelector('.cxd-MappingField .cxd-TplField span')! as HTMLElement;
+ const value5 = setup(5).querySelector(
+ '.cxd-MappingField .cxd-TplField span'
+ )! as HTMLElement;
expect(value5.innerHTML).toBe('其他');
});
test('Renderer:mapping attr: itemSchema when simple map', async () => {
- const setup = (value?: any) => render(
- amisRender(
- {
- type: 'mapping',
- map: [
- {1: "漂亮"},
- {2: "开心"},
- {3: "惊吓"},
- {4: "紧张"},
- {'*': '其他'}
- ],
- valueField: 'name',
- ...(value !== undefined ? {value} : {}),
- itemSchema: {
- type: 'tag',
- label: '${item}'
- }
- },
- {},
- makeEnv({})
- )
- ).container;
+ const setup = (value?: any) =>
+ render(
+ amisRender(
+ {
+ type: 'mapping',
+ map: [
+ {1: '漂亮'},
+ {2: '开心'},
+ {3: '惊吓'},
+ {4: '紧张'},
+ {'*': '其他'}
+ ],
+ valueField: 'name',
+ ...(value !== undefined ? {value} : {}),
+ itemSchema: {
+ type: 'tag',
+ label: '${item}'
+ }
+ },
+ {},
+ makeEnv({})
+ )
+ ).container;
- const noValue = setup().querySelector('.cxd-MappingField .text-muted')! as HTMLElement;
+ const noValue = setup().querySelector(
+ '.cxd-MappingField .text-muted'
+ )! as HTMLElement;
expect(noValue.innerHTML).toBe('-');
const value1 = setup(1).querySelector('.cxd-MappingField')! as HTMLElement;
@@ -142,37 +161,40 @@ test('Renderer:mapping attr: itemSchema when simple map', async () => {
});
test('Renderer:mapping attr: itemSchema when normal map', async () => {
- const setup = (value?: any) => render(
- amisRender(
- {
- type: 'mapping',
- map: [
- {
- name: 1,
- text: '漂亮'
- },
- {
- name: 2,
- text: '开心'
- },
- {
- name: '*',
- text: '其他'
+ const setup = (value?: any) =>
+ render(
+ amisRender(
+ {
+ type: 'mapping',
+ map: [
+ {
+ name: 1,
+ text: '漂亮'
+ },
+ {
+ name: 2,
+ text: '开心'
+ },
+ {
+ name: '*',
+ text: '其他'
+ }
+ ],
+ valueField: 'name',
+ ...(value !== undefined ? {value} : {}),
+ itemSchema: {
+ type: 'tag',
+ label: '${name} ${text}'
}
- ],
- valueField: 'name',
- ...(value !== undefined ? {value} : {}),
- itemSchema: {
- type: 'tag',
- label: '${name} ${text}'
- }
- },
- {},
- makeEnv({})
- )
- ).container;
+ },
+ {},
+ makeEnv({})
+ )
+ ).container;
- const noValue = setup().querySelector('.cxd-MappingField .text-muted')! as HTMLElement;
+ const noValue = setup().querySelector(
+ '.cxd-MappingField .text-muted'
+ )! as HTMLElement;
expect(noValue.innerHTML).toBe('-');
const value1 = setup(1).querySelector('.cxd-MappingField')! as HTMLElement;
@@ -204,23 +226,24 @@ test('Renderer:mapping', async () => {
});
test('Renderer:mapping html', async () => {
- const setup = (value?: any) => render(
- amisRender(
- {
- type: 'mapping',
- map: {
- 1: "漂亮",
- 2: "开心",
- 3: "惊吓",
- 4: "紧张",
- '*': '其他'
+ const setup = (value?: any) =>
+ render(
+ amisRender(
+ {
+ type: 'mapping',
+ map: {
+ 1: "漂亮",
+ 2: "开心",
+ 3: "惊吓",
+ 4: "紧张",
+ '*': '其他'
+ },
+ ...(value !== undefined ? {value} : {})
},
- ...(value !== undefined ? {value} : {})
- },
- {},
- makeEnv({})
- )
- ).container;
+ {},
+ makeEnv({})
+ )
+ ).container;
expect(setup()).toMatchSnapshot();
expect(setup(1)).toMatchSnapshot();
@@ -228,25 +251,28 @@ test('Renderer:mapping html', async () => {
});
test('Renderer:mapping schema', async () => {
- const setup = (value?: any) => render(
- amisRender(
- {
- type: 'mapping',
- map: {
- 1: {type: 'tag', label: '漂亮'},
- 2: {type: 'tag', label: '开心'},
- 3: {type: 'tag', label: '惊吓'},
- 4: {type: 'tag', label: '紧张'},
- '*': {type: 'tag', label: '其他'}
+ const setup = (value?: any) =>
+ render(
+ amisRender(
+ {
+ type: 'mapping',
+ map: {
+ 1: {type: 'tag', label: '漂亮'},
+ 2: {type: 'tag', label: '开心'},
+ 3: {type: 'tag', label: '惊吓'},
+ 4: {type: 'tag', label: '紧张'},
+ '*': {type: 'tag', label: '其他'}
+ },
+ ...(value !== undefined ? {value} : {})
},
- ...(value !== undefined ? {value} : {})
- },
- {},
- makeEnv({})
- )
- ).container;
+ {},
+ makeEnv({})
+ )
+ ).container;
- const noValue = setup().querySelector('.cxd-MappingField .text-muted')! as HTMLElement;
+ const noValue = setup().querySelector(
+ '.cxd-MappingField .text-muted'
+ )! as HTMLElement;
expect(noValue.innerHTML).toBe('-');
const value1 = setup(1).querySelector('.cxd-MappingField')! as HTMLElement;
@@ -255,3 +281,68 @@ test('Renderer:mapping schema', async () => {
const value5 = setup(5).querySelector('.cxd-MappingField')! as HTMLElement;
expect(value5.innerHTML).toBe(tag('其他').innerHTML);
});
+
+// 对应 issue https://github.com/baidu/amis/issues/9613
+test('Renderer:mapping schema status', async () => {
+ const {container, getByText} = render(
+ amisRender(
+ {
+ type: 'page',
+ data: {
+ items: [
+ {
+ status: 1,
+ id: 1
+ }
+ ]
+ },
+ body: [
+ {
+ type: 'table',
+ title: '表格',
+ columns: [
+ {
+ name: 'id',
+ label: 'ID'
+ },
+ {
+ name: 'status',
+ label: '状态2',
+ type: 'mapping',
+ map: {
+ '*': {
+ type: 'status',
+ map: {
+ '0': 'schedule',
+ '1': 'rolling',
+ '2': 'success',
+ '3': 'fail',
+ '4': 'warning'
+ },
+ labelMap: {
+ '2': '任务成功',
+ '1': '处理中',
+ '3': '异常终止',
+ '0': '等待中',
+ '4': '已过期'
+ }
+ }
+ }
+ }
+ ]
+ }
+ ]
+ },
+ {},
+ makeEnv({})
+ )
+ );
+
+ await wait(200);
+
+ expect(
+ [].slice
+ .call(container.querySelectorAll('tbody td'))
+ .map((td: any) => td.textContent)
+ ).toEqual(['1', '处理中']);
+});
diff --git a/packages/amis/src/renderers/Mapping.tsx b/packages/amis/src/renderers/Mapping.tsx
index 027739d12..aacc70ba2 100644
--- a/packages/amis/src/renderers/Mapping.tsx
+++ b/packages/amis/src/renderers/Mapping.tsx
@@ -253,7 +253,7 @@ export const MappingField = withStore(props =>
}
renderViewValue(value: any) {
- const {render, itemSchema, data, labelField} = this.props;
+ const {render, itemSchema, data, labelField, name} = this.props;
if (!itemSchema) {
let label = value;
@@ -265,6 +265,12 @@ export const MappingField = withStore(props =>
// object 也没有 type,不能作为schema渲染
// 默认取 label 字段
label = value['label'];
+ } else {
+ // 不会下发 value 了,所以要把 name 下发一下
+ label = {
+ name,
+ ...label
+ };
}
} else {
label = value[labelField || 'label'];