feat: improve the interaction design of the DatetimePicker component

nervosnetwork · May 19, 2023 · 97c1264 · 97c1264
1 parent ac9afe2
commit 97c1264
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 14 deletions.
diff --git a/packages/neuron-ui/src/components/Send/index.tsx b/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)

diff --git a/packages/neuron-ui/src/styles/mixin.scss b/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;

diff --git a/packages/neuron-ui/src/widgets/DatetimePicker/index.tsx b/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>