Renamed ColorSchemaVislibParams to ColorSchemaParams, added enums and…

… got rid of useValidation function

src/legacy/core_plugins/vis_type_vislib/public/components/options/gauge/ranges_panel.tsx

@@ -25,13 +25,13 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import {
   ColorRanges,
   ColorSchemaOptions,
-  ColorSchemaVislibParams,
+  ColorSchemaParams,
   SetColorRangeValue,
   SwitchOption,
+  ColorSchemas,
 } from '../../../../../../../plugins/charts/public';
 import { GaugeOptionsInternalProps } from '.';
 import { Gauge } from '../../../gauge';
-import { ColorSchemas } from '../../../../../../../plugins/charts/public';
 
 function RangesPanel({
   setGaugeValue,
@@ -43,7 +43,7 @@ function RangesPanel({
   vis,
 }: GaugeOptionsInternalProps) {
   const setColorSchemaOptions = useCallback(
-    <T extends keyof ColorSchemaVislibParams>(paramName: T, value: ColorSchemaVislibParams[T]) => {
+    <T extends keyof ColorSchemaParams>(paramName: T, value: ColorSchemaParams[T]) => {
       setGaugeValue(paramName, value as Gauge[T]);
       // set outline if color schema is changed to greys
       // if outline wasn't set explicitly yet

src/legacy/core_plugins/vis_type_vislib/public/gauge.ts

@@ -26,14 +26,14 @@ import { getGaugeCollections, Alignments, GaugeTypes } from './utils/collections
 import {
   ColorModes,
   ColorSchemas,
-  ColorSchemaVislibParams,
+  ColorSchemaParams,
   Labels,
   Style,
 } from '../../../../plugins/charts/public';
 import { createVislibVisController } from './vis_controller';
 import { VisTypeVislibDependencies } from './plugin';
 
-export interface Gauge extends ColorSchemaVislibParams {
+export interface Gauge extends ColorSchemaParams {
   backStyle: 'Full';
   gaugeStyle: 'Full';
   orientation: 'vertical';

src/legacy/core_plugins/vis_type_vislib/public/heatmap.ts

@@ -27,9 +27,9 @@ import { createVislibVisController } from './vis_controller';
 import { TimeMarker } from './vislib/visualizations/time_marker';
 import { CommonVislibParams, ValueAxis } from './types';
 import { VisTypeVislibDependencies } from './plugin';
-import { ColorSchemas, ColorSchemaVislibParams } from '../../../../plugins/charts/public';
+import { ColorSchemas, ColorSchemaParams } from '../../../../plugins/charts/public';
 
-export interface HeatmapVisParams extends CommonVislibParams, ColorSchemaVislibParams {
+export interface HeatmapVisParams extends CommonVislibParams, ColorSchemaParams {
   type: 'heatmap';
   addLegend: boolean;
   enableHover: boolean;

src/plugins/charts/public/static/components/collections.ts

@@ -17,18 +17,14 @@
  * under the License.
  */
 
-import { $Values } from '@kbn/utility-types';
+export enum ColorModes {
+  BACKGROUND = 'Background',
+  LABELS = 'Labels',
+  NONE = 'None',
+}
 
-export const ColorModes = Object.freeze({
-  BACKGROUND: 'Background' as 'Background',
-  LABELS: 'Labels' as 'Labels',
-  NONE: 'None' as 'None',
-});
-export type ColorModes = $Values<typeof ColorModes>;
-
-export const Rotates = Object.freeze({
-  HORIZONTAL: 0,
-  VERTICAL: 90,
-  ANGLED: 75,
-});
-export type Rotates = $Values<typeof Rotates>;
+export enum Rotates {
+  HORIZONTAL = 0,
+  VERTICAL = 90,
+  ANGLED = 75,
+}

src/plugins/charts/public/static/components/color_schema.tsx

@@ -25,15 +25,15 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
 import { SelectOption } from './select';
 import { SwitchOption } from './switch';
-import { ColorSchemaVislibParams } from './types';
+import { ColorSchemaParams } from './types';
 import { ColorSchema } from '../color_maps';
 
-export type SetColorSchemaOptionsValue = <T extends keyof ColorSchemaVislibParams>(
+export type SetColorSchemaOptionsValue = <T extends keyof ColorSchemaParams>(
   paramName: T,
-  value: ColorSchemaVislibParams[T]
+  value: ColorSchemaParams[T]
 ) => void;
 
-interface ColorSchemaOptionsProps extends ColorSchemaVislibParams {
+interface ColorSchemaOptionsProps extends ColorSchemaParams {
   disabled?: boolean;
   colorSchemas: ColorSchema[];
   uiState: VisOptionsProps['uiState'];

src/plugins/charts/public/static/components/index.ts

@@ -21,11 +21,10 @@ export { BasicOptions } from './basic_options';
 export { ColorModes, Rotates } from './collections';
 export { ColorRanges, SetColorRangeValue } from './color_ranges';
 export { ColorSchemaOptions, SetColorSchemaOptionsValue } from './color_schema';
-export { ColorSchemaVislibParams, Labels, Style } from './types';
+export { ColorSchemaParams, Labels, Style } from './types';
 export { NumberInputOption } from './number_input';
 export { RangeOption } from './range';
 export { RequiredNumberInputOption } from './required_number_input';
 export { SelectOption } from './select';
 export { SwitchOption } from './switch';
 export { TextInputOption } from './text_input';
-export { useValidation } from './utils';

src/plugins/charts/public/static/components/required_number_input.tsx

@@ -17,9 +17,8 @@
  * under the License.
  */
 
-import React, { ReactNode, useCallback, ChangeEvent } from 'react';
+import React, { ReactNode, useCallback, ChangeEvent, useEffect } from 'react';
 import { EuiFormRow, EuiFieldNumber } from '@elastic/eui';
-import { useValidation } from './utils';
 
 interface NumberInputOptionProps<ParamName extends string> {
   disabled?: boolean;
@@ -57,7 +56,12 @@ function RequiredNumberInputOption<ParamName extends string>({
   'data-test-subj': dataTestSubj,
 }: NumberInputOptionProps<ParamName>) {
   const isValid = value !== null;
-  useValidation(setValidity, paramName, isValid);
+
+  useEffect(() => {
+    setValidity(paramName, isValid);
+
+    return () => setValidity(paramName, true);
+  }, [isValid, paramName, setValidity]);
 
   const onChange = useCallback(
     (ev: ChangeEvent<HTMLInputElement>) =>

src/plugins/charts/public/static/components/types.ts

@@ -20,7 +20,7 @@
 import { ColorSchemas } from '../color_maps';
 import { Rotates } from './collections';
 
-export interface ColorSchemaVislibParams {
+export interface ColorSchemaParams {
   colorSchema: ColorSchemas;
   invertColors: boolean;
 }