All files / modules/18-audit-trail/components/UserItemRenderer UserItemRenderer.tsx

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
 
 
 
 
 
 
 
30x
30x
30x
30x
 
 
 
 
 
 
 
 
 
 
30x
14x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
30x
 
/*
 * Copyright 2022 Harness Inc. All rights reserved.
 * Use of this source code is governed by the PolyForm Shield 1.0.0 license
 * that can be found in the licenses directory at the root of this repository, also available at
 * https://polyformproject.org/wp-content/uploads/2020/06/PolyForm-Shield-1.0.0.txt.
 */
 
import React, { MouseEventHandler } from 'react'
import { Layout, Text, Avatar, MultiSelectOption } from '@wings-software/uicore'
import { Color } from '@harness/design-system'
import { Menu } from '@blueprintjs/core'
 
export interface UserItem extends MultiSelectOption {
  email?: string
}
 
interface UserItemRendererProps {
  item: UserItem
  handleClick: MouseEventHandler<HTMLElement>
}
 
const UserItemRenderer: React.FC<UserItemRendererProps> = ({ handleClick, item }) => {
  return (
    <Menu.Item
      key={item.value.toString()}
      text={
        <Layout.Horizontal spacing="small" flex={{ alignItems: 'center', justifyContent: 'flex-start' }}>
          <Avatar name={item.label} email={item.email || item.value.toString()} size="small" hoverCard={false} />
          <Layout.Vertical padding={{ left: 'small' }}>
            <Text color={Color.BLACK}>{item.label}</Text>
            <Text color={Color.GREY_700}>{item.email || item.value}</Text>
          </Layout.Vertical>
        </Layout.Horizontal>
      }
      onClick={handleClick}
    />
  )
}
 
export default UserItemRenderer