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 new file mode 100644 index 0000000..ab0429e --- /dev/null +++ b/.idea/workspace.xml @@ -0,0 +1,582 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + true + + true + true + + + true + DEFINITION_ORDER + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ; + } + + onChangeForm = 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/CardForm/CardForm.test.js b/src/components/CardForm/CardForm.test.js index 61a17c0..53ac1c4 100644 --- a/src/components/CardForm/CardForm.test.js +++ b/src/components/CardForm/CardForm.test.js @@ -14,7 +14,7 @@ describe('Компонент CardForm', () => { expect(wrapper.find('.card-form input[name="cardNumber"]')).toHaveLength(1); }); - it('onChange input[name="cardNumber"] должен вызывать handleChangeForm', () => { + it('onChange input[name="cardNumber"] должен вызывать onChangeForm', () => { const onChangeFormMock = jest.fn(); const wrapper = shallow( , @@ -35,12 +35,12 @@ describe('Компонент CardForm', () => { , ); - describe('handleChangeForm', () => { + describe('onChangeForm', () => { it('Присутствует', () => { - expect(wrapper.instance().handleChangeForm).toBeDefined(); + expect(wrapper.instance().onChangeForm).toBeDefined(); }); it('При вызове вызывает функцию onChangeForm переданную через props, аргументами name и value становятся значения из event.target', () => { - wrapper.instance().handleChangeForm({ + wrapper.instance().onChangeForm({ target: { name: 'test-name', value: 'test-value' }, }); expect(onChangeFormMock).toHaveBeenCalledTimes(1); diff --git a/src/components/PersonalForm/PersonalForm.js b/src/components/PersonalForm/PersonalForm.js new file mode 100644 index 0000000..3e197fc --- /dev/null +++ b/src/components/PersonalForm/PersonalForm.js @@ -0,0 +1,39 @@ +import React from "react"; +import "./PersonalForm.css"; + +export default class App extends React.Component { + render() { + 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/PersonalForm/PersonalForm.test.js b/src/components/PersonalForm/PersonalForm.test.js index a372857..402f74f 100644 --- a/src/components/PersonalForm/PersonalForm.test.js +++ b/src/components/PersonalForm/PersonalForm.test.js @@ -20,7 +20,7 @@ describe('Компонент PersonalForm', () => { expect(wrapper.find('.personal-form input[name="email"]')).toHaveLength(1); }); - it('onChange input[name="firstName"] должен вызывать handleChangeForm', () => { + it('onChange input[name="firstName"] должен вызывать onChangeForm', () => { const onChangeFormMock = jest.fn(); const wrapper = shallow(); @@ -31,7 +31,7 @@ describe('Компонент PersonalForm', () => { expect(onChangeFormMock).toHaveBeenCalledTimes(1); expect(onChangeFormMock).toHaveBeenLastCalledWith('test-name', 'test-value'); }); - it('onChange input[name="lastName"] должен вызывать handleChangeForm', () => { + it('onChange input[name="lastName"] должен вызывать onChangeForm', () => { const onChangeFormMock = jest.fn(); const wrapper = shallow(); @@ -42,7 +42,7 @@ describe('Компонент PersonalForm', () => { expect(onChangeFormMock).toHaveBeenCalledTimes(1); expect(onChangeFormMock).toHaveBeenLastCalledWith('test-name', 'test-value'); }); - it('onChange input[name="email"] должен вызывать handleChangeForm', () => { + it('onChange input[name="email"] должен вызывать onChangeForm', () => { const onChangeFormMock = jest.fn(); const wrapper = shallow(); @@ -59,12 +59,12 @@ describe('Компонент PersonalForm', () => { const onChangeFormMock = jest.fn(); const wrapper = shallow(); - describe('handleChangeForm', () => { + describe('onChangeForm', () => { it('Присутствует', () => { - expect(wrapper.instance().handleChangeForm).toBeDefined(); + expect(wrapper.instance().onChangeForm).toBeDefined(); }); it('При вызове вызывает функцию onChangeForm переданную через props, аргументами name и value становятся значения из event.target', () => { - wrapper.instance().handleChangeForm({ + wrapper.instance().onChangeForm({ target: { name: 'test-name', value: 'test-value' }, }); expect(onChangeFormMock).toHaveBeenCalledTimes(1); diff --git a/src/components/PersonalForm/index.js b/src/components/PersonalForm/index.js new file mode 100644 index 0000000..90825d2 --- /dev/null +++ b/src/components/PersonalForm/index.js @@ -0,0 +1 @@ +export { default } from './PersonalForm'; diff --git a/src/components/Step/Step.js b/src/components/Step/Step.js new file mode 100644 index 0000000..e0d3239 --- /dev/null +++ b/src/components/Step/Step.js @@ -0,0 +1,24 @@ +import React from "react"; +import "./Step.css"; + +export default class Step extends React.Component { + render() { + 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..ce4fd52 100644 --- a/src/components/Title/Title.css +++ b/src/components/Title/Title.css @@ -1,3 +1,3 @@ -.title { +.tab-panel { } diff --git a/src/components/Title/Title.js b/src/components/Title/Title.js new file mode 100644 index 0000000..1603b0b --- /dev/null +++ b/src/components/Title/Title.js @@ -0,0 +1,29 @@ +import React from "react"; +import Step from "../Step" +import "./Title.css"; + +export default class Title extends React.Component { + state = { + steps: ["Персональная информация", "Информация о карте", "Завершение"], + }; + + render() { + const stepsComponent = (text, index) => + ( + + {text} + + ); + + return
+ {this.state.steps.map((step, i) => stepsComponent(step, i))} +
; + } +} \ No newline at end of file diff --git a/src/index.js b/src/index.js index f7c918f..0f20633 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import App from 'components/App'; +import App from './components/App'; ReactDOM.render(, document.getElementById('root'));