From ead103145b1eb604365810eb5e10f3a01790138a Mon Sep 17 00:00:00 2001 From: Bob Gallagher Date: Mon, 10 Apr 2017 14:01:35 -0400 Subject: [PATCH] =?utf8?q?Quick=20fix=20for=20Composer=20slowdown=20after?= =?utf8?q?=20a=20lot=20of=20typing=20-=20use=20=E2=80=9Cdebounce=E2=80=9D?= =?utf8?q?=20straw=20to=20collect=20key=20strokes=20-=20rift15919?= MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit Change-Id: I4c8dff71da8f68b0154d639263524654275784fa Signed-off-by: Bob Gallagher --- .../EditDescriptorModelProperties.js | 138 ++++++++++-------- 1 file changed, 78 insertions(+), 60 deletions(-) diff --git a/skyquake/plugins/composer/src/src/components/EditDescriptorModelProperties.js b/skyquake/plugins/composer/src/src/components/EditDescriptorModelProperties.js index aa189637c..41e87b3bc 100644 --- a/skyquake/plugins/composer/src/src/components/EditDescriptorModelProperties.js +++ b/skyquake/plugins/composer/src/src/components/EditDescriptorModelProperties.js @@ -20,11 +20,11 @@ * * This class generates the form fields used to edit the CONFD JSON model. */ -'use strict'; import _includes from 'lodash/includes' import _isArray from 'lodash/isArray' import _cloneDeep from 'lodash/cloneDeep' +import _debounce from 'lodash/debounce'; import utils from '../libraries/utils' import React from 'react' import ClassNames from 'classnames' @@ -168,17 +168,7 @@ export default function EditDescriptorModelProperties(props) { ); } - function onFormFieldValueChanged(event) { - if (DescriptorModelFactory.isContainer(this)) { - event.preventDefault(); - const name = event.target.name; - const value = event.target.value; - utils.assignPathValue(this.model, name, value); - CatalogItemsActions.catalogItemDescriptorChanged(this.getRoot()); - } - } - - function buildField(container, property, path, value, fieldId) { + function buildField(container, property, path, value, fieldKey) { let cds = CatalogDataStore; let catalogs = cds.getTransientCatalogs(); @@ -186,13 +176,35 @@ export default function EditDescriptorModelProperties(props) { const isEditable = true; const isGuid = Property.isGuid(property); const isBoolean = Property.isBoolean(property); - const onChange = onFormFieldValueChanged.bind(container); const isEnumeration = Property.isEnumeration(property); const isLeafRef = Property.isLeafRef(property); const onFocus = onFocusPropertyFormInputElement.bind(container, property, path, value); const placeholder = changeCase.title(property.name); const className = ClassNames(property.name + '-input', {'-is-guid': isGuid}); const fieldValue = value ? (value.constructor.name != "Object") ? value : '' : (isNaN(value) ? undefined : value); + + // process the named field value change + function processFieldValueChange(name, value) { + console.debug('processed change for -- ' + name + ' -- with value -- ' + value); + // this = the container being edited + if (DescriptorModelFactory.isContainer(this)) { + utils.assignPathValue(this.model, name, value); + CatalogItemsActions.catalogItemDescriptorChanged(this.getRoot()); + } + } + + // change handler used for onChange event + const changeHandler = (handleValueChange, event) => { + event.preventDefault(); + console.debug(event.target.value); + handleValueChange(event.target.value); + }; + // create an onChange event handler for a text field for the specified field path (debounced to accumulate chars) + const onTextChange = changeHandler.bind(null, _debounce( + processFieldValueChange.bind(container, pathToProperty), 2000, {maxWait: 5000})); // max wait for short-name + // create an onChange event handler for a select field for the specified field path + const onSelectChange = changeHandler.bind(null, processFieldValueChange.bind(container, pathToProperty)); + if (isEnumeration) { const enumeration = Property.getEnumeration(property, value); const options = enumeration.map((d, i) => { @@ -209,13 +221,12 @@ export default function EditDescriptorModelProperties(props) { } return ( +
+ {valueResponse} @@ -540,7 +558,7 @@ export default function EditDescriptorModelProperties(props) { ); } - function buildLeafListItem(container, property, valuePath, value, index) { + function buildLeafListItem(container, property, valuePath, value, uniqueId, index) { // look at the type to determine how to parse the value return (
@@ -638,7 +656,7 @@ export default function EditDescriptorModelProperties(props) { event.preventDefault(); event.stopPropagation(); this.getRoot().uiState.focusedPropertyPath = path.join('.'); - console.log('property selected', path.join('.')); + console.debug('property selected', path.join('.')); ComposerAppActions.propertySelected([path.join('.')]); } @@ -767,5 +785,5 @@ export default function EditDescriptorModelProperties(props) { {buildAdvancedGroup()}
); +}; -} -- 2.25.1