Rename Editable to BaseEditable

components/editable/BaseEditable.tsx

@@ -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

components/editable/EditableDateTimeLocal.tsx

@@ -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"

components/editable/EditableFilePicker.tsx

@@ -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} />
             }

components/editable/EditableMarkdown.tsx

@@ -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} />
             }

components/editable/EditableText.tsx

@@ -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} />
             }

components/form/FormFromTo.tsx

@@ -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,
+            )}
+        />
+    )
+})