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 | 195x 4x 191x 191x 1x 1x 190x 190x 187x 190x 190x 190x 191x | import React from 'react';
import { UndoOutlined, CheckOutlined } from '@ant-design/icons';
import { Tooltip } from 'antd';
import globals from '../globals';
export function InputSuffix({
icon,
isChanged,
onUndoClick,
onSaveClick,
component = 'input', // or 'textarea'
}) {
if (icon && !React.isValidElement(icon)) {
throw new Error('Invalid icon prop: icon must be a valid React element.');
}
const renderIcon = () => {
if (icon) {
const { className } = icon.props;
return React.cloneElement(icon, {
id: 'inline-edit__undo-button',
className: `${className} inline-edit input-suffix--${component} ${isChanged ? '' : 'display-none'}`,
onClick: onUndoClick,
});
}
const suffixIcons = [];
if (onSaveClick) {
suffixIcons.push(
<Tooltip title={globals.DEFAULT_SAVE_TOOLTIP_TEXT} key="save">
<CheckOutlined
id="inline-edit__save-button"
onClick={onSaveClick}
/>
</Tooltip>,
);
}
Eif (onUndoClick) {
suffixIcons.push(
<Tooltip title={globals.DEFAULT_UNDO_TOOLTIP_TEXT} key="undo">
<UndoOutlined
id="inline-edit__undo-button"
className={`inline-edit input-suffix--${component} ${isChanged ? '' : 'display-none'}`}
onClick={onUndoClick}
/>
</Tooltip>,
);
}
// undo button
return (
<span className="inline-edit__suffix-container">
{suffixIcons}
</span>
);
};
return (
renderIcon()
);
}
|