Horhik
/
Ankilan
1
0
Fork 0
Code Issues 1 Pull Requests Projects Releases 2 Wiki Activity

add FieldEditor component

This commit is contained in:
horhik 2020-03-31 04:54:08 -03:00
parent 0962aa31b5
commit 4766e3d7fb
27 changed files with 351 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
android/app/build.gradle
View File

@ -179,6 +179,7 @@ android {
}
dependencies {
implementation project(':react-native-vector-icons')
implementation project(':@react-native-community_async-storage')
implementation fileTree(dir: "libs", include: ["*.jar"])
implementation "com.facebook.react:react-native:+" // From node_modules

BIN
android/app/src/main/assets/fonts/AntDesign.ttf Normal file
View File

Binary file not shown.

BIN
android/app/src/main/assets/fonts/Entypo.ttf Normal file
View File

Binary file not shown.

BIN
android/app/src/main/assets/fonts/EvilIcons.ttf Normal file
View File

Binary file not shown.

BIN
android/app/src/main/assets/fonts/Feather.ttf Normal file
View File

Binary file not shown.

BIN
android/app/src/main/assets/fonts/FontAwesome.ttf Normal file
View File

Binary file not shown.

BIN
android/app/src/main/assets/fonts/FontAwesome5_Brands.ttf Normal file
View File

Binary file not shown.

BIN
android/app/src/main/assets/fonts/FontAwesome5_Regular.ttf Normal file
View File

Binary file not shown.

BIN
android/app/src/main/assets/fonts/FontAwesome5_Solid.ttf Normal file
View File

Binary file not shown.

BIN
android/app/src/main/assets/fonts/Fontisto.ttf Executable file
View File

Binary file not shown.

BIN
android/app/src/main/assets/fonts/Foundation.ttf Normal file
View File

Binary file not shown.

BIN
android/app/src/main/assets/fonts/Ionicons.ttf Normal file
View File

Binary file not shown.

BIN
android/app/src/main/assets/fonts/MaterialCommunityIcons.ttf Normal file
View File

Binary file not shown.

BIN
android/app/src/main/assets/fonts/MaterialIcons.ttf Normal file
View File

Binary file not shown.

BIN
android/app/src/main/assets/fonts/Octicons.ttf Normal file
View File

Binary file not shown.

BIN
android/app/src/main/assets/fonts/SimpleLineIcons.ttf Normal file
View File

Binary file not shown.

BIN
android/app/src/main/assets/fonts/Zocial.ttf Normal file
View File

Binary file not shown.

1
android/app/src/main/java/com/ankilan/MainApplication.java
View File

@ -4,6 +4,7 @@ import android.app.Application;
import android.content.Context;
import com.facebook.react.PackageList;
import com.facebook.react.ReactApplication;
import com.oblador.vectoricons.VectorIconsPackage;
import com.reactnativecommunity.asyncstorage.AsyncStoragePackage;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;

2
android/settings.gradle
View File

@ -1,4 +1,6 @@
rootProject.name = 'ankilan'
include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
include ':@react-native-community_async-storage'
project(':@react-native-community_async-storage').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/async-storage/android')
apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)

2
ios/Podfile
View File

@ -36,6 +36,8 @@ target 'ankilan' do
pod 'RNCAsyncStorage', :path => '../node_modules/@react-native-community/async-storage'
pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'
target 'ankilanTests' do
inherit! :search_paths
# Pods for testing

75
ios/ankilan.xcodeproj/project.pbxproj
View File

@ -16,6 +16,22 @@
2D02E4BD1E0B4A84006451C7 /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
2D02E4BF1E0B4AB3006451C7 /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
2DCD954D1E0B4F2C00145EB5 /* ankilanTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* ankilanTests.m */; };
4D52FDE523E84B2791C3D67D /* AntDesign.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 3000D2B3834E4C66A28382F8 /* AntDesign.ttf */; };
B90493FFE9264DF5B6CC7C44 /* Entypo.ttf in Resources */ = {isa = PBXBuildFile; fileRef = ADE75B0AF3E84621B5059B43 /* Entypo.ttf */; };
31DBC812F4DE446B9D3DC7B1 /* EvilIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 7AD629F9A4B44BFE9AFEA2E9 /* EvilIcons.ttf */; };
52508E432BC44BF7A5E64891 /* Feather.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 4712AA6A09254CA2B29AF3F5 /* Feather.ttf */; };
BA64553EADB24FB9AB6E0F82 /* FontAwesome.ttf in Resources */ = {isa = PBXBuildFile; fileRef = DE8FAE89F42A46C381F68DAF /* FontAwesome.ttf */; };
42092AB24C2F4A0987A993FA /* FontAwesome5_Brands.ttf in Resources */ = {isa = PBXBuildFile; fileRef = F6F0D28CAB1A451DAA9BA6AE /* FontAwesome5_Brands.ttf */; };
A2E24CE7C18C4CFF97F78377 /* FontAwesome5_Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = BCC0EEAD424E456DA490EE4F /* FontAwesome5_Regular.ttf */; };
631DA64D244F4F8F915F2121 /* FontAwesome5_Solid.ttf in Resources */ = {isa = PBXBuildFile; fileRef = BDB3D4C6185B4CB69E360505 /* FontAwesome5_Solid.ttf */; };
369E14D730C449659A20A504 /* Fontisto.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 256E5C94D0AC40E381A107A5 /* Fontisto.ttf */; };
0F7CA4B8C6454C77B1E45705 /* Foundation.ttf in Resources */ = {isa = PBXBuildFile; fileRef = D3378FED83674C7297D95B3C /* Foundation.ttf */; };
D2D1008687164C9CB74A95D7 /* Ionicons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = CCF85275316C4FA29EBEBEF3 /* Ionicons.ttf */; };
659D1586ED4C433BA9DD67DB /* MaterialCommunityIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 37CF45EBB8E541AFB0AEEED1 /* MaterialCommunityIcons.ttf */; };
97EA10A37A0942C0B0FD6C44 /* MaterialIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 99E0F4267E0B4BB69A5994F3 /* MaterialIcons.ttf */; };
60D08C8669D9491891F0EAE0 /* Octicons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 006C0665080F4DB581A45597 /* Octicons.ttf */; };
157D60FEAF7C49948291342D /* SimpleLineIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 00E332BD0E6B4F69AD2BFB66 /* SimpleLineIcons.ttf */; };
31C2D4A00BF24B9989303435 /* Zocial.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 16C65B2FFA244990A98EED99 /* Zocial.ttf */; };
/* End PBXBuildFile section */
/* Begin PBXContainerItemProxy section */
@ -51,6 +67,22 @@
2D02E4901E0B4A5D006451C7 /* ankilan-tvOSTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = "ankilan-tvOSTests.xctest"; sourceTree = BUILT_PRODUCTS_DIR; };
ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
ED2971642150620600B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = Platforms/AppleTVOS.platform/Developer/SDKs/AppleTVOS12.0.sdk/System/Library/Frameworks/JavaScriptCore.framework; sourceTree = DEVELOPER_DIR; };
3000D2B3834E4C66A28382F8 /* AntDesign.ttf */ = {isa = PBXFileReference; name = "AntDesign.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/AntDesign.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
ADE75B0AF3E84621B5059B43 /* Entypo.ttf */ = {isa = PBXFileReference; name = "Entypo.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Entypo.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
7AD629F9A4B44BFE9AFEA2E9 /* EvilIcons.ttf */ = {isa = PBXFileReference; name = "EvilIcons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/EvilIcons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
4712AA6A09254CA2B29AF3F5 /* Feather.ttf */ = {isa = PBXFileReference; name = "Feather.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Feather.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
DE8FAE89F42A46C381F68DAF /* FontAwesome.ttf */ = {isa = PBXFileReference; name = "FontAwesome.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/FontAwesome.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
F6F0D28CAB1A451DAA9BA6AE /* FontAwesome5_Brands.ttf */ = {isa = PBXFileReference; name = "FontAwesome5_Brands.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/FontAwesome5_Brands.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
BCC0EEAD424E456DA490EE4F /* FontAwesome5_Regular.ttf */ = {isa = PBXFileReference; name = "FontAwesome5_Regular.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/FontAwesome5_Regular.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
BDB3D4C6185B4CB69E360505 /* FontAwesome5_Solid.ttf */ = {isa = PBXFileReference; name = "FontAwesome5_Solid.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/FontAwesome5_Solid.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
256E5C94D0AC40E381A107A5 /* Fontisto.ttf */ = {isa = PBXFileReference; name = "Fontisto.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Fontisto.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
D3378FED83674C7297D95B3C /* Foundation.ttf */ = {isa = PBXFileReference; name = "Foundation.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Foundation.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
CCF85275316C4FA29EBEBEF3 /* Ionicons.ttf */ = {isa = PBXFileReference; name = "Ionicons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Ionicons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
37CF45EBB8E541AFB0AEEED1 /* MaterialCommunityIcons.ttf */ = {isa = PBXFileReference; name = "MaterialCommunityIcons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
99E0F4267E0B4BB69A5994F3 /* MaterialIcons.ttf */ = {isa = PBXFileReference; name = "MaterialIcons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/MaterialIcons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
006C0665080F4DB581A45597 /* Octicons.ttf */ = {isa = PBXFileReference; name = "Octicons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Octicons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
00E332BD0E6B4F69AD2BFB66 /* SimpleLineIcons.ttf */ = {isa = PBXFileReference; name = "SimpleLineIcons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/SimpleLineIcons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
16C65B2FFA244990A98EED99 /* Zocial.ttf */ = {isa = PBXFileReference; name = "Zocial.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Zocial.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
/* End PBXFileReference section */
/* Begin PBXFrameworksBuildPhase section */
@ -140,6 +172,7 @@
00E356EF1AD99517003FC87E /* ankilanTests */,
83CBBA001A601CBA00E9B192 /* Products */,
2D16E6871FA4F8E400B85C8A /* Frameworks */,
F26EA599C9CA4864823C1698 /* Resources */,
);
indentWidth = 2;
sourceTree = "<group>";
@ -157,6 +190,30 @@
name = Products;
sourceTree = "<group>";
};
F26EA599C9CA4864823C1698 /* Resources */ = {
isa = "PBXGroup";
children = (
3000D2B3834E4C66A28382F8 /* AntDesign.ttf */,
ADE75B0AF3E84621B5059B43 /* Entypo.ttf */,
7AD629F9A4B44BFE9AFEA2E9 /* EvilIcons.ttf */,
4712AA6A09254CA2B29AF3F5 /* Feather.ttf */,
DE8FAE89F42A46C381F68DAF /* FontAwesome.ttf */,
F6F0D28CAB1A451DAA9BA6AE /* FontAwesome5_Brands.ttf */,
BCC0EEAD424E456DA490EE4F /* FontAwesome5_Regular.ttf */,
BDB3D4C6185B4CB69E360505 /* FontAwesome5_Solid.ttf */,
256E5C94D0AC40E381A107A5 /* Fontisto.ttf */,
D3378FED83674C7297D95B3C /* Foundation.ttf */,
CCF85275316C4FA29EBEBEF3 /* Ionicons.ttf */,
37CF45EBB8E541AFB0AEEED1 /* MaterialCommunityIcons.ttf */,
99E0F4267E0B4BB69A5994F3 /* MaterialIcons.ttf */,
006C0665080F4DB581A45597 /* Octicons.ttf */,
00E332BD0E6B4F69AD2BFB66 /* SimpleLineIcons.ttf */,
16C65B2FFA244990A98EED99 /* Zocial.ttf */,
);
name = Resources;
sourceTree = "<group>";
path = "";
};
/* End PBXGroup section */
/* Begin PBXNativeTarget section */
@ -240,7 +297,7 @@
83CBB9F71A601CBA00E9B192 /* Project object */ = {
isa = PBXProject;
attributes = {
LastUpgradeCheck = 0940;
LastUpgradeCheck = 940;
ORGANIZATIONNAME = Facebook;
TargetAttributes = {
00E356ED1AD99517003FC87E = {
@ -293,6 +350,22 @@
files = (
13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */,
4D52FDE523E84B2791C3D67D /* AntDesign.ttf in Resources */,
B90493FFE9264DF5B6CC7C44 /* Entypo.ttf in Resources */,
31DBC812F4DE446B9D3DC7B1 /* EvilIcons.ttf in Resources */,
52508E432BC44BF7A5E64891 /* Feather.ttf in Resources */,
BA64553EADB24FB9AB6E0F82 /* FontAwesome.ttf in Resources */,
42092AB24C2F4A0987A993FA /* FontAwesome5_Brands.ttf in Resources */,
A2E24CE7C18C4CFF97F78377 /* FontAwesome5_Regular.ttf in Resources */,
631DA64D244F4F8F915F2121 /* FontAwesome5_Solid.ttf in Resources */,
369E14D730C449659A20A504 /* Fontisto.ttf in Resources */,
0F7CA4B8C6454C77B1E45705 /* Foundation.ttf in Resources */,
D2D1008687164C9CB74A95D7 /* Ionicons.ttf in Resources */,
659D1586ED4C433BA9DD67DB /* MaterialCommunityIcons.ttf in Resources */,
97EA10A37A0942C0B0FD6C44 /* MaterialIcons.ttf in Resources */,
60D08C8669D9491891F0EAE0 /* Octicons.ttf in Resources */,
157D60FEAF7C49948291342D /* SimpleLineIcons.ttf in Resources */,
31C2D4A00BF24B9989303435 /* Zocial.ttf in Resources */,
);
runOnlyForDeploymentPostprocessing = 0;
};

21
ios/ankilan/Info.plist
View File

@ -38,7 +38,7 @@
</dict>
</dict>
<key>NSLocationWhenInUseUsageDescription</key>
<string></string>
<string/>
<key>UILaunchStoryboardName</key>
<string>LaunchScreen</string>
<key>UIRequiredDeviceCapabilities</key>
@ -53,5 +53,24 @@
</array>
<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>
<key>UIAppFonts</key>
<array>
<string>AntDesign.ttf</string>
<string>Entypo.ttf</string>
<string>EvilIcons.ttf</string>
<string>Feather.ttf</string>
<string>FontAwesome.ttf</string>
<string>FontAwesome5_Brands.ttf</string>
<string>FontAwesome5_Regular.ttf</string>
<string>FontAwesome5_Solid.ttf</string>
<string>Fontisto.ttf</string>
<string>Foundation.ttf</string>
<string>Ionicons.ttf</string>
<string>MaterialCommunityIcons.ttf</string>
<string>MaterialIcons.ttf</string>
<string>Octicons.ttf</string>
<string>SimpleLineIcons.ttf</string>
<string>Zocial.ttf</string>
</array>
</dict>
</plist>

1
package.json
View File

@ -20,6 +20,7 @@
"react-native": "^0.61.5",
"react-native-ankidroid": "^0.4.0",
"react-native-material-textfield": "^0.16.1",
"react-native-vector-icons": "^6.6.0",
"react-redux": "^7.2.0",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",

74
src/components/add-anklan-model.jsx
View File

@ -7,41 +7,49 @@ import DeckPicker from './view/deck-picker';
import AddWordForm from './anki-form';
import AnkiTemplate from './view/add-main-template';
import {Grid, Row} from 'native-base';
import {checkAnkiLanModelForExisting, getDeckList, getModelList} from '../actions/anki-get-actions';
import {
checkAnkiLanModelForExisting,
getDeckList,
getModelList,
} from '../actions/anki-get-actions';
const StartScreen = props => {
useEffect(() => {
props.getDeckList();
props.getModelList();
}, [])
useEffect(() => {
props.checkAnkiLanModelForExisting(props.modelName, props.modelList);
});
return (
<ScrollView>
{props.ankiAvailable ? (
props.ankiLanModelExists ? (
<AddWordForm />
) : (
<AnkiTemplate />
)
) : (
<Permissions />
)}
</ScrollView>
);
useEffect(() => {
props.getDeckList();
props.getModelList();
}, []);
useEffect(() => {
props.checkAnkiLanModelForExisting(
props.modelName,
props.modelList,
);
});
return (
<ScrollView keyboardShouldPersistTaps="handled">
{props.ankiAvailable ? (
props.ankiLanModelExists ? (
<AddWordForm />
) : (
<AnkiTemplate />
)
) : (
<Permissions />
)}
</ScrollView>
);
};
export default connect(
state => ({
ankiAvailable: state.anki.appHasAccess,
ankiLanModelExists: state.anki.ankiLanModelIsAlreadyExists,
modelName: state.anki.ankiLanModelName,
modelList: state.anki.modelList,
creator: state.anki.noteCreator,
}),
{
checkAnkiLanModelForExisting,
getDeckList,
getModelList
})(StartScreen);
state => ({
ankiAvailable: state.anki.appHasAccess,
ankiLanModelExists: state.anki.ankiLanModelIsAlreadyExists,
modelName: state.anki.ankiLanModelName,
modelList: state.anki.modelList,
creator: state.anki.noteCreator,
}),
{
checkAnkiLanModelForExisting,
getDeckList,
getModelList,
},
)(StartScreen);

90
src/components/anki-form.jsx
View File

@ -5,49 +5,61 @@ import {Form, Container, Item} from 'native-base';
import {checkAnkiLanModelForExisting} from '../actions/anki-get-actions';
import InputWord from './view/translatable-word';
import SubmitButton from './view/submit-button';
import {wordInfo} from "../actions/api/dictionary";
import {wordInfo} from '../actions/api/dictionary';
import FieldEditor from './view/field-editor';
const AnkiForm = props => {
const [target, setTarget] = useState('')
const [fields, setFields] = useState({})
useEffect(() => {
// props.wordInfo('Urge');
// props.wordInfo('Maze');
// props.wordInfo('Ramification');
// props.wordInfo('Dare');
// props.wordInfo('Entrepreneurship');
// props.wordInfo('meagre');
// props.wordInfo('meager');
const [target, setTarget] = useState('');
const [fields, setFields] = useState({});
const [submitted, setSubmitted] = useState(true);
useEffect(() => {
// props.wordInfo('Urge');
// props.wordInfo('Maze');
// props.wordInfo('Ramification');
// props.wordInfo('Dare');
// props.wordInfo('Entrepreneurship');
// props.wordInfo('meagre');
// props.wordInfo('meager');
}, []);
const getWord = word => {
setTarget(word);
};
const submit = () => {
props.wordInfo(target);
setSubmitted(true);
console.log(props.data)
};
}, []);
const getWord = (word) => {
setTarget(word)
};
const submit = () => {
props.wordInfo(target);
};
return (
<Container style={{padding: 20}}>
<Form >
<DeckPicker />
<InputWord word={getWord} onSubmit={submit}/>
<SubmitButton onSubmit={submit} />
</Form>
</Container>
);
return (
<Container style={{padding: 20}}>
<Form>
<DeckPicker />
<InputWord word={getWord} onSubmit={submit} />
{submitted ? (
<FieldEditor
data={{
type: 'part of speech',
values: ['1', '2', '3','5',],
}}
/>
) : (
<SubmitButton onSubmit={submit} />
)}
</Form>
</Container>
);
};
export default connect(
state => ({
ankiLanModelExists: state.anki.ankiLanModelIsAlreadyExists,
modelName: state.anki.ankiLanModelName,
modelList: state.anki.modelList,
creator: state.anki.noteCreator,
}),
{
checkAnkiLanModelForExisting,
wordInfo
},
state => ({
ankiLanModelExists: state.anki.ankiLanModelIsAlreadyExists,
modelName: state.anki.ankiLanModelName,
modelList: state.anki.modelList,
creator: state.anki.noteCreator,
data: state
}),
{
checkAnkiLanModelForExisting,
wordInfo,
},
)(AnkiForm);

132
src/components/view/field-editor.jsx Normal file
View File

@ -0,0 +1,132 @@
import React, {useState, useEffect, useRef} from 'react';
import {connect} from 'react-redux';
import TextField from 'react-native-material-textfield/src/components/field';
import {StyleSheet} from 'react-native';
import {View, Text, Button, Picker} from 'native-base';
import Icon from 'react-native-vector-icons/FontAwesome5';
import IconedButton from './iconed-button.jsx';
const FieldEditor = props => {
const [data, setData] = useState({});
const [editing, setEditing] = useState(true);
const label = props.data.label;
const [selectedValue, setSelectedValue] = useState(
props.data.values[0],
);
const [userTyped, setUserTyped] = useState('');
const input = useRef();
useEffect(() => {
setData(props.data);
}, []);
const selectValue = value => {
setSelectedValue(value);
};
const typing = text => {
setUserTyped(text)
};
const confirmTyped = () => {
const values = data.values
setData({...data, values: [...values, userTyped]})
}
const styles = StyleSheet.create({
wrapper: {},
inner: {
display: 'flex',
justifyContent: 'space-between',
flexDirection: 'row',
alignItems: 'center',
alignContent: 'center',
},
row: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
width: 90,
},
button: {
width: 40,
height: 40,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
},
tfWrapper: {
width: editing ? '75%' : '84%',
},
});
return (
<View style={styles.wrapper}>
<Text>{label}</Text>
<View style={styles.inner}>
<View style={styles.tfWrapper}>
{editing ? (
<TextField
multiline={true}
label={data.type}
value={selectedValue}
ref={input}
onChangeText={text =>
typing(text)
}
/>
) : (
<Picker
selectedValue={
selectedValue
}
onValueChange={value =>
selectValue(
value,
)
}>
{data.values.map(
(value, id) => {
return (
<Picker.Item
value={
value
}
label={
value
}
key={
id
}
/>
);
},
)}
</Picker>
)}
</View>
{editing ? (
<View style={styles.row}>
<IconedButton
icon="caret-down"
onPress={() => {
setEditing(
!editing,
);
}}
/>
<IconedButton
icon="check"
onPress={confirmTyped}
/>
</View>
) : (
<IconedButton
icon="pen"
onPress={() => {
setEditing(!editing);
}}
/>
)}
</View>
</View>
);
};
export default connect()(FieldEditor);

26
src/components/view/iconed-button.jsx Normal file
View File

@ -0,0 +1,26 @@
import React, {useState} from 'react';
import TextField from 'react-native-material-textfield/src/components/field';
import {StyleSheet} from 'react-native';
import {View, Text, Button, Picker} from 'native-base';
import Icon from 'react-native-vector-icons/FontAwesome5';
const IconedButton = props => {
return (
<Button bordered style={styles.button} onPress={props.onPress}>
<Icon name={props.icon} size={20} color={'blue'} />
</Button>
);
};
const styles = StyleSheet.create({
button: {
width: 40,
height: 40,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
},
});
export default IconedButton;