You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
memos/web/src/components/MemoContent/OrderedListItem.tsx

33 lines
721 B
TypeScript

import { useMemo } from "react";
import { Node } from "@/types/proto/api/v1/markdown_service";
import Renderer from "./Renderer";
import { BaseProps } from "./types";
interface Props extends BaseProps {
number: string;
indent: number;
children: Node[];
}
const OrderedListItem: React.FC<Props> = ({ children, number }: Props) => {
const ml = useMemo(
() =>
number.length > 1
? {
marginLeft: 8 * (number.length - 1),
}
: {},
[number],
);
return (
<li style={ml}>
{children.map((child, index) => (
<Renderer key={`${child.type}-${index}`} index={String(index)} node={child} />
))}
</li>
);
};
export default OrderedListItem;