External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-02-15 18:20:00 -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
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 { withI18n } from '@lingui/react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import styled from 'styled-components'; import styled from 'styled-components';
import debounce from '../../util/debounce';
const LINE_HEIGHT = 24; const LINE_HEIGHT = 24;
const PADDING = 12; const PADDING = 12;
@@ -125,7 +126,7 @@ function CodeEditor({
mode={aceModes[mode] || 'text'} mode={aceModes[mode] || 'text'}
className={`pf-c-form-control ${className}`} className={`pf-c-form-control ${className}`}
theme="github" theme="github"
onChange={onChange} onChange={debounce(onChange, 250)}
value={value} value={value}
name={id || 'code-editor'} name={id || 'code-editor'}
editorProps={{ $blockScrolling: true }} editorProps={{ $blockScrolling: true }}

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

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