add markdown render

This commit is contained in:
kkzzhizhou 2021-11-20 17:11:13 +08:00
parent 9b15bb1236
commit e45182547f
14 changed files with 53 additions and 28 deletions

View file

@ -1,11 +1,16 @@
import Emoji from "react-emoji-render";
import * as React from "react";
import ReactMarkdown from "react-markdown";
function DailyItem(props: any) {
return (
<div className="todo-item" id={props.id}>
<input type="checkbox" className="checkbox" id={props.id} onChange={props.onChange} checked={props.completed}/>
<p><Emoji text={props.daily_text}></Emoji></p>
<input type="checkbox" className="checkbox" id={props.id} onChange={props.onChange} checked={props.completed} />
<div>
<p><Emoji text={props.daily_text}></Emoji></p>
<ReactMarkdown children={props.daily_notes} />
</div>
</div>
)
}

View file

@ -9,11 +9,11 @@ export default function Index(props: any){
else {
const incompleteDailies = props.dailys.map((daily: any) => {
if(!daily.completed)
return <DailyItem key={daily.id} id={daily.id}daily_text={daily.text} onChange={props.onChange} completed={daily.completed}/>
return <DailyItem key={daily.id} id={daily.id} daily_text={daily.text} daily_notes={daily.notes} onChange={props.onChange} completed={daily.completed}/>
})
const completedDailies = props.dailys.map((daily: any) => {
if(daily.completed)
return <DailyItem key={daily.id} id={daily.id}daily_text={daily.text} onChange={props.onChange} completed={daily.completed}/>
return <DailyItem key={daily.id} id={daily.id} daily_text={daily.text} daily_notes={daily.notes} onChange={props.onChange} completed={daily.completed}/>
})
const display = <div id="classDisplay">
<Tabs>

View file

@ -1,5 +1,6 @@
import Emoji from "react-emoji-render";
import * as React from "react";
import ReactMarkdown from "react-markdown";
function HabitItem(props: any) {
return (
@ -10,8 +11,10 @@ function HabitItem(props: any) {
<button className="habit-minus" id={"mins" + props.id} onClick={props.onChange}>
-{props.downCount}
</button>
<p className="habit-text"><Emoji text={props.habit_text}></Emoji></p>
<div>
<p className="habit-text"><Emoji text={props.habit_text}></Emoji></p>
<ReactMarkdown children={props.habit_notes} />
</div>
</div>
)
}

View file

@ -9,7 +9,7 @@ export default function Index(props: any){
}
else {
const allHabits = props.habits.map((habit: any) => {
return <HabitItem key={habit.id} id={habit.id} habit_text={habit.text} upCount={habit.counterUp} downCount={habit.counterDown} onChange={props.onChange}/>
return <HabitItem key={habit.id} id={habit.id} habit_text={habit.text} habit_notes={habit.notes} upCount={habit.counterUp} downCount={habit.counterDown} onChange={props.onChange}/>
})
const display = <div id="classDisplay">
<ul>{allHabits}</ul>

View file

@ -1,11 +1,15 @@
import Emoji from "react-emoji-render";
import * as React from "react";
import ReactMarkdown from "react-markdown";
function RewardItem(props: any) {
return (
<div className="reward-item" id={props.id}>
<button className="reward-click" id={props.id} onClick={props.onChange}>-{props.reward_value}</button>
<div>
<p className="reward-text"><Emoji text={props.reward_text}></Emoji></p>
<ReactMarkdown children={props.reward_notes} />
</div>
</div>
)
}

View file

@ -9,7 +9,7 @@ export default function Index(props: any){
}
else {
const allRewards = props.rewards.map((reward: any) => {
return <RewardItem key={reward.id} id={reward.id} reward_text={reward.text} reward_value={reward.value} onChange={props.onChange}/>
return <RewardItem key={reward.id} id={reward.id} reward_text={reward.text} reward_notes={reward.notes} reward_value={reward.value} onChange={props.onChange}/>
})
const display = <div id="classDisplay">
<ul>{allRewards}</ul>

View file

@ -5,7 +5,7 @@ function TodoItem(props: any) {
return (
<div className="todo-item" id={props.id}>
<input type="checkbox" className="checkbox" id={props.id} onChange={props.onChange} checked={props.completed}/>
<Emoji text = {props.todo_text}></Emoji>
<Emoji text = {props.todo_text}></Emoji><Emoji text = {props.todo_text}></Emoji>
</div>
)
}

View file

@ -1,11 +1,16 @@
import Emoji from "react-emoji-render";
import * as React from "react";
import ReactMarkdown from "react-markdown";
function TodoItem(props: any) {
return (
<div className="todo-item" id={props.id}>
<input type="checkbox" className="checkbox" id={props.id} onChange={props.onChange} checked={props.completed}/>
<p><Emoji text ={props.todo_text}></Emoji></p>
{/* <p><Emoji text ={props.todo_text}></Emoji></p> */}
<div>
<p><Emoji text={props.todo_text}></Emoji></p>
<ReactMarkdown children={props.todo_notes} />
</div>
</div>
)
}

View file

@ -9,11 +9,11 @@ export default function Index(props: any){
else {
const incompleteTodos = props.todos.map((todo: any) => {
if(!todo.completed)
return <TodoItem key={todo.id} id={todo.id} todo_text={todo.text} onChange={props.onChange} completed={todo.completed}/>
return <TodoItem key={todo.id} id={todo.id} todo_text={todo.text} todo_notes={todo.notes} onChange={props.onChange} completed={todo.completed}/>
})
const completedTodos = props.todos.map((todo: any) => {
if(todo.completed)
return <TodoItem key={todo.id} id={todo.id} todo_text={todo.text} onChange={props.onChange} completed={todo.completed}/>
return <TodoItem key={todo.id} id={todo.id} todo_text={todo.text} todo_notes={todo.notes} onChange={props.onChange} completed={todo.completed}/>
})
const display = <div id="classDisplay">
<Tabs>