cells MultipleObjectsCell.tsx

90% Statements 9/10

83.33% Branches 5/6

100% Functions 2/2

90% Lines 9/10

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55  
 
 
 
 
 
 
 
 
 
 
 
 
 
66x
 
 
4x
 
4x
2x
2x
2x
3x
 
 
 
 
 
 
 
 
 
2x
 
 
 
 
 
 
 
 
 
 
 
 
 
2x
 
 
 
 
 
 
  import React, { ReactElement } from 'react';
import { TableMode } from '@props/RecordProps';
import { Popover, Tag } from 'antd';
import ObjectCell from './ObjectCell';
 
interface MultipleObjectsCellRenderProps {
  domainName: string;
  labelField?: string;
  displayText?: string;
  tableMode?: TableMode;
  ids?: Array<number>;
  zIndex: number;
}
 
const MultipleObjectsCell = (props: MultipleObjectsCellRenderProps): ReactElement => {
  const {
    domainName, labelField, tableMode, zIndex, ids,
  } = props;
 
  if (ids == null || ids.length === 0) {
    return (<></>);
  } else if (Array.isArray(ids)) {
    const elems = ids?.map((id, idx) => {
      return (<ObjectCell
        domainName={domainName}
        id={id}
        zIndex={zIndex}
        key={`${id}_${idx}`}
        labelField={labelField}
        tableMode={tableMode}
      />);
    });
    const result = (
      <Popover
        trigger="click"
        placement="right"
        overlayClassName="tag-popover"
        content={
          <div className="objects"> {elems} </div>
        }
        overlayStyle={{ zIndex: zIndex + 1 }}
      >
        <Tag className="object-id-tag">
          &raquo; &raquo; &raquo;
        </Tag>
      </Popover>
    );
    return result;
  } else E{
    return (<></>);
  }
};
 
export default MultipleObjectsCell;