Fix width DateField (#1422)

voyagegroup · Sep 21, 2023 · e37770b · e37770b
1 parent 4cf84df
commit e37770b
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 4 deletions.
diff --git a/.changeset/curly-rice-push.md b/.changeset/curly-rice-push.md
@@ -0,0 +1,5 @@
+---
+"ingred-ui": patch
+---
+
+fix width DateField
diff --git a/src/components/DateField/DateField/DateField.tsx b/src/components/DateField/DateField/DateField.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef, memo } from "react";
+import React, { forwardRef, memo, useMemo } from "react";
 import { ErrorText, Icon, Input, Spacer } from "../..";
 import { useDateField } from "../useDateField";
 import { useMergeRefs } from "../../../hooks/useMergeRefs";
@@ -38,11 +38,12 @@ export type DateFieldProps = {
 
 const DateField = forwardRef<HTMLInputElement, DateFieldProps>(
   function DateField(
-    { errorText, disabled = false, onClick, ...rest },
+    { errorText, format = "YYYY-MM-DD", disabled = false, onClick, ...rest },
     propRef,
   ) {
     const theme = useTheme();
-    const { ref: inputRef, ...props } = useDateField({ ...rest });
+    const width = useMemo(() => format.length * 10, [format]);
+    const { ref: inputRef, ...props } = useDateField({ format, ...rest });
     const ref = useMergeRefs<HTMLInputElement>(propRef, inputRef);
 
     return (
@@ -54,6 +55,7 @@ const DateField = forwardRef<HTMLInputElement, DateFieldProps>(
             style={{ border: "none" }}
             error={!!errorText}
             disabled={disabled}
+            width={width}
             {...props}
           />
           <CalendarIcon disabled={disabled} onClick={onClick}>

diff --git a/src/components/DateField/DateField/styled.ts b/src/components/DateField/DateField/styled.ts
@@ -6,7 +6,7 @@ export const InputContainer = styled.div<{
 }>`
   display: flex;
   align-items: center;
-  width: 150px;
+  width: fit-content;
   /* MEMO: for calendar icon */
   padding: 0 8px 0 0;
   border: 0;