fix: A few small cleanups for DateTimeInput (#2062)

- Don't allow an undefined to be returned
- Export more types

---------

Co-authored-by: Matthew Runyon <mattrunyonstuff@gmail.com>

Author: mofojed

packages/components/src/DateTimeInput.tsx

@@ -18,9 +18,9 @@ const DATE_VALUE_STRING = '2022-01-01';
 const DEFAULT_VALUE_STRING = `${DATE_VALUE_STRING} 00:00:00.000000000`;
 const FULL_DATE_FORMAT = 'YYYY-MM-DD HH:MM:SS.SSSSSSSSS';
 
-type DateTimeInputProps = {
+export type DateTimeInputProps = {
   className?: string;
-  onChange?: (value?: string) => void;
+  onChange?: (value: string) => void;
   defaultValue?: string;
   onFocus?: () => void;
   onBlur?: () => void;
@@ -43,64 +43,65 @@ function removeSeparators(value: string): string {
 
 const EXAMPLES = [addSeparators(DEFAULT_VALUE_STRING)];
 
-const DateTimeInput = React.forwardRef<HTMLInputElement, DateTimeInputProps>(
-  (props: DateTimeInputProps, ref) => {
-    const {
-      className = '',
-      onChange = () => undefined,
-      defaultValue = '',
-      onFocus = () => undefined,
-      onBlur = () => undefined,
-      onSubmit,
-      'data-testid': dataTestId,
-    } = props;
-    const [value, setValue] = useState(
-      defaultValue.length > 0 ? addSeparators(defaultValue) : ''
-    );
-    const [selection, setSelection] = useState<SelectionSegment>();
+export const DateTimeInput = React.forwardRef<
+  HTMLInputElement,
+  DateTimeInputProps
+>((props, ref) => {
+  const {
+    className = '',
+    onChange = () => undefined,
+    defaultValue = '',
+    onFocus = () => undefined,
+    onBlur = () => undefined,
+    onSubmit,
+    'data-testid': dataTestId,
+  } = props;
+  const [value, setValue] = useState(
+    defaultValue.length > 0 ? addSeparators(defaultValue) : ''
+  );
+  const [selection, setSelection] = useState<SelectionSegment>();
 
-    const handleChange = useCallback(
-      (newValue: string): void => {
-        log.debug('handleChange', newValue);
-        setValue(newValue);
-        onChange(fixIncompleteValue(removeSeparators(newValue)));
-      },
-      [onChange]
-    );
+  const handleChange = useCallback(
+    (newValue: string): void => {
+      log.debug('handleChange', newValue);
+      setValue(newValue);
+      onChange(fixIncompleteValue(removeSeparators(newValue)));
+    },
+    [onChange]
+  );
 
-    const handleBlur = useCallback((): void => {
-      const prevValue = removeSeparators(value);
-      const fixedValue = fixIncompleteValue(prevValue);
-      // Update the value displayed in the input
-      // onChange with the fixed value already triggered in handleChange
-      if (fixedValue !== prevValue) {
-        setValue(addSeparators(fixedValue));
-      }
-      onBlur();
-    }, [value, onBlur]);
+  const handleBlur = useCallback((): void => {
+    const prevValue = removeSeparators(value);
+    const fixedValue = fixIncompleteValue(prevValue);
+    // Update the value displayed in the input
+    // onChange with the fixed value already triggered in handleChange
+    if (fixedValue !== prevValue) {
+      setValue(addSeparators(fixedValue));
+    }
+    onBlur();
+  }, [value, onBlur]);
 
-    return (
-      <div className="d-flex flex-row align-items-center">
-        <MaskedInput
-          ref={ref}
-          className={classNames(className)}
-          example={EXAMPLES}
-          getNextSegmentValue={getNextSegmentValue}
-          onChange={handleChange}
-          onSelect={setSelection}
-          onSubmit={onSubmit}
-          pattern={FULL_DATE_PATTERN}
-          placeholder={FULL_DATE_FORMAT}
-          selection={selection}
-          value={value}
-          onFocus={onFocus}
-          onBlur={handleBlur}
-          data-testid={dataTestId}
-        />
-      </div>
-    );
-  }
-);
+  return (
+    <div className="d-flex flex-row align-items-center">
+      <MaskedInput
+        ref={ref}
+        className={classNames(className)}
+        example={EXAMPLES}
+        getNextSegmentValue={getNextSegmentValue}
+        onChange={handleChange}
+        onSelect={setSelection}
+        onSubmit={onSubmit}
+        pattern={FULL_DATE_PATTERN}
+        placeholder={FULL_DATE_FORMAT}
+        selection={selection}
+        value={value}
+        onFocus={onFocus}
+        onBlur={handleBlur}
+        data-testid={dataTestId}
+      />
+    </div>
+  );
+});
 
 DateTimeInput.displayName = 'DateTimeInput';
 

packages/components/src/index.ts

@@ -12,7 +12,7 @@ export { default as Checkbox } from './Checkbox';
 export { default as ComboBox } from './ComboBox';
 export { default as CopyButton } from './CopyButton';
 export { default as CustomTimeSelect } from './CustomTimeSelect';
-export { default as DateTimeInput } from './DateTimeInput';
+export * from './DateTimeInput';
 export { default as DateInput } from './DateInput';
 export { default as DebouncedSearchInput } from './DebouncedSearchInput';
 export * from './dialogs';