Disable check box if no onTaskCheckedChange is provided

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
This commit is contained in:
Tilman Vatteroth 2020-10-18 20:30:41 +02:00 committed by mrdrogdrog
parent 0eabfc3bb3
commit 5197d0512b
3 changed files with 23 additions and 19 deletions

View file

@ -19,7 +19,7 @@ export interface FullMarkdownRendererProps {
onFirstHeadingChange?: (firstHeading: string | undefined) => void
onLineMarkerPositionChanged?: (lineMarkerPosition: LineMarkerPosition[]) => void
onMetaDataChange?: (yamlMetaData: YAMLMetaData | undefined) => void
onTaskCheckedChange: (lineInMarkdown: number, checked: boolean) => void
onTaskCheckedChange?: (lineInMarkdown: number, checked: boolean) => void
onTocChange?: (ast: TocAst) => void
}

View file

@ -21,7 +21,7 @@ import { VegaReplacer } from '../replace-components/vega-lite/vega-replacer'
import { VimeoReplacer } from '../replace-components/vimeo/vimeo-replacer'
import { YoutubeReplacer } from '../replace-components/youtube/youtube-replacer'
export const useReplacerInstanceListCreator = (onTaskCheckedChange: (lineInMarkdown: number, checked: boolean) => void): ()=>ComponentReplacer[] => {
export const useReplacerInstanceListCreator = (onTaskCheckedChange?: (lineInMarkdown: number, checked: boolean) => void): () => ComponentReplacer[] => {
return useMemo(() => () => [
new LinemarkerReplacer(),
new PossibleWiderReplacer(),

View file

@ -1,31 +1,35 @@
import React, { ReactElement } from 'react'
import { DomElement } from 'domhandler'
import React, { ReactElement } from 'react'
import { ComponentReplacer } from '../ComponentReplacer'
export class TaskListReplacer extends ComponentReplacer {
onTaskCheckedChange: (lineInMarkdown: number, checked: boolean) => void
onTaskCheckedChange?: (lineInMarkdown: number, checked: boolean) => void
constructor (onTaskCheckedChange: (lineInMarkdown: number, checked: boolean) => void) {
constructor (onTaskCheckedChange?: (lineInMarkdown: number, checked: boolean) => void) {
super()
this.onTaskCheckedChange = onTaskCheckedChange
}
handleCheckboxChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
const lineNum = Number(event.currentTarget.dataset.line)
this.onTaskCheckedChange(lineNum, event.currentTarget.checked)
}
public getReplacement (node: DomElement): (ReactElement|undefined) {
if (node.attribs?.class === 'task-list-item-checkbox') {
return (
<input
className="task-list-item-checkbox"
type="checkbox"
checked={node.attribs.checked !== undefined}
onChange={this.handleCheckboxChange}
data-line={node.attribs['data-line']}
/>
)
if (this.onTaskCheckedChange) {
this.onTaskCheckedChange(lineNum, event.currentTarget.checked)
}
}
public getReplacement (node: DomElement): (ReactElement | undefined) {
if (node.attribs?.class !== 'task-list-item-checkbox') {
return
}
return (
<input
disabled={this.onTaskCheckedChange === undefined}
className="task-list-item-checkbox"
type="checkbox"
checked={node.attribs.checked !== undefined}
onChange={this.handleCheckboxChange}
data-line={node.attribs['data-line']}
/>
)
}
}