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 onFirstHeadingChange?: (firstHeading: string | undefined) => void
onLineMarkerPositionChanged?: (lineMarkerPosition: LineMarkerPosition[]) => void onLineMarkerPositionChanged?: (lineMarkerPosition: LineMarkerPosition[]) => void
onMetaDataChange?: (yamlMetaData: YAMLMetaData | undefined) => void onMetaDataChange?: (yamlMetaData: YAMLMetaData | undefined) => void
onTaskCheckedChange: (lineInMarkdown: number, checked: boolean) => void onTaskCheckedChange?: (lineInMarkdown: number, checked: boolean) => void
onTocChange?: (ast: TocAst) => 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 { VimeoReplacer } from '../replace-components/vimeo/vimeo-replacer'
import { YoutubeReplacer } from '../replace-components/youtube/youtube-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(() => () => [ return useMemo(() => () => [
new LinemarkerReplacer(), new LinemarkerReplacer(),
new PossibleWiderReplacer(), new PossibleWiderReplacer(),

View file

@ -1,24 +1,29 @@
import React, { ReactElement } from 'react'
import { DomElement } from 'domhandler' import { DomElement } from 'domhandler'
import React, { ReactElement } from 'react'
import { ComponentReplacer } from '../ComponentReplacer' import { ComponentReplacer } from '../ComponentReplacer'
export class TaskListReplacer extends 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() super()
this.onTaskCheckedChange = onTaskCheckedChange this.onTaskCheckedChange = onTaskCheckedChange
} }
handleCheckboxChange = (event: React.ChangeEvent<HTMLInputElement>): void => { handleCheckboxChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
const lineNum = Number(event.currentTarget.dataset.line) const lineNum = Number(event.currentTarget.dataset.line)
if (this.onTaskCheckedChange) {
this.onTaskCheckedChange(lineNum, event.currentTarget.checked) this.onTaskCheckedChange(lineNum, event.currentTarget.checked)
} }
}
public getReplacement (node: DomElement): (ReactElement|undefined) { public getReplacement (node: DomElement): (ReactElement | undefined) {
if (node.attribs?.class === 'task-list-item-checkbox') { if (node.attribs?.class !== 'task-list-item-checkbox') {
return
}
return ( return (
<input <input
disabled={this.onTaskCheckedChange === undefined}
className="task-list-item-checkbox" className="task-list-item-checkbox"
type="checkbox" type="checkbox"
checked={node.attribs.checked !== undefined} checked={node.attribs.checked !== undefined}
@ -27,5 +32,4 @@ export class TaskListReplacer extends ComponentReplacer {
/> />
) )
} }
}
} }