steffo/festa
steffo/festa
1
Fork 0
mirror of https://github.com/Steffo99/festa.git synced 2024-10-16 15:07:27 +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) const [isEditing,] = useDefinedContext(EditingContext)
return isEditing ? editing : preview return isEditing ? editing : preview

4
components/editable/EditableDateTimeLocal.tsx
View file

@ -1,7 +1,7 @@
import { HTMLProps } from "react"; import { HTMLProps } from "react";
import { toDatetimeLocal } from "../../utils/dateFields"; import { toDatetimeLocal } from "../../utils/dateFields";
import { FestaMoment } from "../extensions/FestaMoment"; 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 } 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) { export function EditableDateTimeLocal(props: EditableDateTimeLocalProps) {
return ( return (
<Editable <BaseEditable
editing={ editing={
<input <input
type="datetime-local" type="datetime-local"

4
components/editable/EditableFilePicker.tsx
View file

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

4
components/editable/EditableMarkdown.tsx
View file

@ -1,13 +1,13 @@
import { HTMLProps } from "react"; import { HTMLProps } from "react";
import { FestaMarkdown } from "../extensions/FestaMarkdown"; 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. * 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 }) { export function EditableMarkdown(props: HTMLProps<HTMLTextAreaElement> & { value: string }) {
return ( return (
<Editable <BaseEditable
editing={ editing={
<textarea {...props} /> <textarea {...props} />
} }

4
components/editable/EditableText.tsx
View file

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

56
components/form/FormFromTo.tsx
View file

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