@codeleap/mobile 2.3.28 → 2.4.0

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

@@ -3,12 +3,15 @@ import { ComponentVariants, FormTypes } from '@codeleap/common';
 import { ComponentPropsWithoutRef } from 'react';
 import { Image as NativeImage, ImageStyle, StyleProp, TextStyle, ViewStyle } from 'react-native';
 import { FastImage } from '../../modules/fastImage';
-import { ImageStyles } from './styles';
+import { ImageComposition, ImageStyles } from './styles';
+import { LoadingOverlayProps } from '../LoadingOverlay';
+import { StylesOf } from '../../types';
 export * from './styles';
 declare type NativeImageProps = ComponentPropsWithoutRef<typeof NativeImage>;
 export declare type ImageProps = Omit<NativeImageProps, 'source' | 'style'> & {
     variants?: ComponentVariants<typeof ImageStyles>['variants'];
     fast?: boolean;
+    styles?: StylesOf<ImageComposition>;
     style?: StyleProp<ImageStyle | TextStyle | ViewStyle>;
     source: (NativeImageProps['source'] & {
         priority?: keyof typeof FastImage.priority;
@@ -16,6 +19,7 @@ export declare type ImageProps = Omit<NativeImageProps, 'source' | 'style'> & {
     resizeMode?: keyof typeof FastImage.resizeMode;
     spotlight?: string;
     maintainAspectRatioFrom?: 'width' | 'height' | 'none';
+    withLoadingOverlay?: boolean | React.FC<LoadingOverlayProps>;
 };
 export declare const ImageComponent: React.FC<ImageProps>;
 export declare const Image: React.NamedExoticComponent<ImageProps>;

package/dist/components/Image/index.js

@@ -41,10 +41,12 @@ var fastImage_1 = require("../../modules/fastImage");
 var Spotlight_1 = require("../ImageView/Spotlight");
 var Touchable_1 = require("../Touchable");
 var utils_1 = require("../../utils");
+var LoadingOverlay_1 = require("../LoadingOverlay");
 __exportStar(require("./styles"), exports);
 var ImageComponent = function (props) {
-    var variants = props.variants, style = props.style, _a = props.fast, fast = _a === void 0 ? true : _a, _b = props.spotlight, spotlight = _b === void 0 ? null : _b, _c = props.resizeMode, resizeMode = _c === void 0 ? 'contain' : _c, source = props.source, _d = props.maintainAspectRatioFrom, maintainAspectRatioFrom = _d === void 0 ? 'height' : _d, imageProps = __rest(props, ["variants", "style", "fast", "spotlight", "resizeMode", "source", "maintainAspectRatioFrom"]);
-    var variantStyles = (0, common_1.useDefaultComponentStyle)('u:Image', { variants: variants });
+    var variants = props.variants, style = props.style, _a = props.styles, componentStyleSheet = _a === void 0 ? {} : _a, _b = props.fast, fast = _b === void 0 ? true : _b, _c = props.spotlight, spotlight = _c === void 0 ? null : _c, _d = props.resizeMode, resizeMode = _d === void 0 ? 'contain' : _d, source = props.source, _e = props.withLoadingOverlay, withLoadingOverlay = _e === void 0 ? false : _e, _f = props.maintainAspectRatioFrom, maintainAspectRatioFrom = _f === void 0 ? 'height' : _f, imageProps = __rest(props, ["variants", "style", "styles", "fast", "spotlight", "resizeMode", "source", "withLoadingOverlay", "maintainAspectRatioFrom"]);
+    var variantStyles = (0, common_1.useDefaultComponentStyle)('u:Image', { variants: variants, styles: componentStyleSheet, transform: react_native_1.StyleSheet.flatten });
+    var _g = React.useState(false), loading = _g[0], setLoading = _g[1];
     var styles = react_native_1.StyleSheet.flatten([variantStyles.wrapper, style]);
     var imSource = source;
     if ((0, utils_1.isFile)(imSource)) {
@@ -82,17 +84,25 @@ var ImageComponent = function (props) {
             return null;
         }
     }, [maintainAspectRatioFrom, imSource]);
+    var loadProps = {
+        onLoadStart: function () { return setLoading(true); }, onLoadEnd: function () { return setLoading(false); }
+    };
+    var Loading = common_1.TypeGuards.isFunction(withLoadingOverlay) ? withLoadingOverlay : LoadingOverlay_1.LoadingOverlay;
+    var showLoading = !!withLoadingOverlay;
+    var overlayStyle = React.useMemo(function () { return (0, common_1.getNestedStylesByKey)('overlay', variantStyles); }, [variantStyles]);
+    var loadingElement = showLoading ? (<Loading visible={loading} styles={overlayStyle}/>) : null;
     if (fast) {
         return (<Wrapper {...wrapperProps}>
 
         <fastImage_1.FastImage style={[aspectRatioStyle, styles]} 
         // @ts-ignore
-        tintColor={styles === null || styles === void 0 ? void 0 : styles.tintColor} source={imSource} resizeMode={fastImage_1.FastImage.resizeMode[resizeMode || 'contain']} {...imageProps}/>
+        tintColor={styles === null || styles === void 0 ? void 0 : styles.tintColor} source={imSource} resizeMode={fastImage_1.FastImage.resizeMode[resizeMode || 'contain']} {...loadProps} {...imageProps}/>
+        {loadingElement}
       </Wrapper>);
     }
     return <Wrapper {...wrapperProps}>
-    <react_native_1.Image style={[aspectRatioStyle, styles]} resizeMode={resizeMode} source={imSource} {...imageProps}/>
-
+    <react_native_1.Image style={[aspectRatioStyle, styles]} resizeMode={resizeMode} source={imSource} {...imageProps} {...loadProps}/>
+    {loadingElement}
   </Wrapper>;
 };
 exports.ImageComponent = ImageComponent;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Image/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Image/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/Image/styles.d.ts

@@ -1,4 +1,5 @@
-export declare type ImageComposition = 'wrapper' | 'touchable';
+import { LoadingOverlayComposition } from '../LoadingOverlay/styles';
+export declare type ImageComposition = 'wrapper' | 'touchable' | `overlay${Capitalize<LoadingOverlayComposition>}`;
 export declare const ImageStyles: {
     default: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ImageComposition, any>>;
     round: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ImageComposition, any>>;

package/dist/components/Image/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/Image/styles.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA,2CAA8E;AAG9E,IAAM,gBAAgB,GAAG,IAAA,oCAA2B,GAAoB,CAAA;AAExE,IAAM,OAAO,GAAG,IAAA,uBAAc,EAAC,UAAC,MAAM,IAAK,OAAA,gBAAgB,CAAC,cAAM,OAAA,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC,EAAxC,CAAwC,CAAC,EAAhE,CAAgE,CAC1G,CAAA;AAEY,QAAA,WAAW,yBACnB,OAAO,KACV,OAAO,EAAE,gBAAgB,CAAC,cAAM,OAAA,CAAC;QAC/B,OAAO,EAAE,EAAE;KACZ,CAAC,EAF8B,CAE9B,CAAC,EAEH,KAAK,EAAE,gBAAgB,CAAC,cAAM,OAAA,CAAC;QAC7B,OAAO,EAAE;YACP,YAAY,EAAE,GAAG;SAClB;KACF,CAAC,EAJ4B,CAI5B,CAAC,IACJ"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/Image/styles.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA,2CAA8E;AAI9E,IAAM,gBAAgB,GAAG,IAAA,oCAA2B,GAAoB,CAAA;AAExE,IAAM,OAAO,GAAG,IAAA,uBAAc,EAAC,UAAC,MAAM,IAAK,OAAA,gBAAgB,CAAC,cAAM,OAAA,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC,EAAxC,CAAwC,CAAC,EAAhE,CAAgE,CAC1G,CAAA;AAEY,QAAA,WAAW,yBACnB,OAAO,KACV,OAAO,EAAE,gBAAgB,CAAC,cAAM,OAAA,CAAC;QAC/B,OAAO,EAAE,EAAE;KACZ,CAAC,EAF8B,CAE9B,CAAC,EAEH,KAAK,EAAE,gBAAgB,CAAC,cAAM,OAAA,CAAC;QAC7B,OAAO,EAAE;YACP,YAAY,EAAE,GAAG;SAClB;KACF,CAAC,EAJ4B,CAI5B,CAAC,IACJ"}

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ComponentVariants } from "@codeleap/common";
+import { StylesOf } from "../../types";
+import { LoadingOverlayComposition, LoadingOverlayStyles } from "./styles";
+export * from './styles';
+export declare type LoadingOverlayProps = React.PropsWithChildren<{
+    variants?: ComponentVariants<typeof LoadingOverlayStyles>['variants'];
+    styles?: StylesOf<LoadingOverlayComposition>;
+    visible?: boolean;
+}>;
+export declare const LoadingOverlay: (props: LoadingOverlayProps) => JSX.Element;

package/dist/components/LoadingOverlay/index.js

@@ -0,0 +1,60 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoadingOverlay = void 0;
+var react_1 = __importStar(require("react"));
+var common_1 = require("@codeleap/common");
+var moti_1 = require("moti");
+var react_native_1 = require("react-native");
+var ActivityIndicator_1 = require("../ActivityIndicator");
+var View_1 = require("../View");
+var utils_1 = require("../../utils");
+__exportStar(require("./styles"), exports);
+var LoadingOverlay = function (props) {
+    var children = props.children, styles = props.styles, variants = props.variants, visible = props.visible;
+    var variantStyles = (0, common_1.useDefaultComponentStyle)('u:LoadingOverlay', {
+        variants: variants,
+        rootElement: 'wrapper',
+        styles: styles,
+        transform: react_native_1.StyleSheet.flatten,
+    });
+    var loaderStyles = (0, common_1.useMemo)(function () { return (0, common_1.getNestedStylesByKey)('loader', variantStyles); }, [variantStyles]);
+    var wrapperAnimationStates = (0, utils_1.useStaticAnimationStyles)(variantStyles, ['wrapper:hidden', 'wrapper:visible']);
+    var wrapperAnimation = (0, moti_1.useDynamicAnimation)(function () {
+        return visible ? wrapperAnimationStates["wrapper:visible"] : wrapperAnimationStates["wrapper:hidden"];
+    });
+    (0, common_1.onUpdate)(function () {
+        wrapperAnimation.animateTo(visible ? wrapperAnimationStates["wrapper:visible"] : wrapperAnimationStates["wrapper:hidden"]);
+    }, [visible]);
+    var transition = (0, react_1.useRef)(null);
+    if (!transition.current) {
+        transition.current = JSON.parse(JSON.stringify(variantStyles["wrapper:transition"]));
+    }
+    return <View_1.View style={variantStyles.wrapper} animated state={wrapperAnimation} transition={transition.current}>
+        <ActivityIndicator_1.ActivityIndicator styles={loaderStyles}/>
+        {children}
+    </View_1.View>;
+};
+exports.LoadingOverlay = LoadingOverlay;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/LoadingOverlay/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAqC;AACrC,2CAAuH;AACvH,6BAA0C;AAC1C,6CAAyC;AAEzC,0DAAwD;AACxD,gCAA8B;AAE9B,qCAAoD;AAEpD,2CAAwB;AASjB,IAAM,cAAc,GAAG,UAAC,KAA0B;IAEjD,IAAA,QAAQ,GAIR,KAAK,SAJG,EACR,MAAM,GAGN,KAAK,OAHC,EACN,QAAQ,GAER,KAAK,SAFG,EACR,OAAO,GACP,KAAK,QADE,CACF;IAET,IAAM,aAAa,GAAG,IAAA,iCAAwB,EAAkD,kBAAkB,EAAE;QAChH,QAAQ,UAAA;QACR,WAAW,EAAE,SAAS;QACtB,MAAM,QAAA;QACN,SAAS,EAAE,yBAAU,CAAC,OAAO;KAChC,CAAC,CAAA;IAGF,IAAM,YAAY,GAAG,IAAA,gBAAO,EAAC,cAAM,OAAA,IAAA,6BAAoB,EAAC,QAAQ,EAAE,aAAa,CAAC,EAA7C,CAA6C,EAAE,CAAC,aAAa,CAAC,CAAC,CAAA;IAElG,IAAM,sBAAsB,GAAG,IAAA,gCAAwB,EAAC,aAAa,EAAE,CAAC,gBAAgB,EAAC,iBAAiB,CAAC,CAAC,CAAA;IAC5G,IAAM,gBAAgB,GAAG,IAAA,0BAAmB,EAAC;QACzC,OAAO,OAAO,CAAC,CAAC,CAAC,sBAAsB,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,sBAAsB,CAAC,gBAAgB,CAAC,CAAA;IACzG,CAAC,CAAC,CAAA;IAEF,IAAA,iBAAQ,EAAC;QACL,gBAAgB,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,sBAAsB,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,sBAAsB,CAAC,gBAAgB,CAAC,CAAC,CAAA;IAC9H,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IAEb,IAAM,UAAU,GAAG,IAAA,cAAM,EAAC,IAAI,CAAC,CAAA;IAC/B,IAAG,CAAC,UAAU,CAAC,OAAO,EAAC;QACnB,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAA;KACvF;IACD,OAAO,CAAC,WAAI,CAAC,KAAK,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,gBAAgB,CAAC,CAAC,UAAU,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC,CACxG;QAAA,CAAC,qCAAiB,CAAC,MAAM,CAAC,CAAC,YAAY,CAAC,EACxC;QAAA,CAAC,QAAQ,CACb;IAAA,EAAE,WAAI,CAAC,CAAA;AACX,CAAC,CAAA;AAnCY,QAAA,cAAc,kBAmC1B"}

package/dist/components/LoadingOverlay/styles.d.ts

@@ -0,0 +1,7 @@
+import { ActivityIndicatorComposition } from "../ActivityIndicator";
+declare type WrapperStates = 'hidden' | 'visible';
+export declare type LoadingOverlayComposition = 'wrapper' | `wrapper:${WrapperStates}` | 'wrapper:transition' | `loader${Capitalize<ActivityIndicatorComposition>}`;
+export declare const LoadingOverlayStyles: {
+    default: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<LoadingOverlayComposition, any>>;
+};
+export {};

package/dist/components/LoadingOverlay/styles.js

@@ -0,0 +1,34 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoadingOverlayStyles = void 0;
+var common_1 = require("@codeleap/common");
+var createLoadingOverlayStyle = (0, common_1.createDefaultVariantFactory)();
+exports.LoadingOverlayStyles = {
+    default: createLoadingOverlayStyle(function (theme) { return ({
+        wrapper: __assign(__assign(__assign(__assign({}, theme.presets.center), theme.presets.whole), theme.presets.absolute), { backgroundColor: theme.colors.background }),
+        'wrapper:visible': {
+            opacity: 1
+        },
+        'wrapper:hidden': {
+            opacity: 0
+        },
+        'wrapper:transition': {
+            opacity: {
+                duration: 900,
+                type: 'timing',
+            },
+        }
+    }); })
+};
+//# sourceMappingURL=styles.js.map

package/dist/components/LoadingOverlay/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/LoadingOverlay/styles.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA,2CAA0E;AAO1E,IAAM,yBAAyB,GAAG,IAAA,oCAA2B,GAA6B,CAAA;AAE7E,QAAA,oBAAoB,GAAG;IAChC,OAAO,EAAE,yBAAyB,CAAC,UAAA,KAAK,IAAI,OAAA,CAAC;QACzC,OAAO,0CACA,KAAK,CAAC,OAAO,CAAC,MAAM,GACpB,KAAK,CAAC,OAAO,CAAC,KAAK,GACnB,KAAK,CAAC,OAAO,CAAC,QAAQ,KACzB,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU,GAC3C;QACD,iBAAiB,EAAE;YACf,OAAO,EAAE,CAAC;SACb;QACD,gBAAgB,EAAE;YACd,OAAO,EAAE,CAAC;SACb;QACD,oBAAoB,EAAE;YAClB,OAAO,EAAE;gBACL,QAAQ,EAAE,GAAG;gBACb,IAAI,EAAE,QAAQ;aACjB;SAEJ;KACJ,CAAC,EApB0C,CAoB1C,CAAC;CACN,CAAA"}

package/dist/components/components.d.ts

@@ -32,5 +32,6 @@ export * from './MultiSelect';
 export * from './AutoComplete';
 export * from './Grid';
 export * from './InputLabel';
+export * from './LoadingOverlay';
 export * from './ActionIcon';
 export * from './defaultStyles';

package/dist/components/components.js

@@ -44,6 +44,7 @@ __exportStar(require("./MultiSelect"), exports);
 __exportStar(require("./AutoComplete"), exports);
 __exportStar(require("./Grid"), exports);
 __exportStar(require("./InputLabel"), exports);
+__exportStar(require("./LoadingOverlay"), exports);
 __exportStar(require("./ActionIcon"), exports);
 __exportStar(require("./defaultStyles"), exports);
 //# 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,yCAAsB;AACtB,6CAA0B;AAC1B,yCAAsB;AACtB,8CAA2B;AAC3B,yCAAsB;AACtB,0CAAuB;AACvB,6CAA0B;AAC1B,8CAA2B;AAC3B,+CAA4B;AAC5B,2CAAwB;AACxB,gDAA6B;AAC7B,6CAA0B;AAC1B,2CAAwB;AACxB,8CAA2B;AAC3B,2CAAwB;AACxB,qDAAkC;AAClC,+CAA4B;AAC5B,2CAAwB;AACxB,yCAAsB;AACtB,sDAAmC;AACnC,2CAAwB;AACxB,gDAA6B;AAC7B,0CAAuB;AACvB,6CAA0B;AAC1B,8CAA2B;AAC3B,+CAA4B;AAC5B,0CAAuB;AACvB,qDAAkC;AAClC,6CAA0B;AAC1B,2CAAwB;AACxB,gDAA6B;AAC7B,iDAA8B;AAC9B,yCAAsB;AACtB,+CAA4B;AAC5B,+CAA4B;AAI5B,kDAA+B"}
+{"version":3,"file":"components.js","sourceRoot":"","sources":["../../src/components/components.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,yCAAsB;AACtB,6CAA0B;AAC1B,yCAAsB;AACtB,8CAA2B;AAC3B,yCAAsB;AACtB,0CAAuB;AACvB,6CAA0B;AAC1B,8CAA2B;AAC3B,+CAA4B;AAC5B,2CAAwB;AACxB,gDAA6B;AAC7B,6CAA0B;AAC1B,2CAAwB;AACxB,8CAA2B;AAC3B,2CAAwB;AACxB,qDAAkC;AAClC,+CAA4B;AAC5B,2CAAwB;AACxB,yCAAsB;AACtB,sDAAmC;AACnC,2CAAwB;AACxB,gDAA6B;AAC7B,0CAAuB;AACvB,6CAA0B;AAC1B,8CAA2B;AAC3B,+CAA4B;AAC5B,0CAAuB;AACvB,qDAAkC;AAClC,6CAA0B;AAC1B,2CAAwB;AACxB,gDAA6B;AAC7B,iDAA8B;AAC9B,yCAAsB;AACtB,+CAA4B;AAC5B,mDAAgC;AAChC,+CAA4B;AAI5B,kDAA+B"}

package/dist/components/defaultStyles.d.ts

@@ -1459,6 +1459,9 @@ export declare const defaultStyles: {
         debBlue: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<import("./List").ListComposition, any>>;
         debYellow: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<import("./List").ListComposition, any>>;
     };
+    LoadingOverlay: {
+        default: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<import("./LoadingOverlay").LoadingOverlayComposition, any>>;
+    };
     InputLabel: {
         default: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<import("./InputLabel").InputLabelComposition, any>>;
     };

package/dist/components/defaultStyles.js

@@ -30,6 +30,7 @@ var Scroll_1 = require("./Scroll");
 var ActionIcon_1 = require("./ActionIcon");
 var Grid_1 = require("./Grid");
 var InputLabel_1 = require("./InputLabel");
+var LoadingOverlay_1 = require("./LoadingOverlay");
 exports.defaultStyles = {
     View: View_1.ViewStyles,
     Icon: Icon_1.IconStyles,
@@ -60,6 +61,7 @@ exports.defaultStyles = {
     PaginationIndicator: List_1.PaginationIndicatorStyles,
     ActionIcon: ActionIcon_1.ActionIconStyles,
     Grid: Grid_1.GridStyles,
+    LoadingOverlay: LoadingOverlay_1.LoadingOverlayStyles,
     InputLabel: InputLabel_1.InputLabelStyles,
 };
 //# sourceMappingURL=defaultStyles.js.map

package/dist/components/defaultStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"defaultStyles.js","sourceRoot":"","sources":["../../src/components/defaultStyles.ts"],"names":[],"mappings":";;;AAAA,+BAAmC;AACnC,+BAAmC;AACnC,yCAA6C;AAC7C,+BAAmC;AACnC,iCAAqC;AACrC,uCAA2C;AAC3C,yCAA6C;AAC7C,2CAA+C;AAC/C,mCAAuC;AACvC,mCAAuC;AACvC,yCAA6C;AAC7C,mCAAuC;AACvC,uDAA2D;AAC3D,yDAA6D;AAC7D,mCAAuC;AACvC,6CAAiD;AACjD,iCAAqC;AACrC,uDAA2D;AAC3D,uCAA2C;AAC3C,iCAAqC;AACrC,uCAA2C;AAC3C,0CAA8C;AAC9C,+BAA8D;AAC9D,+CAAmD;AACnD,6CAAiD;AACjD,mCAAuC;AACvC,2CAA+C;AAC/C,+BAAmC;AACnC,2CAA+C;AAElC,QAAA,aAAa,GAAG;IAC3B,IAAI,EAAE,iBAAU;IAChB,IAAI,EAAE,iBAAU;IAChB,SAAS,EAAE,2BAAe;IAC1B,IAAI,EAAE,iBAAU;IAChB,KAAK,EAAE,mBAAW;IAClB,QAAQ,EAAE,yBAAc;IACxB,SAAS,EAAE,2BAAe;IAC1B,UAAU,EAAE,6BAAgB;IAC5B,MAAM,EAAE,qBAAY;IACpB,MAAM,EAAE,qBAAY;IACpB,SAAS,EAAE,2BAAe;IAC1B,IAAI,EAAE,iBAAU;IAChB,MAAM,EAAE,qBAAY;IACpB,gBAAgB,EAAE,yCAAsB;IACxC,iBAAiB,EAAE,2CAAuB;IAC1C,MAAM,EAAE,qBAAY;IACpB,WAAW,EAAE,+BAAiB;IAC9B,KAAK,EAAE,mBAAW;IAClB,gBAAgB,EAAE,yCAAsB;IACxC,QAAQ,EAAE,yBAAc;IACxB,QAAQ,EAAE,yBAAc;IACxB,KAAK,EAAE,mBAAW;IAClB,MAAM,EAAE,qBAAY;IACpB,YAAY,EAAE,iCAAkB;IAChC,WAAW,EAAE,+BAAiB;IAC9B,MAAM,EAAE,qBAAY;IACpB,mBAAmB,EAAE,gCAAyB;IAC9C,UAAU,EAAE,6BAAgB;IAC5B,IAAI,EAAE,iBAAU;IAChB,UAAU,EAAE,6BAAgB;CAC7B,CAAA"}
+{"version":3,"file":"defaultStyles.js","sourceRoot":"","sources":["../../src/components/defaultStyles.ts"],"names":[],"mappings":";;;AAAA,+BAAmC;AACnC,+BAAmC;AACnC,yCAA6C;AAC7C,+BAAmC;AACnC,iCAAqC;AACrC,uCAA2C;AAC3C,yCAA6C;AAC7C,2CAA+C;AAC/C,mCAAuC;AACvC,mCAAuC;AACvC,yCAA6C;AAC7C,mCAAuC;AACvC,uDAA2D;AAC3D,yDAA6D;AAC7D,mCAAuC;AACvC,6CAAiD;AACjD,iCAAqC;AACrC,uDAA2D;AAC3D,uCAA2C;AAC3C,iCAAqC;AACrC,uCAA2C;AAC3C,0CAA8C;AAC9C,+BAA8D;AAC9D,+CAAmD;AACnD,6CAAiD;AACjD,mCAAuC;AACvC,2CAA+C;AAC/C,+BAAmC;AACnC,2CAA+C;AAC/C,mDAAuD;AAE1C,QAAA,aAAa,GAAG;IAC3B,IAAI,EAAE,iBAAU;IAChB,IAAI,EAAE,iBAAU;IAChB,SAAS,EAAE,2BAAe;IAC1B,IAAI,EAAE,iBAAU;IAChB,KAAK,EAAE,mBAAW;IAClB,QAAQ,EAAE,yBAAc;IACxB,SAAS,EAAE,2BAAe;IAC1B,UAAU,EAAE,6BAAgB;IAC5B,MAAM,EAAE,qBAAY;IACpB,MAAM,EAAE,qBAAY;IACpB,SAAS,EAAE,2BAAe;IAC1B,IAAI,EAAE,iBAAU;IAChB,MAAM,EAAE,qBAAY;IACpB,gBAAgB,EAAE,yCAAsB;IACxC,iBAAiB,EAAE,2CAAuB;IAC1C,MAAM,EAAE,qBAAY;IACpB,WAAW,EAAE,+BAAiB;IAC9B,KAAK,EAAE,mBAAW;IAClB,gBAAgB,EAAE,yCAAsB;IACxC,QAAQ,EAAE,yBAAc;IACxB,QAAQ,EAAE,yBAAc;IACxB,KAAK,EAAE,mBAAW;IAClB,MAAM,EAAE,qBAAY;IACpB,YAAY,EAAE,iCAAkB;IAChC,WAAW,EAAE,+BAAiB;IAC9B,MAAM,EAAE,qBAAY;IACpB,mBAAmB,EAAE,gCAAyB;IAC9C,UAAU,EAAE,6BAAgB;IAC5B,IAAI,EAAE,iBAAU;IAChB,cAAc,EAAE,qCAAoB;IACpC,UAAU,EAAE,6BAAgB;CAC7B,CAAA"}

package/package.json

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

package/src/components/Image/index.tsx

@@ -6,6 +6,8 @@ import {
   arePropsEqual,
   FormTypes,
   TypeGuards,
+  useBooleanToggle,
+  getNestedStylesByKey,
 } from '@codeleap/common'
 import { ComponentPropsWithoutRef } from 'react'
 import {
@@ -18,16 +20,20 @@ import {
 } from 'react-native'
 import { FastImage } from '../../modules/fastImage'
 import {
+  ImageComposition,
   ImageStyles,
 } from './styles'
 import { useImageSpotlight } from '../ImageView/Spotlight'
 import { Touchable } from '../Touchable'
 import { isFile, toMultipartFile } from '../../utils'
+import { LoadingOverlay, LoadingOverlayProps } from '../LoadingOverlay'
+import { StylesOf } from '../../types'
 export * from './styles'
 type NativeImageProps = ComponentPropsWithoutRef<typeof NativeImage>
 export type ImageProps = Omit<NativeImageProps, 'source' | 'style'> & {
   variants?: ComponentVariants<typeof ImageStyles>['variants']
   fast?: boolean
+  styles?: StylesOf<ImageComposition>
   style?: StyleProp<ImageStyle | TextStyle | ViewStyle>
   source:
     | (NativeImageProps['source'] & {
@@ -39,23 +45,31 @@ export type ImageProps = Omit<NativeImageProps, 'source' | 'style'> & {
   resizeMode?: keyof typeof FastImage.resizeMode
   spotlight?: string
   maintainAspectRatioFrom?: 'width' | 'height' | 'none'
+  withLoadingOverlay?: boolean | React.FC<LoadingOverlayProps>
 }
 
+
+
+
 export const ImageComponent: React.FC<ImageProps> = (props) => {
   const {
     variants,
     style,
+    styles: componentStyleSheet = {},
     fast = true,
     spotlight = null,
     resizeMode = 'contain',
     source,
+    withLoadingOverlay = false,
     maintainAspectRatioFrom = 'height',
     ...imageProps
   } = props
 
-  const variantStyles = useDefaultComponentStyle<'u:Image', typeof ImageStyles>('u:Image', { variants })
+  const variantStyles = useDefaultComponentStyle<'u:Image', typeof ImageStyles>('u:Image', { variants, styles: componentStyleSheet,transform: StyleSheet.flatten })
+  const [loading, setLoading] = React.useState(false)
 
   const styles = StyleSheet.flatten([variantStyles.wrapper, style])
+  
   let imSource = source
   if (isFile(imSource)) {
     imSource = toMultipartFile(imSource)
@@ -90,6 +104,22 @@ export const ImageComponent: React.FC<ImageProps> = (props) => {
 
   }, [maintainAspectRatioFrom, imSource])
 
+
+  const loadProps = {
+    onLoadStart: () => setLoading(true), onLoadEnd: () => setLoading(false)
+  }
+
+  const Loading = TypeGuards.isFunction(withLoadingOverlay) ? withLoadingOverlay : LoadingOverlay
+  const showLoading = !!withLoadingOverlay
+
+  const overlayStyle = React.useMemo(() => getNestedStylesByKey('overlay', variantStyles), [variantStyles])
+
+  const loadingElement = showLoading ? (
+    <Loading visible={loading} styles={overlayStyle}/>
+
+    ) : null
+    
+
   if (fast) {
     return (
       <Wrapper {...wrapperProps}>
@@ -100,14 +130,23 @@ export const ImageComponent: React.FC<ImageProps> = (props) => {
           tintColor={styles?.tintColor}
           source={imSource}
           resizeMode={FastImage.resizeMode[resizeMode || 'contain']}
+          {...loadProps}
           {...imageProps}
         />
+        {loadingElement}
       </Wrapper>
     )
   }
   return <Wrapper {...wrapperProps}>
-    <NativeImage style={[aspectRatioStyle, styles]} resizeMode={resizeMode} source={imSource} {...(imageProps as any)} />
-
+    <NativeImage 
+      style={[aspectRatioStyle, styles]} 
+      resizeMode={resizeMode} 
+      source={imSource} {...(imageProps as any)}  
+      {...loadProps}
+    />
+    {
+      loadingElement
+    }
   </Wrapper>
 }
 

package/src/components/Image/styles.ts

@@ -1,6 +1,7 @@
 import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+import { LoadingOverlayComposition } from '../LoadingOverlay/styles'
 
-export type ImageComposition = 'wrapper' | 'touchable'
+export type ImageComposition = 'wrapper' | 'touchable' | `overlay${Capitalize<LoadingOverlayComposition>}`
 const createImageStyle = createDefaultVariantFactory<ImageComposition>()
 
 const presets = includePresets((styles) => createImageStyle(() => ({ wrapper: styles, touchable: styles })),

package/src/components/LoadingOverlay/index.tsx

@@ -0,0 +1,55 @@
+import React, { useRef } from 'react'
+import { ComponentVariants, getNestedStylesByKey, onUpdate, useDefaultComponentStyle, useMemo } from "@codeleap/common"
+import { useDynamicAnimation } from "moti"
+import { StyleSheet } from "react-native"
+import { StylesOf } from "../../types"
+import { ActivityIndicator } from "../ActivityIndicator"
+import { View } from "../View"
+import { LoadingOverlayComposition, LoadingOverlayStyles } from "./styles"
+import {useStaticAnimationStyles} from '../../utils'
+
+export * from './styles'
+
+export type LoadingOverlayProps = React.PropsWithChildren<{
+    variants?: ComponentVariants<typeof LoadingOverlayStyles>['variants']
+    styles?: StylesOf<LoadingOverlayComposition>
+    visible?: boolean
+} >
+
+
+export const LoadingOverlay = (props: LoadingOverlayProps) => {
+    const {
+        children,
+        styles,
+        variants,
+        visible
+    } = props
+
+    const variantStyles = useDefaultComponentStyle<'u:LoadingOverlay', typeof LoadingOverlayStyles>('u:LoadingOverlay', {
+        variants,
+        rootElement: 'wrapper',
+        styles,
+        transform: StyleSheet.flatten,
+    })
+
+
+    const loaderStyles = useMemo(() => getNestedStylesByKey('loader', variantStyles), [variantStyles])
+    
+    const wrapperAnimationStates = useStaticAnimationStyles(variantStyles, ['wrapper:hidden','wrapper:visible'])
+    const wrapperAnimation = useDynamicAnimation(() => {
+        return visible ? wrapperAnimationStates["wrapper:visible"] : wrapperAnimationStates["wrapper:hidden"]
+    })
+
+    onUpdate(() => {
+        wrapperAnimation.animateTo(visible ? wrapperAnimationStates["wrapper:visible"] : wrapperAnimationStates["wrapper:hidden"])
+    }, [visible])
+    
+    const transition = useRef(null)
+    if(!transition.current){
+        transition.current = JSON.parse(JSON.stringify(variantStyles["wrapper:transition"]))
+    }
+    return <View style={variantStyles.wrapper} animated state={wrapperAnimation} transition={transition.current}>
+        <ActivityIndicator styles={loaderStyles}/>
+        {children}
+    </View>
+}

package/src/components/LoadingOverlay/styles.ts

@@ -0,0 +1,32 @@
+import { createDefaultVariantFactory, shadeColor } from "@codeleap/common"
+import { ActivityIndicatorComposition } from "../ActivityIndicator"
+
+type WrapperStates = 'hidden'| 'visible' 
+
+export type LoadingOverlayComposition = 'wrapper' | `wrapper:${WrapperStates}` | 'wrapper:transition' | `loader${Capitalize<ActivityIndicatorComposition>}` 
+
+const createLoadingOverlayStyle = createDefaultVariantFactory<LoadingOverlayComposition>()
+
+export const LoadingOverlayStyles = {
+    default: createLoadingOverlayStyle(theme => ({
+        wrapper: {
+            ...theme.presets.center,
+            ...theme.presets.whole,
+            ...theme.presets.absolute,
+            backgroundColor: theme.colors.background
+        },
+        'wrapper:visible': {
+            opacity: 1  
+        },
+        'wrapper:hidden': {
+            opacity: 0   
+        },
+        'wrapper:transition': {
+            opacity: {
+                duration: 900,
+                type: 'timing',
+            },
+
+        }
+    }))
+}

package/src/components/components.ts

@@ -32,6 +32,7 @@ export * from './MultiSelect'
 export * from './AutoComplete'
 export * from './Grid'
 export * from './InputLabel'
+export * from './LoadingOverlay'
 export * from './ActionIcon'
 
 

package/src/components/defaultStyles.ts

@@ -27,6 +27,7 @@ import { ScrollStyles } from './Scroll'
 import { ActionIconStyles } from './ActionIcon'
 import { GridStyles } from './Grid'
 import { InputLabelStyles } from './InputLabel'
+import { LoadingOverlayStyles } from './LoadingOverlay'
 
 export const defaultStyles = {
   View: ViewStyles,
@@ -58,5 +59,6 @@ export const defaultStyles = {
   PaginationIndicator: PaginationIndicatorStyles,
   ActionIcon: ActionIconStyles,
   Grid: GridStyles,
+  LoadingOverlay: LoadingOverlayStyles,
   InputLabel: InputLabelStyles,
 }