repertory-ui/src/containers/MountItems/MountItem/MountItem.js

import React from 'react';
import './MountItem.css';
import {connect} from 'react-redux';
import DropDown from '../../../components/UI/DropDown/DropDown';
import Button from '../../../components/UI/Button/Button';
import Loader from 'react-loader-spinner';
import Text from '../../../components/UI/Text/Text';
import Grid from '../../../components/UI/Grid/Grid';
import configureImage from '../../../assets/images/configure.png';
import RootElem from '../../../components/UI/RootElem/RootElem';
import {displayConfiguration, removeRemoteMount, setProviderState} from '../../../redux/actions/mount_actions';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import { faTrashAlt} from '@fortawesome/free-solid-svg-icons';
import CheckBox from '../../../components/UI/CheckBox/CheckBox';

const mapStateToProps = (state, ownProps) => {
  return {
    MState: state.mounts.MountState[ownProps.provider],
    Platform: state.common.Platform,
    PState: state.mounts.ProviderState[ownProps.provider]
  };
};

const mapDispatchToProps = dispatch => {
  return {
    displayConfiguration: (provider, remote) => dispatch(displayConfiguration(provider, remote)),
    removeRemoteMount: provider => dispatch(removeRemoteMount(provider)),
    setProviderState: (provider, state) => dispatch(setProviderState(provider, state)),
  }
};

export default connect(mapStateToProps, mapDispatchToProps)(props => {
  const handleAutoMountChanged = e => {
    const state = {
      ...props.PState,
      AutoMount: e.target.checked,
    };
    props.setProviderState(props.provider, state);
  };

  const handleAutoRestartChanged = e => {
    const state = {
      ...props.PState,
      AutoRestart: e.target.checked,
    };
    props.setProviderState(props.provider, state);
  };

  let secondRow = 6;
  const pointer = {cursor: props.MState.AllowMount ? 'pointer' : 'no-drop'};
  const configButton = (
    <RootElem colSpan={4}
              rowSpan={6}>
      <img alt=''
           height={'16px'}
           onClick={props.MState.AllowMount ? ()=>props.displayConfiguration(props.provider, props.remote) : e=>{e.preventDefault();}}
           src={configureImage}
           style={{padding: 0, border: 0, margin: 0, ...pointer}}
           width={'16px'}/>
    </RootElem>
  );

  let inputColumnSpan;
  let inputControls;
  if (props.Platform === 'win32') {
    inputColumnSpan = 20;
    const index = props.MState.DriveLetters.indexOf(props.PState.MountLocation);
    inputControls = <DropDown changed={props.changed}
                              colSpan={inputColumnSpan}
                              disabled={!props.MState.AllowMount || props.MState.Mounted}
                              items={props.MState.DriveLetters}
                              row={secondRow}
                              rowSpan={7}
                              selected={index >= 0 ? props.PState.MountLocation : ''}/>;

  } else {
    inputColumnSpan = 64;
    inputControls = [];
    let key = 0;
    inputControls.push((
      <RootElem colSpan={inputColumnSpan - 8}
                key={'i' + key++}
                row={secondRow}
                rowSpan={7}>
        <input disabled={!props.MState.AllowMount || props.MState.Mounted}
               maxLength={4096}
               onChange={props.changed}
               size={4096}
               className={'MountItemInput'}
               type={'text'}
               value={props.PState.MountLocation}/>
      </RootElem>
    ));
    inputControls.push((
      <Button clicked={()=>props.browseClicked(props.provider, props.PState.MountLocation)}
              col={inputColumnSpan - 7}
              colSpan={7}
              disabled={props.MState.Mounted || !props.MState.AllowMount}
              key={'b' + key++}
              row={secondRow}
              rowSpan={7}>...</Button>
    ));
  }

  const buttonDisplay = props.MState.AllowMount ?
    (props.MState.Mounted ? 'Unmount' : 'Mount') :
    <Loader color={'var(--heading_text_color)'}
            height={19}
            type='Circles'
            width={19}/>;

  const actionsDisplay = (
    <Button clicked={()=>props.clicked(props.provider, props.remote, !props.MState.Mounted, props.PState.MountLocation)}
            col={inputColumnSpan + 2}
            colSpan={21}
            disabled={!props.MState.AllowMount}
            row={secondRow}
            rowSpan={7}>
      {buttonDisplay}
    </Button>);

  const autoMountControl = (
    <RootElem col={inputColumnSpan + 24}
              colSpan={28}
              row={secondRow}
              rowSpan={7}>
      <CheckBox changed={handleAutoMountChanged}
                checked={props.PState.AutoMount} label={'Auto-mount'}/>
    </RootElem>
  );

  const autoRestartControl = (
    <RootElem col={inputColumnSpan + 24 + 28}
              colSpan={24}
              row={secondRow}
              rowSpan={7}>
      <CheckBox changed={handleAutoRestartChanged}
                checked={props.PState.AutoRestart}
                label={'Restart'}/>
    </RootElem>
  );

  let removeControl;
  if (props.remote) {
    const removeDisabled = !props.MState.AllowMount || props.MState.Mounted;
    const removeStyle = {
      cursor: removeDisabled ? 'no-drop' : 'pointer'
    };
    const handleRemoveMount = () => {
      if (!removeDisabled) {
        props.removeRemoteMount(props.provider);
      }
    };
    removeControl = (
      <a href={'#'}
         col={dimensions=>dimensions.columns - 6}
         onClick={handleRemoveMount}
         row={secondRow + 3}
         style={removeStyle}>
      <FontAwesomeIcon icon={faTrashAlt}/>
    </a>);
  }

  return (
    <div className={'MountItem'}>
      <Grid noScroll>
        {configButton}
        <Text
          col={configButton ? 6 : 0}
          rowSpan={5}
          text={props.remote ? props.provider.substr(6) : props.provider}
          type={'Heading2'}/>
        {inputControls}
        {actionsDisplay}
        {autoMountControl}
        {autoRestartControl}
        {removeControl}
      </Grid>
    </div>
  );
});