1
Fork 0
mirror of https://github.com/Steffo99/festa.git synced 2024-12-23 23:24:23 +00:00
festa/components/generic/editable/inputs.tsx

84 lines
2.3 KiB
TypeScript
Raw Normal View History

2022-06-11 03:08:49 +00:00
import { ComponentPropsWithoutRef } from "react"
import { FestaMoment } from "../renderers/datetime"
import { FestaMarkdownRenderer } from "../renderers/markdown"
import { EditingModeBranch } from "./base"
type TextInputProps = ComponentPropsWithoutRef<"input"> & { value: string }
type FileInputProps = ComponentPropsWithoutRef<"input"> & { value?: undefined }
type TextAreaProps = ComponentPropsWithoutRef<"textarea"> & { value: string }
/**
* Controlled input component which displays an `input[type="text"]` in edit mode, and a `span` displaying the input in view mode.
*/
export const EditableText = (props: TextInputProps) => {
return (
<EditingModeBranch
edit={
<input type="text" {...props} />
}
view={
2022-07-16 15:43:45 +00:00
<div>{props.value}</div>
2022-06-11 03:08:49 +00:00
}
/>
)
}
/**
* Controlled input component which displays an `input[type="file"]` in edit mode, and is invisible in view mode.
*
* Has no value due to how file inputs function in JS and React.
*/
export const EditableFilePicker = (props: FileInputProps) => {
return (
<EditingModeBranch
edit={
<input type="file" {...props} />
}
view={
<></>
}
/>
)
}
/**
* Controlled input component which displays a `textarea` in edit mode, and renders the input in Markdown using {@link FestaMarkdownRenderer} in view mode.
*/
export const EditableMarkdown = (props: TextAreaProps) => {
return (
<EditingModeBranch
edit={
<textarea {...props} />
}
view={
<FestaMarkdownRenderer code={props.value} />
}
/>
)
}
/**
* Controlled input component which displays a `input[type="datetime-local"]` in edit mode, and renders the selected datetime using {@link FestaMoment} in view mode.
*/
export const EditableDateTimeLocal = (props: TextInputProps) => {
return (
<EditingModeBranch
edit={
<input
type="datetime-local"
{...props}
/>
}
view={
2022-07-16 15:43:45 +00:00
<div>
<FestaMoment date={new Date(props.value)} />
</div>
2022-06-11 03:08:49 +00:00
}
/>
)
}