diff --git a/src/panels/EditablePanelTile.jsx b/src/panels/EditablePanelTile.jsx index 46c7140..7281162 100644 --- a/src/panels/EditablePanelTile.jsx +++ b/src/panels/EditablePanelTile.jsx @@ -25,6 +25,7 @@ function valuesEqual(a, b) { * * @prop {any} [value] - The saved value shown in read mode and used as the baseline for dirty detection. * @prop {ReactNode} [title] - Overline label shown above the body. + * @prop {function} [titleContent] - Optional title render function receiving `{ editing, draft, onChange }`. * @prop {ReactNode} [display] - Node rendered while not editing. * @prop {ReactNode | function} [edit] - Node rendered while editing, or a render function receiving `{ draft, onChange, inputRef }`. * @prop {(draft) => Promise} [onSave] - Async save handler. The tile exits edit mode only after this resolves; if it rejects, the error is surfaced via `onError` and shown inline. @@ -142,15 +143,24 @@ class EditablePanelTileBase extends Component { }; renderTitle() { - const { title, onSave } = this.props; - if (!title) return null; + const { title, titleContent, onSave } = this.props; + const { editing, draft } = this.state; + const content = + typeof titleContent === 'function' + ? titleContent({ + editing, + draft, + onChange: this.handleDraftChange, + }) + : title; + if (!content) return null; return ( - {title} + {content} ); }