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 | 727x 727x 727x 727x 727x 57x 57x 100x 13x 13x 13x | import React from 'react'
import cx from 'classnames'
import type { IconProps } from '@wings-software/uicore/dist/icons/Icon'
import { Collapse, Pagination, PaginationProps } from '@wings-software/uicore'
import type { Scope } from '@common/interfaces/SecretsInterface'
import type { EntityReferenceResponse } from '../EntityReference/EntityReference'
import css from './CollapsableList.module.scss'
export interface CollapsableTableProps<T> {
selectedRecord: T | undefined
setSelectedRecord: (val: T | undefined) => void
data: EntityReferenceResponse<T>[]
recordRender: (args: { item: EntityReferenceResponse<T>; selectedScope: Scope; selected?: boolean }) => JSX.Element
collapsedRecordRender?: (args: {
item: EntityReferenceResponse<T>
selectedScope: Scope
selected?: boolean
}) => JSX.Element
pagination: PaginationProps
selectedScope: Scope
disableCollapse?: boolean
}
export function CollapsableList<T>(props: CollapsableTableProps<T>): JSX.Element {
const { disableCollapse = false } = props
return (
<>
<div className={css.referenceList}>
{props.data.map((item: EntityReferenceResponse<T>) => (
<Collapse
key={item.identifier}
collapsedIcon="main-chevron-right"
expandedIcon="main-chevron-down"
iconProps={{ size: 12 } as IconProps}
isRemovable={false}
collapseClassName={cx(css.collapseWrapper, {
[css.selectedItem]: props.selectedRecord === item.record
})}
collapseHeaderClassName={cx(css.collapseHeader, { [css.hideCollapseIcon]: disableCollapse })}
heading={
<div
onClick={e => {
e.preventDefault()
e.stopPropagation()
props.setSelectedRecord(props.selectedRecord === item.record ? undefined : item.record)
}}
className={css.collapeHeaderContent}
>
{props.recordRender({
item,
selectedScope: props.selectedScope,
selected: props.selectedRecord === item.record
})}
</div>
}
>
{props.collapsedRecordRender?.({
item,
selectedScope: props.selectedScope,
selected: props.selectedRecord === item.record
})}
</Collapse>
))}
</div>
<Pagination {...props.pagination} />
</>
)
}
|