Refactored some code

elastic · Apr 9, 2020 · a774fd2 · a774fd2
1 parent 3bd31b9
commit a774fd2
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 79 deletions.
diff --git a/src/plugins/vis_default_editor/public/components/controls/components/number_list/utils.ts b/src/plugins/vis_default_editor/public/components/controls/components/number_list/utils.ts
@@ -119,7 +119,7 @@ function getNextModel(list: NumberRowModel[], range: NumberListRange): NumberRow
   };
 }
 
-function getInitModelList(list: Array<number | undefined>): NumberRowModel[] {
+function getInitModelList(list: Array<number | undefined | ''>): NumberRowModel[] {
   return list.length
     ? list.map(num => ({
         value: (num === undefined ? EMPTY_STRING : num) as NumberRowModel['value'],

diff --git a/src/plugins/vis_default_editor/public/components/controls/components/simple_number_list.tsx b/src/plugins/vis_default_editor/public/components/controls/components/simple_number_list.tsx
@@ -21,9 +21,8 @@ import React, { Fragment, useCallback, useEffect, useMemo, useState } from 'reac
 import { isArray } from 'lodash';
 import { EuiButtonEmpty, EuiFlexItem, EuiFormRow, EuiSpacer, htmlIdGenerator } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { getInitModelList, getRange, hasInvalidValues, parse } from './number_list/utils';
+import { EMPTY_STRING, getInitModelList, getRange, parse } from './number_list/utils';
 import { NumberRow, NumberRowModel } from './number_list/number_row';
-import { useValidation } from '../utils';
 import { AggParamEditorProps } from '../../agg_param_props';
 
 const generateId = htmlIdGenerator();
@@ -33,50 +32,34 @@ function SimpleNumberList({
   aggParam,
   value,
   setValue,
-  setValidity,
-  showValidation,
   setTouched,
-}: AggParamEditorProps<Array<number | undefined>>) {
+}: AggParamEditorProps<Array<number | ''>>) {
   const [numbers, setNumbers] = useState(
-    getInitModelList(value && isArray(value) ? (value as Array<number | undefined>) : [undefined])
+    getInitModelList(value && isArray(value) ? value : [EMPTY_STRING])
   );
   const numberRange = useMemo(() => getRange('[-Infinity,Infinity]'), []);
-  const [isValid, setIsValid] = useState(true);
 
   // This useEffect is needed to discard changes, it sets numbers a mapped value if they are different
   useEffect(() => {
     if (
       isArray(value) &&
       (value?.length !== numbers.length ||
-        !(value as number[]).every((numberValue, index) => numberValue === numbers[index].value))
+        !value.every((numberValue, index) => numberValue === numbers[index].value))
     ) {
       setNumbers(
-        value.map(
-          numberValue =>
-            ({
-              id: generateId(),
-              value: numberValue,
-              isInvalid: false,
-            } as NumberRowModel)
-        )
+        value.map(numberValue => ({
+          id: generateId(),
+          value: numberValue,
+          isInvalid: false,
+        }))
       );
     }
   }, [numbers, value]);
 
-  const setNumbersValidity = useCallback(
-    (isListValid: boolean) => {
-      setIsValid(isListValid);
-      setValidity(isListValid);
-    },
-    [setValidity]
-  );
-
-  useValidation(setNumbersValidity, !hasInvalidValues(numbers));
-
   const onUpdate = useCallback(
     (numberList: NumberRowModel[]) => {
       setNumbers(numberList);
-      setValue(numberList.map(({ value: numberValue }) => numberValue) as number[]);
+      setValue(numberList.map(({ value: numberValue }) => numberValue));
     },
     [setValue]
   );
@@ -104,9 +87,9 @@ function SimpleNumberList({
       ...numbers,
       {
         id: generateId(),
-        value: '',
+        value: EMPTY_STRING as '',
         isInvalid: false,
-      } as NumberRowModel,
+      },
     ];
     onUpdate(newArray);
   }, [numbers, onUpdate]);
@@ -122,7 +105,6 @@ function SimpleNumberList({
       label={aggParam.displayName || aggParam.name}
       fullWidth={true}
       compressed
-      isInvalid={showValidation ? !isValid : false}
     >
       <>
         {numbers.map((number, arrayIndex) => (

diff --git a/src/plugins/vis_default_editor/public/components/controls/include_exclude.tsx b/src/plugins/vis_default_editor/public/components/controls/include_exclude.tsx
@@ -25,65 +25,26 @@ import { search } from '../../../../data/public';
 import { SimpleNumberList } from './components/simple_number_list';
 const { isNumberType } = search.aggs;
 
-export function IncludeExcludeParamEditor({
-  agg,
-  aggParam,
-  value,
-  setValue,
-  setValidity,
-  showValidation,
-  setTouched,
-  editorConfig,
-  formIsTouched,
-  metricAggs,
-  schemas,
-  state,
-}: AggParamEditorProps<string | Array<number | undefined>>) {
+export function IncludeExcludeParamEditor(props: AggParamEditorProps<string | Array<number | ''>>) {
+  const { agg, value, setValue } = props;
   const isAggOfNumberType = isNumberType(agg);
 
   // This useEffect converts value from string type to number and back when the field type is changed
   useEffect(() => {
     if (isAggOfNumberType && !isArray(value) && value !== undefined) {
-      setValue(
-        value
-          .split(',')
-          .map(item => parseFloat(item))
-          .filter(number => !isNaN(number)) as number[]
-      );
+      const numberArray = value
+        .split(',')
+        .map(item => parseFloat(item))
+        .filter(number => !isNaN(number));
+      setValue(numberArray.length ? numberArray : ['']);
     } else if (!isAggOfNumberType && isArray(value) && value !== undefined) {
       setValue((value as Array<number | ''>).filter(item => item !== '').toString());
     }
   }, [isAggOfNumberType, setValue, value]);
 
   return isAggOfNumberType ? (
-    <SimpleNumberList
-      agg={agg}
-      aggParam={aggParam}
-      showValidation={showValidation}
-      value={value as Array<number | undefined>}
-      setValidity={setValidity}
-      setValue={setValue}
-      setTouched={setTouched}
-      editorConfig={editorConfig}
-      formIsTouched={formIsTouched}
-      metricAggs={metricAggs}
-      schemas={schemas}
-      state={state}
-    />
+    <SimpleNumberList {...props} value={value as Array<number | ''>} />
   ) : (
-    <StringParamEditor
-      agg={agg}
-      aggParam={aggParam}
-      showValidation={showValidation}
-      value={value as string}
-      setValidity={setValidity}
-      setValue={setValue}
-      setTouched={setTouched}
-      editorConfig={editorConfig}
-      formIsTouched={formIsTouched}
-      metricAggs={metricAggs}
-      schemas={schemas}
-      state={state}
-    />
+    <StringParamEditor {...props} value={value as string} />
   );
 }