YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-06-05 22:09:59 +02:00
Code Issues Packages Projects Releases Wiki Activity

chore: add visibility selector

Browse Source
This commit is contained in:
boojack
2022-07-26 21:24:52 +08:00
parent b7339e00ba
commit 07d9649b22
4 changed files with 22 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
web/src/components/MemoCardDialog.tsx
View File

@ -9,6 +9,7 @@ import { showDialog } from "./Dialog";
import Image from "./Image";
import { formatMemoContent } from "./Memo";
import "../less/memo-card-dialog.less";
import Selector from "./common/Selector";
interface LinkedMemo extends Memo {
createdAtStr: string;
@ -26,6 +27,11 @@ const MemoCardDialog: React.FC<Props> = (props: Props) => {
const [linkMemos, setLinkMemos] = useState<LinkedMemo[]>([]);
const [linkedMemos, setLinkedMemos] = useState<LinkedMemo[]>([]);
const imageUrls = Array.from(memo.content.match(IMAGE_URL_REG) ?? []).map((s) => s.replace(IMAGE_URL_REG, "$1"));
const visibilityList = [
{ text: "PUBLIC", value: "PUBLIC" },
{ text: "PROTECTED", value: "PROTECTED" },
{ text: "PRIVATE", value: "PRIVATE" },
];
useEffect(() => {
const fetchLinkedMemos = async () => {
@ -98,25 +104,16 @@ const MemoCardDialog: React.FC<Props> = (props: Props) => {
setMemo(memo);
}, []);
const handleEditMemoBtnClick = useCallback(() => {
const handleEditMemoBtnClick = () => {
props.destroy();
editorStateService.setEditMemoWithId(memo.id);
}, [memo.id]);
const handlePinClick = async () => {
if (memo.pinned) {
await memoService.unpinMemo(memo.id);
} else {
await memoService.pinMemo(memo.id);
}
setMemo({
...memo,
pinned: !memo.pinned,
});
};
const handleVisibilityClick = async () => {
const visibility = memo.visibility === "PRIVATE" ? "PUBLIC" : "PRIVATE";
const handleVisibilitySelectorChange = async (visibility: Visibility) => {
if (memo.visibility === visibility) {
return;
}
await memoService.patchMemo({
id: memo.id,
visibility: visibility,
@ -135,12 +132,12 @@ const MemoCardDialog: React.FC<Props> = (props: Props) => {
<div className="btns-container">
<Only when={!userService.isVisitorMode()}>
<>
<button className="btn" onClick={handlePinClick}>
<i className={`fa-solid fa-thumbtack icon-img ${memo.pinned ? "" : "opacity-20"}`}></i>
</button>
<button className="btn" onClick={handleVisibilityClick}>
<i className={`fa-solid fa-eye icon-img ${memo.visibility === "PUBLIC" ? "" : "opacity-20"}`}></i>
</button>
<Selector
className="w-24"
dataSource={visibilityList}
value={memo.visibility}
handleValueChanged={(value) => handleVisibilitySelectorChange(value as Visibility)}
/>
<button className="btn edit-btn" onClick={handleEditMemoBtnClick}>
<i className="fa-solid fa-pen-to-square icon-img"></i>
</button>