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 | 126x 126x 126x 126x 126x 126x 18x 18x 18x 18x 18x 1x 1x 18x 24x 75x 1x 1x | /*
* 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 from 'react'
import { defaultTo, map } from 'lodash-es'
import { FieldArray } from 'formik'
import type { IconProps } from '@harness/uicore/dist/icons/Icon'
import { Button, Layout } from '@wings-software/uicore'
import { useStrings } from 'framework/strings'
export interface ListInputProps {
name: string
elementList: string[]
readOnly?: boolean
defaultValueToReset?: string[]
addBtnLabel?: string
deleteIconProps?: Partial<IconProps>
deleteBtnClassName?: string
addBtnClassName?: string
listItemRenderer(value: string, index: number): React.ReactNode
}
export function ListInput(props: ListInputProps) {
const { name, elementList, readOnly, deleteIconProps, deleteBtnClassName, addBtnClassName, listItemRenderer } = props
const { getString } = useStrings()
const addBtnLabel = defaultTo(props.addBtnLabel, getString('plusAdd'))
const [count, setCount] = React.useState(0)
const handleItemRemove = (index: number, removeCallback: (index: number) => void) => {
removeCallback(index)
setCount(prevCount => prevCount + 1)
}
return (
<FieldArray
name={name}
key={`${name}-${count}`}
render={({ push, remove }) => (
<>
{map(elementList, (value: string, index: number) => (
<Layout.Horizontal
key={index}
flex={{ alignItems: 'center' }}
spacing="small"
padding={{ bottom: 'small' }}
>
{listItemRenderer(value, index)}
<Button
icon="main-trash"
iconProps={{ size: 22, ...deleteIconProps }}
minimal
onClick={() => handleItemRemove(index, remove)}
data-testid={`remove-${name}-[${index}]`}
disabled={readOnly}
className={deleteBtnClassName}
style={{ alignSelf: 'flex-start' }}
/>
</Layout.Horizontal>
))}
<Button
intent="primary"
minimal
text={addBtnLabel}
data-testid={`add-${name}`}
onClick={() => push('')}
disabled={readOnly}
style={{ padding: 0 }}
className={addBtnClassName}
/>
</>
)}
/>
)
}
|