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 | 27x 27x | import { useCallback } from 'react';
import PropTypes from 'prop-types';
import { DropdownButton, Tooltip } from '@folio/stripes/components';
import SearchField from '../SearchField';
import Typedown from '../Typedown';
const ButtonTypedown = ({
id,
renderButtonItem,
renderListItem,
tooltipProps: {
getTooltipText, // A special prop that selectedValue can be passed into
...tooltipProps
} = {},
...typedownProps
}) => {
const renderButtonFunc = useCallback((selectedValue) => {
if (renderButtonItem) {
return renderButtonItem(selectedValue);
}
return renderListItem(selectedValue);
}, [renderButtonItem, renderListItem]);
const usesTypedown = (
getTooltipText &&
typeof getTooltipText === 'function'
) ||
(
tooltipProps?.text &&
tooltipProps.text !== ''
);
return (
<Typedown
getDisplayValue={() => false}
renderHeader={({ handleType, currentlyTyped }) => (
<SearchField
id={`button-typedown-searchfield-${id}`}
marginBottom0
onChange={handleType}
value={currentlyTyped}
/>
)}
renderListItem={renderListItem}
renderTrigger={({
selectedValue,
triggerComponentRef,
triggerId,
typedownTriggerKeyDownHandler
}) => {
const renderButton = ({
buttonRef,
...buttonProps
}) => {
return (
<DropdownButton
ref={buttonRef}
buttonStyle="dropdownItem"
id={triggerId}
marginBottom0
onKeyDown={typedownTriggerKeyDownHandler}
{...buttonProps}
>
{renderButtonFunc(selectedValue)}
</DropdownButton>
);
};
if (!usesTypedown) {
return renderButton({
buttonRef: triggerComponentRef,
});
}
const typedownText = (
getTooltipText &&
typeof getTooltipText === 'function'
) ?
getTooltipText(selectedValue) :
(tooltipProps?.text || '');
return (
<Tooltip
id={`button-typedown-trigger-${id}`}
placement="bottom"
text={typedownText}
>
{({ ref: tooltipRef, ariaIds }) => (
renderButton({
buttonRef: (node) => {
// Contrive composed node from tooltip AND triggerComponent
triggerComponentRef(node);
if (tooltipRef.current !== node && !!node) {
tooltipRef.current = node;
}
},
'aria-labelledby': ariaIds.text
})
)}
</Tooltip>
);
}}
{...typedownProps}
/>
);
};
export default ButtonTypedown;
ButtonTypedown.propTypes = {
onType: PropTypes.func.isRequired,
renderListItem: PropTypes.func.isRequired,
// REST OF TYPEDOWN PROPS
};
|