Merge pull request #1419 from Wizleap-Inc/feat/event-handlers-optional

feat: 必須になっていたイベントハンドラを任意に修正
Wizleap-Inc · Dec 26, 2024 · 9928a22 · 9928a22
2 parents 26c0d64 + 5ceb7c1
commit 9928a22
Show file tree

Hide file tree

Showing 24 changed files with 64 additions and 59 deletions.
diff --git a/.changeset/four-cheetahs-shave.md b/.changeset/four-cheetahs-shave.md
@@ -0,0 +1,5 @@
+---
+"@wizleap-inc/wiz-ui-react": minor
+---
+
+イベントハンドラを任意に修正
diff --git a/packages/wiz-ui-react/src/components/base/accordion/components/accordion.tsx b/packages/wiz-ui-react/src/components/base/accordion/components/accordion.tsx
@@ -20,7 +20,7 @@ type Props = BaseProps & {
   bgColor?: ColorKeys;
   fontColor?: ColorKeys;
   children?: ReactNode;
-  onToggle: () => void;
+  onToggle?: () => void;
 };
 
 const Accordion: FC<Props> = ({
@@ -53,7 +53,7 @@ const Accordion: FC<Props> = ({
         onClick={(e) => {
           e.preventDefault();
           if (!isAnimating) {
-            onToggle();
+            onToggle?.();
           }
         }}
       >

diff --git a/packages/wiz-ui-react/src/components/base/dialog/components/dialog.tsx b/packages/wiz-ui-react/src/components/base/dialog/components/dialog.tsx
@@ -14,7 +14,7 @@ type Props = BaseProps & {
   children?: ReactNode;
   align?: "start" | "center" | "end";
   hideClose?: boolean;
-  onClose: () => void;
+  onClose?: () => void;
 };
 
 const Dialog: FC<Props> = ({
@@ -68,7 +68,7 @@ const Dialog: FC<Props> = ({
       <WizIconButton
         icon={WizIClose}
         variant="transparent"
-        onClick={() => onClose()}
+        onClick={() => onClose?.()}
       />
     ),
     [onClose]
@@ -87,7 +87,7 @@ const Dialog: FC<Props> = ({
         className={styles.dialogMaskStyle}
         onClick={(e) => {
           if (e.target === e.currentTarget) {
-            onClose();
+            onClose?.();
           }
         }}
       >

diff --git a/packages/wiz-ui-react/src/components/base/dropdown/components/dropdown.tsx b/packages/wiz-ui-react/src/components/base/dropdown/components/dropdown.tsx
@@ -12,7 +12,7 @@ type Props = BaseProps & {
   skeleton?: boolean;
   gap?: ComponentProps<typeof WizPopup>["gap"];
   isDirectionFixed?: boolean;
-  onClose: () => void;
+  onClose?: () => void;
 };
 
 const Dropdown: FC<Props> = ({
@@ -43,7 +43,7 @@ const Dropdown: FC<Props> = ({
       </div>
       <WizPopup
         isOpen={isOpen}
-        onClose={onClose}
+        onClose={() => onClose?.()}
         anchorElement={anchorRef}
         gap={gap}
         isDirectionFixed={isDirectionFixed}

diff --git a/packages/wiz-ui-react/src/components/base/full-modal-view/components/full-modal-view.tsx b/packages/wiz-ui-react/src/components/base/full-modal-view/components/full-modal-view.tsx
@@ -22,7 +22,7 @@ type Props = {
   title: string;
   header?: ReactNode;
   children: ReactNode;
-  onClose: () => void;
+  onClose?: () => void;
 };
 
 const FullModalView: FC<Props> = ({
@@ -100,7 +100,7 @@ const FullModalView: FC<Props> = ({
               <WizHStack gap="md">
                 {header}
                 <WizIconButton
-                  onClick={onClose}
+                  onClick={() => onClose?.()}
                   icon={WizIClose}
                   variant="transparent"
                   aria-label={ARIA_LABELS.FULL_MODAL_VIEW.CLOSE}

diff --git a/packages/wiz-ui-react/src/components/base/header/components/header.tsx b/packages/wiz-ui-react/src/components/base/header/components/header.tsx
@@ -21,7 +21,7 @@ type Props = BaseProps & {
   sticky?: boolean;
   leftContent?: ReactNode;
   rightContent?: ReactNode;
-  onToggle: () => void;
+  onToggle?: () => void;
 };
 
 const Header: FC<Props> = ({
@@ -45,7 +45,7 @@ const Header: FC<Props> = ({
             icon={WizIMenu}
             size="lg"
             variant="transparent"
-            onClick={onToggle}
+            onClick={() => onToggle?.()}
           />
           {leftContent}
         </WizHStack>

diff --git a/packages/wiz-ui-react/src/components/base/information-panel/components/information-panel.tsx b/packages/wiz-ui-react/src/components/base/information-panel/components/information-panel.tsx
@@ -15,7 +15,7 @@ type Props = BaseProps & {
   messages: (TextMessage | ReactNode)[];
   width?: string;
   border?: boolean;
-  onClose: () => void;
+  onClose?: () => void;
 };
 
 const isTextMessage = (
@@ -65,7 +65,7 @@ const InformationPanel: FC<Props> = ({
         <WizIconButton
           variant="transparent"
           icon={WizIClose}
-          onClick={onClose}
+          onClick={() => onClose?.()}
         />
       </WizVStack>
     </div>

diff --git a/packages/wiz-ui-react/src/components/base/inputs/date-picker/components/date-picker.tsx b/packages/wiz-ui-react/src/components/base/inputs/date-picker/components/date-picker.tsx
@@ -40,7 +40,7 @@ type Props = BaseProps & {
   error?: boolean;
   isDirectionFixed?: boolean;
   _today?: Date;
-  onChangeDate: (selectedValue: Date | null) => void;
+  onChangeDate?: (selectedValue: Date | null) => void;
   /**
    * @description 日付が無効かどうかを判定する関数です。無効な日付はクリック不可になります。
    * @param date
@@ -129,7 +129,7 @@ const DatePicker: FC<Props> = ({
     e.stopPropagation();
     setTempDate(null);
     setCurrentMonth(new Date());
-    onChangeDate(null);
+    onChangeDate?.(null);
     setIsOpen(false);
   };
 
@@ -140,7 +140,7 @@ const DatePicker: FC<Props> = ({
   };
 
   const onSubmit = () => {
-    onChangeDate(tempDate);
+    onChangeDate?.(tempDate);
     setIsOpen(false);
   };
 

diff --git a/...iz-ui-react/src/components/base/inputs/date-range-picker/components/date-range-picker.tsx b/...iz-ui-react/src/components/base/inputs/date-range-picker/components/date-range-picker.tsx
@@ -44,7 +44,7 @@ type Props = BaseProps & {
   isDirectionFixed?: boolean;
   error?: boolean;
   _today?: Date;
-  onChangeDateRange: (dateRange: DateRange) => void;
+  onChangeDateRange?: (dateRange: DateRange) => void;
   onChangeSelectBoxValue?: (value: string) => void;
   disabledDate?: (date: Date) => boolean;
   /**
@@ -205,7 +205,7 @@ const DateRangePicker: FC<Props> = ({
     e.stopPropagation();
     initiaizeRightCalendarDate();
     setTempDateRange({ start: null, end: null });
-    onChangeDateRange({ start: null, end: null });
+    onChangeDateRange?.({ start: null, end: null });
     setIsOpen(false);
   };
 
@@ -216,7 +216,7 @@ const DateRangePicker: FC<Props> = ({
   };
 
   const onSubmit = () => {
-    onChangeDateRange(tempDateRange);
+    onChangeDateRange?.(tempDateRange);
     setIsOpen(false);
   };
 

diff --git a/packages/wiz-ui-react/src/components/base/inputs/password/components/password-input.tsx b/packages/wiz-ui-react/src/components/base/inputs/password/components/password-input.tsx
@@ -23,7 +23,7 @@ type Props = BaseProps & {
   width?: string;
   autocomplete?: Extract<AutoCompleteKeys, "currentPassword" | "newPassword">;
   error?: boolean;
-  onChange: (value: string) => void;
+  onChange?: (value: string) => void;
 } & Omit<PrivateBaseInputProps, "onChange">;
 
 const PasswordInput = forwardRef<HTMLInputElement, Props>(
@@ -70,7 +70,7 @@ const PasswordInput = forwardRef<HTMLInputElement, Props>(
           type={!disabled && isPasswordVisible ? "text" : "password"}
           autoComplete={autocomplete}
           spaceType="right"
-          onChange={(e) => onChange(e.target.value)}
+          onChange={(e) => onChange?.(e.target.value)}
           {...props}
         />
         <button

diff --git a/packages/wiz-ui-react/src/components/base/inputs/search-input/components/search-input.tsx b/packages/wiz-ui-react/src/components/base/inputs/search-input/components/search-input.tsx
@@ -32,7 +32,7 @@ type Props<T extends CheckboxOption> = BaseProps & {
   icon?: TIcon;
   showSelectedItem?: boolean;
   showParentLabel?: boolean;
-  onChangeValues: (values: T[]) => void;
+  onChangeValues?: (values: T[]) => void;
 };
 
 function filterOptions<T extends CheckboxOption>(
@@ -115,7 +115,7 @@ const SearchInput = <T extends CheckboxOption>({
 
   const onClear = (value: T) => {
     const newValues = values.filter((v) => v !== value);
-    onChangeValues(newValues);
+    onChangeValues?.(newValues);
   };
 
   const handleKeyDown = (value: T): KeyboardEventHandler => {
@@ -129,7 +129,7 @@ const SearchInput = <T extends CheckboxOption>({
   const displayingSelectedItems = showSelectedItem && values.length > 0;
 
   const handleClickPanelItem = (value: T[]) => {
-    onChangeValues(value);
+    onChangeValues?.(value);
     setFilteringText("");
   };
 

diff --git a/...es/wiz-ui-react/src/components/base/inputs/search-selector/components/search-selector.tsx b/...es/wiz-ui-react/src/components/base/inputs/search-selector/components/search-selector.tsx
@@ -50,7 +50,7 @@ type Props<T> = BaseProps & {
    * @default 0.75
    */
   threshold?: number;
-  onChangeValues: (values: T[]) => void;
+  onChangeValues?: (values: T[]) => void;
   onCreate?: (label: string) => void;
   onInputSearchText?: (text: string) => void;
 };
@@ -119,10 +119,10 @@ const SearchSelector = <T,>({
             onClick: () => {
               setSearchText("");
               if (multiSelectable) {
-                onChangeValues([...values, option.value]);
+                onChangeValues?.([...values, option.value]);
                 searchTextboxRef.current?.focus();
               } else {
-                onChangeValues([option.value]);
+                onChangeValues?.([option.value]);
                 setIsPopupOpen(false);
               }
             },
@@ -164,7 +164,7 @@ const SearchSelector = <T,>({
   ]);
 
   const unselectOption = (option: SearchSelectorOption<T>) => {
-    onChangeValues(values.filter((value) => value !== option.value));
+    onChangeValues?.(values.filter((value) => value !== option.value));
     setTimeout(() => {
       // input 要素が描画されるのを待ってフォーカス
       searchTextboxRef.current?.focus();

diff --git a/packages/wiz-ui-react/src/components/base/inputs/selectbox/components/selectbox.tsx b/packages/wiz-ui-react/src/components/base/inputs/selectbox/components/selectbox.tsx
@@ -39,7 +39,7 @@ type Props<T> = BaseProps & {
   isDirectionFixed?: boolean;
   showExLabel?: boolean;
   dropdownMaxHeight?: string;
-  onChange: (value: T | null) => void;
+  onChange?: (value: T | null) => void;
 };
 
 const SelectBox = <T,>({
@@ -81,7 +81,7 @@ const SelectBox = <T,>({
 
   const handleClickOption = (option: SelectBoxOption<T>) => {
     setIsOpen(false);
-    onChange(option.value);
+    onChange?.(option.value);
   };
 
   const getInputBorderStyleKey = () => {

diff --git a/packages/wiz-ui-react/src/components/base/inputs/time-picker/components/time-picker.tsx b/packages/wiz-ui-react/src/components/base/inputs/time-picker/components/time-picker.tsx
@@ -25,7 +25,7 @@ type Props = BaseProps & {
   disabled?: boolean;
   isDirectionFixed?: boolean;
   error?: boolean;
-  onChange: (time: Time | null) => void;
+  onChange?: (time: Time | null) => void;
 };
 
 const TimePicker: FC<Props> = ({
@@ -98,7 +98,7 @@ const TimePicker: FC<Props> = ({
             className={styles.cancelButtonStyle}
             disabled={!cancelButtonVisible}
             aria-label={ARIA_LABELS.TIME_PICKER_CANCEL}
-            onClick={() => onChange(null)}
+            onClick={() => onChange?.(null)}
             onFocus={() => setIsCancelButtonFocused(true)}
             onBlur={() => setIsCancelButtonFocused(false)}
           >
@@ -153,7 +153,7 @@ const TimePicker: FC<Props> = ({
                       ],
                     ])}
                     onClick={() =>
-                      onChange({ hour: option, minute: time?.minute || 0 })
+                      onChange?.({ hour: option, minute: time?.minute || 0 })
                     }
                   >
                     {option}
@@ -201,7 +201,7 @@ const TimePicker: FC<Props> = ({
                       ],
                     ])}
                     onClick={() =>
-                      onChange({ hour: time?.hour || 0, minute: option })
+                      onChange?.({ hour: time?.hour || 0, minute: option })
                     }
                   >
                     {String(option).padStart(2, "0")}

diff --git a/packages/wiz-ui-react/src/components/base/inputs/toggle-switch/components/toggle-switch.tsx b/packages/wiz-ui-react/src/components/base/inputs/toggle-switch/components/toggle-switch.tsx
@@ -8,7 +8,7 @@ type Props = BaseProps & {
   value: boolean;
   ariaLabel: string;
   disabled?: boolean;
-  setValue: (value: boolean) => void;
+  setValue?: (value: boolean) => void;
 };
 
 const ToggleSwitch: FC<Props> = ({
@@ -29,7 +29,7 @@ const ToggleSwitch: FC<Props> = ({
         disabled={disabled}
         aria-label={ariaLabel}
         checked={value}
-        onChange={(e) => props.setValue(e.target.checked)}
+        onChange={(e) => props.setValue?.(e.target.checked)}
       />
       <span
         className={clsx(

diff --git a/packages/wiz-ui-react/src/components/base/pagination/components/pagination.tsx b/packages/wiz-ui-react/src/components/base/pagination/components/pagination.tsx
@@ -11,7 +11,7 @@ import { DivButton } from "./private-div-button";
 type Props = BaseProps & {
   currentPage: number;
   length: number;
-  onChangePage: (page: number) => void;
+  onChangePage?: (page: number) => void;
   /**
    * 表示ページ数を制御します。(`>=0`)
    * @default 2
@@ -30,9 +30,9 @@ const Pagination = ({
   const sideItemLength = Math.max(0, sideLength);
   const maxItemLength = 2 * sideItemLength + 1;
   const handleChangePage = (index: number) => {
-    if (index < 1) return onChangePage(1);
-    if (index > length) return onChangePage(length);
-    onChangePage(index);
+    if (index < 1) return onChangePage?.(1);
+    if (index > length) return onChangePage?.(length);
+    onChangePage?.(index);
   };
   const getActuallyDisplayingPages = () => {
     if (length < maxItemLength) {

diff --git a/packages/wiz-ui-react/src/components/base/popup/components/popup.tsx b/packages/wiz-ui-react/src/components/base/popup/components/popup.tsx
@@ -29,7 +29,7 @@ import { getPopupPosition } from "../utils";
 
 type Props = BaseProps & {
   isOpen: boolean;
-  onClose: () => void;
+  onClose?: () => void;
   anchorElement: RefObject<HTMLElement>;
   direction?: DirectionKey;
   gap?: Exclude<SpacingKeys, "at">;
@@ -79,7 +79,7 @@ const Popup: FC<Props> = ({
     left?: number;
   }>({});
 
-  useClickOutside([popupRef, anchorElement], () => closeOnBlur && onClose());
+  useClickOutside([popupRef, anchorElement], () => closeOnBlur && onClose?.());
 
   const isPopupFixed = hasFixedOrStickyParent(anchorElement.current);
 

diff --git a/packages/wiz-ui-react/src/components/base/show-more-less/components/show-more-less.tsx b/packages/wiz-ui-react/src/components/base/show-more-less/components/show-more-less.tsx
@@ -25,7 +25,7 @@ type Props = BaseProps & {
   closeMessage?: string;
   width?: string;
   variant?: "pc" | "mobile";
-  onToggle: () => void;
+  onToggle?: () => void;
   children: ReactNode;
 };
 
@@ -45,7 +45,7 @@ const ShowMoreLess: FC<Props> = ({
 
   const handleClick: MouseEventHandler = (event) => {
     event.preventDefault();
-    onToggle();
+    onToggle?.();
   };
 
   useEffect(() => {