cx 25.10.1 → 26.0.1

package/src/util/scrollElementIntoView.ts

@@ -0,0 +1,40 @@
+import { findScrollableParent } from "./findScrollableParent";
+import { getScrollerBoundingClientRect } from "./getScrollerBoundingClientRect";
+
+export function scrollElementIntoView(
+   el: Element,
+   vertical: boolean = true,
+   horizontal: boolean = false,
+   inflate: number = 0,
+   scrollContainer: HTMLElement | null = null
+): void {
+   if (horizontal) {
+      let parentEl = scrollContainer || findScrollableParent(el, true);
+      if (parentEl) {
+         let pr = getScrollerBoundingClientRect(parentEl);
+         let er = el.getBoundingClientRect();
+         let scrollbarWidth = parentEl.offsetWidth - parentEl.clientWidth;
+
+         if (er.right + inflate > pr.right - scrollbarWidth)
+            parentEl.scrollLeft = Math.max(0, parentEl.scrollLeft + er.right + inflate - pr.right + scrollbarWidth);
+
+         if (er.left - inflate < pr.left)
+            parentEl.scrollLeft = Math.max(0, parentEl.scrollLeft + er.left - inflate - pr.left);
+      }
+   }
+
+   if (vertical) {
+      let parentEl = scrollContainer || findScrollableParent(el);
+      if (parentEl) {
+         let pr = getScrollerBoundingClientRect(parentEl);
+         let er = el.getBoundingClientRect();
+         let scrollbarHeight = parentEl.offsetHeight - parentEl.clientHeight;
+
+         if (er.bottom + inflate > pr.bottom - scrollbarHeight)
+            parentEl.scrollTop = Math.max(0, parentEl.scrollTop + er.bottom + inflate - pr.bottom + scrollbarHeight);
+
+         if (er.top - inflate < pr.top)
+            parentEl.scrollTop = Math.max(0, parentEl.scrollTop + er.top - inflate - pr.top);
+      }
+   }
+}

package/src/util/scss/add-rules.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+
 @mixin cx-add-rules($styles) {
    @each $rule, $value in $styles {
       #{$rule}: $value;
@@ -5,7 +7,7 @@
 }
 
 @mixin cx-add-state-rules($state-style-map, $key) {
-   @include cx-add-rules(map-get($state-style-map, $key));
+   @include cx-add-rules(map.get($state-style-map, $key));
 }
 
 @function cx-merge-state-style-maps($state-style-map, $override-style-map) {
@@ -13,11 +15,11 @@
 
    @if ($override-style-map != null) {
       @each $key, $new-value in $override-style-map {
-         $old-value: map-get($state-style-map, $key);
+         $old-value: map.get($state-style-map, $key);
          @if ($old-value != null) {
-            $new-value: map-merge($old-value, $new-value);
+            $new-value: map.merge($old-value, $new-value);
          }
-         $result: map-merge(
+         $result: map.merge(
             $result,
             (
                $key: $new-value,
@@ -30,7 +32,7 @@
 }
 
 @function cx-get-state-rule($state-style-map, $key, $rule, $default: null) {
-   $result: map-get(map-get($state-style-map, $key), $rule);
+   $result: map.get(map.get($state-style-map, $key), $rule);
    @if ($result != null) {
       @return $result;
    }

package/src/util/scss/calc.scss

@@ -1,19 +1,23 @@
+@use "sass:list";
+@use "sass:map";
+@use "sass:math";
+
 @function cx-calc($lengths...) {
    $units: ();
 
    @each $l in $lengths {
-      $unit: unit($l);
-      @if (map-has-key($units, $unit)) {
-         $nl: map-get($units, $unit) + $l;
-         $units: map-merge($units, ($unit: $nl))
+      $unit: math.unit($l);
+      @if (map.has-key($units, $unit)) {
+         $nl: map.get($units, $unit) + $l;
+         $units: map.merge($units, ($unit: $nl))
       } @else {
-         $units: map-merge($units, ($unit: $l))
+         $units: map.merge($units, ($unit: $l))
       }
    }
 
-   $keys: map-keys($units);
-   @if (length($keys) == 1) {
-      @return map-get($units, nth($keys, 1));
+   $keys: map.keys($units);
+   @if (list.length($keys) == 1) {
+      @return map.get($units, list.nth($keys, 1));
    }
 
    $calc: '';

package/src/util/scss/call-once.scss

@@ -1,11 +1,13 @@
+@use "sass:map";
+
 $cx-call-once-data: () !default;
 
 @function cx-call-once($name) {
-   $result: map_get($cx-call-once-data, $name);
-   $cx-call-once-data: map_merge($cx-call-once-data, ($name: true)) !global;
+   $result: map.get($cx-call-once-data, $name);
+   $cx-call-once-data: map.merge($cx-call-once-data, ($name: true)) !global;
    @return $result != true;
 }
 
 @function cx-called-once($name) {
-   @return map_get($cx-call-once-data, $name);
+   @return map.get($cx-call-once-data, $name);
 }

package/src/util/scss/clockwise.scss

@@ -1,47 +1,49 @@
+@use "sass:list";
+
 @function cx-top($list) {
-   @if (length($list) > 0) {
-      @return nth($list, 1);
+   @if (list.length($list) > 0) {
+      @return list.nth($list, 1);
    }
    @return null;
 }
 
 @function cx-right($list) {
-   @if (length($list) == 1) {
-      @return nth($list, 1);
+   @if (list.length($list) == 1) {
+      @return list.nth($list, 1);
    }
-   @if (length($list) > 1) {
-      @return nth($list, 2);
+   @if (list.length($list) > 1) {
+      @return list.nth($list, 2);
    }
    @return null;
 }
 
 @function cx-bottom($list) {
-   @if (length($list) > 2) {
-      @return nth($list, 3);
+   @if (list.length($list) > 2) {
+      @return list.nth($list, 3);
    }
 
-   @if (length($list) >= 1) {
-      @return nth($list, 1);
+   @if (list.length($list) >= 1) {
+      @return list.nth($list, 1);
    }
 
    @return null;
 }
 
 @function cx-left($list) {
-   @if (length($list) == 1) {
-      @return nth($list, 1);
+   @if (list.length($list) == 1) {
+      @return list.nth($list, 1);
    }
 
-   @if (length($list) == 2) {
-      @return nth($list, 2);
+   @if (list.length($list) == 2) {
+      @return list.nth($list, 2);
    }
 
-   @if (length($list) == 3) {
-      @return nth($list, 2);
+   @if (list.length($list) == 3) {
+      @return list.nth($list, 2);
    }
 
-   @if (length($list) == 4) {
-      @return nth($list, 4);
+   @if (list.length($list) == 4) {
+      @return list.nth($list, 4);
    }
    @return null;
 }

package/src/util/scss/colors.scss

@@ -1,8 +1,10 @@
 
+@use "sass:color";
+
 @function cx-whiten($color, $percentage) {
-   @return mix(white, $color, $percentage);
+   @return color.mix(white, $color, $percentage);
 }
 
 @function cx-blacken($color, $percentage) {
-   @return mix(black, $color, $percentage);
+   @return color.mix(black, $color, $percentage);
 }

package/src/util/scss/deep-get.scss

@@ -1,6 +1,8 @@
+@use "sass:map";
+
 @function cx-map-deep-get($map, $keys...){
    @each $key in $keys {
-      $map: map-get($map, $key)
+      $map: map.get($map, $key)
    }
    @if $map != null {
       @return $map

package/src/util/scss/deep-merge.scss

@@ -1,17 +1,20 @@
+@use "sass:map";
+@use "sass:meta";
+
 @function cx-deep-map-merge($parent-map, $child-map) {
 	$result: $parent-map;
 	@each $key, $value in $child-map {
 		//If the parent map does not have the child map's key, or
 		//If their type don't match, or
 		//If they are not both maps,
-		@if (not map-has-key($result, $key)) or (type-of(map-get($result, $key)) != type-of($value)) or (not (type-of(map-get($result, $key)) == map and type-of($value) == map)) {
+		@if (not map.has-key($result, $key)) or (meta.type-of(map.get($result, $key)) != meta.type-of($value)) or (not (meta.type-of(map.get($result, $key)) == map and meta.type-of($value) == map)) {
 			//Simply add that key to the parent map.
-			$result: map-merge($result, ($key: $value));
+			$result: map.merge($result, ($key: $value));
 		}
 		@else {
 			//If they are both maps, we need another non-destructive merger.
 			//Recursive, yay!
-			$result: map-merge($result, ($key: cx-deep-map-merge(map-get($result, $key), $value)));
+			$result: map.merge($result, ($key: cx-deep-map-merge(map.get($result, $key), $value)));
 		}
 	}
 	@return $result;

package/src/util/scss/divide.scss

@@ -1,3 +1,3 @@
-@function cx-divide($a, $b) {
-   @return $a / $b;
-}
+@function cx-divide($a, $b) {
+   @return $a / $b;
+}

package/src/util/scss/include.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @import "call-once";
 @import "colors";
 
@@ -10,9 +11,9 @@ $cx-dependencies: () !default;
 
 @function cx-should-include($name, $once: true) {
    @return (
-       (map-get($cx-excluded, $name) != true) and
+       (map.get($cx-excluded, $name) != true) and
        ($cx-include-all or
-       ($cx-used != null and map-get($cx-used, $name) == true))
+       ($cx-used != null and map.get($cx-used, $name) == true))
    )
    and ($once != true or cx-call-once($name));
 }
@@ -22,12 +23,12 @@ $cx-dependencies: () !default;
 }
 
 @function cx-widget($name) {
-   @if (map-get($cx-excluded, $name)) {
+   @if (map.get($cx-excluded, $name)) {
       @return 0;
    }
-   $cx-used: map_merge($cx-used, ($name: true)) !global;
+   $cx-used: map.merge($cx-used, ($name: true)) !global;
    $dummy: 1;
-   $deps: map-get($cx-dependencies, $name);
+   $deps: map.get($cx-dependencies, $name);
    @if ($deps == null) {
       @return 0;
    }

package/src/util/scss/index.scss

@@ -1,9 +1,9 @@
-@import "add-rules";
-@import "calc";
-@import "call-once";
-@import "clockwise";
-@import "colors";
-@import "deep-merge";
-@import "deep-get";
-@import "include";
-@import "divide";
+@import "add-rules";
+@import "calc";
+@import "call-once";
+@import "clockwise";
+@import "colors";
+@import "deep-merge";
+@import "deep-get";
+@import "include";
+@import "divide";

package/src/util/shallowEquals.ts

@@ -0,0 +1,43 @@
+import {isArray} from './isArray';
+
+export function shallowEquals(v1: any, v2: any): boolean {
+
+   if (v1 === v2)
+      return true;
+
+   let t1 = typeof v1,
+      t2 = typeof v2,
+      k, i;
+
+   if (t1 != t2)
+      return false;
+
+   if (v1 == null || v2 == null) //this captures undefined too
+      return false;
+
+   if (t1 == 'object') {
+
+      if (isArray(v1)) {
+         if (!isArray(v2) || v1.length != v2.length)
+            return false;
+
+         for (i = 0; i < v1.length; i++)
+            if (!shallowEquals(v1[i], v2[i]))
+               return false;
+
+         return true;
+      }
+      else {
+         for (k in v1)
+            if (v1.hasOwnProperty(k) && (!v2.hasOwnProperty(k) || v1[k] !== v2[k]))
+               return false;
+
+         for (k in v2)
+            if (v2.hasOwnProperty(k) && (!v1.hasOwnProperty(k) || v1[k] !== v2[k]))
+               return false;
+
+         return true;
+      }
+   }
+   return v1 === v2;
+}

package/src/util/test/createTestRenderer.tsx

@@ -0,0 +1,12 @@
+/** @jsxImportSource react */
+import renderer from "react-test-renderer";
+import { Cx } from "../../ui/Cx";
+import { View } from "../../data/View";
+
+export function createTestRenderer(store: View, widget: any) {
+   return renderer.create(createTestWidget(store, widget));
+}
+
+export function createTestWidget(store: View, widget: any) {
+   return <Cx widget={widget} store={store} subscribe immediate />;
+}

package/src/util/throttle.ts

@@ -0,0 +1,21 @@
+/**
+ * Returns a function, that, after it is invoked, will trigger the `callback` function,
+ * after the `delay` amount of milliseconds has passed. During that time, all subsequent calls are
+ * ignored. All arguments are passed to the `callback` function.
+ * @param callback
+ * @param delay - Delay in milliseconds.
+ * @returns {Function}
+ */
+export function throttle<T extends (...args: any[]) => void>(callback: T, delay: number): T {
+   let timer: ReturnType<typeof setTimeout> | null;
+
+   return function (this: any, ...args: any[]) {
+      const context = this;
+
+      if (!timer)
+         timer = setTimeout(function () {
+            callback.apply(context, args);
+            timer = null;
+         }, delay);
+   } as T;
+}

package/src/util/validatedDebounce.ts

@@ -0,0 +1,23 @@
+export function validatedDebounce<T extends (...args: any[]) => void>(
+   callback: T,
+   valueGetter: () => any,
+   delay: number
+): T & { reset: T } {
+   let timer: ReturnType<typeof setTimeout> | undefined;
+   let result = function (...args: Parameters<T>) {
+      clearTimeout(timer);
+      let prev = valueGetter();
+      timer = setTimeout(function () {
+         let now = valueGetter();
+         if (prev !== now) return;
+         callback(...args);
+      }, delay);
+   } as T & { reset: T };
+
+   result.reset = function reset(...args: Parameters<T>) {
+      clearTimeout(timer);
+      callback(...args);
+   } as T;
+
+   return result;
+}