@solidrt/components 0.0.51 → 0.0.52

package/src/types.ts

@@ -1,4 +1,122 @@
-import type { Color, Gradient, LayoutProps } from "@solidrt/core"
+import type {
+  Color,
+  Gradient,
+  LayoutProps,
+  Transition,
+  TransitionEndEvent,
+  TransitionPropName,
+  TransitionProps as CoreTransitionProps,
+} from "@solidrt/core"
+
+// Native transitions through a component. A component is a root view plus
+// the nodes it draws for `style` (a background d-rect, a stroke d-rect for
+// the border), so a declaration names the STYLE properties - backgroundColor,
+// borderColor, borderWidth, borderRadius - next to the view-level ones, and
+// splitTransition hands each entry to the node that owns it. Core's paint
+// names (color, radius, strokeWidth) are deliberately not accepted: on a
+// component they would land on the root view, which has no paint, and be
+// silently ignored.
+//
+// Controls whose paint is their own (Switch knob, Slider thumb, Checkbox
+// mark, ...) take the view-level entries only for now; see
+// okf/backlog/component-transitions-internal-paint.md.
+export type TransitionViewProp =
+  | "opacity"
+  | "x"
+  | "y"
+  | "scale"
+  | "scaleX"
+  | "scaleY"
+  | "rotate"
+  | "rotateX"
+  | "rotateY"
+  | "originX"
+  | "originY"
+  | "perspective"
+  | "clipRadius"
+export type TransitionStyleProp = "backgroundColor" | "borderColor" | "borderWidth" | "borderRadius"
+export type TransitionScrollProp = "scrollX" | "scrollY"
+
+type TransitionEntries<P extends string> = {
+  /** One spec for every property the component animates (no `from`/`exit` here, as in core). */
+  all?: Transition
+  /** Group stagger (ms) for descendant enter/exit animations; see core. */
+  stagger?: number
+} & { [K in P]?: Transition }
+
+/** A component's transition declaration: view-level and style names, `all`, or a shorthand string. */
+export type ComponentTransition<P extends string = TransitionViewProp | TransitionStyleProp> =
+  | TransitionEntries<P>
+  | string
+  | null
+
+export interface TransitionProps<P extends string = TransitionViewProp | TransitionStyleProp> {
+  /**
+   * Animate later writes of the listed properties instead of snapping, like
+   * the core `transition` prop but in the component's own vocabulary:
+   * `transition={{ opacity: "200ms ease-out", backgroundColor: { duration: 300 } }}`.
+   * `all` or a bare string covers every property the component animates.
+   */
+  transition?: ComponentTransition<P>
+  /** A transition settled; `property` is in the component's vocabulary (`backgroundColor`, not `color`). */
+  onTransitionEnd?: (event: { property: P }) => void
+}
+
+/** The core transition declarations for a component's root view and its background/border rects. */
+export type SplitTransition = {
+  root: CoreTransitionProps["transition"]
+  background: CoreTransitionProps["transition"]
+  border: CoreTransitionProps["transition"]
+}
+
+const STYLE_TO_BACKGROUND: Record<string, TransitionPropName> = { backgroundColor: "color", borderRadius: "radius" }
+const STYLE_TO_BORDER: Record<string, TransitionPropName> = {
+  borderColor: "color",
+  borderWidth: "strokeWidth",
+  borderRadius: "radius",
+}
+
+/**
+ * Map a component declaration onto the three nodes a styled component
+ * draws. `all`, a shorthand string and `stagger` apply to every node; named
+ * entries go to the node owning the property. An entry for a node that is
+ * not mounted (no background set) simply never animates.
+ */
+export function splitTransition<P extends string>(t: ComponentTransition<P> | undefined): SplitTransition {
+  if (t == null || typeof t === "string") return { root: t, background: t, border: t }
+  let root: Record<string, unknown> = {}
+  let background: Record<string, unknown> = {}
+  let border: Record<string, unknown> = {}
+  for (let [key, value] of Object.entries(t)) {
+    if (key === "all" || key === "stagger") {
+      root[key] = value
+      background[key] = value
+      border[key] = value
+    } else if (key in STYLE_TO_BACKGROUND || key in STYLE_TO_BORDER) {
+      if (key in STYLE_TO_BACKGROUND) background[STYLE_TO_BACKGROUND[key]!] = value
+      if (key in STYLE_TO_BORDER) border[STYLE_TO_BORDER[key]!] = value
+    } else {
+      root[key] = value
+    }
+  }
+  let pick = (o: Record<string, unknown>) => (Object.keys(o).length ? (o as CoreTransitionProps["transition"]) : undefined)
+  return { root: pick(root), background: pick(background), border: pick(border) }
+}
+
+/** Report a settled core property in the component vocabulary for the node it settled on. */
+export function transitionEndFor<P extends string>(
+  node: "root" | "background" | "border",
+  handler: ((event: { property: P }) => void) | undefined,
+): ((event: TransitionEndEvent) => void) | undefined {
+  if (!handler) return undefined
+  return (e) => {
+    let name: string = e.property
+    if (node === "background") name = e.property === "color" ? "backgroundColor" : "borderRadius"
+    if (node === "border")
+      name = e.property === "color" ? "borderColor" : e.property === "strokeWidth" ? "borderWidth" : "borderRadius"
+    handler({ property: name as P })
+  }
+}
 
 // The split between layout and style follows one rule: layout properties feed
 // into Taffy and changing them triggers a relayout; style properties are

package/src/view.tsx

@@ -1,7 +1,8 @@
 import type { LayoutProps, PointerProps } from "@solidrt/core"
-import type { StyleProps } from "./types"
+import type { StyleProps, TransitionProps } from "./types"
+import { splitTransition, transitionEndFor } from "./types"
 
-export interface ViewProps extends PointerProps {
+export interface ViewProps extends PointerProps, TransitionProps {
   children?: any
   ref?: (node: { id: number }) => void
   layout?: LayoutProps
@@ -13,8 +14,12 @@ export function View(props: ViewProps) {
     props.style?.backgroundColor != null || props.style?.borderRadius != null
   let hasBorder = () => (props.style?.borderWidth ?? 0) > 0
 
+  let split = () => splitTransition(props.transition)
+
   return (
     <view
+      transition={split().root}
+      onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)}
       ref={props.ref}
       {...props.layout}
       x={props.style?.x}
@@ -45,6 +50,8 @@ export function View(props: ViewProps) {
     >
       {hasBackground() ? (
         <d-rect
+          transition={split().background}
+          onTransitionEnd={transitionEndFor("background", props.onTransitionEnd)}
           color={props.style?.backgroundColor ?? "transparent"}
           radius={props.style?.borderRadius}
         />
@@ -53,6 +60,8 @@ export function View(props: ViewProps) {
       {hasBorder() ? (
         <d-rect
           drawStyle="stroke"
+          transition={split().border}
+          onTransitionEnd={transitionEndFor("border", props.onTransitionEnd)}
           color={props.style?.borderColor ?? "transparent"}
           strokeWidth={props.style?.borderWidth}
           radius={props.style?.borderRadius}