pds-2021-g2-nest/nest_frontend/components/interactive/FormInlineText.js

import React, { useState } from "react"
import FormInline from "../base/FormInline"
import InputWithIcon from "../base/InputWithIcon"
import { faFont, faPlus } from "@fortawesome/free-solid-svg-icons"
import ButtonIconOnly from "../base/ButtonIconOnly"
import Style from "./FormInlineText.module.css"


export default function FormInlineText(
    {
        textIcon = faFont,
        buttonIcon = faPlus,
        buttonColor = "Green",
        placeholder = "",
        validate = value => value,
        submit,
        ...props
    },
) {
    const [value, setValue] = useState("")

    const _onSubmit = event => {
        event.preventDefault()
        submit(value)
        setValue("")
    }

    const _onChange = event => {
        setValue(validate(event.target.value))
    }

    return (
        <FormInline onSubmit={_onSubmit} {...props}>
            <InputWithIcon
                className={Style.Input}
                icon={textIcon}
                value={value}
                onChange={_onChange}
                placeholder={placeholder}
            />
            <ButtonIconOnly
                className={Style.Button}
                icon={buttonIcon}
                color={buttonColor}
                onClick={_onSubmit}
            />
        </FormInline>
    )
}