Creada carpeta test donde se prueban los componentes antes

Creado un componente de paso y mostrar por pasos para cuando se añadan pisos en pruebas
jhderojasUVa · Oct 10, 2018 · 46397d9 · 46397d9
1 parent 1c62d3c
commit 46397d9
Show file tree

Hide file tree

Showing 3 changed files with 206 additions and 1 deletion.
diff --git a/js/components/addpisoComponent.js b/js/components/addpisoComponent.js
@@ -1,6 +1,9 @@
 // Añadir piso Component
 // Este componente reamente son 4 componentes, es decir, es un componente padre con 4 componentes hijos
 
+// Revisar
+// https://codepen.io/gaearon/pen/vXdGmd?editors=1010
+
 // Pasador (donde estan todos los pasos), el componente padre y almacen de datos
 class Pasador extends React.Component {
   constructor(props) {
@@ -177,7 +180,7 @@ class Paso1 extends React.Component {
     });
 
     // Elemento para el selector de ciudad
-    let selectorCiudad, selector Barrio;
+    let selectorCiudad, selectorBarrio;
     if (this.state.isCiudadSelected == true) {
       selectorCiudad = ciudades.map((ciudad, index) => {
         return(
@@ -187,6 +190,12 @@ class Paso1 extends React.Component {
     } else {
       selectorBarrio = barriosCiudades.map(());
     }
+    // Si ha seleccionado la ciudad ponemos sus barrios
+    if (selectorCiudad) {
+      selectorBarrio = ciudad.filter((elemento) => {
+        return ;
+      });
+    }
 
     // Elemento para si el piso esta libre o no
     let estaLibrePiso = () => {

diff --git a/testReact/multi/index.html b/testReact/multi/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title></title>
+    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
+    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+    <!-- Babel -->
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+    <!-- Polyfill -->
+    <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <!-- carga del componente -->
+    <script type="text/babel" src="./multiple.js"></script>
+  </body>
+</html>
diff --git a/testReact/multi/multipleComponent.js b/testReact/multi/multipleComponent.js
@@ -0,0 +1,178 @@
+class Breadcrumb extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+
+  render() {
+    return(
+      <div className="breadcrumb">
+        Paso por props = {this.props.paso}<br />
+      </div>
+    )
+  }
+}
+
+class Paso1 extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      caca: 1
+    }
+
+  }
+
+  render() {
+    if (this.props.visible === true) {
+      return (
+        <div className="Paso1">
+
+        <h5>Paso1</h5>
+        <button onClick={this.props.change1a2}>Ir al paso 2</button>
+        </div>
+      );
+    } else {
+      return (
+        <h5>Paso 1 no visible</h5>
+      );
+    }
+
+  }
+}
+
+class Paso2 extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      caca: 1
+    }
+
+  }
+
+  render() {
+    if (this.props.visible === true) {
+      return (
+        <div className="Paso2">
+
+        <h5>Paso2</h5>
+        <button onClick={this.props.change2a1}>Ir al paso 1</button>
+        <button onClick={this.props.change2a3}>Ir al paso 3</button>
+        </div>
+      );
+    } else {
+      return (
+        <h5>Paso 2 no visible</h5>
+      );
+    }
+
+  }
+}
+
+class Paso3 extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      caca: 1
+    }
+
+  }
+
+  render() {
+    if (this.props.visible === true) {
+      return (
+        <div className="Paso3">
+
+        <h5>Paso3</h5>
+        <button onClick={this.props.change3a2}>Ir al paso 2</button>
+        </div>
+      );
+    } else {
+      return (
+        <h5>Paso 3 no visible</h5>
+      );
+    }
+
+  }
+}
+
+class Pasador extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      visiblePaso1: true,
+      visiblePaso2: false,
+      visiblePaso3: false,
+      paso: 1
+    }
+
+    this.change1a2 = this.change1a2.bind(this);
+    this.change2a3 = this.change2a3.bind(this);
+
+    this.change2a1 = this.change2a1.bind(this);
+    this.change3a2 = this.change3a2.bind(this);
+  }
+
+  change1a2() {
+    this.setState ({
+      visiblePaso1: false,
+      visiblePaso2: true,
+      visiblePaso3: false,
+      paso: 2
+    });
+  }
+
+  change2a3() {
+    this.setState ({
+      visiblePaso1: false,
+      visiblePaso2: false,
+      visiblePaso3: true,
+      paso: 3
+    });
+  }
+
+  change2a1() {
+    this.setState ({
+      visiblePaso1: true,
+      visiblePaso2: false,
+      visiblePaso3: false,
+      paso: 1
+    });
+  }
+
+  change3a2() {
+    this.setState ({
+      visiblePaso1: false,
+      visiblePaso2: true,
+      visiblePaso3: false,
+      paso: 2
+    });
+  }
+
+  render() {
+    return (
+      <div className="App">
+
+      <h1>Pasador</h1>
+      <Breadcrumb paso={this.state.paso} />
+      <Paso1 visible={this.state.visiblePaso1} change1a2={this.change1a2} />
+      <Paso2 visible={this.state.visiblePaso2} change2a3={this.change2a3} change2a1={this.change2a1} />
+      <Paso3 visible={this.state.visiblePaso3} change3a2={this.change3a2}/>
+      </div>
+    );
+  }
+}
+
+function App() {
+
+  return (
+    <div>
+      <Pasador />
+    </div>
+  );
+}
+
+ReactDOM.render(<App />, document.getElementById('root'));