@codeleap/mobile 6.0.1 → 6.1.2

package/dist/components/Collapse/index.d.ts

@@ -0,0 +1,6 @@
+import { CollapseProps } from './types';
+export * from './types';
+export declare const Collapse: {
+    (props: CollapseProps): import("react/jsx-runtime").JSX.Element;
+    defaultProps: CollapseProps;
+};

package/dist/components/Collapse/index.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect } from 'react';
+import { View } from 'react-native';
+import Animated, { Easing, useSharedValue, useAnimatedStyle, withTiming, } from 'react-native-reanimated';
+export * from './types';
+export const Collapse = (props) => {
+    const { open, children, style, contentContainerStyle, animationConfig, ...rest } = {
+        ...Collapse.defaultProps,
+        ...props,
+    };
+    const height = useSharedValue(0);
+    const animatedHeight = useSharedValue(0);
+    const onLayout = useCallback((event) => {
+        const measuredHeight = event.nativeEvent.layout.height;
+        if (height.value != 0)
+            return;
+        if (measuredHeight) {
+            height.value = measuredHeight;
+            if (open) {
+                animatedHeight.value = withTiming(measuredHeight, animationConfig);
+            }
+        }
+    }, [open]);
+    const animatedStyle = useAnimatedStyle(() => {
+        return {
+            maxHeight: height.value === 0 ? 'auto' : animatedHeight.value,
+            overflow: 'hidden',
+        };
+    });
+    useEffect(() => {
+        animatedHeight.value = withTiming(open ? height.value : 0, animationConfig);
+    }, [open]);
+    return (_jsx(Animated.View, { ...rest, style: [animatedStyle, style], children: _jsx(View, { onLayout: onLayout, style: contentContainerStyle, children: children }) }));
+};
+const defaultAnimationConfig = {
+    duration: 300,
+    easing: Easing.inOut(Easing.quad),
+};
+Collapse.defaultProps = {
+    animationConfig: defaultAnimationConfig,
+};
+//# sourceMappingURL=index.js.map

package/dist/components/Collapse/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Collapse/index.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACrD,OAAO,EAAqB,IAAI,EAAE,MAAM,cAAc,CAAA;AAEtD,OAAO,QAAQ,EAAE,EACf,MAAM,EACN,cAAc,EACd,gBAAgB,EAChB,UAAU,GACX,MAAM,yBAAyB,CAAA;AAEhC,cAAc,SAAS,CAAA;AAEvB,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAE,EAAE;IAC/C,MAAM,EACJ,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,qBAAqB,EACrB,eAAe,EACf,GAAG,IAAI,EACR,GAAG;QACF,GAAG,QAAQ,CAAC,YAAY;QACxB,GAAG,KAAK;KACT,CAAA;IAED,MAAM,MAAM,GAAG,cAAc,CAAC,CAAC,CAAC,CAAA;IAChC,MAAM,cAAc,GAAG,cAAc,CAAC,CAAC,CAAC,CAAA;IAExC,MAAM,QAAQ,GAAG,WAAW,CAAC,CAAC,KAAwB,EAAE,EAAE;QACxD,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,MAAM,CAAA;QAEtD,IAAI,MAAM,CAAC,KAAK,IAAI,CAAC;YAAE,OAAM;QAE7B,IAAI,cAAc,EAAE,CAAC;YACnB,MAAM,CAAC,KAAK,GAAG,cAAc,CAAA;YAE7B,IAAI,IAAI,EAAE,CAAC;gBACT,cAAc,CAAC,KAAK,GAAG,UAAU,CAAC,cAAc,EAAE,eAAe,CAAC,CAAA;YACpE,CAAC;QACH,CAAC;IACH,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAEV,MAAM,aAAa,GAAG,gBAAgB,CAAC,GAAG,EAAE;QAC1C,OAAO;YACL,SAAS,EAAE,MAAM,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,KAAK;YAC7D,QAAQ,EAAE,QAAQ;SACnB,CAAA;IACH,CAAC,CAAC,CAAA;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,cAAc,CAAC,KAAK,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,eAAe,CAAC,CAAA;IAC7E,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAEV,OAAO,CACL,KAAC,QAAQ,CAAC,IAAI,OAAK,IAAI,EAAE,KAAK,EAAE,CAAC,aAAa,EAAE,KAAK,CAAC,YACpD,KAAC,IAAI,IAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,qBAAqB,YACnD,QAAQ,GACJ,GACO,CACjB,CAAA;AACH,CAAC,CAAA;AAED,MAAM,sBAAsB,GAA4B;IACtD,QAAQ,EAAE,GAAG;IACb,MAAM,EAAE,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC;CAClC,CAAA;AAED,QAAQ,CAAC,YAAY,GAAG;IACtB,eAAe,EAAE,sBAAsB;CACvB,CAAA"}

package/dist/components/Collapse/types.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { ViewProps, ViewStyle } from 'react-native';
+import type { AnimatedProps, ReduceMotion, EasingFunction, EasingFunctionFactory } from 'react-native-reanimated';
+export type CollapseAnimationConfig = {
+    duration?: number;
+    reduceMotion?: ReduceMotion;
+    easing?: EasingFunction | EasingFunctionFactory;
+};
+export type CollapseProps = AnimatedProps<ViewProps> & {
+    open?: boolean;
+    contentContainerStyle?: ViewStyle;
+    children: ReactNode;
+    animationConfig?: CollapseAnimationConfig;
+};

package/dist/components/Collapse/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/components/Collapse/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/Collapse/types.ts"],"names":[],"mappings":""}

package/dist/components/components.d.ts

@@ -43,3 +43,4 @@ export * from './Tabs';
 export * from './CalendarInput';
 export * from './TimeInput';
 export * from './InputOverlay';
+export * from './Collapse';

package/dist/components/components.js

@@ -43,4 +43,5 @@ export * from './Tabs';
 export * from './CalendarInput';
 export * from './TimeInput';
 export * from './InputOverlay';
+export * from './Collapse';
 //# sourceMappingURL=components.js.map

package/dist/components/components.js.map

@@ -1 +1 @@
-{"version":3,"file":"components.js","sourceRoot":"","sources":["../../src/components/components.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,aAAa,CAAA;AAC3B,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAC1B,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAC5B,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,oBAAoB,CAAA;AAClC,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,qBAAqB,CAAA;AACnC,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAC1B,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,oBAAoB,CAAA;AAClC,cAAc,YAAY,CAAA;AAC1B,cAAc,oBAAoB,CAAA;AAClC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,QAAQ,CAAA;AACtB,cAAc,kBAAkB,CAAA;AAChC,cAAc,cAAc,CAAA;AAC5B,cAAc,aAAa,CAAA;AAC3B,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,mBAAmB,CAAA;AACjC,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,kBAAkB,CAAA;AAChC,cAAc,kBAAkB,CAAA;AAChC,cAAc,QAAQ,CAAA;AACtB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,aAAa,CAAA;AAC3B,cAAc,gBAAgB,CAAA"}
+{"version":3,"file":"components.js","sourceRoot":"","sources":["../../src/components/components.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,aAAa,CAAA;AAC3B,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAC1B,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAC5B,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,oBAAoB,CAAA;AAClC,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,qBAAqB,CAAA;AACnC,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAC1B,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,oBAAoB,CAAA;AAClC,cAAc,YAAY,CAAA;AAC1B,cAAc,oBAAoB,CAAA;AAClC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,QAAQ,CAAA;AACtB,cAAc,kBAAkB,CAAA;AAChC,cAAc,cAAc,CAAA;AAC5B,cAAc,aAAa,CAAA;AAC3B,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,mBAAmB,CAAA;AACjC,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,kBAAkB,CAAA;AAChC,cAAc,kBAAkB,CAAA;AAChC,cAAc,QAAQ,CAAA;AACtB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,aAAa,CAAA;AAC3B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,YAAY,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/mobile",
-  "version": "6.0.1",
+  "version": "6.1.2",
   "main": "src/index.ts",
   "license": "UNLICENSED",
   "repository": {
@@ -9,28 +9,28 @@
     "directory": "packages/mobile"
   },
   "devDependencies": {
-    "@codeleap/types": "6.0.1",
-    "@codeleap/utils": "6.0.1",
-    "@codeleap/hooks": "6.0.1",
-    "@codeleap/form": "6.0.1",
-    "@codeleap/query": "6.0.1",
-    "@codeleap/logger": "6.0.1",
-    "@codeleap/config": "6.0.1",
-    "@codeleap/modals": "6.0.1"
+    "@codeleap/types": "6.1.2",
+    "@codeleap/utils": "6.1.2",
+    "@codeleap/hooks": "6.1.2",
+    "@codeleap/form": "6.1.2",
+    "@codeleap/query": "6.1.2",
+    "@codeleap/logger": "6.1.2",
+    "@codeleap/config": "6.1.2",
+    "@codeleap/modals": "6.1.2"
   },
   "scripts": {
     "build": "tsc --build",
     "lint": "eslint -c  .eslintrc.js --fix \"./src/**/*.{ts,tsx,js,jsx}\""
   },
   "peerDependencies": {
-    "@codeleap/types": "6.0.1",
-    "@codeleap/utils": "6.0.1",
-    "@codeleap/hooks": "6.0.1",
-    "@codeleap/form": "6.0.1",
-    "@codeleap/query": "6.0.1",
-    "@codeleap/logger": "6.0.1",
-    "@codeleap/styles": "6.0.1",
-    "@codeleap/modals": "6.0.1",
+    "@codeleap/types": "6.1.2",
+    "@codeleap/utils": "6.1.2",
+    "@codeleap/hooks": "6.1.2",
+    "@codeleap/form": "6.1.2",
+    "@codeleap/query": "6.1.2",
+    "@codeleap/logger": "6.1.2",
+    "@codeleap/styles": "6.1.2",
+    "@codeleap/modals": "6.1.2",
     "@d11/react-native-fast-image": "8.12.0",
     "@react-native-firebase/messaging": "23.4.1",
     "@react-navigation/bottom-tabs": "7.4.9",

package/package.json.bak

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/mobile",
-  "version": "6.0.1",
+  "version": "6.1.2",
   "main": "src/index.ts",
   "license": "UNLICENSED",
   "repository": {

package/src/components/Collapse/index.tsx

@@ -0,0 +1,70 @@
+import React, { useCallback, useEffect } from 'react'
+import { LayoutChangeEvent, View } from 'react-native'
+import { CollapseAnimationConfig, CollapseProps } from './types'
+import Animated, {
+  Easing,
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+} from 'react-native-reanimated'
+
+export * from './types'
+
+export const Collapse = (props: CollapseProps) => {
+  const {
+    open,
+    children,
+    style,
+    contentContainerStyle,
+    animationConfig,
+    ...rest
+  } = {
+    ...Collapse.defaultProps,
+    ...props,
+  }
+
+  const height = useSharedValue(0)
+  const animatedHeight = useSharedValue(0)
+
+  const onLayout = useCallback((event: LayoutChangeEvent) => {
+    const measuredHeight = event.nativeEvent.layout.height
+
+    if (height.value != 0) return
+
+    if (measuredHeight) {
+      height.value = measuredHeight
+
+      if (open) {
+        animatedHeight.value = withTiming(measuredHeight, animationConfig)
+      }
+    }
+  }, [open])
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      maxHeight: height.value === 0 ? 'auto' : animatedHeight.value,
+      overflow: 'hidden',
+    }
+  })
+
+  useEffect(() => {
+    animatedHeight.value = withTiming(open ? height.value : 0, animationConfig)
+  }, [open])
+
+  return (
+    <Animated.View {...rest} style={[animatedStyle, style]}>
+      <View onLayout={onLayout} style={contentContainerStyle}>
+        {children}
+      </View>
+    </Animated.View>
+  )
+}
+
+const defaultAnimationConfig: CollapseAnimationConfig = {
+  duration: 300,
+  easing: Easing.inOut(Easing.quad),
+}
+
+Collapse.defaultProps = {
+  animationConfig: defaultAnimationConfig,
+} as CollapseProps

package/src/components/Collapse/types.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react'
+import { ViewProps, ViewStyle } from 'react-native'
+import type { AnimatedProps, ReduceMotion, EasingFunction, EasingFunctionFactory } from 'react-native-reanimated'
+
+export type CollapseAnimationConfig = {
+  duration?: number
+  reduceMotion?: ReduceMotion
+  easing?: EasingFunction | EasingFunctionFactory
+}
+
+export type CollapseProps = AnimatedProps<ViewProps> & {
+  open?: boolean
+  contentContainerStyle?: ViewStyle
+  children: ReactNode
+  animationConfig?: CollapseAnimationConfig
+}

package/src/components/components.ts

@@ -43,3 +43,4 @@ export * from './Tabs'
 export * from './CalendarInput'
 export * from './TimeInput'
 export * from './InputOverlay'
+export * from './Collapse'