steffo/festa
steffo/festa
1
Fork 0
mirror of https://github.com/Steffo99/festa.git synced 2024-12-22 22:54:22 +00:00
Code Activity

Rename Editable to BaseEditable

Browse source
This commit is contained in:
Steffo 2022-06-10 17:18:36 +02:00
parent 0610a0bb0c
commit bcc94ddb01
Signed by: steffo
GPG key ID: 6965406171929D01
6 changed files with 39 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
components/editable/Editable.tsx → components/editable/BaseEditable.tsx
View file

@ -8,7 +8,7 @@ type EditableProps = {
}
export function Editable({editing, preview}: EditableProps) {
export function BaseEditable({ editing, preview }: EditableProps) {
const [isEditing,] = useDefinedContext(EditingContext)
return isEditing ? editing : preview

4
components/editable/EditableDateTimeLocal.tsx
View file

@ -1,7 +1,7 @@
import { HTMLProps } from "react";
import { toDatetimeLocal } from "../../utils/dateFields";
import { FestaMoment } from "../extensions/FestaMoment";
import { Editable } from "./Editable";
import { BaseEditable } from "./BaseEditable";
export type EditableDateTimeLocalProps = Omit<HTMLProps<HTMLInputElement>, "value" | "max" | "min"> & { value: Date | null, max?: Date, min?: Date }
@ -9,7 +9,7 @@ export type EditableDateTimeLocalProps = Omit<HTMLProps<HTMLInputElement>, "valu
export function EditableDateTimeLocal(props: EditableDateTimeLocalProps) {
return (
<Editable
<BaseEditable
editing={
<input
type="datetime-local"

4
components/editable/EditableFilePicker.tsx
View file

@ -1,5 +1,5 @@
import { HTMLProps } from "react";
import { Editable } from "./Editable";
import { BaseEditable } from "./BaseEditable";
/**
@ -9,7 +9,7 @@ import { Editable } from "./Editable";
*/
export function EditableFilePicker(props: HTMLProps<HTMLInputElement> & { value?: undefined }) {
return (
<Editable
<BaseEditable
editing={
<input type="file" {...props} />
}

4
components/editable/EditableMarkdown.tsx
View file

@ -1,13 +1,13 @@
import { HTMLProps } from "react";
import { FestaMarkdown } from "../extensions/FestaMarkdown";
import { Editable } from "./Editable";
import { BaseEditable } from "./BaseEditable";
/**
* Controlled input component which displays a `textarea` in editing mode, and renders the input in Markdown using {@link FestaMarkdown} in preview mode.
*/
export function EditableMarkdown(props: HTMLProps<HTMLTextAreaElement> & { value: string }) {
return (
<Editable
<BaseEditable
editing={
<textarea {...props} />
}

4
components/editable/EditableText.tsx
View file

@ -1,5 +1,5 @@
import { HTMLProps } from "react";
import { Editable } from "./Editable";
import { BaseEditable } from "./BaseEditable";
/**
@ -7,7 +7,7 @@ import { Editable } from "./Editable";
*/
export function EditableText(props: HTMLProps<HTMLInputElement> & { value: string }) {
return (
<Editable
<BaseEditable
editing={
<input type="text" {...props} />
}

54
components/form/FormFromTo.tsx
View file

@ -1,33 +1,37 @@
import classNames from "classnames"
import { ReactNode } from "react"
import { HTMLProps, memo } from "react"
type FormDateRangeProps = {
export type FormFromToProps = HTMLProps<HTMLDivElement> & {
preview: boolean,
icon: ReactNode,
start: ReactNode,
connector: ReactNode,
end: ReactNode,
}
export function FormFromTo(props: FormDateRangeProps) {
export const FormFromTo = memo((props: FormFromToProps) => {
return (
<div className={classNames({
"form-fromto": true,
"form-fromto-preview": props.preview,
})}>
<div className="form-fromto-icon">
{props.icon}
</div>
<div className="form-fromto-start">
{props.start}
</div>
<div className="form-fromto-connector">
{props.connector}
</div>
<div className="form-fromto-end">
{props.end}
</div>
</div>
<div
{...props}
className={classNames(
"form-fromto",
props.preview ? "form-fromto-preview" : null,
props.className
)}
/>
)
})
export type FormFromToPartProps = HTMLProps<HTMLDivElement> & {
part: "icon" | "start" | "connector" | "end"
}
export const FormFromToPart = memo((props: FormFromToPartProps) => {
return (
<div
{...props}
className={classNames(
`form-fromto-${props.part}`,
props.className,
)}
/>
)
})