FileExplorerRow.jsx

import React from 'react';
import { Link } from 'react-router-dom';
import autoBind from 'react-autobind';
import { Button } from 'react-bootstrap'

import Log from '../../../Tools/LogTools'


export default class FileExplorerRow extends React.Component {

    constructor(props) {
        super(props);
        autoBind(this);
        Log("FileExplorerRow " + this.props.ID, "start");

        this.state = { ID: this.props.ID, Data: this.props.data, ShoSelect: this.props.ShoSelect };

        //Log("FileExplorerRow " + this.props.ID, "GetDataID: " + this.GetDataID());
    }

    componentWillReceiveProps(nextProps) {
        this.props = nextProps;

        if (this.refs.Select != undefined)
            this.refs.Select.checked = false;

        this.setState({
            ID: this.props.ID,
            Data: this.props.data,
            ShoSelect: this.props.ShoSelect
        });

        //Log("FileExplorerRow " + this.props.ID, "GetDataID: " + this.GetDataID());
    }

    GetDate() {
        return this.state.Data;
    }

    GetRowID() {
        return this.state.ID;
    }
    GetDataID() {
        return this.state.Data.ID;
    }
    IsCheked() {
        if (this.refs.Select == undefined)
            return false;

        return this.refs.Select.checked;
    }


    OnDirectoryClick() {
        this.props.ParentComponent.OnDirectoryClick(this.GetDataID());
    }

    render() {
        let state = this.state;
        let elem = state.Data;

        return (
            <tr>
                <td>{elem.ID}</td>
                {state.ShoSelect
                    ?
                    <td>
                        <input ref="Select" type="checkbox" />
                    </td>
                    : null
                }


                {(elem.Type === "RootDirectory" || elem.Type === "Directory")
                    ?
                    <td>
                        <Link to={`/?ID=${elem.ID}`}>
                            <Button id={elem.ID} onClick={this.OnDirectoryClick} variant="outline-dark">
                                {elem.Name}
                            </Button>
                        </Link>
                    </td>
                    : <td>{elem.Name}</td>
                }
                <td>{elem.Type}</td>
                <td>{elem.Size}</td>
            </tr>
        );

    }
}