refactor(Field): complete migration to wrapWithField wrapper

cube-js · Jan 9, 2024 · 856a1a9 · 856a1a9
1 parent 7f060e1
commit 856a1a9
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 104 deletions.
diff --git a/src/components/forms/FileInput/FileInput.tsx b/src/components/forms/FileInput/FileInput.tsx
@@ -22,7 +22,7 @@ import {
   tasty,
 } from '../../../tasty';
 import { FieldBaseProps } from '../../../shared';
-import { FieldWrapper } from '../FieldWrapper';
+import { wrapWithField } from '../wrapper';
 
 import type { AriaTextFieldProps } from '@react-types/textfield';
 
@@ -135,6 +135,8 @@ function extractContents(element, callback) {
 }
 
 function FileInput(props: CubeFileInputProps, ref) {
+  props = useProviderProps(props);
+
   let {
     id,
     name,
@@ -163,11 +165,14 @@ function FileInput(props: CubeFileInputProps, ref) {
     type = 'file',
     inputProps,
     ...otherProps
-  } = useProviderProps(props);
+  } = props;
+
   const [value, setValue] = useState();
   const [dragHover, setDragHover] = useState(false);
+
   let domRef = useRef(null);
   let defaultInputRef = useRef(null);
+
   inputRef = inputRef || defaultInputRef;
 
   let styles = extractStyles(otherProps, CONTAINER_STYLES);
@@ -247,31 +252,10 @@ function FileInput(props: CubeFileInputProps, ref) {
     </FileInputElement>
   );
 
-  return (
-    <FieldWrapper
-      {...{
-        labelPosition,
-        label,
-        extra,
-        styles,
-        isRequired,
-        labelStyles,
-        necessityIndicator,
-        necessityLabel,
-        labelProps,
-        isDisabled,
-        validationState,
-        message,
-        description,
-        requiredMark,
-        tooltip,
-        isHidden,
-        labelSuffix,
-        Component: fileInput,
-        ref: domRef,
-      }}
-    />
-  );
+  return wrapWithField(fileInput, domRef, {
+    ...props,
+    styles,
+  });
 }
 
 /**

diff --git a/src/components/forms/Slider/SliderBase.tsx b/src/components/forms/Slider/SliderBase.tsx
@@ -4,10 +4,11 @@ import { FocusableRef } from '@react-types/shared';
 import { SliderState, useSliderState } from 'react-stately';
 import { useSlider, useNumberFormatter } from 'react-aria';
 
-import { FieldWrapper } from '../FieldWrapper';
 import { extractStyles, OUTER_STYLES, tasty } from '../../../tasty';
 import { useFieldProps, useFormProps } from '../Form';
 import { Text } from '../../content/Text';
+import { mergeProps } from '../../../utils/react';
+import { wrapWithField } from '../wrapper';
 
 import { SliderControlsElement, SliderElement } from './elements';
 import { CubeSliderBaseProps } from './types';
@@ -211,27 +212,17 @@ function SliderBase(
 
   styles = extractStyles(otherProps, OUTER_STYLES, styles);
 
-  return (
-    <FieldWrapper
-      {...{
-        labelPosition,
-        label,
-        extra,
+  return wrapWithField(
+    sliderField,
+    ref,
+    mergeProps(
+      {
+        ...props,
         styles,
-        isRequired,
-        labelStyles,
-        necessityIndicator,
-        labelProps,
-        isDisabled,
-        validationState,
-        message,
-        description,
-        requiredMark,
-        labelSuffix,
-        Component: sliderField,
-        ref: ref,
-      }}
-    />
+        extra,
+      },
+      { labelProps },
+    ),
   );
 }
 

diff --git a/src/components/forms/wrapper.tsx b/src/components/forms/wrapper.tsx
@@ -1,4 +1,5 @@
 import { ReactElement, RefObject } from 'react';
+import { FocusableRef } from '@react-types/shared';
 
 import { FieldBaseProps, FormBaseProps } from '../../shared';
 import { BaseProps, Styles } from '../../tasty';
@@ -11,7 +12,7 @@ interface WrapWithFieldProps extends FieldBaseProps, BaseProps, FormBaseProps {
 
 export function wrapWithField<T extends WrapWithFieldProps>(
   component: ReactElement,
-  ref: RefObject<unknown>,
+  ref: RefObject<unknown> | FocusableRef<HTMLElement>,
   props: T,
 ) {
   let {
@@ -20,13 +21,14 @@ export function wrapWithField<T extends WrapWithFieldProps>(
     labelPosition = 'top',
     labelStyles,
     isRequired,
+    isDisabled,
     necessityIndicator,
-    necessityLabel,
-    validationState,
     message,
+    messageStyles,
     description,
-    isDisabled,
+    validationState,
     labelProps,
+    fieldProps,
     requiredMark = true,
     tooltip,
     isHidden,
@@ -43,14 +45,15 @@ export function wrapWithField<T extends WrapWithFieldProps>(
         extra,
         styles,
         isRequired,
+        isDisabled,
         labelStyles,
         necessityIndicator,
-        necessityLabel,
         labelProps,
-        isDisabled,
-        validationState,
+        fieldProps,
         message,
+        messageStyles,
         description,
+        validationState,
         requiredMark,
         tooltip,
         isHidden,

diff --git a/src/components/pickers/ComboBox/ComboBox.tsx b/src/components/pickers/ComboBox/ComboBox.tsx
@@ -35,13 +35,13 @@ import {
   useCombinedRefs,
   useLayoutEffect,
 } from '../../../utils/react';
-import { FieldWrapper } from '../../forms/FieldWrapper';
 import { CubeSelectBaseProps, ListBoxPopup } from '../Select/Select';
 import {
   DEFAULT_INPUT_STYLES,
   INPUT_WRAPPER_STYLES,
 } from '../../forms/TextInput/TextInputBase';
 import { OverlayWrapper } from '../../overlays/OverlayWrapper';
+import { wrapWithField } from '../../forms/wrapper';
 
 import type {
   CollectionBase,
@@ -153,7 +153,6 @@ export const ComboBox = forwardRef(function ComboBox<T extends object>(
     qa,
     label,
     extra,
-    labelPosition = 'top',
     labelStyles,
     isRequired,
     necessityIndicator,
@@ -184,7 +183,6 @@ export const ComboBox = forwardRef(function ComboBox<T extends object>(
     autoComplete = 'off',
     direction = 'bottom',
     shouldFlip = true,
-    requiredMark = true,
     menuTrigger = 'input',
     suffixPosition = 'before',
     loadingState,
@@ -420,27 +418,10 @@ export const ComboBox = forwardRef(function ComboBox<T extends object>(
     </ComboBoxWrapperElement>
   );
 
-  return (
-    <FieldWrapper
-      {...{
-        labelPosition,
-        label,
-        extra,
-        styles,
-        isRequired,
-        labelStyles,
-        necessityIndicator,
-        labelProps,
-        isDisabled,
-        validationState,
-        message,
-        description,
-        requiredMark,
-        labelSuffix,
-        Component: comboBoxField,
-        ref: ref,
-      }}
-    />
+  return wrapWithField(
+    comboBoxField,
+    ref,
+    mergeProps({ ...props, styles }, { labelProps }),
   );
 }) as unknown as (<T>(
   props: CubeComboBoxProps<T> & { ref?: ForwardedRef<HTMLDivElement> },

diff --git a/src/components/pickers/Select/Select.tsx b/src/components/pickers/Select/Select.tsx
@@ -25,8 +25,8 @@ import {
   useOverlayPosition,
   useSelect,
 } from 'react-aria';
-import { DOMRef } from '@react-types/shared';
 import styled from 'styled-components';
+import { DOMRef } from '@react-types/shared';
 
 import { useFieldProps, useFormProps } from '../../forms';
 import { useProviderProps } from '../../../provider';
@@ -42,7 +42,6 @@ import {
   tasty,
 } from '../../../tasty';
 import { useFocus } from '../../../utils/react/interactions';
-import { FieldWrapper } from '../../forms/FieldWrapper';
 import { OverlayWrapper } from '../../overlays/OverlayWrapper';
 import { FieldBaseProps } from '../../../shared';
 import { getOverlayTransitionCSS } from '../../../utils/transitions';
@@ -52,6 +51,7 @@ import {
   INPUT_WRAPPER_STYLES,
 } from '../../forms/TextInput/TextInputBase';
 import { DEFAULT_BUTTON_STYLES } from '../../actions';
+import { wrapWithField } from '../../forms/wrapper';
 
 import type { AriaSelectProps } from '@react-types/select';
 
@@ -301,7 +301,6 @@ function Select<T extends object>(
     label,
     extra,
     icon,
-    labelPosition = 'top',
     labelStyles,
     isRequired,
     necessityIndicator,
@@ -325,7 +324,6 @@ function Select<T extends object>(
     description,
     direction = 'bottom',
     shouldFlip = true,
-    requiredMark = true,
     placeholder,
     tooltip,
     size,
@@ -486,28 +484,16 @@ function Select<T extends object>(
     </SelectWrapperElement>
   );
 
-  return (
-    <FieldWrapper
-      {...{
-        labelPosition,
-        label,
-        extra,
+  return wrapWithField(
+    selectField,
+    ref,
+    mergeProps(
+      {
+        ...props,
         styles,
-        isRequired,
-        labelStyles,
-        necessityIndicator,
-        labelProps,
-        isDisabled,
-        validationState,
-        message,
-        description,
-        requiredMark,
-        tooltip,
-        labelSuffix,
-        Component: selectField,
-        ref: ref,
-      }}
-    />
+      },
+      { labelProps },
+    ),
   );
 }
 

diff --git a/src/shared/form.ts b/src/shared/form.ts
@@ -57,6 +57,8 @@ export interface FieldBaseProps extends FormBaseProps {
   labelStyles?: Styles;
   /** Whether the field is inside the form. Private field. */
   insideForm?: boolean;
+  fieldProps?: Props;
+  messageStyles?: Styles;
 }
 
 export interface FormBaseProps {