cx 25.11.1 → 26.0.1

package/src/widgets/form/ColorPicker.tsx

@@ -0,0 +1,544 @@
+/** @jsxImportSource react */
+import { Widget, VDOM } from "../../ui/Widget";
+import { Field, FieldConfig, FieldInstance } from "./Field";
+import { captureMouseOrTouch, getCursorPos } from "../overlay/captureMouse";
+import { hslToRgb } from "../../util/color/hslToRgb";
+import { rgbToHsl } from "../../util/color/rgbToHsl";
+import { rgbToHex } from "../../util/color/rgbToHex";
+import { parseColor } from "../../util/color/parseColor";
+import { getVendorPrefix } from "../../util/getVendorPrefix";
+import { stopPropagation } from "../../util/eventCallbacks";
+import { isString } from "../../util/isString";
+import { getTopLevelBoundingClientRect } from "../../util/getTopLevelBoundingClientRect";
+import PixelPickerIcon from "../icons/pixel-picker";
+import type { RenderingContext } from "../../ui/RenderingContext";
+import type { Instance } from "../../ui/Instance";
+import { StringProp } from "../../ui/Prop";
+
+// Type declaration for EyeDropper API
+declare global {
+   class EyeDropper {
+      open(): Promise<{ sRGBHex: string }>;
+   }
+   interface Window {
+      EyeDropper: typeof EyeDropper;
+   }
+}
+
+//TODO: Increase HSL precision in calculations, round only RGB values
+//TODO: Resolve alpha input problems
+
+interface ColorState {
+   r: number;
+   g: number;
+   b: number;
+   h: number;
+   s: number;
+   l: number;
+   a: number;
+}
+
+export interface ColorPickerConfig extends FieldConfig {
+   /** Either `rgba`, `hsla` or `hex` value of the selected color. */
+   value?: StringProp;
+
+   /** Format of the color representation. Either `rgba`, `hsla` or `hex`. */
+   format?: "rgba" | "hsla" | "hex";
+
+   /**
+    * A string containing the list of all events that cause that selected value is written to the store.
+    * Default value is `blur change` which means that changes are propagated immediately.
+    */
+   reportOn?: string;
+
+   /** Callback function invoked when the color preview is clicked. */
+   onColorClick?: (e: React.MouseEvent, instance: Instance) => void;
+}
+
+export class ColorPicker extends Field<ColorPickerConfig, FieldInstance<ColorPicker>> {
+   declare format: string;
+   declare reportOn: string;
+   declare onColorClick?: (e: React.MouseEvent, instance: FieldInstance<ColorPicker>) => void;
+
+   constructor(config?: ColorPickerConfig) {
+      super(config);
+   }
+
+   declareData(...args: Record<string, unknown>[]): void {
+      super.declareData(
+         {
+            value: this.emptyValue,
+            format: undefined,
+         },
+         ...args,
+      );
+   }
+
+   renderInput(context: RenderingContext, instance: FieldInstance<ColorPicker>, key: string): React.ReactNode {
+      return <ColorPickerComponent key={key} instance={instance} />;
+   }
+
+   handleEvent(eventType: string, instance: FieldInstance<ColorPicker>, color: ColorState): void {
+      let { data } = instance;
+      if (this.reportOn.indexOf(eventType) != -1) {
+         let value;
+         switch (data.format) {
+            default:
+            case "rgba":
+               value = `rgba(${color.r.toFixed(0)},${color.g.toFixed(0)},${color.b.toFixed(0)},${
+                  Math.round(color.a * 100) / 100
+               })`;
+               break;
+
+            case "hsla":
+               value = `hsla(${color.h.toFixed(0)},${color.s.toFixed(0)}%,${color.l.toFixed(0)}%,${
+                  Math.round(color.a * 100) / 100
+               })`;
+               break;
+
+            case "hex":
+               value = rgbToHex(color.r, color.g, color.b);
+               break;
+         }
+         instance.set("value", value);
+      }
+   }
+}
+
+ColorPicker.prototype.baseClass = "colorpicker";
+ColorPicker.prototype.reportOn = "blur change";
+ColorPicker.prototype.format = "rgba";
+
+Widget.alias("color-picker", ColorPicker);
+
+interface ColorPickerComponentProps {
+   instance: FieldInstance<ColorPicker>;
+}
+
+class ColorPickerComponent extends VDOM.Component<ColorPickerComponentProps, ColorState> {
+   data: Record<string, unknown>;
+
+   constructor(props: ColorPickerComponentProps) {
+      super(props);
+      this.data = props.instance.data;
+      try {
+         this.state = this.parse(props.instance.data.value);
+      } catch (e) {
+         //if web colors are used (e.g. red), fallback to the default color
+         this.state = this.parse(null);
+      }
+   }
+
+   UNSAFE_componentWillReceiveProps(props: ColorPickerComponentProps): void {
+      let { data } = props.instance;
+      let color;
+      try {
+         color = this.parse(data.value);
+      } catch {
+         color = this.parse(null);
+      }
+      if (color.r != this.state.r || color.g != this.state.g || color.b != this.state.b || color.a != this.state.a)
+         this.setState(color);
+   }
+
+   parse(color: string | null): ColorState {
+      let c = parseColor(color);
+      if (c == null) {
+         c = {
+            type: "rgba",
+            r: 128,
+            g: 128,
+            b: 128,
+            a: 0,
+         };
+      }
+
+      c.a = Math.round(c.a * 100) / 100;
+
+      if (c.type == "rgba") {
+         let [h, s, l] = rgbToHsl(c.r, c.g, c.b);
+         return { r: c.r, g: c.g, b: c.b, h, s, l, a: c.a };
+      }
+
+      if (c.type == "hsla") {
+         let [r, g, b] = hslToRgb(c.h, c.s, c.l);
+         r = this.fix255(r);
+         g = this.fix255(g);
+         b = this.fix255(b);
+         return { r: r, g, b, h: c.h, s: c.s, l: c.l, a: c.a };
+      }
+
+      throw new Error(`Color ${color} parsing failed.`);
+   }
+
+   render(): React.ReactNode {
+      let { h, s, l, a, r, g, b } = this.state;
+      let { instance } = this.props;
+      let { widget, data } = instance;
+      let { CSS, baseClass } = widget;
+      let hcolor = `hsl(${h},100%,50%)`;
+      let hsla = `hsla(${h.toFixed(0)},${s.toFixed(0)}%,${l.toFixed(0)}%,${a})`;
+      let rgba = `rgba(${r.toFixed(0)},${g.toFixed(0)},${b.toFixed(0)},${a})`;
+      let hex = rgbToHex(r, g, b);
+      let pixelPicker;
+
+      let alphaGradient = `${getVendorPrefix(
+         "css",
+      )}linear-gradient(left, hsla(${h},${s}%,${l}%,0) 0%, hsla(${h},${s}%,${l}%,1) 100%)`;
+
+      if ("EyeDropper" in window && window.EyeDropper) {
+         pixelPicker = (
+            <div
+               className={CSS.element(baseClass, "pixel-picker")}
+               onClick={(e) => {
+                  const eyeDropper = new EyeDropper();
+                  eyeDropper
+                     .open()
+                     .then((result: { sRGBHex: string }) => {
+                        instance.set("value", result.sRGBHex);
+                     })
+                     .catch((e: any) => {});
+               }}
+            >
+               <PixelPickerIcon />
+            </div>
+         );
+      }
+
+      return (
+         <div
+            className={data.classNames}
+            style={data.style}
+            onBlur={this.onBlur.bind(this)}
+            onMouseDown={stopPropagation}
+            onTouchStart={stopPropagation}
+         >
+            <div
+               className={CSS.element(baseClass, "picker")}
+               style={{ backgroundColor: hcolor }}
+               onMouseDown={this.onSLSelect.bind(this)}
+               onTouchStart={this.onSLSelect.bind(this)}
+            >
+               <div
+                  className={CSS.element(baseClass, "indicator")}
+                  style={{
+                     left: `calc(${s}% - 4px)`,
+                     top: `calc(${100 - l}% - 4px)`,
+                     borderColor: `rgba(${r < 128 ? 255 : 0}, ${g < 128 ? 255 : 0}, ${b < 128 ? 255 : 0}, 0.5)`,
+                  }}
+               />
+            </div>
+            <div className={CSS.element(baseClass, "details")}>
+               <div
+                  className={CSS.element(baseClass, "hue")}
+                  onMouseDown={this.onHueSelect.bind(this)}
+                  onTouchStart={this.onHueSelect.bind(this)}
+                  onWheel={(e) => {
+                     this.onWheel(e, "h", 10);
+                  }}
+               >
+                  <div
+                     className={CSS.element(baseClass, "indicator")}
+                     style={{
+                        left: `calc(${h / 3.6}% - 2px)`,
+                     }}
+                  />
+               </div>
+               <div className={CSS.element(baseClass, "inputs")}>
+                  <label>
+                     {"H "}
+                     <input
+                        value={h.toFixed(0)}
+                        onChange={(e) => {
+                           this.onNumberChange(e, "h");
+                        }}
+                        onWheel={(e) => {
+                           this.onWheel(e, "h", 10);
+                        }}
+                     />
+                  </label>
+                  <label>
+                     {"S "}
+                     <input
+                        value={s.toFixed(0)}
+                        onChange={(e) => {
+                           this.onNumberChange(e, "s");
+                        }}
+                        onWheel={(e) => {
+                           this.onWheel(e, "s", 5);
+                        }}
+                     />
+                  </label>
+                  <label>
+                     {"L "}
+                     <input
+                        value={l.toFixed(0)}
+                        onChange={(e) => {
+                           this.onNumberChange(e, "l");
+                        }}
+                        onWheel={(e) => {
+                           this.onWheel(e, "l", 5);
+                        }}
+                     />
+                  </label>
+                  <label>
+                     {"A "}
+                     <input
+                        value={a}
+                        onChange={(e) => {
+                           this.onNumberChange(e, "a");
+                        }}
+                        onWheel={(e) => {
+                           this.onWheel(e, "a", 0.1);
+                        }}
+                     />
+                  </label>
+               </div>
+               <div
+                  className={CSS.element(baseClass, "alpha")}
+                  onMouseDown={this.onAlphaSelect.bind(this)}
+                  onTouchStart={this.onAlphaSelect.bind(this)}
+                  onWheel={(e) => {
+                     this.onWheel(e, "a", 0.1);
+                  }}
+               >
+                  <div style={{ background: alphaGradient }} />
+                  <div
+                     className={CSS.element(baseClass, "indicator")}
+                     style={{
+                        left: `calc(${a * 100}% - 2px)`,
+                     }}
+                  />
+               </div>
+               <div className={CSS.element(baseClass, "inputs")}>
+                  <label>
+                     {"R "}
+                     <input
+                        value={r.toFixed(0)}
+                        onChange={(e) => {
+                           this.onNumberChange(e, "r");
+                        }}
+                        onWheel={(e) => {
+                           this.onWheel(e, "r", 5);
+                        }}
+                     />
+                  </label>
+                  <label>
+                     {"G "}
+                     <input
+                        value={g.toFixed(0)}
+                        onChange={(e) => {
+                           this.onNumberChange(e, "g");
+                        }}
+                        onWheel={(e) => {
+                           this.onWheel(e, "g", 5);
+                        }}
+                     />
+                  </label>
+                  <label>
+                     {"B "}
+                     <input
+                        value={b.toFixed(0)}
+                        onChange={(e) => {
+                           this.onNumberChange(e, "b");
+                        }}
+                        onWheel={(e) => {
+                           this.onWheel(e, "b", 5);
+                        }}
+                     />
+                  </label>
+                  <label>
+                     {"A "}
+                     <input
+                        value={a}
+                        onChange={(e) => {
+                           this.onNumberChange(e, "a");
+                        }}
+                        onWheel={(e) => {
+                           this.onWheel(e, "a", 0.1);
+                        }}
+                     />
+                  </label>
+               </div>
+               <div className={CSS.element(baseClass, "preview")}>
+                  <div
+                     style={{
+                        display: "flex",
+                        alignItems: "center",
+                     }}
+                  >
+                     <div
+                        className={CSS.element(baseClass, "color")}
+                        onClick={(e) => {
+                           this.onColorClick(e);
+                        }}
+                     >
+                        <div style={{ backgroundColor: hsla }}></div>
+                     </div>
+                  </div>
+                  <div className={CSS.element(baseClass, "values")}>
+                     <input value={hsla} readOnly />
+                     <input value={rgba} readOnly />
+                     <input value={hex} readOnly />
+                  </div>
+                  {pixelPicker}
+               </div>
+            </div>
+         </div>
+      );
+   }
+
+   onColorClick(e: React.MouseEvent): void {
+      let { instance } = this.props;
+      let { widget } = instance;
+
+      if ((widget as ColorPicker).onColorClick) (widget as ColorPicker).onColorClick!(e, instance);
+   }
+
+   onHueSelect(e: React.MouseEvent | React.TouchEvent): void {
+      e.preventDefault();
+      e.stopPropagation();
+
+      let el = e.currentTarget;
+      let bounds = el.getBoundingClientRect();
+
+      let move = (e: MouseEvent) => {
+         let pos = getCursorPos(e);
+         let x = Math.max(0, Math.min(1, (pos.clientX + 1 - bounds.left) / (el as HTMLElement).offsetWidth));
+         this.setColorProp({
+            h: x * 360,
+         });
+      };
+
+      captureMouseOrTouch(e, move);
+      move(e as any);
+   }
+
+   onAlphaSelect(e: React.MouseEvent | React.TouchEvent): void {
+      e.preventDefault();
+      e.stopPropagation();
+
+      let el = e.currentTarget;
+      let bounds = getTopLevelBoundingClientRect(el);
+
+      let move = (e: MouseEvent | React.MouseEvent) => {
+         let pos = getCursorPos(e);
+         let x = Math.max(0, Math.min(1, (pos.clientX + 1 - bounds.left) / (el as HTMLElement).offsetWidth));
+         this.setColorProp({
+            a: x,
+         });
+      };
+
+      captureMouseOrTouch(e, move);
+      move(e as any);
+   }
+
+   onSLSelect(e: React.MouseEvent | React.TouchEvent): void {
+      e.preventDefault();
+      e.stopPropagation();
+
+      let el = e.currentTarget;
+      let bounds = getTopLevelBoundingClientRect(el);
+
+      let move = (e: MouseEvent) => {
+         let pos = getCursorPos(e);
+         let x = Math.max(0, Math.min(1, (pos.clientX + 1 - bounds.left) / (el as HTMLElement).offsetWidth));
+         let y = Math.max(0, Math.min(1, (pos.clientY + 1 - bounds.top) / (el as HTMLElement).offsetWidth));
+         let s = x;
+         let l = 1 - y;
+         this.setColorProp({
+            s: s * 100,
+            l: l * 100,
+         });
+      };
+
+      captureMouseOrTouch(e, move);
+      move(e as any);
+   }
+
+   fix255(v: number): number {
+      return Math.max(0, Math.min(255, Math.round(v)));
+   }
+
+   setColorProp(props: string | Partial<ColorState>, value?: number): void {
+      let propsObj: Partial<ColorState>;
+      if (isString(props)) {
+         propsObj = {
+            [props]: value,
+         };
+      } else {
+         propsObj = props;
+      }
+
+      let state = { ...this.state };
+      let fixAlpha = false;
+
+      for (let prop in propsObj) {
+         let propValue = propsObj[prop as keyof ColorState];
+         if (propValue === undefined) continue;
+
+         switch (prop) {
+            case "h":
+               state.h = Math.min(360, Math.max(0, propValue));
+               [state.r, state.g, state.b] = hslToRgb(state.h, state.s, state.l);
+               fixAlpha = true;
+               break;
+
+            case "s":
+               state.s = Math.min(100, Math.max(0, propValue));
+               [state.r, state.g, state.b] = hslToRgb(state.h, state.s, state.l);
+               fixAlpha = true;
+               break;
+
+            case "l":
+               state.l = Math.min(100, Math.max(0, propValue));
+               [state.r, state.g, state.b] = hslToRgb(state.h, state.s, state.l);
+               fixAlpha = true;
+               break;
+
+            case "r":
+            case "g":
+            case "b":
+               state[prop] = Math.round(Math.min(255, Math.max(0, propValue)));
+               let [h, s, l] = rgbToHsl(state.r, state.g, state.b);
+               state.h = h;
+               state.s = s;
+               state.l = l;
+               fixAlpha = true;
+               break;
+
+            case "a":
+               state.a = Math.round(100 * Math.min(1, Math.max(0, propValue))) / 100;
+               break;
+         }
+      }
+
+      state.r = this.fix255(state.r);
+      state.g = this.fix255(state.g);
+      state.b = this.fix255(state.b);
+
+      if (fixAlpha && state.a === 0) state.a = 1;
+
+      this.setState(state, () => {
+         (this.props.instance.widget as ColorPicker).handleEvent("change", this.props.instance, this.state);
+      });
+   }
+
+   onNumberChange(e: React.ChangeEvent<HTMLInputElement>, prop: keyof ColorState): void {
+      e.preventDefault();
+      e.stopPropagation();
+      let number = parseFloat(e.target.value || "0");
+      this.setColorProp(prop, number);
+   }
+
+   onWheel(e: React.WheelEvent, prop: keyof ColorState, delta: number): void {
+      e.preventDefault();
+      e.stopPropagation();
+      let factor = e.deltaY < 0 ? 1 : -1;
+      this.setColorProp(prop, this.state[prop] + delta * factor);
+   }
+
+   onBlur(): void {
+      (this.props.instance.widget as ColorPicker).handleEvent("blur", this.props.instance, this.state);
+   }
+}

package/src/widgets/form/DateField.ts

@@ -0,0 +1,21 @@
+import { Widget } from "../../ui/Widget";
+import { Localization } from "../../ui/Localization";
+import { DateTimeField, DateTimeFieldConfig } from "./DateTimeField";
+
+export interface DateFieldConfig extends DateTimeFieldConfig {}
+
+export class DateField extends DateTimeField {
+   declare public picker: string;
+   declare public segment: string;
+
+   constructor(config?: DateFieldConfig) {
+      super(config);
+   }
+}
+
+DateField.prototype.picker = "calendar";
+DateField.prototype.segment = "date";
+
+Widget.alias("datefield", DateField);
+Localization.registerPrototype("cx/widgets/DateField", DateField);
+

package/src/widgets/form/DateTimeField.scss

@@ -1,4 +1,6 @@
 
+@use "sass:map";
+
 @mixin cx-datetimefield(
    $name: 'datetimefield',
    $input-state-style-map: $cx-std-field-state-style-map,
@@ -11,9 +13,9 @@
    $width: $cx-default-input-width,
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
 
    .#{$block}#{$name} {
       @include cxb-field($besm, $input-state-style-map, $width: $width, $input: true);