github/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2024-11-22 17:56:30 -05:00
Code Issues Projects Releases Packages Wiki Activity

Disable check box if no onTaskCheckedChange is provided

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/markdown-renderer/full-markdown-renderer.tsx
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
} }

2
src/components/markdown-renderer/hooks/use-replacer-instance-list-creator.ts
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(),

38
src/components/markdown-renderer/replace-components/task-list/task-list-replacer.tsx
View file

@ -1,31 +1,35 @@
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)
this.onTaskCheckedChange(lineNum, event.currentTarget.checked) if (this.onTaskCheckedChange) {
} 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']}
/>
)
} }
} }
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']}
/>
)
}
} }