SHOW:
|
|
- or go back to the newest paste.
| 1 | import React from 'react'; | |
| 2 | import ReactDOM from 'react-dom'; | |
| 3 | import { connect, Provider } from 'react-redux';
| |
| 4 | import { createStore } from 'redux';
| |
| 5 | import PropTypes from 'prop-types'; | |
| 6 | ||
| 7 | const defaultState = {
| |
| 8 | type: 'company', | |
| 9 | name: 'безымянный', | |
| 10 | caption: '', | |
| 11 | logo: '???', | |
| 12 | }; | |
| 13 | ||
| 14 | const store = createStore((state = defaultState) => state); | |
| 15 | ||
| 16 | const BookletTypes = [ | |
| 17 | { type: 'Company', name: 'Профайл компании'},
| |
| 18 | { type: 'text', name: 'Текстовый буклет', disabled: true }
| |
| 19 | ]; | |
| 20 | ||
| 21 | const BookletType = ({ onChange, type }) => (
| |
| 22 | ||
| 23 | <h1>Тип: | |
| 24 | <select value={type} name="booklet-type" className="form-select" onChange={onChange}>
| |
| 25 | {BookletTypes.map((bt) => (
| |
| 26 | ||
| 27 | <option key={bt.type} value={bt.type} disabled={bt.disabled}>{bt.name}</option>
| |
| 28 | )) | |
| 29 | } | |
| 30 | </select> | |
| 31 | </h1> | |
| 32 | ); | |
| 33 | ||
| 34 | const BookletForm = ({ onTypeChange, type }) => (
| |
| 35 | <BookletType onChange={onTypeChange} type={type}>
| |
| 36 | <span>Лого: </span><input required name="company-logo" form="send-booklet" class="form-control" type="file" accept="image/*"/> | |
| 37 | ); | |
| 38 | ||
| 39 | const mapDispatchToProps = (dispatch) => {
| |
| 40 | ||
| 41 | return {
| |
| 42 | onTypeChange: (type) => {
| |
| 43 | ||
| 44 | dispatch({ newTypeChosen: type });
| |
| 45 | } | |
| 46 | }; | |
| 47 | }; | |
| 48 | ||
| 49 | const mapStateToProps = (state) => {
| |
| 50 | ||
| 51 | return { type: state.type };
| |
| 52 | }; | |
| 53 | ||
| 54 | ||
| 55 | const VisibileBookletForm = connect( | |
| 56 | mapStateToProps, | |
| 57 | mapDispatchToProps | |
| 58 | )(BookletForm); | |
| 59 | ||
| 60 | ReactDOM.render( | |
| 61 | <Provider store={store}>
| |
| 62 | <VisibileBookletForm/> | |
| 63 | </Provider>, | |
| 64 | document.getElementById('root')
| |
| 65 | ); | |
| 66 | ||
| 67 | BookletType.propTypes = {
| |
| 68 | onChange: PropTypes.func.isRequired | |
| 69 | }; | |
| 70 | ||
| 71 | ||
| 72 | /* | |
| 73 | ERROR in ./static/create-booklet.js | |
| 74 | Module build failed (from ./node_modules/babel-loader/lib/index.js): | |
| 75 | SyntaxError: /home/ilyaigpetrov/Repos/slog.foobar/static/create-booklet.js: Unex | |
| 76 | pected token (41:4) | |
| 77 | ||
| 78 | 39 | const mapDispatchToProps = (dispatch) => {
| |
| 79 | 40 | | |
| 80 | > 41 | return {
| |
| 81 | | ^ | |
| 82 | 42 | onTypeChange: (type) => {
| |
| 83 | 43 | | |
| 84 | 44 | dispatch({ newTypeChosen: type });
| |
| 85 | at _class.raise (/home/ilyaigpetrov/Repos/slog.foobar/node_modules/@babel/pa | |
| 86 | rser/lib/index.js:3893:15) | |
| 87 | ||
| 88 | ||
| 89 | */ |