Remove outer div (fixes arthurdenner#19)

Konsept-IT · Feb 14, 2022 · c0906a9 · c0906a9
1 parent 2cf89e5
commit c0906a9
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 41 deletions.
diff --git a/src/components/input.tsx b/src/components/input.tsx
@@ -1,18 +1,31 @@
 import React from 'react';
-import { Form, Input, FormInputProps } from 'semantic-ui-react';
+import {
+  Form,
+  Input,
+  FormInputProps,
+  FormFieldProps,
+  Ref,
+} from 'semantic-ui-react';
 import { SemanticDatepickerProps } from '../types';
 import CustomIcon from './icon';
 
 type InputProps = FormInputProps & {
   clearIcon: SemanticDatepickerProps['clearIcon'];
   icon: SemanticDatepickerProps['icon'];
   isClearIconVisible: boolean;
+  fieldProps: FormFieldProps;
+  fieldRef: React.Ref<HTMLElement>;
+  children?: React.ReactNode;
 };
 
 const inputData = {
   'data-testid': 'datepicker-input',
 };
 
+const style: React.CSSProperties = {
+  position: 'relative',
+};
+
 const CustomInput = React.forwardRef<Input, InputProps>((props, ref) => {
   const {
     clearIcon,
@@ -24,30 +37,38 @@ const CustomInput = React.forwardRef<Input, InputProps>((props, ref) => {
     onFocus,
     required,
     value,
+    fieldProps,
+    fieldRef,
+    children,
     ...rest
   } = props;
 
   return (
-    <Form.Field error={error} required={required}>
-      {label && <label htmlFor={rest.id as string | undefined}>{label}</label>}
-      <Input
-        {...rest}
-        ref={ref}
-        error={error}
-        required={required}
-        icon={
-          <CustomIcon
-            clearIcon={clearIcon}
-            icon={icon}
-            isClearIconVisible={isClearIconVisible}
-            onClear={onClear}
-          />
-        }
-        input={inputData}
-        onFocus={onFocus}
-        value={value}
-      />
-    </Form.Field>
+    <Ref innerRef={fieldRef}>
+      <Form.Field {...fieldProps} style={style}>
+        {label && (
+          <label htmlFor={rest.id as string | undefined}>{label}</label>
+        )}
+        <Input
+          {...rest}
+          ref={ref}
+          error={error}
+          required={required}
+          icon={
+            <CustomIcon
+              clearIcon={clearIcon}
+              icon={icon}
+              isClearIconVisible={isClearIconVisible}
+              onClear={onClear}
+            />
+          }
+          input={inputData}
+          onFocus={onFocus}
+          value={value}
+        />
+        {children}
+      </Form.Field>
+    </Ref>
   );
 });
 

diff --git a/src/index.tsx b/src/index.tsx
@@ -18,11 +18,6 @@ import { Locale, SemanticDatepickerProps } from './types';
 import Calendar from './components/calendar';
 import Input from './components/input';
 
-const style: React.CSSProperties = {
-  display: 'inline-block',
-  position: 'relative',
-};
-
 const semanticInputProps = [
   'autoComplete',
   'autoFocus',
@@ -61,6 +56,14 @@ const semanticInputProps = [
   'readOnly',
 ];
 
+const semanticFormFieldProps = [
+  'disabled',
+  'error',
+  'inline',
+  'required',
+  'width',
+];
+
 type SemanticDatepickerState = {
   isVisible: boolean;
   locale: Locale;
@@ -153,6 +156,19 @@ class SemanticDatepicker extends React.Component<
     };
   }
 
+  get fieldProps() {
+    const props = pick(semanticFormFieldProps, this.props);
+    const className =
+      this.props.fieldClassName !== undefined
+        ? this.props.fieldClassName
+        : null;
+
+    return {
+      ...props,
+      className,
+    };
+  }
+
   get date(): Date | undefined {
     const { selectedDate } = this.state;
     const { date } = this.props;
@@ -428,21 +444,22 @@ class SemanticDatepicker extends React.Component<
     return inline ? (
       datepickerComponent
     ) : (
-      <div className="field" style={style} ref={this.el}>
-        <Input
-          {...this.inputProps}
-          isClearIconVisible={Boolean(clearable && selectedDateFormatted)}
-          onBlur={this.handleBlur}
-          onChange={this.handleChange}
-          onClear={this.clearInput}
-          onFocus={readOnly ? null : this.showCalendar}
-          onKeyDown={this.handleKeyDown}
-          readOnly={readOnly || datePickerOnly}
-          ref={this.inputRef}
-          value={typedValue || selectedDateFormatted}
-        />
+      <Input
+        {...this.inputProps}
+        isClearIconVisible={Boolean(clearable && selectedDateFormatted)}
+        onBlur={this.handleBlur}
+        onChange={this.handleChange}
+        onClear={this.clearInput}
+        onFocus={readOnly ? null : this.showCalendar}
+        onKeyDown={this.handleKeyDown}
+        readOnly={readOnly || datePickerOnly}
+        fieldProps={this.fieldProps}
+        fieldRef={this.el}
+        ref={this.inputRef}
+        value={typedValue || selectedDateFormatted}
+      >
         {isVisible && datepickerComponent}
-      </div>
+      </Input>
     );
   }
 }

diff --git a/src/types/index.ts b/src/types/index.ts
@@ -1,6 +1,10 @@
 import format from 'date-fns/format';
 import { Props as DayzedProps, RenderProps } from 'dayzed';
-import { FormInputProps, SemanticICONS } from 'semantic-ui-react';
+import {
+  FormInputProps,
+  SemanticICONS,
+  SemanticWIDTHS,
+} from 'semantic-ui-react';
 
 export type Object = { [key: string]: any };
 
@@ -93,6 +97,8 @@ export type SemanticDatepickerProps = PickedDayzedProps &
     type: 'basic' | 'range';
     datePickerOnly: boolean;
     value: DayzedProps['selected'] | null;
+    fieldClassName?: string;
+    width?: SemanticWIDTHS;
   };
 
 export type BaseDatePickerProps = DayzedProps & {