@codeleap/mobile 5.8.1 → 5.8.2

package/dist/components/EmptyPlaceholder/Components.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { EmptyPlaceholderButtonProps, EmptyPlaceholderIllustrationProps, EmptyPlaceholderInfoProps } from './types';
+export declare const EmptyPlaceholderInfo: (props: EmptyPlaceholderInfoProps) => JSX.Element;
+export declare const EmptyPlaceholderIllustration: (props: EmptyPlaceholderIllustrationProps) => JSX.Element;
+export declare const EmptyPlaceholderButton: (props: EmptyPlaceholderButtonProps) => JSX.Element;
+export declare const EmptyPlaceholderLoading: () => JSX.Element;
+export declare const EmptyPlaceholderContent: ({ children }: React.PropsWithChildren) => JSX.Element;

package/dist/components/EmptyPlaceholder/Components.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import { useCompositionStyles } from '@codeleap/styles';
+import { Icon } from '../Icon';
+import { Text } from '../Text';
+import { Image } from '../Image';
+import { useEmptyPlaceholderContext } from './context';
+import { Button } from '../Button';
+import { View } from '../View';
+import { ActivityIndicator } from '../ActivityIndicator';
+import { TypeGuards } from '@codeleap/types';
+export const EmptyPlaceholderInfo = (props) => {
+    const { title, description, styles, itemName } = useEmptyPlaceholderContext(props);
+    const emptyText = title || (itemName && `No ${itemName} found.`);
+    return <>
+    {title || itemName ? <Text text={emptyText} style={styles.title}/> : null}
+    {description ? <Text text={description} style={styles.description}/> : null}
+  </>;
+};
+export const EmptyPlaceholderIllustration = (props) => {
+    const { icon, image, styles } = useEmptyPlaceholderContext(props);
+    return <>
+    {icon ? <Icon name={icon} style={styles.icon}/> : null}
+    {image ? <Image source={image} style={styles.image}/> : null}
+  </>;
+};
+export const EmptyPlaceholderButton = (props) => {
+    const { styles, buttonText, text, onPress, ...buttonProps } = useEmptyPlaceholderContext(props);
+    const buttonStyles = useCompositionStyles('button', styles);
+    const displayText = text || buttonText;
+    if (!TypeGuards.isFunction(onPress))
+        return null;
+    return (<Button {...buttonProps} onPress={onPress} debugName={`emptyPlaceholderButton:${buttonText}`} style={buttonStyles} text={displayText}/>);
+};
+export const EmptyPlaceholderLoading = () => {
+    const { styles, loading, LoadingComponent } = useEmptyPlaceholderContext();
+    const activityIndicatorStyles = useCompositionStyles('loader', styles);
+    if (!loading)
+        return null;
+    if (React.isValidElement(LoadingComponent)) {
+        return <>{LoadingComponent}</>;
+    }
+    return (<View style={[styles.wrapper, styles['wrapper:loading']]}>
+      <ActivityIndicator style={activityIndicatorStyles}/>
+    </View>);
+};
+export const EmptyPlaceholderContent = ({ children }) => {
+    const { loading, styles } = useEmptyPlaceholderContext();
+    if (loading) {
+        return <EmptyPlaceholderLoading />;
+    }
+    if (children) {
+        return <View style={styles.wrapper}>{children}</View>;
+    }
+    return (<View style={styles.wrapper}>
+      <EmptyPlaceholderIllustration />
+      <EmptyPlaceholderInfo />
+      <EmptyPlaceholderButton />
+    </View>);
+};
+//# sourceMappingURL=Components.js.map

package/dist/components/EmptyPlaceholder/Components.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Components.js","sourceRoot":"","sources":["../../../src/components/EmptyPlaceholder/Components.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAW,oBAAoB,EAAE,MAAM,kBAAkB,CAAA;AAChE,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAE9B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,0BAA0B,EAAE,MAAM,WAAW,CAAA;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAE5C,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAgC,EAAE,EAAE;IACvE,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,0BAA0B,CAAC,KAAK,CAAC,CAAA;IAElF,MAAM,SAAS,GAAG,KAAK,IAAI,CAAC,QAAQ,IAAI,MAAM,QAAQ,SAAS,CAAC,CAAA;IAEhE,OAAO,EACL;IAAA,CAAC,KAAK,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAAG,CAAC,CAAC,CAAC,IAAI,CAC1E;IAAA,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,EAAG,CAAC,CAAC,CAAC,IAAI,CAC9E;EAAA,GAAG,CAAA;AACL,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC,KAAwC,EAAE,EAAE;IACvF,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,0BAA0B,CAAC,KAAK,CAAC,CAAA;IAEjE,OAAO,EACL;IAAA,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAe,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAG,CAAC,CAAC,CAAC,IAAI,CAClE;IAAA,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAAG,CAAC,CAAC,CAAC,IAAI,CAC/D;EAAA,GAAG,CAAA;AACL,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAAkC,EAAE,EAAE;IAC3E,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,WAAW,EAAE,GAAG,0BAA0B,CAAC,KAAK,CAAC,CAAA;IAE/F,MAAM,YAAY,GAAG,oBAAoB,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;IAE3D,MAAM,WAAW,GAAG,IAAI,IAAI,UAAU,CAAA;IAEtC,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,OAAO,CAAC;QAAE,OAAO,IAAI,CAAA;IAEhD,OAAO,CACL,CAAC,MAAM,CACL,IAAI,WAAW,CAAC,CAChB,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,SAAS,CAAC,CAAC,0BAA0B,UAAU,EAAE,CAAC,CAClD,KAAK,CAAC,CAAC,YAAY,CAAC,CACpB,IAAI,CAAC,CAAC,WAAW,CAAC,EAClB,CACH,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,EAAE;IAC1C,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,gBAAgB,EAAE,GAAG,0BAA0B,EAAE,CAAA;IAE1E,MAAM,uBAAuB,GAAG,oBAAoB,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;IAEtE,IAAI,CAAC,OAAO;QAAE,OAAO,IAAI,CAAA;IAEzB,IAAI,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE;QAC1C,OAAO,EAAE,CAAC,gBAAgB,CAAC,GAAG,CAAA;KAC/B;IAED,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,iBAAiB,CAAC,CAAC,CAAC,CACvD;MAAA,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,uBAAuB,CAAC,EACpD;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,EAAE,QAAQ,EAA2B,EAAE,EAAE;IAC/E,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,0BAA0B,EAAE,CAAA;IAExD,IAAI,OAAO,EAAE;QACX,OAAO,CAAC,uBAAuB,CAAC,AAAD,EAAG,CAAA;KACnC;IAED,IAAI,QAAQ,EAAE;QACZ,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC,CAAA;KACtD;IAED,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAC1B;MAAA,CAAC,4BAA4B,CAAC,AAAD,EAC7B;MAAA,CAAC,oBAAoB,CAAC,AAAD,EACrB;MAAA,CAAC,sBAAsB,CAAC,AAAD,EACzB;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC,CAAA"}

package/dist/components/EmptyPlaceholder/context.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { EmptyPlaceholderCtxValue } from './types';
+export declare const EmptyPlaceholderContext: import("react").Context<EmptyPlaceholderCtxValue>;
+export declare const useEmptyPlaceholderContext: <T = EmptyPlaceholderCtxValue>(args?: Partial<T>) => {
+    description?: string;
+    onPress?: import("@codeleap/types").AnyFunction;
+    loading?: boolean;
+    title?: string;
+    image?: number | import("@d11/react-native-fast-image").Source;
+    icon?: never;
+    buttonText?: string;
+    itemName?: string;
+    LoadingComponent?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    styles: import("@codeleap/styles").StyleRecord<import("./styles").EmptyPlaceholderComposition>;
+} & Partial<T>;

package/dist/components/EmptyPlaceholder/context.js

@@ -0,0 +1,13 @@
+import { createContext, useContext } from 'react';
+export const EmptyPlaceholderContext = createContext({});
+export const useEmptyPlaceholderContext = (args = {}) => {
+    const ctx = useContext(EmptyPlaceholderContext);
+    if (!ctx) {
+        throw new Error('useEmptyPlaceholderContext must be used within an EmptyPlaceholder component.');
+    }
+    return {
+        ...ctx,
+        ...args,
+    };
+};
+//# sourceMappingURL=context.js.map

package/dist/components/EmptyPlaceholder/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sourceRoot":"","sources":["../../../src/components/EmptyPlaceholder/context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAGjD,MAAM,CAAC,MAAM,uBAAuB,GAAG,aAAa,CAAC,EAA8B,CAAC,CAAA;AAEpF,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAA+B,OAAmB,EAAE,EAAE,EAAE;IAChG,MAAM,GAAG,GAAG,UAAU,CAAC,uBAAuB,CAAC,CAAA;IAE/C,IAAI,CAAC,GAAG,EAAE;QACR,MAAM,IAAI,KAAK,CACb,+EAA+E,CAChF,CAAA;KACF;IAED,OAAO;QACL,GAAG,GAAG;QACN,GAAG,IAAI;KACR,CAAA;AACH,CAAC,CAAA"}

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

@@ -8,6 +8,9 @@ export declare const EmptyPlaceholder: {
     styleRegistryName: string;
     elements: string[];
     rootElement: string;
-    withVariantTypes<S extends AnyRecord>(styles: S): (props: StyledComponentProps<EmptyPlaceholderProps, S>) => IJSX;
+    Info: (props: import("./types").EmptyPlaceholderInfoProps) => JSX.Element;
+    Button: (props: import("./types").EmptyPlaceholderButtonProps) => JSX.Element;
+    Illustration: (props: import("./types").EmptyPlaceholderIllustrationProps) => JSX.Element;
+    withVariantTypes<S extends AnyRecord>(styles: S): ((props: StyledComponentProps<EmptyPlaceholderProps, S>) => IJSX) & Pick<any, "Button" | "Illustration" | "Info">;
     defaultProps: Partial<EmptyPlaceholderProps>;
 };

package/dist/components/EmptyPlaceholder/index.js

@@ -1,55 +1,28 @@
 import React from 'react';
-import { Icon } from '../Icon';
-import { View } from '../View';
-import { Text } from '../Text';
-import { ActivityIndicator } from '../ActivityIndicator';
-import { Image } from '../Image';
-import { useNestedStylesByKey } from '@codeleap/styles';
 import { MobileStyleRegistry } from '../../Registry';
 import { useStylesFor } from '../../hooks';
+import { EmptyPlaceholderContext } from './context';
+import { EmptyPlaceholderContent, EmptyPlaceholderButton, EmptyPlaceholderIllustration, EmptyPlaceholderInfo } from './Components';
 export * from './styles';
 export * from './types';
 export const EmptyPlaceholder = (props) => {
-    const { itemName, title, loading, description, image, icon = null, renderEmpty, style, } = {
+    const { children, style, ...contextValue } = {
         ...EmptyPlaceholder.defaultProps,
         ...props,
     };
-    const emptyText = title || (itemName && `No ${itemName} found.`) || 'No items.';
     const styles = useStylesFor(EmptyPlaceholder.styleRegistryName, style);
-    const activityIndicatorStyles = useNestedStylesByKey('loader', styles);
-    if (loading) {
-        return (<View style={[styles.wrapper, styles['wrapper:loading']]}>
-        <ActivityIndicator style={activityIndicatorStyles}/>
-      </View>);
-    }
-    if (renderEmpty) {
-        return (<View style={styles.wrapper}>
-        {renderEmpty({
-                emptyText,
-                emptyIconName: icon,
-                style: styles,
-            })}
-      </View>);
-    }
-    let _image = null;
-    if (icon) {
-        _image = <Icon name={icon} style={styles.icon}/>;
-    }
-    else if (image) {
-        _image = <Image source={image} style={styles.image}/>;
-    }
-    return (<View style={styles.wrapper}>
-      {React.isValidElement(_image) ? (<View style={styles.imageWrapper}>
-          {_image}
-        </View>) : null}
-
-      {React.isValidElement(emptyText) ? emptyText : <Text text={emptyText} style={styles.title}/>}
-      {React.isValidElement(description) ? description : <Text text={description} style={styles.description}/>}
-    </View>);
+    return (<EmptyPlaceholderContext.Provider value={{ ...contextValue, styles }}>
+      <EmptyPlaceholderContent>
+        {children}
+      </EmptyPlaceholderContent>
+    </EmptyPlaceholderContext.Provider>);
 };
 EmptyPlaceholder.styleRegistryName = 'EmptyPlaceholder';
 EmptyPlaceholder.elements = ['wrapper', 'loader', 'title', 'description', 'image', 'icon'];
 EmptyPlaceholder.rootElement = 'wrapper';
+EmptyPlaceholder.Info = EmptyPlaceholderInfo;
+EmptyPlaceholder.Button = EmptyPlaceholderButton;
+EmptyPlaceholder.Illustration = EmptyPlaceholderIllustration;
 EmptyPlaceholder.withVariantTypes = (styles) => {
     return EmptyPlaceholder;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/EmptyPlaceholder/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/EmptyPlaceholder/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAC1C,OAAO,EAAE,uBAAuB,EAAE,MAAM,WAAW,CAAA;AACnD,OAAO,EAAE,uBAAuB,EAAE,sBAAsB,EAAE,4BAA4B,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAA;AAElI,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AAEvB,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAA4B,EAAE,EAAE;IAC/D,MAAM,EACJ,QAAQ,EACR,KAAK,EACL,GAAG,YAAY,EAChB,GAAG;QACF,GAAG,gBAAgB,CAAC,YAAY;QAChC,GAAG,KAAK;KACT,CAAA;IAED,MAAM,MAAM,GAAG,YAAY,CAAC,gBAAgB,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAAA;IAEtE,OAAO,CACL,CAAC,uBAAuB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,YAAY,EAAE,MAAM,EAAE,CAAC,CACnE;MAAA,CAAC,uBAAuB,CACtB;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,uBAAuB,CAC3B;IAAA,EAAE,uBAAuB,CAAC,QAAQ,CAAC,CACpC,CAAA;AACH,CAAC,CAAA;AAED,gBAAgB,CAAC,iBAAiB,GAAG,kBAAkB,CAAA;AACvD,gBAAgB,CAAC,QAAQ,GAAG,CAAC,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,CAAC,CAAA;AAC1F,gBAAgB,CAAC,WAAW,GAAG,SAAS,CAAA;AAExC,gBAAgB,CAAC,IAAI,GAAG,oBAAoB,CAAA;AAC5C,gBAAgB,CAAC,MAAM,GAAG,sBAAsB,CAAA;AAChD,gBAAgB,CAAC,YAAY,GAAG,4BAA4B,CAAA;AAE5D,gBAAgB,CAAC,gBAAgB,GAAG,CAAsB,MAAS,EAAE,EAAE;IACrE,OAAO,gBAAqK,CAAA;AAC9K,CAAC,CAAA;AAED,gBAAgB,CAAC,YAAY,GAAG,EAAoC,CAAA;AAEpE,mBAAmB,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAA"}

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

@@ -1,2 +1,3 @@
 import { ActivityIndicatorComposition } from '../ActivityIndicator';
-export type EmptyPlaceholderComposition = 'wrapper:loading' | `loader${Capitalize<ActivityIndicatorComposition>}` | 'wrapper' | 'title' | 'description' | 'image' | 'imageWrapper' | 'icon';
+import { ButtonComposition } from '../Button';
+export type EmptyPlaceholderComposition = 'wrapper' | 'wrapper:loading' | 'title' | 'description' | 'image' | 'icon' | `button${Capitalize<ButtonComposition>}` | `loader${Capitalize<ActivityIndicatorComposition>}`;

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

@@ -1,20 +1,25 @@
-import { AppIcon, StyledProp } from '@codeleap/styles';
-import { ReactElement } from 'react';
+import { AppIcon, StyleRecord, StyledProp } from '@codeleap/styles';
 import { ImageProps } from '../Image';
 import { EmptyPlaceholderComposition } from './styles';
-type RenderEmpty = (props: {
-    emptyText: string | ReactElement;
-    emptyIconName?: AppIcon;
-    style?: StyledProp<EmptyPlaceholderComposition>;
-}) => ReactElement;
+import { ReactElement, ReactNode } from 'react';
+import { AnyFunction } from '@codeleap/types';
+import { ButtonProps } from '../Button';
 export type EmptyPlaceholderProps = {
     itemName?: string;
-    title?: ReactElement | string;
-    description?: ReactElement | string;
+    title?: string;
+    description?: string;
     image?: ImageProps['source'];
     icon?: AppIcon;
     loading?: boolean;
     style?: StyledProp<EmptyPlaceholderComposition>;
-    renderEmpty?: RenderEmpty;
+    LoadingComponent?: ReactElement;
+    children?: ReactNode;
+    onPress?: AnyFunction;
+    buttonText?: string;
+};
+export type EmptyPlaceholderInfoProps = Pick<EmptyPlaceholderProps, 'title' | 'description'>;
+export type EmptyPlaceholderIllustrationProps = Pick<EmptyPlaceholderProps, 'image' | 'icon'>;
+export type EmptyPlaceholderButtonProps = Pick<EmptyPlaceholderProps, 'onPress'> & Omit<ButtonProps, 'style' | 'debugName'>;
+export type EmptyPlaceholderCtxValue = Omit<EmptyPlaceholderProps, 'style' | 'children'> & {
+    styles: StyleRecord<EmptyPlaceholderComposition>;
 };
-export {};

package/package.json

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

package/package.json.bak

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

package/src/components/EmptyPlaceholder/Components.tsx

@@ -0,0 +1,89 @@
+import React from 'react'
+import { AppIcon, useCompositionStyles } from '@codeleap/styles'
+import { Icon } from '../Icon'
+import { Text } from '../Text'
+import { EmptyPlaceholderButtonProps, EmptyPlaceholderIllustrationProps, EmptyPlaceholderInfoProps } from './types'
+import { Image } from '../Image'
+import { useEmptyPlaceholderContext } from './context'
+import { Button } from '../Button'
+import { View } from '../View'
+import { ActivityIndicator } from '../ActivityIndicator'
+import { TypeGuards } from '@codeleap/types'
+
+export const EmptyPlaceholderInfo = (props: EmptyPlaceholderInfoProps) => {
+  const { title, description, styles, itemName } = useEmptyPlaceholderContext(props)
+
+  const emptyText = title || (itemName && `No ${itemName} found.`)
+
+  return <>
+    {title || itemName ? <Text text={emptyText} style={styles.title} /> : null}
+    {description ? <Text text={description} style={styles.description} /> : null}
+  </>
+}
+
+export const EmptyPlaceholderIllustration = (props: EmptyPlaceholderIllustrationProps) => {
+  const { icon, image, styles } = useEmptyPlaceholderContext(props)
+
+  return <>
+    {icon ? <Icon name={icon as AppIcon} style={styles.icon} /> : null}
+    {image ? <Image source={image} style={styles.image} /> : null}
+  </>
+}
+
+export const EmptyPlaceholderButton = (props: EmptyPlaceholderButtonProps) => {
+  const { styles, buttonText, text, onPress, ...buttonProps } = useEmptyPlaceholderContext(props)
+
+  const buttonStyles = useCompositionStyles('button', styles)
+
+  const displayText = text || buttonText
+
+  if (!TypeGuards.isFunction(onPress)) return null
+
+  return (
+    <Button
+      {...buttonProps}
+      onPress={onPress}
+      debugName={`emptyPlaceholderButton:${buttonText}`}
+      style={buttonStyles}
+      text={displayText}
+    />
+  )
+}
+
+export const EmptyPlaceholderLoading = () => {
+  const { styles, loading, LoadingComponent } = useEmptyPlaceholderContext()
+
+  const activityIndicatorStyles = useCompositionStyles('loader', styles)
+
+  if (!loading) return null
+
+  if (React.isValidElement(LoadingComponent)) {
+    return <>{LoadingComponent}</>
+  }
+
+  return (
+    <View style={[styles.wrapper, styles['wrapper:loading']]} >
+      <ActivityIndicator style={activityIndicatorStyles} />
+    </View>
+  )
+}
+
+export const EmptyPlaceholderContent = ({ children }: React.PropsWithChildren) => {
+  const { loading, styles } = useEmptyPlaceholderContext()
+
+  if (loading) {
+    return <EmptyPlaceholderLoading />
+  }
+
+  if (children) {
+    return <View style={styles.wrapper}>{children}</View>
+  }
+
+  return (
+    <View style={styles.wrapper}>
+      <EmptyPlaceholderIllustration />
+      <EmptyPlaceholderInfo />
+      <EmptyPlaceholderButton />
+    </View>
+  )
+}

package/src/components/EmptyPlaceholder/context.ts

@@ -0,0 +1,19 @@
+import { createContext, useContext } from 'react'
+import { EmptyPlaceholderCtxValue } from './types'
+
+export const EmptyPlaceholderContext = createContext({} as EmptyPlaceholderCtxValue)
+
+export const useEmptyPlaceholderContext = <T = EmptyPlaceholderCtxValue>(args: Partial<T> = {}) => {
+  const ctx = useContext(EmptyPlaceholderContext)
+
+  if (!ctx) {
+    throw new Error(
+      'useEmptyPlaceholderContext must be used within an EmptyPlaceholder component.'
+    )
+  }
+
+  return {
+    ...ctx,
+    ...args,
+  }
+}

package/src/components/EmptyPlaceholder/index.tsx

@@ -1,77 +1,32 @@
 import React from 'react'
-import { Icon } from '../Icon'
-import { View } from '../View'
-import { Text } from '../Text'
-import { ActivityIndicator } from '../ActivityIndicator'
-import { Image } from '../Image'
 import { EmptyPlaceholderProps } from './types'
-import { AnyRecord, AppIcon, useNestedStylesByKey, IJSX, StyledComponentProps } from '@codeleap/styles'
+import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles'
 import { MobileStyleRegistry } from '../../Registry'
 import { useStylesFor } from '../../hooks'
+import { EmptyPlaceholderContext } from './context'
+import { EmptyPlaceholderContent, EmptyPlaceholderButton, EmptyPlaceholderIllustration, EmptyPlaceholderInfo } from './Components'
 
 export * from './styles'
 export * from './types'
 
 export const EmptyPlaceholder = (props: EmptyPlaceholderProps) => {
   const {
-    itemName,
-    title,
-    loading,
-    description,
-    image,
-    icon = null,
-    renderEmpty,
+    children,
     style,
+    ...contextValue
   } = {
     ...EmptyPlaceholder.defaultProps,
     ...props,
   }
 
-  const emptyText = title || (itemName && `No ${itemName} found.`) || 'No items.'
-
   const styles = useStylesFor(EmptyPlaceholder.styleRegistryName, style)
 
-  const activityIndicatorStyles = useNestedStylesByKey('loader', styles)
-
-  if (loading) {
-    return (
-      <View style={[styles.wrapper, styles['wrapper:loading']]} >
-        <ActivityIndicator style={activityIndicatorStyles} />
-      </View>
-    )
-  }
-
-  if (renderEmpty) {
-    return (
-      <View style={styles.wrapper}>
-        {renderEmpty({
-          emptyText,
-          emptyIconName: icon as AppIcon,
-          style: styles,
-        })}
-      </View>
-    )
-  }
-
-  let _image = null
-
-  if (icon) {
-    _image = <Icon name={icon as AppIcon} style={styles.icon} />
-  } else if (image) {
-    _image = <Image source={image} style={styles.image} />
-  }
-
   return (
-    <View style={styles.wrapper}>
-      {React.isValidElement(_image) ? (
-        <View style={styles.imageWrapper}>
-          {_image}
-        </View>
-      ) : null}
-
-      {React.isValidElement(emptyText) ? emptyText : <Text text={emptyText} style={styles.title} />}
-      {React.isValidElement(description) ? description : <Text text={description} style={styles.description} />}
-    </View>
+    <EmptyPlaceholderContext.Provider value={{ ...contextValue, styles }}>
+      <EmptyPlaceholderContent>
+        {children}
+      </EmptyPlaceholderContent>
+    </EmptyPlaceholderContext.Provider>
   )
 }
 
@@ -79,8 +34,12 @@ EmptyPlaceholder.styleRegistryName = 'EmptyPlaceholder'
 EmptyPlaceholder.elements = ['wrapper', 'loader', 'title', 'description', 'image', 'icon']
 EmptyPlaceholder.rootElement = 'wrapper'
 
+EmptyPlaceholder.Info = EmptyPlaceholderInfo
+EmptyPlaceholder.Button = EmptyPlaceholderButton
+EmptyPlaceholder.Illustration = EmptyPlaceholderIllustration
+
 EmptyPlaceholder.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return EmptyPlaceholder as (props: StyledComponentProps<EmptyPlaceholderProps, typeof styles>) => IJSX
+  return EmptyPlaceholder as ((props: StyledComponentProps<EmptyPlaceholderProps, typeof styles>) => IJSX) & Pick<typeof EmptyPlaceholder, 'Button' | 'Illustration' | 'Info'>
 }
 
 EmptyPlaceholder.defaultProps = {} as Partial<EmptyPlaceholderProps>

package/src/components/EmptyPlaceholder/styles.ts

@@ -1,11 +1,12 @@
 import { ActivityIndicatorComposition } from '../ActivityIndicator'
+import { ButtonComposition } from '../Button'
 
 export type EmptyPlaceholderComposition =
-  | 'wrapper:loading'
-  | `loader${Capitalize<ActivityIndicatorComposition>}`
   | 'wrapper'
+  | 'wrapper:loading'
   | 'title'
   | 'description'
   | 'image'
-  | 'imageWrapper'
   | 'icon'
+  | `button${Capitalize<ButtonComposition>}`
+  | `loader${Capitalize<ActivityIndicatorComposition>}`

package/src/components/EmptyPlaceholder/types.ts

@@ -1,21 +1,30 @@
-import { AppIcon, StyledProp } from '@codeleap/styles'
-import { ReactElement } from 'react'
+import { AppIcon, StyleRecord, StyledProp } from '@codeleap/styles'
 import { ImageProps } from '../Image'
 import { EmptyPlaceholderComposition } from './styles'
-
-type RenderEmpty = (props: {
-  emptyText: string | ReactElement
-  emptyIconName?: AppIcon
-  style?: StyledProp<EmptyPlaceholderComposition>
-}) => ReactElement
+import { ReactElement, ReactNode } from 'react'
+import { AnyFunction } from '@codeleap/types'
+import { ButtonProps } from '../Button'
 
 export type EmptyPlaceholderProps = {
   itemName?: string
-  title?: ReactElement | string
-  description?: ReactElement | string
+  title?: string
+  description?: string
   image?: ImageProps['source']
   icon?: AppIcon
   loading?: boolean
   style?: StyledProp<EmptyPlaceholderComposition>
-  renderEmpty?: RenderEmpty
+  LoadingComponent?: ReactElement
+  children?: ReactNode
+  onPress?: AnyFunction
+  buttonText?: string
 }
+
+export type EmptyPlaceholderInfoProps = Pick<EmptyPlaceholderProps, 'title' | 'description'>
+
+export type EmptyPlaceholderIllustrationProps = Pick<EmptyPlaceholderProps, 'image' | 'icon'>
+
+export type EmptyPlaceholderButtonProps = Pick<EmptyPlaceholderProps, 'onPress'> & Omit<ButtonProps, 'style' | 'debugName'>
+
+export type EmptyPlaceholderCtxValue = Omit<EmptyPlaceholderProps, 'style' | 'children'> & {
+  styles: StyleRecord<EmptyPlaceholderComposition>
+}