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 | 1x 13x 5x 5x 1x 4x 4x 8x 3x 5x 5x | 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) {
const displayDOM = displayRenderer(label || placeholder);
// console.log('aaa InlineEditDisplay', { displayRenderer, label, displayDOM });
if (typeof displayDOM === 'string') {
return (
<div
onClick={onClick}
className="inline-edit__display"
role="textbox"
aria-hidden
>
{displayDOM}
</div>
);
}
// append classNames
Eif (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>
);
}
|