React Nenav

ReactReact-reduxRedux

Descrizione

React-nenav è un componente per la vostre applicazioni React. Permette di mostrare un percorso e navigare all'interno come in un visualizzatore di cartelle. Si possono inoltre aprire file e visualizzarne il contenuto.

React-nenav è realizzato con Redux, React e React-redux. Tutti gli stili e plugin per l'evidenziazione di sintassi possono essere inclusi.

Installazione

Il metodo più semplice per utilizzare react-nenav è installarlo tramite NPM e includerlo nel vostro progetto React (utilizzando Browserify, Webpack, etc).

È possibile inoltre utilizzare una versione pre-compilata includendo dist/react-nenav.js all'interno della vostra pagina. Se utilizzato in questo modo, assicurarsi di aver incluso le sue dipendenze e averle rese disponibili come variabili globali.

npm install react-nenav --save

Utilizzo

È necessario fornire al componente Nenav una vista dei file e una funzione che verrà invocata quando l'utente vorrà visualizzare un file.

Un esempio della struttura di una vista dei file:

{
  /* root dir */
  data:
    /* root dir content */
    "dir_name": {
      type: "dir",
      data: {
        /* root/dir_name content */
        "dir_name": { ... }
        "dir_name": { ... }
        ...
        "file_name": { ... }
      }
    },
    "file_name": {
      type: "file",
      size: "size in byte",
      date: "last modified date, it will be show as is"
    },
    ... /* other files or directories*/
}

Un oggetto di questo tipo può essere generate anche tramite PHP con il seguente codice:

<?php
  function path_data ($path) {
    $data = array ( 'type' => 'dir', 'data' => array () );

    if ( is_dir ($path) ) {
      if ( $dh = opendir ($path) ) {
        while ( ($file = readdir ($dh)) !== false ) {
            if ( $file == '.' or $file == '..' ) continue;

            if ( is_dir ($path.'/'.$file) ) {
              $data['data'][$file] = path_data ($path.'/'.$file);
            }
            else {
              $data['data'][$file] = array (
                'type' => 'file',
                'size' => filesize ($path.'/'.$file),
                'date' => date ("d-m-Y", filemtime($path.'/'.$file))
              );
            }
        }
        closedir($dh);
      }
    }

    return $data;
  }

  $path = '.';

  echo json_encode (path_data ($path));
?>

Inoltre è necessaria la funzione per leggere il file richiesto. Questa funzione sarà del tipo:

const getFileData = (file_path, resultFunc) => {
  $.get ('getFile.php', { request: file_path },
    (result) => {
      ...
      resultFunc (result.file_contents);
    }
  );
}

Un altro esempio su come realizzare questa azione in PHP:

<?php
  $path = '.'.some_security ($_GET['file']);

  function some_security ($path) {
    return implode ('/', array_diff (explode ('/', $path), array ('.', '..')));
  }

  echo file_get_contents ($path);
?>

Fatto questa è possibile utilizzare già da subito Nenav nel seguente modo:

import Nenav from 'react-nenav';

<Nenav data={file_list} dataFunc={getFileData} />

Note

Naturalmente la configurazione di Nenav non è solo con data e dataFunc, è possibile personalizzarla molto di più.

Cambiare lo stile

Nenav ha al suo interno due configurazione per il suo stile: una per Zurb Foundation e una per Twitter Bootstrap. È possibile cambiare con la proprietà style='foundation' o style='bootstrap'. Si può anche creare un proprio stile seguendo questo esempio ( la configurazione di Foundation ):

const exampleStyle = {
    main_area: "small-12",
  link: '',
    navbar: {
        area: "small-12",
      btn: "primary button",
    btn_group: "small button-group"
    },
    folder_view: {
        table: "table-scroll hover",
        name: 'text-left',
        type: 'text-right',
        size: 'text-right',
        date: 'text-center'
    },
  file: {
    main_area: 'callout',
    pre: 'prettyprint',
    date: 'subheader'
  },
  icon: {
    file: 'fi-page',
    folder: 'fi-folder',
    arrow_up: 'fi-arrow-up',
    arrow_down: 'fi-arrow-down',
    back: 'float-right fi-x'
  }
};

Successiva si potrà usarla con style={exampleStyle}.

Cambiare il percorso iniziale

Per cambiare il percorso iniziale di visualizzazione utilizzare: path='/percorso/iniziale/sottocartella'.

Cambiare l'ordine iniziale degli elementi

Si può impostare l'ordine iniziale degli elementi tramite un oggetto del tipo: { attr: attribute, type: sort_type }. attribute può assumere i valori: name, type, size, date e sort_type i valori asc o desc.

Aggiungere una funzione quando viene mostrato un file

Quando l'utente apre un file, Nenav, lo mostra al posto della lista dei file. Quando questa azione è eseguita è possibile specificare una funzione da invocare ( per esempio per eseguire l'evidenziazione di sintassi tramite un plugin quale può essere prettify ) nel seguente modo: fileMountFunc={my_function}

Riepilogo

All'interno della demo è utilizzata la seguente configurazione:

const nenav_conf = {
    path: '/src',
    data: path_data,
    data_sort: { attr: 'name', type: 'asc' },
    dataFunc: getFileData,
    fileMountFunc: PR.prettyPrint,
    style: 'foundation'
};

Si può passare al componente Nenav con: <Nenav {...nenav_conf} />. Nota: Quando si vuole impostare solo il percorso principale utilizzare una stringa vuota e non /.

Configurazione predefinita

const initState = {
  path: '',
  style: foundationStyle,
  data: { data: {} },
  data_sort: {
    attr: 'type',
    type: 'asc'
  },
  dataFunc: console.log,
  list_type: 'dir',
  file_info: null,
  onMount: null
};

Navigazione Sorgenti