|
|
|
@ -1,7 +1,7 @@
|
|
|
|
|
import { Checkbox } from "@mui/joy";
|
|
|
|
|
import classNames from "classnames";
|
|
|
|
|
import { repeat } from "lodash-es";
|
|
|
|
|
import { useContext } from "react";
|
|
|
|
|
import { useContext, useState } from "react";
|
|
|
|
|
import { useMemoStore } from "@/store/v1";
|
|
|
|
|
import { Node, NodeType } from "@/types/node";
|
|
|
|
|
import Renderer from "./Renderer";
|
|
|
|
@ -18,6 +18,7 @@ interface Props {
|
|
|
|
|
const TaskList: React.FC<Props> = ({ index, indent, complete, children }: Props) => {
|
|
|
|
|
const context = useContext(RendererContext);
|
|
|
|
|
const memoStore = useMemoStore();
|
|
|
|
|
const [checked] = useState(complete);
|
|
|
|
|
|
|
|
|
|
const handleCheckboxChange = async (on: boolean) => {
|
|
|
|
|
if (context.readonly || !context.memoId) {
|
|
|
|
@ -48,12 +49,14 @@ const TaskList: React.FC<Props> = ({ index, indent, complete, children }: Props)
|
|
|
|
|
return (
|
|
|
|
|
<ul>
|
|
|
|
|
<li className="w-full flex flex-row">
|
|
|
|
|
<div className="block font-mono shrink-0">
|
|
|
|
|
<span>{repeat(" ", indent)}</span>
|
|
|
|
|
</div>
|
|
|
|
|
{indent > 0 && (
|
|
|
|
|
<div className="block font-mono shrink-0">
|
|
|
|
|
<span>{repeat(" ", indent)}</span>
|
|
|
|
|
</div>
|
|
|
|
|
)}
|
|
|
|
|
<div className="w-auto grid grid-cols-[24px_1fr] gap-1">
|
|
|
|
|
<div className="w-7 h-6 flex justify-center items-center">
|
|
|
|
|
<Checkbox size="sm" checked={complete} disabled={context.readonly} onChange={(e) => handleCheckboxChange(e.target.checked)} />
|
|
|
|
|
<Checkbox size="sm" checked={checked} disabled={context.readonly} onChange={(e) => handleCheckboxChange(e.target.checked)} />
|
|
|
|
|
</div>
|
|
|
|
|
<div className={classNames(complete && "line-through opacity-80")}>
|
|
|
|
|
{children.map((child, index) => (
|
|
|
|
|