Table - MutakamwoyoCloud/MCloud GitHub Wiki
Este es el otro componente que se incluye en Peticiones. Su finalidad es mostrar la tabla con los resultados de búsquedas que ya se han realizado previamente, mostrando en cada una de las filas los distintos contenidos relacionados con la misma. Cuando pulsemos en alguna de ellas el sistema nos rediccionará al componente Result que es encargado de mostrar el contenido.
constructor(props) {
super(props);
this.rows = this.props.rows;
this.handleSubmit = this.handleSubmit.bind(this);
}
Crea el componente.
handleSubmit(event) {
var params = {};
params.success = function(request,response){
browserHistory.push({
pathname: '/result',
state: { data: response }
});
}
params.error = function(response){
console.log(response);
}
params.data = event.target['id'];
params.type = "wiki";
if(params.data !== "")
CommonActions.list(params, "getData");
event.preventDefault();
}
Cuando seleccionamos una fila de la tabla, se llama a esta función que nos trae el contenido con el que esta relacionado, si todo funciona correctamente se redirige al componente Result por medio del browserHistory.push añadiendo el salto a esa "ruta" (componente Result) y pasándole la información del contenido.
render(){
this.rows = this.props.rows;
var length = 10;
var that = this;
if(this.rows){
var rows = Object.keys(this.rows).map(function (key) { return that.rows[key]; });
length = this.rows.length;
return(
<Table
rowHeight={50}
rowsCount={length}
width={1200}
height={50*(length+1)}
headerHeight={50}>
<Column
header={<Cell>{"Description"}</Cell>}
cell={<TextCellName data={rows} col="data" col2="name"/>}
width={600}
fixed={true}
align={'center'}
/>
<Column
header={<Cell>{"leer"}</Cell>}
cell={({rowIndex, ...props}) => (
<Button id={rows[rowIndex]["name"]} onClick={this.handleSubmit}>Read</Button>
)}
width={600}
fixed={true}
align={'center'}
/>
</Table>
);
}
else
return(<div>"Enter search..."</div>);
}
Esta función muestra la tabla de resultados en caso de que los haya (if(this.rows)) si no simplemente mostrará un texto indicando al usuario que introduzca una nueva búsqueda.