Merge branch 'fix/date_picker_hover' into develop

illacloud · Feb 18, 2024 · 2313c59 · 2313c59
2 parents 06c3957 + c63d175
commit 2313c59
Show file tree

Hide file tree

Showing 11 changed files with 7 additions and 143 deletions.
diff --git a/packages/date-picker/src/panels/basic-body-section.tsx b/packages/date-picker/src/panels/basic-body-section.tsx
@@ -28,8 +28,6 @@ export const BasicRowsSection: FC<BasicRowProps> = (props) => {
     dateRender,
     isSameTime,
     onSelectDate,
-    onMouseEnterCell,
-    onMouseLeaveCell,
   } = props
 
   return (
@@ -63,8 +61,6 @@ export const BasicRowsSection: FC<BasicRowProps> = (props) => {
                   key={colIndex}
                   css={applyCellStyle(cellStatus)}
                   onClick={onClickHandler}
-                  onMouseEnter={() => onMouseEnterCell?.(col.time!, disabled)}
-                  onMouseLeave={() => onMouseLeaveCell?.(col.time!, disabled)}
                 >
                   {dateRender ? (
                     dateRender(col.time)
@@ -115,8 +111,6 @@ export const BasicBodySection: FC<BasicPanelBodyProps> = (props) => {
     disabledDate,
     onSelectDate,
     dateRender,
-    onMouseEnterCell,
-    onMouseLeaveCell,
     rows,
     showWeekList,
     isSameTime,
@@ -144,9 +138,7 @@ export const BasicBodySection: FC<BasicPanelBodyProps> = (props) => {
           disabledDate={disabledDate}
           dateRender={dateRender}
           isSameTime={isSameTime}
-          onMouseEnterCell={onMouseEnterCell}
           onSelectDate={onSelectDate}
-          onMouseLeaveCell={onMouseLeaveCell}
           format={format}
         />
       </div>

diff --git a/packages/date-picker/src/panels/date/index.tsx b/packages/date-picker/src/panels/date/index.tsx
@@ -44,8 +44,6 @@ export const DatePickerPanel: FC<DatePickerPanelProps> = (props) => {
     pageShowDate,
     showTime,
     timepickerProps,
-    onMouseEnterCell,
-    onMouseLeaveCell,
     dateRender,
     disabledDate,
     disabledTime,
@@ -189,8 +187,6 @@ export const DatePickerPanel: FC<DatePickerPanelProps> = (props) => {
           rows={rows}
           isSameTime={innerIsSameTime}
           onSelectDate={onSelect}
-          onMouseEnterCell={onMouseEnterCell}
-          onMouseLeaveCell={onMouseLeaveCell}
           dateRender={dateRender}
           disabledDate={disabledDate}
           mode={isWeek ? "week" : "date"}

diff --git a/packages/date-picker/src/panels/date/interface.ts b/packages/date-picker/src/panels/date/interface.ts
@@ -9,8 +9,6 @@ export interface DatePickerPanelProps
   extends SingleDatePickerProps,
     PrivateCType {
   onTimePickerSelect?: (timeString: string, time: Dayjs) => void
-  onMouseEnterCell?: (time: Dayjs, disabled: boolean) => void
-  onMouseLeaveCell?: (time: Dayjs, disabled: boolean) => void
   pageShowDate?: Dayjs
   isRangePicker?: boolean
   rangeValues?: Dayjs[]

diff --git a/packages/date-picker/src/panels/interface.ts b/packages/date-picker/src/panels/interface.ts
@@ -13,8 +13,6 @@ export interface BasicPanelBodyProps {
   showWeekList?: boolean
   onSelectDate?: (timeString: string, time: Dayjs) => void
   disabledDate?: (current: Dayjs) => boolean
-  onMouseEnterCell?: (date: Dayjs, disabled: boolean) => void
-  onMouseLeaveCell?: (date: Dayjs, disabled: boolean) => void
   dateRender?: (currentDate: Dayjs) => ReactNode
   rows?: RowType[][]
   value?: DatePickerValue
@@ -34,8 +32,6 @@ export interface BasicRowProps
     | "rows"
     | "dateRender"
     | "onSelectDate"
-    | "onMouseEnterCell"
-    | "onMouseLeaveCell"
     | "disabledDate"
     | "originMode"
     | "isSameTime"

diff --git a/packages/date-picker/src/range-date-picker.tsx b/packages/date-picker/src/range-date-picker.tsx
@@ -113,7 +113,6 @@ export const RangeDatePicker = forwardRef<HTMLDivElement, RangeDatePickerProps>(
     const nextFocusedInputIndex = 1 ^ focusedInputIndex
 
     const [inputValue, setInputValue] = useState<string | undefined>()
-    const [hoverPlaceholderValue, setHoverPlaceholderValue] = useState<string>()
     //     isHalfAvailable: boolean,
     //         nextFocusedInputIndex: number,
     //         format: string,
@@ -322,7 +321,6 @@ export const RangeDatePicker = forwardRef<HTMLDivElement, RangeDatePickerProps>(
     }, [mode])
 
     useEffect(() => {
-      setHoverPlaceholderValue(undefined)
       setInputValue(undefined)
 
       if (mergedPopupVisible) {
@@ -568,7 +566,6 @@ export const RangeDatePicker = forwardRef<HTMLDivElement, RangeDatePickerProps>(
       onSelectValueShow(sortedValueShow)
       setFixedPageShowDates(sortedValueShow)
       setInputValue(undefined)
-      setHoverPlaceholderValue(undefined)
 
       const newSelectedLength = getAvailableDayjsLength(newValueShow)
 
@@ -628,34 +625,6 @@ export const RangeDatePicker = forwardRef<HTMLDivElement, RangeDatePickerProps>(
       onSelectValueShow(newValueShow)
     }
 
-    function onMouseEnterCell(date: Dayjs, disabled: boolean) {
-      const newValueShowHover = [...(panelValue || [])]
-      const needShowHover = resetRange
-        ? selectedLength === 1
-        : selectedLength !== 0
-      if (!disabled && needShowHover && !outOfRange(date)) {
-        newValueShowHover[focusedInputIndex] = getValueWithTime(
-          date,
-          timeValues[focusedInputIndex],
-        )
-        setValueShowHover(newValueShowHover)
-        setInputValue(undefined)
-      }
-      if (!disabled) {
-        const placeHolderValue = showTime
-          ? getValueWithTime(date, timeValues[focusedInputIndex])
-          : date
-        setHoverPlaceholderValue(
-          placeHolderValue.locale("en-us").format(format),
-        )
-      }
-    }
-
-    function onMouseLeaveCell() {
-      setValueShowHover(undefined)
-      setHoverPlaceholderValue(undefined)
-    }
-
     function changePageShowDates(
       type: "prev" | "next",
       unit: UnitType,
@@ -737,8 +706,6 @@ export const RangeDatePicker = forwardRef<HTMLDivElement, RangeDatePickerProps>(
                 value={panelValue}
                 format={format}
                 onSelectPanel={onSelectPanel}
-                onMouseEnterCell={onMouseEnterCell}
-                onMouseLeaveCell={onMouseLeaveCell}
                 disabledDate={(current) => isDisabledDate(current)}
                 disabledTime={disabledTime}
                 mode={mode}
@@ -781,10 +748,9 @@ export const RangeDatePicker = forwardRef<HTMLDivElement, RangeDatePickerProps>(
               popupVisible={mergedPopupVisible}
               value={valueShow || mergedValue}
               onChange={onChangeInput}
-              inputValue={hoverPlaceholderValue || inputValue}
+              inputValue={inputValue}
               changeFocusedInputIndex={changeFocusedInputIndex}
               focusedInputIndex={focusedInputIndex}
-              isPlaceholder={!!hoverPlaceholderValue}
               separator={separator}
               format={format}
               disabled={disabled}

diff --git a/packages/date-picker/src/signle-date-picker.tsx b/packages/date-picker/src/signle-date-picker.tsx
@@ -89,7 +89,6 @@ export const SingleDatePicker = forwardRef<
   const [popupVisible, setPopupVisible] = useState<boolean | undefined>(
     !!props.popupVisible,
   )
-  const [hoverPlaceholderValue, setHoverPlaceholderValue] = useState<string>()
   const mergedPopupVisible =
     "popupVisible" in props ? props.popupVisible : popupVisible
   const mergedValue =
@@ -159,7 +158,6 @@ export const SingleDatePicker = forwardRef<
 
   useEffect(() => {
     setInputValue(undefined)
-    setHoverPlaceholderValue(undefined)
 
     if (mergedPopupVisible) {
       setPageShowDate(defaultPageShowDate)
@@ -220,7 +218,6 @@ export const SingleDatePicker = forwardRef<
 
   function onHandleSelect(_: string | undefined, date?: Dayjs, now?: boolean) {
     setInputValue(undefined)
-    setHoverPlaceholderValue(undefined)
     if (showTime) {
       const newTime = now ? date : getValueWithTime(date as Dayjs, timeValue)
       setValueShow(newTime)
@@ -373,21 +370,6 @@ export const SingleDatePicker = forwardRef<
     onHandleSelect(finalValue, now, true)
   }
 
-  function onMouseEnterCell(value: Dayjs, disabled: boolean) {
-    if (!disabled) {
-      const finalValue =
-        typeof format === "function"
-          ? format(value as Dayjs)
-          : value?.format(format)
-
-      setHoverPlaceholderValue(finalValue)
-    }
-  }
-
-  function onMouseLeaveCell() {
-    setHoverPlaceholderValue(undefined)
-  }
-
   const suffixIcon =
     inputSuffix === null ? null : inputSuffix || <CalendarIcon />
 
@@ -421,8 +403,6 @@ export const SingleDatePicker = forwardRef<
               isTimePanel={false}
               panelMode={panelMode}
               setPanelMode={setPanelMode}
-              onMouseEnterCell={onMouseEnterCell}
-              onMouseLeaveCell={onMouseLeaveCell}
             />
             {shouldShowFooter && (
               <BasicFooterSection
@@ -453,9 +433,8 @@ export const SingleDatePicker = forwardRef<
             placeholder={placeholder as string | undefined}
             popupVisible={mergedPopupVisible}
             value={valueShow || mergedValue}
-            inputValue={hoverPlaceholderValue || inputValue}
+            inputValue={inputValue}
             onChange={onChangeInput}
-            isPlaceholder={!!hoverPlaceholderValue}
             format={realFormat}
             disabled={disabled}
             error={error}

diff --git a/packages/date-picker/src/signle-year-picker.tsx b/packages/date-picker/src/signle-year-picker.tsx
@@ -77,7 +77,6 @@ export const SingleYearPicker = forwardRef<
   const [popupVisible, setPopupVisible] = useState<boolean | undefined>(
     !!props.popupVisible,
   )
-  const [hoverPlaceholderValue, setHoverPlaceholderValue] = useState<string>()
   const mergedPopupVisible =
     "popupVisible" in props ? props.popupVisible : popupVisible
   const mergedValue =
@@ -132,7 +131,6 @@ export const SingleYearPicker = forwardRef<
 
   useEffect(() => {
     setInputValue(undefined)
-    setHoverPlaceholderValue(undefined)
 
     if (mergedPopupVisible) {
       setPageShowDate(defaultPageShowDate)
@@ -240,19 +238,8 @@ export const SingleYearPicker = forwardRef<
     }
   }
 
-  function onMouseEnterCell(value: Dayjs, disabled: boolean) {
-    if (!disabled) {
-      setHoverPlaceholderValue(value.format(format))
-    }
-  }
-
-  function onMouseLeaveCell() {
-    setHoverPlaceholderValue(undefined)
-  }
-
   function onHandleSelect(_: string | undefined, date?: Dayjs) {
     setInputValue(undefined)
-    setHoverPlaceholderValue(undefined)
     const localTime = getLocaleDayjsValue(
       toLocal(date as Dayjs, utcOffset, timezone).locale("en-us"),
       "en-us",
@@ -278,8 +265,6 @@ export const SingleYearPicker = forwardRef<
             <YearPickerPanel
               {...props}
               {...getHeaderOperations()}
-              onMouseEnterCell={onMouseEnterCell}
-              onMouseLeaveCell={onMouseLeaveCell}
               pageShowDate={mergedPageShowDate}
               format={format}
               onSelect={onHandleSelect}
@@ -310,9 +295,8 @@ export const SingleYearPicker = forwardRef<
             placeholder={placeholder as string | undefined}
             popupVisible={mergedPopupVisible}
             value={valueShow || mergedValue}
-            inputValue={hoverPlaceholderValue || inputValue}
+            inputValue={inputValue}
             onChange={onChangeInput}
-            isPlaceholder={!!hoverPlaceholderValue}
             format={realFormat}
             disabled={disabled}
             error={error}

diff --git a/packages/date-picker/src/single-month-picker.tsx b/packages/date-picker/src/single-month-picker.tsx
@@ -82,7 +82,6 @@ export const SingleMonthPicker = forwardRef<
   const [popupVisible, setPopupVisible] = useState<boolean | undefined>(
     !!props.popupVisible,
   )
-  const [hoverPlaceholderValue, setHoverPlaceholderValue] = useState<string>()
   const mergedPopupVisible =
     "popupVisible" in props ? props.popupVisible : popupVisible
   const mergedValue =
@@ -140,7 +139,6 @@ export const SingleMonthPicker = forwardRef<
 
   useEffect(() => {
     setInputValue(undefined)
-    setHoverPlaceholderValue(undefined)
 
     if (mergedPopupVisible) {
       setPageShowDate(defaultPageShowDate)
@@ -196,7 +194,6 @@ export const SingleMonthPicker = forwardRef<
 
   function onHandleSelect(_: string | undefined, date?: Dayjs) {
     setInputValue(undefined)
-    setHoverPlaceholderValue(undefined)
     const localTime = getLocaleDayjsValue(
       toLocal(date as Dayjs, utcOffset, timezone).locale("en-us"),
       "en-us",
@@ -295,16 +292,6 @@ export const SingleMonthPicker = forwardRef<
     onHandleSelect(now?.format(format), now)
   }
 
-  function onMouseEnterCell(value: Dayjs, disabled: boolean) {
-    if (!disabled) {
-      setHoverPlaceholderValue(value.format(format))
-    }
-  }
-
-  function onMouseLeaveCell() {
-    setHoverPlaceholderValue(undefined)
-  }
-
   const suffixIcon =
     inputSuffix === null ? null : inputSuffix || <CalendarIcon />
 
@@ -330,8 +317,6 @@ export const SingleMonthPicker = forwardRef<
               }}
               panelMode={panelMode}
               setPanelMode={setPanelMode}
-              onMouseEnterCell={onMouseEnterCell}
-              onMouseLeaveCell={onMouseLeaveCell}
             />
             {!!extra && (
               <BasicFooterSection
@@ -360,9 +345,8 @@ export const SingleMonthPicker = forwardRef<
             placeholder={placeholder as string | undefined}
             popupVisible={mergedPopupVisible}
             value={valueShow || mergedValue}
-            inputValue={hoverPlaceholderValue || inputValue}
+            inputValue={inputValue}
             onChange={onChangeInput}
-            isPlaceholder={!!hoverPlaceholderValue}
             format={realFormat}
             disabled={disabled}
             error={error}