seahub/frontend/src/components/dialog/lib-sub-folder-permission-dialog.js

import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { Modal, ModalHeader, ModalBody, TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap'; 
import { gettext } from '../../utils/constants';
import { Utils } from '../../utils/utils';
import LibSubFolderSetUserPermissionDialog from './lib-sub-folder-set-user-permission-dialog';
import LibSubFolderSetGroupPermissionDialog from './lib-sub-folder-set-group-permission-dialog';
import '../../css/share-link-dialog.css';
import '../../css/sub-folder-permission.css';

const propTypes = { 
  repoID: PropTypes.string.isRequired,
  repoName: PropTypes.string,
  folderPath: PropTypes.string,
  folderName: PropTypes.string,
  toggleDialog: PropTypes.func.isRequired
};

class LibSubFolderPermissionDialog extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      activeTab: 'userPermission'
    };
  }

  toggle = (tab) => {
    if (this.state.activeTab !== tab) {
      this.setState({activeTab: tab});
    }
  }

  renderContent = () => {
    let activeTab = this.state.activeTab;
    
    return (
      <Fragment>
        <div className="share-dialog-side">
          <Nav pills vertical>
            <NavItem>
              <NavLink className={activeTab === 'userPermission' ? 'active' : ''} onClick={this.toggle.bind(this, 'userPermission')}>
                {gettext('User Permission')}
              </NavLink>
            </NavItem>
            <NavItem>
              <NavLink className={activeTab === 'groupPermission' ? 'active' : ''} onClick={this.toggle.bind(this, 'groupPermission')}>
                {gettext('Group Permission')}
              </NavLink>
            </NavItem>
          </Nav>
        </div>
        <div className="share-dialog-main">
          <TabContent activeTab={this.state.activeTab}>
            <TabPane tabId="userPermission">
              <LibSubFolderSetUserPermissionDialog repoID={this.props.repoID} repoName={this.props.repoName} folderPath={this.props.folderPath}  />
            </TabPane>
            <TabPane tabId="groupPermission">
              <LibSubFolderSetGroupPermissionDialog repoID={this.props.repoID} repoName={this.props.repoName} folderPath={this.props.folderPath} />
            </TabPane>
          </TabContent>
        </div>
      </Fragment>
    );
  }

  render() {
    const { repoName, folderName } = this.props;
  
    return (
      <div>
        <Modal isOpen={true} style={{maxWidth: '980px'}} className="share-dialog" toggle={this.props.toggleDialog}>
          <ModalHeader toggle={this.props.toggleDialog}>
            <span dangerouslySetInnerHTML={{__html: repoName ? Utils.generateDialogTitle(gettext('{placeholder} Folder Permission'), repoName) : Utils.generateDialogTitle(gettext('Set {placeholder}\'s permission'), folderName)}}></span>
          </ModalHeader>
          <ModalBody className="dialog-list-container share-dialog-content">
            {this.renderContent()}
          </ModalBody>
        </Modal>
      </div>
    );
  }
}

LibSubFolderPermissionDialog.propTypes = propTypes;

export default LibSubFolderPermissionDialog;