@ brftech/ filex 反应
反应适配器 文件x
文件管理器。 细细的包裹 <filex-explorer> (单位:千美元)
@brftech/filex Web 组件) - 给您适当的反应道具和
骆驼活动处理器通过 @lit/react是因为 createComponent。 。 。 .
⚠ 此包包包 探索者 只有这个 filex 的另一个表面 - 即 连接面板, 添加存储和访问权限 s3/SFTP/FTPS/NFS/WebDAV上方的服务器为:
<filex-connections>内@brftech/filex并是一个简单的定制要素:直接在JSX中并设置config打开 和任何非反应元素一样.
安装
npm i @brftech/filex-react react react-dom
⚠
@brftech/filex-react0.55需要一个文件x 0.55服务器. 打开哪些文件进行编辑 (单位:千美元)edit_kinds),输入限制(limits)和版本行 (单位:千美元)release, (中文(简体) ),commit, (中文(简体) ),built)来自服务器的/api/files/capabilities; 软件包没有它自己的列表要倒下 回来,所以反对一个旧的服务器 没有提供编辑和什么都没有 作为办公文档打开。 用软件包更新服务器 (单位:千美元)API.md (英语)) (中文(简体) ).
⚠ 打印的应用程序 (单位:千美元)
ui.print, filex 0.55 从 filex 自己的指纹 打印页面,该页面为您页面中的探索者框架。 只有文件x, 其桌面 应用程序和服务器FILEX_FRAME_ANCESTORS可能设置该页面,例如 其它网站列出您的页面来源, 否则该应用程序会被告知 打印为unavailable(单位:千美元)安全头和框架) (中文(简体) ).
使用
import { FileManager } from '@brftech/filex-react';
export function App() {
return (
<FileManager
config={{
apiBase: 'https://files.example.com',
auth: { kind: 'bearer', token: '<jwt>' },
locale: 'tr',
theme: 'auto',
// The navigation panel (the "+ New" menu · Home / Shared with me /
// My shares / Recent / Starred / Trash · your tags, personal and team ·
// an Apps section · storages) and how much of the
// explorer to draw. Both are ordinary config keys - there is no
// React-specific switch for either.
sideNav: true,
connections: true,
// How much of the explorer to put on screen - a reduction, and only
// that. Two values: 'standard' (default) and 'simple' (one pane,
// list/grid only, no tab strip, no split pane). Anything else resolves
// to 'standard' with one console line naming it - the 'drive' profile
// was removed after v0.40.0; pass 'simple' instead. It does NOT decide
// the look: the "+ New" menu, the header search field with its ⌘K hint,
// the filter row, the Folders/Files sections and Details/Activity are
// what every embed draws now, with no string passed.
uiProfile: 'simple',
}}
onError={(e) => console.error(e.detail[0].message)}
onShareCreated={(e) => navigator.clipboard.writeText(e.detail[0].url)}
onFileOpened={(e) => console.log('opened', e.detail[0].basename)}
onUploadProgress={(e) => console.log(e.detail[0].percent + '%')}
onSelectionChange={(e) => console.log(e.detail[0].length, 'selected')}
/>
);
}
这个 config 道具接受完整 ExplorerConfig (从
@brftech/filex-core 为方便起见。 事件处理员接收本地
CustomEvents,和 ⚠ 有效载荷是 event.detail[0]: 基本习惯
元素发送 detail 设置到弹出参数列表中,故
event.detail.url 实值 undefined。导出 Filex*Detail 类型描述
这第一个元素.
样式
没有 CSS 导入 . 上面的片段是整个: 这个包 没有自己的样式表,你不需要其他地方的样式表.
@brftech/filex-react 覆盖 <filex-explorer> 来自
@brftech/filex,其捆绑
带入探索者的样式表 在 Java 脚本内 并附加到
<head> 一次,第一次一个元素上架。 床单是
@brftech/filex-core's, 字节的字节, 所以一个反应页面和一个 Vue 页面渲染
同一个探险家 - Vue 包装器是唯一导入一个
style.css,因为安装一个 SFC 没有进行可以
注射出来.
外观是 --fe-* 自定义属性。 设置在任何范围上方
组件 - :root,一个包装 div - 探索者如下:
:root {
--fe-primary: #2b7a41;
--fe-radius: 10px;
}
轻/暗 config.theme (单位:千美元)'light' 编号 : 'dark' 编号 : 'auto',以及 auto
读取主机 prefers-color-scheme) (中文(简体) ). 运出调色板在
docs/INTEGRATION.md - 说吧
和操作员自己的主题,由管理员组成 外观 屏幕,
同一条路 --fe-* 标志,所以一个嵌入 穿例
颜色没有被告知.
* 上行产品标记来自
config.brand(单位:千美元){ name, markUrl }而不是从一个槽。 挂载自定义元素的主机 无法填补其中的空格 - 这是一个 Vue 自定义元素限制, 而不是 监督 - 所以,配置入口是门.
纸条
富人取景(摩纳哥,美人鱼,Epub,xlsx,CodeMirror, 选项
并且通过动态的进口到达 被抓住,所以没有它们,建设
仅显示普通观众。 但是,一个捆绑商拒绝解决
导入无法找到, 因此 vite build 停止为
Rollup failed to resolve import "monaco-editor" 除非你要么安装
想要的或者说是外部的
// vite.config.js
export default {
build: {
rollupOptions: {
external: [
'monaco-editor', 'jszip', 'mermaid', 'epubjs', 'xlsx',
'@google/model-viewer', 'codemirror', /^@codemirror\//,
],
},
},
};
构建
pnpm build # tsc check + vite lib build → dist/filex-react.{js,cjs}
许可证
麻省理工学院