mirror of https://github.com/usememos/memos
feat: update memo editor
Steven
10 months ago
parent
d2727e6825
commit
c313596144
@ -1,103 +0,0 @@
|
||||
import { IconButton } from "@mui/joy";
|
||||
import clsx from "clsx";
|
||||
import { useEffect, useRef } from "react";
|
||||
import useCurrentUser from "@/hooks/useCurrentUser";
|
||||
import useDateTime from "@/hooks/useDateTime";
|
||||
import { useMemoStore, useTagStore } from "@/store/v1";
|
||||
import { Memo } from "@/types/proto/api/v1/memo_service";
|
||||
import MemoEditor, { Props as MemoEditorProps } from ".";
|
||||
import { generateDialog } from "../Dialog";
|
||||
import Icon from "../Icon";
|
||||
|
||||
interface Props extends DialogProps, MemoEditorProps {}
|
||||
|
||||
const MemoEditorDialog: React.FC<Props> = ({
|
||||
memoName,
|
||||
parentMemoName,
|
||||
placeholder,
|
||||
cacheKey,
|
||||
relationList,
|
||||
onConfirm,
|
||||
destroy,
|
||||
}: Props) => {
|
||||
const tagStore = useTagStore();
|
||||
const memoStore = useMemoStore();
|
||||
const { setDateTime, displayDateTime, datePickerDateTime } = useDateTime(memoStore.getMemoByName(memoName || "")?.displayTime);
|
||||
const memoPatchRef = useRef<Partial<Memo>>({
|
||||
displayTime: memoStore.getMemoByName(memoName || "")?.displayTime,
|
||||
});
|
||||
const user = useCurrentUser();
|
||||
|
||||
useEffect(() => {
|
||||
tagStore.fetchTags({ user }, { skipCache: false });
|
||||
}, []);
|
||||
|
||||
const updateDisplayTime = (displayTime: string) => {
|
||||
setDateTime(displayTime);
|
||||
memoPatchRef.current.displayTime = new Date(displayTime);
|
||||
};
|
||||
|
||||
const handleCloseBtnClick = () => {
|
||||
destroy();
|
||||
};
|
||||
|
||||
const handleConfirm = (memoName: string) => {
|
||||
handleCloseBtnClick();
|
||||
if (onConfirm) {
|
||||
onConfirm(memoName);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="w-full flex flex-row justify-between items-center">
|
||||
<div className={clsx("flex flex-row justify-start items-center", !displayDateTime && "mb-2")}>
|
||||
{displayDateTime ? (
|
||||
<div className="relative">
|
||||
<span className="cursor-pointer text-gray-500 dark:text-gray-400">{displayDateTime}</span>
|
||||
<input
|
||||
className="inset-0 absolute z-1 opacity-0"
|
||||
type="datetime-local"
|
||||
value={datePickerDateTime}
|
||||
onFocus={(e: any) => e.target.showPicker()}
|
||||
onChange={(e) => updateDisplayTime(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<img className="w-6 h-auto rounded-full shadow" src={"/full-logo.webp"} alt="" />
|
||||
<p className="ml-1 text-lg opacity-80 dark:text-gray-300">Memos</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<IconButton size="sm" onClick={handleCloseBtnClick}>
|
||||
<Icon.X className="w-5 h-auto" />
|
||||
</IconButton>
|
||||
</div>
|
||||
<div className="flex flex-col justify-start items-start max-w-full w-[40rem]">
|
||||
<MemoEditor
|
||||
className="border-none !p-0 -mb-2"
|
||||
cacheKey={`memo-editor-${cacheKey || memoName}`}
|
||||
memoName={memoName}
|
||||
parentMemoName={parentMemoName}
|
||||
placeholder={placeholder}
|
||||
relationList={relationList}
|
||||
memoPatchRef={memoPatchRef}
|
||||
onConfirm={handleConfirm}
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default function showMemoEditorDialog(props: Partial<Props> = {}): void {
|
||||
generateDialog(
|
||||
{
|
||||
className: "memo-editor-dialog",
|
||||
dialogName: "memo-editor-dialog",
|
||||
},
|
||||
MemoEditorDialog,
|
||||
props,
|
||||
);
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
import { useState } from "react";
|
||||
|
||||
const useDateTime = (initalState?: Date) => {
|
||||
const [dateTime, setDateTimeInternal] = useState<Date | undefined>(initalState && new Date(initalState));
|
||||
|
||||
return {
|
||||
setDateTime: (dateTimeString: string) => setDateTimeInternal(new Date(dateTimeString)),
|
||||
displayDateTime: dateTime && dateTime.toLocaleString(),
|
||||
datePickerDateTime: dateTime && new Date(dateTime.getTime() - dateTime.getTimezoneOffset() * 60000).toISOString().split(".")[0],
|
||||
};
|
||||
};
|
||||
|
||||
export default useDateTime;
|
||||
Loading…
Reference in New Issue