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 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 | 26x 3x 3x 3x 3x 3x 3x 26x | import PropTypes from 'prop-types';
import {
Card,
IconButton,
InfoPopover,
Tooltip
} from '@folio/stripes/components';
import CustomPropertyField from './CustomPropertyField';
import { useKintIntl } from '../../hooks';
const CustomPropertyFormCard = ({
availableCustomProperties,
customProperty,
customPropertyType,
customProperties,
handleDeleteCustomProperty,
index,
internalPropertyCounter,
intlKey: passedIntlKey,
intlNS: passedIntlNS,
labelOverrides = {},
name,
onChange,
setCustomProperties,
value
}) => {
const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
const getHeader = () => {
Iif (customPropertyType === 'optional') {
return kintIntl.formatKintMessage({
id: 'customProperty.optionalPropertyHeader',
overrideValue: labelOverrides.optionalPropertyHeader,
}, { number: internalPropertyCounter, name: customProperty.value });
}
return kintIntl.formatKintMessage({
id: 'customProperty.primaryPropertyHeader',
overrideValue: labelOverrides.primaryPropertyHeader,
fallbackMessage: customProperty.label
}, { number: internalPropertyCounter, name: customProperty.value });
};
const getTooltipText = () => (
kintIntl.formatKintMessage({
id: 'customProperty.remove',
overrideValue: labelOverrides.remove
}, { number: internalPropertyCounter, name: customProperty.value })
);
return (
<Card
key={customProperty.value}
data-testid="custom-property-form-card"
headerEnd={customPropertyType === 'optional' ?
<Tooltip
id={`customProperty-${customProperty.value}-${index}`}
text={getTooltipText()}
>
{({ ref, ariaIds }) => (
<IconButton
ref={ref}
aria-labelledby={ariaIds.text}
icon="trash"
id={`edit-customproperty-${index}-delete`}
onClick={() => handleDeleteCustomProperty(customProperty, index)}
/>
)}
</Tooltip> :
null
}
headerStart={
<strong>
{getHeader()}
{customProperty.description ? (
<InfoPopover
content={customProperty.description}
/>
) : null}
</strong>
}
>
<CustomPropertyField
{...{
availableCustomProperties,
customProperty,
customPropertyType,
customProperties,
index,
internalPropertyCounter,
intlKey: passedIntlKey,
intlNS: passedIntlNS,
labelOverrides,
name,
onChange,
setCustomProperties,
value
}}
/>
</Card>
);
};
CustomPropertyFormCard.propTypes = {
availableCustomProperties: PropTypes.arrayOf(PropTypes.object),
customProperty: PropTypes.object,
customPropertyType: PropTypes.string,
customProperties: PropTypes.arrayOf(PropTypes.object),
handleDeleteCustomProperty: PropTypes.func,
index: PropTypes.number,
internalPropertyCounter: PropTypes.number,
intlKey: PropTypes.string,
intlNS: PropTypes.string,
labelOverrides: PropTypes.object,
name: PropTypes.string,
onChange: PropTypes.func,
setCustomProperties: PropTypes.func,
value: PropTypes.object
};
export default CustomPropertyFormCard;
|