feat: improve the interaction design of the DatetimePicker component (#…

…2674)

* feat: improve the interaction design of the DatetimePicker component

* fix: the Calendar component does not navigate to the correct panel when a value is provided

packages/neuron-ui/src/components/Send/index.tsx

@@ -208,6 +208,7 @@ const Send = () => {
         <div className={styles.datetimePicker}>
           <div className={styles.datetimeDialog}>
             <DatetimePicker
+              confirmText={(time, display) => `${t('send.release-on')}${time == null ? '' : ` ${display}`}`}
               onConfirm={(time: number) => {
                 updateTransactionOutput('date')(locktimeIndex)(`${time}`)
                 setLocktimeIndex(-1)

packages/neuron-ui/src/styles/mixin.scss

@@ -43,7 +43,7 @@
 
 @mixin dialog-confirm-button {
   border: none;
-  width: 5.125rem;
+  min-width: 5.125rem;
   height: 1.875rem;
   background-color: var(--nervos-green);
   color: #fff;

packages/neuron-ui/src/widgets/Calendar/focusControl.tsx

@@ -121,6 +121,11 @@ export const useTableFocusControl = (
     moveDate(calendarYear, calendarMonth, focusDate.getDate())
   }, [calendarYear, calendarMonth, minDate?.toDateString(), maxDate?.toDateString()])
 
+  useEffect(() => {
+    setYear(value?.getFullYear() ?? new Date().getFullYear())
+    setMonth((value?.getMonth() ?? new Date().getMonth()) + 1)
+  }, [value?.toDateString()])
+
   const onKeyDown = (e: KeyboardEvent<HTMLElement>) => {
     const keyEventMap = {
       Enter: () => onChange(focusDate),

packages/neuron-ui/src/widgets/Calendar/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useMemo, useCallback } from 'react'
+import React, { useState, useMemo, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   getMonthCalendar,
@@ -71,11 +71,6 @@ const Calendar: React.FC<CalendarProps> = ({
   const [month, setMonth] = useState(new Date().getMonth() + 1)
   const [status, setStatus] = useState<'year' | 'month' | 'date'>('date')
 
-  useEffect(() => {
-    setYear(value?.getFullYear() ?? new Date().getFullYear())
-    setMonth((value?.getMonth() ?? new Date().getMonth()) + 1)
-  }, [value?.toDateString()])
-
   const [uId] = useState(() => (+new Date()).toString(16).slice(-4))
 
   const [t, { language }] = useTranslation()
@@ -87,12 +82,10 @@ const Calendar: React.FC<CalendarProps> = ({
   const monthName = monthNames[month - 1]
   const monthShortName = monthShortNames[month - 1]
 
-  const calendar = useMemo(() => getMonthCalendar(year, month, firstDayOfWeek, language), [
-    year,
-    month,
-    firstDayOfWeek,
-    language,
-  ])
+  const calendar = useMemo(
+    () => getMonthCalendar(year, month, firstDayOfWeek, language),
+    [year, month, firstDayOfWeek, language]
+  )
   function isDisabledTime(date: Date): boolean {
     return !isDayInRange(date, { minDate, maxDate })
   }

packages/neuron-ui/src/widgets/DatetimePicker/index.tsx

@@ -4,7 +4,6 @@ import Button from 'widgets/Button'
 import { useTranslation } from 'react-i18next'
 import styles from './datetimePicker.module.scss'
 
-const SECONDS_PER_DAY = 24 * 3600 * 1000
 let UTC: string | number = -new Date().getTimezoneOffset() / 60
 if (UTC > 0) {
   UTC = `UTC+${UTC}`
@@ -14,10 +13,7 @@ if (UTC > 0) {
 
 export const formatDate = (datetime: Date) => {
   const month = (datetime.getMonth() + 1).toString().padStart(2, '0')
-  const date = datetime
-    .getDate()
-    .toString()
-    .padStart(2, '0')
+  const date = datetime.getDate().toString().padStart(2, '0')
   const year = datetime.getFullYear()
   return `${month}/${date}/${year}`
 }
@@ -28,14 +24,9 @@ export interface DatetimePickerProps {
   notice?: string
   onConfirm: (time: number) => void
   onCancel: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void
+  confirmText?: string | ((time?: number, display?: string) => string)
 }
-const DatetimePicker = ({
-  preset = new Date(Date.now() + SECONDS_PER_DAY),
-  onConfirm,
-  onCancel,
-  title,
-  notice,
-}: DatetimePickerProps) => {
+const DatetimePicker = ({ preset, onConfirm, onCancel, confirmText, title, notice }: DatetimePickerProps) => {
   const [t] = useTranslation()
   const [status, setStatus] = useState<'done' | 'edit'>('done')
   const [display, setDisplay] = useState<string>(preset ? formatDate(new Date(+preset)) : '')
@@ -138,7 +129,16 @@ const DatetimePicker = ({
         ) : null}
         <div className={styles.actions}>
           <Button type="cancel" label={t('common.cancel')} onClick={onCancel} />
-          <Button type="submit" label={t('common.save')} onClick={onSubmit} disabled={disabled} />
+          <Button
+            type="submit"
+            label={
+              typeof confirmText === 'function'
+                ? confirmText(selected?.getTime(), display)
+                : confirmText ?? t('common.save')
+            }
+            onClick={onSubmit}
+            disabled={disabled}
+          />
         </div>
       </div>
     </div>