From dfd444a90328bfdab1153de4dfce0c09bea51130 Mon Sep 17 00:00:00 2001 From: Jack Mallers Date: Thu, 26 Oct 2017 01:32:36 -0500 Subject: [PATCH] feature(step 2): style step 2 --- app/components/ChannelForm/ChannelForm.js | 5 ++- app/components/ChannelForm/StepTwo.js | 35 +++++++++++++++++ app/components/ChannelForm/StepTwo.scss | 39 +++++++++++++++++++ app/reducers/channelform.js | 13 ++++++- app/routes/channels/components/Channels.js | 1 - .../channels/containers/ChannelsContainer.js | 3 ++ package.json | 1 + yarn.lock | 15 +++++++ 8 files changed, 107 insertions(+), 5 deletions(-) create mode 100644 app/components/ChannelForm/StepTwo.js create mode 100644 app/components/ChannelForm/StepTwo.scss diff --git a/app/components/ChannelForm/ChannelForm.js b/app/components/ChannelForm/ChannelForm.js index 3d0bba1d..cde3b653 100644 --- a/app/components/ChannelForm/ChannelForm.js +++ b/app/components/ChannelForm/ChannelForm.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types' import ReactModal from 'react-modal' import StepOne from './StepOne' +import StepTwo from './StepTwo' import Footer from './Footer' import styles from './ChannelForm.scss' @@ -12,19 +13,19 @@ const ChannelForm = ({ closeChannelForm, changeStep, setNodeKey, + setLocalAmount, channelFormHeader, channelFormProgress, peers }) => { const renderStep = () => { const { step } = channelform - console.log('setNodeKey: ', setNodeKey) switch (step) { case 1: return case 2: - return 'Step Two' + return case 3: return 'Step 3' default: diff --git a/app/components/ChannelForm/StepTwo.js b/app/components/ChannelForm/StepTwo.js new file mode 100644 index 00000000..1ba801a0 --- /dev/null +++ b/app/components/ChannelForm/StepTwo.js @@ -0,0 +1,35 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import AutosizeInput from 'react-input-autosize' +import CurrencyIcon from 'components/CurrencyIcon' +import styles from './StepTwo.scss' + +class StepTwo extends Component { + render() { + const { local_amt, setLocalAmount } = this.props + console.log('local_amt: ', local_amt) + return ( +
+ + this.input = input} + size='' + value={local_amt} + onChange={event => setLocalAmount(event.target.value)} + id='amount' + style={{ width: isNaN((local_amt.length + 1) * 55) ? 140 : (local_amt.length + 1) * 55 }} + /> +
+ ) + } +} + +StepTwo.propTypes = {} + +export default StepTwo diff --git a/app/components/ChannelForm/StepTwo.scss b/app/components/ChannelForm/StepTwo.scss new file mode 100644 index 00000000..2a1249e5 --- /dev/null +++ b/app/components/ChannelForm/StepTwo.scss @@ -0,0 +1,39 @@ +@import '../../variables.scss'; + +.container { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + margin-bottom: 50px; + padding: 20px; + + label { + margin-left: -25px; + height: 200px; + color: $main; + + svg { + width: 65px; + height: 65px; + } + + svg[data-icon='ltc'] { + margin-right: 10px; + + g { + transform: scale(1.75) translate(-5px, -5px); + } + } + } + + input[type=number] { + color: $main; + width: 30px; + height: 200px; + font-size: 100px; + border: none; + outline: 0; + -webkit-appearance: none; + } +} \ No newline at end of file diff --git a/app/reducers/channelform.js b/app/reducers/channelform.js index 656f20fa..4b2ba58f 100644 --- a/app/reducers/channelform.js +++ b/app/reducers/channelform.js @@ -4,8 +4,8 @@ import { createSelector } from 'reselect' const initialState = { isOpen: false, node_key: '', - local_amt: '', - push_amt: '', + local_amt: 0, + push_amt: 0, step: 1 } @@ -16,6 +16,7 @@ export const OPEN_CHANNEL_FORM = 'OPEN_CHANNEL_FORM' export const CLOSE_CHANNEL_FORM = 'CLOSE_CHANNEL_FORM' export const SET_NODE_KEY = 'SET_NODE_KEY' +export const SET_LOCAL_AMOUNT = 'SET_LOCAL_AMOUNT' export const CHANGE_STEP = 'CHANGE_STEP' @@ -43,6 +44,13 @@ export function setNodeKey(node_key) { } } +export function setLocalAmount(local_amt) { + return { + type: SET_LOCAL_AMOUNT, + local_amt + } +} + export function changeStep(step) { return { type: CHANGE_STEP, @@ -64,6 +72,7 @@ const ACTION_HANDLERS = { [CLOSE_CHANNEL_FORM]: state => ({ ...state, isOpen: false }), [SET_NODE_KEY]: (state, { node_key }) => ({ ...state, node_key }), + [SET_LOCAL_AMOUNT]: (state, { local_amt }) => ({ ...state, local_amt }), [CHANGE_STEP]: (state, { step }) => ({ ...state, step }), diff --git a/app/routes/channels/components/Channels.js b/app/routes/channels/components/Channels.js index 37a0b5be..2b4b919e 100644 --- a/app/routes/channels/components/Channels.js +++ b/app/routes/channels/components/Channels.js @@ -35,7 +35,6 @@ class Channels extends Component { channelFormProps } = this.props - console.log('channelFormProps: ', channelFormProps) return (
diff --git a/app/routes/channels/containers/ChannelsContainer.js b/app/routes/channels/containers/ChannelsContainer.js index ceda9628..84f749dc 100644 --- a/app/routes/channels/containers/ChannelsContainer.js +++ b/app/routes/channels/containers/ChannelsContainer.js @@ -11,6 +11,7 @@ import { openChannelForm, changeStep, setNodeKey, + setLocalAmount, closeChannelForm, channelFormSelectors } from 'reducers/channelform' @@ -27,6 +28,7 @@ const mapDispatchToProps = { openChannelForm, closeChannelForm, setNodeKey, + setLocalAmount, changeStep, @@ -50,6 +52,7 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => { closeChannelForm: dispatchProps.closeChannelForm, changeStep: dispatchProps.changeStep, setNodeKey: dispatchProps.setNodeKey, + setLocalAmount: dispatchProps.setLocalAmount, channelform: stateProps.channelform, channelFormHeader: stateProps.channelFormHeader, diff --git a/package.json b/package.json index 55d254a6..fc27b684 100644 --- a/package.json +++ b/package.json @@ -213,6 +213,7 @@ "react-dom": "^15.6.1", "react-hot-loader": "3.0.0-beta.6", "react-inlinesvg": "^0.6.2", + "react-input-autosize": "^2.0.1", "react-modal": "^2.2.2", "react-moment": "^0.6.0", "react-redux": "^5.0.5", diff --git a/yarn.lock b/yarn.lock index f5e2db20..8d5ab8e0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2286,6 +2286,14 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.3, create-hmac@^1.1.4: safe-buffer "^5.0.1" sha.js "^2.4.8" +create-react-class@^15.5.2: + version "15.6.2" + resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.2.tgz#cf1ed15f12aad7f14ef5f2dfe05e6c42f91ef02a" + dependencies: + fbjs "^0.8.9" + loose-envify "^1.3.1" + object-assign "^4.1.1" + create-react-class@^15.5.3: version "15.5.3" resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.5.3.tgz#fb0f7cae79339e9a179e194ef466efa3923820fe" @@ -7120,6 +7128,13 @@ react-inlinesvg@^0.6.2: httpplease "^0.16" once "^1.4" +react-input-autosize@^2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-2.0.1.tgz#e92190497b4026c2780ad0f2fd703c835ba03e33" + dependencies: + create-react-class "^15.5.2" + prop-types "^15.5.8" + react-modal@^2.2.2: version "2.2.4" resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-2.2.4.tgz#a32483c3555bd7677f09bca65d82f51da3abcbc0"