Skip to content

I
InvestCustomer
Commit 782732ca by Giang Tran
Options

set up picker date

parent 226023fd
Showing with 1060 additions and 186 deletions
android/app/src/main/java/com/invest/MainApplication.java
......@@ -4,6 +4,8 @@ import android.app.Application;
import android.content.Context;
import com.facebook.react.PackageList;
import com.facebook.react.ReactApplication;
import com.imagepicker.ImagePickerPackage;
import com.imagepicker.ImagePickerPackage;
import com.oblador.vectoricons.VectorIconsPackage;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactNativeHost;
......
android/settings.gradle
rootProject.name = 'Invest'
include ':react-native-image-picker'
project(':react-native-image-picker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-image-picker/android')
include ':react-native-image-picker'
project(':react-native-image-picker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-image-picker/android')
include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
......
ios/Invest.xcodeproj/project.pbxproj
......@@ -268,7 +268,7 @@
00E356EC1AD99517003FC87E /* Resources */,
50AA96423ADD3C77C5478E40 /* [CP] Embed Pods Frameworks */,
E44ED71C60298AC6A80FDE0F /* ShellScript */,
48E22188E4EB93A4FC17957F /* [CP] Copy Pods Resources */,
A5ABCC563E72E104612E5CAE /* [CP] Copy Pods Resources */,
);
buildRules = (
);
......@@ -292,7 +292,7 @@
00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */,
D10F3A5D59847BD5B121672E /* [CP] Embed Pods Frameworks */,
6CC873A1E6FA7C328D7B37A9 /* ShellScript */,
21C14CFEB343E17408732454 /* [CP] Copy Pods Resources */,
286371081E0C0431FA85D270 /* [CP] Copy Pods Resources */,
);
buildRules = (
);
......@@ -476,7 +476,7 @@
shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n # print error to STDERR\n echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
showEnvVarsInLog = 0;
};
2986F52A2CA5D45A960EE3D4 /* [CP] Check Pods Manifest.lock */ = {
isa = PBXShellScriptBuildPhase;
buildActionMask = 2147483647;
......@@ -513,13 +513,31 @@
shellPath = /bin/sh;
shellScript = "export NODE_BINARY=node\n../node_modules/react-native/scripts/react-native-xcode.sh";
};
48E22188E4EB93A4FC17957F /* [CP] Copy Pods Resources */ = {
50AA96423ADD3C77C5478E40 /* [CP] Embed Pods Frameworks */ = {
isa = PBXShellScriptBuildPhase;
buildActionMask = 2147483647;
files = (
);
inputPaths = (
"${PODS_ROOT}/Target Support Files/Pods-Invest-InvestTests/Pods-Invest-InvestTests-resources.sh",
"${PODS_ROOT}/Target Support Files/Pods-Invest-InvestTests/Pods-Invest-InvestTests-frameworks.sh",
"${PODS_XCFRAMEWORKS_BUILD_DIR}/OpenSSL/OpenSSL.framework/OpenSSL",
);
name = "[CP] Embed Pods Frameworks";
outputPaths = (
"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/OpenSSL.framework",
);
runOnlyForDeploymentPostprocessing = 0;
shellPath = /bin/sh;
shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Invest-InvestTests/Pods-Invest-InvestTests-frameworks.sh\"\n";
showEnvVarsInLog = 0;
};
6CC873A1E6FA7C328D7B37A9 /* ShellScript */ = {
isa = PBXShellScriptBuildPhase;
buildActionMask = 2147483647;
files = (
);
inputPaths = (
"${PODS_ROOT}/Target Support Files/Pods-Invest/Pods-Invest-resources.sh",
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/AntDesign.ttf",
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Entypo.ttf",
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/EvilIcons.ttf",
......@@ -537,55 +555,19 @@
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/SimpleLineIcons.ttf",
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Zocial.ttf",
);
name = "[CP] Copy Pods Resources";
outputPaths = (
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AntDesign.ttf",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Entypo.ttf",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/EvilIcons.ttf",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Feather.ttf",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/FontAwesome.ttf",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/FontAwesome5_Brands.ttf",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/FontAwesome5_Regular.ttf",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/FontAwesome5_Solid.ttf",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Fontisto.ttf",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Foundation.ttf",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Ionicons.ttf",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/MaterialCommunityIcons.ttf",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/MaterialIcons.ttf",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Octicons.ttf",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/SimpleLineIcons.ttf",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Zocial.ttf",
);
runOnlyForDeploymentPostprocessing = 0;
shellPath = /bin/sh;
shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Invest-InvestTests/Pods-Invest-InvestTests-resources.sh\"\n";
showEnvVarsInLog = 0;
};
50AA96423ADD3C77C5478E40 /* [CP] Embed Pods Frameworks */ = {
isa = PBXShellScriptBuildPhase;
buildActionMask = 2147483647;
files = (
);
inputPaths = (
"${PODS_ROOT}/Target Support Files/Pods-Invest-InvestTests/Pods-Invest-InvestTests-frameworks.sh",
"${PODS_XCFRAMEWORKS_BUILD_DIR}/OpenSSL/OpenSSL.framework/OpenSSL",
);
name = "[CP] Embed Pods Frameworks";
outputPaths = (
"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/OpenSSL.framework",
);
runOnlyForDeploymentPostprocessing = 0;
shellPath = /bin/sh;
shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Invest-InvestTests/Pods-Invest-InvestTests-frameworks.sh\"\n";
shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Invest/Pods-Invest-resources.sh\"\n";
showEnvVarsInLog = 0;
};
6CC873A1E6FA7C328D7B37A9 /* ShellScript */ = {
A5ABCC563E72E104612E5CAE /* [CP] Copy Pods Resources */ = {
isa = PBXShellScriptBuildPhase;
buildActionMask = 2147483647;
files = (
);
inputPaths = (
"${PODS_ROOT}/Target Support Files/Pods-Invest/Pods-Invest-resources.sh",
"${PODS_ROOT}/Target Support Files/Pods-Invest-InvestTests/Pods-Invest-InvestTests-resources.sh",
"${PODS_CONFIGURATION_BUILD_DIR}/RNImageCropPicker/QBImagePicker.bundle",
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/AntDesign.ttf",
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Entypo.ttf",
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/EvilIcons.ttf",
......@@ -602,10 +584,32 @@
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Octicons.ttf",
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/SimpleLineIcons.ttf",
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Zocial.ttf",
"${PODS_CONFIGURATION_BUILD_DIR}/TOCropViewController/TOCropViewControllerBundle.bundle",
);
name = "[CP] Copy Pods Resources";
outputPaths = (
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/QBImagePicker.bundle",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AntDesign.ttf",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Entypo.ttf",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/EvilIcons.ttf",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Feather.ttf",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/FontAwesome.ttf",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/FontAwesome5_Brands.ttf",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/FontAwesome5_Regular.ttf",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/FontAwesome5_Solid.ttf",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Fontisto.ttf",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Foundation.ttf",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Ionicons.ttf",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/MaterialCommunityIcons.ttf",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/MaterialIcons.ttf",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Octicons.ttf",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/SimpleLineIcons.ttf",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Zocial.ttf",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/TOCropViewControllerBundle.bundle",
);
runOnlyForDeploymentPostprocessing = 0;
shellPath = /bin/sh;
shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Invest/Pods-Invest-resources.sh\"\n";
shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Invest-InvestTests/Pods-Invest-InvestTests-resources.sh\"\n";
showEnvVarsInLog = 0;
};
ACDE381B2550EE5E49E84DE8 /* [CP] Check Pods Manifest.lock */ = {
......
ios/Invest/Images.xcassets/AppIcon.appiconset/Contents.json
......@@ -2,37 +2,52 @@
"images" : [
{
"idiom" : "iphone",
"size" : "29x29",
"scale" : "2x"
"scale" : "2x",
"size" : "20x20"
},
{
"idiom" : "iphone",
"size" : "29x29",
"scale" : "3x"
"scale" : "3x",
"size" : "20x20"
},
{
"idiom" : "iphone",
"size" : "40x40",
"scale" : "2x"
"scale" : "2x",
"size" : "29x29"
},
{
"idiom" : "iphone",
"size" : "40x40",
"scale" : "3x"
"scale" : "3x",
"size" : "29x29"
},
{
"idiom" : "iphone",
"size" : "60x60",
"scale" : "2x"
"scale" : "2x",
"size" : "40x40"
},
{
"idiom" : "iphone",
"size" : "60x60",
"scale" : "3x"
"scale" : "3x",
"size" : "40x40"
},
{
"idiom" : "iphone",
"scale" : "2x",
"size" : "60x60"
},
{
"idiom" : "iphone",
"scale" : "3x",
"size" : "60x60"
},
{
"idiom" : "ios-marketing",
"scale" : "1x",
"size" : "1024x1024"
}
],
"info" : {
"version" : 1,
"author" : "xcode"
"author" : "xcode",
"version" : 1
}
}
\ No newline at end of file
}
ios/Invest/Info.plist
......@@ -2,6 +2,8 @@
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>NSPhotoLibraryUsageDescription</key>
<string>To upload images</string>
<key>CFBundleDevelopmentRegion</key>
<string>en</string>
<key>CFBundleDisplayName</key>
......@@ -38,7 +40,7 @@
</dict>
</dict>
<key>NSLocationWhenInUseUsageDescription</key>
<string/>
<string></string>
<key>UILaunchStoryboardName</key>
<string>LaunchScreen</string>
<key>UIRequiredDeviceCapabilities</key>
......
ios/Podfile
......@@ -79,6 +79,8 @@ target 'Invest' do
pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'
pod 'react-native-image-picker', :path => '../node_modules/react-native-image-picker'
target 'InvestTests' do
inherit! :complete
# Pods for testing
......
ios/Podfile.lock
......@@ -233,6 +233,8 @@ PODS:
- React-cxxreact (= 0.62.2)
- React-jsi (= 0.62.2)
- React-jsinspector (0.62.2)
- react-native-image-picker (3.2.1):
- React-Core
- react-native-safe-area-context (3.1.9):
- React-Core
- React-RCTActionSheet (0.62.2):
......@@ -298,14 +300,24 @@ PODS:
- React-Core
- RNCMaskedView (0.1.10):
- React
- RNGestureHandler (1.10.2):
- RNGestureHandler (1.10.3):
- React-Core
- RNImageCropPicker (0.36.0):
- React-Core
- React-RCTImage
- RNImageCropPicker/QBImagePickerController (= 0.36.0)
- TOCropViewController
- RNImageCropPicker/QBImagePickerController (0.36.0):
- React-Core
- React-RCTImage
- TOCropViewController
- RNReanimated (1.13.2):
- React-Core
- RNScreens (2.17.1):
- RNScreens (2.18.0):
- React-Core
- RNVectorIcons (8.0.0):
- RNVectorIcons (8.1.0):
- React-Core
- TOCropViewController (2.6.0)
- Yoga (1.14.0)
- YogaKit (1.18.1):
- Yoga (~> 1.14)
......@@ -347,6 +359,7 @@ DEPENDENCIES:
- React-jsi (from `../node_modules/react-native/ReactCommon/jsi`)
- React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`)
- React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
- react-native-image-picker (from `../node_modules/react-native-image-picker`)
- react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
- React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
- React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`)
......@@ -362,6 +375,7 @@ DEPENDENCIES:
- "RNCAsyncStorage (from `../node_modules/@react-native-community/async-storage`)"
- "RNCMaskedView (from `../node_modules/@react-native-community/masked-view`)"
- RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
- RNImageCropPicker (from `../node_modules/react-native-image-crop-picker`)
- RNReanimated (from `../node_modules/react-native-reanimated`)
- RNScreens (from `../node_modules/react-native-screens`)
- RNVectorIcons (from `../node_modules/react-native-vector-icons`)
......@@ -380,6 +394,7 @@ SPEC REPOS:
- Flipper-RSocket
- FlipperKit
- OpenSSL-Universal
- TOCropViewController
- YogaKit
EXTERNAL SOURCES:
......@@ -413,6 +428,8 @@ EXTERNAL SOURCES:
:path: "../node_modules/react-native/ReactCommon/jsiexecutor"
React-jsinspector:
:path: "../node_modules/react-native/ReactCommon/jsinspector"
react-native-image-picker:
:path: "../node_modules/react-native-image-picker"
react-native-safe-area-context:
:path: "../node_modules/react-native-safe-area-context"
React-RCTActionSheet:
......@@ -441,6 +458,8 @@ EXTERNAL SOURCES:
:path: "../node_modules/@react-native-community/masked-view"
RNGestureHandler:
:path: "../node_modules/react-native-gesture-handler"
RNImageCropPicker:
:path: "../node_modules/react-native-image-crop-picker"
RNReanimated:
:path: "../node_modules/react-native-reanimated"
RNScreens:
......@@ -477,6 +496,7 @@ SPEC CHECKSUMS:
React-jsi: b6dc94a6a12ff98e8877287a0b7620d365201161
React-jsiexecutor: 1540d1c01bb493ae3124ed83351b1b6a155db7da
React-jsinspector: 512e560d0e985d0e8c479a54a4e5c147a9c83493
react-native-image-picker: 64d12e81f3d9dad0af107fe6536b295d51932ec0
react-native-safe-area-context: b6e0e284002381d2ff29fa4fff42b4d8282e3c94
React-RCTActionSheet: f41ea8a811aac770e0cc6e0ad6b270c644ea8b7c
React-RCTAnimation: 49ab98b1c1ff4445148b72a3d61554138565bad0
......@@ -490,13 +510,15 @@ SPEC CHECKSUMS:
ReactCommon: ed4e11d27609d571e7eee8b65548efc191116eb3
RNCAsyncStorage: b03032fdbdb725bea0bd9e5ec5a7272865ae7398
RNCMaskedView: 5a8ec07677aa885546a0d98da336457e2bea557f
RNGestureHandler: e66feb0fda7da74ea6a3094656b3c1efe05f5c07
RNGestureHandler: a479ebd5ed4221a810967000735517df0d2db211
RNImageCropPicker: e641bf83ac47324994cac139bde74635ec52c17c
RNReanimated: e03f7425cb7a38dcf1b644d680d1bfc91c3337ad
RNScreens: b6c9607e6fe47c1b6e2f1910d2acd46dd7ecea3a
RNVectorIcons: f67a1abce2ec73e62fe4606e8110e95a832bc859
RNScreens: f0d7a2a440a8ba9f4574ca1ddb3368f473891be4
RNVectorIcons: 31cebfcf94e8cf8686eb5303ae0357da64d7a5a4
TOCropViewController: 3105367e808b7d3d886a74ff59bf4804e7d3ab38
Yoga: 3ebccbdd559724312790e7742142d062476b698e
YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
PODFILE CHECKSUM: ff083ffc9072408b74d721ac5fc0815d6315b00c
PODFILE CHECKSUM: b424f8fa2cc5573b0757c409fab556af49e18736
COCOAPODS: 1.10.1
package.json
......@@ -21,10 +21,15 @@
"moment": "^2.29.1",
"react": "16.11.0",
"react-native": "0.62.2",
"react-native-datepicker": "^1.7.2",
"react-native-gesture-handler": "^1.9.0",
"react-native-image-crop-picker": "^0.36.0",
"react-native-image-picker": "^3.2.1",
"react-native-indicators": "^0.17.0",
"react-native-linear-gradient": "^2.5.6",
"react-native-modal": "^11.7.0",
"react-native-modal-datetime-picker": "^8.7.1",
"react-native-modal-dropdown": "^1.0.0",
"react-native-reanimated": "^1.13.2",
"react-native-safe-area-context": "^3.1.9",
"react-native-screens": "^2.17.1",
......
src/Config/Functions.js
......@@ -35,12 +35,12 @@ export const WIDTHXD = (w) => width * (w / 1125);
export const HEIGHTXD = (h) => height * (h / 2436);
export const getLineHeightXD = (f) => f / 3 + 2;
export const getFontXD = (f) => f / 3 + 2;
// Get size for figmar
export const WIDTH = (w) => width * (w / 360);
export const HEIGHT = (h) => height * (h / 640);
export const getLineHeight = (f) => f;
export const getFont = (f) => f - 1;
export const WIDTHXDICON = (w) => width * (w / 1125);
export const validatePhone = (str) => {
let re = /^[0-9+]{9,11}$/;
......
src/Screens/AccountVerification/Tab/BankInfor.js
......@@ -3,13 +3,14 @@ import {View, Text} from 'react-native';
import TextField from '../../../components/TextField';
import TextMulti from '../../../components/TextMulti';
import PickerImg from '../../../components/Picker/PickerImg';
import PickerDate from '../../../components/Picker/PickerDate';
const BankInfor = (props) => {
return (
<View style={{flex: 1, paddingHorizontal: 10, paddingTop: 10}}>
<TextField title={'Loại thẻ'} />
<TextField title={'Số thẻ'} />
<TextField title={'Ngày cấp'} />
<PickerDate title={'Ngày cấp'} />
<View
style={{
flexDirection: 'row',
......
src/Screens/AccountVerification/Tab/GeneralInfor.js
import React from 'react';
import React, {useState} from 'react';
import {View, Text} from 'react-native';
import TextField from '../../../components/TextField';
import TextMulti from '../../../components/TextMulti';
import PickerDate from '../../../components/Picker/PickerDate';
import PickerImg from '../../../components/Picker/PickerImg';
const GeneralInfor = (props) => {
const [birth, setBirth] = useState(new Date());
return (
<View style={{flex: 1, paddingHorizontal: 10, paddingTop: 10}}>
<TextField title={'User name'} />
......@@ -18,7 +21,12 @@ const GeneralInfor = (props) => {
</View>
</View>
<TextField title={'Số điện thoại'} />
<TextField title={'Ngày sinh'} />
<PickerDate
value={birth}
onValueChange={(val) => setBirth(val)}
title={'Ngày sinh'}
/>
<TextMulti title={'Địa chỉ'} />
</View>
);
......
src/Screens/AccountVerification/Tab/Profile.js
......@@ -6,7 +6,6 @@ const Profile = (props) => {
return (
<View>
<Text>Profile screen</Text>
<PickerImg />
</View>
);
};
......
src/Screens/Feedback/FeedbackView.js
import React from 'react';
import React, {useState} from 'react';
import {View, Text} from 'react-native';
import HeaderBack from '../../components/Header/HeaderBack';
import PickerItem from '../../components/Picker/PickerItem';
const dataTest = [
{
value: '1',
name: '2020',
},
{
value: '2',
name: '2021',
},
{
value: '3',
name: '2022',
},
{
value: '4',
name: '2023',
},
{
value: '5',
name: '2023',
},
{
value: '3',
name: '2022',
},
{
value: '4',
name: '2023',
},
{
value: '5',
name: '2023',
},
];
const FeedbackView = (props) => {
const [year, setYear] = useState(dataTest[2]);
return (
<View>
<View style={{flex: 1, paddingTop: 60}}>
<Text>FeedbackView screen</Text>
<PickerItem
width={100}
data={dataTest}
onValueChange={(value, items) => {
setYear(items);
}}
/>
</View>
);
};
......
src/Screens/Menu/Rose/Item.js 0 → 100644
import React from 'react';
import {View, Text, StyleSheet, TouchableOpacity} from 'react-native';
import {
getFontXD,
HEIGHTXD,
WIDTHXD,
toPriceVnd,
} from '../../../Config/Functions';
import R from '../../../assets/R';
import Block from '../../../components/Block';
import {useNavigation} from '@react-navigation/native';
import {DETAIL_REQUIRE_MONEY} from '../../../routers/ScreenNames';
const Item = (props) => {
const {item} = props;
const navigate = useNavigation();
return (
<TouchableOpacity onPress={() => navigate.navigate(DETAIL_REQUIRE_MONEY)}>
<View style={styles.container}>
<Block flex={1} row>
<View style={[styles.wrapLeft, {backgroundColor: item.color}]} />
<View style={styles.wrapDate}>
<Text style={styles.txt}>T{item.month}</Text>
<Text style={styles.txtTitle}>{item.day}</Text>
</View>
<Block style={styles.wrapRight} padding={[10, 10]} flex={1}>
<View style={styles.rowBet}>
<View
style={{
flex: 1,
height: HEIGHTXD(200),
paddingRight: 10,
}}>
<View style={{flex: 1}}>
<Text numberOfLines={2} style={styles.txtTitle}>
{item.note}
</Text>
</View>
<Text style={styles.txtDate}>Ngày {item.date}</Text>
</View>
<View>
<Text
style={{
fontSize: getFontXD(42),
fontWeight: 'bold',
color: '#FFB721',
}}>
+{toPriceVnd(item.money)}
</Text>
</View>
</View>
</Block>
</Block>
</View>
</TouchableOpacity>
);
};
export default Item;
const styles = StyleSheet.create({
container: {
height: HEIGHTXD(250),
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
marginHorizontal: 10,
backgroundColor: R.colors.white,
marginTop: 10,
borderRadius: HEIGHTXD(30),
},
wrapRight: {
borderLeftColor: R.colors.borderGray,
borderLeftWidth: 0.7,
},
wrapLeft: {
width: WIDTHXD(16),
borderTopLeftRadius: HEIGHTXD(30),
borderBottomStartRadius: HEIGHTXD(30),
},
wrapDate: {
justifyContent: 'center',
paddingHorizontal: 10,
},
txtTitle: {
fontSize: getFontXD(42),
color: R.colors.black,
fontWeight: '700',
},
txt: {
fontSize: getFontXD(36),
color: '#363636',
},
txtDate: {
fontSize: getFontXD(39),
color: '#363636',
fontStyle: 'italic',
},
rowBet: {
flexDirection: 'row',
},
});
src/Screens/Menu/Rose/Rose.js
import React from 'react';
import {View, Text} from 'react-native';
import {View, Text, FlatList} from 'react-native';
import HeaderSB from '../../../components/Header/HeaderSB';
import Item from './Item';
const data = [
{
id: '1',
month: 2,
day: '20',
name: 'Nạp tiền',
money: 10000000,
note: 'Ghi chú nap tiền để đầu tư',
status: 1,
date: '20/02/2021',
},
{
id: '2',
month: 2,
day: '20',
name: 'Nạp tiền',
money: 2000000,
note: 'Ghi chú nap tiền để đầu tư',
status: 1,
date: '20/02/2021',
},
{
id: '3',
month: 2,
day: '20',
name: 'Nạp tiền',
money: 3000000,
note: 'Ghi chú nap tiền để đầu tư',
status: 1,
date: '20/02/2021',
},
{
id: '4',
month: 2,
day: '20',
name: 'Nạp tiền',
money: 4000000,
note: 'Ghi chú nap tiền để đầu tư',
status: 1,
date: '20/02/2021',
},
{
id: '5',
month: 2,
day: '20',
name: 'Nạp tiền',
money: 9000000,
note: 'Ghi chú nap tiền để đầu tư',
status: 1,
date: '20/02/2021',
},
];
const Rose = (props) => {
return (
<View>
<Text>Rose screen</Text>
<View style={{flex: 1}}>
<HeaderSB title={'HOA HỒNG'} />
<View style={{flex: 1}}>
<FlatList
keyExtractor={(item) => item.id}
data={data}
renderItem={({item}) => <Item item={item} />}
/>
</View>
</View>
);
};
......
src/assets/images.js
......@@ -32,6 +32,9 @@ const images = {
iconBack: require('./images/iconBack.png'),
bgBtn: require('./images/bgBtn.png'),
addImg: require('./images/addImg.png'),
iconCalendar: require('./images/iconBack.png'),
iconImg: require('./images/iconImg.png'),
iconCamera: require('./images/iconCamera.png'),
};
export default images;
src/components/Aleart.tsx 0 → 100644
//@ts-ignore
import { Alert } from 'react-native';
const AlertMessage = (message: string, title?: string, onPressOk?: any, cancel?: boolean) => {
Alert.alert(
title || '',
message,
cancel
? [
{
text:"Hien thi btn khong",
style: 'default',
},
{
text: 'Title btn co',
onPress: () => {
if (typeof onPressOk === 'function') {
onPressOk();
}
},
style: 'default',
},
]
: [
{
text:"Hien thi thong bao khong co cancel",
onPress: () => {
if (typeof onPressOk === 'function') {
onPressOk();
}
},
},
],
{ cancelable: false },
);
};
export default AlertMessage;
src/components/Header/HeaderDrawer.js
......@@ -41,6 +41,7 @@ const HeaderHome = (props) => {
<Modal
animationIn={'fadeInLeft'}
animationOut={'fadeOutLeft'}
style={{marginLeft: 20}}
isVisible={isModalVisible}
backdropOpacity={0.5}>
<View
......
src/components/Header/HeaderSB.js 0 → 100644
import React, {useState} from 'react';
import {
View,
Text,
Image,
StatusBar,
StyleSheet,
SafeAreaView,
ImageBackground,
TouchableOpacity,
Platform,
Button,
TouchableWithoutFeedback,
TextInput,
} from 'react-native';
import R from '../../assets/R';
import {getFontXD, HEIGHT, WIDTHXD} from '../../Config/Functions';
import LinearGradient from 'react-native-linear-gradient';
import {connect} from 'react-redux';
import {HEIGHTXD} from '../../Config/Functions';
import Icon from 'react-native-vector-icons/Ionicons';
import {useNavigation} from '@react-navigation/native';
const HeaderSearch = (props) => {
const {title, isWhite} = props;
const [openSearch, setOpenSearch] = useState(false);
const [txtSearch, setTxtSearch] = useState('');
const toggleSearch = () => {
setTxtSearch('');
setOpenSearch(!openSearch);
};
const navigate = useNavigation();
return (
<ImageBackground
style={[styles.img, isWhite ? {backgroundColor: 'white'} : {}]}
source={R.images.bgHeader}>
<StatusBar backgroundColor="transparent" translucent={true} />
<View style={styles.headerContainer}>
<TouchableOpacity onPress={() => navigate.goBack()}>
<Image source={R.images.iconBack} style={styles.imgIcon} />
</TouchableOpacity>
{openSearch ? (
<TextInput
style={styles.txtInput}
onChangeText={(val) => setTxtSearch(val)}
value={txtSearch}
/>
) : (
<Text style={styles.txtTitle}>{title ? title : ''} </Text>
)}
<TouchableOpacity onPress={toggleSearch}>
{openSearch ? (
<Icon name={'refresh-outline'} size={28} color={R.colors.white} />
) : (
<Icon name={'search-sharp'} size={28} color={R.colors.white} />
)}
</TouchableOpacity>
</View>
</ImageBackground>
);
};
const mapStateToProps = (state) => {
return {
user: state.userReducer,
};
};
export default connect(mapStateToProps, {})(HeaderSearch);
const styles = StyleSheet.create({
img: {
height: Platform.OS == 'ios' ? HEIGHTXD(330) : HEIGHTXD(400),
width: '100%',
justifyContent: 'center',
alignItems: 'center',
},
headerContainer: {
height: 55,
width: '100%',
alignItems: 'center',
flexDirection: 'row',
paddingHorizontal: 20,
justifyContent: 'space-between',
},
imgIcon: {
width: 25,
height: 20,
},
txtTitle: {
fontSize: getFontXD(52),
color: R.colors.white,
fontWeight: 'bold',
},
container: {
backgroundColor: 'white',
height: '100%',
width: 300,
borderRadius: 20,
},
txtInput: {
backgroundColor: R.colors.white,
flex: 1,
padding: 2,
height: HEIGHTXD(100),
fontSize: getFontXD(42),
borderRadius: 10,
marginHorizontal: 10,
paddingHorizontal: 10,
},
btnIcon: {
backgroundColor: R.colors.lightBlue2,
padding: 5,
},
});
src/components/List/StyledIndicator.tsx 0 → 100644
import * as React from 'react';
//@ts-ignore
import { ActivityIndicator, ActivityIndicatorProps, StyleSheet } from 'react-native';
const StyledIndicator: React.FunctionComponent<ActivityIndicatorProps> = (props: ActivityIndicatorProps) => {
return <ActivityIndicator color={'red'} size={'small'} style={styles.container} {...props} />;
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});
export default StyledIndicator;
src/components/List/StyledList.tsx 0 → 100644
//@ts-ignore
import React, { useEffect, useRef, useState, useMemo } from 'react';
//@ts-ignore
import { FlatList, FlatListProps, RefreshControl, View, TextStyle, StyleProp, ViewStyle } from 'react-native';
import NoData from './StyledNoData';
import StyledIndicator from './StyledIndicator';
interface Props extends FlatListProps<any> {
[key: string]: any;
FlatListComponent?: React.FunctionComponent<any>;
loading?: boolean;
data: any[];
loadingMore?: boolean;
noDataText?: string;
ListHeaderComponent?: any;
scrollEnabled?: boolean;
noDataCanRefresh?: boolean;
i18Params?: any;
noDataTextI18Key?: any;
noDataStyle?: StyleProp<ViewStyle>;
customStyle?: any;
onLoadMore?(): void;
onNoDataRefresh?(): void;
}
const StyledList = (props: Props, ref: any) => {
const [momentumScrolled, setMomentumScrolled] = useState(false);
const list = useRef<FlatList>(null);
const { loading, loadingMore, data, ListHeaderComponent, refreshing, customStyle } = props;
const contentContainerStyle: StyleProp<ViewStyle> = {};
const hasData = data?.length !== 0;
if (!hasData) {
contentContainerStyle.flex = 1;
// contentContainerStyle.alignItems = 'center'
// contentContainerStyle.justifyContent = 'center'
}
let styles: StyleProp<ViewStyle>;
if (typeof ListHeaderComponent === 'undefined' && !hasData) {
styles = [contentContainerStyle, customStyle];
} else {
styles = customStyle;
}
function keyExtractor(item: any, i: any): string {
return `${i}`;
}
function handleRefresh() {
if (props.onRefresh) props.onRefresh();
}
// Bởi vì onEnReached call nhiều lần nên phải trick để chỉ call 1 lần thôi
useEffect(() => {
if (momentumScrolled) {
setMomentumScrolled(true);
if (props.onLoadMore) props.onLoadMore();
}
}, [momentumScrolled]);
function handleEndReached(info: any) {
if (!momentumScrolled) {
setMomentumScrolled(true);
}
}
function handleNoDataRefresh() {
const { onNoDataRefresh } = props;
if (onNoDataRefresh) onNoDataRefresh();
}
function onMomentumScrollBegin() {
setMomentumScrolled(false);
}
React.useImperativeHandle(ref, () => ({
scrollToTop: () => {
list?.current?.scrollToOffset({ animated: true, offset: 0 });
},
}));
function renderFooter() {
if (hasData && loadingMore) {
return (
<View style={{ alignItems: 'center', marginVertical: 8 }}>
<StyledIndicator size={24} />
</View>
);
}
return null;
}
function renderNoData() {
const { noDataText, noDataTextI18Key, noDataCanRefresh } = props;
return (
<NoData
customStyle={props.noDataStyle}
loading={loading}
text={"No data"}
canRefresh={noDataCanRefresh}
onRefresh={handleNoDataRefresh}
/>
);
}
const FlatListComponent: any = useMemo(() => {
return props?.FlatListComponent || FlatList;
}, [props?.FlatListComponent]);
return (
<FlatListComponent
ref={list}
contentContainerStyle={styles}
keyExtractor={keyExtractor}
initialNumToRender={10}
// onEndReached={handleEndReached}
onEndReachedThreshold={0.01}
onMomentumScrollBegin={onMomentumScrollBegin}
ListEmptyComponent={renderNoData}
showsVerticalScrollIndicator={false}
refreshControl={
<RefreshControl
refreshing={!!refreshing}
colors={['red']}
tintColor={"blue"}
onRefresh={handleRefresh}
/>
}
ListFooterComponent={renderFooter}
keyboardShouldPersistTaps={'never'}
{...props}
/>
);
};
export default React.memo(React.forwardRef(StyledList));
src/components/List/StyledNoData.tsx 0 → 100644
import * as React from 'react';
//@ts-ignore
import { ActivityIndicator,TouchableOpacity, Text,StyleProp, StyleSheet, TextStyle, View, ViewStyle } from 'react-native';
interface StyledListNoDataProps {
text?: string;
canRefresh?: boolean;
loading?: boolean;
onRefresh?(): any;
customStyle?: StyleProp<ViewStyle>;
customStyleText?: StyleProp<TextStyle>;
}
const StyledNoData: React.FunctionComponent<StyledListNoDataProps> = (props: StyledListNoDataProps) => {
return (
<View style={[styles.container, props.customStyle]}>
{props.loading ? (
<View style={{ alignItems: 'center' }}>
<ActivityIndicator />
</View>
) : (
<Text>Khong co data</Text>
)}
{!!props.canRefresh && !props.loading ? (
<TouchableOpacity onPress={props.onRefresh}>
<Text>Reload</Text>
</TouchableOpacity>
) : (
<View />
)}
</View>
);
};
const styles = StyleSheet.create({
container: {
alignItems: 'center',
justifyContent: 'center',
padding: 8,
},
text: {
fontWeight: '600',
fontSize: 14,
color: 'red',
textAlign: 'center',
},
textReload: {
margin: 12,
color: 'red',
},
});
export default StyledNoData;
src/components/Picker/PickerDate.js 0 → 100644
import React, {Component} from 'react';
import {StyleSheet, View, Image, Text} from 'react-native';
import DatePicker from 'react-native-datepicker';
import {
WIDTHXD,
HEIGHTXD,
getFontXD,
WIDTHXDICON,
} from '../../Config/Functions';
import R from '../../assets/R';
import Icon from 'react-native-vector-icons/AntDesign';
/**
* This Function to choice date
* @callback onValueChange value of date you choice
* @param value value of date you choice
* @param containerStyle custom containerStyle of view
* @param textStyle style value of date
* @param placeholder value of placeholder
* @param width width of datePicker
* @param date value of date you choice
* @param enableEdit status allow edit
* other you can make minDate,maxDate... with props of libary react-native-datepicker
*/
class PickerDate extends Component {
state = {
date: new Date(),
};
/**
* This Function to set date
* @param date value of date you choice
*/
onChangeDate = (date) => {
this.setState({date});
};
render() {
const {
onValueChange,
value,
containerStyle,
textStyle,
placeholder,
width,
disabled,
title,
} = this.props;
return (
<View style={{marginVertical: 5}}>
<Text
style={{
fontSize: getFontXD(42),
color: R.colors.color777,
marginBottom: 5,
}}>
{title}
</Text>
<View
style={[
styles.inputBox,
containerStyle !== null && containerStyle,
width && {width},
]}>
{disabled ? (
<View
style={{
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
}}>
<Text
style={{
...styles.textDate,
...textStyle,
paddingVertical: 0,
marginRight: WIDTHXD(15),
}}>
{value !== null && value}
</Text>
<Text>Hello</Text>
<Icon name={'calendar'} size={22} color={'#929292'} />
</View>
) : (
<DatePicker
confirmBtnText={'OK'}
cancelBtnText={'Cancel'}
locale="vi"
style={[
{paddingHorizontal: 0, borderWidth: 0, width: WIDTHXD(960)},
width && {width: width - WIDTHXD(30)},
]}
date={value}
mode="date"
placeholder={placeholder !== null && placeholder}
format="DD/MM/YYYY" // you can change format of date in date picker
git
iconComponent={
<Icon name={'calendar'} size={22} color={'#929292'} />
} // to custom icon
customStyles={{
dateInput: {
flex: 5,
marginLeft: WIDTHXD(0),
borderWidth: 0,
color: R.colors.black0,
},
dateText: {
...styles.textDate,
},
}}
onDateChange={(date) => {
this.onChangeDate(date);
onValueChange && onValueChange(date); // return value of date, Fuction from parent
}}
{...this.props}
/>
)}
</View>
</View>
);
}
}
const styles = StyleSheet.create({
inputBox: {
borderRadius: WIDTHXD(20),
height: HEIGHTXD(120),
borderWidth: 0.3,
borderColor: R.colors.borderGray,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
// paddingVertical: HEIGHTXD(17),
backgroundColor: 'white',
},
textDate: {
fontSize: getFontXD(42),
color: R.colors.black0,
alignSelf: 'flex-start',
paddingLeft: WIDTHXD(16),
paddingVertical: HEIGHTXD(25),
},
});
export default React.memo(PickerDate);
src/components/Picker/PickerImg.js
import React from 'react';
import {View, Text, Image, StyleSheet, TouchableOpacity} from 'react-native';
import React, {useState} from 'react';
import {
View,
Text,
Image,
StyleSheet,
TouchableOpacity,
TouchableWithoutFeedback,
} from 'react-native';
import R from '../../assets/R';
import {HEIGHTXD, WIDTHXD, getFontXD} from '../../Config/Functions';
import Icon from 'react-native-vector-icons/AntDesign';
import Modal from 'react-native-modal';
import Block from '../Block';
import ImagePicker from 'react-native-image-crop-picker';
const options = {
title: 'Select Avatar',
customButtons: [{name: 'fb', title: 'Choose Photo from Facebook'}],
storageOptions: {
skipBackup: true,
path: 'images',
},
};
const PickerImg = (props) => {
const {title} = props;
const [imgPicker, setImgPicker] = useState();
const [isModalVisible, setModalVisible] = useState(false);
const [urlImg, setUrlImg] = useState('');
// const [imgPicker, setImgPicker] = useState('');
const onchoosGalery = () => {
ImagePicker.openPicker({
mediaType: 'photo',
multiple: true,
}).then((images) => {
setModalVisible(false);
console.log(images);
});
};
const onCapture = () => {
ImagePicker.openCamera({
mediaType: 'photo',
width: 300,
height: 400,
}).then((image) => {
setModalVisible(false);
console.log(image);
});
};
return (
<View style={{marginTop: 10, width: WIDTHXD(380)}}>
<TouchableOpacity
onPress={() => setModalVisible(true)}
style={{marginTop: 10, width: WIDTHXD(480)}}>
<Text style={styles.txt}>{title}</Text>
<View style={styles.container}>
<Icon name={'plus'} size={40} color={'#DBDBDB'} />
</View>
</View>
<Modal
isVisible={isModalVisible}
style={{margin: 0, justifyContent: 'flex-end'}}
onSwipeComplete={() => setModalVisible(false)}
swipeDirection={['up', 'left', 'right', 'down']}>
<TouchableWithoutFeedback onPress={() => setModalVisible(false)}>
<View style={{flex: 1}}></View>
</TouchableWithoutFeedback>
<View style={styles.containerSelect}>
<Text
style={{
textAlign: 'center',
fontSize: getFontXD(42),
fontWeight: 'bold',
color: '#1473E6',
}}>
Chọn nguồn lấy ảnh
</Text>
<View style={styles.line} />
<Block row space={'around'} center>
<TouchableOpacity style={styles.selectionImg} onPress={onCapture}>
<Image style={styles.imgIcon} source={R.images.iconCamera} />
<Text style={styles.txtTitleBtn}>Chụp ảnh</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.selectionImg}
onPress={onchoosGalery}>
<Image style={styles.imgIcon} source={R.images.iconImg} />
<Text style={styles.txtTitleBtn}>Thư viện ảnh</Text>
</TouchableOpacity>
</Block>
</View>
</Modal>
</TouchableOpacity>
);
};
......@@ -33,6 +118,33 @@ const styles = StyleSheet.create({
color: R.colors.color777,
marginBottom: 5,
},
selectionImg: {
padding: 10,
justifyContent: 'center',
alignItems: 'center',
},
containerSelect: {
height: HEIGHTXD(420),
backgroundColor: 'white',
paddingTop: 10,
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
},
line: {
height: 1,
backgroundColor: '#929292',
width: '100%',
marginTop: 5,
},
imgIcon: {
width: 40,
height: 40,
},
txtTitleBtn: {
textAlign: 'center',
fontSize: getFontXD(42),
color: '#1473E6',
},
});
export default PickerImg;
export default React.memo(PickerImg);
src/components/PickerItem2.js → src/components/Picker/PickerItem.js
import React, { Component } from "react";
import React, {Component} from 'react';
import {
StyleSheet,
Text,
......@@ -7,10 +7,17 @@ import {
TouchableOpacity,
TouchableHighlight,
Dimensions,
} from "react-native";
import ModalDropdown from "react-native-modal-dropdown";
import R from "../../assets/R";
import {WIDTHXD, getFontXD, HEIGHTXD, getHeight, WIDTHXDICON} from "../../config/Function";
} from 'react-native';
import ModalDropdown from 'react-native-modal-dropdown';
import R from '../../assets/R';
import {
WIDTHXD,
getFontXD,
HEIGHTXD,
getHeight,
WIDTHXDICON,
} from '../../Config/Functions';
import Icon from 'react-native-vector-icons/AntDesign';
const data = [];
/**
......@@ -29,13 +36,13 @@ const data = [];
* @param iconDropdownStyle to style icon dropdown
* other you can make minDate,maxDate... with props of libary react-native-datepicker
*/
export default class PickerItem2 extends Component {
export default class PickerItem extends Component {
constructor(props) {
super(props);
this._button = null;
this._buttonFrame = null;
this.state = {
value: "",
value: '',
showInBottom: true,
};
}
......@@ -45,11 +52,11 @@ export default class PickerItem2 extends Component {
}
_dropdownAdjustFrame = (style) => {
const { showInBottom } = this.state;
const {showInBottom} = this.state;
// alert(showInBottom);
let stylez = style;
if (!showInBottom) {
stylez.height += HEIGHTXD(99) * (6 - Math.min(this.props.data.length, 6));
stylez.height += HEIGHTXD(99) * (6 - Math.min(this.props.data.length, 5));
} else {
stylez.height += HEIGHTXD(99);
}
......@@ -58,12 +65,12 @@ export default class PickerItem2 extends Component {
};
_calcPosition() {
const { data } = this.props;
const {data} = this.props;
let dropdownStyle = {
// maxHeight: HEIGHTXD(99 * Math.min(data.length, 5)) + (6 - Math.min(data.length, 5)) * HEIGHTXD(105),
maxHeight: HEIGHTXD(99 * Math.min(data.length, 6) + 12),
maxHeight: HEIGHTXD(99 * Math.min(data.length, 5) + 12),
};
const dimensions = Dimensions.get("window");
const dimensions = Dimensions.get('window');
const windowHeight = dimensions.height;
const dropdownHeight = dropdownStyle.maxHeight;
......@@ -72,13 +79,13 @@ export default class PickerItem2 extends Component {
windowHeight - this._buttonFrame.y - this._buttonFrame.h;
const showInBottom =
bottomSpace >= dropdownHeight || bottomSpace >= this._buttonFrame.y;
this.setState({ showInBottom });
this.setState({showInBottom});
}
_updatePosition() {
if (this._button && this._button.measure) {
this._button.measure((fx, fy, width, height, px, py) => {
this._buttonFrame = { x: px, y: py, w: width, h: height };
this._buttonFrame = {x: px, y: py, w: width, h: height};
this._calcPosition();
});
}
......@@ -114,58 +121,60 @@ export default class PickerItem2 extends Component {
style={[
styles.pickerStyle,
containerStyle !== null && containerStyle,
height && { height },
width && { width },
]}
>
height && {height},
width && {width},
]}>
<Text
numberOfLines={1}
style={[
styles.dropdown_row_text,
width && { width: width - WIDTHXD(125) },
width && {width: width - WIDTHXD(125)},
textStyle ? textStyle : {},
]}
>
]}>
{defaultValue || this.state.value}
</Text>
<Image
resizeMode="contain"
source={
iconDropdown || isTriangle
? R.images.iconDropdown
: R.images.iconDown
}
style={
iconDropdownStyle || { width: WIDTHXDICON(35), height: WIDTHXDICON(18) }
}
/>
{iconDropdown || isTriangle ? (
<Icon name={'up'} size={20} color={R.colors.borderGray} />
) : (
<Icon name={'down'} size={20} color={R.colors.borderGray} />
)}
</TouchableOpacity>
<ModalDropdown
showsVerticalScrollIndicator={false}
ref={(el) => {
this._dropdown = el;
}}
style={[styles.dropdown, width && { width }]}
defaultValue={defaultValue || "0"}
style={[styles.dropdown, width && {width}]}
defaultValue={defaultValue || '0'}
defaultIndex={defaultIndex || 0}
textStyle={styles.dropdown_text}
dropdownStyle={[
styles.dropdown_dropdown,
{ height: HEIGHTXD(420) },
width && { width },
{maxHeight: HEIGHTXD(99 * Math.min(data.length, 6) + 12)},
width && {width},
]}
options={data !== null && data}
onSelect={(value) => {
onValueChange && onValueChange(value, data[value]);
this.setState({ value: data[value].name });
this.setState({value: data[value].name});
}}
renderSeparator={() => (
renderRow={(option, index, isSelected) => (
<View
style={{ width: "100%", height: 0.5, backgroundColor: "#E2E8F2" }}
/>
style={[
styles.dropdown_row,
{backgroundColor: isSelected ? '#ffffff' : '#f2f2f2'},
]}>
<Text
numberOfLines={1}
style={[
styles.dropdown_row_text,
{marginHorizontal: WIDTHXD(30)},
]}>
{`${option.name}`}
</Text>
</View>
)}
renderButtonText={(rowData) => this.renderButtonText(rowData)}
renderRow={this.renderRow}
adjustFrame={(style) => this._dropdownAdjustFrame(style)}
// renderSeparator={(sectionID, rowID, adjacentRowHighlighted) => this.renderSeparator(sectionID, rowID, adjacentRowHighlighted)}
/>
......@@ -173,41 +182,7 @@ export default class PickerItem2 extends Component {
);
}
renderButtonText = () => " ";
renderRow = (rowData, rowID, highlighted) => {
const { width, heightItem, data } = this.props;
let evenRow = rowID === (data && data.length - 1);
return (
<TouchableHighlight underlayColor="cornflowerblue">
<View
style={[
styles.dropdown_row,
heightItem && { height: heightItem },
this.props.defaultValue === rowData.name && {
backgroundColor: "#e3e8f2",
},
evenRow && {
borderBottomLeftRadius: WIDTHXD(20),
borderBottomRightRadius: WIDTHXD(20),
overflow: "hidden",
},
width && { width },
]}
>
<Text
numberOfLines={1}
style={[
styles.dropdown_row_text,
{ marginHorizontal: WIDTHXD(30) },
]}
>
{`${rowData.name}`}
</Text>
</View>
</TouchableHighlight>
);
};
renderButtonText = () => ' ';
renderSeparator = (rowID) => {
if (rowID === data.length - 1) return [];
......@@ -221,48 +196,37 @@ const styles = StyleSheet.create({
flex: 0,
},
dropdown: {
alignSelf: "center",
alignSelf: 'center',
width: WIDTHXD(960),
height: HEIGHTXD(0),
borderBottomLeftRadius: WIDTHXD(20),
borderBottomRightRadius: WIDTHXD(20),
overflow: "hidden",
},
dropdown_text: {
fontFamily: R.fonts.RobotoRegular,
fontSize: getFontXD(42),
},
dropdown_dropdown: {
flex: 1,
width: WIDTHXD(960),
height: HEIGHTXD(300),
// marginTop: -HEIGHTXD(99),
borderWidth: 0,
// borderColor: R.colors.iconGray,
// borderRadius: 3,
maxHeight: HEIGHTXD(200),
borderBottomLeftRadius: WIDTHXD(20),
borderBottomRightRadius: WIDTHXD(20),
// paddingBottom: HEIGHTXD(10),
shadowColor: "#000",
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.2,
shadowRadius: 1.41,
overflow: "hidden",
elevation: 2,
},
dropdown_row: {
flexDirection: "row",
flexDirection: 'row',
height: HEIGHTXD(100),
alignItems: "center",
alignItems: 'center',
paddingHorizontal: 5,
},
dropdown_row_text: {
// marginHorizontal: 4,
fontFamily: R.fonts.RobotoRegular,
fontSize: getFontXD(42),
textAlignVertical: "center",
textAlignVertical: 'center',
},
dropdown_separator: {
borderBottomWidth: 0.3,
......@@ -271,14 +235,15 @@ const styles = StyleSheet.create({
pickerStyle: {
width: WIDTHXD(960),
height: HEIGHTXD(99),
flexDirection: "row",
flexDirection: 'row',
paddingHorizontal: WIDTHXD(30),
justifyContent: "space-between",
alignItems: "center",
alignSelf: "center",
justifyContent: 'space-between',
alignItems: 'center',
alignSelf: 'center',
borderWidth: 0.3,
borderColor: R.colors.iconGray,
borderRadius: WIDTHXD(20),
backgroundColor: 'white',
// marginTop: HEIGHTXD(10)
},
});
src/components/TextField.js
......@@ -40,4 +40,4 @@ const TextField = (props) => {
);
};
export default TextField;
export default React.memo(TextField);
src/components/TextMulti.js
......@@ -43,4 +43,4 @@ const TextField = (props) => {
);
};
export default TextField;
export default React.memo(TextField);
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment