@rn-components-dropdown/dropdown 1.0.27 → 1.0.29
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/dropdown/Dropdown.js +113 -148
- package/dist/components/dropdown/DropdownStyle.d.ts +11 -11
- package/dist/components/dropdown/DropdownStyle.js +20 -24
- package/dist/components/dropdown/component/chip/Chip.js +14 -19
- package/dist/components/dropdown/component/chip/ChipStyle.d.ts +8 -18
- package/dist/components/dropdown/component/chip/ChipStyle.js +8 -10
- package/dist/components/dropdown/component/input/TextInput.js +12 -50
- package/dist/components/dropdown/component/input/TextInputStyle.d.ts +4 -4
- package/dist/components/dropdown/component/input/TextInputStyle.js +7 -11
- package/dist/components/dropdown/hooks/useDetectDevice.js +6 -9
- package/dist/components/dropdown/hooks/useDropdown.d.ts +8 -4
- package/dist/components/dropdown/hooks/useDropdown.js +48 -53
- package/dist/components/dropdown/hooks/useOrientation.js +7 -10
- package/dist/components/dropdown/interface/ChipInterface.js +1 -2
- package/dist/components/dropdown/interface/DropdownInterface.d.ts +4 -4
- package/dist/components/dropdown/interface/DropdownInterface.js +1 -2
- package/dist/components/dropdown/interface/InputProps.js +1 -2
- package/dist/components/svgButton/SvgButton.js +8 -13
- package/dist/components/svgButton/SvgButtonStyle.d.ts +2 -2
- package/dist/components/svgButton/SvgButtonStyle.js +7 -11
- package/dist/components/text/AppText.js +8 -16
- package/dist/components/text/AppTextStyle.d.ts +3 -156
- package/dist/components/text/AppTextStyle.js +8 -13
- package/dist/components/textInput/AppTextInput.js +19 -57
- package/dist/components/textInput/AppTextInputStyle.d.ts +4 -4
- package/dist/components/textInput/AppTextInputStyle.js +16 -20
- package/dist/controller/dropDownController/DropdownController.d.ts +4 -5
- package/dist/controller/dropDownController/DropdownController.js +13 -18
- package/dist/controller/dropDownController/DropdownControllerStyle.d.ts +3 -3
- package/dist/controller/dropDownController/DropdownControllerStyle.js +10 -14
- package/dist/index.js +2 -10
- package/dist/interface/colors.interface.js +1 -2
- package/dist/interface/svg.interface.js +1 -2
- package/dist/style/colors.js +6 -9
- package/dist/style/index.js +6 -23
- package/dist/style/shadow.d.ts +0 -149
- package/dist/style/shadow.js +1 -147
- package/dist/style/spacing.d.ts +0 -12
- package/dist/style/spacing.js +2 -17
- package/package.json +1 -1
- package/src/components/dropdown/Dropdown.tsx +28 -26
- package/src/components/dropdown/hooks/useDropdown.ts +14 -3
- package/src/components/dropdown/interface/DropdownInterface.ts +4 -4
- package/src/components/text/AppText.tsx +0 -3
- package/src/components/text/AppTextStyle.ts +1 -3
- package/src/controller/dropDownController/DropdownController.tsx +18 -17
- package/src/style/shadow.ts +0 -143
- package/src/style/spacing.ts +1 -13
- package/tsconfig.json +8 -4
|
@@ -1,24 +1,14 @@
|
|
|
1
1
|
import { ChipInterface } from '../../interface/ChipInterface';
|
|
2
2
|
declare const useChipStyle: (props: ChipInterface) => {
|
|
3
|
-
styles: {
|
|
3
|
+
styles: Readonly<{
|
|
4
4
|
box: {
|
|
5
5
|
elevation: number;
|
|
6
|
-
width:
|
|
6
|
+
width: string;
|
|
7
7
|
borderRadius: number;
|
|
8
8
|
flexDirection: "row";
|
|
9
9
|
alignItems: "center";
|
|
10
10
|
justifyContent: "center";
|
|
11
|
-
backgroundColor: import("react-native").
|
|
12
|
-
margin: number;
|
|
13
|
-
height: number;
|
|
14
|
-
} | {
|
|
15
|
-
elevation: number;
|
|
16
|
-
width: "auto";
|
|
17
|
-
borderRadius: number;
|
|
18
|
-
flexDirection: "row";
|
|
19
|
-
alignItems: "center";
|
|
20
|
-
justifyContent: "center";
|
|
21
|
-
backgroundColor: import("react-native").ColorValue;
|
|
11
|
+
backgroundColor: string | number | import("react-native").NativeColorValue;
|
|
22
12
|
shadowRadius?: undefined;
|
|
23
13
|
shadowOpacity?: undefined;
|
|
24
14
|
shadowColor?: undefined;
|
|
@@ -27,12 +17,12 @@ declare const useChipStyle: (props: ChipInterface) => {
|
|
|
27
17
|
height: number;
|
|
28
18
|
} | {
|
|
29
19
|
elevation: number;
|
|
30
|
-
width:
|
|
20
|
+
width: string;
|
|
31
21
|
borderRadius: number;
|
|
32
22
|
flexDirection: "row";
|
|
33
23
|
alignItems: "center";
|
|
34
24
|
justifyContent: "center";
|
|
35
|
-
backgroundColor: import("react-native").
|
|
25
|
+
backgroundColor: string | number | import("react-native").NativeColorValue;
|
|
36
26
|
shadowRadius: number;
|
|
37
27
|
shadowOpacity: number;
|
|
38
28
|
shadowColor: string;
|
|
@@ -55,8 +45,8 @@ declare const useChipStyle: (props: ChipInterface) => {
|
|
|
55
45
|
marginHorizontal: number;
|
|
56
46
|
alignItems: "center";
|
|
57
47
|
justifyContent: "center";
|
|
58
|
-
borderColor: import("react-native").
|
|
59
|
-
backgroundColor: import("react-native").
|
|
48
|
+
borderColor: string | number | import("react-native").NativeColorValue;
|
|
49
|
+
backgroundColor: string | number | import("react-native").NativeColorValue;
|
|
60
50
|
};
|
|
61
51
|
clearIcon: {
|
|
62
52
|
width: number;
|
|
@@ -65,7 +55,7 @@ declare const useChipStyle: (props: ChipInterface) => {
|
|
|
65
55
|
alignItems: "center";
|
|
66
56
|
justifyContent: "center";
|
|
67
57
|
};
|
|
68
|
-
}
|
|
58
|
+
}>;
|
|
69
59
|
colors: {
|
|
70
60
|
blue: string;
|
|
71
61
|
gray: string;
|
|
@@ -1,17 +1,15 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
const style_1 = require("../../../../style");
|
|
5
|
-
const react_native_1 = require("react-native");
|
|
1
|
+
import { useMemo } from 'react';
|
|
2
|
+
import { LIGHT_COLORS } from '../../../../style';
|
|
3
|
+
import { Platform, StyleSheet } from 'react-native';
|
|
6
4
|
const useChipStyle = (props) => {
|
|
7
5
|
const { chipColor, textColor } = props;
|
|
8
|
-
const { ...colors } =
|
|
9
|
-
const styles =
|
|
10
|
-
return
|
|
6
|
+
const { ...colors } = LIGHT_COLORS;
|
|
7
|
+
const styles = useMemo(() => {
|
|
8
|
+
return StyleSheet.create({
|
|
11
9
|
box: {
|
|
12
10
|
margin: 4,
|
|
13
11
|
height: 26,
|
|
14
|
-
...
|
|
12
|
+
...Platform.select({
|
|
15
13
|
android: {
|
|
16
14
|
elevation: 5,
|
|
17
15
|
},
|
|
@@ -59,4 +57,4 @@ const useChipStyle = (props) => {
|
|
|
59
57
|
colors,
|
|
60
58
|
};
|
|
61
59
|
};
|
|
62
|
-
|
|
60
|
+
export default useChipStyle;
|
|
@@ -1,51 +1,13 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
-
}) : function(o, v) {
|
|
16
|
-
o["default"] = v;
|
|
17
|
-
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
-
var ownKeys = function(o) {
|
|
20
|
-
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
-
var ar = [];
|
|
22
|
-
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
-
return ar;
|
|
24
|
-
};
|
|
25
|
-
return ownKeys(o);
|
|
26
|
-
};
|
|
27
|
-
return function (mod) {
|
|
28
|
-
if (mod && mod.__esModule) return mod;
|
|
29
|
-
var result = {};
|
|
30
|
-
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
-
__setModuleDefault(result, mod);
|
|
32
|
-
return result;
|
|
33
|
-
};
|
|
34
|
-
})();
|
|
35
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
36
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
37
|
-
};
|
|
38
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
39
|
-
const TextInputStyle_1 = require("./TextInputStyle");
|
|
40
|
-
const react_1 = __importStar(require("react"));
|
|
41
|
-
const svg_1 = require("../../../../assets/svg");
|
|
42
|
-
const react_native_1 = require("react-native");
|
|
43
|
-
const AppTextInput_1 = __importDefault(require("../../../textInput/AppTextInput"));
|
|
1
|
+
import { useTextStyle } from './TextInputStyle';
|
|
2
|
+
import React, { useEffect, useState } from 'react';
|
|
3
|
+
import { SearchIcon } from '../../../../assets/svg';
|
|
4
|
+
import { TouchableWithoutFeedback } from 'react-native';
|
|
5
|
+
import AppTextInput from '../../../textInput/AppTextInput';
|
|
44
6
|
const TextInputComponent = props => {
|
|
45
7
|
const { value, placeholder = '', placeholderTextColor = '#000', onChangeText = (_value) => { }, searchIcon, } = props;
|
|
46
|
-
const [searchtext, setSearchText] =
|
|
47
|
-
const { styles } =
|
|
48
|
-
|
|
8
|
+
const [searchtext, setSearchText] = useState('');
|
|
9
|
+
const { styles } = useTextStyle();
|
|
10
|
+
useEffect(() => {
|
|
49
11
|
if (value) {
|
|
50
12
|
setSearchText(value);
|
|
51
13
|
}
|
|
@@ -54,8 +16,8 @@ const TextInputComponent = props => {
|
|
|
54
16
|
setSearchText(text);
|
|
55
17
|
onChangeText(text);
|
|
56
18
|
};
|
|
57
|
-
return (<
|
|
58
|
-
<
|
|
59
|
-
</
|
|
19
|
+
return (<TouchableWithoutFeedback>
|
|
20
|
+
<AppTextInput {...props} value={searchtext} style={styles.input} onChangeText={onChange} placeholder={placeholder} textStyle={styles.inputContainer} placeholderTextColor={placeholderTextColor} icon={searchIcon ? searchIcon : <SearchIcon />}/>
|
|
21
|
+
</TouchableWithoutFeedback>);
|
|
60
22
|
};
|
|
61
|
-
|
|
23
|
+
export default TextInputComponent;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
export declare const useTextStyle: () => {
|
|
2
|
-
styles: {
|
|
2
|
+
styles: Readonly<{
|
|
3
3
|
input: {
|
|
4
4
|
height: number;
|
|
5
|
-
width:
|
|
5
|
+
width: string;
|
|
6
6
|
fontSize: number;
|
|
7
7
|
borderWidth: number;
|
|
8
8
|
borderRadius: number;
|
|
@@ -11,11 +11,11 @@ export declare const useTextStyle: () => {
|
|
|
11
11
|
borderColor: string;
|
|
12
12
|
};
|
|
13
13
|
inputContainer: {
|
|
14
|
-
width:
|
|
14
|
+
width: string;
|
|
15
15
|
fontSize: number;
|
|
16
16
|
color: string;
|
|
17
17
|
};
|
|
18
|
-
}
|
|
18
|
+
}>;
|
|
19
19
|
colors: {
|
|
20
20
|
blue: string;
|
|
21
21
|
gray: string;
|
|
@@ -1,13 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
const
|
|
5
|
-
const
|
|
6
|
-
const
|
|
7
|
-
|
|
8
|
-
const { ...colors } = style_1.LIGHT_COLORS;
|
|
9
|
-
const styles = (0, react_1.useMemo)(() => {
|
|
10
|
-
return react_native_1.StyleSheet.create({
|
|
1
|
+
import { useMemo } from 'react';
|
|
2
|
+
import { StyleSheet } from 'react-native';
|
|
3
|
+
import { LIGHT_COLORS } from '../../../../style';
|
|
4
|
+
export const useTextStyle = () => {
|
|
5
|
+
const { ...colors } = LIGHT_COLORS;
|
|
6
|
+
const styles = useMemo(() => {
|
|
7
|
+
return StyleSheet.create({
|
|
11
8
|
input: {
|
|
12
9
|
height: 40,
|
|
13
10
|
width: '95%',
|
|
@@ -30,4 +27,3 @@ const useTextStyle = () => {
|
|
|
30
27
|
colors,
|
|
31
28
|
};
|
|
32
29
|
};
|
|
33
|
-
exports.useTextStyle = useTextStyle;
|
|
@@ -1,10 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
exports.useDetectDevice = void 0;
|
|
4
|
-
const react_native_1 = require("react-native");
|
|
5
|
-
const { width, height } = react_native_1.Dimensions.get('window');
|
|
1
|
+
import { Platform, PixelRatio, Dimensions } from 'react-native';
|
|
2
|
+
const { width, height } = Dimensions.get('window');
|
|
6
3
|
const isTablet = () => {
|
|
7
|
-
let pixelDensity =
|
|
4
|
+
let pixelDensity = PixelRatio.get();
|
|
8
5
|
const adjustedWidth = width * pixelDensity;
|
|
9
6
|
const adjustedHeight = height * pixelDensity;
|
|
10
7
|
if (pixelDensity < 2 && (adjustedWidth >= 1000 || adjustedHeight >= 1000)) {
|
|
@@ -15,8 +12,8 @@ const isTablet = () => {
|
|
|
15
12
|
}
|
|
16
13
|
};
|
|
17
14
|
const useDetectDevice = {
|
|
18
|
-
isAndroid:
|
|
19
|
-
isIOS:
|
|
15
|
+
isAndroid: Platform.OS === 'android',
|
|
16
|
+
isIOS: Platform.OS === 'ios',
|
|
20
17
|
isTablet: isTablet(),
|
|
21
18
|
};
|
|
22
|
-
|
|
19
|
+
export { useDetectDevice };
|
|
@@ -1,7 +1,11 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { DropdownProps } from '../interface/DropdownInterface';
|
|
3
|
-
declare const useDropdown: <T, Mode extends
|
|
4
|
-
ref: import("react").RefObject<
|
|
1
|
+
import { FlatList } from 'react-native';
|
|
2
|
+
import { DropdownProps, SELECTIONS_TYPE } from '../interface/DropdownInterface';
|
|
3
|
+
declare const useDropdown: <T, Mode extends SELECTIONS_TYPE>(props: DropdownProps<T, Mode>) => {
|
|
4
|
+
ref: import("react").RefObject<((props: Omit<import("react-native").ViewProps, keyof {
|
|
5
|
+
ref?: React.Ref<import("react-native").ViewInstance> | undefined;
|
|
6
|
+
}> & {
|
|
7
|
+
ref?: React.Ref<import("react-native").ViewInstance> | undefined;
|
|
8
|
+
}) => React.ReactNode) | null>;
|
|
5
9
|
font: () => {
|
|
6
10
|
fontFamily: string;
|
|
7
11
|
} | {
|
|
@@ -1,33 +1,28 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
1
|
/* eslint-disable react-hooks/exhaustive-deps */
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
2
|
+
import { useRef, useState, useEffect, useCallback, useImperativeHandle, } from 'react';
|
|
3
|
+
import { Keyboard, StatusBar, I18nManager, } from 'react-native';
|
|
4
|
+
import _ from 'lodash';
|
|
5
|
+
import { useDetectDevice } from './useDetectDevice';
|
|
6
|
+
import { useDeviceOrientation } from './useOrientation';
|
|
7
|
+
import { SCREEN_HEIGHT, SCREEN_WIDTH } from '../../../style';
|
|
13
8
|
const useDropdown = (props) => {
|
|
14
9
|
const { value, onBlur, onFocus, onChange, data = [], labelField, valueField, fontFamily, searchQuery, searchField, onChangeText, disable = false, ref: currentRef, mode = 'default', autoScroll = true, confirmSelectItem, onConfirmSelectItem, selectionType = 'single', } = props;
|
|
15
|
-
const ref =
|
|
16
|
-
const { isTablet } =
|
|
17
|
-
const refList =
|
|
18
|
-
const orientation =
|
|
19
|
-
const [position, setPosition] =
|
|
20
|
-
const [searchText, setSearchText] =
|
|
21
|
-
const [listData, setListData] =
|
|
22
|
-
const [visible, setVisible] =
|
|
23
|
-
const [currentValue, setCurrentValue] =
|
|
24
|
-
const statusBarHeight =
|
|
25
|
-
const [keyboardHeight, setKeyboardHeight] =
|
|
26
|
-
|
|
10
|
+
const ref = useRef(null);
|
|
11
|
+
const { isTablet } = useDetectDevice;
|
|
12
|
+
const refList = useRef(null);
|
|
13
|
+
const orientation = useDeviceOrientation();
|
|
14
|
+
const [position, setPosition] = useState();
|
|
15
|
+
const [searchText, setSearchText] = useState('');
|
|
16
|
+
const [listData, setListData] = useState(data);
|
|
17
|
+
const [visible, setVisible] = useState(false);
|
|
18
|
+
const [currentValue, setCurrentValue] = useState(null);
|
|
19
|
+
const statusBarHeight = StatusBar.currentHeight || 0;
|
|
20
|
+
const [keyboardHeight, setKeyboardHeight] = useState(0);
|
|
21
|
+
useImperativeHandle(currentRef, () => {
|
|
27
22
|
return { open: eventOpen, close: eventClose };
|
|
28
23
|
});
|
|
29
|
-
|
|
30
|
-
|
|
24
|
+
useEffect(() => eventClose, []);
|
|
25
|
+
useEffect(() => {
|
|
31
26
|
setListData([...data]);
|
|
32
27
|
if (searchText) {
|
|
33
28
|
onSearch(searchText);
|
|
@@ -45,7 +40,7 @@ const useDropdown = (props) => {
|
|
|
45
40
|
scrollIndex();
|
|
46
41
|
}
|
|
47
42
|
};
|
|
48
|
-
const eventClose =
|
|
43
|
+
const eventClose = useCallback(() => {
|
|
49
44
|
if (!disable) {
|
|
50
45
|
setVisible(false);
|
|
51
46
|
if (onBlur) {
|
|
@@ -53,7 +48,7 @@ const useDropdown = (props) => {
|
|
|
53
48
|
}
|
|
54
49
|
}
|
|
55
50
|
}, [disable, onBlur]);
|
|
56
|
-
const font =
|
|
51
|
+
const font = useCallback(() => {
|
|
57
52
|
if (fontFamily) {
|
|
58
53
|
return {
|
|
59
54
|
fontFamily: fontFamily,
|
|
@@ -63,9 +58,9 @@ const useDropdown = (props) => {
|
|
|
63
58
|
return {};
|
|
64
59
|
}
|
|
65
60
|
}, [fontFamily]);
|
|
66
|
-
const onMeasure =
|
|
61
|
+
const onMeasure = useCallback(() => {
|
|
67
62
|
if (ref && ref?.current) {
|
|
68
|
-
ref
|
|
63
|
+
ref?.current?.measureInWindow((pageX, pageY, width, height) => {
|
|
69
64
|
let isFull = isTablet
|
|
70
65
|
? false
|
|
71
66
|
: mode === 'modal' || orientation === 'LANDSCAPE';
|
|
@@ -73,8 +68,8 @@ const useDropdown = (props) => {
|
|
|
73
68
|
isFull = false;
|
|
74
69
|
}
|
|
75
70
|
const top = isFull ? 20 : height + pageY + 2;
|
|
76
|
-
const bottom =
|
|
77
|
-
const left =
|
|
71
|
+
const bottom = SCREEN_HEIGHT - top + height;
|
|
72
|
+
const left = I18nManager.isRTL ? SCREEN_WIDTH - width - pageX : pageX;
|
|
78
73
|
setPosition({
|
|
79
74
|
isFull,
|
|
80
75
|
left: Math.floor(left),
|
|
@@ -86,17 +81,17 @@ const useDropdown = (props) => {
|
|
|
86
81
|
});
|
|
87
82
|
}
|
|
88
83
|
}, [isTablet, mode, orientation, statusBarHeight]);
|
|
89
|
-
const onKeyboardDidShow =
|
|
84
|
+
const onKeyboardDidShow = useCallback((e) => {
|
|
90
85
|
onMeasure();
|
|
91
86
|
setKeyboardHeight(e.endCoordinates.height);
|
|
92
87
|
}, [onMeasure]);
|
|
93
|
-
const onKeyboardDidHide =
|
|
88
|
+
const onKeyboardDidHide = useCallback(() => {
|
|
94
89
|
setKeyboardHeight(0);
|
|
95
90
|
onMeasure();
|
|
96
91
|
}, [onMeasure]);
|
|
97
|
-
|
|
98
|
-
const susbcriptionKeyboardDidShow =
|
|
99
|
-
const susbcriptionKeyboardDidHide =
|
|
92
|
+
useEffect(() => {
|
|
93
|
+
const susbcriptionKeyboardDidShow = Keyboard.addListener('keyboardDidShow', onKeyboardDidShow);
|
|
94
|
+
const susbcriptionKeyboardDidHide = Keyboard.addListener('keyboardDidHide', onKeyboardDidHide);
|
|
100
95
|
return () => {
|
|
101
96
|
if (typeof susbcriptionKeyboardDidShow?.remove === 'function') {
|
|
102
97
|
susbcriptionKeyboardDidShow.remove();
|
|
@@ -106,7 +101,7 @@ const useDropdown = (props) => {
|
|
|
106
101
|
}
|
|
107
102
|
};
|
|
108
103
|
}, [onKeyboardDidHide, onKeyboardDidShow]);
|
|
109
|
-
const getValue =
|
|
104
|
+
const getValue = useCallback(() => {
|
|
110
105
|
if (selectionType === 'multi') {
|
|
111
106
|
if (!valueField)
|
|
112
107
|
return;
|
|
@@ -115,8 +110,8 @@ const useDropdown = (props) => {
|
|
|
115
110
|
return;
|
|
116
111
|
}
|
|
117
112
|
else {
|
|
118
|
-
const defaultValue = typeof value === 'object' ?
|
|
119
|
-
const getItem = data.filter(e =>
|
|
113
|
+
const defaultValue = typeof value === 'object' ? _.get(value, valueField) : value;
|
|
114
|
+
const getItem = data.filter(e => _.isEqual(defaultValue, _.get(e, valueField)));
|
|
120
115
|
if (getItem.length > 0) {
|
|
121
116
|
setCurrentValue(getItem[0]);
|
|
122
117
|
}
|
|
@@ -125,13 +120,13 @@ const useDropdown = (props) => {
|
|
|
125
120
|
}
|
|
126
121
|
}
|
|
127
122
|
}, [data, value, valueField, selectionType]);
|
|
128
|
-
|
|
129
|
-
const scrollIndex =
|
|
123
|
+
useEffect(() => getValue(), [value, data, getValue]);
|
|
124
|
+
const scrollIndex = useCallback(() => {
|
|
130
125
|
if (autoScroll && data.length > 0 && listData.length === data.length) {
|
|
131
126
|
setTimeout(() => {
|
|
132
127
|
if (refList && refList?.current) {
|
|
133
|
-
const defaultValue = typeof value === 'object' ?
|
|
134
|
-
const index =
|
|
128
|
+
const defaultValue = typeof value === 'object' ? _.get(value, valueField) : value;
|
|
129
|
+
const index = _.findIndex(listData, (e) => _.isEqual(defaultValue, _.get(e, valueField)));
|
|
135
130
|
if (index > -1 && index <= listData.length - 1) {
|
|
136
131
|
refList?.current?.scrollToIndex({
|
|
137
132
|
index: index,
|
|
@@ -142,10 +137,10 @@ const useDropdown = (props) => {
|
|
|
142
137
|
}, 200);
|
|
143
138
|
}
|
|
144
139
|
}, [autoScroll, data.length, listData, value, valueField]);
|
|
145
|
-
const showOrClose =
|
|
140
|
+
const showOrClose = useCallback(() => {
|
|
146
141
|
if (!disable) {
|
|
147
142
|
if (keyboardHeight > 0 && visible) {
|
|
148
|
-
return
|
|
143
|
+
return Keyboard.dismiss();
|
|
149
144
|
}
|
|
150
145
|
onMeasure();
|
|
151
146
|
setVisible(!visible);
|
|
@@ -176,10 +171,10 @@ const useDropdown = (props) => {
|
|
|
176
171
|
scrollIndex,
|
|
177
172
|
keyboardHeight,
|
|
178
173
|
]);
|
|
179
|
-
const onSearch =
|
|
174
|
+
const onSearch = useCallback((text) => {
|
|
180
175
|
if (text.length > 0) {
|
|
181
176
|
const defaultFilterFunction = (e) => {
|
|
182
|
-
const item =
|
|
177
|
+
const item = _.get(e, searchField || labelField)
|
|
183
178
|
?.toLowerCase()
|
|
184
179
|
.replace(' ', '')
|
|
185
180
|
.normalize('NFD')
|
|
@@ -192,7 +187,7 @@ const useDropdown = (props) => {
|
|
|
192
187
|
return item.indexOf(key) >= 0;
|
|
193
188
|
};
|
|
194
189
|
const propSearchFunction = (e) => {
|
|
195
|
-
const labelText =
|
|
190
|
+
const labelText = _.get(e, searchField || labelField);
|
|
196
191
|
return searchQuery?.(text, labelText);
|
|
197
192
|
};
|
|
198
193
|
const dataSearch = data.filter(searchQuery ? propSearchFunction : defaultFilterFunction);
|
|
@@ -202,7 +197,7 @@ const useDropdown = (props) => {
|
|
|
202
197
|
setListData(data);
|
|
203
198
|
}
|
|
204
199
|
}, [data, searchField, labelField, searchQuery]);
|
|
205
|
-
const onSelect =
|
|
200
|
+
const onSelect = useCallback((item) => {
|
|
206
201
|
if (confirmSelectItem && onConfirmSelectItem) {
|
|
207
202
|
return onConfirmSelectItem(item);
|
|
208
203
|
}
|
|
@@ -222,18 +217,18 @@ const useDropdown = (props) => {
|
|
|
222
217
|
confirmSelectItem,
|
|
223
218
|
onConfirmSelectItem,
|
|
224
219
|
]);
|
|
225
|
-
const onCheckPress =
|
|
220
|
+
const onCheckPress = useCallback((item) => {
|
|
226
221
|
setCurrentValue?.((prev) => {
|
|
227
222
|
const exists = prev?.some?.((i) => i[valueField] === item[valueField]);
|
|
228
223
|
const va = exists
|
|
229
|
-
?
|
|
224
|
+
? _.filter(prev, i => i?.[valueField] !== item?.[valueField])
|
|
230
225
|
: [...prev, item];
|
|
231
226
|
const v = va?.map(i => i[valueField]);
|
|
232
227
|
onChange?.(item[valueField], selectionType === 'multi' ? v : item[valueField]);
|
|
233
228
|
return va;
|
|
234
229
|
});
|
|
235
230
|
}, [setCurrentValue, valueField, onChange, currentValue]);
|
|
236
|
-
const onClearPress =
|
|
231
|
+
const onClearPress = useCallback((item) => {
|
|
237
232
|
const updated = currentValue.filter((i) => i[valueField] !== item[valueField]);
|
|
238
233
|
const val = currentValue.map((i) => i[valueField]);
|
|
239
234
|
setCurrentValue(updated);
|
|
@@ -259,4 +254,4 @@ const useDropdown = (props) => {
|
|
|
259
254
|
keyboardHeight,
|
|
260
255
|
};
|
|
261
256
|
};
|
|
262
|
-
|
|
257
|
+
export default useDropdown;
|
|
@@ -1,25 +1,22 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
exports.useDeviceOrientation = useDeviceOrientation;
|
|
4
|
-
const react_1 = require("react");
|
|
5
|
-
const react_native_1 = require("react-native");
|
|
1
|
+
import { useEffect, useState } from 'react';
|
|
2
|
+
import { Dimensions } from 'react-native';
|
|
6
3
|
const isOrientationPortrait = ({ width, height }) => height >= width;
|
|
7
4
|
const isOrientationLandscape = ({ width, height }) => width >= height;
|
|
8
|
-
function useDeviceOrientation() {
|
|
9
|
-
const screen =
|
|
5
|
+
export function useDeviceOrientation() {
|
|
6
|
+
const screen = Dimensions.get('screen');
|
|
10
7
|
const initialState = {
|
|
11
8
|
portrait: isOrientationPortrait(screen),
|
|
12
9
|
landscape: isOrientationLandscape(screen),
|
|
13
10
|
};
|
|
14
|
-
const [orientation, setOrientation] =
|
|
15
|
-
|
|
11
|
+
const [orientation, setOrientation] = useState(initialState);
|
|
12
|
+
useEffect(() => {
|
|
16
13
|
const onChange = ({ screen: screens }) => {
|
|
17
14
|
setOrientation({
|
|
18
15
|
portrait: isOrientationPortrait(screens),
|
|
19
16
|
landscape: isOrientationLandscape(screens),
|
|
20
17
|
});
|
|
21
18
|
};
|
|
22
|
-
const subscription =
|
|
19
|
+
const subscription = Dimensions.addEventListener('change', onChange);
|
|
23
20
|
return () => {
|
|
24
21
|
if (typeof subscription?.remove === 'function') {
|
|
25
22
|
subscription.remove();
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
1
|
+
export {};
|
|
@@ -5,8 +5,8 @@ export type IDropdownRef = {
|
|
|
5
5
|
open: () => void;
|
|
6
6
|
close: () => void;
|
|
7
7
|
};
|
|
8
|
-
export type
|
|
9
|
-
export type DropdownProps<S, T extends
|
|
8
|
+
export type SELECTIONS_TYPE = 'single' | 'multi';
|
|
9
|
+
export type DropdownProps<S, T extends SELECTIONS_TYPE> = {
|
|
10
10
|
data: S[];
|
|
11
11
|
testID?: string;
|
|
12
12
|
search?: boolean;
|
|
@@ -52,7 +52,7 @@ export type DropdownProps<S, T extends SelectionType> = {
|
|
|
52
52
|
placeholderStyle?: StyleProp<TextStyle>;
|
|
53
53
|
inputSearchStyle?: StyleProp<TextStyle>;
|
|
54
54
|
onChangeText?: (search: string) => void;
|
|
55
|
-
onConfirmSelectItem?: (item:
|
|
55
|
+
onConfirmSelectItem?: (item: S) => void;
|
|
56
56
|
selectedTextStyle?: StyleProp<TextStyle>;
|
|
57
57
|
itemContainerStyle?: StyleProp<ViewStyle>;
|
|
58
58
|
dropdownPosition?: 'auto' | 'top' | 'bottom';
|
|
@@ -63,7 +63,7 @@ export type DropdownProps<S, T extends SelectionType> = {
|
|
|
63
63
|
renderRightIcon?: (visible?: boolean) => React.JSX.Element | null | undefined;
|
|
64
64
|
renderItem?: (item: S, selected?: boolean, labelField?: keyof S, valueField?: keyof S) => React.JSX.Element | null | undefined;
|
|
65
65
|
renderInputSearch?: (onSearch: (text: string) => void) => React.JSX.Element | null | undefined;
|
|
66
|
-
onChange?: (selecteValue?: keyof S, selectedList?:
|
|
66
|
+
onChange?: (selecteValue?: keyof S, selectedList?: SELECTIONS_TYPE extends 'single' | 'multi' ? S[] : S) => void;
|
|
67
67
|
};
|
|
68
68
|
export interface IUseDetectDevice {
|
|
69
69
|
isIOS: boolean;
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
1
|
+
export {};
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
1
|
+
export {};
|
|
@@ -1,16 +1,11 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
}
|
|
5
|
-
|
|
6
|
-
const react_1 = __importDefault(require("react"));
|
|
7
|
-
const SvgButtonStyle_1 = require("./SvgButtonStyle");
|
|
8
|
-
const react_native_1 = require("react-native");
|
|
9
|
-
const SvgButton = react_1.default.memo(({ icon, style, onPress, isFab = false, pressableProps, }) => {
|
|
10
|
-
const { styles } = (0, SvgButtonStyle_1.useSvgButtonStyle)();
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { useSvgButtonStyle } from './SvgButtonStyle';
|
|
3
|
+
import { Pressable } from 'react-native';
|
|
4
|
+
const SvgButton = React.memo(({ icon, style, onPress, isFab = false, pressableProps, }) => {
|
|
5
|
+
const { styles } = useSvgButtonStyle();
|
|
11
6
|
const styleProp = isFab ? [styles?.favIcon, style] : style;
|
|
12
|
-
return (<
|
|
7
|
+
return (<Pressable hitSlop={10} style={styleProp} onPress={onPress} {...pressableProps}>
|
|
13
8
|
{icon && icon}
|
|
14
|
-
</
|
|
9
|
+
</Pressable>);
|
|
15
10
|
});
|
|
16
|
-
|
|
11
|
+
export default SvgButton;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export declare const useSvgButtonStyle: () => {
|
|
2
|
-
styles: {
|
|
2
|
+
styles: Readonly<{
|
|
3
3
|
favIcon: {
|
|
4
4
|
width: number;
|
|
5
5
|
right: number;
|
|
@@ -11,7 +11,7 @@ export declare const useSvgButtonStyle: () => {
|
|
|
11
11
|
justifyContent: "center";
|
|
12
12
|
backgroundColor: string;
|
|
13
13
|
};
|
|
14
|
-
}
|
|
14
|
+
}>;
|
|
15
15
|
colors: {
|
|
16
16
|
blue: string;
|
|
17
17
|
gray: string;
|
|
@@ -1,13 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
const
|
|
5
|
-
const
|
|
6
|
-
const
|
|
7
|
-
|
|
8
|
-
const { ...colors } = style_1.LIGHT_COLORS;
|
|
9
|
-
const styles = (0, react_1.useMemo)(() => {
|
|
10
|
-
return react_native_1.StyleSheet.create({
|
|
1
|
+
import { useMemo } from 'react';
|
|
2
|
+
import { StyleSheet } from 'react-native';
|
|
3
|
+
import { LIGHT_COLORS } from '../../style';
|
|
4
|
+
export const useSvgButtonStyle = () => {
|
|
5
|
+
const { ...colors } = LIGHT_COLORS;
|
|
6
|
+
const styles = useMemo(() => {
|
|
7
|
+
return StyleSheet.create({
|
|
11
8
|
favIcon: {
|
|
12
9
|
width: 50,
|
|
13
10
|
right: 25,
|
|
@@ -26,4 +23,3 @@ const useSvgButtonStyle = () => {
|
|
|
26
23
|
colors,
|
|
27
24
|
};
|
|
28
25
|
};
|
|
29
|
-
exports.useSvgButtonStyle = useSvgButtonStyle;
|