@codeleap/mobile 5.8.2 → 5.8.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/EmptyPlaceholder/components/Button.d.ts +3 -0
- package/dist/components/EmptyPlaceholder/components/Button.js +14 -0
- package/dist/components/EmptyPlaceholder/components/Button.js.map +1 -0
- package/dist/components/EmptyPlaceholder/components/Content.d.ts +2 -0
- package/dist/components/EmptyPlaceholder/components/Content.js +33 -0
- package/dist/components/EmptyPlaceholder/components/Content.js.map +1 -0
- package/dist/components/EmptyPlaceholder/components/Illustration.d.ts +3 -0
- package/dist/components/EmptyPlaceholder/components/Illustration.js +12 -0
- package/dist/components/EmptyPlaceholder/components/Illustration.js.map +1 -0
- package/dist/components/EmptyPlaceholder/components/Info.d.ts +3 -0
- package/dist/components/EmptyPlaceholder/components/Info.js +12 -0
- package/dist/components/EmptyPlaceholder/components/Info.js.map +1 -0
- package/dist/components/EmptyPlaceholder/components/Loading.d.ts +2 -0
- package/dist/components/EmptyPlaceholder/components/Loading.js +18 -0
- package/dist/components/EmptyPlaceholder/components/Loading.js.map +1 -0
- package/dist/components/EmptyPlaceholder/context.d.ts +2 -1
- package/dist/components/EmptyPlaceholder/context.js +3 -3
- package/dist/components/EmptyPlaceholder/context.js.map +1 -1
- package/dist/components/EmptyPlaceholder/index.js +7 -2
- package/dist/components/EmptyPlaceholder/index.js.map +1 -1
- package/dist/components/EmptyPlaceholder/types.d.ts +1 -0
- package/dist/components/SearchInput/index.js +9 -10
- package/dist/components/SearchInput/index.js.map +1 -1
- package/dist/components/Tabs/index.d.ts +2 -2
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/modules/backgroundTimer.js +1 -1
- package/dist/modules/backgroundTimer.js.map +1 -1
- package/dist/utils/useQueryListRefresh.d.ts +2 -4
- package/dist/utils/useQueryListRefresh.js +2 -4
- package/dist/utils/useQueryListRefresh.js.map +1 -1
- package/package.json +18 -18
- package/package.json.bak +2 -2
- package/src/components/EmptyPlaceholder/components/Button.tsx +26 -0
- package/src/components/EmptyPlaceholder/components/Content.tsx +42 -0
- package/src/components/EmptyPlaceholder/components/Illustration.tsx +15 -0
- package/src/components/EmptyPlaceholder/components/Info.tsx +15 -0
- package/src/components/EmptyPlaceholder/components/Loading.tsx +23 -0
- package/src/components/EmptyPlaceholder/context.ts +3 -3
- package/src/components/EmptyPlaceholder/index.tsx +7 -2
- package/src/components/EmptyPlaceholder/types.ts +2 -1
- package/src/components/SearchInput/index.tsx +12 -13
- package/src/index.ts +3 -1
- package/src/modules/backgroundTimer.ts +1 -1
- package/src/utils/useQueryListRefresh.ts +4 -9
- package/dist/components/EmptyPlaceholder/Components.d.ts +0 -7
- package/dist/components/EmptyPlaceholder/Components.js +0 -60
- package/dist/components/EmptyPlaceholder/Components.js.map +0 -1
- package/src/components/EmptyPlaceholder/Components.tsx +0 -89
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { useCompositionStyles } from '@codeleap/styles';
|
|
3
|
+
import { useEmptyPlaceholderContext } from '../context';
|
|
4
|
+
import { Button } from '../../Button';
|
|
5
|
+
import { TypeGuards } from '@codeleap/types';
|
|
6
|
+
export const EmptyPlaceholderButton = (props) => {
|
|
7
|
+
const { styles, buttonText, text, onPress, ...buttonProps } = useEmptyPlaceholderContext(props);
|
|
8
|
+
const buttonStyles = useCompositionStyles('button', styles);
|
|
9
|
+
const displayText = text || buttonText;
|
|
10
|
+
if (!TypeGuards.isFunction(onPress))
|
|
11
|
+
return null;
|
|
12
|
+
return (<Button {...buttonProps} onPress={onPress} debugName={`emptyPlaceholderButton:${buttonText}`} style={buttonStyles} text={displayText}/>);
|
|
13
|
+
};
|
|
14
|
+
//# sourceMappingURL=Button.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/EmptyPlaceholder/components/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAA;AAEvD,OAAO,EAAE,0BAA0B,EAAE,MAAM,YAAY,CAAA;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAE5C,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"}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { useEmptyPlaceholderContext } from '../context';
|
|
3
|
+
import { View } from '../../View';
|
|
4
|
+
import { logger } from '@codeleap/logger';
|
|
5
|
+
import { EmptyPlaceholderLoading } from './Loading';
|
|
6
|
+
import { EmptyPlaceholderButton } from './Button';
|
|
7
|
+
import { EmptyPlaceholderInfo } from './Info';
|
|
8
|
+
import { EmptyPlaceholderIllustration } from './Illustration';
|
|
9
|
+
const orderMap = {
|
|
10
|
+
illustration: EmptyPlaceholderIllustration,
|
|
11
|
+
info: EmptyPlaceholderInfo,
|
|
12
|
+
button: EmptyPlaceholderButton,
|
|
13
|
+
};
|
|
14
|
+
export const EmptyPlaceholderContent = ({ children }) => {
|
|
15
|
+
const { loading, styles, order } = useEmptyPlaceholderContext();
|
|
16
|
+
if (loading) {
|
|
17
|
+
return <EmptyPlaceholderLoading />;
|
|
18
|
+
}
|
|
19
|
+
if (children) {
|
|
20
|
+
return <View style={styles.wrapper}>{children}</View>;
|
|
21
|
+
}
|
|
22
|
+
return (<View style={styles.wrapper}>
|
|
23
|
+
{order.map(componentKey => {
|
|
24
|
+
const Component = orderMap[componentKey];
|
|
25
|
+
if (!Component) {
|
|
26
|
+
logger.warn(`[EmptyPlaceholder] Component "${componentKey}" not found in orderMap`);
|
|
27
|
+
return null;
|
|
28
|
+
}
|
|
29
|
+
return <Component key={'emptyPlaceholder:' + componentKey}/>;
|
|
30
|
+
})}
|
|
31
|
+
</View>);
|
|
32
|
+
};
|
|
33
|
+
//# sourceMappingURL=Content.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Content.js","sourceRoot":"","sources":["../../../../src/components/EmptyPlaceholder/components/Content.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,0BAA0B,EAAE,MAAM,YAAY,CAAA;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,uBAAuB,EAAE,MAAM,WAAW,CAAA;AACnD,OAAO,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAA;AACjD,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAE,4BAA4B,EAAE,MAAM,gBAAgB,CAAA;AAG7D,MAAM,QAAQ,GAAmD;IAC/D,YAAY,EAAE,4BAA4B;IAC1C,IAAI,EAAE,oBAAoB;IAC1B,MAAM,EAAE,sBAAsB;CAC/B,CAAA;AAED,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,EAAE,QAAQ,EAA2B,EAAE,EAAE;IAC/E,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,0BAA0B,EAAE,CAAA;IAE/D,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,KAAK,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE;YACxB,MAAM,SAAS,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAA;YAExC,IAAI,CAAC,SAAS,EAAE;gBACd,MAAM,CAAC,IAAI,CAAC,iCAAiC,YAAY,yBAAyB,CAAC,CAAA;gBACnF,OAAO,IAAI,CAAA;aACZ;YAED,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,mBAAmB,GAAG,YAAY,CAAC,EAAG,CAAA;QAC/D,CAAC,CAAC,CACJ;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Icon } from '../../Icon';
|
|
3
|
+
import { Image } from '../../Image';
|
|
4
|
+
import { useEmptyPlaceholderContext } from '../context';
|
|
5
|
+
export const EmptyPlaceholderIllustration = (props) => {
|
|
6
|
+
const { icon, image, styles } = useEmptyPlaceholderContext(props);
|
|
7
|
+
return <>
|
|
8
|
+
{icon ? <Icon name={icon} style={styles.icon}/> : null}
|
|
9
|
+
{image ? <Image source={image} style={styles.image}/> : null}
|
|
10
|
+
</>;
|
|
11
|
+
};
|
|
12
|
+
//# sourceMappingURL=Illustration.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Illustration.js","sourceRoot":"","sources":["../../../../src/components/EmptyPlaceholder/components/Illustration.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AAEjC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AACnC,OAAO,EAAE,0BAA0B,EAAE,MAAM,YAAY,CAAA;AAEvD,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"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Text } from '../../Text';
|
|
3
|
+
import { useEmptyPlaceholderContext } from '../context';
|
|
4
|
+
export const EmptyPlaceholderInfo = (props) => {
|
|
5
|
+
const { title, description, styles, itemName } = useEmptyPlaceholderContext(props);
|
|
6
|
+
const emptyText = title || (itemName && `No ${itemName} found.`);
|
|
7
|
+
return <>
|
|
8
|
+
{title || itemName ? <Text text={emptyText} style={styles.title}/> : null}
|
|
9
|
+
{description ? <Text text={description} style={styles.description}/> : null}
|
|
10
|
+
</>;
|
|
11
|
+
};
|
|
12
|
+
//# sourceMappingURL=Info.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Info.js","sourceRoot":"","sources":["../../../../src/components/EmptyPlaceholder/components/Info.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AAEjC,OAAO,EAAE,0BAA0B,EAAE,MAAM,YAAY,CAAA;AAEvD,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"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { useCompositionStyles } from '@codeleap/styles';
|
|
3
|
+
import { useEmptyPlaceholderContext } from '../context';
|
|
4
|
+
import { View } from '../../View';
|
|
5
|
+
import { ActivityIndicator } from '../../ActivityIndicator';
|
|
6
|
+
export const EmptyPlaceholderLoading = () => {
|
|
7
|
+
const { styles, loading, LoadingComponent } = useEmptyPlaceholderContext();
|
|
8
|
+
const activityIndicatorStyles = useCompositionStyles('loader', styles);
|
|
9
|
+
if (!loading)
|
|
10
|
+
return null;
|
|
11
|
+
if (React.isValidElement(LoadingComponent)) {
|
|
12
|
+
return <>{LoadingComponent}</>;
|
|
13
|
+
}
|
|
14
|
+
return (<View style={[styles.wrapper, styles['wrapper:loading']]}>
|
|
15
|
+
<ActivityIndicator style={activityIndicatorStyles}/>
|
|
16
|
+
</View>);
|
|
17
|
+
};
|
|
18
|
+
//# sourceMappingURL=Loading.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Loading.js","sourceRoot":"","sources":["../../../../src/components/EmptyPlaceholder/components/Loading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAA;AACvD,OAAO,EAAE,0BAA0B,EAAE,MAAM,YAAY,CAAA;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAA;AAE3D,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"}
|
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { EmptyPlaceholderCtxValue } from './types';
|
|
3
3
|
export declare const EmptyPlaceholderContext: import("react").Context<EmptyPlaceholderCtxValue>;
|
|
4
|
-
export declare const useEmptyPlaceholderContext: <T = EmptyPlaceholderCtxValue>(
|
|
4
|
+
export declare const useEmptyPlaceholderContext: <T = EmptyPlaceholderCtxValue>(providedProps?: Partial<T>) => {
|
|
5
5
|
description?: string;
|
|
6
6
|
onPress?: import("@codeleap/types").AnyFunction;
|
|
7
7
|
loading?: boolean;
|
|
8
8
|
title?: string;
|
|
9
9
|
image?: number | import("@d11/react-native-fast-image").Source;
|
|
10
10
|
icon?: never;
|
|
11
|
+
order?: ("info" | "button" | "illustration")[];
|
|
11
12
|
buttonText?: string;
|
|
12
13
|
itemName?: string;
|
|
13
14
|
LoadingComponent?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { createContext, useContext } from 'react';
|
|
2
2
|
export const EmptyPlaceholderContext = createContext({});
|
|
3
|
-
export const useEmptyPlaceholderContext = (
|
|
3
|
+
export const useEmptyPlaceholderContext = (providedProps = {}) => {
|
|
4
4
|
const ctx = useContext(EmptyPlaceholderContext);
|
|
5
5
|
if (!ctx) {
|
|
6
|
-
throw new Error('useEmptyPlaceholderContext must be used within an EmptyPlaceholder component.');
|
|
6
|
+
throw new Error('[EmptyPlaceholder] useEmptyPlaceholderContext must be used within an EmptyPlaceholder component.');
|
|
7
7
|
}
|
|
8
8
|
return {
|
|
9
9
|
...ctx,
|
|
10
|
-
...
|
|
10
|
+
...providedProps,
|
|
11
11
|
};
|
|
12
12
|
};
|
|
13
13
|
//# sourceMappingURL=context.js.map
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
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,gBAA4B,EAAE,EAAE,EAAE;IACzG,MAAM,GAAG,GAAG,UAAU,CAAC,uBAAuB,CAAC,CAAA;IAE/C,IAAI,CAAC,GAAG,EAAE;QACR,MAAM,IAAI,KAAK,CACb,kGAAkG,CACnG,CAAA;KACF;IAED,OAAO;QACL,GAAG,GAAG;QACN,GAAG,aAAa;KACjB,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -2,7 +2,10 @@ import React from 'react';
|
|
|
2
2
|
import { MobileStyleRegistry } from '../../Registry';
|
|
3
3
|
import { useStylesFor } from '../../hooks';
|
|
4
4
|
import { EmptyPlaceholderContext } from './context';
|
|
5
|
-
import {
|
|
5
|
+
import { EmptyPlaceholderInfo } from './components/Info';
|
|
6
|
+
import { EmptyPlaceholderButton } from './components/Button';
|
|
7
|
+
import { EmptyPlaceholderIllustration } from './components/Illustration';
|
|
8
|
+
import { EmptyPlaceholderContent } from './components/Content';
|
|
6
9
|
export * from './styles';
|
|
7
10
|
export * from './types';
|
|
8
11
|
export const EmptyPlaceholder = (props) => {
|
|
@@ -26,6 +29,8 @@ EmptyPlaceholder.Illustration = EmptyPlaceholderIllustration;
|
|
|
26
29
|
EmptyPlaceholder.withVariantTypes = (styles) => {
|
|
27
30
|
return EmptyPlaceholder;
|
|
28
31
|
};
|
|
29
|
-
EmptyPlaceholder.defaultProps = {
|
|
32
|
+
EmptyPlaceholder.defaultProps = {
|
|
33
|
+
order: ['illustration', 'info', 'button']
|
|
34
|
+
};
|
|
30
35
|
MobileStyleRegistry.registerComponent(EmptyPlaceholder);
|
|
31
36
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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,
|
|
1
|
+
{"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,oBAAoB,EAAE,MAAM,mBAAmB,CAAA;AACxD,OAAO,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAA;AAC5D,OAAO,EAAE,4BAA4B,EAAE,MAAM,2BAA2B,CAAA;AACxE,OAAO,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAA;AAE9D,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;IAC9B,KAAK,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,QAAQ,CAAC;CACR,CAAA;AAEnC,mBAAmB,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAA"}
|
|
@@ -16,6 +16,7 @@ export type EmptyPlaceholderProps = {
|
|
|
16
16
|
children?: ReactNode;
|
|
17
17
|
onPress?: AnyFunction;
|
|
18
18
|
buttonText?: string;
|
|
19
|
+
order?: Array<'info' | 'illustration' | 'button'>;
|
|
19
20
|
};
|
|
20
21
|
export type EmptyPlaceholderInfoProps = Pick<EmptyPlaceholderProps, 'title' | 'description'>;
|
|
21
22
|
export type EmptyPlaceholderIllustrationProps = Pick<EmptyPlaceholderProps, 'image' | 'icon'>;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { forwardRef, useState } from 'react';
|
|
1
|
+
import React, { forwardRef, useCallback, useState } from 'react';
|
|
2
2
|
import { TextInput } from '../TextInput';
|
|
3
3
|
import { TypeGuards } from '@codeleap/types';
|
|
4
4
|
export const SearchInput = forwardRef((props, ref) => {
|
|
@@ -8,7 +8,8 @@ export const SearchInput = forwardRef((props, ref) => {
|
|
|
8
8
|
};
|
|
9
9
|
const [search, setSearch] = !TypeGuards.isNil(value) && !!onValueChange ? [value, onValueChange] : useState('');
|
|
10
10
|
const setSearchTimeout = React.useRef(null);
|
|
11
|
-
const handleChangeSearch = (value) => {
|
|
11
|
+
const handleChangeSearch = useCallback((value) => {
|
|
12
|
+
onTypingChange?.(true);
|
|
12
13
|
setSearch(value);
|
|
13
14
|
if (TypeGuards.isNil(debounce)) {
|
|
14
15
|
onSearchChange?.(value);
|
|
@@ -16,22 +17,20 @@ export const SearchInput = forwardRef((props, ref) => {
|
|
|
16
17
|
else {
|
|
17
18
|
if (setSearchTimeout.current) {
|
|
18
19
|
clearTimeout(setSearchTimeout.current);
|
|
20
|
+
setSearchTimeout.current = null;
|
|
19
21
|
}
|
|
20
22
|
setSearchTimeout.current = setTimeout(() => {
|
|
21
23
|
onSearchChange(value);
|
|
22
24
|
onTypingChange?.(false);
|
|
23
25
|
}, debounce ?? 0);
|
|
24
26
|
}
|
|
25
|
-
};
|
|
26
|
-
const handleClear = () => {
|
|
27
|
+
}, [onSearchChange, onTypingChange]);
|
|
28
|
+
const handleClear = useCallback(() => {
|
|
27
29
|
setSearch('');
|
|
28
30
|
onSearchChange?.('');
|
|
29
31
|
onClear?.();
|
|
30
|
-
};
|
|
31
|
-
return (<TextInput value={search} onValueChange={(
|
|
32
|
-
onTypingChange?.(true);
|
|
33
|
-
handleChangeSearch(value);
|
|
34
|
-
}} placeholder={placeholder} debugName={`Search ${debugName}`} rightIcon={(showClear?.(search) ?? true) && {
|
|
32
|
+
}, []);
|
|
33
|
+
return (<TextInput value={search} onValueChange={handleChangeSearch} placeholder={placeholder} debugName={`Search ${debugName}`} rightIcon={(showClear?.(search) ?? true) && {
|
|
35
34
|
name: clearIcon,
|
|
36
35
|
onPress: handleClear,
|
|
37
36
|
}} leftIcon={{
|
|
@@ -39,7 +38,7 @@ export const SearchInput = forwardRef((props, ref) => {
|
|
|
39
38
|
}} ref={ref} {...others}/>);
|
|
40
39
|
});
|
|
41
40
|
SearchInput.defaultProps = {
|
|
42
|
-
debounce:
|
|
41
|
+
debounce: 500,
|
|
43
42
|
clearIcon: 'x',
|
|
44
43
|
searchIcon: 'search',
|
|
45
44
|
showClear: (s) => !!s?.trim?.()
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/SearchInput/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/SearchInput/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAGhE,OAAO,EAAkB,SAAS,EAAE,MAAM,cAAc,CAAA;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAgB5C,MAAM,CAAC,MAAM,WAAW,GAAuE,UAAU,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACvH,MAAM,EACJ,SAAS,EACT,OAAO,EACP,cAAc,EACd,cAAc,EACd,SAAS,EACT,UAAU,EACV,QAAQ,EACR,WAAW,EACX,KAAK,EACL,aAAa,EACb,SAAS,EACT,GAAG,MAAM,EACV,GAAG;QACF,GAAG,WAAW,CAAC,YAAY;QAC3B,GAAG,KAAK;KACT,CAAA;IAED,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAA;IAE/G,MAAM,gBAAgB,GAAG,KAAK,CAAC,MAAM,CAAsB,IAAI,CAAC,CAAA;IAEhE,MAAM,kBAAkB,GAAG,WAAW,CAAC,CAAC,KAAa,EAAE,EAAE;QACvD,cAAc,EAAE,CAAC,IAAI,CAAC,CAAA;QAEtB,SAAS,CAAC,KAAK,CAAC,CAAA;QAEhB,IAAI,UAAU,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE;YAC9B,cAAc,EAAE,CAAC,KAAK,CAAC,CAAA;SACxB;aAAM;YACL,IAAI,gBAAgB,CAAC,OAAO,EAAE;gBAC5B,YAAY,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAA;gBACtC,gBAAgB,CAAC,OAAO,GAAG,IAAI,CAAA;aAChC;YAED,gBAAgB,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;gBACzC,cAAc,CAAC,KAAK,CAAC,CAAA;gBACrB,cAAc,EAAE,CAAC,KAAK,CAAC,CAAA;YACzB,CAAC,EAAE,QAAQ,IAAI,CAAC,CAAC,CAAA;SAClB;IACH,CAAC,EAAE,CAAC,cAAc,EAAE,cAAc,CAAC,CAAC,CAAA;IAEpC,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,SAAS,CAAC,EAAE,CAAC,CAAA;QACb,cAAc,EAAE,CAAC,EAAE,CAAC,CAAA;QACpB,OAAO,EAAE,EAAE,CAAA;IACb,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,CACL,CAAC,SAAS,CACR,KAAK,CAAC,CAAC,MAAM,CAAC,CACd,aAAa,CAAC,CAAC,kBAAkB,CAAC,CAClC,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,SAAS,CAAC,CAAC,UAAU,SAAS,EAAE,CAAC,CACjC,SAAS,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI;YAC1C,IAAI,EAAE,SAAS;YACf,OAAO,EAAE,WAAW;SACrB,CAAC,CACF,QAAQ,CAAC,CAAC;YACR,IAAI,EAAE,UAAU;SACjB,CAAC,CACF,GAAG,CAAC,CAAC,GAAG,CAAC,CACT,IAAI,MAAM,CAAC,EACX,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,WAAW,CAAC,YAAY,GAAG;IACzB,QAAQ,EAAE,GAAG;IACb,SAAS,EAAE,GAAc;IACzB,UAAU,EAAE,QAAmB;IAC/B,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE;CACH,CAAA"}
|
|
@@ -111,8 +111,8 @@ export declare const Tabs: {
|
|
|
111
111
|
onContentSizeChange?: (w: number, h: number) => void;
|
|
112
112
|
onScroll?: (event: import("react-native/types").NativeSyntheticEvent<import("react-native/types").NativeScrollEvent>) => void;
|
|
113
113
|
scrollEnabled?: boolean;
|
|
114
|
-
keyExtractor?: (item: any, index: number) => string;
|
|
115
114
|
contentContainerStyle?: import("react-native/types").StyleProp<import("react-native/types").ViewStyle>;
|
|
115
|
+
keyExtractor?: (item: any, index: number) => string;
|
|
116
116
|
onMomentumScrollEnd?: (event: import("react-native/types").NativeSyntheticEvent<import("react-native/types").NativeScrollEvent>) => void;
|
|
117
117
|
decelerationRate?: number | "normal" | "fast";
|
|
118
118
|
horizontal?: boolean;
|
|
@@ -148,7 +148,7 @@ export declare const Tabs: {
|
|
|
148
148
|
contentOffset?: import("react-native/types").PointProp;
|
|
149
149
|
contentInsetAdjustmentBehavior?: "always" | "never" | "automatic" | "scrollableAxes";
|
|
150
150
|
directionalLockEnabled?: boolean;
|
|
151
|
-
indicatorStyle?: "
|
|
151
|
+
indicatorStyle?: "black" | "white" | "default";
|
|
152
152
|
maintainVisibleContentPosition?: {
|
|
153
153
|
autoscrollToTopThreshold?: number;
|
|
154
154
|
minIndexForVisible: number;
|
package/dist/index.d.ts
CHANGED
|
@@ -4,7 +4,7 @@ export * from './hooks';
|
|
|
4
4
|
export * from './modules';
|
|
5
5
|
export * from './deprecated';
|
|
6
6
|
export { Linking } from 'react-native';
|
|
7
|
+
export { MobileStyleRegistry } from './Registry';
|
|
7
8
|
import uuid from 'react-native-uuid';
|
|
8
9
|
export { uuid };
|
|
9
|
-
export { MobileStyleRegistry } from './Registry';
|
|
10
10
|
import './modules/formConfig';
|
package/dist/index.js
CHANGED
|
@@ -4,8 +4,8 @@ export * from './hooks';
|
|
|
4
4
|
export * from './modules';
|
|
5
5
|
export * from './deprecated';
|
|
6
6
|
export { Linking } from 'react-native';
|
|
7
|
+
export { MobileStyleRegistry } from './Registry';
|
|
7
8
|
import uuid from 'react-native-uuid';
|
|
8
9
|
export { uuid };
|
|
9
|
-
export { MobileStyleRegistry } from './Registry';
|
|
10
10
|
import './modules/formConfig';
|
|
11
11
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAA;AACvC,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,cAAc,CAAA;AAE5B,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AACtC,OAAO,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAA;AACvC,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,cAAc,CAAA;AAE5B,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AACtC,OAAO,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAA;AAEhD,OAAO,IAAI,MAAM,mBAAmB,CAAA;AAEpC,OAAO,EAAE,IAAI,EAAE,CAAA;AAEf,OAAO,sBAAsB,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"backgroundTimer.js","sourceRoot":"","sources":["../../src/modules/backgroundTimer.ts"],"names":[],"mappings":"AACA,OAAO,
|
|
1
|
+
{"version":3,"file":"backgroundTimer.js","sourceRoot":"","sources":["../../src/modules/backgroundTimer.ts"],"names":[],"mappings":"AACA,OAAO,IAAI,MAAM,mBAAmB,CAAA;AAEpC,MAAM,eAAe,GAAG,EAAE,CAAA;AAE1B,MAAM,UAAU,QAAQ,CAAC,IAAiB,EAAE,GAAY,EAAE,KAAK,GAAG,GAAG;IACnE,IAAI,CAAC,GAAG,EAAE;QACR,GAAG,GAAG,IAAI,CAAC,EAAE,EAAY,CAAA;KAC1B;IACD,IAAI,eAAe,CAAC,GAAG,CAAC,EAAE;QACxB,OAAM;KACP;IACD,eAAe,CAAC,GAAG,CAAC,GAAG,UAAU,CAAC;QAChC,IAAI,EAAE,CAAA;QACN,eAAe,CAAC,GAAG,CAAC,GAAG,SAAS,CAAA;IAClC,CAAC,EAAE,KAAK,CAAC,CAAA;IAET,OAAO,GAAG,CAAA;AACZ,CAAC;AAED,MAAM,eAAe,GAAG,EAAE,CAAA;AAE1B,MAAM,UAAU,QAAQ,CAAC,IAAiB,EAAE,GAAY,EAAE,KAAK,GAAG,GAAG;IACnE,IAAI,CAAC,GAAG,EAAE;QACR,GAAG,GAAG,IAAI,CAAC,EAAE,EAAY,CAAA;KAC1B;IAED,IAAI,eAAe,CAAC,GAAG,CAAC,EAAE;QACxB,YAAY,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,CAAA;KACnC;IAED,eAAe,CAAC,GAAG,CAAC,GAAG,UAAU,CAAC;QAChC,IAAI,EAAE,CAAA;QACN,eAAe,CAAC,GAAG,CAAC,GAAG,SAAS,CAAA;IAClC,CAAC,EAAE,KAAK,CAAC,CAAA;IAET,OAAO,GAAG,CAAA;AACZ,CAAC"}
|
|
@@ -1,10 +1,8 @@
|
|
|
1
1
|
import { AnyFunction } from '@codeleap/types';
|
|
2
|
-
import {
|
|
3
|
-
type useQueryListRefresh = (listQuery: Parameters<
|
|
2
|
+
import { QueryManagerOptions } from '@codeleap/query';
|
|
3
|
+
type useQueryListRefresh = (listQuery: Parameters<QueryManagerOptions<any, any>['useListEffect']>[0], options?: {
|
|
4
4
|
staleTime?: number;
|
|
5
|
-
silentRefresh?: boolean;
|
|
6
5
|
initialStale?: boolean;
|
|
7
|
-
cancelQueryEnabled?: boolean;
|
|
8
6
|
refreshQueryEnabled?: boolean;
|
|
9
7
|
onFocus?: AnyFunction;
|
|
10
8
|
onBlur?: AnyFunction;
|
|
@@ -2,19 +2,17 @@ import React from 'react';
|
|
|
2
2
|
import { useFocusEffect } from '@react-navigation/native';
|
|
3
3
|
import { TypeGuards } from '@codeleap/types';
|
|
4
4
|
export const useQueryListRefresh = (listQuery, options = {}) => {
|
|
5
|
-
const { staleTime = 5000, initialStale = listQuery?.
|
|
5
|
+
const { staleTime = 5000, initialStale = listQuery?.isStale, refreshQueryEnabled = true, onFocus, onBlur, } = options;
|
|
6
6
|
const staleRefetch = React.useRef(initialStale);
|
|
7
7
|
const staleTimeout = React.useRef(null);
|
|
8
8
|
useFocusEffect(React.useCallback(() => {
|
|
9
9
|
if (staleRefetch.current && refreshQueryEnabled) {
|
|
10
|
-
listQuery?.
|
|
10
|
+
listQuery?.refetch();
|
|
11
11
|
}
|
|
12
12
|
if (TypeGuards.isFunction(onFocus)) {
|
|
13
13
|
onFocus?.();
|
|
14
14
|
}
|
|
15
15
|
return () => {
|
|
16
|
-
if (cancelQueryEnabled)
|
|
17
|
-
listQuery?.cancelQuery?.();
|
|
18
16
|
staleRefetch.current = false;
|
|
19
17
|
if (staleTimeout.current == null) {
|
|
20
18
|
staleTimeout.current = setTimeout(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useQueryListRefresh.js","sourceRoot":"","sources":["../../src/utils/useQueryListRefresh.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAA;AACzD,OAAO,EAAe,UAAU,EAAE,MAAM,iBAAiB,CAAA;
|
|
1
|
+
{"version":3,"file":"useQueryListRefresh.js","sourceRoot":"","sources":["../../src/utils/useQueryListRefresh.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAA;AACzD,OAAO,EAAe,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAczD,MAAM,CAAC,MAAM,mBAAmB,GAAwB,CAAC,SAAS,EAAE,OAAO,GAAG,EAAE,EAAE,EAAE;IAClF,MAAM,EACJ,SAAS,GAAG,IAAI,EAChB,YAAY,GAAG,SAAS,EAAE,OAAO,EACjC,mBAAmB,GAAG,IAAI,EAC1B,OAAO,EACP,MAAM,GACP,GAAG,OAAO,CAAA;IAEX,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,CAAA;IAC/C,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;IAEvC,cAAc,CACZ,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACrB,IAAI,YAAY,CAAC,OAAO,IAAI,mBAAmB,EAAE;YAC/C,SAAS,EAAE,OAAO,EAAE,CAAA;SACrB;QAED,IAAI,UAAU,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;YAClC,OAAO,EAAE,EAAE,CAAA;SACZ;QAED,OAAO,GAAG,EAAE;YACV,YAAY,CAAC,OAAO,GAAG,KAAK,CAAA;YAE5B,IAAI,YAAY,CAAC,OAAO,IAAI,IAAI,EAAE;gBAChC,YAAY,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;oBACrC,YAAY,CAAC,OAAO,GAAG,IAAI,CAAA;oBAC3B,YAAY,CAAC,YAAY,CAAC,OAAO,CAAC,CAAA;oBAClC,YAAY,CAAC,OAAO,GAAG,IAAI,CAAA;gBAC7B,CAAC,EAAE,SAAS,CAAC,CAAA;aACd;YAED,IAAI,UAAU,CAAC,UAAU,CAAC,MAAM,CAAC,EAAE;gBACjC,MAAM,EAAE,EAAE,CAAA;aACX;QACH,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CACP,CAAA;AACH,CAAC,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@codeleap/mobile",
|
|
3
|
-
"version": "5.8.
|
|
3
|
+
"version": "5.8.4",
|
|
4
4
|
"main": "src/index.ts",
|
|
5
5
|
"license": "UNLICENSED",
|
|
6
6
|
"repository": {
|
|
@@ -9,28 +9,28 @@
|
|
|
9
9
|
"directory": "packages/mobile"
|
|
10
10
|
},
|
|
11
11
|
"devDependencies": {
|
|
12
|
-
"@codeleap/types": "5.8.
|
|
13
|
-
"@codeleap/utils": "5.8.
|
|
14
|
-
"@codeleap/hooks": "5.8.
|
|
15
|
-
"@codeleap/form": "5.8.
|
|
16
|
-
"@codeleap/query": "5.8.
|
|
17
|
-
"@codeleap/logger": "5.8.
|
|
18
|
-
"@codeleap/config": "5.8.
|
|
19
|
-
"@codeleap/modals": "5.8.
|
|
12
|
+
"@codeleap/types": "5.8.4",
|
|
13
|
+
"@codeleap/utils": "5.8.4",
|
|
14
|
+
"@codeleap/hooks": "5.8.4",
|
|
15
|
+
"@codeleap/form": "5.8.4",
|
|
16
|
+
"@codeleap/query": "5.8.4",
|
|
17
|
+
"@codeleap/logger": "5.8.4",
|
|
18
|
+
"@codeleap/config": "5.8.4",
|
|
19
|
+
"@codeleap/modals": "5.8.4"
|
|
20
20
|
},
|
|
21
21
|
"scripts": {
|
|
22
22
|
"build": "tsc --build",
|
|
23
23
|
"lint": "eslint -c .eslintrc.js --fix \"./src/**/*.{ts,tsx,js,jsx}\""
|
|
24
24
|
},
|
|
25
25
|
"peerDependencies": {
|
|
26
|
-
"@codeleap/types": "5.8.
|
|
27
|
-
"@codeleap/utils": "5.8.
|
|
28
|
-
"@codeleap/hooks": "5.8.
|
|
29
|
-
"@codeleap/form": "5.8.
|
|
30
|
-
"@codeleap/query": "5.8.
|
|
31
|
-
"@codeleap/logger": "5.8.
|
|
32
|
-
"@codeleap/styles": "5.8.
|
|
33
|
-
"@codeleap/modals": "5.8.
|
|
26
|
+
"@codeleap/types": "5.8.4",
|
|
27
|
+
"@codeleap/utils": "5.8.4",
|
|
28
|
+
"@codeleap/hooks": "5.8.4",
|
|
29
|
+
"@codeleap/form": "5.8.4",
|
|
30
|
+
"@codeleap/query": "5.8.4",
|
|
31
|
+
"@codeleap/logger": "5.8.4",
|
|
32
|
+
"@codeleap/styles": "5.8.4",
|
|
33
|
+
"@codeleap/modals": "5.8.4",
|
|
34
34
|
"@d11/react-native-fast-image": "8.9.2",
|
|
35
35
|
"@react-native-firebase/messaging": "21.12.0",
|
|
36
36
|
"@react-navigation/bottom-tabs": "7.3.10",
|
|
@@ -56,6 +56,6 @@
|
|
|
56
56
|
"react-native-masked-text": "1.13.0",
|
|
57
57
|
"react-native-reanimated-carousel": "4.0.2",
|
|
58
58
|
"react-native-sortables": "1.1.1",
|
|
59
|
-
"react-native-uuid": "2.0.
|
|
59
|
+
"react-native-uuid": "2.0.3"
|
|
60
60
|
}
|
|
61
61
|
}
|
package/package.json.bak
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@codeleap/mobile",
|
|
3
|
-
"version": "5.8.
|
|
3
|
+
"version": "5.8.4",
|
|
4
4
|
"main": "src/index.ts",
|
|
5
5
|
"license": "UNLICENSED",
|
|
6
6
|
"repository": {
|
|
@@ -56,6 +56,6 @@
|
|
|
56
56
|
"react-native-masked-text": "1.13.0",
|
|
57
57
|
"react-native-reanimated-carousel": "4.0.2",
|
|
58
58
|
"react-native-sortables": "1.1.1",
|
|
59
|
-
"react-native-uuid": "2.0.
|
|
59
|
+
"react-native-uuid": "2.0.3"
|
|
60
60
|
}
|
|
61
61
|
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { useCompositionStyles } from '@codeleap/styles'
|
|
3
|
+
import { EmptyPlaceholderButtonProps } from '../types'
|
|
4
|
+
import { useEmptyPlaceholderContext } from '../context'
|
|
5
|
+
import { Button } from '../../Button'
|
|
6
|
+
import { TypeGuards } from '@codeleap/types'
|
|
7
|
+
|
|
8
|
+
export const EmptyPlaceholderButton = (props: EmptyPlaceholderButtonProps) => {
|
|
9
|
+
const { styles, buttonText, text, onPress, ...buttonProps } = useEmptyPlaceholderContext(props)
|
|
10
|
+
|
|
11
|
+
const buttonStyles = useCompositionStyles('button', styles)
|
|
12
|
+
|
|
13
|
+
const displayText = text || buttonText
|
|
14
|
+
|
|
15
|
+
if (!TypeGuards.isFunction(onPress)) return null
|
|
16
|
+
|
|
17
|
+
return (
|
|
18
|
+
<Button
|
|
19
|
+
{...buttonProps}
|
|
20
|
+
onPress={onPress}
|
|
21
|
+
debugName={`emptyPlaceholderButton:${buttonText}`}
|
|
22
|
+
style={buttonStyles}
|
|
23
|
+
text={displayText}
|
|
24
|
+
/>
|
|
25
|
+
)
|
|
26
|
+
}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { useEmptyPlaceholderContext } from '../context'
|
|
3
|
+
import { View } from '../../View'
|
|
4
|
+
import { logger } from '@codeleap/logger'
|
|
5
|
+
import { EmptyPlaceholderLoading } from './Loading'
|
|
6
|
+
import { EmptyPlaceholderButton } from './Button'
|
|
7
|
+
import { EmptyPlaceholderInfo } from './Info'
|
|
8
|
+
import { EmptyPlaceholderIllustration } from './Illustration'
|
|
9
|
+
import { EmptyPlaceholderProps } from '../types'
|
|
10
|
+
|
|
11
|
+
const orderMap: Record<EmptyPlaceholderProps['order'][0], any> = {
|
|
12
|
+
illustration: EmptyPlaceholderIllustration,
|
|
13
|
+
info: EmptyPlaceholderInfo,
|
|
14
|
+
button: EmptyPlaceholderButton,
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
export const EmptyPlaceholderContent = ({ children }: React.PropsWithChildren) => {
|
|
18
|
+
const { loading, styles, order } = useEmptyPlaceholderContext()
|
|
19
|
+
|
|
20
|
+
if (loading) {
|
|
21
|
+
return <EmptyPlaceholderLoading />
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
if (children) {
|
|
25
|
+
return <View style={styles.wrapper}>{children}</View>
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
return (
|
|
29
|
+
<View style={styles.wrapper}>
|
|
30
|
+
{order.map(componentKey => {
|
|
31
|
+
const Component = orderMap[componentKey]
|
|
32
|
+
|
|
33
|
+
if (!Component) {
|
|
34
|
+
logger.warn(`[EmptyPlaceholder] Component "${componentKey}" not found in orderMap`)
|
|
35
|
+
return null
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
return <Component key={'emptyPlaceholder:' + componentKey} />
|
|
39
|
+
})}
|
|
40
|
+
</View>
|
|
41
|
+
)
|
|
42
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { AppIcon } from '@codeleap/styles'
|
|
3
|
+
import { Icon } from '../../Icon'
|
|
4
|
+
import { EmptyPlaceholderIllustrationProps } from '../types'
|
|
5
|
+
import { Image } from '../../Image'
|
|
6
|
+
import { useEmptyPlaceholderContext } from '../context'
|
|
7
|
+
|
|
8
|
+
export const EmptyPlaceholderIllustration = (props: EmptyPlaceholderIllustrationProps) => {
|
|
9
|
+
const { icon, image, styles } = useEmptyPlaceholderContext(props)
|
|
10
|
+
|
|
11
|
+
return <>
|
|
12
|
+
{icon ? <Icon name={icon as AppIcon} style={styles.icon} /> : null}
|
|
13
|
+
{image ? <Image source={image} style={styles.image} /> : null}
|
|
14
|
+
</>
|
|
15
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { Text } from '../../Text'
|
|
3
|
+
import { EmptyPlaceholderInfoProps } from '../types'
|
|
4
|
+
import { useEmptyPlaceholderContext } from '../context'
|
|
5
|
+
|
|
6
|
+
export const EmptyPlaceholderInfo = (props: EmptyPlaceholderInfoProps) => {
|
|
7
|
+
const { title, description, styles, itemName } = useEmptyPlaceholderContext(props)
|
|
8
|
+
|
|
9
|
+
const emptyText = title || (itemName && `No ${itemName} found.`)
|
|
10
|
+
|
|
11
|
+
return <>
|
|
12
|
+
{title || itemName ? <Text text={emptyText} style={styles.title} /> : null}
|
|
13
|
+
{description ? <Text text={description} style={styles.description} /> : null}
|
|
14
|
+
</>
|
|
15
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { useCompositionStyles } from '@codeleap/styles'
|
|
3
|
+
import { useEmptyPlaceholderContext } from '../context'
|
|
4
|
+
import { View } from '../../View'
|
|
5
|
+
import { ActivityIndicator } from '../../ActivityIndicator'
|
|
6
|
+
|
|
7
|
+
export const EmptyPlaceholderLoading = () => {
|
|
8
|
+
const { styles, loading, LoadingComponent } = useEmptyPlaceholderContext()
|
|
9
|
+
|
|
10
|
+
const activityIndicatorStyles = useCompositionStyles('loader', styles)
|
|
11
|
+
|
|
12
|
+
if (!loading) return null
|
|
13
|
+
|
|
14
|
+
if (React.isValidElement(LoadingComponent)) {
|
|
15
|
+
return <>{LoadingComponent}</>
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
return (
|
|
19
|
+
<View style={[styles.wrapper, styles['wrapper:loading']]} >
|
|
20
|
+
<ActivityIndicator style={activityIndicatorStyles} />
|
|
21
|
+
</View>
|
|
22
|
+
)
|
|
23
|
+
}
|
|
@@ -3,17 +3,17 @@ import { EmptyPlaceholderCtxValue } from './types'
|
|
|
3
3
|
|
|
4
4
|
export const EmptyPlaceholderContext = createContext({} as EmptyPlaceholderCtxValue)
|
|
5
5
|
|
|
6
|
-
export const useEmptyPlaceholderContext = <T = EmptyPlaceholderCtxValue>(
|
|
6
|
+
export const useEmptyPlaceholderContext = <T = EmptyPlaceholderCtxValue>(providedProps: Partial<T> = {}) => {
|
|
7
7
|
const ctx = useContext(EmptyPlaceholderContext)
|
|
8
8
|
|
|
9
9
|
if (!ctx) {
|
|
10
10
|
throw new Error(
|
|
11
|
-
'useEmptyPlaceholderContext must be used within an EmptyPlaceholder component.'
|
|
11
|
+
'[EmptyPlaceholder] useEmptyPlaceholderContext must be used within an EmptyPlaceholder component.'
|
|
12
12
|
)
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
return {
|
|
16
16
|
...ctx,
|
|
17
|
-
...
|
|
17
|
+
...providedProps,
|
|
18
18
|
}
|
|
19
19
|
}
|
|
@@ -4,7 +4,10 @@ import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles'
|
|
|
4
4
|
import { MobileStyleRegistry } from '../../Registry'
|
|
5
5
|
import { useStylesFor } from '../../hooks'
|
|
6
6
|
import { EmptyPlaceholderContext } from './context'
|
|
7
|
-
import {
|
|
7
|
+
import { EmptyPlaceholderInfo } from './components/Info'
|
|
8
|
+
import { EmptyPlaceholderButton } from './components/Button'
|
|
9
|
+
import { EmptyPlaceholderIllustration } from './components/Illustration'
|
|
10
|
+
import { EmptyPlaceholderContent } from './components/Content'
|
|
8
11
|
|
|
9
12
|
export * from './styles'
|
|
10
13
|
export * from './types'
|
|
@@ -42,6 +45,8 @@ EmptyPlaceholder.withVariantTypes = <S extends AnyRecord>(styles: S) => {
|
|
|
42
45
|
return EmptyPlaceholder as ((props: StyledComponentProps<EmptyPlaceholderProps, typeof styles>) => IJSX) & Pick<typeof EmptyPlaceholder, 'Button' | 'Illustration' | 'Info'>
|
|
43
46
|
}
|
|
44
47
|
|
|
45
|
-
EmptyPlaceholder.defaultProps = {
|
|
48
|
+
EmptyPlaceholder.defaultProps = {
|
|
49
|
+
order: ['illustration', 'info', 'button']
|
|
50
|
+
} as Partial<EmptyPlaceholderProps>
|
|
46
51
|
|
|
47
52
|
MobileStyleRegistry.registerComponent(EmptyPlaceholder)
|
|
@@ -17,6 +17,7 @@ export type EmptyPlaceholderProps = {
|
|
|
17
17
|
children?: ReactNode
|
|
18
18
|
onPress?: AnyFunction
|
|
19
19
|
buttonText?: string
|
|
20
|
+
order?: Array<'info' | 'illustration' | 'button'>
|
|
20
21
|
}
|
|
21
22
|
|
|
22
23
|
export type EmptyPlaceholderInfoProps = Pick<EmptyPlaceholderProps, 'title' | 'description'>
|
|
@@ -27,4 +28,4 @@ export type EmptyPlaceholderButtonProps = Pick<EmptyPlaceholderProps, 'onPress'>
|
|
|
27
28
|
|
|
28
29
|
export type EmptyPlaceholderCtxValue = Omit<EmptyPlaceholderProps, 'style' | 'children'> & {
|
|
29
30
|
styles: StyleRecord<EmptyPlaceholderComposition>
|
|
30
|
-
}
|
|
31
|
+
}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import React, { forwardRef, useState } from 'react'
|
|
1
|
+
import React, { forwardRef, useCallback, useState } from 'react'
|
|
2
2
|
import { AppIcon } from '@codeleap/styles'
|
|
3
|
-
import {
|
|
3
|
+
import { ForwardRefComponentWithDefaultProps } from '../../types'
|
|
4
4
|
import { TextInputProps, TextInput } from '../TextInput'
|
|
5
5
|
import { TypeGuards } from '@codeleap/types'
|
|
6
|
-
import { TextInput
|
|
6
|
+
import { TextInput as RNTextInput } from 'react-native'
|
|
7
7
|
|
|
8
8
|
export type SearchInputProps = {
|
|
9
9
|
onTypingChange: (isTyping: boolean) => void
|
|
@@ -41,7 +41,9 @@ export const SearchInput: ForwardRefComponentWithDefaultProps<SearchInputProps,
|
|
|
41
41
|
|
|
42
42
|
const setSearchTimeout = React.useRef<NodeJS.Timer | null>(null)
|
|
43
43
|
|
|
44
|
-
const handleChangeSearch = (value: string) => {
|
|
44
|
+
const handleChangeSearch = useCallback((value: string) => {
|
|
45
|
+
onTypingChange?.(true)
|
|
46
|
+
|
|
45
47
|
setSearch(value)
|
|
46
48
|
|
|
47
49
|
if (TypeGuards.isNil(debounce)) {
|
|
@@ -49,29 +51,26 @@ export const SearchInput: ForwardRefComponentWithDefaultProps<SearchInputProps,
|
|
|
49
51
|
} else {
|
|
50
52
|
if (setSearchTimeout.current) {
|
|
51
53
|
clearTimeout(setSearchTimeout.current)
|
|
54
|
+
setSearchTimeout.current = null
|
|
52
55
|
}
|
|
53
56
|
|
|
54
57
|
setSearchTimeout.current = setTimeout(() => {
|
|
55
|
-
|
|
56
58
|
onSearchChange(value)
|
|
57
59
|
onTypingChange?.(false)
|
|
58
60
|
}, debounce ?? 0)
|
|
59
61
|
}
|
|
60
|
-
}
|
|
62
|
+
}, [onSearchChange, onTypingChange])
|
|
61
63
|
|
|
62
|
-
const handleClear = () => {
|
|
64
|
+
const handleClear = useCallback(() => {
|
|
63
65
|
setSearch('')
|
|
64
66
|
onSearchChange?.('')
|
|
65
67
|
onClear?.()
|
|
66
|
-
}
|
|
68
|
+
}, [])
|
|
67
69
|
|
|
68
70
|
return (
|
|
69
71
|
<TextInput
|
|
70
72
|
value={search}
|
|
71
|
-
onValueChange={
|
|
72
|
-
onTypingChange?.(true)
|
|
73
|
-
handleChangeSearch(value)
|
|
74
|
-
}}
|
|
73
|
+
onValueChange={handleChangeSearch}
|
|
75
74
|
placeholder={placeholder}
|
|
76
75
|
debugName={`Search ${debugName}`}
|
|
77
76
|
rightIcon={(showClear?.(search) ?? true) && {
|
|
@@ -88,7 +87,7 @@ export const SearchInput: ForwardRefComponentWithDefaultProps<SearchInputProps,
|
|
|
88
87
|
})
|
|
89
88
|
|
|
90
89
|
SearchInput.defaultProps = {
|
|
91
|
-
debounce:
|
|
90
|
+
debounce: 500,
|
|
92
91
|
clearIcon: 'x' as AppIcon,
|
|
93
92
|
searchIcon: 'search' as AppIcon,
|
|
94
93
|
showClear: (s) => !!s?.trim?.()
|
package/src/index.ts
CHANGED
|
@@ -5,8 +5,10 @@ export * from './modules'
|
|
|
5
5
|
export * from './deprecated'
|
|
6
6
|
|
|
7
7
|
export { Linking } from 'react-native'
|
|
8
|
+
export { MobileStyleRegistry } from './Registry'
|
|
9
|
+
|
|
8
10
|
import uuid from 'react-native-uuid'
|
|
11
|
+
|
|
9
12
|
export { uuid }
|
|
10
|
-
export { MobileStyleRegistry } from './Registry'
|
|
11
13
|
|
|
12
14
|
import './modules/formConfig'
|
|
@@ -1,15 +1,13 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
2
|
import { useFocusEffect } from '@react-navigation/native'
|
|
3
3
|
import { AnyFunction, TypeGuards } from '@codeleap/types'
|
|
4
|
-
import {
|
|
4
|
+
import { QueryManagerOptions } from '@codeleap/query'
|
|
5
5
|
|
|
6
6
|
type useQueryListRefresh = (
|
|
7
|
-
listQuery: Parameters<
|
|
7
|
+
listQuery: Parameters<QueryManagerOptions<any, any>['useListEffect']>[0],
|
|
8
8
|
options?: {
|
|
9
9
|
staleTime?: number
|
|
10
|
-
silentRefresh?: boolean
|
|
11
10
|
initialStale?: boolean
|
|
12
|
-
cancelQueryEnabled?: boolean
|
|
13
11
|
refreshQueryEnabled?: boolean
|
|
14
12
|
onFocus?: AnyFunction
|
|
15
13
|
onBlur?: AnyFunction
|
|
@@ -19,10 +17,8 @@ type useQueryListRefresh = (
|
|
|
19
17
|
export const useQueryListRefresh: useQueryListRefresh = (listQuery, options = {}) => {
|
|
20
18
|
const {
|
|
21
19
|
staleTime = 5000,
|
|
22
|
-
initialStale = listQuery?.
|
|
23
|
-
cancelQueryEnabled = true,
|
|
20
|
+
initialStale = listQuery?.isStale,
|
|
24
21
|
refreshQueryEnabled = true,
|
|
25
|
-
silentRefresh = false,
|
|
26
22
|
onFocus,
|
|
27
23
|
onBlur,
|
|
28
24
|
} = options
|
|
@@ -33,7 +29,7 @@ export const useQueryListRefresh: useQueryListRefresh = (listQuery, options = {}
|
|
|
33
29
|
useFocusEffect(
|
|
34
30
|
React.useCallback(() => {
|
|
35
31
|
if (staleRefetch.current && refreshQueryEnabled) {
|
|
36
|
-
listQuery?.
|
|
32
|
+
listQuery?.refetch()
|
|
37
33
|
}
|
|
38
34
|
|
|
39
35
|
if (TypeGuards.isFunction(onFocus)) {
|
|
@@ -41,7 +37,6 @@ export const useQueryListRefresh: useQueryListRefresh = (listQuery, options = {}
|
|
|
41
37
|
}
|
|
42
38
|
|
|
43
39
|
return () => {
|
|
44
|
-
if (cancelQueryEnabled) listQuery?.cancelQuery?.()
|
|
45
40
|
staleRefetch.current = false
|
|
46
41
|
|
|
47
42
|
if (staleTimeout.current == null) {
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { EmptyPlaceholderButtonProps, EmptyPlaceholderIllustrationProps, EmptyPlaceholderInfoProps } from './types';
|
|
3
|
-
export declare const EmptyPlaceholderInfo: (props: EmptyPlaceholderInfoProps) => JSX.Element;
|
|
4
|
-
export declare const EmptyPlaceholderIllustration: (props: EmptyPlaceholderIllustrationProps) => JSX.Element;
|
|
5
|
-
export declare const EmptyPlaceholderButton: (props: EmptyPlaceholderButtonProps) => JSX.Element;
|
|
6
|
-
export declare const EmptyPlaceholderLoading: () => JSX.Element;
|
|
7
|
-
export declare const EmptyPlaceholderContent: ({ children }: React.PropsWithChildren) => JSX.Element;
|
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { useCompositionStyles } from '@codeleap/styles';
|
|
3
|
-
import { Icon } from '../Icon';
|
|
4
|
-
import { Text } from '../Text';
|
|
5
|
-
import { Image } from '../Image';
|
|
6
|
-
import { useEmptyPlaceholderContext } from './context';
|
|
7
|
-
import { Button } from '../Button';
|
|
8
|
-
import { View } from '../View';
|
|
9
|
-
import { ActivityIndicator } from '../ActivityIndicator';
|
|
10
|
-
import { TypeGuards } from '@codeleap/types';
|
|
11
|
-
export const EmptyPlaceholderInfo = (props) => {
|
|
12
|
-
const { title, description, styles, itemName } = useEmptyPlaceholderContext(props);
|
|
13
|
-
const emptyText = title || (itemName && `No ${itemName} found.`);
|
|
14
|
-
return <>
|
|
15
|
-
{title || itemName ? <Text text={emptyText} style={styles.title}/> : null}
|
|
16
|
-
{description ? <Text text={description} style={styles.description}/> : null}
|
|
17
|
-
</>;
|
|
18
|
-
};
|
|
19
|
-
export const EmptyPlaceholderIllustration = (props) => {
|
|
20
|
-
const { icon, image, styles } = useEmptyPlaceholderContext(props);
|
|
21
|
-
return <>
|
|
22
|
-
{icon ? <Icon name={icon} style={styles.icon}/> : null}
|
|
23
|
-
{image ? <Image source={image} style={styles.image}/> : null}
|
|
24
|
-
</>;
|
|
25
|
-
};
|
|
26
|
-
export const EmptyPlaceholderButton = (props) => {
|
|
27
|
-
const { styles, buttonText, text, onPress, ...buttonProps } = useEmptyPlaceholderContext(props);
|
|
28
|
-
const buttonStyles = useCompositionStyles('button', styles);
|
|
29
|
-
const displayText = text || buttonText;
|
|
30
|
-
if (!TypeGuards.isFunction(onPress))
|
|
31
|
-
return null;
|
|
32
|
-
return (<Button {...buttonProps} onPress={onPress} debugName={`emptyPlaceholderButton:${buttonText}`} style={buttonStyles} text={displayText}/>);
|
|
33
|
-
};
|
|
34
|
-
export const EmptyPlaceholderLoading = () => {
|
|
35
|
-
const { styles, loading, LoadingComponent } = useEmptyPlaceholderContext();
|
|
36
|
-
const activityIndicatorStyles = useCompositionStyles('loader', styles);
|
|
37
|
-
if (!loading)
|
|
38
|
-
return null;
|
|
39
|
-
if (React.isValidElement(LoadingComponent)) {
|
|
40
|
-
return <>{LoadingComponent}</>;
|
|
41
|
-
}
|
|
42
|
-
return (<View style={[styles.wrapper, styles['wrapper:loading']]}>
|
|
43
|
-
<ActivityIndicator style={activityIndicatorStyles}/>
|
|
44
|
-
</View>);
|
|
45
|
-
};
|
|
46
|
-
export const EmptyPlaceholderContent = ({ children }) => {
|
|
47
|
-
const { loading, styles } = useEmptyPlaceholderContext();
|
|
48
|
-
if (loading) {
|
|
49
|
-
return <EmptyPlaceholderLoading />;
|
|
50
|
-
}
|
|
51
|
-
if (children) {
|
|
52
|
-
return <View style={styles.wrapper}>{children}</View>;
|
|
53
|
-
}
|
|
54
|
-
return (<View style={styles.wrapper}>
|
|
55
|
-
<EmptyPlaceholderIllustration />
|
|
56
|
-
<EmptyPlaceholderInfo />
|
|
57
|
-
<EmptyPlaceholderButton />
|
|
58
|
-
</View>);
|
|
59
|
-
};
|
|
60
|
-
//# sourceMappingURL=Components.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Components.js","sourceRoot":"","sources":["../../../src/components/EmptyPlaceholder/Components.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,89 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import { AppIcon, useCompositionStyles } from '@codeleap/styles'
|
|
3
|
-
import { Icon } from '../Icon'
|
|
4
|
-
import { Text } from '../Text'
|
|
5
|
-
import { EmptyPlaceholderButtonProps, EmptyPlaceholderIllustrationProps, EmptyPlaceholderInfoProps } from './types'
|
|
6
|
-
import { Image } from '../Image'
|
|
7
|
-
import { useEmptyPlaceholderContext } from './context'
|
|
8
|
-
import { Button } from '../Button'
|
|
9
|
-
import { View } from '../View'
|
|
10
|
-
import { ActivityIndicator } from '../ActivityIndicator'
|
|
11
|
-
import { TypeGuards } from '@codeleap/types'
|
|
12
|
-
|
|
13
|
-
export const EmptyPlaceholderInfo = (props: EmptyPlaceholderInfoProps) => {
|
|
14
|
-
const { title, description, styles, itemName } = useEmptyPlaceholderContext(props)
|
|
15
|
-
|
|
16
|
-
const emptyText = title || (itemName && `No ${itemName} found.`)
|
|
17
|
-
|
|
18
|
-
return <>
|
|
19
|
-
{title || itemName ? <Text text={emptyText} style={styles.title} /> : null}
|
|
20
|
-
{description ? <Text text={description} style={styles.description} /> : null}
|
|
21
|
-
</>
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
export const EmptyPlaceholderIllustration = (props: EmptyPlaceholderIllustrationProps) => {
|
|
25
|
-
const { icon, image, styles } = useEmptyPlaceholderContext(props)
|
|
26
|
-
|
|
27
|
-
return <>
|
|
28
|
-
{icon ? <Icon name={icon as AppIcon} style={styles.icon} /> : null}
|
|
29
|
-
{image ? <Image source={image} style={styles.image} /> : null}
|
|
30
|
-
</>
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
export const EmptyPlaceholderButton = (props: EmptyPlaceholderButtonProps) => {
|
|
34
|
-
const { styles, buttonText, text, onPress, ...buttonProps } = useEmptyPlaceholderContext(props)
|
|
35
|
-
|
|
36
|
-
const buttonStyles = useCompositionStyles('button', styles)
|
|
37
|
-
|
|
38
|
-
const displayText = text || buttonText
|
|
39
|
-
|
|
40
|
-
if (!TypeGuards.isFunction(onPress)) return null
|
|
41
|
-
|
|
42
|
-
return (
|
|
43
|
-
<Button
|
|
44
|
-
{...buttonProps}
|
|
45
|
-
onPress={onPress}
|
|
46
|
-
debugName={`emptyPlaceholderButton:${buttonText}`}
|
|
47
|
-
style={buttonStyles}
|
|
48
|
-
text={displayText}
|
|
49
|
-
/>
|
|
50
|
-
)
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
export const EmptyPlaceholderLoading = () => {
|
|
54
|
-
const { styles, loading, LoadingComponent } = useEmptyPlaceholderContext()
|
|
55
|
-
|
|
56
|
-
const activityIndicatorStyles = useCompositionStyles('loader', styles)
|
|
57
|
-
|
|
58
|
-
if (!loading) return null
|
|
59
|
-
|
|
60
|
-
if (React.isValidElement(LoadingComponent)) {
|
|
61
|
-
return <>{LoadingComponent}</>
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
return (
|
|
65
|
-
<View style={[styles.wrapper, styles['wrapper:loading']]} >
|
|
66
|
-
<ActivityIndicator style={activityIndicatorStyles} />
|
|
67
|
-
</View>
|
|
68
|
-
)
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
export const EmptyPlaceholderContent = ({ children }: React.PropsWithChildren) => {
|
|
72
|
-
const { loading, styles } = useEmptyPlaceholderContext()
|
|
73
|
-
|
|
74
|
-
if (loading) {
|
|
75
|
-
return <EmptyPlaceholderLoading />
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
if (children) {
|
|
79
|
-
return <View style={styles.wrapper}>{children}</View>
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
return (
|
|
83
|
-
<View style={styles.wrapper}>
|
|
84
|
-
<EmptyPlaceholderIllustration />
|
|
85
|
-
<EmptyPlaceholderInfo />
|
|
86
|
-
<EmptyPlaceholderButton />
|
|
87
|
-
</View>
|
|
88
|
-
)
|
|
89
|
-
}
|