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 | 2x 22x 14x 14x 2x 14x 1x 13x 6x 15x 7x 8x 10x | import React from 'react';
import { Typography } from 'antd';
import globals from '../globals';
const {
Text,
} = Typography;
export function InlineEditDisplay({
onClick,
label,
placeholder = globals.DEFAULT_PLACEHOLDER,
// initialLabel,
// defaultLabel,
displayRenderer,
}) {
if (displayRenderer) {
// console.log('aaa InlineEditDisplay', {
// displayRenderer, label, placeholder, displayDOM, paramLength: displayRenderer.length,
// });
let displayDOM = displayRenderer(label, placeholder);
if (displayRenderer.length === 1 && !label) {
displayDOM = <DisplayPlaceholder onClick={onClick} placeholder={placeholder} />;
}
if (typeof displayDOM === 'string') {
return (
<div
onClick={onClick}
className="inline-edit__display"
role="textbox"
aria-hidden
>
{displayDOM}
</div>
);
}
// append classNames
if (React.isValidElement(displayDOM)) {
return React.cloneElement(displayDOM, {
className: `${displayDOM?.props?.className || ''} inline-edit__display`,
onClick,
});
}
// return <DisplayPlaceholder onClick={onClick} placeholder={placeholder} />;
}
if (label) {
return (
<div
onClick={onClick}
className="inline-edit__display label"
role="textbox"
aria-hidden
>
{label}
</div>
);
}
// render placeholder label -- Click to edit
return <DisplayPlaceholder onClick={onClick} placeholder={placeholder} />;
}
function DisplayPlaceholder({
onClick, placeholder,
}) {
return (
<Text
onClick={onClick}
type="secondary"
className="inline-edit__display placeholder"
>
{placeholder}
</Text>
);
}
|