index.tsx

TLDR

This file is a React component that represents a list item. It provides the functionality to display and edit a list item within a larger block of content.

Classes

ListItem

The ListItem class is a React component that represents a list item. It has the following properties:

• name: The name of the list item.
• displayName: The display name of the list item.
• slashCommand: The slash command associated with the list item.
• prefix: The prefix for the list item.
• nextType: The type of the next item in the list.
• runSlashCommand: A method that runs the slash command associated with the list item.
• editable: A boolean indicating whether the list item is editable.
• Display: A functional component that renders the list item for display.
• Input: A functional component that renders an input field for editing the list item.

// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React, {useRef, useEffect} from 'react'

import {BlockInputProps, ContentType} from '../types'

import './list-item.scss'

const ListItem: ContentType = {
    name: 'list-item',
    displayName: 'List item',
    slashCommand: '/list-item',
    prefix: '* ',
    nextType: 'list-item',
    runSlashCommand: (): void => {},
    editable: true,
    Display: (props: BlockInputProps) => <ul><li>{props.value}</li></ul>,
    Input: (props: BlockInputProps) => {
        const ref = useRef<HTMLInputElement|null>(null)
        useEffect(() => {
            ref.current?.focus()
        }, [])
        return (
            <ul>
                <li>
                    <input
                        ref={ref}
                        className='ListItem'
                        data-testid='list-item'
                        onChange={(e) => props.onChange(e.currentTarget.value)}
                        onKeyDown={(e) => {
                            if (props.value === '' && e.key === 'Backspace') {
                                props.onCancel()
                            }
                            if (e.key === 'Enter') {
                                props.onSave(props.value)
                            }
                        }}
                        value={props.value}
                    />
                </li>
            </ul>
        )
    },
}

ListItem.runSlashCommand = (changeType: (contentType: ContentType) => void, changeValue: (value: string) => void, ...args: string[]): void => {
    changeType(ListItem)
    changeValue(args.join(' '))
}

export default ListItem