diff --git a/src/components/basicHeader/view/basicHeaderView.js b/src/components/basicHeader/view/basicHeaderView.js index 716112bf8..2e289265d 100644 --- a/src/components/basicHeader/view/basicHeaderView.js +++ b/src/components/basicHeader/view/basicHeaderView.js @@ -74,7 +74,6 @@ class BasicHeaderView extends Component { isLoading, isLoggedIn, isModalHeader, - isPostSending, rightButtonText, isPreviewActive, isReply, diff --git a/src/components/transferFormItem/index.js b/src/components/transferFormItem/index.js new file mode 100644 index 000000000..395eb9155 --- /dev/null +++ b/src/components/transferFormItem/index.js @@ -0,0 +1 @@ +export { default as TransferFormItem } from './view/transferFormItemView'; diff --git a/src/components/transferFormItem/view/transferFormItemStyles.js b/src/components/transferFormItem/view/transferFormItemStyles.js new file mode 100644 index 000000000..27d2511c6 --- /dev/null +++ b/src/components/transferFormItem/view/transferFormItemStyles.js @@ -0,0 +1,17 @@ +import EStyleSheet from 'react-native-extended-stylesheet'; + +export default EStyleSheet.create({ + container: { + flexDirection: 'row', + paddingHorizontal: 20, + }, + leftPart: { + flex: 1, + padding: 10, + justifyContent: 'center', + }, + rightPart: { + flex: 2, + padding: 10, + }, +}); diff --git a/src/components/transferFormItem/view/transferFormItemView.js b/src/components/transferFormItem/view/transferFormItemView.js new file mode 100644 index 000000000..d53dfd7f5 --- /dev/null +++ b/src/components/transferFormItem/view/transferFormItemView.js @@ -0,0 +1,17 @@ +import React from 'react'; +import { View, Text } from 'react-native'; +import styles from './transferFormItemStyles'; + +/* Props + * ------------------------------------------------ + * @prop { type } name - Description.... + */ + +const TransferFormItemView = ({ rightComponent, label }) => ( + + {label && {label}} + {rightComponent && rightComponent()} + +); + +export default TransferFormItemView; diff --git a/src/config/locales/en-US.json b/src/config/locales/en-US.json index 2f1819f9a..c15d0bfec 100644 --- a/src/config/locales/en-US.json +++ b/src/config/locales/en-US.json @@ -164,7 +164,8 @@ "cancel": "Cancel", "delete": "Delete", "copied": "Copied!", - "no_internet": "No connection!" + "no_internet": "No connection!", + "confirm": "Confirm" }, "post": { "reblog_alert": "Are you sure you want to reblog?" @@ -231,5 +232,17 @@ "reputation": "reputation", "votes": "votes", "age": "age" + }, + "transfer": { + "title": "Transfer To Account", + "from": "From", + "to": "To", + "amount": "Amount", + "memo": "Memo", + "information": "1", + "amount_desc": "2", + "memo_desc": "This memo is public", + "to_placeholder": "3", + "memo_placeholder": "4" } } diff --git a/src/screens/transfer/container/transferContainer.js b/src/screens/transfer/container/transferContainer.js index a89775606..45d8c0984 100644 --- a/src/screens/transfer/container/transferContainer.js +++ b/src/screens/transfer/container/transferContainer.js @@ -2,6 +2,7 @@ import React, { Component } from 'react'; import { connect } from 'react-redux'; // Services and Actions +import { lookupAccounts } from '../../../providers/steem/dsteem'; // Middleware @@ -27,15 +28,30 @@ class ExampleContainer extends Component { // Component Life Cycle Functions // Component Functions + _getAccountsWithUsername = async (username) => { + const validUsers = await lookupAccounts(username); + return validUsers; + }; + + _transferToAccount = (from, destination, amount, memo) => { + console.log('from, destination, amount, memo, :', from, destination, amount, memo); + }; render() { - // eslint-disable-next-line - const {} = this.props; + const { accounts } = this.props; - return ; + return ( + + ); } } -const mapStateToProps = state => ({}); +const mapStateToProps = state => ({ + accounts: state.account.otherAccounts, +}); export default connect(mapStateToProps)(ExampleContainer); diff --git a/src/screens/transfer/screen/transferScreen.js b/src/screens/transfer/screen/transferScreen.js index 51f452def..a246f8ed5 100644 --- a/src/screens/transfer/screen/transferScreen.js +++ b/src/screens/transfer/screen/transferScreen.js @@ -1,12 +1,170 @@ -import React from 'react'; -import { Text } from 'react-native'; -import styles from './transferStyles'; +/* eslint-disable no-restricted-globals */ +import React, { Fragment, Component } from 'react'; +import { Text, View } from 'react-native'; +import ActionSheet from 'react-native-actionsheet'; +import { injectIntl } from 'react-intl'; +import { BasicHeader } from '../../../components/basicHeader'; +import { TextInput } from '../../../components/textInput'; +import { TransferFormItem } from '../../../components/transferFormItem'; +import { MainButton } from '../../../components/mainButton'; +import { DropdownButton } from '../../../components/dropdownButton'; +import { UserAvatar } from '../../../components/userAvatar'; +import { Icon } from '../../../components/icon'; + +import styles from './transferStyles'; /* Props * ------------------------------------------------ * @prop { type } name - Description.... */ -const TransferView = ({ x, y, z }) => test; +class TransferView extends Component { + constructor(props) { + super(props); + this.state = { + from: props.accounts[0].username, + destination: '', + amount: '', + memo: '', + isUsernameValid: false, + }; + } -export default TransferView; + // Component Life Cycles + + // Component Functions + _setState = (key, value) => { + const { getAccountsWithUsername } = this.props; + + if (key) { + switch (key) { + case 'destination': + getAccountsWithUsername(value).then((res) => { + const isValid = res.includes(value); + + this.setState({ isUsernameValid: isValid }); + }); + this.setState({ [key]: value }); + break; + case 'amount': + if (!isNaN(value)) this.setState({ [key]: value }); + break; + + default: + this.setState({ [key]: value }); + break; + } + } + }; + + _handleTransferAction = () => { + const { transferToAccount } = this.props; + const { + from, destination, amount, memo, + } = this.state; + + transferToAccount(from, destination, amount, memo); + }; + + _renderInput = (placeholder, state) => ( + this._setState(state, text)} + value={this.state[state]} + placeholder={placeholder} + placeholderTextColor="#c1c5c7" + autoCapitalize="none" + keyboardType="numeric" + /> + ); + + _renderDropdown = accounts => ( + item.username)} + defaultText={accounts[0].username} + selectedOptionIndex={0} + onSelect={(index, value) => this.setState({ from: value })} + /> + ); + + _renderDescription = text => {text}; + + render() { + const { accounts, intl } = this.props; + const { destination, isUsernameValid, amount } = this.state; + + return ( + + + + + + + + + + this._renderDropdown(accounts)} + /> + this._renderInput( + intl.formatMessage({ id: 'transfer.to_placeholder' }), + 'destination', + ) + } + /> + this._renderInput('Amount', 'amount')} + /> + this._renderDescription(intl.formatMessage({ id: 'transfer.amount_desc' })) + } + /> + this._renderInput(intl.formatMessage({ id: 'transfer.memo_placeholder' }), 'memo') + } + /> + this._renderDescription(intl.formatMessage({ id: 'transfer.memo_desc' })) + } + /> + + + this.ActionSheet.show()} + > + NEXT + + + + (this.ActionSheet = o)} + options={[ + intl.formatMessage({ id: 'alert.confirm' }), + intl.formatMessage({ id: 'alert.cancel' }), + ]} + title={intl.formatMessage({ id: 'transfer.information' })} + cancelButtonIndex={1} + destructiveButtonIndex={0} + onPress={(index) => { + index === 0 ? this._handleTransferAction() : null; + }} + /> + + ); + } +} + +export default injectIntl(TransferView); diff --git a/src/screens/transfer/screen/transferStyles.js b/src/screens/transfer/screen/transferStyles.js index 7e2389661..3423d69e0 100644 --- a/src/screens/transfer/screen/transferStyles.js +++ b/src/screens/transfer/screen/transferStyles.js @@ -1,7 +1,56 @@ import EStyleSheet from 'react-native-extended-stylesheet'; export default EStyleSheet.create({ - styleName: { - // TODO: If we need default style. We can put there. + container: { + flex: 1, + backgroundColor: '$primaryBackgroundColor', + justifyContent: 'center', + alignItems: 'center', + }, + topContent: { + flexDirection: 'row', + flex: 1, + justifyContent: 'center', + alignItems: 'center', + }, + middleContent: { + flex: 3, + justifyContent: 'center', + alignItems: 'center', + }, + bottomContent: { + flex: 2, + justifyContent: 'center', + alignItems: 'center', + }, + input: { + borderWidth: 1, + borderColor: '$borderColor', + borderRadius: 10, + padding: 10, + }, + description: { + color: '$iconColor', + }, + button: { + width: '$deviceWidth / 3', + marginTop: 30, + justifyContent: 'center', + alignItems: 'center', + }, + buttonText: { + color: '$white', + }, + dropdown: { + borderWidth: 1, + borderColor: '$borderColor', + borderRadius: 10, + flex: 1, + padding: 10, + }, + icon: { + fontSize: 40, + color: '$iconColor', + marginHorizontal: 20, }, });