-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add color support and children rendering for todo, list, toggle…
… component
- Loading branch information
1 parent
548fa1b
commit 5999897
Showing
17 changed files
with
295 additions
and
166 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| import { cn } from "@/lib/utils"; | ||
| import { renderBlock } from "../render"; | ||
| import RichText, { ColorMap } from "../text"; | ||
| import { IndentChildren } from "../render-helper"; | ||
|
|
||
| export const numberListStyle = (level: number): string => { | ||
| const dep = ((level + 1) / 2) % 3; | ||
| if (dep == 0) { | ||
| return "list-roman"; | ||
| } | ||
| if (dep == 1) { | ||
| return "list-decimal"; | ||
| } | ||
| return "list-alpha"; | ||
| }; | ||
|
|
||
| export const bulletListStyle = (level: number): string => { | ||
| const dep = ((level + 1) / 2) % 2; | ||
| if (dep == 0) { | ||
| return "list-circle"; | ||
| } | ||
| return "list-disc"; | ||
| }; | ||
|
|
||
| interface ListProps { | ||
| block: any; | ||
| level?: number; | ||
| className?: string | undefined; | ||
| } | ||
|
|
||
| export function ListRenderer({ block, level = 0, className }: ListProps) { | ||
| const { id, type } = block; | ||
| const value = block[type]; | ||
|
|
||
| if (type == "bulleted_list") { | ||
| return ( | ||
| <ul key={id} className={cn(className, bulletListStyle(level), "list-inside space-y-0.5")}> | ||
| {value?.children && value.children.map((child: any, index: number) => renderBlock(child, level + 1, index))} | ||
| </ul> | ||
| ); | ||
| } | ||
|
|
||
| if (type == "numbered_list") { | ||
| return ( | ||
| <ol key={id} className={cn(className, numberListStyle(level), "list-inside space-y-0.5")}> | ||
| {value?.children && value.children.map((child: any, index: number) => renderBlock(child, level + 1, index))} | ||
| </ol> | ||
| ); | ||
| } | ||
| return null; | ||
| } | ||
|
|
||
| export function ListItemRenderer({ block, level = 0, className }: ListProps) { | ||
| const { id, type } = block; | ||
| const value = block?.[type]; | ||
|
|
||
| const color = ColorMap.get(value?.color); | ||
| return ( | ||
| <li key={id} className={cn(className, color, "pl-1 pt-1")}> | ||
| {value?.rich_text && <RichText title={value.rich_text} className="whitespace-pre-wrap" />} | ||
| {block.children && <IndentChildren cb={block.children} level={level+1}></IndentChildren>} | ||
| </li> | ||
| ); | ||
| } | ||
|
|
||
| // function renderNestedList(blocks: any, level: number) { | ||
| // const { type } = blocks; | ||
| // const value = blocks[type]; | ||
|
|
||
| // if (!value) return null; | ||
|
|
||
| // const isNumberedList = blocks.children[0].type === "numbered_list_item"; | ||
| // if (isNumberedList) { | ||
| // // style not neccessary for grand-child lists as it will inherit from parent | ||
| // return <div>{blocks.children.map((block: any, index: number) => renderBlock(block, level, index))}</div>; | ||
| // } | ||
| // return <div>{blocks.children.map((block: any, index: number) => renderBlock(block, level, index))}</div>; | ||
| // } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,23 +1,29 @@ | ||
| import { cn } from "@/lib/utils"; | ||
| import RichText, { ColorMap } from "../text"; | ||
| import { IndentChildren } from "../render-helper"; | ||
|
|
||
| interface ParagraphProps { | ||
| block: any; | ||
| level?: number; | ||
| className?: string | undefined; | ||
| } | ||
|
|
||
| export function ParagraphRender({ block, className }: ParagraphProps) { | ||
| export function ParagraphRender({ block, level = 0, className }: ParagraphProps) { | ||
| const { | ||
| id, | ||
| children, | ||
| paragraph: { rich_text, color }, | ||
| } = block; | ||
|
|
||
| const style = ColorMap.get(color) || ""; | ||
| return ( | ||
| <div key={id} className={cn(className, style)}> | ||
| <p className="p-1"> | ||
| <RichText title={rich_text} extended="whitespace-pre-wrap" /> | ||
| <RichText title={rich_text} className="whitespace-pre-wrap" /> | ||
| </p> | ||
| {children && ( | ||
| <IndentChildren cb={children} level={level}></IndentChildren> | ||
| )} | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| import { cn } from "@/lib/utils"; | ||
| import RichText, { ColorMap } from "../text"; | ||
| // import { renderBlock } from "../render"; | ||
| import { IndentChildren } from "../render-helper"; | ||
|
|
||
| interface TodoProps { | ||
| block: any; | ||
| level?: number; | ||
| className?: string | undefined; | ||
| } | ||
|
|
||
| export function TodoRender({ block, className, level = 0 }: TodoProps) { | ||
| const { | ||
| id, | ||
| children, | ||
| to_do: { rich_text, checked, color }, | ||
| } = block; | ||
|
|
||
| const style = ColorMap.get(color) || ""; | ||
| return ( | ||
| <div key={id} className={cn(className, style)}> | ||
| <label htmlFor={id}> | ||
| <input | ||
| className="m-1 h-[1.1rem] w-[1.1rem] rounded-none border-8 align-middle" | ||
| type="checkbox" | ||
| id={id} | ||
| defaultChecked={checked} | ||
| /> | ||
| {checked ? ( | ||
| <RichText title={rich_text} className="text-gray-500 line-through" /> | ||
| ) : ( | ||
| <RichText title={rich_text} /> | ||
| )} | ||
| </label> | ||
| {/**/} | ||
| {children && ( | ||
| <IndentChildren cb={children} level={level+1}></IndentChildren> | ||
| )} | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import { cn } from "@/lib/utils"; | ||
| import RichText, { ColorMap } from "../text"; | ||
| // import { renderBlock } from "../render"; | ||
| import { IndentChildren } from "../render-helper"; | ||
| import React from "react"; | ||
| import { renderBlock } from "../render"; | ||
|
|
||
| interface ToggleProps { | ||
| block: any; | ||
| level?: number; | ||
| className?: string | undefined; | ||
| } | ||
|
|
||
| export function ToggleRender({ block, className, level = 0 }: ToggleProps) { | ||
| const { | ||
| id, | ||
| children, | ||
| toggle: { rich_text, color }, | ||
| } = block; | ||
|
|
||
| const style = ColorMap.get(color) || ""; | ||
| return ( | ||
| <div key={id} className={cn(className, style)}> | ||
| <details key={id} className="my-1"> | ||
| <summary> | ||
| <RichText title={rich_text} /> | ||
| </summary> | ||
|
|
||
| <div className="ml-2"> | ||
| {children?.map((child: any) => ( | ||
| <React.Fragment key={child.id}>{renderBlock(child, level + 1)}</React.Fragment> | ||
| ))} | ||
| </div> | ||
| </details> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| import { renderBlock } from "./render"; | ||
|
|
||
|
|
||
| export function IndentChildren({ cb, level = 0 }: { cb: any; level: number }) { | ||
| if (!cb) { | ||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <div className="flex w-full max-w-full"> | ||
| <div className="h-auto w-6"></div> | ||
| <div className="flex w-full max-w-full flex-col gap-y-0.5"> | ||
| {cb && cb.map((child: any, index: number) => renderBlock(child, level, index))} | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
Oops, something went wrong.