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 56 57 58 59 60 61 62 63 64 65 | 108x 108x 108x 108x 731x 15x 416x 300x 108x 401x 401x 401x 33x 33x 401x 401x 731x 731x 108x | /*
* Copyright 2021 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 from 'react'
import { Text, Layout, Tag, TagsPopover, tagsType } from '@wings-software/uicore'
import { useStrings } from 'framework/strings'
export interface ListTagsProps {
tags: tagsType
length?: number
className?: string
tagClassName?: string
width?: number
targetClassName?: string
}
const getWidthForTags = (length: number, width: number): number => {
switch (length) {
case 1:
return width
case 2:
return width / 2
default:
return width / 3
}
}
const TagsRenderer: React.FC<ListTagsProps> = props => {
const { tags, length = 3, className, width = 240, tagClassName, targetClassName } = props
const baseTags = Object.keys(tags).slice(0, length)
const remainingTags = Object.keys(tags)
.slice(length)
.reduce((result: tagsType, key) => {
result[key] = tags[key]
return result
}, {})
const { getString } = useStrings()
return (
<>
<Layout.Horizontal spacing="xsmall" className={className}>
{baseTags.map(key => {
const value = tags[key]
return (
<Tag style={{ maxWidth: getWidthForTags(baseTags.length, width) }} className={tagClassName} key={key}>
{value ? `${key}:${value}` : key}
</Tag>
)
})}
{Object.keys(tags).length - length > 0 && (
<TagsPopover
tags={remainingTags}
tagClassName={tagClassName}
target={<Text className={targetClassName}>{getString('plus') + (Object.keys(tags).length - length)}</Text>}
/>
)}
</Layout.Horizontal>
</>
)
}
export default TagsRenderer
|