@codeleap/mobile 5.4.5 → 5.5.0
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/CalendarInput/index.js +9 -23
- package/dist/components/CalendarInput/index.js.map +1 -1
- package/dist/components/FileInput/index.js +3 -20
- package/dist/components/FileInput/index.js.map +1 -1
- package/dist/components/FileInput/types.d.ts +0 -3
- package/dist/components/InputBase/index.d.ts +6 -2
- package/dist/components/InputBase/index.js +14 -26
- package/dist/components/InputBase/index.js.map +1 -1
- package/dist/components/InputBase/types.d.ts +2 -2
- package/dist/components/InputOverlay/index.d.ts +8 -0
- package/dist/components/InputOverlay/index.js +75 -0
- package/dist/components/InputOverlay/index.js.map +1 -0
- package/dist/components/InputOverlay/store.d.ts +10 -0
- package/dist/components/InputOverlay/store.js +47 -0
- package/dist/components/InputOverlay/store.js.map +1 -0
- package/dist/components/InputOverlay/types.d.ts +22 -0
- package/dist/components/InputOverlay/types.js +2 -0
- package/dist/components/InputOverlay/types.js.map +1 -0
- package/dist/components/Scroll/index.d.ts +10 -2
- package/dist/components/Scroll/index.js +6 -22
- package/dist/components/Scroll/index.js.map +1 -1
- package/dist/components/TextInput/index.d.ts +10 -2
- package/dist/components/TextInput/index.js +2 -3
- package/dist/components/TextInput/index.js.map +1 -1
- package/dist/components/TextInput/useTextInput.js +2 -0
- package/dist/components/TextInput/useTextInput.js.map +1 -1
- package/dist/components/TimeInput/index.js +9 -24
- package/dist/components/TimeInput/index.js.map +1 -1
- package/dist/components/components.d.ts +1 -0
- package/dist/components/components.js +1 -0
- package/dist/components/components.js.map +1 -1
- package/dist/modules/backgroundTimer.js +3 -4
- package/dist/modules/backgroundTimer.js.map +1 -1
- package/package.json +17 -17
- package/package.json.bak +1 -1
- package/src/components/CalendarInput/index.tsx +31 -42
- package/src/components/FileInput/index.tsx +2 -25
- package/src/components/FileInput/types.ts +0 -3
- package/src/components/InputBase/index.tsx +18 -36
- package/src/components/InputBase/types.ts +2 -2
- package/src/components/InputOverlay/index.tsx +113 -0
- package/src/components/InputOverlay/store.ts +60 -0
- package/src/components/InputOverlay/types.ts +25 -0
- package/src/components/Scroll/index.tsx +6 -39
- package/src/components/TextInput/index.tsx +2 -3
- package/src/components/TextInput/useTextInput.ts +2 -0
- package/src/components/TimeInput/index.tsx +28 -41
- package/src/components/components.ts +2 -1
- package/src/modules/backgroundTimer.ts +6 -7
- package/dist/components/InputBase/useInputOverlay.d.ts +0 -1
- package/dist/components/InputBase/useInputOverlay.js +0 -30
- package/dist/components/InputBase/useInputOverlay.js.map +0 -1
- package/src/components/InputBase/useInputOverlay.ts +0 -38
|
@@ -1,15 +1,13 @@
|
|
|
1
|
-
import React, { useMemo
|
|
1
|
+
import React, { useMemo } from 'react';
|
|
2
2
|
import { useCompositionStyles } from '@codeleap/styles';
|
|
3
3
|
import { MobileStyleRegistry } from '../../Registry';
|
|
4
4
|
import { useStylesFor } from '../../hooks';
|
|
5
|
-
import { View } from '../View';
|
|
6
5
|
import { Calendar } from '../Calendar';
|
|
7
6
|
import { TextInput } from '../TextInput';
|
|
8
|
-
import Animated, { FadeOut, FadeIn } from 'react-native-reanimated';
|
|
9
7
|
import { useInputBase } from '../InputBase';
|
|
10
8
|
import { fields } from '@codeleap/form';
|
|
11
|
-
import { useInputOverlay } from '../InputBase/useInputOverlay';
|
|
12
9
|
import { dateUtils } from '@codeleap/utils';
|
|
10
|
+
import { InputOverlay, inputOverlayManager } from '../InputOverlay';
|
|
13
11
|
export * from './styles';
|
|
14
12
|
export * from './types';
|
|
15
13
|
export const CalendarInput = (props) => {
|
|
@@ -20,8 +18,7 @@ export const CalendarInput = (props) => {
|
|
|
20
18
|
const styles = useStylesFor(CalendarInput.styleRegistryName, style);
|
|
21
19
|
const compositionStyles = useCompositionStyles(['calendar', 'input'], styles);
|
|
22
20
|
const { inputValue, onInputValueChange, } = useInputBase(field, fields.date, { value, onValueChange });
|
|
23
|
-
const
|
|
24
|
-
const [isOpen, toggle] = useInputOverlay(autoClosePeersCalendars);
|
|
21
|
+
const { isOpen, toggle, id } = inputOverlayManager.use();
|
|
25
22
|
const formattedValue = useMemo(() => {
|
|
26
23
|
if (!inputValue)
|
|
27
24
|
return '';
|
|
@@ -33,28 +30,17 @@ export const CalendarInput = (props) => {
|
|
|
33
30
|
}
|
|
34
31
|
return dateUtils.removeTimezoneAndFormat(inputValue, format);
|
|
35
32
|
}, [inputValue, format]);
|
|
36
|
-
return (<
|
|
37
|
-
<TextInput placeholder='Select Date' disabled={disabled} {...textInputProps} style={compositionStyles.input}
|
|
33
|
+
return (<InputOverlay.Layout style={styles.wrapper} position={calendarPosition} gap={gap} isOpen={isOpen} mode={overlay ? 'overlay' : 'content'} hideOverlay={disabled} id={id} content={<Calendar style={compositionStyles.calendar} value={inputValue} onValueChange={onInputValueChange} {...calendarProps}/>}>
|
|
34
|
+
<TextInput placeholder='Select Date' disabled={disabled} {...textInputProps} style={compositionStyles.input} value={formattedValue} onValueChange={() => inputValue} onPress={disabled ? undefined : toggle} innerWrapperProps={{
|
|
35
|
+
rippleDisabled: true,
|
|
36
|
+
}} focused={isOpen} leftIcon={!leftIcon ? null : {
|
|
38
37
|
...leftIcon,
|
|
39
38
|
onPress: toggle,
|
|
40
39
|
}} rightIcon={!rightIcon ? null : {
|
|
41
40
|
...rightIcon,
|
|
42
41
|
onPress: toggle,
|
|
43
|
-
}}
|
|
44
|
-
|
|
45
|
-
}} focused={isOpen} onLayout={(e) => setInputHeight(e.nativeEvent.layout.height)}/>
|
|
46
|
-
|
|
47
|
-
{!isOpen || disabled ? null : (<Animated.View exiting={FadeOut.duration(150)} entering={FadeIn.duration(150)} style={overlay ? {
|
|
48
|
-
position: 'absolute',
|
|
49
|
-
zIndex: 1,
|
|
50
|
-
[calendarPosition]: 0,
|
|
51
|
-
top: inputHeight + gap,
|
|
52
|
-
} : {
|
|
53
|
-
marginTop: gap,
|
|
54
|
-
}}>
|
|
55
|
-
<Calendar style={compositionStyles.calendar} value={inputValue} onValueChange={onInputValueChange} {...calendarProps}/>
|
|
56
|
-
</Animated.View>)}
|
|
57
|
-
</View>);
|
|
42
|
+
}}/>
|
|
43
|
+
</InputOverlay.Layout>);
|
|
58
44
|
};
|
|
59
45
|
CalendarInput.styleRegistryName = 'CalendarInput';
|
|
60
46
|
CalendarInput.elements = ['wrapper', 'calendar', 'input'];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CalendarInput/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CalendarInput/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { forwardRef, useImperativeHandle, useRef } from 'react';
|
|
2
2
|
import { parseFilePathData } from '@codeleap/utils';
|
|
3
3
|
import ImageCropPicker from 'react-native-image-crop-picker';
|
|
4
|
-
import DocumentPicker from 'react-native-document-picker';
|
|
5
4
|
import { alert } from '@codeleap/modals';
|
|
6
5
|
export * from './types';
|
|
7
6
|
const pickerDefaults = {
|
|
@@ -23,7 +22,7 @@ function parsePickerData(data) {
|
|
|
23
22
|
};
|
|
24
23
|
}
|
|
25
24
|
const _FileInput = forwardRef((fileInputProps, ref) => {
|
|
26
|
-
const { onFileSelect,
|
|
25
|
+
const { onFileSelect, type = 'image', pickerOptions, onOpenGallery = null, onOpenFileSystem = null, alertProps, } = {
|
|
27
26
|
...fileInputProps,
|
|
28
27
|
...FileInput.defaultProps,
|
|
29
28
|
};
|
|
@@ -35,22 +34,6 @@ const _FileInput = forwardRef((fileInputProps, ref) => {
|
|
|
35
34
|
}
|
|
36
35
|
onFileSelect?.(files);
|
|
37
36
|
};
|
|
38
|
-
async function openFileSystem() {
|
|
39
|
-
try {
|
|
40
|
-
let files = await DocumentPicker.pick(options);
|
|
41
|
-
if (!Array.isArray(files)) {
|
|
42
|
-
files = [files];
|
|
43
|
-
}
|
|
44
|
-
const filesWithPreview = files.map((file) => ({ preview: file.uri, file }));
|
|
45
|
-
handleResolve?.(filesWithPreview);
|
|
46
|
-
}
|
|
47
|
-
catch (err) {
|
|
48
|
-
handleError(err);
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
function handleError(err) {
|
|
52
|
-
onError?.(err);
|
|
53
|
-
}
|
|
54
37
|
const mergedOptions = {
|
|
55
38
|
...pickerDefaults,
|
|
56
39
|
...pickerOptions,
|
|
@@ -67,7 +50,7 @@ const _FileInput = forwardRef((fileInputProps, ref) => {
|
|
|
67
50
|
};
|
|
68
51
|
const onPress = (open, options) => {
|
|
69
52
|
if (open == 'fs') {
|
|
70
|
-
openFileSystem()
|
|
53
|
+
// openFileSystem()
|
|
71
54
|
}
|
|
72
55
|
else {
|
|
73
56
|
const call = open === 'camera' ? 'openCamera' : 'openPicker';
|
|
@@ -111,7 +94,7 @@ const _FileInput = forwardRef((fileInputProps, ref) => {
|
|
|
111
94
|
}
|
|
112
95
|
else {
|
|
113
96
|
if (onOpenFileSystem) {
|
|
114
|
-
onOpenFileSystem(() => onPress('fs'))
|
|
97
|
+
// onOpenFileSystem(() => onPress('fs'))
|
|
115
98
|
}
|
|
116
99
|
else {
|
|
117
100
|
onPress('fs');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/FileInput/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAEtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AACnD,OAAO,eAA0C,MAAM,gCAAgC,CAAA;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/FileInput/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { AnyRef, MobileInputFile } from '@codeleap/types';
|
|
2
|
-
import { DocumentPickerOptions } from 'react-native-document-picker';
|
|
3
2
|
import { Options } from 'react-native-image-crop-picker';
|
|
4
3
|
import { AlertOptions } from '@codeleap/modals';
|
|
5
4
|
export type FileInputImageSource = 'camera' | 'library' | 'fs';
|
|
@@ -10,7 +9,6 @@ export type FileInputRef = {
|
|
|
10
9
|
export type FileInputProps = {
|
|
11
10
|
mode: 'hidden' | 'button';
|
|
12
11
|
onFileSelect?: (files: FileResult[]) => void;
|
|
13
|
-
options?: DocumentPickerOptions;
|
|
14
12
|
ref?: AnyRef<FileInputRef>;
|
|
15
13
|
type?: 'image' | 'anyFile';
|
|
16
14
|
alertProps?: AlertOptions & {};
|
|
@@ -18,5 +16,4 @@ export type FileInputProps = {
|
|
|
18
16
|
required?: boolean;
|
|
19
17
|
onOpenFileSystem?: (resolve: (() => void)) => Promise<void>;
|
|
20
18
|
onOpenGallery?: (resolve: (() => void)) => Promise<void>;
|
|
21
|
-
onError?: (error: any) => void;
|
|
22
19
|
};
|
|
@@ -1,8 +1,12 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
import { InputBaseProps } from './types';
|
|
2
|
-
import { StyledComponentWithProps } from '@codeleap/styles';
|
|
3
3
|
export { useInputBase } from './useInputBase';
|
|
4
4
|
export * from './styles';
|
|
5
5
|
export * from './utils';
|
|
6
6
|
export * from './types';
|
|
7
7
|
export declare const InputBaseDefaultOrder: InputBaseProps['order'];
|
|
8
|
-
export declare const InputBase:
|
|
8
|
+
export declare const InputBase: {
|
|
9
|
+
(props: InputBaseProps): JSX.Element;
|
|
10
|
+
elements: string[];
|
|
11
|
+
defaultProps: Partial<InputBaseProps>;
|
|
12
|
+
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React
|
|
1
|
+
import React from 'react';
|
|
2
2
|
import { TypeGuards } from '@codeleap/types';
|
|
3
3
|
import { getRenderedComponent } from '@codeleap/utils';
|
|
4
4
|
import { ActionIcon } from '../ActionIcon';
|
|
@@ -16,11 +16,8 @@ export const InputBaseDefaultOrder = [
|
|
|
16
16
|
'innerWrapper',
|
|
17
17
|
'error',
|
|
18
18
|
];
|
|
19
|
-
const
|
|
20
|
-
|
|
21
|
-
};
|
|
22
|
-
export const InputBase = forwardRef((props, ref) => {
|
|
23
|
-
const { children, error = null, label, description = null, leftIcon = null, rightIcon = null, wrapper: WrapperComponent, debugName, innerWrapper: InnerWrapperComponent, focused, innerWrapperProps = {}, wrapperProps = {}, disabled, order = InputBaseDefaultOrder, style, labelAsRow, hideErrorMessage, ...otherProps } = {
|
|
19
|
+
export const InputBase = (props) => {
|
|
20
|
+
const { children, error = null, label, description = null, leftIcon = null, rightIcon = null, wrapper, debugName, innerWrapper, focused, innerWrapperProps = {}, wrapperProps = {}, disabled, order = InputBaseDefaultOrder, style, labelAsRow, hideErrorMessage, ref, ...otherProps } = {
|
|
24
21
|
...InputBase.defaultProps,
|
|
25
22
|
...props,
|
|
26
23
|
};
|
|
@@ -37,33 +34,24 @@ export const InputBase = forwardRef((props, ref) => {
|
|
|
37
34
|
debugName: `${debugName} right icon`,
|
|
38
35
|
dismissKeyboard: false,
|
|
39
36
|
});
|
|
40
|
-
const
|
|
41
|
-
const
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
description: labelAsRow ? null : _description,
|
|
49
|
-
innerWrapper: <InnerWrapperComponent style={[
|
|
50
|
-
styles.innerWrapperStyle,
|
|
51
|
-
]} {...innerWrapperProps}>
|
|
37
|
+
const WrapperComponent = wrapper ?? View;
|
|
38
|
+
const InnerWrapperComponent = innerWrapper ?? View;
|
|
39
|
+
return <WrapperComponent {...otherProps} {...wrapperProps} style={styles.wrapperStyle} ref={ref}>
|
|
40
|
+
{TypeGuards.isString(label) ? <Text text={label} style={styles.labelStyle}/> : label}
|
|
41
|
+
|
|
42
|
+
{TypeGuards.isString(description) ? <Text text={description} style={styles.descriptionStyle}/> : description}
|
|
43
|
+
|
|
44
|
+
<InnerWrapperComponent style={styles.innerWrapperStyle} {...innerWrapperProps}>
|
|
52
45
|
{_leftIcon}
|
|
53
46
|
{children}
|
|
54
47
|
{_rightIcon}
|
|
55
|
-
</InnerWrapperComponent
|
|
56
|
-
};
|
|
57
|
-
return <WrapperComponent {...otherProps} {...wrapperProps} style={styles.wrapperStyle} ref={ref}>
|
|
58
|
-
{order.map((key) => <KeyPassthrough key={key}>
|
|
59
|
-
{parts[key]}
|
|
60
|
-
</KeyPassthrough>)}
|
|
48
|
+
</InnerWrapperComponent>
|
|
61
49
|
|
|
62
50
|
{hideErrorMessage || !error ? null : (<RNAnimated.View exiting={FadeOut.duration(100)} entering={FadeIn.duration(200)}>
|
|
63
|
-
{
|
|
51
|
+
{TypeGuards.isString(error) ? <Text text={error} style={styles.errorStyle}/> : error}
|
|
64
52
|
</RNAnimated.View>)}
|
|
65
53
|
</WrapperComponent>;
|
|
66
|
-
}
|
|
54
|
+
};
|
|
67
55
|
InputBase.elements = ['wrapper', 'innerWrapper', 'label', 'errorMessage', 'description', 'icon', 'leftIcon', 'rightIcon'];
|
|
68
56
|
InputBase.defaultProps = {
|
|
69
57
|
disabled: false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/InputBase/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/InputBase/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -11,9 +11,9 @@ export type InputBaseProps = React.PropsWithChildren<{
|
|
|
11
11
|
error?: React.ReactNode;
|
|
12
12
|
leftIcon?: IconProp;
|
|
13
13
|
rightIcon?: IconProp;
|
|
14
|
-
wrapper?:
|
|
14
|
+
wrapper?: (props: any) => JSX.Element;
|
|
15
15
|
wrapperProps?: any;
|
|
16
|
-
innerWrapper?:
|
|
16
|
+
innerWrapper?: (props: any) => JSX.Element;
|
|
17
17
|
innerWrapperProps?: any;
|
|
18
18
|
description?: React.ReactNode;
|
|
19
19
|
debugName?: string;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { DetectorProps, InterceptorProps, LayoutProps } from './types';
|
|
3
|
+
export * from './store';
|
|
4
|
+
export declare const InputOverlay: {
|
|
5
|
+
Detector: ({ children, style, withWrapper }: DetectorProps) => JSX.Element;
|
|
6
|
+
Interceptor: ({ children }: InterceptorProps) => JSX.Element;
|
|
7
|
+
Layout: (props: LayoutProps) => JSX.Element;
|
|
8
|
+
};
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
import React, { useCallback, useState } from 'react';
|
|
2
|
+
import { StyleSheet, View } from 'react-native';
|
|
3
|
+
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
|
|
4
|
+
import Animated, { FadeOut, FadeIn } from 'react-native-reanimated';
|
|
5
|
+
import { inputOverlayManager } from './store';
|
|
6
|
+
export * from './store';
|
|
7
|
+
const Detector = ({ children, style, withWrapper = true }) => {
|
|
8
|
+
const tapGesture = Gesture.Tap()
|
|
9
|
+
.onEnd((event) => {
|
|
10
|
+
inputOverlayManager.closeAll();
|
|
11
|
+
})
|
|
12
|
+
.runOnJS(true);
|
|
13
|
+
if (!withWrapper) {
|
|
14
|
+
<GestureDetector gesture={tapGesture}>
|
|
15
|
+
{children}
|
|
16
|
+
</GestureDetector>;
|
|
17
|
+
}
|
|
18
|
+
return (<GestureDetector gesture={tapGesture}>
|
|
19
|
+
<View style={[style, styles.detectorContainer]}>
|
|
20
|
+
{children}
|
|
21
|
+
</View>
|
|
22
|
+
</GestureDetector>);
|
|
23
|
+
};
|
|
24
|
+
const Interceptor = ({ children }) => {
|
|
25
|
+
const tapGesture = Gesture.Tap()
|
|
26
|
+
.onEnd(() => {
|
|
27
|
+
// Intercepts the tap to prevent it from propagating to the parent
|
|
28
|
+
// Does nothing, just consumes the event
|
|
29
|
+
})
|
|
30
|
+
.runOnJS(true);
|
|
31
|
+
return (<GestureDetector gesture={tapGesture}>
|
|
32
|
+
{children}
|
|
33
|
+
</GestureDetector>);
|
|
34
|
+
};
|
|
35
|
+
const Layout = (props) => {
|
|
36
|
+
const { style, children, hideOverlay = false, isOpen, animationDuration = 150, mode = 'overlay', position, gap, content, id, } = props;
|
|
37
|
+
const [inputHeight, setInputHeight] = useState(0);
|
|
38
|
+
const handleLayout = useCallback((event) => {
|
|
39
|
+
const height = event?.nativeEvent?.layout?.height ?? 0;
|
|
40
|
+
setInputHeight(height);
|
|
41
|
+
}, []);
|
|
42
|
+
const isOverlayMode = mode === 'overlay';
|
|
43
|
+
const shouldShowOverlay = isOpen && !hideOverlay;
|
|
44
|
+
const overlayStyle = isOverlayMode ? {
|
|
45
|
+
position: 'absolute',
|
|
46
|
+
zIndex: 1,
|
|
47
|
+
[position]: 0,
|
|
48
|
+
top: inputHeight + gap,
|
|
49
|
+
} : {
|
|
50
|
+
marginTop: gap,
|
|
51
|
+
};
|
|
52
|
+
return (<View style={[style, styles.layoutContainer]} onLayout={handleLayout}>
|
|
53
|
+
{children}
|
|
54
|
+
|
|
55
|
+
{shouldShowOverlay ? (<Interceptor>
|
|
56
|
+
<Animated.View exiting={FadeOut.duration(animationDuration)} entering={FadeIn.duration(animationDuration)} style={overlayStyle}>
|
|
57
|
+
{content}
|
|
58
|
+
</Animated.View>
|
|
59
|
+
</Interceptor>) : null}
|
|
60
|
+
</View>);
|
|
61
|
+
};
|
|
62
|
+
const styles = StyleSheet.create({
|
|
63
|
+
detectorContainer: {
|
|
64
|
+
flex: 1,
|
|
65
|
+
},
|
|
66
|
+
layoutContainer: {
|
|
67
|
+
position: 'relative',
|
|
68
|
+
},
|
|
69
|
+
});
|
|
70
|
+
export const InputOverlay = {
|
|
71
|
+
Detector,
|
|
72
|
+
Interceptor,
|
|
73
|
+
Layout,
|
|
74
|
+
};
|
|
75
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/InputOverlay/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export declare const inputOverlayManager: {
|
|
2
|
+
store: import("nanostores").PreinitializedWritableAtom<string> & object;
|
|
3
|
+
use: (providedId?: string) => {
|
|
4
|
+
id: string;
|
|
5
|
+
isOpen: boolean;
|
|
6
|
+
toggle: () => void;
|
|
7
|
+
};
|
|
8
|
+
toggle: (id: string) => void;
|
|
9
|
+
closeAll: () => void;
|
|
10
|
+
};
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { useCallback } from 'react';
|
|
2
|
+
import { useId } from '@codeleap/hooks';
|
|
3
|
+
import { atom } from 'nanostores';
|
|
4
|
+
import { useStore } from '@nanostores/react';
|
|
5
|
+
const defaultValue = '@input.atom';
|
|
6
|
+
const inputIdAtom = atom(defaultValue);
|
|
7
|
+
const closeInputOverlays = () => {
|
|
8
|
+
const currentInputId = inputIdAtom.get();
|
|
9
|
+
if (currentInputId === defaultValue)
|
|
10
|
+
return;
|
|
11
|
+
setTimeout(() => inputIdAtom.set(defaultValue), 100);
|
|
12
|
+
};
|
|
13
|
+
const toggleOverlay = (id) => {
|
|
14
|
+
const currentInputId = inputIdAtom.get();
|
|
15
|
+
const isOpen = currentInputId === id;
|
|
16
|
+
inputIdAtom.set(isOpen ? defaultValue : id);
|
|
17
|
+
};
|
|
18
|
+
const useInputOverlay = (providedId) => {
|
|
19
|
+
const id = useId(providedId);
|
|
20
|
+
const isCurrentlyOpen = useStore(inputIdAtom) === id;
|
|
21
|
+
const toggle = useCallback(() => {
|
|
22
|
+
const currentInputId = inputIdAtom.get();
|
|
23
|
+
const isAnyOtherOpen = currentInputId !== defaultValue && currentInputId !== id;
|
|
24
|
+
const isOpen = currentInputId === id;
|
|
25
|
+
if (isAnyOtherOpen && !isOpen) {
|
|
26
|
+
inputIdAtom.set(defaultValue);
|
|
27
|
+
setTimeout(() => {
|
|
28
|
+
inputIdAtom.set(id);
|
|
29
|
+
}, 100);
|
|
30
|
+
}
|
|
31
|
+
else {
|
|
32
|
+
inputIdAtom.set(isOpen ? defaultValue : id);
|
|
33
|
+
}
|
|
34
|
+
}, [id]);
|
|
35
|
+
return {
|
|
36
|
+
id,
|
|
37
|
+
isOpen: isCurrentlyOpen,
|
|
38
|
+
toggle,
|
|
39
|
+
};
|
|
40
|
+
};
|
|
41
|
+
export const inputOverlayManager = {
|
|
42
|
+
store: inputIdAtom,
|
|
43
|
+
use: useInputOverlay,
|
|
44
|
+
toggle: toggleOverlay,
|
|
45
|
+
closeAll: closeInputOverlays,
|
|
46
|
+
};
|
|
47
|
+
//# sourceMappingURL=store.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"store.js","sourceRoot":"","sources":["../../../src/components/InputOverlay/store.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAU,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA;AACvC,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE5C,MAAM,YAAY,GAAG,aAAa,CAAA;AAElC,MAAM,WAAW,GAAG,IAAI,CAAS,YAAY,CAAC,CAAA;AAE9C,MAAM,kBAAkB,GAAG,GAAG,EAAE;IAC9B,MAAM,cAAc,GAAG,WAAW,CAAC,GAAG,EAAE,CAAA;IAExC,IAAI,cAAc,KAAK,YAAY;QAAE,OAAM;IAE3C,UAAU,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE,GAAG,CAAC,CAAA;AACtD,CAAC,CAAA;AAED,MAAM,aAAa,GAAG,CAAC,EAAU,EAAE,EAAE;IACnC,MAAM,cAAc,GAAG,WAAW,CAAC,GAAG,EAAE,CAAA;IAExC,MAAM,MAAM,GAAG,cAAc,KAAK,EAAE,CAAA;IAEpC,WAAW,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAA;AAC7C,CAAC,CAAA;AAED,MAAM,eAAe,GAAG,CAAC,UAAmB,EAAE,EAAE;IAC9C,MAAM,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,CAAA;IAE5B,MAAM,eAAe,GAAG,QAAQ,CAAC,WAAW,CAAC,KAAK,EAAE,CAAA;IAEpD,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE;QAC9B,MAAM,cAAc,GAAG,WAAW,CAAC,GAAG,EAAE,CAAA;QAExC,MAAM,cAAc,GAAG,cAAc,KAAK,YAAY,IAAI,cAAc,KAAK,EAAE,CAAA;QAC/E,MAAM,MAAM,GAAG,cAAc,KAAK,EAAE,CAAA;QAEpC,IAAI,cAAc,IAAI,CAAC,MAAM,EAAE;YAC7B,WAAW,CAAC,GAAG,CAAC,YAAY,CAAC,CAAA;YAE7B,UAAU,CAAC,GAAG,EAAE;gBACd,WAAW,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;YACrB,CAAC,EAAE,GAAG,CAAC,CAAA;SACR;aAAM;YACL,WAAW,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAA;SAC5C;IACH,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;IAER,OAAO;QACL,EAAE;QACF,MAAM,EAAE,eAAe;QACvB,MAAM;KACP,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,KAAK,EAAE,WAAW;IAClB,GAAG,EAAE,eAAe;IACpB,MAAM,EAAE,aAAa;IACrB,QAAQ,EAAE,kBAAkB;CAC7B,CAAA"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ViewStyle } from 'react-native';
|
|
3
|
+
export type DetectorProps = {
|
|
4
|
+
children: React.ReactNode;
|
|
5
|
+
style?: any;
|
|
6
|
+
withWrapper?: boolean;
|
|
7
|
+
};
|
|
8
|
+
export type InterceptorProps = {
|
|
9
|
+
children: React.ReactNode;
|
|
10
|
+
};
|
|
11
|
+
export type LayoutProps = {
|
|
12
|
+
style?: ViewStyle;
|
|
13
|
+
hideOverlay?: boolean;
|
|
14
|
+
mode: 'overlay' | 'content';
|
|
15
|
+
isOpen: boolean;
|
|
16
|
+
position: 'left' | 'right' | 'center';
|
|
17
|
+
gap: number;
|
|
18
|
+
animationDuration?: number;
|
|
19
|
+
children: React.ReactNode;
|
|
20
|
+
content: React.ReactNode;
|
|
21
|
+
id: string;
|
|
22
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/InputOverlay/types.ts"],"names":[],"mappings":""}
|
|
@@ -1,5 +1,13 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
import { ScrollProps } from './types';
|
|
2
|
-
import {
|
|
3
|
+
import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles';
|
|
3
4
|
export * from './styles';
|
|
4
5
|
export * from './types';
|
|
5
|
-
export declare const Scroll:
|
|
6
|
+
export declare const Scroll: {
|
|
7
|
+
(scrollProps: ScrollProps): JSX.Element;
|
|
8
|
+
styleRegistryName: string;
|
|
9
|
+
elements: string[];
|
|
10
|
+
rootElement: string;
|
|
11
|
+
withVariantTypes<S extends AnyRecord>(styles: S): (props: StyledComponentProps<ScrollProps, S>) => IJSX;
|
|
12
|
+
defaultProps: Partial<ScrollProps>;
|
|
13
|
+
};
|
|
@@ -1,48 +1,32 @@
|
|
|
1
|
-
import React, {
|
|
1
|
+
import React, { useRef } from 'react';
|
|
2
2
|
import { ScrollView } from 'react-native';
|
|
3
|
-
import { RefreshControl } from '../RefreshControl';
|
|
4
3
|
import { MobileStyleRegistry } from '../../Registry';
|
|
5
4
|
import { useStylesFor } from '../../hooks';
|
|
6
5
|
import { KeyboardAwareScrollView } from 'react-native-keyboard-controller';
|
|
7
6
|
import { ScrollProvider, useScrollPubSub } from '../../modules/scroll';
|
|
8
7
|
export * from './styles';
|
|
9
8
|
export * from './types';
|
|
10
|
-
export const Scroll =
|
|
11
|
-
const { style, refreshTimeout, children, refreshControlProps = {}, contentContainerStyle, keyboardAware,
|
|
9
|
+
export const Scroll = (scrollProps) => {
|
|
10
|
+
const { style, refreshTimeout, children, refreshControlProps = {}, contentContainerStyle, keyboardAware, ...props } = {
|
|
12
11
|
...Scroll.defaultProps,
|
|
13
12
|
...scrollProps,
|
|
14
13
|
};
|
|
15
|
-
const hasRefresh = !!onRefresh;
|
|
16
|
-
const [refreshing, setRefreshing] = useState(false);
|
|
17
|
-
const refreshingDisplay = props.refreshing !== undefined ? props.refreshing : refreshing;
|
|
18
|
-
const timer = React.useRef(null);
|
|
19
|
-
const refresh = useCallback(() => {
|
|
20
|
-
if (timer.current !== null) {
|
|
21
|
-
clearTimeout(timer.current);
|
|
22
|
-
timer.current = null;
|
|
23
|
-
}
|
|
24
|
-
setRefreshing(true);
|
|
25
|
-
onRefresh?.();
|
|
26
|
-
timer.current = setTimeout(() => {
|
|
27
|
-
setRefreshing(false);
|
|
28
|
-
}, refreshTimeout);
|
|
29
|
-
}, [onRefresh]);
|
|
30
14
|
const styles = useStylesFor(Scroll.styleRegistryName, style);
|
|
31
15
|
const Component = keyboardAware ? KeyboardAwareScrollView : ScrollView;
|
|
32
16
|
const _scrollRef = useRef();
|
|
17
|
+
// @ts-ignore
|
|
33
18
|
const { ref: scrollRef, emit } = useScrollPubSub(_scrollRef);
|
|
34
|
-
useImperativeHandle(ref, () => scrollRef.current, []);
|
|
35
19
|
return (<ScrollProvider ref={scrollRef}>
|
|
36
20
|
<Component showsVerticalScrollIndicator={false}
|
|
37
21
|
// @ts-ignore
|
|
38
|
-
ref={_scrollRef}
|
|
22
|
+
ref={_scrollRef} bottomOffset={30} {...props} style={styles?.wrapper} contentContainerStyle={[styles?.content, contentContainerStyle]} onMomentumScrollEnd={(e) => {
|
|
39
23
|
emit('onMomentumScrollEnd', e);
|
|
40
24
|
props?.onMomentumScrollEnd?.(e);
|
|
41
25
|
}}>
|
|
42
26
|
{children}
|
|
43
27
|
</Component>
|
|
44
28
|
</ScrollProvider>);
|
|
45
|
-
}
|
|
29
|
+
};
|
|
46
30
|
Scroll.styleRegistryName = 'Scroll';
|
|
47
31
|
Scroll.elements = ['wrapper', 'content'];
|
|
48
32
|
Scroll.rootElement = 'wrapper';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Scroll/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Scroll/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAGzC,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAC1C,OAAO,EAAE,uBAAuB,EAAE,MAAM,kCAAkC,CAAA;AAC1E,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAEtE,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AAEvB,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,WAAwB,EAAE,EAAE;IACjD,MAAM,EACJ,KAAK,EACL,cAAc,EACd,QAAQ,EACR,mBAAmB,GAAG,EAAE,EACxB,qBAAqB,EACrB,aAAa,EACb,GAAG,KAAK,EACT,GAAG;QACF,GAAG,MAAM,CAAC,YAAY;QACtB,GAAG,WAAW;KACf,CAAA;IAED,MAAM,MAAM,GAAG,YAAY,CAAC,MAAM,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAAA;IAE5D,MAAM,SAAS,GAAG,aAAa,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,UAAU,CAAA;IAEtE,MAAM,UAAU,GAAG,MAAM,EAAc,CAAA;IAEvC,aAAa;IACb,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC,UAAU,CAAC,CAAA;IAE5D,OAAO,CACL,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,SAAS,CAAC,CAC7B;MAAA,CAAC,SAAS,CACR,4BAA4B,CAAC,CAAC,KAAK,CAAC;IACpC,aAAa;IACb,GAAG,CAAC,CAAC,UAAU,CAAC,CAChB,YAAY,CAAC,CAAC,EAAE,CAAC,CACjB,IAAI,KAAK,CAAC,CACV,KAAK,CAAC,CAAC,MAAM,EAAE,OAAO,CAAC,CACvB,qBAAqB,CAAC,CAAC,CAAC,MAAM,EAAE,OAAO,EAAE,qBAAqB,CAAC,CAAC,CAChE,mBAAmB,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE;YACzB,IAAI,CAAC,qBAAqB,EAAE,CAAC,CAAC,CAAA;YAC9B,KAAK,EAAE,mBAAmB,EAAE,CAAC,CAAC,CAAC,CAAA;QACjC,CAAC,CAAC,CAEF;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,SAAS,CACb;IAAA,EAAE,cAAc,CAAC,CAClB,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,iBAAiB,GAAG,QAAQ,CAAA;AACnC,MAAM,CAAC,QAAQ,GAAG,CAAC,SAAS,EAAE,SAAS,CAAC,CAAA;AACxC,MAAM,CAAC,WAAW,GAAG,SAAS,CAAA;AAE9B,MAAM,CAAC,gBAAgB,GAAG,CAAsB,MAAS,EAAE,EAAE;IAC3D,OAAO,MAA2E,CAAA;AACpF,CAAC,CAAA;AAED,MAAM,CAAC,YAAY,GAAG;IACpB,yBAAyB,EAAE,SAAS;IACpC,cAAc,EAAE,IAAI;IACpB,aAAa,EAAE,IAAI;CACI,CAAA;AAEzB,mBAAmB,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAA"}
|
|
@@ -1,5 +1,13 @@
|
|
|
1
|
-
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles';
|
|
2
3
|
import { TextInputProps } from './types';
|
|
3
4
|
export * from './styles';
|
|
4
5
|
export * from './types';
|
|
5
|
-
export declare const TextInput:
|
|
6
|
+
export declare const TextInput: {
|
|
7
|
+
(props: TextInputProps): JSX.Element;
|
|
8
|
+
styleRegistryName: string;
|
|
9
|
+
elements: string[];
|
|
10
|
+
rootElement: string;
|
|
11
|
+
withVariantTypes<S extends AnyRecord>(styles: S): (props: StyledComponentProps<TextInputProps, S>) => IJSX;
|
|
12
|
+
defaultProps: Partial<TextInputProps>;
|
|
13
|
+
};
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { TypeGuards } from '@codeleap/types';
|
|
3
|
-
import { forwardRef } from 'react';
|
|
4
3
|
import { TextInput as NativeTextInput } from 'react-native';
|
|
5
4
|
import { InputBase, selectInputBaseProps } from '../InputBase';
|
|
6
5
|
import { Touchable } from '../Touchable';
|
|
@@ -11,7 +10,7 @@ import { useTextInput } from './useTextInput';
|
|
|
11
10
|
import { useInputBasePartialStyles } from '../InputBase/useInputBasePartialStyles';
|
|
12
11
|
export * from './styles';
|
|
13
12
|
export * from './types';
|
|
14
|
-
export const TextInput =
|
|
13
|
+
export const TextInput = (props) => {
|
|
15
14
|
const allProps = {
|
|
16
15
|
...TextInput.defaultProps,
|
|
17
16
|
...props,
|
|
@@ -72,7 +71,7 @@ export const TextInput = forwardRef((props, inputRef) => {
|
|
|
72
71
|
hasValue && styles['input:typed'],
|
|
73
72
|
]} ref={innerInputRef} pointerEvents={isPressable ? 'none' : undefined} {...maskingExtraProps}/>
|
|
74
73
|
</InputBase>;
|
|
75
|
-
}
|
|
74
|
+
};
|
|
76
75
|
TextInput.styleRegistryName = 'TextInput';
|
|
77
76
|
TextInput.elements = [...InputBase.elements, 'input', 'placeholder', 'selection'];
|
|
78
77
|
TextInput.rootElement = 'wrapper';
|