ProzillaOS/packages/apps/file-explorer/README.md
2024-07-17 20:13:17 +02:00

105 lines
No EOL
2.9 KiB
Markdown

<div align="center">
<br />
<p>
<a href="https://os.prozilla.dev/"><img src="https://os.prozilla.dev/assets/logo.svg?v=2" height="200" alt="ProzillaOS" /></a>
</p>
<p>
<a href="https://github.com/prozilla-os/ProzillaOS/blob/main/LICENSE.md"><img alt="License" src="https://img.shields.io/github/license/Prozilla/ProzillaOS?style=flat-square&color=FF4D5B&label=License"></a>
<a href="https://github.com/prozilla-os/ProzillaOS"><img alt="Stars" src="https://img.shields.io/github/stars/Prozilla/ProzillaOS?style=flat-square&color=FED24C&label=%E2%AD%90"></a>
<a href="https://github.com/prozilla-os/ProzillaOS"><img alt="Forks" src="https://img.shields.io/github/forks/Prozilla/ProzillaOS?style=flat-square&color=4D9CFF&label=Forks&logo=github"></a>
<a href="https://www.npmjs.com/package/prozilla-os"><img alt="NPM Version" src="https://img.shields.io/npm/v/prozilla-os?logo=npm&style=flat-square&label=prozilla-os&color=FF4D5B"></a>
</p>
</div>
## About
`@prozilla-os/file-explorer` is a standard ProzillaOS application for browsing files.
## Installation
`@prozilla-os/core` is required to run this application.
```sh
$ npm install @prozilla-os/core @prozilla-os/file-explorer
$ yarn add @prozilla-os/core @prozilla-os/file-explorer
$ pnpm add @prozilla-os/core @prozilla-os/file-explorer
```
## Usage
### Basic setup
```tsx
import { Desktop, ModalsView, ProzillaOS, Taskbar, WindowsView, AppsConfig } from "@prozilla-os/core";
import { fileExplorer } from "@prozilla-os/file-explorer";
function App() {
return (
<ProzillaOS
systemName="Example"
tagLine="Powered by ProzillaOS"
config={{
apps: new AppsConfig({
apps: [ fileExplorer ]
})
}}
>
<Taskbar/>
<WindowsView/>
<ModalsView/>
<Desktop/>
</ProzillaOS>
);
}
```
### Window options
```tsx
/**
* Initial path that the app will open
* @default "~" - Home directory
*/
path: string;
/**
* Defines in which mode the application is running
* 0: None
* 1: Single
* 2: Multiple
* @default 0
*/
selectorMode: number;
/**
* Footer component that will be displayed when `selectorMode` != 0
* Can be used to display a list of selected files for example
*/
Footer: React.FC;
/**
* Gets called each time the selection changes if `selectorMode` != 0
*/
onSelectionChange: (params: OnSelectionChangeParams) => void;
/**
* Gets called when the selection is finished if `selectorMode` != 0
*/
onSelectionFinish: Function;
```
## Links
- [Demo][demo]
- [Docs][docs]
- [GitHub][github]
- [npm][npm]
- [Discord][discord]
- [Ko-fi][ko-fi]
[demo]: https://os.prozilla.dev/file-explorer
[docs]: https://os.prozilla.dev/docs/reference/apps/file-explorer
[github]: https://github.com/prozilla-os/ProzillaOS/tree/main/packages/apps/file-explorer
[npm]: https://www.npmjs.com/package/@prozilla-os/file-explorer
[discord]: https://discord.gg/JwbyQP4tdz
[ko-fi]: https://ko-fi.com/prozilla