diff --git a/App.js b/App.js
index fd1c1ee..ce2b378 100644
--- a/App.js
+++ b/App.js
@@ -3,12 +3,11 @@
* https://github.com/facebook/react-native
*
* @format
- * @flow
*/
import React from 'react';
-import { createAppContainer } from 'react-navigation';
-import { createStackNavigator } from 'react-navigation-stack';
+import {createAppContainer} from 'react-navigation';
+import {createStackNavigator} from 'react-navigation-stack';
import MainScreen from './src/screen/MainScreen';
import CardEditScreen from './src/screen/CardEditScreen';
@@ -18,58 +17,60 @@ import i18n from 'i18n-js';
import en from './src/locales/en';
import ko from './src/locales/ko';
-const MainNavigator = createStackNavigator({
- Home: {
- screen: MainScreen,
- navigationOptions: {headerShown: false}
+const MainNavigator = createStackNavigator(
+ {
+ Home: {
+ screen: MainScreen,
+ navigationOptions: {headerShown: false},
+ },
+ CardEditScreen: {
+ screen: CardEditScreen,
+ navigationOptions: {headerShown: false},
+ },
},
- CardEditScreen: {
- screen: CardEditScreen,
- navigationOptions: {headerShown: false}
+ {
+ initialRouteName: 'Home',
},
- },
- {
- initialRouteName: 'Home',
- }
);
const AppContainer = createAppContainer(MainNavigator);
const setI18nConfig = () => {
- const fallback = { languageTag: 'en' };
- const { languageTag } = RNLocalize.findBestAvailableLanguage(['en', 'ko']) || fallback;
+ const fallback = {languageTag: 'en'};
+ const {languageTag} =
+ RNLocalize.findBestAvailableLanguage(['en', 'ko']) || fallback;
i18n.translations = {
- en,
- ko,
+ en,
+ ko,
};
i18n.locale = languageTag;
};
-export default class App extends React.Component{
- constructor(props) {
- super(props);
- setI18nConfig();
- }
+export default class App extends React.Component {
+ constructor(props) {
+ super(props);
+ setI18nConfig();
+ }
- componentDidMount() {
- RNLocalize.addEventListener('change', this.handleLocalizationChange)
- }
+ componentDidMount() {
+ RNLocalize.addEventListener('change', this.handleLocalizationChange);
+ }
- componentWillUnmount() {
- RNLocalize.removeEventListener('change', this.handleLocalizationChange)
- }
+ componentWillUnmount() {
+ RNLocalize.removeEventListener('change', this.handleLocalizationChange);
+ }
- handleLocalizationChange = () => {
- setI18nConfig();
- this.forceUpdate();
- };
+ handleLocalizationChange = () => {
+ setI18nConfig();
+ this.forceUpdate();
+ };
- render(){
- return (
- <>
-
-
- );
- }
-};
+ render() {
+ return (
+ <>
+
+
+ );
+ }
+}
diff --git a/src/locales/en.js b/src/locales/en.js
index 8475707..7764d1d 100644
--- a/src/locales/en.js
+++ b/src/locales/en.js
@@ -1,39 +1,41 @@
-
export default {
- header_home: 'Home',
- header_add: 'Add',
- header_edit: 'Edit',
+ header_home: 'Home',
+ header_add: 'Add',
+ header_edit: 'Edit',
- main_empty_string: 'Touch + button on top right to add a card',
+ main_empty_string: 'Touch + button on top right to add a card',
- edit_random: 'Random Generate',
- edit_preview: 'Preview',
- edit_sid_notice: 'SID is 16-digit hexadecimal number. Note that it is not a card number!',
+ edit_random: 'Random Generate',
+ edit_preview: 'Preview',
+ edit_sid_notice:
+ 'SID is 16-digit hexadecimal number. Note that it is not a card number!',
- edit_background: 'Background',
- edit_background_empty: 'Touch here to select the background image',
- edit_background_selected: 'The image has been selected',
+ edit_background: 'Background',
+ edit_background_empty: 'Touch here to select the background image',
+ edit_background_selected: 'The image has been selected',
- edit_name: 'Name',
+ edit_name: 'Name',
- alert_delete_title: 'Delete',
- alert_delete_content: 'Do you want to delete this card?',
- alert_delete_yes: 'Yes',
- alert_delete_no: 'No',
+ alert_delete_title: 'Delete',
+ alert_delete_content: 'Do you want to delete this card?',
+ alert_delete_yes: 'Yes',
+ alert_delete_no: 'No',
- alert_save_content: 'Card saved successfully.',
- alert_save_yes: 'OK',
+ alert_save_content: 'Card saved successfully.',
+ alert_save_yes: 'OK',
- alert_not_support_title: 'This device is not supported',
- alert_not_support_content: 'This device does not have the feature to emulate card.',
- alert_not_support_yes: 'OK',
+ alert_not_support_title: 'This device is not supported',
+ alert_not_support_content:
+ 'This device does not have the feature to emulate card.',
+ alert_not_support_yes: 'OK',
- alert_nfc_title: 'NFC is disabled',
- alert_nfc_content: 'NFC is required to emulate card. Please enable NFC in the settings and restart the app.',
- alert_nfc_yes: 'OK',
+ alert_nfc_title: 'NFC is disabled',
+ alert_nfc_content:
+ 'NFC is required to emulate card. Please enable NFC in the settings and restart the app.',
+ alert_nfc_yes: 'OK',
- card_touch_to_enable: 'Touch to enable',
- card_touch_to_disable: 'Touch to disable',
- card_delete: 'Delete',
- card_edit: 'Edit',
-}
+ card_touch_to_enable: 'Touch to enable',
+ card_touch_to_disable: 'Touch to disable',
+ card_delete: 'Delete',
+ card_edit: 'Edit',
+};
diff --git a/src/locales/ko.js b/src/locales/ko.js
index a5aabf7..c5f6123 100644
--- a/src/locales/ko.js
+++ b/src/locales/ko.js
@@ -1,40 +1,40 @@
-
export default {
- header_home: '홈',
- header_add: '카드 추가',
- header_edit: '카드 편집',
+ header_home: '홈',
+ header_add: '카드 추가',
+ header_edit: '카드 편집',
- main_empty_string: '우측 상단의 +를 눌러 카드를 추가해주세요',
+ main_empty_string: '우측 상단의 +를 눌러 카드를 추가해주세요',
- edit_random: '랜덤 생성',
- edit_preview: '미리보기',
- edit_sid_notice: 'SID는 16진수 16자리 입니다. 카드 번호가 아님에 유의하세요!',
+ edit_random: '랜덤 생성',
+ edit_preview: '미리보기',
+ edit_sid_notice: 'SID는 16진수 16자리 입니다. 카드 번호가 아님에 유의하세요!',
- edit_background: '카드 배경',
- edit_background_empty: '여기를 눌러 사진을 선택할 수 있습니다.',
- edit_background_selected: '사진이 선택되었습니다.',
+ edit_background: '카드 배경',
+ edit_background_empty: '여기를 눌러 사진을 선택할 수 있습니다.',
+ edit_background_selected: '사진이 선택되었습니다.',
- edit_name: '카드 이름',
+ edit_name: '카드 이름',
- alert_delete_title: '삭제',
- alert_delete_content: '카드를 삭제하시겠습니까?',
- alert_delete_yes: '예',
- alert_delete_no: '아니오',
+ alert_delete_title: '삭제',
+ alert_delete_content: '카드를 삭제하시겠습니까?',
+ alert_delete_yes: '예',
+ alert_delete_no: '아니오',
- alert_save_content: '카드를 저장했습니다.',
- alert_save_yes: '확인',
+ alert_save_content: '카드를 저장했습니다.',
+ alert_save_yes: '확인',
- alert_not_support_title: '이 기기는 지원되지 않습니다.',
- alert_not_support_content: '이 기기는 카드를 에뮬레이션 하기 위해 필요한 기능을 가지고 있지 않습니다.',
- alert_not_support_yes: '확인',
+ alert_not_support_title: '이 기기는 지원되지 않습니다.',
+ alert_not_support_content:
+ '이 기기는 카드를 에뮬레이션 하기 위해 필요한 기능을 가지고 있지 않습니다.',
+ alert_not_support_yes: '확인',
- alert_nfc_title: 'NFC가 활성화 되어있지 않습니다.',
- alert_nfc_content: '카드를 에뮬레이션 하기 위해서 NFC가 필요합니다. 설정에서 NFC를 활성화하고 앱을 재실행해주세요.',
- alert_nfc_yes: '확인',
-
- card_touch_to_enable: '터치하여 활성화',
- card_touch_to_disable: '터치하여 비활성화',
- card_delete: '삭제',
- card_edit: '편집',
-}
+ alert_nfc_title: 'NFC가 활성화 되어있지 않습니다.',
+ alert_nfc_content:
+ '카드를 에뮬레이션 하기 위해서 NFC가 필요합니다. 설정에서 NFC를 활성화하고 앱을 재실행해주세요.',
+ alert_nfc_yes: '확인',
+ card_touch_to_enable: '터치하여 활성화',
+ card_touch_to_disable: '터치하여 비활성화',
+ card_delete: '삭제',
+ card_edit: '편집',
+};
diff --git a/src/screen/CardEditScreen.js b/src/screen/CardEditScreen.js
index 1df8d43..f5d7281 100644
--- a/src/screen/CardEditScreen.js
+++ b/src/screen/CardEditScreen.js
@@ -1,19 +1,19 @@
import React from 'react';
import {
- View,
- Text,
- StatusBar,
- SafeAreaView,
- ScrollView,
- TouchableOpacity,
- Dimensions,
- ImageBackground,
- findNodeHandle,
- Alert,
- StyleSheet,
- Image,
- KeyboardAvoidingView,
- TextInput,
+ View,
+ Text,
+ StatusBar,
+ SafeAreaView,
+ ScrollView,
+ TouchableOpacity,
+ Dimensions,
+ ImageBackground,
+ findNodeHandle,
+ Alert,
+ StyleSheet,
+ Image,
+ KeyboardAvoidingView,
+ TextInput,
} from 'react-native';
import update from 'react-addons-update';
import Icon from 'react-native-vector-icons/MaterialIcons';
@@ -22,368 +22,547 @@ import CardConv from '../module/CardConv';
import i18n from 'i18n-js';
class CardPreview extends React.Component {
- render() {
- let cardContent = (
-
-
-
-
- {this.props.name}
-
-
-
- {this.props.uid ?
- this.props.uid.substr(0,4)+'-'+this.props.uid.substr(4,4)+'-'+this.props.uid.substr(8,4)+'-'+this.props.uid.substr(12,4)
- : ''
- }
-
-
- {i18n.t('card_touch_to_enable')}
-
-
-
-
-
-
-
- {i18n.t('card_edit')}
-
-
-
- {i18n.t('card_delete')}
-
-
+ render() {
+ let cardContent = (
+
+
+
+
+ {this.props.name}
+
+
+
+ {this.props.uid
+ ? this.props.uid.substr(0, 4) +
+ '-' +
+ this.props.uid.substr(4, 4) +
+ '-' +
+ this.props.uid.substr(8, 4) +
+ '-' +
+ this.props.uid.substr(12, 4)
+ : ''}
+
+
+ {i18n.t('card_touch_to_enable')}
+
- )
- return (
-
- {this.props.image ? (
-
- {cardContent}
-
- ) : (
-
- {cardContent}
-
- )}
-
- );
- }
+
+
+
+
+
+
+ {i18n.t('card_edit')}
+
+
+
+
+
+ {i18n.t('card_delete')}
+
+
+
+
+ );
+ return (
+
+ {this.props.image ? (
+
+ {cardContent}
+
+ ) : (
+
+ {cardContent}
+
+ )}
+
+ );
+ }
}
class ETextInput extends React.Component {
- state = {
- focused: false,
- value: this.props.value ?? '',
- };
+ state = {
+ focused: false,
+ value: this.props.value ?? '',
+ };
- onFocusCallback(){
- this.setState({focused: true});
- if(typeof this.props.onFocus === 'function')
- this.props.onFocus();
+ onFocusCallback() {
+ this.setState({focused: true});
+ if (typeof this.props.onFocus === 'function') {
+ this.props.onFocus();
}
+ }
- onBlurCallback(){
- this.setState({focused: false});
- if(typeof this.props.onBlur === 'function')
- this.props.onBlur();
+ onBlurCallback() {
+ this.setState({focused: false});
+ if (typeof this.props.onBlur === 'function') {
+ this.props.onBlur();
}
+ }
- onChangeTextCallback(text){
- if(typeof this.props.filter === 'function')
- text = this.props.filter(text);
- if(typeof this.props.onChangeText === 'function')
- this.props.onChangeText(text);
+ onChangeTextCallback(text) {
+ if (typeof this.props.filter === 'function') {
+ text = this.props.filter(text);
}
-
- focus(){
- this.textInput.focus();
+ if (typeof this.props.onChangeText === 'function') {
+ this.props.onChangeText(text);
}
+ }
- render() {
- return (
-
-
- {this.props.title}
-
+ focus() {
+ this.textInput.focus();
+ }
- this.onFocusCallback()}
- onBlur={() => this.onBlurCallback()}
- onChangeText={text => this.onChangeTextCallback(text)}
- editable={this.props.editable}
- maxLength={this.props.maxLength}
- autoCapitalize={this.props.autoCapitalize}
- ref={ref => this.textInput = ref}
- >
-
-
-
- )
- }
+ render() {
+ return (
+
+
+ {this.props.title}
+
+
+ this.onFocusCallback()}
+ onBlur={() => this.onBlurCallback()}
+ onChangeText={text => this.onChangeTextCallback(text)}
+ editable={this.props.editable}
+ maxLength={this.props.maxLength}
+ autoCapitalize={this.props.autoCapitalize}
+ ref={ref => (this.textInput = ref)}
+ />
+
+
+ );
+ }
}
class CardEditScreen extends React.Component {
- state = {
- name: this.props.navigation.getParam('name', ''),
- sidAll: this.props.navigation.getParam('sid', '02FE'),
- sid2: '',
- sid3: '',
- sid4: '',
- uid: '',
- sidError: false,
+ state = {
+ name: this.props.navigation.getParam('name', ''),
+ sidAll: this.props.navigation.getParam('sid', '02FE'),
+ sid2: '',
+ sid3: '',
+ sid4: '',
+ uid: '',
+ sidError: false,
- image: this.props.navigation.getParam('image', ''),
- index: this.props.navigation.getParam('index', null), // null 이면 카드 새로 생성
- mode: '',
+ image: this.props.navigation.getParam('image', ''),
+ index: this.props.navigation.getParam('index', null), // null 이면 카드 새로 생성
+ mode: '',
- update: this.props.navigation.getParam('update', null),
+ update: this.props.navigation.getParam('update', null),
- cardFocused: 'false',
+ cardFocused: 'false',
+ };
+
+ componentDidMount(): void {
+ let {height, width} = Dimensions.get('window');
+
+ function randomHex4Byte() {
+ let hexString = Math.min(
+ Math.floor(Math.random() * 65536),
+ 65535,
+ ).toString(16);
+
+ if (hexString.length < 4) {
+ hexString = '0'.repeat(4 - hexString.length) + hexString;
+ }
+
+ return hexString.toUpperCase();
}
- componentDidMount(): void {
- let {height, width} = (Dimensions.get('window'));
-
- function randomHex4Byte(){
- let hexString = Math.min(Math.floor(Math.random() * 65536), 65535).toString(16);
-
- if(hexString.length < 4)
- hexString = '0'.repeat(4 - hexString.length) + hexString;
-
- return hexString.toUpperCase();
- }
-
-
- if(this.state.index === null){
- this.setState({mode: 'add', sid2: randomHex4Byte(), sid3: randomHex4Byte(), sid4: randomHex4Byte(), cardHeight: (width - 48) * 53.98 / 85.60,},
- () => this.updateSID());
- }
- else{
- this.setState({
- mode: 'edit',
- sid2: this.state.sidAll.substr(4, 4),
- sid3: this.state.sidAll.substr(8, 4),
- sid4: this.state.sidAll.substr(12, 4),
- cardHeight: (width - 48) * 53.98 / 85.60,
- }, () => {
- this.updateSID();
- });
- }
-
- this.nameInput.focus();
+ if (this.state.index === null) {
+ this.setState(
+ {
+ mode: 'add',
+ sid2: randomHex4Byte(),
+ sid3: randomHex4Byte(),
+ sid4: randomHex4Byte(),
+ cardHeight: ((width - 48) * 53.98) / 85.6,
+ },
+ () => this.updateSID(),
+ );
+ } else {
+ this.setState(
+ {
+ mode: 'edit',
+ sid2: this.state.sidAll.substr(4, 4),
+ sid3: this.state.sidAll.substr(8, 4),
+ sid4: this.state.sidAll.substr(12, 4),
+ cardHeight: ((width - 48) * 53.98) / 85.6,
+ },
+ () => {
+ this.updateSID();
+ },
+ );
}
- makeSid(){
- let sid = '02FE' + this.state.sid2 + this.state.sid3 + this.state.sid4;
- sid = sid.toUpperCase();
- if(sid.length !== 16){
- return '';
- }
- if(sid.replace(/[^0-9A-F]/g, '') !== sid){
- return '';
- }
+ this.nameInput.focus();
+ }
- return sid;
+ makeSid() {
+ let sid = '02FE' + this.state.sid2 + this.state.sid3 + this.state.sid4;
+ sid = sid.toUpperCase();
+ if (sid.length !== 16) {
+ return '';
+ }
+ if (sid.replace(/[^0-9A-F]/g, '') !== sid) {
+ return '';
}
- async updateSID(){
- if(this.makeSid() !== ''){
- let uid = await CardConv.convertSID(this.makeSid());
- this.setState({uid: uid});
- }
+ return sid;
+ }
+
+ async updateSID() {
+ if (this.makeSid() !== '') {
+ let uid = await CardConv.convertSID(this.makeSid());
+ this.setState({uid: uid});
+ }
+ }
+
+ saveCard() {
+ let sid = this.makeSid();
+
+ if (sid === '') {
+ this.setState({sidError: true});
+ return;
}
- saveCard(){
- let sid = this.makeSid();
+ if (typeof this.state.update === 'function') {
+ this.state.update(
+ this.state.name,
+ sid,
+ this.state.index,
+ this.state.image,
+ this.props.navigation,
+ );
+ }
+ }
- if(sid === ''){
- this.setState({sidError: true});
- return ;
- }
+ setRandomSid() {
+ function randomHex4Byte() {
+ let hexString = Math.min(
+ Math.floor(Math.random() * 65536),
+ 65535,
+ ).toString(16);
- if(typeof this.state.update === 'function'){
- this.state.update(this.state.name, sid, this.state.index, this.state.image, this.props.navigation);
- }
+ if (hexString.length < 4) {
+ hexString = '0'.repeat(4 - hexString.length) + hexString;
+ }
+
+ return hexString.toUpperCase();
}
- setRandomSid(){
- function randomHex4Byte(){
- let hexString = Math.min(Math.floor(Math.random() * 65536), 65535).toString(16);
+ this.setState(
+ {sid2: randomHex4Byte(), sid3: randomHex4Byte(), sid4: randomHex4Byte()},
+ () => this.updateSID(),
+ );
+ }
- if(hexString.length < 4)
- hexString = '0'.repeat(4 - hexString.length) + hexString;
+ selectPhoto() {
+ ImagePicker.openPicker({
+ cropping: true,
+ width: 856,
+ height: 540,
+ mediaType: 'photo',
+ }).then(res => {
+ if (res && res.path) {
+ this.setState({image: res.path});
+ }
+ });
+ }
- return hexString.toUpperCase();
- }
+ render() {
+ return (
+
+
+
+
+
+
+ {this.state.mode === 'add'
+ ? i18n.t('header_add')
+ : i18n.t('header_edit')}
+
- this.setState({sid2: randomHex4Byte(), sid3: randomHex4Byte(), sid4: randomHex4Byte()}, () => this.updateSID());
- }
+ this.saveCard()}>
+
+
+
+
+
+ this.setState({name: text})}
+ ref={ref => (this.nameInput = ref)}
+ />
+ this.selectPhoto()}>
+
+
- selectPhoto(){
- ImagePicker.openPicker({
- cropping: true,
- width: 856,
- height: 540,
- mediaType: 'photo',
- }).then(res => {
- if(res && res.path){
- this.setState({image: res.path,});
- }
- });
- }
+
+ this.setState({sid: text})}
+ style={{flex: 1}}
+ editable={false}
+ error={this.state.sidError}
+ textStyle={{textAlign: 'center'}}
+ titleStyle={
+ this.state.sidError !== true &&
+ this.state.sidFocus && {color: '#03A9F4'}
+ }
+ />
+
+ -
+
+ {
+ this.setState({sid2: text}, () => this.updateSID());
+ if (text.length === 4) {
+ this.sid3Input.focus();
+ }
+ }}
+ style={{flex: 1}}
+ maxLength={4}
+ error={this.state.sidError}
+ onFocus={() => this.setState({sidFocus: true})}
+ onBlur={() => this.setState({sidFocus: false})}
+ autoCapitalize={'characters'}
+ ref={ref => (this.sid2Input = ref)}
+ editable={false}
+ />
+
+ -
+
+ {
+ this.setState({sid3: text}, () => this.updateSID());
+ if (text.length === 4) {
+ this.sid4Input.focus();
+ }
+ }}
+ style={{flex: 1}}
+ maxLength={4}
+ error={this.state.sidError}
+ onFocus={() => this.setState({sidFocus: true})}
+ onBlur={() => this.setState({sidFocus: false})}
+ autoCapitalize={'characters'}
+ ref={ref => (this.sid3Input = ref)}
+ editable={false}
+ />
+
+ -
+
+ {
+ this.setState({sid4: text}, () => this.updateSID());
+ this.updateSID();
+ }}
+ style={{flex: 1}}
+ error={this.state.sidError}
+ maxLength={4}
+ onFocus={() => this.setState({sidFocus: true})}
+ onBlur={() => this.setState({sidFocus: false})}
+ autoCapitalize={'characters'}
+ ref={ref => (this.sid4Input = ref)}
+ editable={false}
+ />
+
+
+ {i18n.t('edit_sid_notice')}
+
+ this.setRandomSid()}>
+
+ {i18n.t('edit_random')}
+
+
- render() {
- return (
-
-
-
-
-
-
- {this.state.mode === 'add' ? i18n.t('header_add') : i18n.t('header_edit')}
-
+
+ {i18n.t('edit_preview')}
+
+
- this.saveCard()}
- >
-
-
-
-
-
- this.setState({name: text})} ref={ref => this.nameInput = ref}/>
- this.selectPhoto()}>
-
-
-
-
- this.setState({sid: text})}
- style={{flex: 1,}}
- editable={false}
- error={this.state.sidError}
- textStyle={{textAlign:'center',}}
- titleStyle={this.state.sidError !== true && this.state.sidFocus && {color: '#03A9F4'}}
- />
- -
- {this.setState({sid2: text}, () => this.updateSID()); if(text.length === 4) this.sid3Input.focus(); }}
- style={{flex: 1,}}
- maxLength={4}
- error={this.state.sidError}
- onFocus={() => this.setState({sidFocus: true})}
- onBlur={() => this.setState({sidFocus: false})}
- autoCapitalize={'characters'}
- ref={ref => this.sid2Input = ref}
- editable={false}
- />
- -
- {this.setState({sid3: text}, () => this.updateSID()); if(text.length === 4) this.sid4Input.focus();}}
- style={{flex: 1,}}
- maxLength={4}
- error={this.state.sidError}
- onFocus={() => this.setState({sidFocus: true})}
- onBlur={() => this.setState({sidFocus: false})}
- autoCapitalize={'characters'}
- ref={ref => this.sid3Input = ref}
- editable={false}
- />
- -
- {this.setState({sid4: text}, () => this.updateSID()); this.updateSID();}}
- style={{flex: 1,}}
- error={this.state.sidError}
- maxLength={4}
- onFocus={() => this.setState({sidFocus: true})}
- onBlur={() => this.setState({sidFocus: false})}
- autoCapitalize={'characters'}
- ref={ref => this.sid4Input = ref}
- editable={false}
- />
-
-
- {i18n.t('edit_sid_notice')}
-
- this.setRandomSid()}
- >
- {i18n.t('edit_random')}
-
-
- {i18n.t('edit_preview')}
-
-
-
-
-
-
- )
- }
+
+
+
+
+ );
+ }
}
export default CardEditScreen;
diff --git a/src/screen/MainScreen.js b/src/screen/MainScreen.js
index 07ac990..af89ae2 100644
--- a/src/screen/MainScreen.js
+++ b/src/screen/MainScreen.js
@@ -1,17 +1,17 @@
import React from 'react';
import {
- View,
- Text,
- StatusBar,
- SafeAreaView,
- ScrollView,
- TouchableOpacity,
- Dimensions,
- ImageBackground,
- findNodeHandle,
- Alert,
- StyleSheet,
- Image,
+ View,
+ Text,
+ StatusBar,
+ SafeAreaView,
+ ScrollView,
+ TouchableOpacity,
+ Dimensions,
+ ImageBackground,
+ findNodeHandle,
+ Alert,
+ StyleSheet,
+ Image,
} from 'react-native';
import update from 'react-addons-update';
import Hcef from '../module/Hcef';
@@ -20,293 +20,397 @@ import AsyncStorage from '@react-native-community/async-storage';
import Icon from 'react-native-vector-icons/MaterialIcons';
import i18n from 'i18n-js';
-
const RNFS = require('react-native-fs');
class Card extends React.Component {
- async onPress() {
- this.props.onPress(this.props.card, this.props.index);
+ async onPress() {
+ this.props.onPress(this.props.card, this.props.index);
+ }
+
+ async disable() {
+ if (typeof this.props.disableCallback === 'function') {
+ this.props.disableCallback(this.props.card, this.props.index);
}
+ }
- async disable(){
- if(typeof this.props.disableCallback === 'function')
- this.props.disableCallback(this.props.card, this.props.index);
- }
+ render() {
+ let cardContent = (
+
+
+
+
+ {this.props.card.name}
+
- render() {
- let cardContent = (
-
-
-
-
- {this.props.card.name}
-
-
-
-
- {this.props.card.uid.substr(0,4)+'-'+this.props.card.uid.substr(4,4)+'-'+this.props.card.uid.substr(8,4)+'-'+this.props.card.uid.substr(12,4)}
-
-
- {this.props.card.enabled ? i18n.t('card_touch_to_disable') : i18n.t('card_touch_to_enable')}
-
-
-
-
-
-
- this.props.navigation.navigate('CardEditScreen', {name: this.props.card.name, sid: this.props.card.sid, image: this.props.card.image, index: this.props.index, update: this.props.update})}>
- {i18n.t('card_edit')}
-
-
- this.props.delete(this.props.index)}>
- {i18n.t('card_delete')}
-
-
+
+
+ {this.props.card.uid.substr(0, 4) +
+ '-' +
+ this.props.card.uid.substr(4, 4) +
+ '-' +
+ this.props.card.uid.substr(8, 4) +
+ '-' +
+ this.props.card.uid.substr(12, 4)}
+
+
+ {this.props.card.enabled
+ ? i18n.t('card_touch_to_disable')
+ : i18n.t('card_touch_to_enable')}
+
- );
+
+
+
+
+
+ this.props.navigation.navigate('CardEditScreen', {
+ name: this.props.card.name,
+ sid: this.props.card.sid,
+ image: this.props.card.image,
+ index: this.props.index,
+ update: this.props.update,
+ })
+ }>
+
+ {i18n.t('card_edit')}
+
+
+
+ this.props.delete(this.props.index)}>
+
+ {i18n.t('card_delete')}
+
+
+
+
+ );
- return (
-
- {this.props.card.image ? (
-
- {cardContent}
-
- ) : (
-
- {cardContent}
-
- )}
-
- );
- }
+ },
+ ]}>
+ {this.props.card.image ? (
+
+ {cardContent}
+
+ ) : (
+
+ {cardContent}
+
+ )}
+
+ );
+ }
}
class MainScreen extends React.Component {
- state = {
- cards: [],
- cardHeight: 1,
- support: false,
- };
+ state = {
+ cards: [],
+ cardHeight: 1,
+ support: false,
+ };
- async loadCards(){
- let cardsJson = await AsyncStorage.getItem('cards');
- this.setState({cards: cardsJson ? JSON.parse(cardsJson) : []});
+ async loadCards() {
+ let cardsJson = await AsyncStorage.getItem('cards');
+ this.setState({cards: cardsJson ? JSON.parse(cardsJson) : []});
+ }
+
+ componentDidMount() {
+ this.prevCard = null;
+ this.prevIndex = -1;
+ this.loadCards();
+
+ if (Hcef.support !== true) {
+ Alert.alert(
+ i18n.t('alert_not_support_title'),
+ i18n.t('alert_not_support_content'),
+ [{text: i18n.t('alert_not_support_yes')}],
+ );
+ } else if (Hcef.enabled !== true) {
+ Alert.alert(i18n.t('alert_nfc_title'), i18n.t('alert_nfc_content'), [
+ {text: i18n.t('alert_nfc_yes')},
+ ]);
}
- componentDidMount(){
- this.prevCard = null;
- this.prevIndex = -1;
- this.loadCards();
+ if (Hcef.support && Hcef.enabled) {
+ Hcef.disableService(); // 카드를 활성화하지 않았는데도 카드가 에뮬되는 이슈 방지
+ }
- if(Hcef.support !== true){
- Alert.alert(i18n.t('alert_not_support_title'), i18n.t('alert_not_support_content'),
- [{text: i18n.t('alert_not_support_yes')}]);
- }
- else if(Hcef.enabled !== true){
- Alert.alert(i18n.t('alert_nfc_title'), i18n.t('alert_nfc_content'),
- [{text: i18n.t('alert_nfc_yes')}]);
- }
+ let {height, width} = Dimensions.get('window');
- if(Hcef.support && Hcef.enabled){
- Hcef.disableService(); // 카드를 활성화하지 않았는데도 카드가 에뮬되는 이슈 방지
- }
+ this.setState({
+ cardHeight: ((width - 48) * 53.98) / 85.6,
+ });
+ }
- let {height, width} = (Dimensions.get('window'));
+ async switch(card, index) {
+ if (!Hcef.support || !Hcef.enabled) {
+ return;
+ }
+ if (card.enabled === true) {
+ this.disable(card, index);
+ } else {
+ this.enable(card, index);
+ }
+ }
+
+ async enable(card, index) {
+ if (this.prevCard && this.prevCard.enabled) {
+ await this.disable(this.prevCard, this.prevIndex);
+ }
+
+ let ret = false;
+ let ret2 = false;
+
+ ret = await Hcef.setSID(card.sid);
+ if (ret) {
+ ret2 = await Hcef.enableService();
+ }
+
+ if (ret && ret2) {
+ this.prevCard = card;
+ this.prevCard.enabled = true;
+ this.prevIndex = index;
+ this.setState({
+ cards: update(this.state.cards, {[index]: {enabled: {$set: true}}}),
+ });
+ }
+ }
+
+ async disable(card, index) {
+ if (card.enabled) {
+ let ret = await Hcef.disableService();
+ if (ret) {
+ card.enabled = false;
this.setState({
- cardHeight: (width - 48) * 53.98 / 85.60
+ cards: update(this.state.cards, {[index]: {enabled: {$set: false}}}),
});
+ return true;
+ }
+ }
+ return false;
+ }
+
+ async cardListUpdate(name, sid, index, image, navigation) {
+ let uid = await CardConv.convertSID(sid);
+ let internalPath = '';
+
+ if (image !== '') {
+ internalPath = RNFS.DocumentDirectoryPath + '/' + new Date().valueOf();
+
+ if (image.startsWith('file://')) {
+ image = image.replace('file://', '');
+ }
+
+ await RNFS.copyFile(image, internalPath);
+
+ internalPath = 'file://' + internalPath;
}
- async switch(card, index){
- if(!Hcef.support || !Hcef.enabled) return;
-
- if(card.enabled === true)
- this.disable(card, index);
- else
- this.enable(card, index);
+ if (index === null) {
+ this.setState(
+ {
+ cards: update(this.state.cards, {
+ $push: [{name: name, sid: sid, uid: uid, image: internalPath}],
+ }),
+ },
+ async () => {
+ await AsyncStorage.setItem('cards', JSON.stringify(this.state.cards));
+ },
+ );
+ } else {
+ this.setState(
+ {
+ cards: update(this.state.cards, {
+ [index]: {
+ name: {$set: name},
+ sid: {$set: sid},
+ uid: {$set: uid},
+ image: {$set: internalPath},
+ },
+ }),
+ },
+ async () => {
+ await AsyncStorage.setItem('cards', JSON.stringify(this.state.cards));
+ },
+ );
}
- async enable(card, index){
- if(this.prevCard && this.prevCard.enabled) {
- await this.disable(this.prevCard, this.prevIndex);
- }
+ Alert.alert('', i18n.t('alert_save_content'), [
+ {
+ text: i18n.t('alert_save_yes'),
+ onPress: () => {
+ navigation.goBack();
+ },
+ },
+ ]);
+ }
- let ret = false;
- let ret2 = false;
+ cardListDelete(index) {
+ Alert.alert(i18n.t('alert_delete_title'), i18n.t('alert_delete_content'), [
+ {text: i18n.t('alert_delete_no')},
+ {
+ text: i18n.t('alert_delete_yes'),
+ onPress: () => {
+ if (this.state.cards[index].image !== '') {
+ RNFS.unlink(this.state.cards[index].image);
+ }
+ this.setState(
+ {
+ cards: update(this.state.cards, {
+ $splice: [[index, 1]],
+ }),
+ },
+ async () => {
+ await AsyncStorage.setItem(
+ 'cards',
+ JSON.stringify(this.state.cards),
+ );
+ },
+ );
+ },
+ },
+ ]);
+ }
- ret = await Hcef.setSID(card.sid);
- if(ret){
- ret2 = await Hcef.enableService();
- }
+ render() {
+ let cardWidget = [];
- if(ret && ret2){
- this.prevCard = card;
- this.prevCard.enabled = true;
- this.prevIndex = index;
- this.setState({cards: update(this.state.cards, { [index]: { enabled: { $set: true } }})});
- }
- }
+ this.state.cards.forEach((card, index) => {
+ cardWidget.push(
+ this.switch(card, index)}
+ cardHeight={this.state.cardHeight}
+ disableCallback={(card, index) => this.disable(card, index)}
+ update={(name, sid, index, image, navigation) =>
+ this.cardListUpdate(name, sid, index, image, navigation)
+ }
+ delete={index => this.cardListDelete(index)}
+ navigation={this.props.navigation}
+ />,
+ );
+ });
- async disable(card, index){
- if(card.enabled){
- let ret = await Hcef.disableService();
- if(ret){
- card.enabled = false;
- this.setState({cards: update(this.state.cards, { [index]: { enabled: { $set: false } }})});
- return true;
- }
- }
- return false;
- }
+ return (
+
+
+
+
+
+ {i18n.t('header_home')}
+
- async cardListUpdate(name, sid, index, image, navigation){
- let uid = await CardConv.convertSID(sid);
- let internalPath = '';
+
+ this.props.navigation.navigate('CardEditScreen', {
+ update: (name, sid, index, image, navigation) =>
+ this.cardListUpdate(name, sid, index, image, navigation),
+ })
+ }>
+
+
+
+
- if(image !== ''){
- internalPath = RNFS.DocumentDirectoryPath + '/' + new Date().valueOf();
-
- if(image.startsWith('file://')){
- image = image.replace("file://",'');
- }
-
- await RNFS.copyFile(image, internalPath);
-
- internalPath = 'file://' + internalPath;
- }
-
- if(index === null){
- this.setState({cards: update(this.state.cards, { $push: [{name: name, sid: sid, uid: uid, image: internalPath}]})},
- async () => {
- await AsyncStorage.setItem('cards', JSON.stringify(this.state.cards));
- });
- }
- else{
- this.setState({cards: update(this.state.cards, { [index]: { name: {$set: name}, sid: {$set: sid}, uid: {$set: uid}, image: {$set: internalPath} }})},
- async () =>{
- await AsyncStorage.setItem('cards', JSON.stringify(this.state.cards));
- });
- }
-
- Alert.alert("", i18n.t('alert_save_content'),
- [{text: i18n.t('alert_save_yes'), onPress: () => {navigation.goBack();}}]);
- }
-
- cardListDelete(index){
- Alert.alert(i18n.t('alert_delete_title'),i18n.t('alert_delete_content')
- , [
- {text: i18n.t('alert_delete_no')},
- {text: i18n.t('alert_delete_yes'), onPress: () => {
- if(this.state.cards[index].image !== '' ){
- RNFS.unlink(this.state.cards[index].image);
- }
- this.setState({
- cards: update(this.state.cards, {
- $splice: [[index, 1]]
- })
- }, async () => {
- await AsyncStorage.setItem('cards', JSON.stringify(this.state.cards));
- }
- );
- }}]
- );
- }
-
- render() {
- let cardWidget = [];
-
- this.state.cards.forEach((card, index) => {
- cardWidget.push(
- this.switch(card, index)} cardHeight={this.state.cardHeight}
- disableCallback={(card, index) => this.disable(card, index)}
- update={(name, sid, index, image, navigation) => this.cardListUpdate(name, sid, index, image, navigation)}
- delete={(index) => this.cardListDelete(index)}
- navigation={this.props.navigation}
- />);
- });
-
- return (
-
-
-
-
-
- {i18n.t('header_home')}
-
-
- this.props.navigation.navigate('CardEditScreen',{ update:(name, sid, index, image, navigation) => this.cardListUpdate(name, sid, index, image, navigation)})}
- >
-
-
-
-
-
- {this.state.cards && this.state.cards.length > 0 ? (
-
- {cardWidget}
-
- ) : (
-
- {i18n.t('main_empty_string')}
-
- )
- }
-
-
- )
- }
+ {this.state.cards && this.state.cards.length > 0 ? (
+ {cardWidget}
+ ) : (
+
+
+ {i18n.t('main_empty_string')}
+
+
+ )}
+
+ );
+ }
}
export default MainScreen;