cx 26.4.0 → 26.4.2

package/src/widgets/form/Wheel.tsx

@@ -1,309 +1,309 @@
-/** @jsxImportSource react */
-
-import { VDOM } from "../../ui/Widget";
-import { PureContainerBase, PureContainerConfig } from "../../ui/PureContainer";
-import { KeyCode } from "../../util/KeyCode";
-import { Icon } from "../Icon";
-import { addEventListenerWithOptions } from "../../util";
-import type { RenderingContext } from "../../ui/RenderingContext";
-import type { Instance } from "../../ui/Instance";
-import type { CSS } from "../../ui/CSS";
-import { Prop, StructuredProp } from "../../ui/Prop";
-
-export interface WheelConfig extends PureContainerConfig {
-   /** The selected value. */
-   value?: Prop<any>;
-
-   /** Array of available options. */
-   options?: StructuredProp;
-
-   /** Number of visible options in the wheel. Default is 3. */
-   size?: number;
-}
-
-export class Wheel extends PureContainerBase<WheelConfig> {
-   declare size: number;
-   declare baseClass: string;
-
-   declareData(...args: Record<string, unknown>[]): void {
-      return super.declareData(...args, {
-         value: undefined,
-         options: undefined,
-      });
-   }
-
-   render(context: RenderingContext, instance: Instance, key: string): React.ReactNode {
-      let { data } = instance;
-      let { value, options } = data;
-      let index = options.findIndex((a: any) => a.id === value);
-      if (index === -1) index = Math.floor(options.length / 2);
-
-      return (
-         <WheelComponent
-            key={key}
-            size={this.size}
-            focusable
-            CSS={this.CSS}
-            baseClass={this.baseClass}
-            className={data.classNames}
-            style={data.style}
-            index={index}
-            onChange={(newIndex) => {
-               let option = options[newIndex];
-               instance.set("value", option.id);
-            }}
-         >
-            {options.map((o: any, i: number) => (
-               <span key={0}>{o.text}</span>
-            ))}
-         </WheelComponent>
-      );
-   }
-}
-
-Wheel.prototype.baseClass = "wheel";
-Wheel.prototype.size = 3;
-Wheel.prototype.styled = true;
-
-export interface WheelComponentProps {
-   size: number;
-   children: React.ReactNode[];
-   CSS: typeof CSS;
-   baseClass: string;
-   active?: boolean;
-   className?: string;
-   style?: React.CSSProperties;
-   index?: number;
-   onChange: (newIndex: number) => void;
-   onPipeKeyDown?: (fn: (e: React.KeyboardEvent) => void) => void;
-   onMouseDown?: () => void;
-   focusable?: boolean;
-}
-
-interface WheelComponentState {
-   wheelHeight?: number;
-}
-
-export class WheelComponent extends VDOM.Component<WheelComponentProps, WheelComponentState> {
-   index: number;
-   wheelEl!: HTMLDivElement;
-   scrollEl!: HTMLDivElement;
-   unsubscribeOnWheel!: () => void;
-   declare scrolling?: boolean;
-
-   constructor(props: WheelComponentProps) {
-      super(props);
-      this.state = {};
-      this.index = props.index || 0;
-      this.wheelRef = (el: HTMLDivElement | null) => {
-         if (el) this.wheelEl = el;
-      };
-      this.scrollRef = (el: HTMLDivElement | null) => {
-         if (el) this.scrollEl = el;
-      };
-      this.onWheel = this.onWheel.bind(this);
-      this.onKeyDown = this.onKeyDown.bind(this);
-   }
-
-   wheelRef: (el: HTMLDivElement | null) => void;
-   scrollRef: (el: HTMLDivElement | null) => void;
-
-   render(): React.ReactNode {
-      let { size, children, CSS, baseClass, active, className, style, onMouseDown } = this.props;
-      let optionClass = CSS.element(baseClass, "option");
-      let dummyClass = CSS.element(baseClass, "option", { dummy: true });
-
-      let tpad = [],
-         bpad = [],
-         padSize = 0;
-
-      for (let i = 0; i < (size - 1) / 2; i++) {
-         tpad.push({ key: -1 - i, child: children[0], cls: dummyClass });
-         bpad.push({ key: -100 - i, child: children[0], cls: dummyClass });
-         padSize++;
-      }
-
-      let displayedOptions = [
-         ...tpad,
-         ...children.map((c, i) => ({
-            key: i,
-            child: c,
-            cls: optionClass,
-         })),
-         ...bpad,
-      ];
-
-      if (!this.state.wheelHeight) displayedOptions = displayedOptions.slice(this.index, this.index + size);
-
-      return (
-         <div
-            tabIndex={this.props.focusable ? 0 : undefined}
-            className={className || CSS.element(baseClass, "container", { active })}
-            style={style}
-            onKeyDown={this.onKeyDown}
-         >
-            <div
-               className={CSS.element(baseClass, "clip")}
-               onMouseDown={onMouseDown}
-            >
-               <div
-                  className={CSS.element(baseClass, "vscroll")}
-                  ref={this.scrollRef}
-                  onTouchStart={this.onTouchStart.bind(this)}
-                  onTouchEnd={this.onTouchEnd.bind(this)}
-               >
-                  <div
-                     className={CSS.element(baseClass, "wheel")}
-                     style={{
-                        height: this.state.wheelHeight,
-                     }}
-                     ref={this.wheelRef}
-                  >
-                     {displayedOptions.map((opt) => (
-                        <div key={opt.key} className={opt.cls}>
-                           {opt.child}
-                        </div>
-                     ))}
-                  </div>
-               </div>
-               <div
-                  className={CSS.element(baseClass, "mask")}
-                  style={{
-                     top: `0`,
-                     bottom: `${(50 + 50 / size).toFixed(3)}%`,
-                  }}
-               />
-               <div
-                  className={CSS.element(baseClass, "mask")}
-                  style={{
-                     top: `${(50 + 50 / size).toFixed(3)}%`,
-                     bottom: `0`,
-                  }}
-               />
-               <div
-                  className={CSS.element(baseClass, "selection")}
-                  style={{
-                     height: `${(100 / size).toFixed(3)}%`,
-                     top: `${(50 - 50 / size).toFixed(3)}%`,
-                  }}
-               />
-            </div>
-            <div
-               className={CSS.element(baseClass, "arrow-up")}
-               onClick={(e) => {
-                  e.preventDefault();
-                  this.select(this.index - 1);
-               }}
-            >
-               {Icon.render("drop-down", { className: CSS.element(baseClass, "arrow-icon") })}
-            </div>
-            <div
-               className={CSS.element(baseClass, "arrow-down")}
-               onClick={(e) => {
-                  e.preventDefault();
-                  this.select(this.index + 1);
-               }}
-            >
-               {Icon.render("drop-down", { className: CSS.element(baseClass, "arrow-icon") })}
-            </div>
-         </div>
-      );
-   }
-
-   componentDidMount(): void {
-      this.unsubscribeOnWheel = addEventListenerWithOptions(this.wheelEl, "wheel", this.onWheel, { passive: false });
-
-      this.setState(
-         {
-            wheelHeight: this.wheelEl.offsetHeight,
-         },
-         () => {
-            if (this.state.wheelHeight !== undefined) {
-               this.scrollEl.scrollTop = (this.index * this.state.wheelHeight) / this.props.size;
-            }
-         },
-      );
-
-      if (this.props.onPipeKeyDown) this.props.onPipeKeyDown(this.onKeyDown);
-   }
-
-   UNSAFE_componentWillReceiveProps(props: WheelComponentProps): void {
-      this.index = props.index || 0;
-      this.scrollTo();
-   }
-
-   componentWillUnmount(): void {
-      this.scrolling = false;
-      this.unsubscribeOnWheel();
-   }
-
-   onKeyDown(e: React.KeyboardEvent): void {
-      switch (e.keyCode) {
-         case KeyCode.up:
-            e.preventDefault();
-            this.select(this.index - 1);
-            break;
-
-         case KeyCode.down:
-            e.preventDefault();
-            this.select(this.index + 1);
-            break;
-      }
-   }
-
-   onWheel(e: WheelEvent): void {
-      e.preventDefault();
-      let index = this.index;
-      if (e.deltaY > 0) index++;
-      else index--;
-      this.select(index);
-   }
-
-   onTouchStart(e: React.TouchEvent): void {
-      this.scrolling = false;
-   }
-
-   onTouchEnd(e: React.TouchEvent): void {
-      let { size } = this.props;
-      if (this.state.wheelHeight !== undefined) {
-         let index = Math.round(this.scrollEl.scrollTop / (this.state.wheelHeight / size));
-         this.select(index);
-      }
-   }
-
-   select(newIndex: number): void {
-      let { children } = this.props;
-      newIndex = Math.max(0, Math.min(children.length - 1, newIndex));
-      if (this.index !== newIndex) {
-         this.index = newIndex;
-         this.props.onChange(newIndex);
-      }
-      this.scrollTo();
-   }
-
-   scrollTo(): void {
-      let { size } = this.props;
-
-      let callback = (): void => {
-         if (!this.scrolling || this.state.wheelHeight === undefined) return;
-
-         let x = (this.index * this.state.wheelHeight) / size;
-         let delta = Math.round(x - this.scrollEl.scrollTop);
-         if (delta === 0) {
-            this.scrolling = false;
-            return;
-         }
-         let sign = delta > 0 ? 1 : -1;
-         delta = Math.abs(delta) / 10;
-         if (delta < 1) delta = 1;
-
-         this.scrollEl.scrollTop += sign * delta;
-         requestAnimationFrame(callback);
-      };
-
-      if (!this.scrolling) {
-         this.scrolling = true;
-         requestAnimationFrame(callback);
-      }
-   }
-}
+/** @jsxImportSource react */
+
+import { VDOM } from "../../ui/Widget";
+import { PureContainerBase, PureContainerConfig } from "../../ui/PureContainer";
+import { KeyCode } from "../../util/KeyCode";
+import { Icon } from "../Icon";
+import { addEventListenerWithOptions } from "../../util";
+import type { RenderingContext } from "../../ui/RenderingContext";
+import type { Instance } from "../../ui/Instance";
+import type { CSS } from "../../ui/CSS";
+import { Prop, StructuredProp } from "../../ui/Prop";
+
+export interface WheelConfig extends PureContainerConfig {
+   /** The selected value. */
+   value?: Prop<any>;
+
+   /** Array of available options. */
+   options?: StructuredProp;
+
+   /** Number of visible options in the wheel. Default is 3. */
+   size?: number;
+}
+
+export class Wheel extends PureContainerBase<WheelConfig> {
+   declare size: number;
+   declare baseClass: string;
+
+   declareData(...args: Record<string, unknown>[]): void {
+      return super.declareData(...args, {
+         value: undefined,
+         options: undefined,
+      });
+   }
+
+   render(context: RenderingContext, instance: Instance, key: string): React.ReactNode {
+      let { data } = instance;
+      let { value, options } = data;
+      let index = options.findIndex((a: any) => a.id === value);
+      if (index === -1) index = Math.floor(options.length / 2);
+
+      return (
+         <WheelComponent
+            key={key}
+            size={this.size}
+            focusable
+            CSS={this.CSS}
+            baseClass={this.baseClass}
+            className={data.classNames}
+            style={data.style}
+            index={index}
+            onChange={(newIndex) => {
+               let option = options[newIndex];
+               instance.set("value", option.id);
+            }}
+         >
+            {options.map((o: any, i: number) => (
+               <span key={0}>{o.text}</span>
+            ))}
+         </WheelComponent>
+      );
+   }
+}
+
+Wheel.prototype.baseClass = "wheel";
+Wheel.prototype.size = 3;
+Wheel.prototype.styled = true;
+
+export interface WheelComponentProps {
+   size: number;
+   children: React.ReactNode[];
+   CSS: typeof CSS;
+   baseClass: string;
+   active?: boolean;
+   className?: string;
+   style?: React.CSSProperties;
+   index?: number;
+   onChange: (newIndex: number) => void;
+   onPipeKeyDown?: (fn: (e: React.KeyboardEvent) => void) => void;
+   onMouseDown?: () => void;
+   focusable?: boolean;
+}
+
+interface WheelComponentState {
+   wheelHeight?: number;
+}
+
+export class WheelComponent extends VDOM.Component<WheelComponentProps, WheelComponentState> {
+   index: number;
+   wheelEl!: HTMLDivElement;
+   scrollEl!: HTMLDivElement;
+   unsubscribeOnWheel!: () => void;
+   declare scrolling?: boolean;
+
+   constructor(props: WheelComponentProps) {
+      super(props);
+      this.state = {};
+      this.index = props.index || 0;
+      this.wheelRef = (el: HTMLDivElement | null) => {
+         if (el) this.wheelEl = el;
+      };
+      this.scrollRef = (el: HTMLDivElement | null) => {
+         if (el) this.scrollEl = el;
+      };
+      this.onWheel = this.onWheel.bind(this);
+      this.onKeyDown = this.onKeyDown.bind(this);
+   }
+
+   wheelRef: (el: HTMLDivElement | null) => void;
+   scrollRef: (el: HTMLDivElement | null) => void;
+
+   render(): React.ReactNode {
+      let { size, children, CSS, baseClass, active, className, style, onMouseDown } = this.props;
+      let optionClass = CSS.element(baseClass, "option");
+      let dummyClass = CSS.element(baseClass, "option", { dummy: true });
+
+      let tpad = [],
+         bpad = [],
+         padSize = 0;
+
+      for (let i = 0; i < (size - 1) / 2; i++) {
+         tpad.push({ key: -1 - i, child: children[0], cls: dummyClass });
+         bpad.push({ key: -100 - i, child: children[0], cls: dummyClass });
+         padSize++;
+      }
+
+      let displayedOptions = [
+         ...tpad,
+         ...children.map((c, i) => ({
+            key: i,
+            child: c,
+            cls: optionClass,
+         })),
+         ...bpad,
+      ];
+
+      if (!this.state.wheelHeight) displayedOptions = displayedOptions.slice(this.index, this.index + size);
+
+      return (
+         <div
+            tabIndex={this.props.focusable ? 0 : undefined}
+            className={className || CSS.element(baseClass, "container", { active })}
+            style={style}
+            onKeyDown={this.onKeyDown}
+         >
+            <div
+               className={CSS.element(baseClass, "clip")}
+               onMouseDown={onMouseDown}
+            >
+               <div
+                  className={CSS.element(baseClass, "vscroll")}
+                  ref={this.scrollRef}
+                  onTouchStart={this.onTouchStart.bind(this)}
+                  onTouchEnd={this.onTouchEnd.bind(this)}
+               >
+                  <div
+                     className={CSS.element(baseClass, "wheel")}
+                     style={{
+                        height: this.state.wheelHeight,
+                     }}
+                     ref={this.wheelRef}
+                  >
+                     {displayedOptions.map((opt) => (
+                        <div key={opt.key} className={opt.cls}>
+                           {opt.child}
+                        </div>
+                     ))}
+                  </div>
+               </div>
+               <div
+                  className={CSS.element(baseClass, "mask")}
+                  style={{
+                     top: `0`,
+                     bottom: `${(50 + 50 / size).toFixed(3)}%`,
+                  }}
+               />
+               <div
+                  className={CSS.element(baseClass, "mask")}
+                  style={{
+                     top: `${(50 + 50 / size).toFixed(3)}%`,
+                     bottom: `0`,
+                  }}
+               />
+               <div
+                  className={CSS.element(baseClass, "selection")}
+                  style={{
+                     height: `${(100 / size).toFixed(3)}%`,
+                     top: `${(50 - 50 / size).toFixed(3)}%`,
+                  }}
+               />
+            </div>
+            <div
+               className={CSS.element(baseClass, "arrow-up")}
+               onClick={(e) => {
+                  e.preventDefault();
+                  this.select(this.index - 1);
+               }}
+            >
+               {Icon.render("drop-down", { className: CSS.element(baseClass, "arrow-icon") })}
+            </div>
+            <div
+               className={CSS.element(baseClass, "arrow-down")}
+               onClick={(e) => {
+                  e.preventDefault();
+                  this.select(this.index + 1);
+               }}
+            >
+               {Icon.render("drop-down", { className: CSS.element(baseClass, "arrow-icon") })}
+            </div>
+         </div>
+      );
+   }
+
+   componentDidMount(): void {
+      this.unsubscribeOnWheel = addEventListenerWithOptions(this.wheelEl, "wheel", this.onWheel, { passive: false });
+
+      this.setState(
+         {
+            wheelHeight: this.wheelEl.offsetHeight,
+         },
+         () => {
+            if (this.state.wheelHeight !== undefined) {
+               this.scrollEl.scrollTop = (this.index * this.state.wheelHeight) / this.props.size;
+            }
+         },
+      );
+
+      if (this.props.onPipeKeyDown) this.props.onPipeKeyDown(this.onKeyDown);
+   }
+
+   UNSAFE_componentWillReceiveProps(props: WheelComponentProps): void {
+      this.index = props.index || 0;
+      this.scrollTo();
+   }
+
+   componentWillUnmount(): void {
+      this.scrolling = false;
+      this.unsubscribeOnWheel();
+   }
+
+   onKeyDown(e: React.KeyboardEvent): void {
+      switch (e.keyCode) {
+         case KeyCode.up:
+            e.preventDefault();
+            this.select(this.index - 1);
+            break;
+
+         case KeyCode.down:
+            e.preventDefault();
+            this.select(this.index + 1);
+            break;
+      }
+   }
+
+   onWheel(e: WheelEvent): void {
+      e.preventDefault();
+      let index = this.index;
+      if (e.deltaY > 0) index++;
+      else index--;
+      this.select(index);
+   }
+
+   onTouchStart(e: React.TouchEvent): void {
+      this.scrolling = false;
+   }
+
+   onTouchEnd(e: React.TouchEvent): void {
+      let { size } = this.props;
+      if (this.state.wheelHeight !== undefined) {
+         let index = Math.round(this.scrollEl.scrollTop / (this.state.wheelHeight / size));
+         this.select(index);
+      }
+   }
+
+   select(newIndex: number): void {
+      let { children } = this.props;
+      newIndex = Math.max(0, Math.min(children.length - 1, newIndex));
+      if (this.index !== newIndex) {
+         this.index = newIndex;
+         this.props.onChange(newIndex);
+      }
+      this.scrollTo();
+   }
+
+   scrollTo(): void {
+      let { size } = this.props;
+
+      let callback = (): void => {
+         if (!this.scrolling || this.state.wheelHeight === undefined) return;
+
+         let x = (this.index * this.state.wheelHeight) / size;
+         let delta = Math.round(x - this.scrollEl.scrollTop);
+         if (delta === 0) {
+            this.scrolling = false;
+            return;
+         }
+         let sign = delta > 0 ? 1 : -1;
+         delta = Math.abs(delta) / 10;
+         if (delta < 1) delta = 1;
+
+         this.scrollEl.scrollTop += sign * delta;
+         requestAnimationFrame(callback);
+      };
+
+      if (!this.scrolling) {
+         this.scrolling = true;
+         requestAnimationFrame(callback);
+      }
+   }
+}

package/src/widgets/form/index.scss

@@ -1,22 +1,22 @@
-@use "Field";
-@use "Label";
-@use "TextField";
-@use "NumberField";
-@use "Calendar";
-@use "LookupField";
-@use "Select";
-@use "TextArea";
-@use "Checkbox";
-@use "Radio";
-@use "ColorPicker";
-@use "ColorField";
-@use "MonthPicker";
-@use "MonthField";
-@use "UploadButton";
-@use "Slider";
-@use "ValidationError";
-@use "Switch";
-@use "HelpText";
-@use "Wheel";
-@use "DateTimePicker";
-@use "DateTimeField";
+@use "Field";
+@use "Label";
+@use "TextField";
+@use "NumberField";
+@use "Calendar";
+@use "LookupField";
+@use "Select";
+@use "TextArea";
+@use "Checkbox";
+@use "Radio";
+@use "ColorPicker";
+@use "ColorField";
+@use "MonthPicker";
+@use "MonthField";
+@use "UploadButton";
+@use "Slider";
+@use "ValidationError";
+@use "Switch";
+@use "HelpText";
+@use "Wheel";
+@use "DateTimePicker";
+@use "DateTimeField";