From cf1be81de244e30b0dc6b027150d6be0a379c08d Mon Sep 17 00:00:00 2001 From: johnnyjoy Date: Sat, 19 Oct 2024 21:30:02 +0800 Subject: [PATCH] feat: use date-picker instead of raw datetime input --- web/package.json | 1 + web/pnpm-lock.yaml | 42 +++++++++++++++++++++++ web/src/components/MemoEditor/index.tsx | 18 +++++----- web/src/components/UserStatisticsView.tsx | 7 ---- 4 files changed, 51 insertions(+), 17 deletions(-) diff --git a/web/package.json b/web/package.json index d84c6ce2..4146e00a 100644 --- a/web/package.json +++ b/web/package.json @@ -33,6 +33,7 @@ "lucide-react": "^0.437.0", "mermaid": "^11.2.1", "react": "^18.3.1", + "react-datepicker": "^7.5.0", "react-dom": "^18.3.1", "react-force-graph-2d": "^1.25.6", "react-hot-toast": "^2.4.1", diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml index c0cdeeb8..1b28bd25 100644 --- a/web/pnpm-lock.yaml +++ b/web/pnpm-lock.yaml @@ -80,6 +80,9 @@ importers: react: specifier: ^18.3.1 version: 18.3.1 + react-datepicker: + specifier: ^7.5.0 + version: 7.5.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react-dom: specifier: ^18.3.1 version: 18.3.1(react@18.3.1) @@ -655,6 +658,12 @@ packages: react: '>=16.8.0' react-dom: '>=16.8.0' + '@floating-ui/react@0.26.25': + resolution: {integrity: sha512-hZOmgN0NTOzOuZxI1oIrDu3Gcl8WViIkvPMpB4xdd4QD6xAMtwgwr3VPoiyH/bLtRcS1cDnhxLSD1NsMJmwh/A==} + peerDependencies: + react: '>=16.8.0' + react-dom: '>=16.8.0' + '@floating-ui/utils@0.2.8': resolution: {integrity: sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==} @@ -1834,6 +1843,9 @@ packages: resolution: {integrity: sha512-t/Ygsytq+R995EJ5PZlD4Cu56sWa8InXySaViRzw9apusqsOO2bQP+SbYzAhR0pFKoB+43lYy8rWban9JSuXnA==} engines: {node: '>= 0.4'} + date-fns@3.6.0: + resolution: {integrity: sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==} + dayjs@1.11.13: resolution: {integrity: sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==} @@ -2810,6 +2822,12 @@ packages: queue-microtask@1.2.3: resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==} + react-datepicker@7.5.0: + resolution: {integrity: sha512-6MzeamV8cWSOcduwePHfGqY40acuGlS1cG//ePHT6bVbLxWyqngaStenfH03n1wbzOibFggF66kWaBTb1SbTtQ==} + peerDependencies: + react: ^16.9.0 || ^17 || ^18 + react-dom: ^16.9.0 || ^17 || ^18 + react-dom@18.3.1: resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==} peerDependencies: @@ -3167,6 +3185,9 @@ packages: resolution: {integrity: sha512-7gr8p9TQP6RAHusBOSLs46F4564ZrjV8xFmw5zCmgmhGUcw2hxsShhJ6CEiHQMgPDwAQ1fWHPM0ypc4RMAig4A==} engines: {node: ^14.18.0 || >=16.0.0} + tabbable@6.2.0: + resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==} + tailwind-merge@2.5.2: resolution: {integrity: sha512-kjEBm+pvD+6eAwzJL2Bi+02/9LFLal1Gs61+QB7HvTfQQ0aXwC5LGT8PEt1gS0CWKktKe6ysPTAy3cBC5MeiIg==} @@ -3902,6 +3923,14 @@ snapshots: react: 18.3.1 react-dom: 18.3.1(react@18.3.1) + '@floating-ui/react@0.26.25(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@floating-ui/react-dom': 2.1.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@floating-ui/utils': 0.2.8 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + tabbable: 6.2.0 + '@floating-ui/utils@0.2.8': {} '@github/relative-time-element@4.4.3': {} @@ -5132,6 +5161,8 @@ snapshots: es-errors: 1.3.0 is-data-view: 1.0.1 + date-fns@3.6.0: {} + dayjs@1.11.13: {} debug@4.3.7: @@ -6227,6 +6258,15 @@ snapshots: queue-microtask@1.2.3: {} + react-datepicker@7.5.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + dependencies: + '@floating-ui/react': 0.26.25(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + clsx: 2.1.1 + date-fns: 3.6.0 + prop-types: 15.8.1 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + react-dom@18.3.1(react@18.3.1): dependencies: loose-envify: 1.4.0 @@ -6632,6 +6672,8 @@ snapshots: '@pkgr/core': 0.1.1 tslib: 2.7.0 + tabbable@6.2.0: {} + tailwind-merge@2.5.2: {} tailwindcss-animate@1.0.7(tailwindcss@3.4.12): diff --git a/web/src/components/MemoEditor/index.tsx b/web/src/components/MemoEditor/index.tsx index 86509416..6376def1 100644 --- a/web/src/components/MemoEditor/index.tsx +++ b/web/src/components/MemoEditor/index.tsx @@ -2,6 +2,8 @@ import { Select, Option, Button, Divider } from "@mui/joy"; import { isEqual } from "lodash-es"; import { SendIcon } from "lucide-react"; import React, { useEffect, useMemo, useRef, useState } from "react"; +import DatePicker from "react-datepicker"; +import "react-datepicker/dist/react-datepicker.css"; import { toast } from "react-hot-toast"; import { useTranslation } from "react-i18next"; import useLocalStorage from "react-use/lib/useLocalStorage"; @@ -428,16 +430,12 @@ const MemoEditor = (props: Props) => { onCompositionEnd={handleCompositionEnd} > {memoName && displayTime && ( -
- {displayTime.toLocaleString()} - e.target.showPicker()} - onChange={(e) => setDisplayTime(new Date(e.target.value))} - /> -
+ date && setDisplayTime(date)} + showTimeSelect + customInput={{displayTime.toLocaleString()}} + /> )} diff --git a/web/src/components/UserStatisticsView.tsx b/web/src/components/UserStatisticsView.tsx index eb207d45..c3c30cd0 100644 --- a/web/src/components/UserStatisticsView.tsx +++ b/web/src/components/UserStatisticsView.tsx @@ -74,13 +74,6 @@ const UserStatisticsView = () => {
{dayjs(visibleMonthString).toDate().toLocaleString(i18n.language, { year: "numeric", month: "long" })} - e.target.showPicker()} - onChange={(e) => setVisibleMonthString(e.target.value || dayjs().format("YYYY-MM"))} - />