react-native-ui-lib 7.46.1 → 7.46.2-snapshot.7306

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-lib",
-  "version": "7.46.1",
+  "version": "7.46.2-snapshot.7306",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",

package/src/hooks/index.d.ts

@@ -10,4 +10,5 @@ export { default as useScrollToItem } from './useScrollToItem';
 export { default as useScrollTo } from './useScrollTo';
 export { default as useThemeProps } from './useThemeProps';
 export { default as useDebounce } from './useDebounce';
+export { default as useKeyboardHeight } from './useKeyboardHeight';
 export * from './useScrollTo';

package/src/hooks/index.js

@@ -10,4 +10,5 @@ export { default as useScrollToItem } from "./useScrollToItem";
 export { default as useScrollTo } from "./useScrollTo";
 export { default as useThemeProps } from "./useThemeProps";
 export { default as useDebounce } from "./useDebounce";
+export { default as useKeyboardHeight } from "./useKeyboardHeight";
 export * from "./useScrollTo";

package/src/hooks/useKeyboardHeight/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Hook that tracks keyboard height and provides real-time updates
+ */
+declare const useKeyboardHeight: () => number;
+export default useKeyboardHeight;

package/src/hooks/useKeyboardHeight/index.js

@@ -0,0 +1,23 @@
+import { useEffect, useState } from 'react';
+import { Keyboard } from 'react-native';
+
+/**
+ * Hook that tracks keyboard height and provides real-time updates
+ */
+const useKeyboardHeight = () => {
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
+  useEffect(() => {
+    const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => {
+      setKeyboardHeight(0);
+    });
+    const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', e => {
+      setKeyboardHeight(e.endCoordinates.height);
+    });
+    return () => {
+      keyboardDidHideListener.remove();
+      keyboardDidShowListener.remove();
+    };
+  }, []);
+  return keyboardHeight;
+};
+export default useKeyboardHeight;

package/src/incubator/gradient/BorderGradient.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { BorderGradientProps } from './types';
+declare const BorderGradient: (props: BorderGradientProps) => React.JSX.Element | null;
+export default BorderGradient;

package/src/incubator/gradient/BorderGradient.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { LinearGradientPackage } from "../../optionalDependencies";
+const LinearGradient = LinearGradientPackage?.default;
+import View from "../../components/view";
+import Spacings from "../../style/spacings";
+import Colors from "../../style/colors";
+import useAngleTransform from "./useAngleTransform";
+const BorderGradient = props => {
+  const {
+    colors,
+    borderWidth = Spacings.s1,
+    borderRadius,
+    children,
+    width,
+    height,
+    angle,
+    ...others
+  } = props;
+  const innerWidth = width ? width - borderWidth * 2 : undefined;
+  const innerHeight = height ? height - borderWidth * 2 : undefined;
+  const {
+    start,
+    end
+  } = useAngleTransform({
+    angle
+  });
+  if (!LinearGradient) {
+    return null;
+  }
+  return <View width={width} height={height}>
+      <LinearGradient colors={colors} start={start} end={end} style={{
+      borderRadius
+    }}>
+        <View bg-white width={innerWidth} height={innerHeight} style={{
+        margin: borderWidth,
+        borderRadius,
+        borderWidth: 0,
+        borderColor: Colors.transparent
+      }} {...others}>
+          {children}
+        </View>
+      </LinearGradient>
+    </View>;
+};
+export default BorderGradient;

package/src/incubator/gradient/CircleGradient.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { CircleGradientProps } from './types';
+declare const CircleGradient: (props: CircleGradientProps) => React.JSX.Element | null;
+export default CircleGradient;

package/src/incubator/gradient/CircleGradient.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { LinearGradientPackage } from "../../optionalDependencies";
+const LinearGradient = LinearGradientPackage?.default;
+import View from "../../components/view";
+import useAngleTransform from "./useAngleTransform";
+const CircleGradient = props => {
+  const {
+    colors,
+    radius,
+    angle,
+    children,
+    ...others
+  } = props;
+  const internalDiameter = radius ? radius * 2 : undefined;
+  const {
+    start,
+    end
+  } = useAngleTransform({
+    angle
+  });
+  if (!LinearGradient) {
+    return null;
+  }
+  return <View width={internalDiameter} height={internalDiameter} style={{
+    borderRadius: 999,
+    overflow: 'hidden'
+  }}>
+      <LinearGradient colors={colors} start={start} end={end}>
+        <View width={internalDiameter} height={internalDiameter} {...others}>
+          {children}
+        </View>
+      </LinearGradient>
+    </View>;
+};
+export default CircleGradient;

package/src/incubator/gradient/RectangleGradient.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { RectangleGradientProps } from './types';
+declare const RectangleGradient: (props: RectangleGradientProps) => React.JSX.Element | null;
+export default RectangleGradient;

package/src/incubator/gradient/RectangleGradient.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { LinearGradientPackage } from "../../optionalDependencies";
+const LinearGradient = LinearGradientPackage?.default;
+import View from "../../components/view";
+import useAngleTransform from "./useAngleTransform";
+const RectangleGradient = props => {
+  const {
+    colors,
+    width,
+    height,
+    angle,
+    children,
+    ...others
+  } = props;
+  const {
+    start,
+    end
+  } = useAngleTransform({
+    angle
+  });
+  if (!LinearGradient) {
+    return null;
+  }
+  return <View width={width} height={height}>
+      <LinearGradient colors={colors} start={start} end={end}>
+        <View width={width} height={height} {...others}>
+          {children}
+        </View>
+      </LinearGradient>
+    </View>;
+};
+export default RectangleGradient;

package/src/incubator/gradient/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { GradientProps } from './types';
+export { GradientProps };
+declare const Gradient: (props: GradientProps) => React.JSX.Element | null;
+export default Gradient;

package/src/incubator/gradient/index.js

@@ -0,0 +1,31 @@
+import React, { useEffect } from 'react';
+import { LinearGradientPackage } from "../../optionalDependencies";
+const LinearGradient = LinearGradientPackage?.default;
+import { LogService } from "../../services";
+import { GradientProps } from "./types";
+import RectangleGradient from "./RectangleGradient";
+import CircleGradient from "./CircleGradient";
+import BorderGradient from "./BorderGradient";
+export { GradientProps };
+const Gradient = props => {
+  const {
+    type = 'rectangle',
+    ...others
+  } = props;
+  useEffect(() => {
+    if (LinearGradient === undefined) {
+      LogService.error(`RNUILib Gradient requires installing "react-native-linear-gradient" dependency`);
+    }
+  }, []);
+  switch (type) {
+    case 'rectangle':
+      return <RectangleGradient {...others} />;
+    case 'circle':
+      return <CircleGradient {...others} />;
+    case 'border':
+      return <BorderGradient {...others} />;
+    default:
+      return null;
+  }
+};
+export default Gradient;

package/src/incubator/gradient/types.d.ts

@@ -0,0 +1,26 @@
+import type { LinearGradientProps } from 'react-native-linear-gradient';
+type CommonGradientProps = Pick<LinearGradientProps, 'colors' | 'children'> & {
+    angle?: number;
+    center?: boolean;
+    centerH?: boolean;
+    centerV?: boolean;
+};
+export type GradientProps = ({
+    type: 'rectangle';
+} & RectangleGradientProps) | ({
+    type: 'circle';
+} & CircleGradientProps) | ({
+    type: 'border';
+} & BorderGradientProps);
+export type RectangleGradientProps = CommonGradientProps & {
+    width?: number;
+    height?: number;
+};
+export type CircleGradientProps = CommonGradientProps & {
+    radius: number;
+};
+export type BorderGradientProps = RectangleGradientProps & {
+    borderWidth?: number;
+    borderRadius?: number;
+};
+export {};

package/src/incubator/gradient/types.js

@@ -0,0 +1 @@
+export {};

package/src/incubator/gradient/useAngleTransform.d.ts

@@ -0,0 +1,27 @@
+declare function getStartEndFromAngle(angle?: number): {
+    start: {
+        x: number;
+        y: number;
+    };
+    end: {
+        x: number;
+        y: number;
+    };
+};
+export declare const _forTesting: {
+    getStartEndFromAngle: typeof getStartEndFromAngle;
+};
+export type AngleTransformProps = {
+    angle?: number;
+};
+declare const useAngleTransform: (props: AngleTransformProps) => {
+    start: {
+        x: number;
+        y: number;
+    };
+    end: {
+        x: number;
+        y: number;
+    };
+};
+export default useAngleTransform;

package/src/incubator/gradient/useAngleTransform.js

@@ -0,0 +1,72 @@
+import { useMemo } from 'react';
+const EPSILON = 1e-12;
+function getStartEndFromAngle(angle = 0) {
+  // Normalize angle to [0, 360)
+  let a = angle % 360;
+  if (a < 0) {
+    a += 360;
+  }
+  const rad = a * Math.PI / 180;
+
+  // Direction vector where 0deg points up, 90deg right, etc.
+  const vx = Math.sin(rad);
+  const vy = -Math.cos(rad);
+
+  // Distance from center (0.5,0.5) to box edge along v
+  const denomX = Math.abs(vx) > EPSILON ? 0.5 / Math.abs(vx) : Number.POSITIVE_INFINITY;
+  const denomY = Math.abs(vy) > EPSILON ? 0.5 / Math.abs(vy) : Number.POSITIVE_INFINITY;
+  const t = Math.min(denomX, denomY);
+  const cx = 0.5;
+  const cy = 0.5;
+  const end = {
+    x: cx + vx * t,
+    y: cy + vy * t
+  };
+  const start = {
+    x: cx - vx * t,
+    y: cy - vy * t
+  };
+
+  // Quantize to avoid tiny floating errors for canonical angles (0, 45, 90, ...).
+  const quantize = v => {
+    if (Math.abs(v - 0) < EPSILON) {
+      return 0;
+    }
+    if (Math.abs(v - 0.5) < EPSILON) {
+      return 0.5;
+    }
+    if (Math.abs(v - 1) < EPSILON) {
+      return 1;
+    }
+    // Clamp just in case of tiny over/underflows
+    if (v < 0) {
+      return 0;
+    }
+    if (v > 1) {
+      return 1;
+    }
+    return v;
+  };
+  return {
+    start: {
+      x: quantize(start.x),
+      y: quantize(start.y)
+    },
+    end: {
+      x: quantize(end.x),
+      y: quantize(end.y)
+    }
+  };
+}
+export const _forTesting = {
+  getStartEndFromAngle
+}; // exporting private functions for testing only
+
+const useAngleTransform = props => {
+  const {
+    angle
+  } = props;
+  const startEnd = useMemo(() => getStartEndFromAngle(angle), [angle]);
+  return startEnd;
+};
+export default useAngleTransform;

package/src/incubator/index.d.ts

@@ -8,3 +8,4 @@ export { default as Slider, SliderRef, SliderProps } from './slider';
 export { default as Dialog, DialogProps, DialogHeaderProps, DialogStatics, DialogImperativeMethods } from './dialog';
 export { default as ChipsInput, ChipsInputProps, ChipsInputChangeReason, ChipsInputChipProps } from '../components/chipsInput';
 export { default as WheelPicker, WheelPickerProps, WheelPickerItemProps, WheelPickerAlign, WheelPickerItemValue } from '../components/WheelPicker';
+export { default as Gradient, GradientProps } from './gradient';

package/src/incubator/index.js

@@ -9,4 +9,5 @@ export { default as Slider, SliderRef, SliderProps } from "./slider";
 export { default as Dialog, DialogProps, DialogHeaderProps, DialogStatics, DialogImperativeMethods } from "./dialog";
 // TODO: delete exports after fully removing from private
 export { default as ChipsInput, ChipsInputProps, ChipsInputChangeReason, ChipsInputChipProps } from "../components/chipsInput";
-export { default as WheelPicker, WheelPickerProps, WheelPickerItemProps, WheelPickerAlign, WheelPickerItemValue } from "../components/WheelPicker";
+export { default as WheelPicker, WheelPickerProps, WheelPickerItemProps, WheelPickerAlign, WheelPickerItemValue } from "../components/WheelPicker";
+export { default as Gradient, GradientProps } from "./gradient";

package/src/optionalDependencies/LinearGradientPackage.d.ts

@@ -1,2 +1,2 @@
-declare let LinearGradientPackage: any;
+declare let LinearGradientPackage: typeof import('react-native-linear-gradient') | undefined;
 export default LinearGradientPackage;

package/src/style/borderRadiuses.d.ts

@@ -7,6 +7,7 @@ export declare const BorderRadiusesLiterals: {
     br40: number;
     br50: number;
     br60: number;
+    br70: number;
     br90: number;
     br100: number;
 };
@@ -22,6 +23,7 @@ declare const borderRadiusesInstance: BorderRadiuses & {
     br40: number;
     br50: number;
     br60: number;
+    br70: number;
     br90: number;
     br100: number;
 };

package/src/style/borderRadiuses.js

@@ -13,6 +13,7 @@ export const BorderRadiusesLiterals /* : IBorderRadiusesLiterals  */ = {
   br40: 12,
   br50: Constants.isIOS ? 15 : 16,
   br60: 20,
+  br70: 24,
   br90: 32,
   br100: 999
 };