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
};