diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 4c9c902..e3d4f81 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -1,5 +1,12 @@ # Change Log +## 3.6.0 (2024-11-29) + +### Features / Enhancements + +- Update AutosizeCodeEditor (#70) +- Update onBlur behavior for code editor (#71) + ## 3.5.0 (2024-10-23) ### Features / Enhancements diff --git a/packages/components/package.json b/packages/components/package.json index d7a63b8..d53c3d2 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -89,5 +89,5 @@ "typecheck": "tsc --emitDeclarationOnly false --noEmit" }, "types": "dist/index.d.ts", - "version": "3.5.1" + "version": "3.6.0" } diff --git a/packages/components/src/components/AutosizeCodeEditor/AutosizeCodeEditor.test.tsx b/packages/components/src/components/AutosizeCodeEditor/AutosizeCodeEditor.test.tsx index 73e47b6..fdde5c7 100644 --- a/packages/components/src/components/AutosizeCodeEditor/AutosizeCodeEditor.test.tsx +++ b/packages/components/src/components/AutosizeCodeEditor/AutosizeCodeEditor.test.tsx @@ -58,7 +58,7 @@ jest.mock('@grafana/ui', () => ({ ); }), - CodeEditor: jest.fn(({ value, onChange, height, onEditorDidMount }) => { + CodeEditor: jest.fn(({ value, onChange, onBlur, height, onEditorDidMount }) => { /** * Call the onEditorDidMount callback with the editor instance */ @@ -69,7 +69,8 @@ jest.mock('@grafana/ui', () => ({ {...InTestIds.field.apply()} style={{ height }} value={value} - onChange={(event) => onChange(event.currentTarget.value)} + onChange={(event) => onChange?.(event.currentTarget.value)} + onBlur={(event) => onBlur?.(event.currentTarget.value)} /> ); }), @@ -121,6 +122,24 @@ describe('AutosizeCodeEditor', () => { expect(selectors.field()).toHaveStyle(`height: 360px`); }); + it('Should not call onBlur if onBlur is not provided', () => { + const onBlur = jest.fn(); + render(getComponent({})); + + fireEvent.blur(selectors.field()); + expect(onBlur).not.toHaveBeenCalled(); + }); + + it('Should call onBlur if onBlur is provided', () => { + const onBlur = jest.fn(); + render(getComponent({ onBlur, value: '1line\n' })); + + fireEvent.blur(selectors.field()); + + expect(onBlur).toHaveBeenCalled(); + expect(onBlur).toHaveBeenCalledWith('1line\\n'); + }); + it('Should update height if props changed', () => { const { rerender } = render(getComponent({})); diff --git a/packages/components/src/components/AutosizeCodeEditor/AutosizeCodeEditor.tsx b/packages/components/src/components/AutosizeCodeEditor/AutosizeCodeEditor.tsx index b851e79..24dfd74 100644 --- a/packages/components/src/components/AutosizeCodeEditor/AutosizeCodeEditor.tsx +++ b/packages/components/src/components/AutosizeCodeEditor/AutosizeCodeEditor.tsx @@ -47,6 +47,7 @@ const getHeightByValue = (value: string, minHeight?: number, maxHeight?: number) export const AutosizeCodeEditor: React.FC = ({ value, onChange, + onBlur, minHeight, maxHeight, height: staticHeight, @@ -126,6 +127,29 @@ export const AutosizeCodeEditor: React.FC = ({ [monacoEditor, onEditorDidMount] ); + /** + * Change value + */ + const onChangeValue = useCallback( + (value: string) => { + const currentValue = value.replaceAll('\n', '\\n'); + onChange?.(currentValue); + setHeight(getHeightByValue(value, minHeight, maxHeight)); + }, + [maxHeight, minHeight, onChange] + ); + + /** + * onBlur handler + */ + const onBlurUpdate = useCallback( + (value: string) => { + const currentValue = value.replaceAll('\n', '\\n'); + onBlur?.(currentValue); + }, + [onBlur] + ); + /** * Update Height on value change */ @@ -150,11 +174,8 @@ export const AutosizeCodeEditor: React.FC = ({ height={staticHeight ?? height} monacoOptions={currentMonacoOptions} onEditorDidMount={onEditorDidMountMain} - onChange={(value) => { - const currentValue = value.replaceAll('\n', '\\n'); - onChange?.(currentValue); - setHeight(getHeightByValue(value, minHeight, maxHeight)); - }} + onChange={onChangeValue} + onBlur={onBlurUpdate} {...restProps} /> @@ -184,11 +205,8 @@ export const AutosizeCodeEditor: React.FC = ({ containerStyles={styles.modalEditor} monacoOptions={currentMonacoOptions} onEditorDidMount={modalEditorDidMount} - onChange={(value) => { - const currentValue = value.replaceAll('\n', '\\n'); - onChange?.(currentValue); - setHeight(getHeightByValue(value, minHeight, maxHeight)); - }} + onChange={onChangeValue} + onBlur={onBlurUpdate} {...restProps} />