feat(share): add placeholder and increment format for expire date input (#196)

* feat(share): add placeholder and increment format for expire date input

* chore

Author: KirCute

src/pages/home/toolbar/Share.tsx

@@ -1,6 +1,7 @@
 import { useFetch, useRouter, useT, useUtil } from "~/hooks"
 import {
   bus,
+  getExpireDate,
   handleResp,
   makeTemplateData,
   matchTemplate,
@@ -224,14 +225,15 @@ export const Share = () => {
                   size="sm"
                   invalid={!expireValid()}
                   value={expireString()}
+                  placeholder="yyyy-MM-dd HH:mm:ss or +1w1d1H1m1s1ms"
                   onInput={(e) => {
                     setExpireString(e.currentTarget.value)
                     if (e.currentTarget.value === "") {
                       setExpireValid(true)
                       setShare("expires", null)
                       return
                     }
-                    const date = new Date(e.currentTarget.value)
+                    const date = getExpireDate(e.currentTarget.value)
                     if (isNaN(date.getTime())) {
                       setExpireValid(false)
                     } else {

src/pages/manage/shares/AddOrEdit.tsx

@@ -1,13 +1,6 @@
 import { useFetch, useRouter, useT } from "~/hooks"
-import {
-  OrderDirection,
-  PResp,
-  Share,
-  ShareInfo,
-  ShareUpdate,
-  Type,
-} from "~/types"
-import { handleResp, notify, r, randomPwd } from "~/utils"
+import { PResp, Share, ShareInfo, ShareUpdate, Type } from "~/types"
+import { handleResp, notify, r, randomPwd, getExpireDate } from "~/utils"
 import { createStore } from "solid-js/store"
 import { Button, Heading } from "@hope-ui/solid"
 import { MaybeLoading } from "~/components"
@@ -140,14 +133,15 @@ const AddOrEdit = () => {
           type={Type.String}
           value={expireString()}
           valid={expireValid()}
+          placeholder="yyyy-MM-dd HH:mm:ss or +1w1d1H1m1s1ms"
           onChange={(e) => {
             setExpireString(e)
             if (e === "") {
               setExpireValid(true)
               setShare("expires", null)
               return
             }
-            const date = new Date(e)
+            const date = getExpireDate(e)
             if (isNaN(date.getTime())) {
               setExpireValid(false)
             } else {

src/pages/manage/shares/Item.tsx

@@ -23,6 +23,7 @@ export type ItemProps = {
   options?: string
   options_prefix?: string
   valid?: boolean
+  placeholder?: string
 } & (
   | {
       type: Type.Bool
@@ -79,6 +80,7 @@ const Item = (props: ItemProps) => {
               readOnly={props.readonly}
               value={props.value as string}
               invalid={!props.valid}
+              placeholder={props.placeholder}
               onChange={
                 props.type === Type.String
                   ? (e) => props.onChange?.(e.currentTarget.value)
@@ -106,6 +108,7 @@ const Item = (props: ItemProps) => {
             readOnly={props.readonly}
             value={props.value as number}
             invalid={!props.valid}
+            placeholder={props.placeholder}
             onInput={
               props.type === Type.Number
                 ? (e) => props.onChange?.(parseInt(e.currentTarget.value))
@@ -120,6 +123,7 @@ const Item = (props: ItemProps) => {
             readOnly={props.readonly}
             value={props.value as number}
             invalid={!props.valid}
+            placeholder={props.placeholder}
             onInput={
               props.type === Type.Float
                 ? (e) => props.onChange?.(parseFloat(e.currentTarget.value))
@@ -146,6 +150,7 @@ const Item = (props: ItemProps) => {
             readOnly={props.readonly}
             value={props.value as string}
             invalid={!props.valid}
+            placeholder={props.placeholder}
             onChange={
               props.type === Type.Text
                 ? (e) => props.onChange?.(e.currentTarget.value)

src/utils/share.ts

@@ -21,3 +21,27 @@ export const makeTemplateData = (
     ...other,
   }
 }
+
+const expireDateIncrementRegExp =
+  /^\+(?=\d+[wdHms])(?:(\d+)w)?(?:(\d+)d)?(?:(\d+)H)?(?:(\d+)m)?(?:(\d+)s)?(?:(\d+)ms)?$/
+
+const toInt = (s: string | undefined) => {
+  if (s === undefined) return 0
+  const n = Number.parseInt(s)
+  return Number.isNaN(n) ? 0 : n
+}
+
+export const getExpireDate = (dateStr: string) => {
+  const match = expireDateIncrementRegExp.exec(dateStr)
+  if (match) {
+    const w = toInt(match[1])
+    const d = toInt(match[2]) + w * 7
+    const H = toInt(match[3]) + d * 24
+    const m = toInt(match[4]) + H * 60
+    const s = toInt(match[5]) + m * 60
+    const ms = toInt(match[6]) + s * 1000
+    return new Date(Date.now() + ms)
+  } else {
+    return new Date(dateStr)
+  }
+}