From 898c17dcce62affd2a70bd45e163938696b66add Mon Sep 17 00:00:00 2001 From: Andrei Date: Wed, 27 Jun 2018 16:35:34 +0300 Subject: [PATCH 1/3] =?UTF-8?q?=D0=B1=D0=BE=D0=BB=D0=B2=D0=B0=D0=BD=D0=BA?= =?UTF-8?q?=D0=B0+?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .idea/workspace.xml | 568 ++++++++++++++++++++ src/components/App/App.js | 9 + src/components/CardForm/CardForm.js | 9 + src/components/PersonalForm/PersonalForm.js | 9 + src/components/PersonalForm/index.js | 1 + src/components/Step/Step.js | 9 + src/components/Title/Title.js | 9 + src/index.js | 2 +- 8 files changed, 615 insertions(+), 1 deletion(-) create mode 100644 .idea/workspace.xml create mode 100644 src/components/App/App.js create mode 100644 src/components/CardForm/CardForm.js create mode 100644 src/components/PersonalForm/PersonalForm.js create mode 100644 src/components/PersonalForm/index.js create mode 100644 src/components/Step/Step.js create mode 100644 src/components/Title/Title.js diff --git a/.idea/workspace.xml b/.idea/workspace.xml new file mode 100644 index 0000000..e70b7e1 --- /dev/null +++ b/.idea/workspace.xml @@ -0,0 +1,568 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + true + + true + true + + + true + DEFINITION_ORDER + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -267,7 +286,7 @@ - + @@ -292,13 +311,13 @@ - - + - + @@ -307,7 +326,7 @@ - + @@ -389,17 +408,9 @@ - - - - - - - - @@ -474,13 +485,10 @@ - + - - - - - + + @@ -491,61 +499,136 @@ + + + + + + + + + + + + + + - + + + + + - + - - + + - - + + + + + + - - + + + + + + - + - - + + - + - - + + + + + - + - - + + - + - - + + + + + + + + + + + + + + + + + + + + + + + + + - - + + + + + - + - - + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/index.html b/public/index.html index ed0ebaf..6ec8d43 100644 --- a/public/index.html +++ b/public/index.html @@ -4,37 +4,14 @@ - - - React App + homework_3 -
- +
diff --git a/src/components/App/App.js b/src/components/App/App.js index 10797b3..e8f56fe 100644 --- a/src/components/App/App.js +++ b/src/components/App/App.js @@ -1,9 +1,97 @@ -import React from 'react' +import React, { Fragment } from "react"; +import PersonalForm from "../PersonalForm"; +import CardForm from "../CardForm"; +import Step from "../Step"; + +import "./App.css"; + +export default class App extends React.Component { + state = { + cardNumber: "", + email: "", + firstName: "", + lastName: "", + steps: ["Персональная информация", "Информация о карте", "Завершение"], + step: 2 + }; -export default class App extends React.Component{ render() { - return
+ const stepsComponent = (text, index) => + ( + + {text} + + ); + + return +
+ {this.state.steps.map((step, i) => stepsComponent(step, i))} +
+ + {this.renderPersonalForm()} + +
+ +
+ ; + } + + // + + isFormCommitable = () => { + const { firstName, lastName, email, cardNumber, step } = this.state; + + if (step === 1) return !!firstName && !!lastName && email.includes("@"); + if (step === 2) return /\d{16}/.test(cardNumber); + return false; + }; + + renderPersonalForm = () => { + const { step, firstName, lastName, email, cardNumber } = this.state; + + return
+ {step === 1 && } + {step === 2 && } + {step === 3 &&

Поздравляем!

} +
; + }; + + handleTabClick = step => { + this.setState({ + step + }); + }; + + handleClickNextForm = event => { + this.setState((prevState) => ({ + step: prevState.step < 3 ? prevState.step + 1 : prevState.step + })); + }; -
+ handleChangeForm = (name, value) => { + this.setState({ + [name]: value + }) } } \ No newline at end of file diff --git a/src/components/CardForm/CardForm.js b/src/components/CardForm/CardForm.js index 4413f6b..65367fd 100644 --- a/src/components/CardForm/CardForm.js +++ b/src/components/CardForm/CardForm.js @@ -1,9 +1,27 @@ -import React from 'react' +import React from "react"; +import "./CardForm.css"; -export default class CardForm extends React.Component{ +export default class CardForm extends React.Component { render() { - return
+ const { cardNumber } = this.props; -
+ return
+

Номер карты

+ +
; } + + handleChangeForm = event => { + const { onChange } = this.props; + if (typeof onChange === "function") { + const { name, value } = event.target; + if (value.length > 16) return; + onChange(name, value); + } + }; } \ No newline at end of file diff --git a/src/components/PersonalForm/PersonalForm.js b/src/components/PersonalForm/PersonalForm.js index 10797b3..3e197fc 100644 --- a/src/components/PersonalForm/PersonalForm.js +++ b/src/components/PersonalForm/PersonalForm.js @@ -1,9 +1,39 @@ -import React from 'react' +import React from "react"; +import "./PersonalForm.css"; -export default class App extends React.Component{ +export default class App extends React.Component { render() { - return
+ const { firstName, lastName, email } = this.props; -
+ return
+

Персональная информация

+ + + +
; } + + handleChangeForm = (event) => { + const { onChange} = this.props; + if (typeof onChange === "function") { + const {name, value} = event.target; + onChange(name, value); + } + }; + } \ No newline at end of file diff --git a/src/components/Step/Step.js b/src/components/Step/Step.js index a995d06..a41e9cb 100644 --- a/src/components/Step/Step.js +++ b/src/components/Step/Step.js @@ -1,9 +1,24 @@ -import React from 'react' +import React from "react"; +import "./Step.css"; -export default class Step extends React.Component{ +export default class Step extends React.Component { render() { - return
+ const { title, number,isClickable, isSelected } = this.props; -
+ return
+

{number}

+

{title}

+
; } + + handleClick = (event) => { + const { onClick, isClickable, number } = this.props; + + if (isClickable && typeof onClick === "function") { + onClick(number); + } + }; } \ No newline at end of file diff --git a/src/components/Title/Title.css b/src/components/Title/Title.css index 80f9079..cf69b0f 100644 --- a/src/components/Title/Title.css +++ b/src/components/Title/Title.css @@ -1,3 +1,34 @@ -.title { +.tab-panel { + display: flex; + justify-content: space-between; +} + +.step { + display: flex; + align-items: center; + padding: 0 20px; + font-size: 13px; +} +.step__number { + background-color: #eee; + padding: 5px; + width: 20px; + height: 20px; + border-radius: 50%; + line-height: 20px; + text-align: center; + flex: 0 0 20px; } + +.step-selected { + background-color: #ccf; +} + +p { + display: block; + -webkit-margin-before: 1em; + -webkit-margin-after: 1em; + -webkit-margin-start: 0; + -webkit-margin-end: 0 +} \ No newline at end of file diff --git a/src/components/Title/Title.js b/src/components/Title/Title.js index 76b4f9e..091a836 100644 --- a/src/components/Title/Title.js +++ b/src/components/Title/Title.js @@ -1,9 +1,21 @@ -import React from 'react' +import React, { Fragment } from "react"; +import "./Title.css"; -export default class Title extends React.Component{ +export default class Title extends React.Component { render() { - return
- -
+ return
+
+

1

+

Personal information

+
+
+

2

+

Card information

+
+
+

3

+

Finish

+
+
; } } \ No newline at end of file diff --git a/src/index.js b/src/index.js index 0f20633..989d762 100644 --- a/src/index.js +++ b/src/index.js @@ -3,4 +3,4 @@ import ReactDOM from 'react-dom'; import App from './components/App'; -ReactDOM.render(, document.getElementById('root')); +ReactDOM.render(, document.getElementById('container')); From 6f4f09da80cfd813fa10152adad8626d920c4034 Mon Sep 17 00:00:00 2001 From: Andrei Date: Sat, 30 Jun 2018 13:27:35 +0300 Subject: [PATCH 3/3] =?UTF-8?q?=D0=B2=D1=82=D0=BE=D1=80=D0=BE=D0=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .idea/codeStyles/Project.xml | 37 +++ .idea/codeStyles/codeStyleConfig.xml | 6 + .idea/inspectionProfiles/Project_Default.xml | 6 + .idea/june-loftschool-react-homeworks.iml | 12 + .idea/misc.xml | 6 + .idea/modules.xml | 8 + .idea/vcs.xml | 6 + .idea/workspace.xml | 213 ++++++------------ public/index.html | 2 +- src/components/App/App.js | 39 +--- src/components/App/App.test.js | 10 +- src/components/CardForm/CardForm.js | 6 +- src/components/CardForm/CardForm.test.js | 8 +- .../PersonalForm/PersonalForm.test.js | 12 +- src/components/Step/Step.js | 2 +- src/components/Title/Title.css | 31 --- src/components/Title/Title.js | 34 +-- src/index.js | 2 +- 18 files changed, 206 insertions(+), 234 deletions(-) create mode 100644 .idea/codeStyles/Project.xml create mode 100644 .idea/codeStyles/codeStyleConfig.xml create mode 100644 .idea/inspectionProfiles/Project_Default.xml create mode 100644 .idea/june-loftschool-react-homeworks.iml create mode 100644 .idea/misc.xml create mode 100644 .idea/modules.xml create mode 100644 .idea/vcs.xml diff --git a/.idea/codeStyles/Project.xml b/.idea/codeStyles/Project.xml new file mode 100644 index 0000000..0eded9e --- /dev/null +++ b/.idea/codeStyles/Project.xml @@ -0,0 +1,37 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/.idea/codeStyles/codeStyleConfig.xml b/.idea/codeStyles/codeStyleConfig.xml new file mode 100644 index 0000000..6e6eec1 --- /dev/null +++ b/.idea/codeStyles/codeStyleConfig.xml @@ -0,0 +1,6 @@ + + + + \ No newline at end of file diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml new file mode 100644 index 0000000..c6cc8c8 --- /dev/null +++ b/.idea/inspectionProfiles/Project_Default.xml @@ -0,0 +1,6 @@ + + + + \ No newline at end of file diff --git a/.idea/june-loftschool-react-homeworks.iml b/.idea/june-loftschool-react-homeworks.iml new file mode 100644 index 0000000..24643cc --- /dev/null +++ b/.idea/june-loftschool-react-homeworks.iml @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/.idea/misc.xml b/.idea/misc.xml new file mode 100644 index 0000000..24eb271 --- /dev/null +++ b/.idea/misc.xml @@ -0,0 +1,6 @@ + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..777e8ac --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..94a25f7 --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.idea/workspace.xml b/.idea/workspace.xml index 4449410..ab0429e 100644 --- a/.idea/workspace.xml +++ b/.idea/workspace.xml @@ -1,17 +1,7 @@ - - - - - - - - - - - + @@ -28,7 +18,7 @@ - + @@ -36,46 +26,31 @@ - + - - - - - + + - - + + - - - - - + + - - + + - - - - - - - - - - - + + - + @@ -146,11 +121,11 @@ - -