Feat disabled prop (#1376)

voyagegroup · Aug 21, 2023 · d2999f4 · d2999f4
1 parent 3d98e32
commit d2999f4
Show file tree

Hide file tree

Showing 12 changed files with 85 additions and 24 deletions.
diff --git a/.changeset/breezy-ravens-provide.md b/.changeset/breezy-ravens-provide.md
@@ -0,0 +1,5 @@
+---
+"ingred-ui": patch
+---
+
+feat disabled prop
diff --git a/src/components/DateField/DateField/DateField.stories.tsx b/src/components/DateField/DateField/DateField.stories.tsx
@@ -31,3 +31,10 @@ export const Japanese: StoryObj<DateFieldProps> = {
     format: "YYYY月MM月DD日",
   },
 };
+
+export const Disable: StoryObj<DateFieldProps> = {
+  ...Example,
+  args: {
+    disabled: true,
+  },
+};
diff --git a/src/components/DateField/DateField/DateField.tsx b/src/components/DateField/DateField/DateField.tsx
@@ -2,17 +2,23 @@ import React, { forwardRef, memo } from "react";
 import { Icon, Input } from "../..";
 import { useDateField } from "../useDateField";
 import { useMergeRefs } from "../../../hooks/useMergeRefs";
-import { CalendarIcon, InputContainer } from "../styled";
+import { CalendarIcon, InputContainer } from "./styled";
 import { DateFieldProps } from "../types";
 
 const DateField = forwardRef<HTMLInputElement, DateFieldProps>(
-  function DateField({ onClick, ...rest }, propRef) {
+  function DateField({ disabled = false, onClick, ...rest }, propRef) {
     const { ref: inputRef, ...props } = useDateField({ ...rest });
     const ref = useMergeRefs<HTMLInputElement>(propRef, inputRef);
 
     return (
-      <InputContainer>
-        <Input ref={ref} readOnly style={{ border: "none" }} {...props} />
+      <InputContainer disabled={disabled}>
+        <Input
+          ref={ref}
+          readOnly
+          disabled={disabled}
+          style={{ border: "none" }}
+          {...props}
+        />
         <CalendarIcon onClick={onClick}>
           <Icon name="date_range" />
         </CalendarIcon>

diff --git a/src/components/DateField/styled.ts → src/components/DateField/DateField/styled.ts b/src/components/DateField/styled.ts → src/components/DateField/DateField/styled.ts
@@ -1,6 +1,6 @@
 import styled from "styled-components";
 
-export const InputContainer = styled.div`
+export const InputContainer = styled.div<{ disabled: boolean }>`
   display: flex;
   align-items: center;
   width: 150px;
@@ -25,13 +25,11 @@ export const InputContainer = styled.div`
   &::-ms-input-placeholder {
     color: ${({ theme }) => theme.palette.text.hint};
   }
-  &:disabled {
-    color: ${({ theme }) => theme.palette.text.disabled};
-    border-color: ${({ theme }) => theme.palette.divider};
-    box-shadow: "none";
-    background-color: ${({ theme }) => theme.palette.gray.light};
-    cursor: not-allowed;
-  }
+  color: ${({ theme, disabled }) =>
+    disabled ? theme.palette.text.disabled : theme.palette.black};
+  background-color: ${({ theme, disabled }) =>
+    disabled ? theme.palette.gray.light : "transparent"};
+  cursor: ${({ disabled }) => (disabled ? "not-allowed" : "text")};
 `;
 
 export const CalendarIcon = styled.button`

diff --git a/src/components/DateField/DateRangeField/DateRangeField.stories.tsx b/src/components/DateField/DateRangeField/DateRangeField.stories.tsx
@@ -37,3 +37,10 @@ export const Japanese: StoryObj<DateRangeFieldProps> = {
     format: "YYYY年MM月DD日",
   },
 };
+
+export const Disable: StoryObj<DateRangeFieldProps> = {
+  ...Example,
+  args: {
+    disabled: true,
+  },
+};
diff --git a/src/components/DateField/DateRangeField/DateRangeField.tsx b/src/components/DateField/DateRangeField/DateRangeField.tsx
@@ -17,13 +17,18 @@ type Range = {
 export type DateRangeFieldProps = {
   date: Range;
   format?: string;
+  /**
+   * 入力を無効にする
+   * @default false
+   */
+  disabled?: boolean;
   onClickCalendarIcon?: () => void;
   onDatesChange?: (date: Range) => void;
 };
 
 const DateRangeField = forwardRef<HTMLInputElement, DateRangeFieldProps>(
   function DateRangeField(
-    { format = "YYYY-MM-DD", onClickCalendarIcon, ...rest },
+    { format = "YYYY-MM-DD", disabled = false, onClickCalendarIcon, ...rest },
     propRef,
   ) {
     const width = useMemo(() => format.length * 12, [format]);
@@ -61,11 +66,12 @@ const DateRangeField = forwardRef<HTMLInputElement, DateRangeFieldProps>(
     const endRef = useMergeRefs<HTMLInputElement>(propRef, endInputRef);
 
     return (
-      <InputContainer>
+      <InputContainer disabled={disabled}>
         <>
           <Input
             ref={startRef}
             readOnly
+            disabled={disabled}
             width={width}
             style={{ border: "none", textAlign: "center" }}
             {...startProps}
@@ -74,6 +80,7 @@ const DateRangeField = forwardRef<HTMLInputElement, DateRangeFieldProps>(
           <Input
             ref={endRef}
             readOnly
+            disabled={disabled}
             width={width}
             style={{ border: "none", textAlign: "center" }}
             {...endProps}

diff --git a/src/components/DateField/DateRangeField/styled.ts b/src/components/DateField/DateRangeField/styled.ts
@@ -1,6 +1,6 @@
 import styled from "styled-components";
 
-export const InputContainer = styled.div`
+export const InputContainer = styled.div<{ disabled: boolean }>`
   display: flex;
   align-items: center;
   width: fit-content;
@@ -25,13 +25,11 @@ export const InputContainer = styled.div`
   &::-ms-input-placeholder {
     color: ${({ theme }) => theme.palette.text.hint};
   }
-  &:disabled {
-    color: ${({ theme }) => theme.palette.text.disabled};
-    border-color: ${({ theme }) => theme.palette.divider};
-    box-shadow: "none";
-    background-color: ${({ theme }) => theme.palette.gray.light};
-    cursor: not-allowed;
-  }
+  color: ${({ theme, disabled }) =>
+    disabled ? theme.palette.text.disabled : theme.palette.black};
+  background-color: ${({ theme, disabled }) =>
+    disabled ? theme.palette.gray.light : "transparent"};
+  cursor: ${({ disabled }) => (disabled ? "not-allowed" : "text")};
 `;
 
 export const CalendarIcon = styled.button`

diff --git a/src/components/DateField/types.ts b/src/components/DateField/types.ts
@@ -11,6 +11,11 @@ export type DateFieldProps = {
    * @default YYYY-MM-DD
    */
   format?: string;
+  /**
+   * 入力を無効にする
+   * @default false
+   */
+  disabled?: boolean;
   /**
    * 日付が変更されたときに呼ばれる関数
    */

diff --git a/src/components/NewDatePicker/NewDatePicker.stories.tsx b/src/components/NewDatePicker/NewDatePicker.stories.tsx
@@ -53,6 +53,13 @@ export const WithActions: StoryObj<NewDatePickerProps> = {
   },
 };
 
+export const Disabled: StoryObj<NewDatePickerProps> = {
+  ...Example,
+  args: {
+    disabled: true,
+  },
+};
+
 export const IsOutsideRange: StoryObj<NewDatePickerProps> = {
   render: (args) => {
     const [date, setDate] = useState(dayjs());

diff --git a/src/components/NewDatePicker/NewDatePicker.tsx b/src/components/NewDatePicker/NewDatePicker.tsx
@@ -15,6 +15,7 @@ export type NewDatePickerProps = {
   date: Dayjs;
   actions?: Action[];
   format?: string;
+  disabled?: boolean;
   /**
    * 選択可能なカレンダーの領域を制限する
    * true が返る場合は、選択不可となる
@@ -29,7 +30,14 @@ export type NewDatePickerProps = {
  */
 export const NewDatePicker = forwardRef<HTMLDivElement, NewDatePickerProps>(
   function DatePicker(
-    { date, format = "YYYY-MM-DD", isOutsideRange, actions, onDateChange },
+    {
+      date,
+      format = "YYYY-MM-DD",
+      disabled = false,
+      isOutsideRange,
+      actions,
+      onDateChange,
+    },
     ref,
   ) {
     const [open, setOpen] = useState(false);
@@ -49,8 +57,9 @@ export const NewDatePicker = forwardRef<HTMLDivElement, NewDatePickerProps>(
     ]);
 
     const handleClickCalendarIcon = useCallback(() => {
+      if (disabled) return;
       setOpen((prev) => !prev);
-    }, []);
+    }, [disabled]);
 
     const handleClickDate = useCallback(
       (date: Dayjs) => {
@@ -70,6 +79,7 @@ export const NewDatePicker = forwardRef<HTMLDivElement, NewDatePickerProps>(
           <DateField
             date={date}
             format={format}
+            disabled={disabled}
             onClick={handleClickCalendarIcon}
             onDateChange={onDateChange}
           />

diff --git a/src/components/NewDateRangePicker/NewDateRangePicker.stories.tsx b/src/components/NewDateRangePicker/NewDateRangePicker.stories.tsx
@@ -79,6 +79,13 @@ export const WithActions: StoryObj<NewDateRangePickerProps> = {
   },
 };
 
+export const Disabled: StoryObj<NewDateRangePickerProps> = {
+  ...Example,
+  args: {
+    disabled: true,
+  },
+};
+
 export const IsOutsideRange: StoryObj<NewDateRangePickerProps> = {
   render: (args) => {
     const [date, setDate] = useState({

diff --git a/src/components/NewDateRangePicker/NewDateRangePicker.tsx b/src/components/NewDateRangePicker/NewDateRangePicker.tsx
@@ -21,6 +21,7 @@ export type NewDateRangePickerProps = {
   startDate: Dayjs;
   endDate: Dayjs;
   actions?: Action[];
+  disabled?: boolean;
   /**
    * 選択可能なカレンダーの領域を制限する
    * true が返る場合は、選択不可となる
@@ -39,6 +40,7 @@ export const DateRangePicker = forwardRef<
 >(function DateRangePicker({
   startDate,
   endDate,
+  disabled = false,
   isOutsideRange = () => false,
   actions,
   onDatesChange,
@@ -60,6 +62,7 @@ export const DateRangePicker = forwardRef<
   ]);
 
   const handleClickCalendarIcon = () => {
+    if (disabled) return;
     setOpen((prev) => !prev);
   };
 
@@ -85,6 +88,7 @@ export const DateRangePicker = forwardRef<
             startDate,
             endDate,
           }}
+          disabled={disabled}
           onDatesChange={onDatesChange}
           onClickCalendarIcon={handleClickCalendarIcon}
         />