External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-12 02:19:58 -03:30
Code Issues Packages Projects Releases Wiki Activity

debounce CodeEditor onChange for performance improvement

Browse Source
This commit is contained in:
Keith J. Grant 2021-03-12 12:26:07 -08:00
parent 05f93032f5
commit c90dfbb7e0
2 changed files with 6 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
awx/ui_next/src/components/CodeEditor/CodeEditor.jsx
View File

@ -9,6 +9,7 @@ import 'ace-builds/src-noconflict/theme-github';
import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro';
import styled from 'styled-components';
import debounce from '../../util/debounce';
const LINE_HEIGHT = 24;
const PADDING = 12;
@ -125,7 +126,7 @@ function CodeEditor({
mode={aceModes[mode] || 'text'}
className={`pf-c-form-control ${className}`}
theme="github"
onChange={onChange}
onChange={debounce(onChange, 250)}
value={value}
name={id || 'code-editor'}
editorProps={{ $blockScrolling: true }}

4
awx/ui_next/src/components/CodeEditor/CodeEditor.test.jsx
View File

@ -1,6 +1,9 @@
import React from 'react';
import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
import CodeEditor from './CodeEditor';
import debounce from '../../util/debounce';
jest.mock('../../util/debounce');
describe('CodeEditor', () => {
beforeEach(() => {
@ -19,6 +22,7 @@ describe('CodeEditor', () => {
});
it('should trigger onChange prop', () => {
debounce.mockImplementation(fn => fn);
const onChange = jest.fn();
const wrapper = mountWithContexts(
<CodeEditor value="---" onChange={onChange} mode="yaml" />