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 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | 498x 498x 498x 498x 498x 498x 498x 498x 498x 498x 13x 1x 12x 7x 5x 5x 12x 498x 7x 5x 13x 498x | /*
* 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 { Card, Layout, Text, Container } from '@wings-software/uicore'
import { Color } from '@harness/design-system'
import React from 'react'
import { isUndefined } from 'lodash-es'
import cx from 'classnames'
import css from './DetailPageCard.module.scss'
export enum ContentType {
TEXT = 'TEXT', //default
CUSTOM = 'CUSTOM'
}
export interface Content {
type?: ContentType
label: string
value?: string | JSX.Element
hideOnUndefinedValue?: boolean
}
interface DetailPageCardProps {
title: string
content: Content[]
classname?: string
}
const renderItem = ({
type = ContentType.TEXT,
label,
value,
hideOnUndefinedValue,
...rest
}: Content): JSX.Element | undefined => {
if (isUndefined(value) && hideOnUndefinedValue) {
return
}
let jsxContent
if (type === ContentType.TEXT) {
jsxContent = (
<Layout.Vertical spacing="small" {...rest}>
<Text style={{ fontSize: '12px' }}>{label}</Text>
<Text color={Color.BLACK} width="424px" lineClamp={1}>
{value}
</Text>
</Layout.Vertical>
)
} else Eif (type === ContentType.CUSTOM) {
jsxContent = (
<>
{label ? <Text style={{ fontSize: '12px' }}>{label}</Text> : null}
{value}
</>
)
}
return <Container className={css.detailsSectionRowWrapper}>{jsxContent}</Container>
}
const DetailPageCard: React.FC<DetailPageCardProps> = props => {
const { title, content = [], classname } = props
return (
<Card className={cx(css.main, classname)} interactive={false} elevation={0} selected={false}>
<Text color={Color.BLACK} style={{ fontSize: '16px', fontWeight: 600 }}>
{title}
</Text>
<Layout.Vertical style={{ marginTop: 'var(--spacing-4)' }}>
{content.map(item => renderItem(item))}
</Layout.Vertical>
</Card>
)
}
export default DetailPageCard
|