From 0d9ebed774cd191ba79a983738509bc7591ac16b Mon Sep 17 00:00:00 2001 From: Rafael Date: Sun, 7 Mar 2021 18:38:45 +0100 Subject: [PATCH] Added Material and simple functional stepper --- package-lock.json | 219 +++++++++++++++++++++++++++++ package.json | 1 + src/App.tsx | 11 +- src/actions/CentralActions.ts | 9 ++ src/components/Central.tsx | 104 +++++++++++++- src/containers/Central.tsx | 15 +- src/state/globalState.ts | 4 +- src/styledComponents/Central.js | 5 +- src/styledComponents/Footer-jss.ts | 16 +-- 9 files changed, 362 insertions(+), 22 deletions(-) create mode 100644 src/actions/CentralActions.ts diff --git a/package-lock.json b/package-lock.json index 03ffb0b..a660d33 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1161,6 +1161,11 @@ "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz", "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==" }, + "@emotion/hash": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz", + "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==" + }, "@emotion/is-prop-valid": { "version": "0.7.3", "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.7.3.tgz", @@ -1399,6 +1404,174 @@ "@types/yargs": "^13.0.0" } }, + "@material-ui/core": { + "version": "4.11.3", + "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.11.3.tgz", + "integrity": "sha512-Adt40rGW6Uds+cAyk3pVgcErpzU/qxc7KBR94jFHBYretU4AtWZltYcNsbeMn9tXL86jjVL1kuGcIHsgLgFGRw==", + "requires": { + "@babel/runtime": "^7.4.4", + "@material-ui/styles": "^4.11.3", + "@material-ui/system": "^4.11.3", + "@material-ui/types": "^5.1.0", + "@material-ui/utils": "^4.11.2", + "@types/react-transition-group": "^4.2.0", + "clsx": "^1.0.4", + "hoist-non-react-statics": "^3.3.2", + "popper.js": "1.16.1-lts", + "prop-types": "^15.7.2", + "react-is": "^16.8.0 || ^17.0.0", + "react-transition-group": "^4.4.0" + } + }, + "@material-ui/styles": { + "version": "4.11.3", + "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.3.tgz", + "integrity": "sha512-HzVzCG+PpgUGMUYEJ2rTEmQYeonGh41BYfILNFb/1ueqma+p1meSdu4RX6NjxYBMhf7k+jgfHFTTz+L1SXL/Zg==", + "requires": { + "@babel/runtime": "^7.4.4", + "@emotion/hash": "^0.8.0", + "@material-ui/types": "^5.1.0", + "@material-ui/utils": "^4.11.2", + "clsx": "^1.0.4", + "csstype": "^2.5.2", + "hoist-non-react-statics": "^3.3.2", + "jss": "^10.5.1", + "jss-plugin-camel-case": "^10.5.1", + "jss-plugin-default-unit": "^10.5.1", + "jss-plugin-global": "^10.5.1", + "jss-plugin-nested": "^10.5.1", + "jss-plugin-props-sort": "^10.5.1", + "jss-plugin-rule-value-function": "^10.5.1", + "jss-plugin-vendor-prefixer": "^10.5.1", + "prop-types": "^15.7.2" + }, + "dependencies": { + "csstype": { + "version": "2.6.16", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.16.tgz", + "integrity": "sha512-61FBWoDHp/gRtsoDkq/B1nWrCUG/ok1E3tUrcNbZjsE9Cxd9yzUirjS3+nAATB8U4cTtaQmAHbNndoFz5L6C9Q==" + }, + "jss": { + "version": "10.5.1", + "resolved": "https://registry.npmjs.org/jss/-/jss-10.5.1.tgz", + "integrity": "sha512-hbbO3+FOTqVdd7ZUoTiwpHzKXIo5vGpMNbuXH1a0wubRSWLWSBvwvaq4CiHH/U42CmjOnp6lVNNs/l+Z7ZdDmg==", + "requires": { + "@babel/runtime": "^7.3.1", + "csstype": "^3.0.2", + "indefinite-observable": "^2.0.1", + "is-in-browser": "^1.1.3", + "tiny-warning": "^1.0.2" + }, + "dependencies": { + "csstype": { + "version": "3.0.7", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.7.tgz", + "integrity": "sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g==" + } + } + }, + "jss-plugin-camel-case": { + "version": "10.5.1", + "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.5.1.tgz", + "integrity": "sha512-9+oymA7wPtswm+zxVti1qiowC5q7bRdCJNORtns2JUj/QHp2QPXYwSNRD8+D2Cy3/CEMtdJzlNnt5aXmpS6NAg==", + "requires": { + "@babel/runtime": "^7.3.1", + "hyphenate-style-name": "^1.0.3", + "jss": "10.5.1" + } + }, + "jss-plugin-default-unit": { + "version": "10.5.1", + "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.5.1.tgz", + "integrity": "sha512-D48hJBc9Tj3PusvlillHW8Fz0y/QqA7MNmTYDQaSB/7mTrCZjt7AVRROExoOHEtd2qIYKOYJW3Jc2agnvsXRlQ==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.5.1" + } + }, + "jss-plugin-global": { + "version": "10.5.1", + "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.5.1.tgz", + "integrity": "sha512-jX4XpNgoaB8yPWw/gA1aPXJEoX0LNpvsROPvxlnYe+SE0JOhuvF7mA6dCkgpXBxfTWKJsno7cDSCgzHTocRjCQ==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.5.1" + } + }, + "jss-plugin-nested": { + "version": "10.5.1", + "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.5.1.tgz", + "integrity": "sha512-xXkWKOCljuwHNjSYcXrCxBnjd8eJp90KVFW1rlhvKKRXnEKVD6vdKXYezk2a89uKAHckSvBvBoDGsfZrldWqqQ==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.5.1", + "tiny-warning": "^1.0.2" + } + }, + "jss-plugin-props-sort": { + "version": "10.5.1", + "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.5.1.tgz", + "integrity": "sha512-t+2vcevNmMg4U/jAuxlfjKt46D/jHzCPEjsjLRj/J56CvP7Iy03scsUP58Iw8mVnaV36xAUZH2CmAmAdo8994g==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.5.1" + } + }, + "jss-plugin-rule-value-function": { + "version": "10.5.1", + "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.5.1.tgz", + "integrity": "sha512-3gjrSxsy4ka/lGQsTDY8oYYtkt2esBvQiceGBB4PykXxHoGRz14tbCK31Zc6DHEnIeqsjMUGbq+wEly5UViStQ==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.5.1", + "tiny-warning": "^1.0.2" + } + }, + "jss-plugin-vendor-prefixer": { + "version": "10.5.1", + "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.5.1.tgz", + "integrity": "sha512-cLkH6RaPZWHa1TqSfd2vszNNgxT1W0omlSjAd6hCFHp3KIocSrW21gaHjlMU26JpTHwkc+tJTCQOmE/O1A4FKQ==", + "requires": { + "@babel/runtime": "^7.3.1", + "css-vendor": "^2.0.8", + "jss": "10.5.1" + } + } + } + }, + "@material-ui/system": { + "version": "4.11.3", + "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.11.3.tgz", + "integrity": "sha512-SY7otguNGol41Mu2Sg6KbBP1ZRFIbFLHGK81y4KYbsV2yIcaEPOmsCK6zwWlp+2yTV3J/VwT6oSBARtGIVdXPw==", + "requires": { + "@babel/runtime": "^7.4.4", + "@material-ui/utils": "^4.11.2", + "csstype": "^2.5.2", + "prop-types": "^15.7.2" + }, + "dependencies": { + "csstype": { + "version": "2.6.16", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.16.tgz", + "integrity": "sha512-61FBWoDHp/gRtsoDkq/B1nWrCUG/ok1E3tUrcNbZjsE9Cxd9yzUirjS3+nAATB8U4cTtaQmAHbNndoFz5L6C9Q==" + } + } + }, + "@material-ui/types": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.1.0.tgz", + "integrity": "sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==" + }, + "@material-ui/utils": { + "version": "4.11.2", + "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.11.2.tgz", + "integrity": "sha512-Uul8w38u+PICe2Fg2pDKCaIG7kOyhowZ9vjiC1FsVwPABTW8vPPKfF6OvxRq3IiBaI1faOJmgdvMG7rMJARBhA==", + "requires": { + "@babel/runtime": "^7.4.4", + "prop-types": "^15.7.2", + "react-is": "^16.8.0 || ^17.0.0" + } + }, "@mrmlnc/readdir-enhanced": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz", @@ -1812,6 +1985,14 @@ "redux": "^4.0.0" } }, + "@types/react-transition-group": { + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.1.tgz", + "integrity": "sha512-vIo69qKKcYoJ8wKCJjwSgCTM+z3chw3g18dkrDfVX665tMH7tmbDxEAnPdey4gTlwZz5QuHGzd+hul0OVZDqqQ==", + "requires": { + "@types/react": "*" + } + }, "@types/stack-utils": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz", @@ -3703,6 +3884,11 @@ "shallow-clone": "^0.1.2" } }, + "clsx": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz", + "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==" + }, "co": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", @@ -4707,6 +4893,15 @@ "utila": "~0.4" } }, + "dom-helpers": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.0.tgz", + "integrity": "sha512-Ru5o9+V8CpunKnz5LGgWXkmrH/20cGKwcHwS4m73zIvs54CN9epEmT/HLqFJW3kXpakAFkEdzgy1hzlJe3E4OQ==", + "requires": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + } + }, "dom-serializer": { "version": "0.2.2", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz", @@ -6889,6 +7084,14 @@ "integrity": "sha512-oDM0kUSNFC31ShNxHKUyfZKy8ZeXZBWMjMdZHKLOk13uvT27VTL/QzRGfRUcevJhpkZAvlhPYuXkF7eNWrtyxQ==", "dev": true }, + "indefinite-observable": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/indefinite-observable/-/indefinite-observable-2.0.1.tgz", + "integrity": "sha512-G8vgmork+6H9S8lUAg1gtXEj2JxIQTo0g2PbFiYOdjkziSI0F7UYBiVwhZRuixhBCNGczAls34+5HJPyZysvxQ==", + "requires": { + "symbol-observable": "1.2.0" + } + }, "indent-string": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz", @@ -9908,6 +10111,11 @@ "ts-pnp": "^1.1.6" } }, + "popper.js": { + "version": "1.16.1-lts", + "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1-lts.tgz", + "integrity": "sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA==" + }, "portfinder": { "version": "1.0.28", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz", @@ -11449,6 +11657,17 @@ "workbox-webpack-plugin": "4.3.1" } }, + "react-transition-group": { + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz", + "integrity": "sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==", + "requires": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + } + }, "read-pkg": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz", diff --git a/package.json b/package.json index 00057b1..c269f2e 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { + "@material-ui/core": "^4.11.3", "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.5.0", "@testing-library/user-event": "^7.2.1", diff --git a/src/App.tsx b/src/App.tsx index 587a26b..2acd2d4 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,24 +1,27 @@ import React from "react"; import "./App.css"; - import { Provider } from "react-redux"; import { createStore, Reducer, Action } from "redux"; import GlobalState, { initialState } from "./state/globalState"; - import Header from "./styledComponents/Header"; import Central from "./styledComponents/Central"; import Footer from "./styledComponents/Footer"; import Carousel from "./styledComponents/Carousel"; +import { CentralActions, StepAction } from "./actions/CentralActions"; -const reducer: Reducer = ( +const reducer: Reducer = ( state: GlobalState = initialState, - action: Action + action: StepAction ) => { + if (action.type === CentralActions.CHANGE_STEP) { + return { ...state, current: action.payload }; + } return state; }; const store = createStore(reducer, initialState); function App() { + console.log(store.getState()); return (
diff --git a/src/actions/CentralActions.ts b/src/actions/CentralActions.ts new file mode 100644 index 0000000..8b825d3 --- /dev/null +++ b/src/actions/CentralActions.ts @@ -0,0 +1,9 @@ +import { Action } from "redux"; + +export enum CentralActions { + CHANGE_STEP = "CHANGE_STEP", +} + +export interface StepAction extends Action { + payload: number; +} diff --git a/src/components/Central.tsx b/src/components/Central.tsx index 9d5501c..9defd12 100644 --- a/src/components/Central.tsx +++ b/src/components/Central.tsx @@ -1,6 +1,11 @@ import React from "react"; -import help from "../assets/img/system_help.png"; +import Stepper from '@material-ui/core/Stepper'; +import Step from '@material-ui/core/Step'; +import StepLabel from '@material-ui/core/StepLabel'; +import Button from '@material-ui/core/Button'; +import Typography from '@material-ui/core/Typography'; +/* function Central(props: any) { return (
@@ -152,8 +157,103 @@ function Central(props: any) {
+ asdasdasdad ); } -export default Central; +*/ +/** CONTAINER **/ +interface ICentralProps { + current: number; + setActiveStep: (arg0: number) => void; +} + +interface ICentralState { + +} + +class Centrals extends React.Component { + steps = ['Seleccionar oficina', 'Seleccionar Área', 'Datos del interesado', 'Datos del representante', 'Otros datos']; + + constructor(props: ICentralProps) { + super(props); + } + + isStepOptional(step: number) { + return step === 3 + } + + handleNext= ()=> { + console.log(this.props) + this.props.setActiveStep(this.props.current + 1); + console.log(this.props.current) + }; + + handleBack=()=>{ + this.props.setActiveStep(this.props.current - 1); + }; + getStepContent(step: number) { + switch (step) { + case 0: + return 'Select campaign settings...'; + case 1: + return 'What is an ad group anyways?'; + case 2: + return 'This is the bit I really care about!'; + case 3: + return '3!'; + case 4: + return '4!'; + default: + return 'Unknown step'; + } + } + render() { + return( +
+ + {this.steps.map((label, index) => { + const stepProps: { completed?: boolean } = {}; + const labelProps: { optional?: React.ReactNode } = {}; + if (this.isStepOptional(index)) { + labelProps.optional = Opcional; + } + return ( + + {label} + + ); + })} + +
+ {this.props.current === this.steps.length ? ( +
+ + Has completado todos los pasos + +
+ ) : ( +
+ {this.getStepContent(this.props.current)} +
+ + +
+
+ )} +
+
+ ) + } +} + +export default Centrals; diff --git a/src/containers/Central.tsx b/src/containers/Central.tsx index ab32ee2..ac7b05b 100644 --- a/src/containers/Central.tsx +++ b/src/containers/Central.tsx @@ -1,7 +1,16 @@ import GlobalState from "../state/globalState"; import { connect } from "react-redux"; -import Central from "../components/Central"; +import Centrals from "../components/Central"; +import { Dispatch } from "redux"; +import { CentralActions } from "../actions/CentralActions"; -const mapStateToProps = (state: GlobalState) => state; +const mapStateToProps = (state: GlobalState) => { + return { current: state.current }; +}; +const mapDispatchToProps = (dispatch: Dispatch) => ({ + setActiveStep: (nextStep: number) => { + dispatch({ type: CentralActions.CHANGE_STEP, payload: nextStep }); + }, +}); -export default connect(mapStateToProps)(Central); +export default connect(mapStateToProps, mapDispatchToProps)(Centrals); diff --git a/src/state/globalState.ts b/src/state/globalState.ts index 8e6c617..0dcbea6 100644 --- a/src/state/globalState.ts +++ b/src/state/globalState.ts @@ -1,6 +1,5 @@ -import { Action } from "redux"; - interface GlobalState { + current: number; link1: string; place: string; type: string; @@ -9,6 +8,7 @@ interface GlobalState { export default GlobalState; export const initialState: GlobalState = { + current: 0, link1: "Salto contenido", place: "Sevilla", type: "CITA PREVIA PARA TRÁMITE DE CONDUCTORES / VEHÍCULOS", diff --git a/src/styledComponents/Central.js b/src/styledComponents/Central.js index 17bfc4c..56748a2 100644 --- a/src/styledComponents/Central.js +++ b/src/styledComponents/Central.js @@ -1,6 +1,5 @@ import injectSheet from 'react-jss' -import Central from '../containers/Central' +import Centrals from '../containers/Central' import classes from './Central-jss.ts' - -export default injectSheet(classes)(Central) \ No newline at end of file +export default injectSheet(classes)(Centrals) diff --git a/src/styledComponents/Footer-jss.ts b/src/styledComponents/Footer-jss.ts index ec52fc4..445049a 100644 --- a/src/styledComponents/Footer-jss.ts +++ b/src/styledComponents/Footer-jss.ts @@ -1,10 +1,10 @@ const classes = { - foot: { - backgroundColor: '#ebebeb', - padding: '1em', - textAlign: 'right', - color: 'black', - } -} + foot: { + backgroundColor: "#ebebeb", + padding: "1em", + textAlign: "right", + color: "black", + }, +}; -export default classes; \ No newline at end of file +export default classes;