cx 26.4.0 → 26.4.2

package/src/ui/HoverSync.tsx

@@ -1,221 +1,221 @@
-/** @jsxImportSource react */
-/*
-   HoverSync transfers through the context methods for reporting and subscribing to hover data to
-   its descendants. How this should work is that each component can subscribe and unsubscribe
-   to a hover channel and receive info about hover changes.
-   Also, each component should report mouse enter/leave events.
-   Similar to controllers, hover sync should transcend into child contexts.
-*/
-
-import { dummyCallback } from "../util/dummyCallback";
-import { parseStyle } from "../util/parseStyle";
-import { SubscriberList } from "../util/SubscriberList";
-import { StyledContainerBase, StyledContainerConfig } from "./Container";
-import { PureContainerBase, PureContainerConfig } from "./PureContainer";
-import { Instance } from "./Instance";
-import { VDOM } from "./VDOM";
-import { Prop, StyleProp, ClassProp } from "./Prop";
-
-export interface HoverSyncConfig extends PureContainerConfig {}
-
-export class HoverSync extends PureContainerBase<HoverSyncConfig, Instance> {
-  constructor(config?: HoverSyncConfig) {
-    super(config);
-  }
-  initInstance(context: any, instance: any) {
-    let channels: any = {};
-    instance.hoverSync = {
-      report: (channel: string, hoverId: any, active: boolean) => {
-        let ch = channels[channel];
-        if (!ch) return;
-        let state = active && hoverId != null ? hoverId : false;
-        if (ch.state !== state && (ch.state === hoverId || active)) {
-          ch.state = state;
-          ch.subscribers.notify(state);
-        }
-      },
-      subscribe: (channel: string, callback: (state: any) => void) => {
-        let ch = channels[channel];
-        if (!ch)
-          ch = channels[channel] = {
-            subscribers: new SubscriberList(),
-            state: false,
-          };
-        return ch.subscribers.subscribe(callback);
-      },
-    };
-  }
-
-  explore(context: any, instance: any) {
-    context.push("hoverSync", instance.hoverSync);
-    super.explore(context, instance);
-  }
-
-  exploreCleanup(context: any, instance: any) {
-    context.pop("hoverSync");
-  }
-}
-
-interface HoverSyncChildProps {
-  hoverSync: any;
-  hoverChannel: string;
-  hoverId: any;
-  render: (props: any) => any;
-}
-
-interface HoverSyncChildState {
-  hover: boolean;
-}
-
-class HoverSyncChild extends VDOM.Component<
-  HoverSyncChildProps,
-  HoverSyncChildState
-> {
-  declare unsubscribe: any;
-
-  constructor(props: HoverSyncChildProps) {
-    super(props);
-    this.state = { hover: false };
-    this.onMouseMove = this.onMouseMove.bind(this);
-    this.onMouseLeave = this.onMouseLeave.bind(this);
-  }
-
-  onMouseMove() {
-    this.props.hoverSync.report(
-      this.props.hoverChannel,
-      this.props.hoverId,
-      true,
-    );
-  }
-
-  onMouseLeave() {
-    this.props.hoverSync.report(
-      this.props.hoverChannel,
-      this.props.hoverId,
-      false,
-    );
-  }
-
-  componentWillUnmount() {
-    this.unsubscribe();
-  }
-
-  componentDidMount() {
-    this.unsubscribe = this.props.hoverSync.subscribe(
-      this.props.hoverChannel,
-      (hoverId: any) => {
-        let hover = hoverId === this.props.hoverId;
-        if (hover !== this.state.hover) this.setState({ hover });
-      },
-    );
-  }
-
-  render() {
-    return this.props.render({
-      hover: this.state.hover,
-      onMouseLeave: this.onMouseLeave,
-      onMouseMove: this.onMouseMove,
-      key: "child",
-    });
-  }
-}
-
-export function withHoverSync(
-  key: string | number,
-  hoverSync: any,
-  hoverChannel: string | undefined,
-  hoverId: any,
-  render: (props: any) => any,
-) {
-  if (!hoverSync || !hoverChannel || hoverId == null)
-    return render({
-      key,
-      hover: false,
-      onMouseLeave: dummyCallback,
-      onMouseMove: dummyCallback,
-    });
-  return (
-    <HoverSyncChild
-      key={key}
-      hoverSync={hoverSync}
-      hoverChannel={hoverChannel}
-      hoverId={hoverId}
-      render={render}
-    />
-  );
-}
-
-export interface HoverSyncElementConfig extends StyledContainerConfig {
-  hoverChannel?: string;
-  hoverId?: Prop<any>;
-  hoverClass?: ClassProp;
-  hoverStyle?: StyleProp;
-}
-
-export class HoverSyncElement extends StyledContainerBase<
-  HoverSyncElementConfig,
-  Instance
-> {
-  declare hoverChannel: string;
-  declare hoverId?: Prop<any>;
-  declare hoverClass?: ClassProp;
-  declare hoverStyle?: StyleProp;
-
-  constructor(config?: HoverSyncElementConfig) {
-    super(config);
-  }
-
-  declareData(...args: any[]) {
-    super.declareData(...args, {
-      hoverId: undefined,
-      hoverClass: { structured: true },
-      hoverStyle: { structured: true },
-    });
-  }
-
-  prepareData(context: any, instance: any) {
-    instance.hoverSync = context.hoverSync;
-    instance.inSvg = !!context.inSvg;
-    let { data } = instance;
-    data.hoverStyle = parseStyle(data.hoverStyle);
-    super.prepareData(context, instance);
-  }
-
-  render(context: any, instance: any, key: string) {
-    let { data, inSvg } = instance;
-    let { CSS } = this;
-    let children = this.renderChildren(context, instance);
-    let eventHandlers = instance.getJsxEventProps();
-    return withHoverSync(
-      key,
-      instance.hoverSync,
-      this.hoverChannel,
-      data.hoverId,
-      ({ hover, onMouseMove, onMouseLeave, key }: any) => {
-        let style = {
-          ...data.style,
-          ...(hover && data.hoverStyle),
-        };
-        return VDOM.createElement(
-          inSvg ? "g" : "div",
-          {
-            key,
-            className: CSS.expand(
-              data.classNames,
-              CSS.state({ hover }),
-              hover && data.hoverClass,
-            ),
-            style,
-            ...eventHandlers,
-            onMouseLeave,
-            onMouseMove,
-          },
-          children,
-        );
-      },
-    );
-  }
-}
-
-HoverSyncElement.prototype.baseClass = "hoversyncelement";
-HoverSyncElement.prototype.hoverChannel = "default";
+/** @jsxImportSource react */
+/*
+   HoverSync transfers through the context methods for reporting and subscribing to hover data to
+   its descendants. How this should work is that each component can subscribe and unsubscribe
+   to a hover channel and receive info about hover changes.
+   Also, each component should report mouse enter/leave events.
+   Similar to controllers, hover sync should transcend into child contexts.
+*/
+
+import { dummyCallback } from "../util/dummyCallback";
+import { parseStyle } from "../util/parseStyle";
+import { SubscriberList } from "../util/SubscriberList";
+import { StyledContainerBase, StyledContainerConfig } from "./Container";
+import { PureContainerBase, PureContainerConfig } from "./PureContainer";
+import { Instance } from "./Instance";
+import { VDOM } from "./VDOM";
+import { Prop, StyleProp, ClassProp } from "./Prop";
+
+export interface HoverSyncConfig extends PureContainerConfig {}
+
+export class HoverSync extends PureContainerBase<HoverSyncConfig, Instance> {
+  constructor(config?: HoverSyncConfig) {
+    super(config);
+  }
+  initInstance(context: any, instance: any) {
+    let channels: any = {};
+    instance.hoverSync = {
+      report: (channel: string, hoverId: any, active: boolean) => {
+        let ch = channels[channel];
+        if (!ch) return;
+        let state = active && hoverId != null ? hoverId : false;
+        if (ch.state !== state && (ch.state === hoverId || active)) {
+          ch.state = state;
+          ch.subscribers.notify(state);
+        }
+      },
+      subscribe: (channel: string, callback: (state: any) => void) => {
+        let ch = channels[channel];
+        if (!ch)
+          ch = channels[channel] = {
+            subscribers: new SubscriberList(),
+            state: false,
+          };
+        return ch.subscribers.subscribe(callback);
+      },
+    };
+  }
+
+  explore(context: any, instance: any) {
+    context.push("hoverSync", instance.hoverSync);
+    super.explore(context, instance);
+  }
+
+  exploreCleanup(context: any, instance: any) {
+    context.pop("hoverSync");
+  }
+}
+
+interface HoverSyncChildProps {
+  hoverSync: any;
+  hoverChannel: string;
+  hoverId: any;
+  render: (props: any) => any;
+}
+
+interface HoverSyncChildState {
+  hover: boolean;
+}
+
+class HoverSyncChild extends VDOM.Component<
+  HoverSyncChildProps,
+  HoverSyncChildState
+> {
+  declare unsubscribe: any;
+
+  constructor(props: HoverSyncChildProps) {
+    super(props);
+    this.state = { hover: false };
+    this.onMouseMove = this.onMouseMove.bind(this);
+    this.onMouseLeave = this.onMouseLeave.bind(this);
+  }
+
+  onMouseMove() {
+    this.props.hoverSync.report(
+      this.props.hoverChannel,
+      this.props.hoverId,
+      true,
+    );
+  }
+
+  onMouseLeave() {
+    this.props.hoverSync.report(
+      this.props.hoverChannel,
+      this.props.hoverId,
+      false,
+    );
+  }
+
+  componentWillUnmount() {
+    this.unsubscribe();
+  }
+
+  componentDidMount() {
+    this.unsubscribe = this.props.hoverSync.subscribe(
+      this.props.hoverChannel,
+      (hoverId: any) => {
+        let hover = hoverId === this.props.hoverId;
+        if (hover !== this.state.hover) this.setState({ hover });
+      },
+    );
+  }
+
+  render() {
+    return this.props.render({
+      hover: this.state.hover,
+      onMouseLeave: this.onMouseLeave,
+      onMouseMove: this.onMouseMove,
+      key: "child",
+    });
+  }
+}
+
+export function withHoverSync(
+  key: string | number,
+  hoverSync: any,
+  hoverChannel: string | undefined,
+  hoverId: any,
+  render: (props: any) => any,
+) {
+  if (!hoverSync || !hoverChannel || hoverId == null)
+    return render({
+      key,
+      hover: false,
+      onMouseLeave: dummyCallback,
+      onMouseMove: dummyCallback,
+    });
+  return (
+    <HoverSyncChild
+      key={key}
+      hoverSync={hoverSync}
+      hoverChannel={hoverChannel}
+      hoverId={hoverId}
+      render={render}
+    />
+  );
+}
+
+export interface HoverSyncElementConfig extends StyledContainerConfig {
+  hoverChannel?: string;
+  hoverId?: Prop<any>;
+  hoverClass?: ClassProp;
+  hoverStyle?: StyleProp;
+}
+
+export class HoverSyncElement extends StyledContainerBase<
+  HoverSyncElementConfig,
+  Instance
+> {
+  declare hoverChannel: string;
+  declare hoverId?: Prop<any>;
+  declare hoverClass?: ClassProp;
+  declare hoverStyle?: StyleProp;
+
+  constructor(config?: HoverSyncElementConfig) {
+    super(config);
+  }
+
+  declareData(...args: any[]) {
+    super.declareData(...args, {
+      hoverId: undefined,
+      hoverClass: { structured: true },
+      hoverStyle: { structured: true },
+    });
+  }
+
+  prepareData(context: any, instance: any) {
+    instance.hoverSync = context.hoverSync;
+    instance.inSvg = !!context.inSvg;
+    let { data } = instance;
+    data.hoverStyle = parseStyle(data.hoverStyle);
+    super.prepareData(context, instance);
+  }
+
+  render(context: any, instance: any, key: string) {
+    let { data, inSvg } = instance;
+    let { CSS } = this;
+    let children = this.renderChildren(context, instance);
+    let eventHandlers = instance.getJsxEventProps();
+    return withHoverSync(
+      key,
+      instance.hoverSync,
+      this.hoverChannel,
+      data.hoverId,
+      ({ hover, onMouseMove, onMouseLeave, key }: any) => {
+        let style = {
+          ...data.style,
+          ...(hover && data.hoverStyle),
+        };
+        return VDOM.createElement(
+          inSvg ? "g" : "div",
+          {
+            key,
+            className: CSS.expand(
+              data.classNames,
+              CSS.state({ hover }),
+              hover && data.hoverClass,
+            ),
+            style,
+            ...eventHandlers,
+            onMouseLeave,
+            onMouseMove,
+          },
+          children,
+        );
+      },
+    );
+  }
+}
+
+HoverSyncElement.prototype.baseClass = "hoversyncelement";
+HoverSyncElement.prototype.hoverChannel = "default";